/*
    Kiplin design system for the CGU / Politique de confidentialité pages
    and the home page, based on the Figma file "CGU - PDC".
*/

:root {
    --kp-ink: #24202c;
    --kp-border: #e8dfea;
    --kp-bg-top: #e4faff;
    --kp-radius-sm: 16px;
    --kp-radius-md: 24px;
    --kp-radius-lg: 40px;
    --kp-pad-sm: 16px;
    --kp-pad-md: 32px;
    --kp-pad-lg: 48px;
}

.kp-page {
    position: relative;
    margin: 0;
    min-height: 100vh;
    font-family: "Plus Jakarta Sans", "Kanit", sans-serif;
    color: var(--kp-ink);
    background: #fff;
    overflow-x: clip;
}

/* main.css sets overflow-x: hidden on html and body, which breaks position: sticky
   (legal table of contents); clip hides the horizontal overflow the same way */
html:has(> body.kp-page),
body.kp-page {
    overflow-x: clip;
}

/* Text selection: DS orange 500 at 45% (about #ffd6b3 on white). main.css sets a white
   selection, invisible on white; the transparency keeps descenders visible where the
   next line's highlight overlaps tight titles. */
.kp-page ::selection {
    background-color: rgba(254, 159, 81, 0.45);
    color: var(--kp-ink);
}

/* Decorative elements: not selectable, and their images cannot be dragged */
.kp-bg,
.kp-home__phone,
.kp-invite__outro img,
.kp-invite__dot,
.kp-qr {
    -webkit-user-select: none;
    user-select: none;
}

.kp-bg img,
.kp-home__phone img,
.kp-invite__outro img,
.kp-qr img {
    -webkit-user-drag: none;
}

/* Decorative gradient + bubble artwork behind the top of the page */
.kp-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 600px;
    overflow: hidden;
    background: linear-gradient(to bottom, var(--kp-bg-top), #fff);
    z-index: 0;
}

.kp-bg__side {
    position: absolute;
    top: 0;
    height: 100%;
    width: 384px;
    max-width: 40%;
}

.kp-bg__side--left { left: 0; }
.kp-bg__side--right { right: 0; }

.kp-bg__side img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kp-shell {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    max-width: 1292px; /* 1100px content + 2 × 96px padding */
    margin: 0 auto;
    padding: 24px 12px;
}

@media (min-width: 768px) {
    .kp-shell { gap: 32px; padding: 32px; }
}

@media (min-width: 1280px) {
    .kp-shell { gap: 48px; padding: 48px 96px; }
}

/* Navbar */
.kp-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    max-width: 1100px;
}

.kp-logo {
    display: block;
    flex-shrink: 0;
    width: 80px;
    height: 32px;
}

@media (min-width: 768px) {
    .kp-logo { width: 120px; height: 48px; }
}

@media (min-width: 1280px) {
    .kp-logo { width: 160px; height: 64px; }
}

.kp-logo img {
    display: block;
    width: 100%;
    height: 100%;
}

.kp-nav__links {
    display: flex;
    flex: 1 0 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 120px;
}

@media (min-width: 768px) {
    .kp-nav__links { flex-direction: row; flex-wrap: wrap; gap: 16px; }
}

@media (min-width: 1280px) {
    .kp-nav__links { gap: 24px; }
}

.kp-nav__link {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: -0.32px;
    text-decoration: underline;
    text-align: center;
    color: var(--kp-ink);
}

.kp-nav__link:hover,
.kp-nav__link:focus {
    color: #09a1b7;
}

.kp-nav__link[aria-current="page"] {
    font-weight: 700;
}

/* Language switcher */
.kp-lang {
    position: relative;
    flex-shrink: 0;
}

.kp-lang__button {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 16px;
    border: 1px solid var(--kp-border);
    border-radius: 100px;
    background: #fff;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: var(--kp-ink);
    cursor: pointer;
}

.kp-lang__button:hover,
.kp-lang__button[aria-expanded="true"] {
    border-color: #8d8799;
}

