:root {
    --paper:#f6f4ee;
    --ink:#272e29;
    --muted:#697168;
    --surface:#ffffff;
    --accent:#596b48;
    --accent-hover:#46563a;
    --accent-soft:#edf2e7;
    --accent-yellow:#efe7bd;
    --accent-yellow-ink:var(--ink);
    --accent-yellow-border:#94834314;
    --line:#dce2d7;
    --marketing-header-height:64px;
    --marketing-page-max:1600px;
    --marketing-page-gutter:clamp(22px,4vw,72px);
    --display:Georgia,'Times New Roman',serif;
    --body:'Trebuchet MS',Verdana,sans-serif;
}

@property --scene-center {
    syntax: '<color>';
    inherits: false;
    initial-value: #edf0e2;
}

@property --scene-middle {
    syntax: '<color>';
    inherits: false;
    initial-value: #e4e8db;
}

@property --scene-edge {
    syntax: '<color>';
    inherits: false;
    initial-value: #e2e6d8;
}

@property --envelope {
    syntax: '<color>';
    inherits: true;
    initial-value: #768269;
}

@property --envelope-light {
    syntax: '<color>';
    inherits: true;
    initial-value: #9da98d;
}

@property --invitation-ink {
    syntax: '<color>';
    inherits: true;
    initial-value: #4a5a41;
}

* {
    box-sizing:border-box;
}

html {
    scroll-behavior:smooth;
    scroll-padding-top:calc(var(--marketing-header-height) + env(safe-area-inset-top,0px) + 12px);
}

body {
    --ip-focus-color:var(--accent);
    --ip-focus-halo:rgba(89,107,72,.12);
    margin:0;
    min-height:100svh;
    display:flex;
    flex-direction:column;
    color:var(--ink);
    background:var(--paper);
    font-family:var(--body);
    -webkit-font-smoothing:antialiased;
}

a {
    color:inherit;
    text-decoration:none;
}

button {
    font:inherit;
    cursor:pointer;
}

a,button {
    -webkit-tap-highlight-color:transparent;
}

button:focus-visible,a:focus-visible {
    outline:3px solid var(--accent);
    outline-offset:5px;
}

button {
    color:inherit;
}

::selection {
    background:var(--accent-yellow);
    color:var(--accent-yellow-ink);
}

.landing-shell {
    width:100%;
    max-width:var(--marketing-page-max);
    margin:auto;
    flex:1;
    padding:0 var(--marketing-page-gutter);
    display:flex;
    flex-direction:column;
}

main {
    flex:1;
    display:flex;
    flex-direction:column;
}

.site-header {
    position:sticky;
    top:0;
    z-index:40;
    flex-shrink:0;
    min-height:calc(var(--marketing-header-height) + env(safe-area-inset-top,0px));
    padding:calc(8px + env(safe-area-inset-top,0px)) max(var(--marketing-page-gutter),calc((100% - var(--marketing-page-max)) / 2 + var(--marketing-page-gutter))) 7px;
    background:var(--paper);
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:1px solid var(--line);
    gap:20px;
}

.brand {
    display:inline-flex;
    color:var(--ink);
    align-items:center;
    min-height:44px;
    font-size:20px;
    letter-spacing:-1px;
    font-weight:700;
}

.brand-mark {
    width:30px;
    height:30px;
    margin-right:9px;
    flex-shrink:0;
    display:grid;
    place-items:center;
    color:var(--ink);
}

.brand-mark svg {
    display:block;
    width:100%;
    height:100%;
}

.brand-pro {
    font-weight:400;
    margin-left:4px;
}

.brand-period {
    color:var(--accent-yellow);
}

.header-nav {
    display:flex;
    align-items:center;
    gap:32px;
    font-size:13px;
}

.hero-price-link { display:inline-flex; flex-wrap:wrap; align-items:center; gap:8px 11px; margin-top:23px; min-height:44px; font-size:12px; color:var(--accent); }
.hero-price-link > span { padding:5px 9px; border:1px solid var(--accent-yellow-border); border-radius:30px; font-size:10px; letter-spacing:.025em; background:var(--accent-yellow); color:var(--accent-yellow-ink); }
.hero-price-link svg { width:17px; height:17px; }
.hero-price-link:hover { color:var(--accent-hover); }

