/* Landing layout only. Use shared brand tokens; illustration rules preserved. */
.ku-stripe-page { --stripe-ink:var(--ku-lp-ink); --stripe-muted:var(--ku-lp-muted); --stripe-accent:var(--ku-lp-accent); color:var(--stripe-ink); background:var(--ku-lp-page); }
.ku-stripe-page * { box-sizing:border-box; }
.ku-stripe-page .ku-wrap { width:min(1120px,calc(100% - 48px)); margin-inline:auto; }
.ku-stripe-page .ku-hero { padding:56px 0 52px; background:var(--ku-lp-surface); }
.ku-stripe-page .ku-back { display:inline-block; margin-bottom:28px; color:var(--stripe-muted); font-size:15px; }
.ku-stripe-page h1 { max-width:920px; margin:0 0 24px; font-size:clamp(36px,4.5vw,60px); line-height:1.08; letter-spacing:-.035em; overflow-wrap:break-word; }
.ku-stripe-page .ku-lead { max-width:760px; margin:0 0 24px; color:var(--stripe-muted); font-size:clamp(18px,2vw,22px); line-height:1.55; }
.ku-stripe-page .ku-button { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:14px 22px; background:var(--stripe-accent); color:var(--ku-lp-surface); border-radius:10px; font-size:17px; font-weight:650; text-decoration:none; }
.ku-stripe-page .ku-button:hover { background:var(--ku-lp-accent-hover); }
.ku-stripe-page a:focus-visible,.ku-stripe-page summary:focus-visible { outline:3px solid var(--ku-lp-focus); outline-offset:4px; }
.ku-stripe-page .ku-note { margin:16px 0 0; font-size:15px; color:var(--stripe-muted); }
.ku-stripe-page .ku-section { padding:54px 0; }
.ku-stripe-page .ku-section + .ku-section { border-top:1px solid var(--ku-lp-line); }
.ku-stripe-page h2 { margin:0 0 24px; font-size:clamp(27px,3vw,38px); line-height:1.17; letter-spacing:-.02em; }
.ku-stripe-page h3 { margin:0 0 14px; font-size:23px; line-height:1.25; }
.ku-stripe-page p,.ku-stripe-page li { font-size:17px; line-height:1.65; }
.ku-stripe-page p { margin:0 0 16px; }
.ku-stripe-page .ku-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.ku-stripe-page .ku-card { padding:28px; border:1px solid var(--ku-lp-line); border-radius:16px; background:var(--ku-lp-surface); }
.ku-stripe-page .ku-card p:last-child { margin-bottom:0; }
.ku-stripe-page .ku-copy { max-width:820px; }
.ku-stripe-page .ku-copy li { margin-bottom:12px; padding-left:4px; }
.ku-stripe-page .ku-price { padding:28px; border-radius:16px; background:var(--ku-lp-surface); margin-top:28px; }
.ku-stripe-page .ku-price h3 { font-size:25px; }
.ku-stripe-page details { border-bottom:1px solid var(--ku-lp-line); padding:19px 0; }
.ku-stripe-page summary { cursor:pointer; font-size:18px; font-weight:650; line-height:1.45; }
.ku-stripe-page details p { margin:16px 0 2px; color:var(--stripe-muted); }
.ku-stripe-page .ku-final { padding:44px; border-radius:18px; background:var(--ku-lp-surface); color:var(--ku-lp-ink); }
.ku-stripe-page .ku-final h2 { color:var(--ku-lp-heading); }
.ku-stripe-page .ku-final p { max-width:750px; color:var(--ku-lp-muted); }
.ku-stripe-page .ku-related { margin-top:28px; }
.ku-stripe-page .ku-related a { color:var(--stripe-ink); text-underline-offset:3px; }
@media(max-width:700px) {
.ku-stripe-page .ku-wrap { width:calc(100% - 36px); }
}
@media(max-width:700px) {
.ku-stripe-page .ku-hero { padding:30px 0 34px; }
}
@media(max-width:700px) {
.ku-stripe-page .ku-back { margin-bottom:22px; }
}
@media(max-width:700px) {
.ku-stripe-page .ku-section { padding:36px 0; }
}
@media(max-width:700px) {
.ku-stripe-page .ku-grid { grid-template-columns:1fr; gap:16px; }
}
@media(max-width:700px) {
.ku-stripe-page .ku-card,.ku-stripe-page .ku-price { padding:24px; }
}
@media(max-width:700px) {
.ku-stripe-page .ku-final { padding:26px 22px; }
}
@media(max-width:700px) {
.ku-stripe-page .ku-button { width:100%; }
}
.ku-stripe-page .ku-hero { padding:52px 0 58px; background:var(--ku-lp-page); }
.ku-stripe-page .ku-hero > .ku-wrap { width:min(1240px,calc(100% - 64px)); }
.ku-stripe-page .ku-hero-layout { display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,1fr); gap:54px; align-items:center; }
.ku-stripe-page .ku-hero h1 { font-size:clamp(38px,3.8vw,54px); line-height:1.08; margin-bottom:22px; }
.ku-stripe-page .ku-hero .ku-lead { font-size:20px; line-height:1.55; }
.ku-stripe-page .ku-payment-map { position:relative; min-width:0; margin:0; padding:26px 24px 30px; border:1px solid #dce6e5; border-radius:26px; background:linear-gradient(150deg,#fff 15%,#f7f9fe 100%); box-shadow:0 22px 60px -32px #314e6655,0 1px 0 #fff inset; }
.ku-stripe-page .ku-payment-map figcaption { margin:0 0 20px; font-size:14px; line-height:1.3; font-weight:600; color:#425d68; letter-spacing:.01em; }
.ku-stripe-page .ku-payment-flow { display:grid; grid-template-columns:minmax(0,1fr) 48px minmax(0,1.48fr); align-items:center; position:relative; }
.ku-stripe-page .ku-payment-inputs { position:relative; height:336px; }
.ku-stripe-page .ku-payment-customer { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; position:absolute; inset:0 0 auto; height:104px; padding:0 5px; color:#152b35; }
.ku-stripe-page .ku-payment-customer > svg { flex-shrink:0; width:24px; height:24px; fill:none; stroke:#425d68; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.ku-stripe-page .ku-payment-customer strong { font-size:15px; line-height:1.25; font-weight:650; }
.ku-stripe-page .ku-payment-customer span { font-size:13px; line-height:1.45; color:#425d68; }
.ku-stripe-page .ku-payment-incoming { position:absolute; top:104px; left:calc(50% - 12px); width:24px; height:12px; fill:none; stroke:#899fa7; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.ku-stripe-page .ku-payment-stripe { position:absolute; inset:116px 0 auto; height:104px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:12px; border:1px solid #7063ef; border-radius:20px; color:#fff; background:#635bff; box-shadow:0 14px 28px -15px #635bff99,0 1px 0 #ffffff36 inset; }
.ku-stripe-page .ku-payment-stripe-name { display:block; font-size:38px; line-height:1; letter-spacing:-1.5px; font-weight:750; color:white; }
.ku-stripe-page .ku-payment-confirmed { display:flex; align-items:center; justify-content:center; gap:4px; color:white; font-size:12px; line-height:1.4; white-space:nowrap; }
.ku-stripe-page .ku-payment-confirmed svg { flex-shrink:0; width:15px; height:15px; border:1px solid #ffffff80; border-radius:50%; fill:none; stroke:white; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.ku-stripe-page .ku-payment-connections { display:block; width:100%; height:336px; fill:none; stroke:#819da5; stroke-width:1.5; stroke-linejoin:round; stroke-linecap:round; }
.ku-stripe-page .ku-payment-connections circle { fill:#087d73; stroke:#f7f9fe; stroke-width:2; }
.ku-stripe-page .ku-payment-results { display:grid; gap:12px; }
.ku-stripe-page .ku-payment-result { min-width:0; min-height:104px; padding:15px; display:flex; gap:10px; align-items:center; border:1px solid #dce6e5; border-radius:15px; background:#fff; box-shadow:0 5px 16px -12px #193d4c55; }
.ku-stripe-page .ku-payment-result > div { display:flex; flex-direction:column; gap:6px; min-width:0; }
.ku-stripe-page .ku-payment-result strong { font-size:16px; line-height:1.25; color:#152b35; font-weight:650; }
.ku-stripe-page .ku-payment-result div > span { font-size:14px; line-height:1.45; color:#425d68; }
.ku-stripe-page .ku-payment-result-icon { flex-shrink:0; width:32px; height:32px; border-radius:9px; display:grid; place-items:center; color:#087d73; background:#edf7f3; }
.ku-stripe-page .ku-payment-result-icon svg { width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linejoin:round; stroke-linecap:round; }
.ku-stripe-page .ku-payment-accounting .ku-payment-result-icon { color:#466d18; background:#f0f5e6; }
.ku-stripe-page .ku-payment-accounting strong { color:#426719; }
@media(min-width:1001px) and (max-width:1200px) {
.ku-stripe-page .ku-hero-layout { gap:32px; }
}
@media(min-width:1001px) and (max-width:1200px) {
.ku-stripe-page .ku-payment-map { padding-inline:18px; }
}
@media(min-width:1001px) and (max-width:1200px) {
.ku-stripe-page .ku-payment-result { padding:12px; gap:8px; }
}
@media(min-width:1001px) and (max-width:1200px) {
.ku-stripe-page .ku-payment-result-icon { display:none; }
}
@media(max-width:1000px) {
.ku-stripe-page .ku-hero-layout { grid-template-columns:1fr; gap:34px; }
}
@media(max-width:1000px) {
.ku-stripe-page .ku-hero-copy { max-width:760px; }
}
@media(max-width:1000px) {
.ku-stripe-page .ku-payment-map { width:min(540px,100%); justify-self:center; }
}
@media(max-width:1000px) {
.ku-stripe-page .ku-hero h1 { font-size:clamp(36px,5.2vw,54px); }
}
@media(max-width:700px) {
.ku-stripe-page .ku-hero { padding:30px 0 38px; }
}
@media(max-width:700px) {
.ku-stripe-page .ku-hero > .ku-wrap { width:calc(100% - 36px); }
}
@media(max-width:700px) {
.ku-stripe-page .ku-hero .ku-lead { font-size:18px; }
}
@media(max-width:700px) {
.ku-stripe-page .ku-hero-layout { gap:30px; }
}
@media(max-width:700px) {
.ku-stripe-page .ku-payment-map { padding:22px 16px 24px; border-radius:20px; }
}
@media(max-width:700px) {
.ku-stripe-page .ku-payment-flow { grid-template-columns:minmax(0,.85fr) 30px minmax(0,1.5fr); }
}
@media(max-width:700px) {
.ku-stripe-page .ku-payment-result { padding:13px 11px; min-height:104px; }
}
@media(max-width:700px) {
.ku-stripe-page .ku-payment-result-icon { display:none; }
}
@media(max-width:700px) {
.ku-stripe-page .ku-payment-result strong { font-size:16px; }
}
@media(max-width:700px) {
.ku-stripe-page .ku-payment-result div > span { font-size:14px; }
}
@media(max-width:700px) {
.ku-stripe-page .ku-payment-customer { padding:0; gap:4px; }
}
@media(max-width:700px) {
.ku-stripe-page .ku-payment-customer > svg { width:18px; height:18px; }
}
@media(max-width:700px) {
.ku-stripe-page .ku-payment-customer strong { font-size:14px; }
}
@media(max-width:700px) {
.ku-stripe-page .ku-payment-customer span { font-size:13px; }
}
@media(max-width:700px) {
.ku-stripe-page .ku-payment-confirmed { flex-direction:column; gap:5px; font-size:12px; white-space:normal; width:calc(100% - 12px); text-align:center; }
}
@media(max-width:700px) {
.ku-stripe-page .ku-payment-stripe { height:112px; top:112px; gap:10px; border-radius:16px; }
}
@media(max-width:700px) {
.ku-stripe-page .ku-payment-incoming { height:8px; top:104px; }
}
@media(max-width:700px) {
.ku-stripe-page .ku-payment-stripe-name { font-size:34px; }
}
@media(forced-colors:active) {
.ku-stripe-page .ku-payment-map,.ku-stripe-page .ku-payment-result,.ku-stripe-page .ku-payment-stripe { border:1px solid CanvasText; }
}