.kp-lang__icon,
.kp-lang__chevron {
    display: block;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.kp-lang__chevron {
    width: 12px;
    height: auto;
    transition: transform 0.15s ease-out;
}

.kp-lang__button[aria-expanded="true"] .kp-lang__chevron {
    transform: rotate(180deg);
}

.kp-lang__list {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 20;
    min-width: 180px;
    max-height: min(60vh, 420px);
    overflow-y: auto;
    margin: 0;
    padding: 8px;
    list-style: none;
    background: #fff;
    border: 1px solid var(--kp-border);
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(36, 32, 44, 0.12);
}

.kp-lang__list[hidden] { display: none; }

.kp-lang__list a {
    display: block;
    padding: 10px 12px;
    border-radius: 12px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 15px;
    color: var(--kp-ink);
    text-decoration: none;
    white-space: nowrap;
}

.kp-lang__list a:hover,
.kp-lang__list a:focus {
    background: #f4fbfd;
}

/* Content card, shared by legal and home pages */
.kp-card {
    box-sizing: border-box;
    width: 100%;
    max-width: 1100px;
    padding: var(--kp-pad-sm);
    background: #fff;
    border: 1px solid var(--kp-border);
    border-radius: var(--kp-radius-sm);
}

@media (min-width: 768px) {
    .kp-card { padding: var(--kp-pad-md); border-radius: var(--kp-radius-md); }
}

@media (min-width: 1280px) {
    .kp-card { padding: var(--kp-pad-lg); border-radius: var(--kp-radius-lg); }
}

.kp-title {
    margin: 0 0 12px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 800;
    color: var(--kp-ink);
    font-size: 20px;
    line-height: 1.15;
    text-transform: none;
    letter-spacing: normal;
}

@media (min-width: 768px) {
    .kp-title { font-size: 40px; }
}

@media (min-width: 1280px) {
    .kp-title { font-size: 64px; }
}

.kp-subtitle {
    margin: 0 0 12px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 800;
    color: var(--kp-ink);
    font-size: 16px;
    line-height: 1.2;
    text-transform: none;
    letter-spacing: normal;
}

@media (min-width: 768px) {
    .kp-subtitle { font-size: 24px; }
}

@media (min-width: 1280px) {
    .kp-subtitle { font-size: 40px; }
}

/* Markdown content rendered from the legal API, styled like the app's KiplinMarkdown
   (kiplin-android core-ui/components/markdown): same text styles per Markdown element.
   Exception: body text keeps a 1.5 line height, the app's 20px is too tight for long
   legal paragraphs on a wide column. */
.kp-markdown {
    width: 100%;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--kp-ink);
    overflow-wrap: break-word;
}

.kp-markdown > *:first-child { margin-top: 0; }
.kp-markdown > *:last-child { margin-bottom: 0; }

.kp-markdown p { margin: 0 0 1em; }

.kp-markdown h1,
.kp-markdown h2,
.kp-markdown h3,
.kp-markdown h4,
.kp-markdown h5,
.kp-markdown h6 {
    margin: 1.6em 0 0.6em;
    font-family: "Sora", sans-serif;
    font-weight: 700;
    color: var(--kp-ink);
    text-transform: none;
    letter-spacing: normal;
    scroll-margin-top: 24px;
}

/* Title1 to Title4, SubTitle1 and SubTitle2 */
.kp-markdown h1 { font-size: 32px; line-height: 40px; }
.kp-markdown h2 { font-size: 24px; line-height: 31px; padding-top: 1em; border-top: 1px solid var(--kp-border); }
.kp-markdown > h2:first-child { padding-top: 0; border-top: none; }
.kp-markdown h3 { font-size: 20px; line-height: 25px; }
.kp-markdown h4 { font-size: 16px; line-height: 20px; }
.kp-markdown h5 { font-size: 14px; line-height: 18px; }
.kp-markdown h6 { font-size: 12px; line-height: 16px; }

