/* ============================================
ListingPrep home — page-specific layout (Étape B, palier 4).
Scope: /index.html ONLY. Reuses tokens from /css/style.css
+ /css/listingprep.css (loaded before this), declares Schibsted
Grotesk + JetBrains Mono via Google Fonts in .
Design intent: visual reference from Claude Design's ZIP, re-
implemented through project tokens. Accent = --color-brand (teal
#1E4D52), NOT the green #1c6e54 of the prototype. Hero "
"
from the prototype removed — wrap is responsive via text-wrap:
pretty + a generous max-width on the headline.
A few home-only local tokens are defined inside the body scope
for warm-cream surface variants used in tool-card visuals; they
are NOT promoted to :root because they belong to the home page's
editorial chrome, not to the global token system.
============================================ */
body.home-page {
font-family: "Schibsted Grotesk", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 17px;
line-height: 1.55;
background: var(--color-bg); /* warm cream — consume token */
color: #1d1b16; /* warm ink — slightly browner than --color-text */
/* Home-only local tokens for editorial chrome. */
--home-cream: #f4efe5;
--home-cream-deep: #ece5d6;
--home-surface: #fcfaf4;
--home-surface-2: #fbf7ee;
--home-ink: #1d1b16;
--home-ink-soft: #4a4539;
--home-muted: #756d5d;
--home-line: #e6ddcb;
--home-line-strong: #d9cfb9;
--home-brand-tint: #e4ede7;
--home-brand-tint-2:#d6e4dc;
}
body.home-page h1,
body.home-page h2,
body.home-page h3,
body.home-page h4,
body.home-page h5 {
font-family: "Schibsted Grotesk", system-ui, sans-serif;
}
/* ===== Header overrides for the home (sticky + backdrop blur) ===== */
body.home-page .site-header {
background: color-mix(in srgb, var(--home-cream) 86%, transparent);
backdrop-filter: saturate(140%) blur(10px);
border-bottom: 1px solid var(--home-line);
}
body.home-page .site-header__inner {
max-width: 1180px;
padding: 0 2rem;
height: 72px;
}
body.home-page .site-header__brand {
font-family: "Schibsted Grotesk", system-ui, sans-serif;
font-weight: 700;
font-size: 1.2rem;
letter-spacing: -0.02em;
color: var(--home-ink);
}
/* Wordmark wrapper uses the home's warm ink (vs --color-text from
listingprep.css which is the cooler tool-chrome dark). Higher
specificity than listingprep.css's class-only rule. */
body.home-page .site-header__brand .brand-wordmark {
color: var(--home-ink);
}
/* Inner highlight span (the one wrapping "Prep" inside .brand-wordmark).
Going one level deeper avoids matching .brand-wordmark itself (which
would turn "Listing" teal — defeating the dark wordmark above). */
body.home-page .site-header__brand .brand-wordmark > span {
color: var(--color-brand);
}
/* Home nav — main-nav inter-tools + section anchors + free pill */
.home-nav {
display: flex;
align-items: center;
gap: 1.85rem;
}
.home-nav__link {
color: var(--home-ink-soft);
font-weight: 500;
font-size: .95rem;
text-decoration: none;
transition: color .15s;
}
.home-nav__link:hover { color: var(--color-brand); }
.home-nav__pill {
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: .72rem;
font-weight: 500;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--color-brand);
background: var(--home-brand-tint);
border: 1px solid var(--home-brand-tint-2);
padding: .3rem .7rem;
border-radius: 999px;
white-space: nowrap;
}
@media (max-width: 760px) {
.home-nav__link--tool { display: none; }
}
@media (max-width: 540px) {
.home-nav__link--how { display: none; }
}
/* ===== Shared utilities for the home ===== */
.home-wrap {
max-width: 1180px;
margin: 0 auto;
padding: 0 2rem;
}
.home-eyebrow {
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: .75rem;
font-weight: 500;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--color-brand);
}
/* ===== Hero ===== */
.hero { padding: 4.5rem 0 1.8rem; }
.hero__audience {
margin-bottom: 1.4rem;
display: flex;
align-items: center;
gap: .625rem;
flex-wrap: wrap;
}
.hero__dot {
width: 4px; height: 4px;
border-radius: 50%;
background: var(--home-line-strong);
}
.hero__h1 {
/* RESPONSIVE WRAP — no hardcoded
. The headline wraps naturally
via text-wrap: pretty and a sensible max-width. */
font-size: clamp(2.4rem, 5.4vw, 4.2rem);
line-height: 1.04;
letter-spacing: -0.03em;
font-weight: 700;
max-width: 18ch;
text-wrap: pretty;
margin: 0;
}
.hero__free { color: var(--color-brand); }
.hero__sub {
margin: 1.5rem 0 0;
font-size: clamp(1.05rem, 2vw, 1.25rem);
line-height: 1.55;
color: var(--home-ink-soft);
max-width: 84ch;
text-wrap: pretty;
}
.hero__sub b { color: var(--home-ink); font-weight: 600; }
/* ===== Tool cards — one poster through three tools (the hub) =====
Re-implemented from Claude Design's "Tools Section" reference through
project tokens (terra=--color-accent, teal=--color-brand, cream=
--color-bg, border=--color-border). Stacked full-width cards, visual
and copy side by side, alternating sides. Scoped to body.home-page. */
.tools {
--t-stage: #f6f1e8; /* in-card visual seat */
--t-faint: #8a8270; /* eyebrows / labels */
margin-top: 2.85rem;
}
/* cards column */
.tools__cards { display: flex; flex-direction: column; gap: 24px; }
.feature-card {
background: #fff;
border: 1px solid var(--color-border);
border-radius: 18px;
box-shadow: 0 1px 2px rgba(38, 34, 28, .04), 0 18px 40px -22px rgba(38, 34, 28, .30);
overflow: hidden;
display: grid;
grid-template-columns: 1.05fr .95fr;
align-items: stretch;
text-decoration: none;
color: inherit;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.feature-card:hover {
transform: translateY(-3px);
box-shadow: 0 2px 6px rgba(38, 34, 28, .05), 0 30px 60px -28px rgba(38, 34, 28, .34);
border-color: var(--home-line-strong);
}
.feature-card.flip .feature-card__visual { order: 2; }
.feature-card.flip .feature-card__copy { order: 1; }
/* copy side */
.feature-card__copy {
padding: 44px 46px;
display: flex;
flex-direction: column;
justify-content: center;
}
.feature-card__kicker { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.feature-card__idx {
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 12px;
letter-spacing: .1em;
color: var(--t-faint);
font-weight: 500;
}
.feature-card__start {
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 10.5px;
letter-spacing: .12em;
font-weight: 600;
text-transform: uppercase;
background: var(--color-brand);
color: #eaf2f0;
border-radius: 999px;
padding: 5px 11px;
}
.feature-card__copy h3 {
font-size: 30px;
line-height: 1.08;
letter-spacing: -.02em;
margin: 0 0 14px;
font-weight: 700;
color: var(--home-ink);
}
.feature-card__copy p {
margin: 0;
color: var(--home-muted);
font-size: 16px;
line-height: 1.62;
max-width: 40ch;
}
.feature-card__copy p b { color: var(--home-ink); font-weight: 600; }
.feature-card__cta {
margin-top: 26px;
display: inline-flex;
align-items: center;
gap: 8px;
align-self: flex-start;
color: var(--color-brand);
font-weight: 700;
font-size: 15.5px;
}
.feature-card__cta svg { transition: transform .25s ease; }
.feature-card:hover .feature-card__cta svg { transform: translateX(4px); }
/* visual side */
.feature-card__visual {
position: relative;
background: var(--t-stage);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
min-height: 380px;
}
.feature-card__visual::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .02);
}
/* chips reused across visuals */
.viz-chip {
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 11px;
letter-spacing: .04em;
font-weight: 500;
background: var(--color-brand);
color: #eaf2f0;
border-radius: 7px;
padding: 5px 9px;
white-space: nowrap;
box-shadow: 0 4px 12px -4px rgba(30, 77, 82, .5);
}
.viz-chip--ghost {
background: #fff;
color: var(--color-brand);
border: 1px solid var(--color-border);
box-shadow: 0 1px 2px rgba(38, 34, 28, .05), 0 8px 22px -14px rgba(38, 34, 28, .28);
}
/* 01 Resize : size ladder */
.viz-ladder { display: flex; align-items: flex-end; justify-content: center; gap: 18px; padding: 0 12px; width: 100%; }
.viz-ladder__pr {
position: relative;
flex: none;
border-radius: 3px;
overflow: hidden;
background: #cdbf9f;
box-shadow: 0 1px 1px rgba(0, 0, 0, .08), 0 14px 26px -14px rgba(38, 34, 28, .55);
outline: 1px solid rgba(38, 34, 28, .06);
}
.viz-ladder__pr img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Enlarged ladder — fill the wide (1.05fr) visual zone better (overrides inline
sizes). Lead height capped at 250px to keep >=15px clearance from the DPI
badge top-right; widths follow the 2:3 poster ratio. */
.viz-ladder__pr:nth-child(1) { width: 82px !important; height: 123px !important; }
.viz-ladder__pr:nth-child(2) { width: 107px !important; height: 160px !important; }
.viz-ladder__pr:nth-child(3) { width: 136px !important; height: 204px !important; }
.viz-ladder__pr:nth-child(4) { width: 167px !important; height: 250px !important; }
.viz-ladder__tag {
position: absolute;
top: 7px;
left: 50%;
transform: translateX(-50%);
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 9.5px;
letter-spacing: .03em;
font-weight: 600;
background: rgba(255, 255, 255, .92);
color: var(--home-ink);
border-radius: 5px;
padding: 2px 6px;
white-space: nowrap;
box-shadow: 0 2px 6px rgba(38, 34, 28, .18);
}
.viz-ladder__pr--lead { outline: 2px solid var(--color-accent); }
.viz-ladder__pr--lead .viz-ladder__tag { background: var(--color-accent); color: #fff; }
.viz-ladder-base {
position: absolute;
left: 30px;
right: 30px;
bottom: 64px;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(38, 34, 28, .14) 18%, rgba(38, 34, 28, .14) 82%, transparent);
}
.viz-ladder-cap {
position: absolute;
left: 0;
right: 0;
bottom: 30px;
text-align: center;
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 11px;
letter-spacing: .06em;
color: var(--home-muted);
}
.viz-ladder-cap b { color: var(--color-brand); font-weight: 600; }
.viz-chip--dpi { position: absolute; top: 22px; right: 22px; }
/* 02 Mockup : layered real photos */
.viz-mock { position: relative; width: 100%; height: 100%; }
.viz-mock__back {
position: absolute;
top: 50%;
right: 30px;
transform: translateY(-50%) rotate(2.5deg);
width: 46%;
aspect-ratio: 1856 / 2464;
border-radius: 6px;
overflow: hidden;
box-shadow: 0 20px 40px -18px rgba(38, 34, 28, .5);
opacity: .9;
filter: saturate(.96);
}
.viz-mock__back img { width: 100%; height: 100%; object-fit: cover; }
.viz-mock__front {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-54%, -50%);
width: 62%;
aspect-ratio: 2379 / 3000;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 1px 2px rgba(0, 0, 0, .1), 0 30px 55px -22px rgba(38, 34, 28, .62);
}
.viz-mock__front img { width: 100%; height: 100%; object-fit: cover; }
.viz-mock .viz-chip { position: absolute; left: 30px; bottom: 26px; }
.viz-mock .viz-chip--count { left: auto; right: 30px; bottom: 26px; }
/* 03 PDF : mini delivery sheet (rebuilt in HTML, crisp at any size) */
.viz-sheetwrap { display: flex; align-items: center; justify-content: center; width: 100%; padding: 34px 0; }
.viz-sheet {
position: relative;
width: 288px;
aspect-ratio: 1 / 1.414;
background: #fff;
border-radius: 6px;
border: 1px solid #ece6d8;
box-shadow: 0 2px 4px rgba(0, 0, 0, .05), 0 30px 55px -24px rgba(38, 34, 28, .55);
padding: 20px 22px;
display: flex;
flex-direction: column;
transform: rotate(-1.4deg);
}
.viz-sheet__tab {
position: absolute;
top: -1px;
right: 18px;
background: var(--color-accent);
color: #fff;
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 9px;
letter-spacing: .12em;
font-weight: 600;
padding: 4px 8px 5px;
border-radius: 0 0 5px 5px;
box-shadow: 0 4px 10px -3px rgba(194, 103, 60, .6);
}
.viz-sheet__ph { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.viz-sheet__bn { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 8px; letter-spacing: .14em; color: var(--color-accent); font-weight: 600; }
.viz-sheet__bn small { display: block; color: var(--t-faint); letter-spacing: .1em; font-size: 6.5px; margin-top: 2px; font-weight: 500; }
.viz-sheet__mk { display: flex; gap: 3px; }
.viz-sheet__mk i { width: 8px; height: 8px; border-radius: 2px; display: block; }
.viz-sheet hr { border: none; border-top: 1px solid #eee7d8; margin: 11px 0; width: 100%; }
.viz-sheet__body { display: flex; gap: 11px; }
.viz-sheet__thumb {
width: 56px;
flex: none;
aspect-ratio: 2 / 3;
border-radius: 3px;
overflow: hidden;
outline: 1px solid rgba(0, 0, 0, .06);
box-shadow: 0 4px 10px -5px rgba(0, 0, 0, .4);
}
.viz-sheet__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.viz-sheet__title { font-size: 15px; font-weight: 700; letter-spacing: -.01em; line-height: 1.05; color: var(--home-ink); }
.viz-sheet__sub { font-size: 8.5px; color: var(--home-muted); margin-top: 4px; line-height: 1.35; }
.viz-sheet__lbl { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 7px; letter-spacing: .14em; color: var(--t-faint); font-weight: 600; margin: 13px 0 6px; }
.viz-sheet table { width: 100%; border-collapse: collapse; font-size: 7.5px; color: var(--home-muted); }
.viz-sheet td { padding: 3px 0; border-top: 1px solid #f1ebdd; }
.viz-sheet td:first-child { font-weight: 700; color: var(--home-ink); font-size: 8px; }
.viz-sheet td:nth-child(2) { font-family: "JetBrains Mono", ui-monospace, monospace; color: var(--t-faint); }
.viz-sheet td:last-child { text-align: right; }
.viz-sheet__dl {
margin-top: 12px;
background: var(--color-accent);
color: #fff;
border-radius: 6px;
text-align: center;
font-size: 9.5px;
font-weight: 700;
padding: 8px;
letter-spacing: .01em;
}
.viz-sheet__steps { margin-top: auto; padding-top: 11px; display: flex; gap: 8px; }
.viz-sheet__st { flex: 1; font-size: 6.5px; color: var(--home-muted); line-height: 1.35; }
.viz-sheet__st b { display: block; font-family: "JetBrains Mono", ui-monospace, monospace; color: var(--color-brand); font-size: 8px; margin-bottom: 2px; }
.viz-sheet__mail { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 6.5px; color: var(--t-faint); margin-top: 9px; letter-spacing: .02em; }
/* 04 Listing : published Etsy fiche reconstructed in HTML/CSS */
.viz-listing { padding: 2.1rem 1.6rem; width: 100%; }
.viz-listing__sheet {
width: min(340px, 100%);
margin: 0 auto;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 13px;
padding: 1.25rem 1.3rem 1.35rem;
box-shadow: 0 2px 5px rgba(29, 27, 22, .05), 0 26px 48px -26px rgba(29, 27, 22, .34);
transform: rotate(-1.4deg);
}
.viz-listing__top { display: flex; align-items: center; gap: .6rem; margin-bottom: .85rem; }
.viz-listing__thumb {
width: 46px;
height: 58px;
border-radius: 5px;
flex: none;
border: 1px solid rgba(29, 27, 22, .08);
overflow: hidden;
background: url(/assets/img/kubutambahan-artwork.jpg) center / cover;
}
.viz-listing__platform { display: flex; flex-direction: column; gap: .18rem; min-width: 0; }
.viz-listing__store {
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: .62rem;
letter-spacing: .13em;
text-transform: uppercase;
color: var(--color-accent);
font-weight: 500;
}
.viz-listing__status {
display: inline-flex;
align-items: center;
gap: .34rem;
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: .6rem;
letter-spacing: .08em;
text-transform: uppercase;
color: #3f7d5c;
}
.viz-listing__status::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: #3f9c6c;
box-shadow: 0 0 0 3px rgba(63, 156, 108, .16);
}
.viz-listing__title {
margin: 0 0 .7rem;
font-size: .86rem;
line-height: 1.38;
font-weight: 600;
color: var(--home-ink);
letter-spacing: -.01em;
}
.viz-listing__title b { color: var(--color-accent); font-weight: 600; }
.viz-listing__taglabel {
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: .58rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--home-muted);
margin: 0 0 .45rem;
}
.viz-listing__tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .95rem; }
.viz-listing__chip {
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: .585rem;
letter-spacing: .01em;
color: #4a463c;
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: 999px;
padding: .16rem .44rem;
line-height: 1.3;
white-space: nowrap;
}
.viz-listing__chip--n { color: var(--color-brand); background: #fff; border-color: #cdd9d5; }
.viz-listing__attrs {
border-top: 1px dashed var(--color-border);
padding-top: .7rem;
display: flex;
flex-direction: column;
gap: .34rem;
}
.viz-listing__attr {
display: flex;
justify-content: space-between;
gap: 1rem;
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: .625rem;
line-height: 1.3;
}
.viz-listing__attr span:first-child { color: var(--home-muted); letter-spacing: .04em; text-transform: uppercase; }
.viz-listing__attr span:last-child { color: var(--home-ink); text-align: right; }
/* responsive — cards collapse to visual-on-top, single column */
@media (max-width: 860px) {
.feature-card,
.feature-card.flip { grid-template-columns: 1fr; }
.feature-card__visual { order: 1 !important; min-height: 300px; }
.feature-card__copy { order: 2 !important; padding: 30px 26px 34px; }
.feature-card__copy h3 { font-size: 25px; }
.viz-ladder { gap: 12px; padding: 0 16px; }
.viz-ladder__pr:nth-child(1) { width: 62px !important; height: 93px !important; }
.viz-ladder__pr:nth-child(2) { width: 82px !important; height: 123px !important; }
.viz-ladder__pr:nth-child(3) { width: 104px !important; height: 156px !important; }
.viz-ladder__pr:nth-child(4) { width: 132px !important; height: 198px !important; }
.viz-mock__front { width: 60%; }
}
/* ===== How it works ===== */
.how { padding: 6rem 0 2rem; }
.how__head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1.5rem;
flex-wrap: wrap;
margin-bottom: 2.5rem;
}
.how__head h2 {
font-size: clamp(1.75rem, 3.4vw, 2.4rem);
letter-spacing: -0.025em;
font-weight: 700;
margin: 0;
}
.how__head p {
color: var(--home-muted);
max-width: 40ch;
margin: 0;
}
.how__steps {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 0;
position: relative;
}
.how__steps::before {
content: "";
position: absolute;
top: 27px;
left: 9%;
right: 9%;
height: 2px;
background: repeating-linear-gradient(90deg, var(--home-line-strong) 0 6px, transparent 6px 12px);
z-index: 0;
}
.how__step {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 0 .65rem;
}
.how__step-ic {
width: 56px;
height: 56px;
border-radius: 16px;
background: var(--home-surface);
border: 1px solid var(--home-line);
box-shadow: 0 1px 2px rgba(29, 27, 22, 0.05);
display: grid;
place-items: center;
color: var(--color-brand);
margin-bottom: 1rem;
}
.how__step--key .how__step-ic {
background: var(--color-brand);
color: #fff;
border-color: var(--color-brand);
box-shadow: 0 2px 4px rgba(29, 27, 22, 0.04), 0 16px 36px -20px rgba(29, 27, 22, 0.22);
}
.how__step-n {
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: .68rem;
color: var(--home-muted);
letter-spacing: .08em;
margin-bottom: .25rem;
}
.how__step h4 {
font-size: 1.05rem;
font-weight: 700;
letter-spacing: -0.01em;
margin: 0 0 .25rem;
}
.how__step p {
font-size: .85rem;
color: var(--home-muted);
line-height: 1.4;
max-width: 18ch;
margin: 0;
}
@media (max-width: 760px) {
.how__steps { grid-template-columns: repeat(2, 1fr); gap: 2rem .75rem; }
.how__steps::before { display: none; }
}
/* Host concept + trust block */
.host-note {
margin-top: 3.5rem;
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 0;
border: 1px solid var(--home-line);
border-radius: 22px;
overflow: hidden;
background: var(--home-surface);
box-shadow: 0 2px 4px rgba(29, 27, 22, 0.04), 0 16px 36px -20px rgba(29, 27, 22, 0.22);
}
.host-note__col { padding: 2.15rem 2.25rem; }
.host-note__col--lead {
background: var(--color-brand);
color: #eaf2ee;
}
.host-note__col--lead .home-eyebrow { color: #bfe0d0; }
.host-note__col--lead h3 {
color: #fff;
font-size: 1.5rem;
letter-spacing: -0.02em;
margin: .75rem 0 .75rem;
font-weight: 700;
}
.host-note__col--lead p {
color: #d4e6dd;
line-height: 1.6;
font-size: 1.05rem;
margin: 0;
}
.host-note__col--trust {
display: flex;
flex-direction: column;
justify-content: center;
gap: 1rem;
}
.trust-row {
display: flex;
gap: .9rem;
align-items: flex-start;
}
.trust-row__ic {
flex: none;
width: 34px;
height: 34px;
border-radius: 10px;
background: var(--home-brand-tint);
color: var(--color-brand);
display: grid;
place-items: center;
}
.trust-row h5 {
font-size: 1rem;
font-weight: 700;
margin: 0 0 .2rem;
}
.trust-row p {
font-size: .92rem;
color: var(--home-muted);
line-height: 1.5;
margin: 0;
}
@media (max-width: 760px) {
.host-note { grid-template-columns: 1fr; }
}
/* ===== Email capture (Kit form bande dédiée) ===== */
.notify { padding: 6rem 0 2.5rem; }
.notify__card {
background: var(--home-ink);
color: var(--home-cream);
border-radius: 26px;
padding: 3.5rem 3.5rem;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2.5rem;
align-items: center;
position: relative;
overflow: hidden;
}
.notify__card::after {
content: "";
position: absolute;
right: -60px;
top: -60px;
width: 280px;
height: 280px;
border-radius: 50%;
background: radial-gradient(circle, rgba(30, 77, 82, 0.45), transparent 70%);
}
.notify__roadmap {
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: .75rem;
letter-spacing: .12em;
text-transform: uppercase;
color: #8fc4ae;
margin: 0 0 .9rem;
}
.notify__card h2 {
font-size: clamp(1.6rem, 3vw, 2.15rem);
letter-spacing: -0.025em;
line-height: 1.08;
font-weight: 700;
margin: 0;
}
.notify__sub {
margin: .75rem 0 0;
color: #c4bdac;
max-width: 38ch;
}
/* ===== Kit form (stripped + restyled) =====
Kit's