.secondary-link,.site-footer a {
    color:var(--accent);
}

.nav-text:hover,.secondary-link:hover,.site-footer a:hover {
    color:var(--accent-hover);
}

.client-link {
    display:flex;
    align-items:center;
    gap:26px;
    border:1px solid var(--line);
    background:var(--surface);
    border-radius:7px;
    min-height:44px;
    padding:10px 16px;
    transition:background .2s;
}

.client-link:hover {
    background:var(--accent-soft);
}

.hero {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:clamp(30px,5vw,84px);
    align-items:center;
    flex:1;
    padding:38px 0 34px;
}

.marketing-feature-icon { display:block; width:32px; height:32px; flex-shrink:0; }

/* A local SVG and normal link: no chat SDK, trackers or background requests. */
.marketing-whatsapp {
    position:fixed;
    z-index:30;
    right:max(24px,env(safe-area-inset-right,0px));
    bottom:max(24px,calc(16px + env(safe-area-inset-bottom,0px)));
    display:inline-flex;
    align-items:center;
    gap:13px;
    min-height:58px;
    height:58px;
    padding:13px 23px 13px 17px;
    border:1px solid #ffffff35;
    border-radius:100px;
    background:#34483a;
    color:#fffdf6;
    box-shadow:0 8px 28px -12px #1b312a60;
    overflow:hidden;
    transition:background-color .2s ease,box-shadow .2s ease,transform .2s ease,max-width .65s cubic-bezier(.22,.61,.36,1),padding .65s cubic-bezier(.22,.61,.36,1),gap .65s cubic-bezier(.22,.61,.36,1);
}
.marketing-whatsapp svg { width:25px; height:25px; flex:none; }
.marketing-whatsapp-icons { position:relative; display:block; width:25px; height:25px; flex:none; color:#fff; }
.marketing-whatsapp-icon { position:absolute; inset:0; display:block; width:25px; height:25px; transition:opacity .26s ease,transform .26s ease; }
.marketing-whatsapp-icon--brand { opacity:0; transform:scale(.82); }
.marketing-whatsapp.is-brand-visible .marketing-whatsapp-icon--brand { opacity:1; transform:scale(1); }
.marketing-whatsapp.is-brand-visible .marketing-whatsapp-icon--whatsapp { opacity:0; transform:scale(.82); }
.marketing-whatsapp-copy { display:grid; gap:4px; min-width:0; white-space:nowrap; transition:opacity .18s ease .28s,visibility 0s linear .28s; }
.marketing-whatsapp.is-motion-ready { max-width:var(--whatsapp-expanded-width); }
.marketing-whatsapp.is-measuring { transition:none; }
.marketing-whatsapp.is-compact { max-width:58px; padding-inline:15.5px; gap:0; }
.marketing-whatsapp.is-compact .marketing-whatsapp-copy { opacity:0; visibility:hidden; transition:opacity .16s ease,visibility 0s linear .16s; }
.marketing-whatsapp strong { font-size:12px; font-weight:600; line-height:1.35; }
.marketing-whatsapp small { font-size:10px; line-height:1.3; color:#e0e9d9; }
.marketing-whatsapp:hover { background:#293d30; box-shadow:0 10px 30px -10px #1b312a70; transform:translateY(-2px); }
.marketing-whatsapp:active { transform:translateY(0); }
.landing-shell.has-whatsapp-contact { padding-bottom:calc(100px + env(safe-area-inset-bottom,0px)); }
.has-whatsapp-contact .site-footer { padding-right:250px; }
@media(max-width:600px) {
    .marketing-whatsapp { right:max(16px,env(safe-area-inset-right,0px)); min-height:56px; height:56px; width:56px; padding:0; justify-content:center; }
    .marketing-whatsapp.is-compact { max-width:56px; padding:0; }
    .marketing-whatsapp-copy { display:none; }
    .has-whatsapp-contact .site-footer { padding-right:72px; flex-wrap:wrap; }
}
@media(prefers-reduced-motion:reduce) { .marketing-whatsapp,.marketing-whatsapp-icon,.marketing-whatsapp-copy { transition:none; } .marketing-whatsapp:hover { transform:none; } }
@media print { .marketing-whatsapp { display:none; } .landing-shell.has-whatsapp-contact { padding-bottom:0; } }

.hero-copy {
    max-width:580px;
    animation:arrive .7s both;
}

.eyebrow {
    font-size:9px;
    letter-spacing:1.7px;
    line-height:1.7;
    font-weight:700;
    margin:0 0 22px;
}

.hero-copy>.eyebrow {
    display:flex;
    align-items:center;
    gap:10px;
}

.eyebrow>span {
    width:6px;
    height:6px;
    background:var(--accent-yellow);
    border-radius:50%;
    flex-shrink:0;
}

h1 {
    font-family:var(--display);
    font-weight:400;
    letter-spacing:-3.4px;
    font-size:clamp(52px,5vw,78px);
    line-height:1.04;
    margin:0;
    max-width:580px;
}

/* The brand stays olive; event palettes belong to the envelope demonstration. */
h1 em {
    color:var(--accent);
    transition:color 1s ease;
    display:block;
    font-weight:400;
}

.hero-description {
    font-size:15px;
    line-height:1.8;
    max-width:435px;
    color:var(--muted);
    margin:24px 0 27px;
}

.hero-actions {
    display:flex;
    gap:22px;
    align-items:center;
    flex-wrap:wrap;
}

.hero-actions--quote {
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
}

.hero-explore-links {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:4px 22px;
}

.primary-button {
    background:var(--accent);
    color:white;
    border:1px solid var(--accent);
    padding:16px 19px;
    display:inline-flex;
    align-items:center;
    gap:24px;
    border-radius:7px;
    font-size:12px;
    transition:background 1s ease,border-color 1s ease,filter .2s,transform .2s;
}

.primary-button:hover {
    background:var(--accent-hover);
    border-color:var(--accent-hover);
    transform:translateY(-2px);
}

.marketing-arrow {
    display:inline-block;
    width:16px;
    height:16px;
    flex-shrink:0;
    vertical-align:middle;
}

.primary-button .marketing-arrow {
    width:19px;
    height:19px;
}

.secondary-link {
    font-size:12px;
    display:inline-flex;
    gap:12px;
    align-items:center;
    min-height:44px;
}

.hero-note {
    display:flex;
    align-items:center;
    gap:13px;
    font-size:11px;
    line-height:1.7;
    color:var(--muted);
    margin-top:30px;
}

.hero-note strong {
    font-weight:400;
    color:var(--ink);
}

.marketing-star {
    display:block;
    flex-shrink:0;
    pointer-events:none;
}

.note-symbol {
    width:32px;
    height:32px;
    color:#879478;
}

.showcase {
    min-width:0;
    animation:arrive .9s .1s both;
}

.showcase-top,.showcase-bottom {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
}

.showcase-top {
    font-size:8px;
    letter-spacing:1.7px;
    margin-bottom:13px;
    color:var(--muted);
}

.edition {
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
}

.invitation-scene {
    --envelope:#768269;
    --envelope-light:#9da98d;
    --invitation-ink:#4a5a41;
    --scene-center:#edf0e2;
    --scene-middle:#e4e8db;
    --scene-edge:#e2e6d8;
    position:relative;
    /* Reserve equal breathing room above the open letter and below the envelope. */
    height:470px;
    background:radial-gradient(ellipse at 58% 45%,var(--scene-center) 0%,var(--scene-middle) 65%,var(--scene-edge) 100%);
    transition:--scene-center 1s ease,--scene-middle 1s ease,--scene-edge 1s ease,--envelope 1s ease,--envelope-light 1s ease,--invitation-ink 1s ease;
    border-radius:120px 120px 12px 12px;
    display:grid;
    place-items:center;
    isolation:isolate;
    overflow:hidden;
}

.invitation-scene[data-theme=rosa] {
    --envelope:#a37169;
    --envelope-light:#c39188;
    --invitation-ink:#8a524b;
    --scene-center:#f3e8e1;
    --scene-middle:#eadbd5;
    --scene-edge:#e7d6d0;
}

.invitation-scene[data-theme=noche] {
    --envelope:#384e60;
    --envelope-light:#617887;
    --invitation-ink:#364c5c;
    --scene-center:#e4e9ed;
    --scene-middle:#d3dce2;
    --scene-edge:#cbd5dc;
}

.invitation-scene[data-theme=terracota] {
    --envelope:#ac6c48;
    --envelope-light:#cf9b78;
    --invitation-ink:#914e32;
    --scene-center:#f7ecdc;
    --scene-middle:#efdecb;
    --scene-edge:#e9d4be;
}

.invitation-scene[data-theme=lavanda] {
    --envelope:#827194;
    --envelope-light:#ad9cbd;
    --invitation-ink:#67527c;
    --scene-center:#f0ebf3;
    --scene-middle:#e5dcea;
    --scene-edge:#dcd0e2;
}

.scene-orbit {
    position:absolute;
    border:1px solid #ffffff65;
    border-radius:50%;
    pointer-events:none;
    z-index:-1;
}

.orbit-one {
    height:530px;
    width:530px;
    left:8%;
    top:-55px;
}

.orbit-two {
    height:425px;
    width:425px;
    left:17%;
    top:0;
}

.scene-star {
    position:absolute;
    right:9%;
    top:15%;
    width:38px;
    height:38px;
    color:var(--envelope);
}

.invitation-stack {
    width:286px;
    height:280px;
    position:relative;
    margin-top:46px;
    transform:rotate(-7deg);
    transition:transform .8s;
}

.envelope-back {
    position:absolute;
    inset:58px 0 0;
    background:var(--envelope);
    border-radius:7px;
    box-shadow:0 22px 35px #26301e25;
}

.envelope-back::before {
    content:'';
    position:absolute;
    inset:-89px 0 auto;
    height:100px;
    background:var(--envelope);
    clip-path:polygon(0 100%,50% 0,100% 100%);
}

.sample-invitation {
    background:#fdfbf4;
    color:var(--invitation-ink);
    position:absolute;
    width:238px;
    height:310px;
    left:24px;
    top:-37px;
    box-shadow:0 2px 15px #21251c16;
    text-align:center;
    padding:16px;
    border:1px solid #ffffff;
    transition:transform .85s cubic-bezier(.22,.7,.25,1),color 1s ease;
    border-radius:3px;
}

.sample-art {
    width:83px;
    height:53px;
    stroke:currentColor;
    stroke-width:1.1;
}

.sample-photo-art {
    position:relative;
    width:105px;
    height:53px;
    margin-inline:auto;
}

.sample-photo-art > img {
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 30%;
    border-radius:40px 40px 8px 8px;
    border:1px solid #c3c8b6;
}

.sample-photo-art .sample-art {
    position:absolute;
    right:-36px;
    top:0;
    width:40px;
    height:53px;
    opacity:.65;
}

.sample-photo-art--portrait > img {
    width:56px;
    margin-inline:auto;
    border-radius:50% 50% 8px 8px;
}

.demo-caption > a {
    display:inline-block;
    margin-left:8px;
    text-decoration:underline;
    text-underline-offset:3px;
}

.sample-content,.envelope-monogram,.seal-monogram {
    transition:opacity .22s ease;
}

.invitation-scene.is-changing .sample-content,
.invitation-scene.is-changing .envelope-monogram,
.invitation-scene.is-changing .seal-monogram {
    opacity:0;
}

.invitation-scene[data-event=corporativo] .sample-invitation h2 {
    font-family:var(--body);
    font-size:24px;
    font-weight:600;
    letter-spacing:-1.2px;
}

.invitation-scene[data-event=corporativo] .invitation-message {
    font-family:var(--body);
    font-size:10px;
    line-height:1.8;
}

.invitation-kicker {
    font-size:6px;
    letter-spacing:1.8px;
    margin:5px 0 14px;
}

.sample-invitation h2 {
    font-family:var(--display);
    font-weight:400;
    font-size:29px;
    letter-spacing:-1px;
    margin:0;
}

.sample-invitation h2 span {
    font-size:21px;
    font-style:italic;
}

.invitation-message {
    font-family:var(--display);
    font-size:12px;
    line-height:1.5;
    margin:14px 0;
}

.invitation-date {
    display:flex;
    justify-content:center;
    align-items:center;
    gap:15px;
}

.invitation-date span {
    font-size:7px;
    letter-spacing:1px;
}

.invitation-date strong {
    font-family:var(--display);
    font-weight:400;
    font-size:30px;
    border-inline:1px solid #c3c8b6;
    padding:0 12px;
}

.invitation-location {
    font-size:7px;
    margin:14px 0;
}

.invitation-rsvp {
    font-size:8px;
    border-bottom:1px solid currentColor;
    padding-bottom:4px;
}

.envelope-front {
    position:absolute;
    inset:58px 0 0;
    border-radius:0 0 7px 7px;
    background:linear-gradient(145deg,var(--envelope-light),var(--envelope));
    clip-path:polygon(0 0,50% 49%,100% 0,100% 100%,0 100%);
    filter:drop-shadow(0 -1px 0 #ffffff50);
}

.envelope-monogram {
    position:absolute;
    bottom:28px;
    left:0;
    right:0;
    text-align:center;
    font-family:var(--display);
    font-size:14px;
    letter-spacing:4px;
    color:#ffffffb5;
}

.envelope-seal {
    position:absolute;
    top:137px;
    left:114px;
    width:58px;
    height:58px;
    border:3px double #d6b575;
    border-radius:50%;
    background:linear-gradient(140deg,#e2c998,#c3a16b);
    box-shadow:0 4px 9px #34301e30;
    color:#705431;
    font-family:var(--display);
    font-style:italic;
    font-size:23px;
    transition:transform .3s;
}

.seal-monogram {
    display:block;
    font-size:21px;
    letter-spacing:-1.5px;
}

.envelope-seal:hover {
    transform:scale(1.09);
}

.invitation-scene.is-open .invitation-stack {
    transform:rotate(0deg) translateY(47px);
}

.invitation-scene.is-open .sample-invitation {
    transform:translateY(-103px);
}

.invitation-scene.is-open .envelope-seal {
    transform:scale(.88);
}

.confirmation-note {
    position:absolute;
    right:15px;
    bottom:18px;
    display:flex;
    gap:10px;
    align-items:center;
    border:1px solid #fff9;
    background:#fdfcf6f5;
    padding:12px 15px;
    border-radius:8px;
    box-shadow:0 8px 25px #313c2610;
    font-size:10px;
    transform:rotate(3deg);
}

.confirmation-note small {
    display:block;
    margin-top:4px;
    font-size:8px;
    color:var(--muted);
}

.confirmation-check {
    background:#e8eddf;
    color:#4c6541;
    width:26px;
    height:26px;
    display:grid;
    place-items:center;
    border-radius:50%;
    font-size:13px;
}

.showcase-bottom {
    margin-top:16px;
}

.style-picker {
    display:flex;
    gap:5px;
    flex-wrap:wrap;
    justify-content:center;
    width:100%;
}

.style-picker button {
    display:inline-flex;
    gap:6px;
    align-items:center;
    border:1px solid transparent;
    background:none;
    padding:7px 9px;
    border-radius:20px;
    font-size:10px;
    min-height:40px;
}

.style-picker button[aria-pressed=true] {
    border-color:#c8cdbd;
    background:#fff9;
}

.swatch {
    width:10px;
    height:10px;
    border-radius:50%;
}

.oliva {
    background:#768269;
}

.rosa {
    background:#b08077;
}

.noche {
    background:#384e60;
}

.terracota {
    background:#ac6c48;
}

.lavanda {
    background:#827194;
}

.demo-controls {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    margin-top:3px;
}

.rotation-toggle {
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:9px 0;
    border:0;
    background:none;
    color:var(--muted);
    font-size:10px;
    min-height:40px;
}

.rotation-toggle svg {
    width:12px;
    height:12px;
}

.rotation-toggle:disabled {
    cursor:default;
}

.open-label {
    display:inline-flex;
    align-items:center;
    gap:7px;
    border:0;
    background:none;
    font-size:10px;
    padding:9px 0;
    min-height:36px;
    color:var(--muted);
}

.open-label .marketing-arrow {
    width:12px;
    height:12px;
}

.open-label[aria-expanded="true"] .marketing-arrow {
    transform:rotate(180deg);
}

.demo-caption {
    font-size:8px;
    color:var(--muted);
    margin:9px 0 0;
    text-align:center;
}

.demo-event-label {
    font-weight:700;
}

.site-footer {
    border-top:1px solid var(--line);
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:18px;
    min-height:61px;
    font-size:9px;
    color:var(--muted);
}

.site-footer a {
    display:inline-flex;
    align-items:center;
    min-height:44px;
    gap:10px;
}

.footer-signature {
    font-family:var(--display);
    font-style:italic;
    font-size:12px;
}

.sr-only,.skip-link:not(:focus) {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}

.skip-link:focus {
    position:fixed;
    z-index:1000;
    top:8px;
    left:8px;
    padding:12px;
    background:white;
}

@keyframes arrive {
    from {
        opacity:0;
        transform:translateY(14px);
    }
    to {
        opacity:1;
        transform:translateY(0);
    }
}

@media(min-width:1200px) and (min-height:850px) {
    .invitation-scene {
        height:520px;
    }
    .hero {
        padding-block:45px;
    }
    .invitation-stack {
        transform:rotate(-7deg) scale(1.1);
    }
    .invitation-scene.is-open .invitation-stack {
        transform:translateY(54px) scale(1.1);
    }
}

@media(max-width:1100px) {
    .hero {
        gap:28px;
    }
    h1 {
        font-size:60px;
    }
    .hero-actions {
        gap:12px;
    }
    .hero-description {
        font-size:14px;
    }
    .open-label {
        font-size:9px;
    }
    .confirmation-note {
        right:10px;
    }
    .header-nav {
        gap:20px;
    }
}

@media(max-width:800px) {
    :root {
        --marketing-page-gutter:24px;
    }
    .hero {
        grid-template-columns:1fr;
        padding-top:35px;
        gap:36px;
    }
    .hero-copy {
        max-width:580px;
    }
    .hero-description {
        max-width:470px;
    }
    .hero-note {
        margin-top:20px;
    }
    .showcase {
        max-width:580px;
        width:100%;
        justify-self:center;
    }
    .invitation-scene {
        height:470px;
    }
    .footer-signature {
        display:none;
    }
    h1 {
        font-size:clamp(49px,9vw,68px);
        max-width:540px;
    }
    .nav-text {
        display:none;
    }
    .hero-copy>.eyebrow {
        font-size:8px;
        letter-spacing:1.2px;
    }
}

@media(max-width:420px) {
    :root {
        --marketing-page-gutter:20px;
    }
    .brand {
        font-size:19px;
    }
    .brand-mark {
        width:30px;
        height:30px;
        margin-right:6px;
    }
    .client-link {
        padding:10px 12px;
        gap:12px;
        font-size:11px;
    }
    .hero {
        padding-top:29px;
    }
    h1 {
        font-size:51px;
        letter-spacing:-2.5px;
    }
    .hero-actions {
        align-items:flex-start;
        flex-direction:column;
        gap:4px;
    }
    .hero-description {
        margin-top:20px;
    }
    .hero-note {
        margin-top:17px;
    }
    .invitation-scene {
        height:440px;
        border-radius:90px 90px 10px 10px;
    }
    .invitation-stack {
        transform:rotate(-7deg) scale(.92);
    }
    .invitation-scene.is-open .invitation-stack {
        transform:translateY(41.4px) scale(.92);
    }
    .confirmation-note {
        font-size:9px;
        bottom:12px;
        padding:10px;
    }
    .style-picker button {
        padding:7px;
        font-size:9px;
        min-height:44px;
        grid-column:span 2;
        justify-content:center;
    }
    .style-picker {
        display:grid;
        grid-template-columns:repeat(6,minmax(0,1fr));
        gap:6px;
    }
    .style-picker button:nth-child(4) {
        grid-column:2 / span 2;
    }
    .style-picker button:nth-child(5) {
        grid-column:4 / span 2;
    }
    .showcase-bottom {
        gap:3px;
        flex-wrap:wrap;
    }
    .showcase-top {
        font-size:7px;
        letter-spacing:1px;
    }
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto;
    }
    *,*::before,*::after {
        animation:none!important;
        transition:none!important;
    }
}

/* Shared page chrome stays still while the central content crossfades. */
@view-transition {
    navigation: auto;
}

.site-header { view-transition-name: site-header; }
.site-footer { view-transition-name: site-footer; }
.site-content { view-transition-name: site-content; }
.site-content { transition: opacity .18s ease; }
.site-content.is-leaving { opacity: 0; }

::view-transition-old(root),
::view-transition-new(root),
::view-transition-old(site-header),
::view-transition-new(site-header),
::view-transition-old(site-footer),
::view-transition-new(site-footer) {
    animation: none;
}

::view-transition-group(site-content) { animation-duration: .3s; }
::view-transition-old(site-content),
::view-transition-new(site-content) { animation-duration: .3s; }

.how-it-works {
    display: grid;
    grid-template-columns: minmax(0,.85fr) minmax(0,1.25fr);
    align-items: center;
    gap: clamp(32px, 6vw, 100px);
    padding: clamp(30px, 4vh, 60px) 0;
    flex: 1;
}

.back-to-home {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    margin-bottom: 24px;
    font-size: 12px;
    transition: background .2s;
}

.back-to-home:hover { background: var(--accent-soft); }
.header-nav [aria-current=page] { color: var(--accent); text-decoration: underline; text-underline-offset: 5px; }
.header-nav .nav-text { display: inline-flex; align-items: center; min-height: 44px; }

@media (max-width: 640px) {
    .site-header { flex-wrap: wrap; gap: 8px; }
    .header-nav { width: 100%; gap: 20px; justify-content: space-between; font-size: 12px; }
    .header-nav .client-link { margin-left: auto; padding: 10px 12px; gap: 10px; white-space: nowrap; }
}
.how-intro { min-width:0; }
.how-intro h1 { font-size: clamp(40px, 4vw, 64px); letter-spacing: -2px; text-wrap:balance; }
.how-intro h1 em { color:var(--accent); }
.how-description { max-width: 460px; color: var(--muted); font-size: 14px; line-height: 1.8; margin: 22px 0; }
.how-access-note { max-width: 360px; font-size: 11px; line-height: 1.7; color: var(--muted); margin: 16px 0 0; }
.how-module-link { margin-top:16px; color:var(--accent); }
.how-steps { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:0; padding:0; list-style:none; }
.how-step { --step-ink:var(--accent); min-width:0; padding:22px; background:var(--surface); border:1px solid var(--line); border-radius:18px; }
.how-step--reception { --step-ink:#526a79; }
.how-step--memories { --step-ink:#92746e; }
.how-step-top { display:flex; align-items:center; gap:10px; margin-bottom:16px; color:var(--step-ink); }
.how-step-number { font:italic 25px var(--display); font-variant-numeric:tabular-nums; }
.how-step-stage { font-size:7px; line-height:1.5; letter-spacing:.8px; }
.how-step-top .marketing-feature-icon { width:26px; height:26px; margin-left:auto; }
.how-step h2 { font:400 20px/1.2 var(--display); letter-spacing:-.4px; margin:0 0 10px; }
.how-step p { margin:0; font-size:12px; color:var(--muted); line-height:1.75; }

@media (max-width: 900px) {
    .how-it-works { grid-template-columns: 1fr; gap: 30px; }
    .how-intro h1 { max-width: none; }
    .how-description { max-width: 620px; }
}

@media (max-width: 540px) {
    .how-steps { grid-template-columns:1fr; }
    .how-step { padding:20px; }
}

@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
}

/* Shared navigation; the home page keeps one continuous narrative. */
.marketing-page-back { padding-top:24px; }
.marketing-page-back .back-to-home { margin-bottom:0; }
.header-nav { gap:24px; }
.marketing-menu-toggle { display:inline-flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:12px; background:transparent; color:var(--ink); padding:10px 13px; min-width:44px; min-height:44px; font:12px var(--body); cursor:pointer; }
.marketing-menu-toggle svg { width:20px; height:20px; }
.marketing-menu-toggle[hidden],.header-nav[hidden] { display:none!important; }
.marketing-menu-toggle:hover { background:var(--accent-soft); }
.marketing-menu-toggle:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }

@media(max-width:960px) {
    :root { --marketing-header-height:60px; }
    .site-header { flex-wrap:wrap; gap:8px; }
    /* Without JS, keep every link in normal flow instead of pinning a tall menu. */
    .site-header:not(.is-menu-enabled) { position:static; }
    .site-header .header-nav { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; gap:8px 14px; font-size:12px; padding:8px 0 2px; }
    .site-header .header-nav .nav-text { display:flex; min-height:44px; padding:10px 12px; border-radius:10px; }
    .site-header .header-nav .nav-text:hover,.site-header .header-nav .nav-text[aria-current=page] { background:var(--accent-soft); color:var(--accent); }
    .site-header .header-nav .client-link { grid-column:1/-1; margin:0; justify-content:space-between; padding:12px; border-radius:10px; }
    .site-header.is-menu-enabled .header-nav:not([hidden]) {
        position:absolute;
        top:calc(100% + 8px);
        inset-inline:var(--marketing-page-gutter);
        width:auto;
        max-height:calc(100vh - var(--marketing-header-height) - env(safe-area-inset-top,0px) - 24px);
        max-height:calc(100svh - var(--marketing-header-height) - env(safe-area-inset-top,0px) - 24px);
        overflow-y:auto;
        overscroll-behavior:contain;
        padding:12px;
        border:1px solid var(--line);
        border-radius:16px;
        background:var(--surface);
        box-shadow:0 12px 32px rgba(39,46,41,.1);
        animation:arrive .18s ease both;
    }
}

@media(prefers-reduced-motion:reduce) {
    .site-header.is-menu-enabled .header-nav:not([hidden]) { animation:none; }
}

/* Only the pinned, scrolled bar changes identity; page and demo colors stay local. */
@media screen {
    .site-header.is-scrolled {
        --ip-focus-color:#ffffff;
        --ip-focus-halo:rgba(255,255,255,.15);
        background:var(--accent);
        color:#ffffff;
        border-bottom-color:#ffffff1a;
    }
    .site-header.is-scrolled :is(.brand,.brand-mark,.brand-period,.marketing-menu-toggle) { color:#ffffff; }
    .site-header.is-scrolled .header-nav .nav-text { color:#ffffff; background:transparent; border-radius:8px; }
    .site-header.is-scrolled .header-nav .nav-text[aria-current=page] { text-decoration:underline; text-decoration-color:currentColor; text-decoration-thickness:1px; text-underline-offset:5px; }
    .site-header.is-scrolled :is(.client-link,.marketing-menu-toggle) { color:#ffffff; background:#ffffff0a; border-color:#ffffff33; }
    .site-header.is-scrolled :is(.client-link,.marketing-menu-toggle):hover { background:#ffffff14; }
    @media(max-width:960px) {
        .site-header.is-scrolled.is-menu-enabled .header-nav:not([hidden]) { background:var(--accent); border-color:#ffffff1a; }
    }
}

@media screen and (prefers-reduced-motion:no-preference) {
    .site-header { transition:background-color 1.5s ease,border-bottom-color 1.5s ease; }
    .site-header :is(.brand,.brand-mark,.brand-period,.header-nav > a,.marketing-menu-toggle) {
        transition:color 1.5s ease,border-color 1.5s ease,background-color .2s ease;
    }
    .site-header .header-nav { transition:background-color 1.5s ease,border-color 1.5s ease; }
}

@media print {
    .site-header { position:static; }
}

@media(max-width:360px) {
    .marketing-menu-toggle { padding:10px; }
    .marketing-menu-toggle span { display:none; }
}

.prospect-landing-link { display:inline-flex; align-items:center; gap:10px; margin-top:22px; font-size:12px; line-height:1.6; color:var(--muted); }
.prospect-landing-link svg { width:17px; height:17px; flex-shrink:0; }
.site-footer { flex-wrap:wrap; }