.kp-markdown ul,
.kp-markdown ol {
    margin: 0 0 1em;
    padding-left: 1.4em;
}

.kp-markdown li { margin-bottom: 0.4em; }

/* Loose lists wrap each item in a paragraph: no paragraph gap inside an item */
.kp-markdown li > p { margin: 0; }
.kp-markdown li > p + p { margin-top: 0.4em; }
/* Extra space when going back up a level (after a nested list) */
.kp-markdown li > ul,
.kp-markdown li > ol { margin: 0.4em 0 1em; }

/* Link1, blue base */
.kp-markdown a {
    font-family: "Sora", sans-serif;
    font-weight: 700;
    color: #43c5ec;
    text-decoration: underline;
}

.kp-markdown a:hover,
.kp-markdown a:focus { color: #1080a2; }

.kp-markdown strong { font-weight: 700; }

/* Text2 italic, blue base */
.kp-markdown blockquote {
    margin: 0 0 1em;
    padding: 0 0 0 1em;
    border-left: 3px solid var(--kp-border);
    font-size: 14px;
    line-height: 18px;
    font-style: italic;
    color: #43c5ec;
}

/* main.css wraps quoted paragraphs in typographic quotes, the app does not */
.kp-markdown blockquote p::before,
.kp-markdown blockquote p::after { content: none; }

.kp-markdown blockquote p { margin: 0; }

/* Text2 monospace on grey light */
.kp-markdown code {
    padding: 0.15em 0.4em;
    border-radius: 4px;
    background: var(--kp-border);
    font-family: monospace;
    font-size: 14px;
}

.kp-markdown pre {
    margin: 0 0 1em;
    padding: 8px;
    border-radius: 4px;
    background: var(--kp-border);
    overflow-x: auto;
}

.kp-markdown pre code { padding: 0; }

.kp-markdown hr {
    margin: 1.5em 0;
    border: none;
    border-top: 1px solid var(--kp-border);
}

/* Text2 on grey light */
.kp-markdown table {
    width: 100%;
    margin: 0 0 1em;
    border-collapse: collapse;
    background: var(--kp-border);
    font-size: 14px;
    line-height: 18px;
}

.kp-markdown th,
.kp-markdown td {
    padding: 0.5em 0.75em;
    border: 1px solid #fff;
    text-align: left;
}

.kp-markdown .kp-state {
    color: #6e6879;
    font-style: italic;
}

/*
    Legal pages (terms, privacy policy): tabs between the two documents, table of
    contents built by legal.js (sticky on wide screens, folded on phones).
*/
/* Segmented control, as in the mockup: one white pill holding both tabs */
.kp-legal-tabs {
    display: flex;
    flex-wrap: wrap;
    align-self: flex-start;
    gap: 4px;
    max-width: 100%;
    padding: 4px;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid var(--kp-border);
    border-radius: 100px;
}

.kp-legal-tabs__tab {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 20px;
    border-radius: 100px;
    font-family: "Sora", sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--kp-ink);
    text-decoration: none;
}

.kp-legal-tabs__tab:hover,
.kp-legal-tabs__tab:focus-visible { background: #f1ecf2; color: var(--kp-ink); }

/* Active tab: DS orange like the primary button, dark label for contrast */
.kp-legal-tabs__tab[aria-current="page"],
.kp-legal-tabs__tab[aria-current="page"]:hover {
    background: #fe9f51;
    color: var(--kp-ink);
}

/* Phones: the two tabs share the width, labels may wrap */
@media (max-width: 767px) {
    .kp-legal-tabs { align-self: stretch; flex-wrap: nowrap; border-radius: 24px; }
    .kp-legal-tabs__tab { flex: 1 1 0; justify-content: center; padding: 8px 12px; border-radius: 20px; text-align: center; line-height: 1.3; }
}

.kp-legal {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    max-width: 1100px;
}

@media (min-width: 1024px) {
    .kp-legal { flex-direction: row; align-items: flex-start; gap: 32px; }
}

.kp-legal__toc {
    box-sizing: border-box;
    padding: 0;
    background: #f1ecf2;
    border-radius: var(--kp-radius-md);
}

.kp-legal__toc[hidden] { display: none; }

@media (min-width: 1024px) {
    .kp-legal__toc {
        position: sticky;
        top: 24px;
        flex: 0 0 260px;
        max-height: calc(100vh - 48px);
        overflow-y: auto;
    }
}

.kp-legal__toc-title {
    padding: 16px 20px;
    font-family: "Sora", sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: #6e6879;
    cursor: pointer;
}

@media (min-width: 1024px) {
    .kp-legal__toc-title { padding: 24px 24px 12px; cursor: default; pointer-events: none; list-style: none; }
    .kp-legal__toc-title::-webkit-details-marker { display: none; }
}

.kp-legal__toc-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0 12px 16px;
    list-style: none;
}

