@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-401f0d79.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-ae6966f7.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-f539e65a.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-22968fba.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 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', 'DM Sans Fallback', ui-sans-serif, system-ui, -apple-system, sans-serif;
--font-serif: 'Newsreader', '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: 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;
--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;
--toc-avatar-thumb: 2.35rem;
--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-golden-plan-soft: 0 0 0 1px var(--color-golden), 0 0.35rem 0.9rem color-mix(in oklch, var(--color-golden) 24%, 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 {
.field {
& > * + * {
margin-block-start: var(--space-1);
}
}
.field__label {
color: var(--color-ink-muted);
display: block;
font-size: var(--text-small);
font-weight: 650;
}
.field__hint {
color: var(--color-ink-subtle);
font-size: var(--text-small);
line-height: var(--line-readable);
}
.input,
.select {
--_input-border: var(--color-border-strong);
--_input-bg: var(--color-surface);
--_input-ring: transparent;
appearance: none;
border: var(--hairline) solid var(--_input-border);
background-color: var(--_input-bg);
color: var(--color-ink);
display: block;
inline-size: 100%;
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-medium);
font-size: var(--input-readable-font-size);
line-height: var(--line-ui);
transition:
border-color var(--duration-fast),
box-shadow var(--duration-fast);
outline: none;
box-shadow: 0 0 0 0 var(--_input-ring);
}
.input:focus,
.select:focus {
--_input-border: var(--color-ink);
box-shadow: var(--focus-ring);
}
.input::placeholder {
color: var(--color-ink-subtle);
}
.input:disabled,
.select:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.select,
select.input {
padding-inline-end: var(--space-8);
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right var(--space-3) center;
background-size: 12px 8px;
cursor: pointer;
}
.input.input--code {
font-family: var(--font-mono);
font-size: var(--text-extra-large);
letter-spacing: var(--letter-code);
text-align: center;
border-radius: var(--radius-large);
}
.input-group {
display: flex;
align-items: stretch;
}
.input-group__addon {
display: inline-flex;
align-items: center;
gap: var(--space-1-5);
padding-inline: var(--space-3);
background: var(--color-canvas);
border: var(--hairline) solid var(--color-border-strong);
border-inline-end: 0;
border-radius: var(--radius-medium) 0 0 var(--radius-medium);
color: var(--color-ink-muted);
font-size: var(--text-medium);
font-weight: 600;
white-space: nowrap;
user-select: none;
}
.input-group .input {
border-start-start-radius: 0;
border-end-start-radius: 0;
flex: 1;
min-inline-size: 0;
}
.input-group .input:focus {
z-index: 1;
}
.form-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-4);
& .form-grid__fluid {
flex: 1 1 12rem;
}
}
@media (max-width: 720px) {
.form-grid {
grid-template-columns: 1fr;
}
}
.checkbox-label {
display: flex;
align-items: center;
gap: var(--space-2);
cursor: pointer;
}
.textarea {
width: 100%;
border: var(--hairline) solid var(--color-border-strong);
border-radius: var(--radius-medium);
padding: var(--space-2) var(--space-3);
font: inherit;
font-size: var(--input-readable-font-size);
line-height: var(--line-comfortable);
resize: vertical;
color: var(--color-ink);
background: var(--color-surface);
outline: none;
transition:
border-color var(--duration-fast),
box-shadow var(--duration-fast);
&:focus {
border-color: var(--color-ink);
box-shadow: var(--focus-ring);
}
&::placeholder {
color: var(--color-ink-subtle);
}
&:disabled {
opacity: 0.5;
cursor: not-allowed;
}
}
.form-card {
margin-top: var(--space-6);
background: var(--color-surface);
border-radius: var(--radius-card);
box-shadow: var(--shadow-stack);
padding: var(--space-6);
}
.form {
display: flex;
flex-direction: column;
gap: var(--space-5);
}
.form-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--space-2-5);
flex-wrap: wrap;
}
.form-actions.form-actions--destructive {
justify-content: space-between;
}
.error-list {
margin: var(--space-2) 0 0 var(--space-4);
font-size: var(--text-medium);
}
.locked-facts {
background: var(--color-canvas);
border-radius: var(--radius-em-extra-large);
overflow: hidden;
box-shadow: var(--shadow-soft);
}
.classroom-context__section-label {
font-size: var(--text-tiny);
font-weight: 700;
letter-spacing: var(--letter-widest);
text-transform: uppercase;
color: var(--color-ink-muted);
margin-bottom: var(--space-2-5);
}
.profile-strip {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-3);
> div {
background: var(--color-canvas);
border-radius: var(--radius-em-extra-large);
padding: var(--space-3-5);
box-shadow: var(--shadow-soft);
}
strong {
display: block;
color: var(--color-ink);
font-size: var(--text-base);
font-weight: 900;
line-height: var(--line-compact);
letter-spacing: var(--letter-snug);
}
span {
display: block;
margin-top: var(--space-1);
color: var(--color-ink-muted);
font-size: var(--text-extra-small);
font-weight: 650;
text-transform: uppercase;
letter-spacing: var(--letter-expanded);
}
}
.classroom-context__stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-3);
}
.classroom-context__stat {
background: var(--color-canvas);
border-radius: var(--radius-em-large);
padding: var(--space-3) var(--space-3-5);
text-align: center;
.classroom-context__stat-value {
font-size: var(--text-extra-large);
font-weight: 900;
letter-spacing: var(--letter-title);
color: var(--color-ink);
line-height: var(--line-tight);
}
.classroom-context__stat-value--compact {
font-size: var(--text-base);
letter-spacing: var(--letter-snug);
line-height: var(--line-snug);
}
.cm-stat__lbl {
font-size: var(--text-extra-small);
font-weight: 600;
color: var(--color-ink-muted);
margin-top: var(--space-1);
}
}
.classroom-context__needs {
display: flex;
flex-direction: column;
gap: var(--space-2);
.classroom-context__need-item {
display: flex;
align-items: flex-start;
gap: var(--space-2-5);
padding: var(--space-2-5) var(--space-3-5);
background: var(--color-canvas);
border-radius: var(--radius-em-medium);
}
.classroom-context__need-badge {
font-size: var(--text-tiny);
font-weight: 700;
letter-spacing: var(--letter-wide);
padding: var(--space-0-5) var(--space-2);
border-radius: var(--radius-pill);
white-space: nowrap;
flex-shrink: 0;
margin-top: var(--space-0-5);
&.classroom-context__need-badge--contexto {
background: var(--color-accent-soft);
color: var(--color-accent);
}
&.classroom-context__need-badge--bncc {
background: var(--color-positive-soft);
color: var(--color-positive);
}
}
.classroom-context__need-text {
font-size: var(--text-medium);
color: var(--color-ink);
line-height: var(--line-readable);
strong {
color: var(--color-ink);
font-weight: 700;
}
}
}
.classroom-context__history {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.classroom-context__plan-row {
display: flex;
align-items: center;
gap: var(--space-3);
font-size: var(--text-medium);
.cm-plan-row__thumb {
width: var(--thumb-mini-width);
aspect-ratio: var(--thumb-plan-height-ratio);
border-radius: var(--rule-width);
background: var(--color-canvas);
flex-shrink: 0;
box-shadow: var(--shadow-hairline-strong);
padding: var(--rule-width);
display: flex;
flex-direction: column;
gap: calc(var(--hairline) * 1.5);
}
.cm-plan-row__title {
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: var(--color-ink);
font-weight: 500;
}
.classroom-context__plan-date {
font-size: var(--text-small);
color: var(--color-ink-muted);
white-space: nowrap;
font-family: var(--font-mono);
}
.tag {
margin-left: 0;
}
}
.code-cell {
font-family: var(--font-mono);
}
.usage-bar {
}
}
@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 {
.page {
max-inline-size: var(--container-page);
margin-inline: auto;
padding-block: var(--space-8) var(--space-16);
padding-inline: var(--space-7);
}
.page__crumbs {
font-size: var(--text-small);
color: var(--color-ink-muted);
margin-bottom: var(--space-4);
display: flex;
align-items: center;
gap: var(--space-1-5);
}
.page__crumbs a {
font-weight: 600;
color: var(--color-ink);
text-decoration: none;
}
@media (any-hover: hover) {
.page__crumbs a:hover {
text-decoration: underline;
}
}
.page__crumbs .page__crumbs-separator {
color: var(--color-line-muted);
}
.page__eyebrow {
font-size: var(--text-extra-small);
font-weight: 700;
letter-spacing: var(--letter-widest);
text-transform: uppercase;
color: var(--color-ink-muted);
margin-bottom: var(--space-2);
}
.page__title {
font-size: clamp(var(--text-page-title-min), 3.2vw, var(--text-page-title-max));
font-weight: 900;
letter-spacing: var(--letter-page-title);
line-height: var(--line-tight);
text-wrap: balance;
color: var(--color-ink);
}
.page__title--mb {
margin-bottom: var(--space-7);
}
.page__title-group {
display: flex;
align-items: center;
gap: var(--space-3);
min-width: 0;
flex-wrap: wrap;
}
.page__title-group .tag {
margin-left: 0;
}
.page__lede {
margin-top: var(--space-3-5);
font-size: var(--text-base);
color: var(--color-ink);
max-width: var(--container-copy);
line-height: var(--line-comfortable);
text-wrap: pretty;
}
.page__head {
margin-bottom: var(--space-7);
}
.page__head--mb {
margin-bottom: var(--space-7);
}
.page__subtle {
margin-top: var(--space-1-5);
color: var(--color-ink-muted);
font-size: var(--text-medium);
}
.page__header-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
margin-bottom: var(--space-6);
}
@media (max-width: 640px) {
.page__header-row {
align-items: flex-start;
flex-direction: column;
}
}
.user-details {
display: flex;
flex-wrap: wrap;
gap: var(--space-2) var(--space-4);
margin-top: var(--space-2);
font-size: var(--text-small);
color: var(--color-ink-muted);
}
.user-details__item:not(:last-child)::after {
content: "·";
margin-left: var(--space-4);
color: var(--color-border);
}
.page--flush {
padding-top: 0;
}
.lede-metrics {
max-width: var(--container-copy-wide);
}
.lede-metric {
display: inline;
font-weight: 700;
& strong {
color: var(--color-ink);
font-weight: 900;
}
}
.lede-metric--up,
.lede-metric--good {
color: var(--color-positive);
}
.lede-metric--down {
color: var(--color-danger);
}
.action-row {
display: flex;
gap: var(--space-2-5);
margin-bottom: var(--space-8);
flex-wrap: wrap;
}
.action-row--spaced {
margin-top: var(--space-4);
}
.grid {
display: grid;
grid-template-columns: minmax(0,1fr) var(--container-sidebar);
gap: var(--space-12);
align-items: start;
}
@media (max-width: 980px) {
.grid {
grid-template-columns: 1fr;
}
}
.section-stack {
display: grid;
gap: var(--space-7);
}
.aside {
font-size: var(--text-medium);
color: var(--color-ink-muted);
position: sticky;
top: var(--sticky-topbar-offset);
& h3 {
font-size: var(--text-extra-small);
font-weight: 800;
letter-spacing: var(--letter-widest);
text-transform: uppercase;
color: var(--color-ink);
margin-bottom: var(--space-2-5);
}
& p {
margin-bottom: var(--space-4);
line-height: var(--line-loose);
}
& hr {
border: 0;
border-top: var(--hairline) solid var(--color-border);
margin: var(--space-5) 0;
}
}
.invite-code {
display: inline-flex;
align-items: center;
width: fit-content;
padding: var(--space-1-5) var(--space-2);
border-radius: var(--radius-large);
background: var(--color-accent-soft);
color: var(--color-accent);
border: 1px dashed var(--color-accent);
box-shadow: var(--shadow-soft);
user-select: all;
font-family: var(--font-mono);
font-size: var(--text-medium);
font-weight: 700;
letter-spacing: var(--letter-wide);
cursor: pointer;
transition: all 200ms ease;
@media (any-hover: hover) {
&:hover {
border-style: solid;
border-color: var(--color-accent);
background: var(--color-accent-soft);
box-shadow: var(--shadow-medium);
}
}
}
.invite-code--block {
inline-size: 100%;
justify-content: center;
font-size: var(--text-large);
padding: var(--space-3) var(--space-4);
letter-spacing: var(--letter-wider);
}
.invite-code--copied {
opacity: 0.7;
}
.stat-number {
color: var(--color-ink);
font-size: var(--text-stat);
font-weight: 900;
letter-spacing: var(--letter-title);
display: block;
line-height: var(--line-tight);
margin-bottom: var(--space-1);
font-variant-numeric: tabular-nums;
}
.stat-number--positive {
color: var(--color-positive);
}
.stat-number--warning {
color: var(--color-warning);
}
.text-warning {
color: var(--color-warning);
}
.text-danger {
color: var(--color-danger);
}
.text-muted {
color: var(--color-ink-muted);
}
.text-small {
font-size: var(--text-medium);
}
.is-dimmed {
opacity: 0.5;
}
.text-link {
color: var(--color-accent);
font-size: var(--link-action-font-size);
font-weight: 600;
text-decoration: none;
@media (any-hover: hover) {
&:hover {
text-decoration: underline;
}
}
}
.stat-stack {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.doc {
display: grid;
grid-template-columns: minmax(0,1fr) var(--container-doc-rail);
gap: var(--space-12);
align-items: start;
@media (max-width: 980px) {
grid-template-columns: 1fr;
& .doc__rail {
position: static;
}
}
}
.doc__rail {
position: sticky;
top: var(--sticky-topbar-offset);
display: flex;
flex-direction: column;
gap: var(--space-5);
}
.topbar__nav a:focus-visible,
.toc__item:focus-visible,
.dialog__close:focus-visible,
.killbar:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
}
.rail-card--mb {
margin-bottom: var(--space-8);
}
}
@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-left: 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 {
.data-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
font-size: var(--text-medium);
background: var(--color-surface);
border-radius: var(--radius-card);
box-shadow: var(--shadow-stack);
overflow: hidden;
}
.data-table th {
text-align: left;
font-weight: 700;
font-size: var(--text-tiny);
letter-spacing: var(--letter-widest);
text-transform: uppercase;
color: var(--color-ink-muted);
padding: var(--space-3) var(--space-4-5);
background: var(--color-canvas);
border-bottom: var(--hairline) solid var(--surface-subtle);
}
.data-table td {
padding: var(--space-3-5) var(--space-4-5);
border-bottom: var(--hairline) solid var(--surface-subtle);
vertical-align: middle;
}
.data-table tbody tr:last-child td {
border-bottom: 0;
}
.data-table tbody tr {
cursor: pointer;
transition: background var(--duration-instant);
}
@media (any-hover: hover) {
.data-table tbody tr:hover {
background: var(--color-canvas);
}
}
.avatar {
width: var(--avatar-medium);
height: var(--avatar-medium);
border-radius: var(--radius-round);
background: var(--surface-subtle);
color: var(--color-ink-muted);
display: grid;
place-items: center;
font-size: var(--text-small);
font-weight: 800;
flex-shrink: 0;
box-shadow: var(--shadow-soft);
}
.avatar--accent {
background: var(--color-accent-soft);
color: var(--color-accent);
}
.avatar--positive {
background: var(--color-positive-soft);
color: var(--color-positive);
}
.avatar--quiet {
background: var(--surface-subtle);
color: var(--color-ink-muted);
box-shadow: var(--shadow-quiet-plan);
}
.avatar--school {
background: var(--color-info-soft);
color: var(--color-info);
box-shadow: var(--shadow-school-plan);
}
.avatar--gold {
background: var(--color-golden-soft);
color: var(--color-golden-ink);
box-shadow: var(--shadow-golden-plan);
}
.ledger {
width: 100%;
border-collapse: separate;
border-spacing: 0;
font-size: var(--text-medium);
background: var(--color-surface);
border-radius: var(--radius-card);
box-shadow: var(--shadow-stack);
overflow: hidden;
}
.ledger th {
text-align: left;
padding: var(--space-3) var(--space-4-5);
font-size: var(--text-tiny);
letter-spacing: var(--letter-widest);
text-transform: uppercase;
color: var(--color-ink-muted);
font-weight: 700;
background: var(--color-canvas);
border-bottom: var(--hairline) solid var(--surface-subtle);
}
.ledger td {
padding: var(--space-3-5) var(--space-4-5);
border-bottom: var(--hairline) solid var(--surface-subtle);
vertical-align: middle;
}
.ledger tbody tr:last-child td {
border-bottom: 0;
}
@media (any-hover: hover) {
.ledger tbody tr:hover {
background: var(--color-canvas);
}
}
.code-cell {
font-family: var(--font-mono);
font-weight: 700;
color: var(--color-ink);
font-size: var(--link-action-font-size);
background: var(--surface-subtle);
padding: var(--space-1) var(--space-2-5);
border-radius: var(--radius-medium);
letter-spacing: var(--letter-wide);
}
.usage-bar {
width: var(--usage-bar-width);
height: var(--progress-small);
background: var(--surface-subtle);
border-radius: var(--radius-pill);
overflow: hidden;
display: inline-block;
vertical-align: middle;
margin-right: var(--space-1-5);
}
progress.usage-bar {
appearance: none;
border: 0;
}
progress.usage-bar::-webkit-progress-bar {
background: var(--surface-subtle);
}
progress.usage-bar::-webkit-progress-value {
border-radius: var(--radius-pill);
background: var(--color-accent);
}
progress.usage-bar::-moz-progress-bar {
border-radius: var(--radius-pill);
background: var(--color-accent);
}
}
@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);
}
.positive-text {
color: var(--color-positive);
}
.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 features {
.landing-page .lp-skip-link {
position: absolute;
top: -100%;
left: 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 {
--lp-paper:       #f4f0e6;
--lp-paper-warm:  #ede6d4;
--lp-paper-deep:  #e0d6bd;
--lp-ink:         #1a1f1c;
--lp-ink-soft:    #3e4540;
--lp-ink-mute:    #5f655e;
--lp-ink-faint:   #656a61;
--lp-rule:        #d8d1bd;
--lp-terracotta:   #c66a3b;
--lp-terracotta-d: #a8542a;
--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-blue-soft:        color-mix(in srgb, var(--lp-blue) 14%,       var(--lp-paper));
--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-3xl: 52px;
--lp-fs-4xl: 72px;
--lp-fs-5xl: 104px;
--lp-lh-tight: 1.05;
--lp-lh-snug: 1.2;
--lp-lh-text: 1.55;
--lp-lh-loose: 1.7;
--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-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-left: auto;
margin-right: 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);
}
.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;
right: -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: 0 0 2px 12px;
align-self: flex-start;
}
.landing-page .lp-mode-note::after {
content: "";
display: inline-block;
width: 18px;
height: 15px;
margin-left: 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);
}
.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-left: 462px;
min-height: 440px;
display: flex;
flex-direction: column;
justify-content: center;
}
.landing-page .lp-moment-media {
position: absolute;
top: 50%;
left: 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;
}
.landing-page .lp-moments.lp-touring .lp-moment-item[open] summary {
position: relative;
}
.landing-page .lp-moments.lp-touring .lp-moment-item[open] summary::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2px;
background: var(--lp-terracotta);
transform-origin: left;
animation: lp-tour-progress 6s linear;
}
}
@keyframes lp-tour-progress {
from {
scale: 0 1;
}
to {
scale: 1 1;
}
}
@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: 40px;
height: 40px;
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-terracotta);
outline-offset: 2px;
}
.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 (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);
}
}
@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: 1.1fr 1fr;
gap: 72px;
align-items: center;
}
.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: italic;
font-weight: 420;
}
.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 {
font-size: 13px;
color: var(--lp-ink-mute);
margin-left: 12px;
}
.landing-page .lp-hero-qr {
display: inline-flex;
align-items: center;
gap: 16px;
margin-top: 22px;
padding: 14px 20px 14px 14px;
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);
}
@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) 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: 8px 16px 8px 8px;
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 .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: #f4f0e6;
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: #111b21;
letter-spacing: -0.01em;
}
.landing-page .lp-phone__status {
font-size: 12px;
color: #667781;
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: #111b21;
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-left: calc(-1 * var(--phone-overflow));
}
.landing-page .lp-phone__msg--me {
align-self: flex-end;
background: var(--phone-bubble-me);
margin-right: 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>');
}
.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: var(--lp-blue);
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-right: 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;
}
.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;
left: 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: #111b21;
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: #8696a0;
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);
}
.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-left: 18px;
border-left: 2px solid var(--lp-terracotta);
max-width: 36ch;
}
.landing-page .lp-diff-side .lp-diff-quote em {
font-style: italic;
color: var(--lp-terracotta);
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-left: 20px;
position: relative;
}
.landing-page .lp-diff-side .lp-diff-cases li::before {
content: "—";
position: absolute;
left: 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-right: 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-left: 30px;
position: relative;
}
.landing-page .lp-audience-col.lp-yes li::before {
content: "→";
position: absolute;
left: 0;
top: 2px;
color: var(--lp-terracotta);
font-weight: 600;
font-family: var(--font-sans);
}
.landing-page .lp-audience-col.lp-no li::before {
content: "—";
position: absolute;
left: 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);
border-bottom: 1px solid currentColor;
padding-bottom: 1px;
}
}
@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-card {
background: var(--color-surface);
border: 1px solid var(--lp-rule);
border-radius: 14px;
padding: 28px 26px;
display: flex;
flex-direction: column;
box-shadow: var(--lp-shadow-soft);
}
.landing-page .lp-price-card.lp-featured {
border-color: var(--lp-terracotta);
background: var(--color-surface);
box-shadow:
0 0 0 1px var(--lp-terracotta),
var(--lp-shadow-card);
position: relative;
}
.landing-page .lp-featured-tag {
position: absolute;
top: -12px;
left: 24px;
background: var(--lp-terracotta);
color: var(--lp-white);
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 4px;
font-weight: 500;
}
.landing-page .lp-price-card h3 {
font-family: var(--font-serif);
font-size: 20px;
font-weight: 460;
margin-bottom: 4px;
}
.landing-page .lp-price-card .lp-who {
font-size: 13px;
color: var(--lp-ink-mute);
margin-bottom: 16px;
}
.landing-page .lp-price-card .lp-amount {
margin-bottom: 8px;
}
.landing-page .lp-price-card .lp-amount .lp-num {
font-family: var(--font-serif);
font-size: 38px;
font-weight: 360;
line-height: 1;
letter-spacing: -0.03em;
}
.landing-page .lp-price-cents {
font-size: 0.55em;
letter-spacing: 0;
vertical-align: 0.15em;
margin-left: 0.04em;
}
.landing-page .lp-num-compact {
font-size: 25px;
line-height: 1.35;
}
.landing-page .lp-price-card .lp-amount .lp-per {
color: var(--lp-ink-mute);
font-size: 14px;
margin-left: 6px;
}
.landing-page .lp-price-card .lp-nota {
font-size: 13px;
color: var(--lp-ink-mute);
margin-bottom: 0;
}
.landing-page .lp-price-card .lp-annual-note {
font-size: 12px;
color: var(--lp-ink-mute);
margin-top: 2px;
min-height: 16px;
}
.landing-page .lp-price-card .lp-annual-note b {
color: var(--lp-terracotta);
font-weight: 500;
}
.landing-page .lp-price-card .lp-card-price {
padding-bottom: 14px;
margin-bottom: 14px;
border-bottom: 1px solid var(--lp-rule);
}
.landing-page .lp-price-card ul {
list-style: none;
padding: 0;
margin: 0 0 16px 0;
display: flex;
flex-direction: column;
gap: 8px;
flex: 1 0 auto;
}
.landing-page .lp-price-card ul li {
font-size: 14px;
line-height: 1.45;
padding-left: 20px;
position: relative;
color: var(--lp-ink-soft);
}
.landing-page .lp-price-card ul li::before {
content: "✓";
position: absolute;
left: 0;
color: var(--lp-wa-d);
font-weight: 700;
font-size: 13px;
}
.landing-page .lp-price-card ul li.lp-no {
color: var(--lp-ink-faint);
}
.landing-page .lp-price-card ul li.lp-no::before {
content: "×";
color: var(--lp-ink-faint);
font-weight: 400;
font-size: 15px;
line-height: 1.35;
}
.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-left: 4px;
vertical-align: 1px;
}
.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);
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 {
font-size: 10px;
padding: 2px 5px;
}
.landing-page .lp-billing-toggle button { padding-inline: 12px; }
}
.landing-page .lp-billing-toggle button.lp-on .lp-save-pill {
background: var(--lp-paper);
color: var(--lp-terracotta);
}
.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-head {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 16px;
}
.landing-page .lp-credits-explainer .lp-ce-head-text {
font-family: var(--font-serif);
font-size: 18px;
font-weight: 460;
color: var(--lp-ink);
letter-spacing: -0.005em;
}
.landing-page .lp-credits-explainer .lp-ce-token {
font-family: var(--font-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--lp-terracotta);
border: 1px solid var(--lp-terracotta);
background: transparent;
padding: 5px 10px;
border-radius: 999px;
line-height: 1;
white-space: nowrap;
}
.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-batch {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px;
margin-bottom: 14px;
background: var(--lp-paper-warm);
border: 1px solid var(--lp-rule);
border-radius: 10px;
}
.landing-page .lp-credits-explainer .lp-ce-batch > div {
display: flex;
flex-direction: column;
gap: 2px;
line-height: 1.45;
}
.landing-page .lp-credits-explainer .lp-ce-batch b {
font-size: 14.5px;
font-weight: 600;
color: var(--lp-ink);
}
.landing-page .lp-credits-explainer .lp-ce-batch span {
font-size: 13.5px;
color: var(--lp-ink-soft);
}
.landing-page .lp-credits-explainer .lp-ce-batch em {
font-style: italic;
color: var(--lp-terracotta);
}
.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);
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);
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: 7px 14px 7px 12px;
}
.landing-page .lp-trust-strip li::before {
content: "✓";
color: var(--lp-wa-d);
font-weight: 700;
font-size: 12px;
}
}
@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);
}
.landing-page .lp-schools-cta {
text-align: center;
padding-top: 16px;
border-top: 1px solid var(--lp-rule);
}
.landing-page .lp-schools-cta p {
font-family: var(--font-serif);
font-size: 19px;
color: var(--lp-ink);
margin: 0 0 18px;
}
@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-weight: 400;
line-height: 1.08;
letter-spacing: -0.01em;
margin: 16px 0 24px 0;
}
.landing-page h2.lp-h-section {
font-size: clamp(30px, 3.8vw, 48px);
}
.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-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 .bncc-hero {
padding: 64px 0 40px 0;
}
.landing-page .bncc-hero h1 {
font-size: clamp(40px, 5.4vw, 72px);
line-height: 1;
letter-spacing: -0.03em;
font-weight: 380;
margin: 0 0 20px 0;
}
.landing-page .bncc-hero .lp-lede {
max-width: 60ch;
margin-bottom: 28px;
}
.landing-page .bncc-search {
background: var(--lp-paper);
border: 1px solid var(--lp-rule);
border-radius: 16px;
padding: 18px;
box-shadow: var(--lp-shadow-soft);
}
.landing-page .bncc-search__fields {
display: flex;
flex-wrap: wrap;
gap: 14px;
align-items: flex-end;
}
.landing-page .bncc-field {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 150px;
}
.landing-page .bncc-field--grow {
flex: 1 1 220px;
}
.landing-page .bncc-field--submit {
min-width: auto;
}
.landing-page .bncc-field__label {
font-family: var(--font-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--lp-ink-mute);
}
.landing-page .bncc-field__control {
font-family: var(--font-sans);
font-size: 16px;
color: var(--lp-ink);
background: var(--color-surface, #fff);
border: 1px solid var(--lp-rule);
border-radius: 10px;
padding: 11px 14px;
line-height: 1.2;
width: 100%;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.landing-page .bncc-field__control:focus {
outline: none;
border-color: var(--lp-terracotta);
box-shadow: 0 0 0 3px color-mix(in oklch, var(--lp-terracotta) 18%, transparent);
}
.landing-page select.bncc-field__control {
appearance: none;
-webkit-appearance: none;
padding-right: 38px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%238a7f70' stroke-width='1.6' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
cursor: pointer;
}
.landing-page .bncc-search__btn {
height: 46px;
padding-inline: 30px;
}
.landing-page .bncc-hero__note {
margin: 16px 2px 0;
font-size: 13.5px;
color: var(--lp-ink-mute);
}
.landing-page .bncc-results-sect {
padding: 12px 0 40px;
}
.landing-page .bncc-results__head {
margin-bottom: 22px;
}
.landing-page .bncc-results__count {
font-family: var(--font-serif);
font-size: 26px;
font-weight: 460;
letter-spacing: -0.01em;
margin: 0;
}
.landing-page .bncc-results__count em {
font-style: italic;
color: var(--lp-terracotta);
}
.landing-page .bncc-results__hint {
margin: 6px 0 0;
font-size: 14px;
color: var(--lp-ink-mute);
}
.landing-page .bncc-group {
font-family: var(--font-sans);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--lp-ink-mute);
margin: 32px 0 14px;
display: flex;
align-items: baseline;
gap: 8px;
}
.landing-page .bncc-group:first-of-type { margin-top: 4px; }
.landing-page .bncc-group span {
font-size: 12px;
font-weight: 700;
color: var(--lp-terracotta-d, var(--lp-terracotta));
background: var(--lp-terracotta-light, #f6e9e2);
border-radius: 999px;
padding: 2px 9px;
}
.landing-page .bncc-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
gap: 16px;
}
.landing-page .bncc-card {
display: flex;
flex-direction: column;
gap: 12px;
background: var(--lp-paper);
border: 1px solid var(--lp-rule);
border-radius: 14px;
padding: 18px;
transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
@media (any-hover: hover) {
.landing-page .bncc-card:hover {
border-color: color-mix(in oklch, var(--lp-terracotta) 40%, var(--lp-rule));
box-shadow: var(--lp-shadow-soft);
transform: translateY(-2px);
}
}
.landing-page .bncc-card__top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.landing-page .bncc-card__code {
font-family: var(--font-mono, ui-monospace, monospace);
font-size: 15px;
font-weight: 700;
letter-spacing: 0.02em;
color: var(--lp-terracotta-d, var(--lp-terracotta));
}
.landing-page .bncc-card__copy {
font-family: var(--font-sans);
font-size: 12.5px;
font-weight: 600;
color: var(--lp-ink-soft);
background: transparent;
border: 1px solid var(--lp-rule);
border-radius: 999px;
padding: 4px 12px;
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
@media (any-hover: hover) {
.landing-page .bncc-card__copy:hover {
background: color-mix(in oklch, var(--lp-ink) 6%, transparent);
color: var(--lp-ink);
}
}
.landing-page .bncc-card__copy.invite-code--copied {
background: var(--lp-wa, #25d366);
border-color: transparent;
color: #fff;
}
.landing-page .bncc-card__desc {
font-size: 15px;
line-height: 1.5;
color: var(--lp-ink);
margin: 0;
flex: 1;
}
.landing-page .bncc-card__meta {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
padding-top: 4px;
}
.landing-page .bncc-tag {
font-size: 12px;
font-weight: 600;
color: var(--lp-blue);
background: color-mix(in oklch, var(--lp-blue) 12%, transparent);
border-radius: 999px;
padding: 3px 10px;
}
.landing-page .bncc-card__grade {
font-size: 12.5px;
color: var(--lp-ink-mute);
}
.landing-page .bncc-cta-inline {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
margin-top: 28px;
padding: 22px 26px;
background: var(--lp-terracotta-light, #f6e9e2);
border-radius: 16px;
}
.landing-page .bncc-cta-inline strong {
display: block;
font-family: var(--font-serif);
font-size: 19px;
font-weight: 500;
color: var(--lp-ink);
}
.landing-page .bncc-cta-inline span {
font-size: 14.5px;
color: var(--lp-ink-soft);
}
.landing-page .bncc-browse,
.landing-page .bncc-empty {
padding: 8px 0 8px;
}
.landing-page .bncc-empty h2 {
font-family: var(--font-serif);
font-size: 24px;
font-weight: 460;
margin: 0 0 6px;
}
.landing-page .bncc-empty em { font-style: italic; }
.landing-page .bncc-browse__lede,
.landing-page .bncc-empty p {
font-size: 16px;
color: var(--lp-ink-soft);
margin: 0 0 16px;
}
.landing-page .bncc-empty__lead {
max-width: 60ch;
}
.landing-page .bncc-empty__lead em {
font-style: italic;
color: var(--lp-ink);
}
.landing-page .bncc-empty__reset {
display: inline-flex;
align-items: center;
font-size: 15px;
font-weight: 600;
color: var(--lp-terracotta-d, var(--lp-terracotta));
text-decoration: none;
background: var(--lp-terracotta-light, #f6e9e2);
border: 1px solid color-mix(in oklch, var(--lp-terracotta) 30%, var(--lp-rule));
border-radius: 999px;
padding: 10px 18px;
transition: background-color 0.15s ease, border-color 0.15s ease;
}
@media (any-hover: hover) {
.landing-page .bncc-empty__reset:hover {
background: color-mix(in oklch, var(--lp-terracotta) 18%, transparent);
border-color: var(--lp-terracotta);
}
}
.landing-page .bncc-chips {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.landing-page .bncc-chip {
font-size: 14px;
font-weight: 500;
color: var(--lp-ink);
text-decoration: none;
background: var(--lp-paper);
border: 1px solid var(--lp-rule);
border-radius: 999px;
padding: 9px 16px;
transition: border-color 0.15s ease, background-color 0.15s ease;
}
@media (any-hover: hover) {
.landing-page .bncc-chip:hover {
border-color: var(--lp-terracotta);
background: var(--lp-terracotta-light, #f6e9e2);
}
}
.landing-page .bncc-how {
margin: 30px 0 0;
padding: 0 0 0 22px;
max-width: 62ch;
display: flex;
flex-direction: column;
gap: 12px;
}
.landing-page .bncc-how li {
font-size: 16px;
line-height: 1.5;
color: var(--lp-ink-soft);
}
.landing-page .bncc-how strong { color: var(--lp-ink); font-weight: 600; }
.landing-page .bncc-final-cta {
padding: 8px 0 24px;
}
.landing-page .bncc-final-cta__inner {
max-width: 720px;
margin: 0 auto;
text-align: center;
padding: 52px 40px;
background: var(--lp-paper);
border: 1px solid var(--lp-rule);
border-radius: 20px;
box-shadow: var(--lp-shadow-soft);
}
.landing-page .bncc-final-cta__inner h2 {
font-family: var(--font-serif);
font-size: clamp(28px, 4vw, 40px);
font-weight: 440;
line-height: 1.1;
letter-spacing: -0.02em;
margin: 10px 0 16px;
}
.landing-page .bncc-final-cta__inner h2 em {
font-style: italic;
color: var(--lp-terracotta);
}
.landing-page .bncc-final-cta__inner > p {
font-size: 17px;
line-height: 1.55;
color: var(--lp-ink-soft);
max-width: 52ch;
margin: 0 auto 26px;
}
.landing-page .bncc-final-cta__btns {
display: inline-flex;
gap: 12px;
flex-wrap: wrap;
justify-content: center;
}
.landing-page .bncc-final-cta__proof {
display: flex;
gap: 22px;
flex-wrap: wrap;
justify-content: center;
margin: 26px 0 0;
padding: 0;
list-style: none;
}
.landing-page .bncc-final-cta__proof li {
position: relative;
font-size: 13.5px;
color: var(--lp-ink-mute);
padding-left: 18px;
}
.landing-page .bncc-final-cta__proof li::before {
content: "✓";
position: absolute;
left: 0;
color: var(--lp-wa, #25d366);
font-weight: 700;
}
.landing-page .bncc-explain {
padding: 56px 0 72px;
}
.landing-page .bncc-explain__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
max-width: 900px;
}
.landing-page .bncc-explain h2,
.landing-page .bncc-tools h2 {
font-family: var(--font-serif);
font-size: 22px;
font-weight: 460;
margin: 0 0 10px;
}
.landing-page .bncc-explain p,
.landing-page .bncc-tools p {
font-size: 15.5px;
line-height: 1.6;
color: var(--lp-ink-soft);
margin: 0;
}
.landing-page .bncc-code-inline {
font-family: var(--font-mono, ui-monospace, monospace);
font-size: 0.92em;
font-weight: 700;
color: var(--lp-terracotta-d, var(--lp-terracotta));
background: var(--lp-terracotta-light, #f6e9e2);
border-radius: 5px;
padding: 1px 6px;
}
.landing-page .bncc-tools {
max-width: 900px;
margin-top: 48px;
padding-top: 32px;
border-top: 1px solid var(--lp-rule);
}
.landing-page .bncc-tools p { margin-bottom: 16px; }
.landing-page .bncc-tools--pages h3 {
font-family: var(--font-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--lp-ink-mute);
margin: 20px 0 10px;
}
.landing-page .bncc-tools ul {
display: flex;
flex-wrap: wrap;
gap: 10px 14px;
list-style: none;
margin: 0;
padding: 0;
}
.landing-page .bncc-tools a {
display: inline-block;
font-size: 15px;
padding: 7px 14px;
border: 1px solid var(--lp-rule);
border-radius: 999px;
color: var(--lp-ink);
text-decoration: none;
}
.landing-page .bncc-tools a:hover,
.landing-page .bncc-tools a:focus-visible {
border-color: var(--lp-terracotta);
color: var(--lp-terracotta-d, var(--lp-terracotta));
}
@media (max-width: 640px) {
.landing-page .bncc-search__fields { gap: 12px; }
.landing-page .bncc-field { min-width: 100%; flex-basis: 100%; }
.landing-page .bncc-search__btn { width: 100%; }
.landing-page .bncc-grid { grid-template-columns: 1fr; }
.landing-page .bncc-explain__grid { grid-template-columns: 1fr; gap: 32px; }
.landing-page .bncc-cta-inline { flex-direction: column; align-items: flex-start; }
}
}
@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: 6px 12px 6px 10px;
}
.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: -6px 0 -8px 4px;
}
.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 1fr 1fr 1fr 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 h2 {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--lp-ink-mute);
margin: 0 0 18px;
font-weight: 600;
}
.landing-page .lp-site-footer ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.landing-page .lp-site-footer ul li a {
color: var(--lp-ink-soft);
font-size: 14px;
transition: color 0.15s ease;
}
.landing-page .lp-site-footer 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 {
.landing-page .lp-page-head {
padding: 80px 0 48px;
}
.landing-page .lp-page-head h1 {
font-size: clamp(48px, 6vw, 88px);
font-weight: 380;
letter-spacing: -0.03em;
max-width: 16ch;
margin-bottom: 24px;
}
.landing-page .lp-page-head h1 em {
font-style: italic;
color: var(--lp-terracotta);
}
.landing-page .lp-page-head .lp-lede {
max-width: 60ch;
}
.landing-page .lp-step-block {
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: 80px;
align-items: start;
}
.landing-page .lp-step-block .lp-num {
font-family: var(--font-serif);
font-size: 200px;
line-height: 0.85;
font-weight: 280;
color: var(--lp-terracotta);
letter-spacing: -0.05em;
opacity: 0.9;
}
.landing-page .lp-step-block h2 {
font-size: 44px;
font-weight: 380;
max-width: 14ch;
margin-bottom: 20px;
}
.landing-page .lp-step-block h2 em {
font-style: italic;
color: var(--lp-terracotta);
}
.landing-page .lp-step-block .lp-body {
font-size: var(--lp-fs-md);
color: var(--lp-ink-soft);
max-width: 60ch;
line-height: 1.65;
}
.landing-page .lp-step-block .lp-body p {
font-size: var(--lp-fs-md);
margin-bottom: 1em;
}
.landing-page .lp-step-block .lp-body strong {
color: var(--lp-ink);
font-weight: 600;
}
.landing-page .lp-step-block .lp-visual {
margin-top: 32px;
}
.landing-page .lp-commands {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
border: 1px solid var(--lp-rule);
border-radius: var(--lp-radius);
overflow: hidden;
}
.landing-page .lp-commands .lp-cmd {
padding: 20px 24px;
border-right: 1px solid var(--lp-rule);
border-bottom: 1px solid var(--lp-rule);
}
.landing-page .lp-commands .lp-cmd:nth-child(2n) {
border-right: 0;
}
.landing-page .lp-commands .lp-cmd:nth-last-child(-n + 2) {
border-bottom: 0;
}
.landing-page .lp-commands .lp-cmd .lp-key {
font-family: var(--font-mono);
font-size: 13px;
color: var(--lp-terracotta-d);
margin-bottom: 4px;
font-weight: 600;
}
.landing-page .lp-commands .lp-cmd .lp-desc {
font-size: 14px;
color: var(--lp-ink-soft);
}
.landing-page .lp-kpi {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
border: 1px solid var(--lp-rule);
border-radius: var(--lp-radius-lg);
overflow: hidden;
margin-top: 48px;
}
.landing-page .lp-kpi > div {
padding: 32px;
border-right: 1px solid var(--lp-rule);
}
.landing-page .lp-kpi > div:last-child {
border-right: 0;
}
.landing-page .lp-kpi .lp-n {
font-family: var(--font-serif);
font-size: 56px;
font-weight: 380;
color: var(--lp-terracotta);
line-height: 1;
margin-bottom: 8px;
letter-spacing: -0.02em;
}
.landing-page .lp-kpi .lp-l {
font-size: 14px;
color: var(--lp-ink-soft);
max-width: 24ch;
}
.landing-page .lp-contact {
padding: clamp(32px, 5vw, 64px);
background: var(--lp-paper);
border: 1px solid var(--lp-rule);
border-radius: var(--lp-radius-lg);
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: clamp(32px, 5vw, 56px);
align-items: start;
box-shadow: var(--lp-shadow-card);
}
.landing-page .lp-contact__intro h2 {
font-size: clamp(28px, 3.4vw, 38px);
line-height: 1.05;
letter-spacing: -0.025em;
font-weight: 380;
max-width: 14ch;
margin-bottom: 18px;
}
.landing-page .lp-contact__intro p {
color: var(--lp-ink-soft);
line-height: 1.55;
margin: 0 0 22px 0;
max-width: 44ch;
}
.landing-page .lp-contact__intro strong {
color: var(--lp-ink);
font-weight: 600;
}
.landing-page .lp-contact__bullets {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
color: var(--lp-ink-soft);
font-size: var(--lp-fs-sm);
}
.landing-page .lp-contact__bullets li {
position: relative;
padding-left: 22px;
}
.landing-page .lp-contact__bullets li::before {
content: "";
position: absolute;
left: 0;
top: 0.55em;
width: 12px;
height: 2px;
background: var(--lp-terracotta);
border-radius: 2px;
}
.landing-page .lp-contact__form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.landing-page .lp-contact__field {
display: flex;
flex-direction: column;
gap: 6px;
}
.landing-page .lp-contact__field--full {
grid-column: 1 / -1;
}
.landing-page .lp-contact__form label {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
color: var(--lp-ink-mute);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.landing-page .lp-contact__form input,
.landing-page .lp-contact__form textarea,
.landing-page .lp-contact__form select {
padding: 11px 14px;
border: 1px solid var(--lp-rule);
border-radius: var(--lp-radius);
background: var(--lp-paper-warm);
color: var(--lp-ink);
font: inherit;
font-size: var(--lp-fs-sm);
transition: border-color 120ms ease, box-shadow 120ms ease;
}
.landing-page .lp-contact__form input::placeholder,
.landing-page .lp-contact__form textarea::placeholder {
color: var(--lp-ink-faint);
}
.landing-page .lp-contact__form input:focus,
.landing-page .lp-contact__form textarea:focus,
.landing-page .lp-contact__form select:focus {
outline: none;
border-color: var(--lp-ink);
box-shadow: 0 0 0 3px color-mix(in oklch, var(--lp-terracotta) 18%, transparent);
}
.landing-page .lp-contact__form input:invalid:not(:placeholder-shown),
.landing-page .lp-contact__form textarea:invalid:not(:placeholder-shown) {
border-color: color-mix(in oklch, var(--lp-terracotta) 60%, var(--lp-rule));
}
.landing-page .lp-contact__form textarea {
min-height: 96px;
resize: vertical;
font-family: var(--font-sans);
}
.landing-page .lp-contact__form select {
appearance: none;
background-image:
linear-gradient(45deg, transparent 50%, var(--lp-ink-mute) 50%),
linear-gradient(135deg, var(--lp-ink-mute) 50%, transparent 50%);
background-position: calc(100% - 18px) center, calc(100% - 13px) center;
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
padding-right: 32px;
cursor: pointer;
}
.landing-page .lp-contact__actions {
grid-column: 1 / -1;
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 8px;
}
.landing-page .lp-contact__actions .btn {
flex: 1 1 auto;
justify-content: center;
min-width: 0;
}
.landing-page .lp-contact__note {
grid-column: 1 / -1;
margin: 4px 0 0 0;
font-size: var(--lp-fs-xs);
color: var(--lp-ink-faint);
line-height: 1.5;
text-align: center;
}
@media (max-width: 640px) {
.landing-page .lp-contact__form {
grid-template-columns: 1fr;
}
}
.landing-page .lp-offer {
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: 0;
border: 1px solid var(--lp-rule);
border-radius: 20px;
overflow: clip;
background: var(--lp-white, #fff);
box-shadow: 0 18px 44px color-mix(in srgb, var(--lp-ink) 7%, transparent);
}
.landing-page .lp-offer__price-side {
padding: 40px 40px 36px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.landing-page .lp-offer__price {
display: flex;
align-items: baseline;
justify-content: center;
gap: 6px;
line-height: 1;
}
.landing-page .lp-offer__currency {
font-size: 28px;
font-weight: 420;
color: var(--lp-ink-soft);
}
.landing-page .lp-offer__price .price-num {
font-size: clamp(56px, 8vw, 84px);
font-weight: 380;
letter-spacing: -0.035em;
color: var(--lp-ink);
}
.landing-page .lp-offer__per {
font-size: 15px;
color: var(--lp-ink-mute);
margin-left: 2px;
}
.landing-page .lp-offer__cycle-note {
margin: 10px 0 0;
font-size: 14px;
color: var(--lp-ink-mute);
min-height: 1.4em;
}
.landing-page .lp-offer__cycle-note b {
color: var(--lp-ink);
font-weight: 560;
}
.landing-page .lp-offer__cta {
margin-top: 26px;
width: 100%;
max-width: 340px;
justify-content: center;
}
.landing-page .lp-offer__reassure {
margin: 14px 0 0;
font-size: 13px;
color: var(--lp-ink-mute);
max-width: 34ch;
}
.landing-page .lp-offer__guarantee {
padding: 40px 34px;
background: var(--lp-paper-cream);
border-left: 1px solid var(--lp-rule);
display: flex;
flex-direction: column;
justify-content: center;
}
.landing-page .lp-guarantee__mark {
width: 34px;
height: 34px;
color: var(--lp-terracotta);
margin-bottom: 14px;
}
.landing-page .lp-guarantee__title {
font-size: 21px;
font-weight: 520;
letter-spacing: -0.015em;
margin: 0 0 10px;
color: var(--lp-ink);
}
.landing-page .lp-guarantee__body {
margin: 0 0 12px;
font-size: 15px;
line-height: 1.55;
color: var(--lp-ink-soft);
}
.landing-page .lp-guarantee__fine {
margin: 0;
font-size: 13px;
line-height: 1.5;
color: var(--lp-ink-mute);
}
.landing-page .lp-guarantee__fine b {
color: var(--lp-ink-soft);
font-weight: 560;
}
.landing-page .lp-included {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
margin-top: 8px;
}
.landing-page .lp-included__group {
padding: 26px 24px;
border-radius: 20px;
background: var(--lp-paper-warm);
border: 1px solid color-mix(in srgb, var(--lp-ink) 7%, transparent);
}
.landing-page .lp-included__title {
font-size: 17px;
font-weight: 560;
letter-spacing: -0.01em;
margin: 0 0 14px;
color: var(--lp-ink);
}
.landing-page .lp-included__list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 10px;
}
.landing-page .lp-included__list li {
position: relative;
padding-left: 24px;
font-size: 14.5px;
line-height: 1.5;
color: var(--lp-ink-soft);
}
.landing-page .lp-included__list li::before {
content: "";
position: absolute;
left: 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-included__foot {
margin: 26px 0 0;
text-align: center;
font-size: 14px;
color: var(--lp-ink-mute);
}
.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 {
font-size: 15px;
color: var(--lp-ink-mute);
margin-left: 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-left: 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__list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 10px;
text-align: left;
}
.landing-page .lp-home-offer__list li {
position: relative;
padding-left: 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;
left: 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-offer,
.landing-page .lp-home-offer__body {
grid-template-columns: 1fr;
}
.landing-page .lp-home-offer__value {
border-left: 0;
border-top: 1px solid var(--lp-rule);
}
.landing-page .lp-offer__guarantee {
border-left: 0;
border-top: 1px solid var(--lp-rule);
}
.landing-page .lp-included {
grid-template-columns: 1fr;
gap: 16px;
}
}
}
@layer features {
.landing-page .lp-code-card {
background: var(--lp-paper-warm);
border-radius: var(--lp-radius-lg);
padding: 48px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: center;
margin-top: 48px;
}
.landing-page .lp-code-card .lp-ex {
text-align: center;
font-family: var(--font-mono);
font-size: 48px;
padding: 32px;
background: var(--lp-paper);
border: 2px dashed var(--lp-terracotta);
border-radius: 12px;
color: var(--lp-terracotta-d);
letter-spacing: 0.04em;
}
.landing-page .lp-code-card .lp-ex small {
display: block;
font-family: var(--font-sans);
font-size: 12px;
color: var(--lp-ink-mute);
margin-top: 12px;
letter-spacing: 0;
text-transform: uppercase;
}
.landing-page .lp-code-card h3 {
font-family: var(--font-serif);
font-size: 28px;
font-weight: 460;
margin-bottom: 16px;
}
.landing-page .lp-code-card p + p {
color: var(--lp-ink-mute);
font-size: 14px;
}
.landing-page .lp-fineprint {
font-size: 13px;
max-width: 60ch;
}
.landing-page .lp-flow {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
margin-top: 48px;
}
.landing-page .lp-flow .lp-step-card {
padding: 24px;
border: 1px solid var(--lp-rule);
border-radius: var(--lp-radius);
background: var(--lp-paper);
}
.landing-page .lp-flow .lp-step-card .lp-n {
font-family: var(--font-mono);
font-size: 11px;
color: var(--lp-terracotta-d);
font-weight: 600;
letter-spacing: 0.1em;
margin-bottom: 8px;
}
.landing-page .lp-flow .lp-step-card h4 {
font-size: 17px;
font-weight: 600;
margin-bottom: 8px;
}
.landing-page .lp-flow .lp-step-card p {
font-size: 14px;
color: var(--lp-ink-soft);
margin: 0;
}
.landing-page .lp-faq-section {
margin-top: 48px;
}
.landing-page .lp-faq-section h2 {
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--lp-terracotta-d);
font-weight: 600;
margin-bottom: 24px;
padding-bottom: 12px;
border-bottom: 1px solid var(--lp-rule);
}
.landing-page .lp-faq {
padding: 24px 0;
border-bottom: 1px solid var(--lp-rule);
display: grid;
grid-template-columns: 1fr 2fr;
gap: 48px;
align-items: start;
}
.landing-page .lp-faq h3 {
font-family: var(--font-serif);
font-size: 22px;
font-weight: 460;
letter-spacing: -0.01em;
line-height: 1.3;
max-width: 20ch;
}
.landing-page .lp-faq .lp-a {
color: var(--lp-ink-soft);
font-size: 16px;
line-height: 1.65;
max-width: 62ch;
}
.landing-page .lp-faq .lp-a p {
margin: 0 0 0.8em;
font-size: 16px;
color: var(--lp-ink-soft);
}
.landing-page .lp-faq .lp-a strong {
color: var(--lp-ink);
font-weight: 600;
}
.landing-page .lp-faq .lp-a a {
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
text-decoration-color: var(--lp-ink-faint);
}
.landing-page .lp-faq .lp-a a:hover {
color: var(--lp-terracotta);
text-decoration-color: var(--lp-terracotta);
}
@media (max-width: 900px) {
.landing-page .lp-code-card {
grid-template-columns: 1fr;
}
.landing-page .lp-flow {
grid-template-columns: 1fr 1fr;
}
.landing-page .lp-faq {
grid-template-columns: 1fr;
gap: 12px;
}
}
@media (max-width: 700px) {
.landing-page .lp-flow {
grid-template-columns: 1fr;
}
}
}
@layer features {
.landing-page .lp-verdict {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-top: 28px;
}
.landing-page .lp-verdict-card {
background: var(--lp-white);
border: 1px solid var(--lp-rule);
border-top: 3px solid var(--lp-ink-faint);
border-radius: var(--lp-radius);
padding: 26px 28px;
box-shadow: var(--lp-shadow-soft);
}
.landing-page .lp-verdict-card--me { border-top-color: var(--lp-wa-d); }
.landing-page .lp-verdict-card h3 {
font-family: var(--font-serif);
font-size: 24px;
font-weight: 420;
letter-spacing: -0.015em;
margin: 0 0 10px;
}
.landing-page .lp-verdict-card p {
font-size: var(--lp-fs-base);
color: var(--lp-ink-soft);
line-height: 1.6;
margin: 0;
}
.landing-page .lp-vstable {
display: grid;
grid-template-columns: 240px repeat(2, minmax(0, 1fr));
border: 1px solid var(--lp-rule);
background: var(--color-surface);
box-shadow: var(--lp-shadow-soft);
position: relative;
margin-top: 28px;
}
.landing-page .lp-vstable thead,
.landing-page .lp-vstable tbody,
.landing-page .lp-vstable tr { display: contents; }
.landing-page .lp-vstable th,
.landing-page .lp-vstable td {
position: relative;
z-index: 1;
font-weight: 400;
text-align: start;
}
.landing-page .lp-vstable .lp-vsh {
padding: 22px;
border-right: 1px solid var(--lp-rule);
border-bottom: 1px solid var(--lp-rule);
display: flex;
flex-direction: column;
gap: 4px;
background: var(--color-surface);
position: relative;
}
.landing-page .lp-vstable thead th:last-child { border-right: 0; }
.landing-page .lp-vstable .lp-vsh-corner {
background: var(--lp-paper-warm);
justify-content: flex-end;
}
.landing-page .lp-vstable .lp-vsh-corner .lp-corner-label {
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--lp-ink-mute);
font-weight: 600;
}
.landing-page .lp-vstable .lp-vsh .lp-vsh-name {
font-family: var(--font-serif);
font-size: 26px;
font-weight: 460;
letter-spacing: -0.015em;
}
.landing-page .lp-vstable .lp-vsh .lp-vsh-sub {
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--lp-ink-mute);
}
.landing-page .lp-vstable .lp-vsh.lp-featured {
border: 1px solid var(--lp-terracotta);
box-shadow: var(--lp-shadow-card);
margin: -1px;
z-index: 3;
}
.landing-page .lp-vstable .lp-vsh .lp-vsh-tag {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
background: var(--lp-terracotta);
color: var(--lp-white);
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 4px;
font-weight: 500;
z-index: 4;
}
.landing-page .lp-vstable .lp-vsh .lp-doodle-sparkle {
position: absolute;
top: -20px;
right: -20px;
width: 48px;
height: 48px;
color: var(--lp-mustard);
opacity: 0.85;
pointer-events: none;
z-index: 4;
}
.landing-page .lp-vstable .lp-vslabel {
padding: 16px 22px;
border-right: 1px solid var(--lp-rule);
border-bottom: 1px solid var(--lp-rule);
display: flex;
align-items: center;
font-size: 15px;
font-weight: 600;
color: var(--lp-ink);
letter-spacing: -0.005em;
line-height: 1.35;
}
.landing-page .lp-vstable .lp-vscell {
padding: 16px 20px;
border-right: 1px solid var(--lp-rule);
border-bottom: 1px solid var(--lp-rule);
font-size: 15px;
color: var(--lp-ink);
line-height: 1.5;
display: flex;
align-items: center;
gap: 8px;
}
.landing-page .lp-vstable tbody td:last-child { border-right: 0; }
.landing-page .lp-vstable :where(tbody tr):last-child > * { border-bottom: 0; }
.landing-page .lp-vstable .lp-yes {
color: var(--lp-wa-d);
font-weight: 700;
flex-shrink: 0;
}
.landing-page .lp-vstable .lp-no {
color: var(--lp-ink-faint);
font-weight: 700;
flex-shrink: 0;
}
.landing-page .lp-vstable::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: calc(240px - 1px);
width: calc((100% - 240px) / 2 + 2px);
border-left: 1px solid var(--lp-terracotta);
border-right: 1px solid var(--lp-terracotta);
z-index: 2;
pointer-events: none;
}
.landing-page .lp-vs-path {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
margin-top: 36px;
align-items: start;
}
.landing-page .lp-path-note {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--lp-ink-mute);
margin: 0 0 12px;
}
.landing-page .lp-path--me .lp-path-note { color: var(--lp-wa-d); }
.landing-page .lp-path-steps {
background: var(--lp-white);
border: 1px solid var(--lp-rule);
border-radius: 12px;
box-shadow: var(--lp-shadow-soft);
padding: 22px 24px;
margin: 0;
list-style: none;
counter-reset: path;
}
.landing-page .lp-path-steps li {
counter-increment: path;
display: flex;
gap: 14px;
align-items: baseline;
padding: 10px 0;
font-size: 15px;
color: var(--lp-ink-soft);
line-height: 1.5;
}
.landing-page .lp-path-steps li + li { border-top: 1px solid var(--lp-paper-warm); }
.landing-page .lp-path-steps li::before {
content: counter(path, decimal-leading-zero);
font-family: var(--font-mono);
font-size: 12px;
font-weight: 600;
color: var(--lp-terracotta);
flex-shrink: 0;
}
.landing-page .lp-path-foot {
margin-top: 14px;
font-size: var(--lp-fs-sm);
color: var(--lp-ink-mute);
}
.landing-page .lp-vs-deep {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 36px;
margin-top: 36px;
}
.landing-page .lp-vs-deep h3 {
margin: 0 0 10px;
font-size: 22px;
}
.landing-page .lp-vs-deep p {
color: var(--lp-ink-soft);
line-height: 1.62;
margin: 0;
}
.landing-page .lp-vs-audience {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-top: 28px;
align-items: start;
}
.landing-page .lp-vs-aud {
background: var(--lp-white);
border: 1px solid var(--lp-rule);
border-radius: var(--lp-radius);
box-shadow: var(--lp-shadow-soft);
padding: 28px 30px;
}
.landing-page .lp-vs-aud--me { border-color: var(--lp-terracotta); }
.landing-page .lp-vs-aud h3 {
font-family: var(--font-serif);
font-size: 24px;
font-weight: 420;
letter-spacing: -0.015em;
margin: 0 0 14px;
}
.landing-page .lp-vs-aud ul { margin: 0; padding-left: 22px; }
.landing-page .lp-vs-aud li { margin-bottom: 10px; line-height: 1.55; color: var(--lp-ink-soft); }
.landing-page .lp-vs-aud p { margin: 0; line-height: 1.6; color: var(--lp-ink-soft); }
.landing-page .lp-tools {
display: grid;
gap: 24px;
margin-top: 36px;
}
.landing-page .lp-tool {
display: grid;
grid-template-columns: 96px 1fr;
gap: 8px 28px;
background: var(--lp-white);
border: 1px solid var(--lp-rule);
border-radius: var(--lp-radius);
box-shadow: var(--lp-shadow-soft);
padding: 30px 32px;
position: relative;
}
.landing-page .lp-tool--me {
border-color: var(--lp-terracotta);
box-shadow: var(--lp-shadow-card);
}
.landing-page .lp-tool--me .lp-tool-tag {
position: absolute;
top: -12px;
left: 28px;
background: var(--lp-terracotta);
color: var(--lp-white);
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 4px;
font-weight: 500;
}
.landing-page .lp-tool .lp-tool-rank {
grid-row: 1 / -1;
font-family: var(--font-serif);
font-size: 84px;
line-height: 0.9;
font-weight: 300;
color: var(--lp-terracotta);
letter-spacing: -0.05em;
opacity: 0.9;
}
.landing-page .lp-tool .lp-tool-verdict {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--lp-terracotta-d);
}
.landing-page .lp-tool h3 {
font-family: var(--font-serif);
font-size: 28px;
font-weight: 420;
letter-spacing: -0.015em;
margin: 0;
}
.landing-page .lp-tool p {
color: var(--lp-ink-soft);
line-height: 1.62;
margin: 6px 0 0;
}
.landing-page .lp-tool .lp-tool-verdict,
.landing-page .lp-tool h3,
.landing-page .lp-tool p,
.landing-page .lp-tool .lp-tool-facts { grid-column: 2; }
.landing-page .lp-tool .lp-tool-facts {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 16px;
padding: 0;
list-style: none;
}
.landing-page .lp-tool .lp-tool-facts li {
font-size: 13px;
color: var(--lp-ink-soft);
background: var(--lp-paper);
border: 1px solid var(--lp-rule);
border-radius: 999px;
padding: 4px 12px;
white-space: nowrap;
}
.landing-page .lp-tool .lp-tool-facts li.lp-fact-yes { color: var(--lp-wa-d); }
.landing-page .lp-tool .lp-tool-facts li a { color: inherit; }
.landing-page .lp-matrix-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin-top: 28px;
border: 1px solid var(--lp-rule);
border-radius: var(--lp-radius);
box-shadow: var(--lp-shadow-soft);
background: var(--lp-white);
}
.landing-page .lp-matrix {
width: 100%;
min-width: 44rem;
border-collapse: separate;
border-spacing: 0;
font-size: 14px;
}
.landing-page .lp-matrix th,
.landing-page .lp-matrix td {
padding: 12px 16px;
border-bottom: 1px solid var(--lp-paper-warm);
text-align: left;
vertical-align: top;
line-height: 1.45;
}
.landing-page .lp-matrix thead th {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--lp-ink-mute);
background: var(--lp-paper-warm);
white-space: nowrap;
}
.landing-page .lp-matrix tbody th {
font-weight: 600;
color: var(--lp-ink);
white-space: nowrap;
}
.landing-page .lp-matrix tbody tr:last-child th,
.landing-page .lp-matrix tbody tr:last-child td { border-bottom: 0; }
.landing-page .lp-matrix .lp-yes { color: var(--lp-wa-d); font-weight: 700; }
.landing-page .lp-matrix .lp-no { color: var(--lp-ink-faint); }
.landing-page .lp-matrix .lp-row-me {
background: color-mix(in srgb, var(--lp-terracotta) 7%, var(--lp-white));
}
.landing-page .lp-cmp-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 36px;
}
.landing-page .lp-cmp-card {
display: flex;
flex-direction: column;
gap: 8px;
background: var(--lp-white);
border: 1px solid var(--lp-rule);
border-radius: var(--lp-radius);
box-shadow: var(--lp-shadow-soft);
padding: 26px 28px;
text-decoration: none;
color: var(--lp-ink);
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.landing-page .lp-cmp-card:hover {
transform: translateY(-2px);
box-shadow: var(--lp-shadow-card);
text-decoration: none;
}
.landing-page .lp-cmp-card .lp-cmp-kind {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--lp-terracotta-d);
}
.landing-page .lp-cmp-card h3 {
font-family: var(--font-serif);
font-size: 26px;
font-weight: 420;
letter-spacing: -0.015em;
margin: 0;
}
.landing-page .lp-cmp-card p {
margin: 0;
color: var(--lp-ink-soft);
line-height: 1.55;
font-size: 15px;
}
.landing-page .lp-cmp-card .lp-cmp-go {
margin-top: auto;
padding-top: 10px;
font-size: 14px;
font-weight: 600;
color: var(--lp-terracotta);
}
.landing-page .lp-pack {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 36px;
}
.landing-page .lp-pack-col {
background: var(--lp-white);
border: 1px solid var(--lp-rule);
border-radius: var(--lp-radius);
box-shadow: var(--lp-shadow-soft);
padding: 26px 28px;
}
.landing-page .lp-pack-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}
.landing-page .lp-pack-chips li {
font-size: 14px;
color: var(--lp-ink-soft);
background: var(--lp-paper);
border: 1px solid var(--lp-rule);
border-radius: 999px;
padding: 5px 13px;
line-height: 1.4;
}
.landing-page .lp-pack-chips li small {
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--lp-terracotta-d);
margin-left: 4px;
}
.landing-page .lp-pack-foot {
margin: 14px 0 0;
font-size: var(--lp-fs-sm);
color: var(--lp-ink-mute);
line-height: 1.5;
}
.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,
.landing-page .lp-pack-foot a,
.landing-page .lp-path-foot a,
.landing-page .lp-tool-facts li a,
.landing-page .lp-tool p a,
.landing-page .lp-verdict-card 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,
.landing-page .lp-pack-foot a:hover,
.landing-page .lp-path-foot a:hover,
.landing-page .lp-tool-facts li a:hover,
.landing-page .lp-tool p a:hover,
.landing-page .lp-verdict-card a:hover {
color: var(--lp-terracotta);
text-decoration-color: var(--lp-terracotta);
}
@media (max-width: 900px) {
.landing-page .lp-cmp-cards { grid-template-columns: 1fr 1fr; }
.landing-page .lp-vs-deep { grid-template-columns: 1fr; gap: 24px; }
.landing-page .lp-pack { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
.landing-page .lp-verdict,
.landing-page .lp-vs-audience,
.landing-page .lp-vs-path,
.landing-page .lp-cmp-cards { grid-template-columns: 1fr; }
.landing-page .lp-vstable {
grid-template-columns: 1fr 1fr;
border: 0;
background: transparent;
box-shadow: none;
}
.landing-page .lp-vstable::after { display: none; }
.landing-page .lp-vstable .lp-vsh-corner { display: none; }
.landing-page .lp-vstable .lp-vsh {
border: 1px solid var(--lp-rule);
border-radius: var(--lp-radius);
background: var(--lp-white);
margin-bottom: 4px;
}
.landing-page .lp-vstable .lp-vsh.lp-featured {
margin: 0 0 4px;
box-shadow: 0 0 0 1px var(--lp-terracotta);
}
.landing-page .lp-vstable .lp-vsh .lp-doodle-sparkle { display: none; }
.landing-page .lp-vstable .lp-vsh .lp-vsh-tag { top: -10px; }
.landing-page .lp-vstable .lp-vslabel {
grid-column: 1 / -1;
border: 0;
padding: 18px 2px 6px;
font-size: 16px;
}
.landing-page .lp-vstable .lp-vscell {
flex-direction: column;
align-items: flex-start;
gap: 4px;
border: 1px solid var(--lp-rule);
border-radius: var(--lp-radius);
background: var(--lp-white);
padding: 12px 14px;
font-size: 14px;
}
.landing-page .lp-vstable .lp-vscell::before {
content: attr(data-col);
font-family: var(--font-mono);
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--lp-ink-mute);
}
.landing-page .lp-vstable .lp-vscell--me {
border-color: var(--lp-terracotta);
}
.landing-page .lp-vstable .lp-vscell--me::before { color: var(--lp-terracotta); }
.landing-page .lp-tool {
grid-template-columns: 1fr;
padding: 24px 22px;
}
.landing-page .lp-tool .lp-tool-rank {
grid-row: auto;
font-size: 44px;
}
.landing-page .lp-tool .lp-tool-verdict,
.landing-page .lp-tool h3,
.landing-page .lp-tool p,
.landing-page .lp-tool .lp-tool-facts { grid-column: 1; }
}
}
@layer features {
.landing-page .lp-statement {
padding: 80px 0 64px;
border-bottom: 1px solid var(--lp-rule);
}
.landing-page .lp-statement:has(+ .lp-ribbon-wrap) {
border-bottom: 0;
}
.landing-page .lp-statement h1 {
font-size: clamp(54px, 9vw, 144px);
line-height: 0.98;
letter-spacing: -0.04em;
font-weight: 360;
max-width: 14ch;
margin-bottom: 0;
}
.landing-page .lp-statement h1 em {
font-style: italic;
color: var(--lp-terracotta);
font-weight: 360;
}
.landing-page .lp-statement h1 s {
text-decoration: line-through;
text-decoration-color: var(--lp-ink-faint);
text-decoration-thickness: 2px;
color: var(--lp-ink-mute);
font-weight: 360;
}
.landing-page .lp-statement .lp-signature {
font-family: var(--font-serif);
font-style: italic;
font-size: 22px;
color: var(--lp-ink-mute);
margin-top: 64px;
display: flex;
align-items: center;
gap: 16px;
}
.landing-page .lp-statement .lp-signature::before {
content: "—";
color: var(--lp-terracotta);
font-style: normal;
font-size: 24px;
}
.landing-page .lp-argument {
padding: 80px 0;
border-top: 2px solid var(--lp-ink);
}
.landing-page .lp-ribbon-wrap + .lp-argument {
border-top: 0;
}
.landing-page .lp-argument:nth-child(odd) { background: var(--lp-paper); }
.landing-page .lp-argument-row {
display: grid;
grid-template-columns: 120px 1fr;
gap: 64px;
align-items: start;
}
.landing-page .lp-argument .lp-num {
font-family: var(--font-serif);
font-size: 96px;
font-weight: 300;
color: var(--lp-terracotta);
line-height: 0.9;
letter-spacing: -0.04em;
font-feature-settings: "lnum";
}
.landing-page .lp-argument h2 {
font-size: clamp(36px, 4.5vw, 64px);
font-weight: 380;
line-height: 1.05;
letter-spacing: -0.025em;
max-width: 18ch;
margin-bottom: 32px;
}
.landing-page .lp-argument h2 em { font-style: italic; color: var(--lp-terracotta); }
.landing-page .lp-argument .lp-body {
font-size: 19px;
line-height: 1.65;
color: var(--lp-ink-soft);
max-width: 60ch;
}
.landing-page .lp-argument .lp-body p { font-size: 19px; margin-bottom: 1.4em; max-width: 60ch; }
.landing-page .lp-argument .lp-body p:last-child { margin-bottom: 0; }
.landing-page .lp-argument .lp-body strong { color: var(--lp-ink); font-weight: 600; }
.landing-page .lp-argument .lp-quote-aside {
margin-top: 40px;
padding-left: 24px;
border-left: 3px solid var(--lp-terracotta);
font-family: var(--font-serif);
font-style: italic;
font-size: 22px;
color: var(--lp-ink);
line-height: 1.4;
max-width: 48ch;
}
@media (max-width: 800px) {
.landing-page .lp-argument-row { grid-template-columns: 1fr; gap: 24px; }
.landing-page .lp-argument .lp-num { font-size: 64px; }
}
.landing-page .lp-trades {
padding: 80px 0;
background: var(--lp-ink);
color: var(--lp-paper);
border-top: 2px solid var(--lp-ink);
}
.landing-page .lp-trades h2 { font-size: clamp(40px, 5vw, 72px); color: var(--lp-paper); margin-bottom: 48px; max-width: 16ch; }
.landing-page .lp-trades-list { display: grid; gap: 0; }
.landing-page .lp-trade-item {
display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
padding: 28px 0;
border-top: 1px solid var(--lp-divider-dark);
align-items: baseline;
}
.landing-page .lp-trade-item:last-child { border-bottom: 1px solid var(--lp-divider-dark); }
.landing-page .lp-trade-no { font-family: var(--font-serif); font-size: 28px; font-style: italic; font-weight: 380; color: var(--lp-paper); }
.landing-page .lp-trade-no::before { content: "Não. "; color: var(--lp-terra-accent); font-style: normal; font-weight: 600; }
.landing-page .lp-trade-yes { color: var(--lp-on-dark-soft); font-size: 17px; }
.landing-page .lp-trade-yes::before { content: "Sim. "; color: var(--lp-wa); font-weight: 600; }
@media (max-width: 800px) { .landing-page .lp-trade-item { grid-template-columns: 1fr; gap: 8px; } }
.landing-page .lp-demo-block {
padding: 80px 0;
background: var(--lp-paper);
border-top: 2px solid var(--lp-ink);
}
.landing-page .lp-demo-block h2 { font-size: clamp(40px, 5vw, 72px); margin-bottom: 16px; max-width: 14ch; }
.landing-page .lp-demo-block .lp-lede { margin-bottom: 56px; }
.landing-page .lp-demo-show {
display: grid; grid-template-columns: 380px 1fr; gap: 48px;
align-items: start;
}
.landing-page .lp-anno {
font-style: italic;
font-size: 19px;
color: var(--lp-ink-soft);
line-height: 1.55;
padding-top: 24px;
border-top: 1px solid var(--lp-rule);
}
.landing-page .lp-anno b { color: var(--lp-terracotta-d); font-style: normal; }
@media (max-width: 800px) { .landing-page .lp-demo-show { grid-template-columns: 1fr; } }
.landing-page .lp-signoff {
padding: 140px 0;
background: var(--lp-ink);
color: var(--lp-paper);
border-top: 2px solid var(--lp-ink);
text-align: center;
}
.landing-page .lp-signoff h2 {
font-size: clamp(48px, 7vw, 112px);
color: var(--lp-paper);
line-height: 1.0;
letter-spacing: -0.035em;
font-weight: 380;
max-width: 18ch;
margin: 0 auto 48px;
}
.landing-page .lp-signoff h2 em { font-style: italic; color: var(--lp-terra-italic); }
.landing-page .lp-cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
}
@layer features {
.landing-page .lp-legal-head {
padding: 72px 0 24px;
}
.landing-page .lp-legal-head .lp-eyebrow {
margin-bottom: 14px;
}
.landing-page .lp-legal-head h1 {
font-family: var(--font-serif);
font-size: clamp(40px, 5.5vw, 64px);
font-weight: 400;
letter-spacing: -0.02em;
line-height: 1.05;
margin: 0 0 16px;
max-width: 18ch;
}
.landing-page .lp-legal-head h1 em {
font-style: italic;
color: var(--lp-terracotta);
}
.landing-page .lp-legal-head .lp-lede {
font-size: 18px;
line-height: 1.55;
color: var(--lp-ink-soft);
max-width: 60ch;
margin: 0;
}
.landing-page .lp-legal-meta {
margin-top: 28px;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.1em;
color: var(--lp-ink-mute);
text-transform: uppercase;
}
.landing-page .lp-legal-nav {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 32px 0 0;
padding: 0;
list-style: none;
}
.landing-page .lp-legal-nav li a {
display: inline-flex;
align-items: center;
padding: 8px 16px;
border: 1px solid var(--lp-rule);
border-radius: 999px;
font-size: 13.5px;
font-weight: 500;
color: var(--lp-ink-soft);
background: var(--lp-paper);
text-decoration: none;
transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.landing-page .lp-legal-nav li a:hover {
border-color: var(--lp-ink);
color: var(--lp-ink);
}
.landing-page .lp-legal-nav li a.is-active {
background: var(--lp-ink);
color: var(--lp-paper);
border-color: var(--lp-ink);
}
.landing-page .lp-legal-body {
padding: 32px 0 96px;
max-width: 72ch;
font-size: 16px;
line-height: 1.65;
color: var(--lp-ink-soft);
}
.landing-page .lp-legal-body > p:first-child {
font-size: 17px;
color: var(--lp-ink);
}
.landing-page .lp-legal-body h2 {
font-family: var(--font-serif);
font-size: 26px;
font-weight: 460;
color: var(--lp-ink);
letter-spacing: -0.005em;
line-height: 1.2;
margin: 48px 0 14px;
scroll-margin-top: 80px;
}
.landing-page .lp-legal-body h2:first-child {
margin-top: 0;
}
.landing-page .lp-legal-body h3 {
font-family: var(--font-sans);
font-size: 16px;
font-weight: 600;
color: var(--lp-ink);
margin: 28px 0 8px;
}
.landing-page .lp-legal-body p {
margin: 0 0 14px;
max-width: none;
}
.landing-page .lp-legal-body strong,
.landing-page .lp-legal-body b {
color: var(--lp-ink);
font-weight: 600;
}
.landing-page .lp-legal-body a:not(.btn) {
color: var(--lp-terracotta);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
}
.landing-page .lp-legal-body a:not(.btn):hover {
color: var(--lp-terracotta-d);
}
.landing-page .lp-legal-body ul,
.landing-page .lp-legal-body ol {
margin: 8px 0 16px;
padding-left: 22px;
}
.landing-page .lp-legal-body li {
margin-bottom: 6px;
}
.landing-page .lp-legal-body li::marker {
color: var(--lp-terracotta);
}
.landing-page .lp-legal-body hr {
border: 0;
border-top: 1px solid var(--lp-rule);
margin: 48px 0;
}
.landing-page .lp-legal-callout {
margin: 20px 0;
padding: 18px 22px;
background: var(--lp-paper-warm);
border-left: 3px solid var(--lp-terracotta);
border-radius: 4px;
font-size: 15px;
}
.landing-page .lp-legal-callout p {
margin: 0 0 6px;
}
.landing-page .lp-legal-callout p:last-child {
margin-bottom: 0;
}
.landing-page .lp-legal-callout strong {
color: var(--lp-ink);
}
.landing-page .lp-legal-contact {
margin-top: 56px;
padding: 28px 32px;
background: var(--lp-paper);
border: 1px solid var(--lp-rule);
border-radius: 14px;
text-align: center;
}
.landing-page .lp-legal-contact h3 {
font-family: var(--font-serif);
font-size: 22px;
font-weight: 460;
margin: 0 0 8px;
color: var(--lp-ink);
letter-spacing: -0.005em;
}
.landing-page .lp-legal-contact p {
font-size: 14px;
color: var(--lp-ink-mute);
line-height: 1.5;
margin: 0 0 18px;
max-width: 52ch;
margin-left: auto;
margin-right: auto;
}
.landing-page .lp-legal-contact .btn {
display: inline-flex;
padding: 13px 22px;
font-size: 14px;
min-width: 220px;
justify-content: center;
margin-top: 4px;
}
@media (max-width: 720px) {
.landing-page .lp-legal-head {
padding: 48px 0 16px;
}
.landing-page .lp-legal-body {
padding: 24px 0 72px;
}
.landing-page .lp-legal-body h2 {
font-size: 22px;
margin: 36px 0 12px;
}
.landing-page .lp-legal-contact {
padding: 24px 20px;
}
}
}
@layer features {
@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-price-card {
padding: 32px 28px;
}
.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-left: 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-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;
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-audience {
grid-template-columns: 1fr;
}
.landing-page .lp-audience-col.lp-yes {
border-right: 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-credits-explainer .lp-ce-batch {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.landing-page .lp-price-reframe {
font-size: 17px;
}
}
@media (max-width: 900px) {
.landing-page .lp-qr-stage {
transform: rotate(0);
margin: 0 auto;
}
.landing-page .lp-qr-stage .lp-qr-target {
width: 220px;
height: 220px;
}
}
@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: 24rem) {
.landing-page .lp-topnav {
padding-inline: 12px;
gap: 8px;
}
.landing-page .lp-brand-logo {
width: 96px;
}
}
}