@media (min-width: 1024px) {
    .kp-legal__toc-list { padding: 0 12px 20px; }
}

.kp-legal__toc-list a {
    display: block;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--kp-ink);
    text-decoration: none;
}

.kp-legal__toc-list a:hover,
.kp-legal__toc-list a:focus-visible { background: #fff; color: var(--kp-ink); }

/* Section being read: orange like the active tab (orange 700 for text contrast) */
.kp-legal__toc-list a[aria-current="true"] {
    background: #fff;
    color: #cb5c01;
}

.kp-card.kp-legal__doc {
    flex: 1 1 auto;
    min-width: 0;
    padding: 24px 20px;
    border: none;
    border-radius: var(--kp-radius-md);
    box-shadow: 0 6px 24px rgba(36, 32, 44, 0.12);
}

@media (min-width: 768px) {
    .kp-card.kp-legal__doc {
        padding: 48px;
        border-radius: var(--kp-radius-lg);
        box-shadow: 0 16px 16px rgba(36, 32, 44, 0.06), 0 16px 16px rgba(36, 32, 44, 0.06);
    }
}

.kp-legal__title {
    margin: 0 0 24px;
    font-family: "Sora", sans-serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.6px;
    text-transform: none;
    color: var(--kp-ink);
}

@media (min-width: 768px) {
    .kp-legal__title { margin-bottom: 32px; font-size: 40px; letter-spacing: -1px; }
}

/*
    Home page, based on the Claude Design refresh with the "App System - Kiplin"
    tokens. Phones: text, badges, phone, features; from md the phone floats on the right.
*/
.kp-card.kp-home {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "text" "badges" "phone" "features";
    gap: 24px;
    padding: 28px 20px;
    border: none;
    border-radius: var(--kp-radius-md);
    box-shadow: 0 6px 24px rgba(36, 32, 44, 0.12);
}

@media (min-width: 768px) {
    .kp-card.kp-home {
        grid-template-columns: minmax(0, 1fr) 300px;
        grid-template-areas: "text phone" "features phone" "badges phone";
        align-items: start;
        column-gap: 40px;
        row-gap: 28px;
        padding: 48px;
        border-radius: var(--kp-radius-lg);
        box-shadow: 0 16px 16px rgba(36, 32, 44, 0.06), 0 16px 16px rgba(36, 32, 44, 0.06);
    }
}

@media (min-width: 1280px) {
    .kp-card.kp-home { column-gap: 48px; padding: 56px; }
}

.kp-home__text {
    grid-area: text;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

@media (min-width: 768px) {
    .kp-home__text { gap: 16px; }
}

.kp-home__kicker {
    margin: 0;
    font-family: "Sora", sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #cb5c01;
}

.kp-home__title {
    margin: 0;
    font-family: "Sora", sans-serif;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.6px;
    text-transform: none;
    color: var(--kp-ink);
}

.kp-home__description {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: #6e6879;
}

@media (min-width: 768px) {
    .kp-home__kicker { font-size: 16px; }
    .kp-home__title { font-size: 44px; line-height: 1.05; letter-spacing: -1.2px; }
    .kp-home__description { font-size: 17px; }
}

@media (min-width: 1280px) {
    .kp-home__title { font-size: 52px; letter-spacing: -1.5px; }
    .kp-home__description { font-size: 18px; }
}

.kp-home__features {
    grid-area: features;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kp-home__feature {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.kp-home__feature p { margin: 0; }

.kp-home__feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 12px;
}

.kp-home__feature-icon--blue { background: var(--kp-bg-top); color: #1080a2; }
.kp-home__feature-icon--orange { background: #fff2e7; color: #cb5c01; }
.kp-home__feature-icon--neutral { background: #f1ecf2; color: var(--kp-ink); }

.kp-home__feature-title {
    font-family: "Sora", sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--kp-ink);
}

.kp-home__feature-text {
    margin-top: 2px !important;
    font-size: 13px;
    line-height: 1.5;
    color: #6e6879;
}

@media (min-width: 768px) {
    .kp-home__feature { gap: 14px; }
    .kp-home__feature-icon { width: 44px; height: 44px; }
    .kp-home__feature-title { font-size: 16px; padding-top: 2px; }
    .kp-home__feature-text { font-size: 14px; }
}

/* Badges are cropped to their visible edges so both render at the same height */
.kp-home__badges {
    grid-area: badges;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.kp-home__badges img {
    display: block;
    height: 36px;
    width: auto;
}

@media (min-width: 768px) {
    .kp-home__badges { gap: 12px; }
    .kp-home__badges img { height: 44px; }
}

/*
    Illustration: 10 layers of 1100x1100 stacked in 3D (same depths as kiplin.com),
    tilted toward the mouse by js/tilt.js. Each layer is scaled down by its depth so
    that, at rest, the projection is exactly the flat composition.
    Negative margins crop the transparent edges of the layers from the layout.
*/
.kp-home__phone {
    --tilt-size: 300px;
    grid-area: phone;
    display: flex;
    justify-content: center;
    perspective: 1000px;
}

@media (min-width: 768px) {
    .kp-home__phone { --tilt-size: 360px; align-self: center; }
}

@media (min-width: 1280px) {
    .kp-home__phone { --tilt-size: 400px; }
}

.kp-tilt {
    position: relative;
    flex-shrink: 0;
    width: var(--tilt-size);
    height: var(--tilt-size);
    margin: calc(var(--tilt-size) * -0.035) calc(var(--tilt-size) * -0.09) calc(var(--tilt-size) * -0.045) calc(var(--tilt-size) * -0.17);
    transform-style: preserve-3d;
    transition: transform 300ms cubic-bezier(0.03, 0.98, 0.52, 0.99);
    will-change: transform;
}

.kp-tilt__layer {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.kp-tilt__layer--z20 { transform: translateZ(20px) scale(0.98); }
.kp-tilt__layer--z30 { transform: translateZ(30px) scale(0.97); }
.kp-tilt__layer--z40 { transform: translateZ(40px) scale(0.96); }

@media (prefers-reduced-motion: reduce) {
    .kp-tilt { transition: none; }
}

/*
    Invitation page (registration code + QR code), based on the Claude Design
    refresh of the Figma mockups, with the "App System - Kiplin" tokens:
    sm (< 768px), md (768-1279px), lg (1280px+).
*/
.kp-nav--compact {
    flex-wrap: nowrap;
    justify-content: space-between;
}

/* Phones: same margins as the mockups (home and invitation) */
@media (max-width: 767px) {
    .kp-page--compact .kp-shell { padding: 20px 16px 32px; }
}

/* Home and invitation pages fit a laptop screen from md */
@media (min-width: 768px) {
    .kp-page--compact .kp-shell { gap: 32px; padding-top: 32px; padding-bottom: 32px; }
    .kp-page--compact .kp-logo { width: 140px; height: 56px; }
}

.kp-invite {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 24px;
}

/* Phones: the steps are the white card and the QR block a separate card below it */
.kp-card.kp-invite {
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
}

@media (max-width: 767px) {
    .kp-invite__steps {
        padding: 24px 20px;
        background: #fff;
        border-radius: var(--kp-radius-md);
        box-shadow: 0 6px 24px rgba(36, 32, 44, 0.12);
    }
}

@media (min-width: 768px) {
    .kp-invite { gap: 32px; }
    .kp-card.kp-invite {
        padding: 40px;
        background: #fff;
        border-radius: var(--kp-radius-lg);
        box-shadow: 0 16px 16px rgba(36, 32, 44, 0.06), 0 16px 16px rgba(36, 32, 44, 0.06);
    }
}

.kp-invite__steps {
    flex: 999 1 480px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

@media (min-width: 768px) {
    .kp-invite__steps { gap: 28px; }
}

/* Title and intro */
.kp-invite__header {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

@media (min-width: 768px) {
    .kp-invite__header { gap: 12px; }
}

.kp-invite__title {
    margin: 0;
    font-family: "Sora", sans-serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.6px;
    text-transform: none;
    color: var(--kp-ink);
}

@media (min-width: 768px) {
    .kp-invite__title { font-size: 40px; letter-spacing: -1px; line-height: 1.05; }
}

@media (min-width: 1280px) {
    .kp-invite__title { font-size: 50px; letter-spacing: -1.2px; }
}

.kp-invite__intro {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: #6e6879;
}

@media (min-width: 768px) {
    .kp-invite__intro { font-size: 16px; }
}

@media (min-width: 1280px) {
    .kp-invite__intro { font-size: 18px; }
}

/* Steps: numbered timeline */
.kp-invite__list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kp-invite__step {
    position: relative;
    display: flex;
    gap: 14px;
}

.kp-invite__step:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 38px;
    bottom: 6px;
    left: 15px;
    width: 2px;
    background: var(--kp-border);
}

@media (min-width: 768px) {
    .kp-invite__step { gap: 18px; }
}

.kp-invite__dot {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #1080a2;
    font-family: "Sora", sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
}



.kp-invite__step-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 5px 0 24px;
}

.kp-invite__step:last-child .kp-invite__step-body { padding-bottom: 0; }

@media (min-width: 768px) {
    .kp-invite__step-body { gap: 12px; padding: 5px 0 22px; }
}

.kp-invite__step-title {
    margin: 0;
    font-family: "Sora", sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: normal;
    text-transform: none;
    color: var(--kp-ink);
}

@media (min-width: 768px) {
    .kp-invite__step-title { font-size: 18px; }
}

/* Badges are cropped to their visible edges so both render at the same height */
.kp-invite__badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.kp-invite__badges img {
    display: block;
    height: 36px;
    width: auto;
}

@media (min-width: 768px) {
    .kp-invite__badges { gap: 10px; }
    .kp-invite__badges img { height: 42px; }
}

/* Registration code */
.kp-invite__code {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    background: var(--kp-bg-top);
    border: 2px solid #43c5ec;
    border-radius: var(--kp-radius-sm);
}

@media (min-width: 768px) {
    .kp-invite__code {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 16px;
        padding: 14px 18px 14px 22px;
        border-radius: var(--kp-radius-md);
    }
}

/* Sized to the code: the button wraps below rather than the code breaking */
.kp-invite__code-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.kp-invite__code-label {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--kp-ink);
}

.kp-invite__code-value {
    margin: 0;
    font-family: "Sora", sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.5px;
    color: var(--kp-ink);
    overflow-wrap: anywhere;
}

@media (min-width: 768px) {
    .kp-invite__code-label { font-size: 13px; }
    .kp-invite__code-value { font-size: 26px; letter-spacing: 1px; }
}

@media (min-width: 1280px) {
    .kp-invite__code-value { font-size: 30px; }
}

/* Primary button (Button - Default, orange) */
.kp-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-shrink: 0;
    height: 48px;
    padding: 0 22px;
    border: none;
    border-radius: 100px;
    font-family: "Sora", sans-serif;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

.kp-button svg { flex-shrink: 0; }

/* Dark label: white on #fe9f51 does not reach the 4.5:1 contrast ratio */
.kp-button--primary {
    background: #fe9f51;
    color: var(--kp-ink);
    box-shadow: 0 6px 24px rgba(203, 92, 1, 0.18);
}

.kp-button--primary:hover,
.kp-button--primary:focus-visible {
    background: #ffb27a;
}

@media (max-width: 767px) {
    .kp-invite__code .kp-button { width: 100%; }
}

/* Outro */
.kp-invite__outro {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--kp-border);
}

.kp-invite__outro img {
    display: block;
    width: 37px;
    height: 60px;
}

.kp-invite__outro p {
    margin: 0;
    font-family: "Sora", sans-serif;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.4px;
    color: var(--kp-ink);
}

@media (min-width: 768px) {
    .kp-invite__outro { gap: 14px; padding-top: 16px; }
    .kp-invite__outro img { width: 43px; height: 70px; }
    .kp-invite__outro p { font-size: 28px; letter-spacing: -0.6px; }
}

/* QR code block: light on phones (less useful there), dark from md */
.kp-invite__qr {
    box-sizing: border-box;
    flex: 1 1 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 20px 16px;
    background: #f1ecf2;
    border-radius: var(--kp-radius-md);
    text-align: center;
    color: var(--kp-ink);
}

.kp-invite__qr-chip {
    display: none;
    margin: 0;
    padding: 6px 14px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.12);
    font-family: "Sora", sans-serif;
    font-size: 13px;
    font-weight: 700;
}

@media (min-width: 768px) {
    .kp-invite__qr {
        flex: 1 1 300px;
        max-width: 340px;
        margin: 0 auto;
        gap: 18px;
        padding: 28px 24px;
        background: var(--kp-ink);
        color: #fff;
    }
    .kp-invite__qr-chip { display: block; }
}

.kp-qr {
    position: relative;
    width: 180px;
    height: 180px;
    background: #fff;
    border-radius: var(--kp-radius-sm);
    box-shadow: 0 6px 24px rgba(36, 32, 44, 0.12);
}

@media (min-width: 768px) {
    .kp-qr { width: 200px; height: 200px; border-radius: var(--kp-radius-md); box-shadow: none; }
}

.kp-qr__modules {
    position: absolute;
    inset: 6%;
    width: 88%;
    height: 88%;
}

.kp-qr__modules svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Logo is 20% of the QR box, which invitation.js keeps clear of modules */
.kp-qr__logo {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20%;
    height: 20%;
    transform: translate(-50%, -50%);
    background: #43c5ec;
    border-radius: 10px;
}

@media (min-width: 768px) {
    .kp-qr__logo { border-radius: 12px; }
}

.kp-qr__logo img {
    display: block;
    width: 34.5%;
    height: auto;
}

.kp-invite__qr-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 14px;
    line-height: 1.5;
    color: #6e6879;
}

.kp-invite__qr-text p { margin: 0; }

.kp-invite__qr-title {
    font-family: "Sora", sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--kp-ink);
}

@media (min-width: 768px) {
    .kp-invite__qr-text { gap: 8px; color: var(--kp-border); }
    .kp-invite__qr-title { font-size: 19px; color: #fff; }
}

/* Legal links in the footer (invitation page) */
.kp-footer__links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

@media (min-width: 768px) {
    .kp-footer__links { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px 24px; }
}

.kp-footer__links a {
    color: #6e6879;
    text-decoration: underline;
}

.kp-footer__links a:hover,
.kp-footer__links a:focus {
    color: var(--kp-ink);
}

.kp-invite__code[hidden],
.kp-invite__qr[hidden] { display: none; }

/* md: narrower QR block so the copy button stays next to the code */
@media (min-width: 768px) and (max-width: 1279px) {
    .kp-invite__qr { flex-basis: 250px; max-width: 280px; }
    .kp-qr { width: 170px; height: 170px; }
    .kp-invite__code-value { font-size: 24px; }
}