:root {
    --coral:#FF6B5A;
    --coral-deep:#D9584A;
    --coral-soft:#FFA595;
    --peach-50:#FFF5EF;
    --peach-100:#FFE9DC;
    --peach-200:#FFD2BB;
    --butter:#FFE9B0;
    --mint:#CDE7D8;
    --sky:#C7DFEF;
    --ink:#2B1D1B;
    --ink-70:#5C4A46;
    --ink-50:#8A7570;
    --ink-30:#B5A39E;
    --line:#F0E3DA;
    --line-2:#E5D4C7;
    --bg:#FFFBF8;
    --card:#FFFFFF;
    --shadow-sm:0 1px 2px rgba(43, 29, 27, .06);
    --shadow-md:0 6px 20px rgba(43, 29, 27, .08);
    --shadow-lg:0 24px 60px rgba(43, 29, 27, .14);
    --ease:cubic-bezier(.2, .8, .2, 1);
    --ease-soft:cubic-bezier(.4, 0, .2, 1)
}
* {
    box-sizing:border-box;
    margin:0;
    padding:0
}
[hidden] {
    display:none!important
}
html,body {
    font-family:'Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
    color:var(--ink);
    background:linear-gradient(180deg,#FFE9DC 0%,#FFF5EF 45%,#FFE1CE 100%);
    min-height:100vh;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden
}
.stage {
    min-height:100vh;
    display:grid;
    place-items:center;
    padding:32px 20px 48px;
    position:relative
}
.stage::before {
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(900px 500px at 20% 10%,rgb(255 176 140 / .45),transparent 60%),radial-gradient(700px 500px at 85% 90%,rgb(255 233 176 / .5),transparent 60%);
    pointer-events:none;
    z-index:0
}
.frame-col {
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:22px
}
.brand-row {
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
    cursor:pointer;
    transition:opacity .12s
}
.brand-row:hover {
    opacity:.82
}
.brand-logo {
    height:44px;
    width:auto;
    filter:drop-shadow(0 2px 10px rgb(255 107 90 / .18))
}
.brand-label {
    display:flex;
    flex-direction:column;
    line-height:1.2
}
.brand-title {
    font-family:'Fraunces',serif;
    font-weight:600;
    font-size:1rem;
    color:var(--ink);
    letter-spacing:-.01em
}
.brand-sub {
    font-size:.75rem;
    color:var(--ink-50);
    font-weight:500
}
.phone {
    width:390px;
    height:800px;
    background:linear-gradient(155deg,#2a2a2a 0%,#141414 50%,#0a0a0a 100%);
    border-radius:56px;
    padding:13px;
    box-shadow:0 40px 80px -20px rgb(20 20 20 / .5),0 20px 40px -8px rgb(217 117 87 / .22),inset 0 0 0 1.5px #3a3a3a,inset 0 2px 4px rgb(255 255 255 / .08);
    position:relative
}
.phone::before {
    content:"";
    position:absolute;
    z-index:5;
    top:22px;
    left:50%;
    transform:translateX(-50%);
    width:120px;
    height:34px;
    background:#000;
    border-radius:20px;
    box-shadow:inset 0 0 0 1px #222
}
.phone-btn-l,.phone-btn-l::after,.phone-btn-r {
    position:absolute;
    background:#1a1a1a
}
.phone-btn-l {
    left:-2px;
    top:130px;
    width:3px;
    height:42px;
    border-radius:2px 0 0 2px
}
.phone-btn-l::after {
    content:"";
    left:0;
    top:70px;
    width:3px;
    height:68px;
    border-radius:2px 0 0 2px
}
.phone-btn-r {
    right:-2px;
    top:190px;
    width:3px;
    height:90px;
    border-radius:0 2px 2px 0
}
.phone.is-desktop {
    width:min(760px, calc(100vw - 48px));
    height:min(760px, calc(100vh - 120px));
    min-height:580px;
    background:#fff0;
    border-radius:28px;
    padding:0;
    box-shadow:0 30px 80px -20px rgb(20 20 20 / .18),0 12px 30px -8px rgb(217 117 87 / .12)
}
.phone.is-desktop::before {
    content:none
}
.phone.is-desktop .screen {
    background:#fff;
    border-radius:28px;
    box-shadow:inset 0 0 0 1px rgb(43 29 27 / .06)
}
.phone.is-desktop .screen::before {
    border-radius:28px;
    background:linear-gradient(180deg,rgb(255 233 221 / .5) 0%,transparent 30%)
}
.phone.is-desktop .screen-body {
    padding-top:4px
}
.phone.is-desktop .topbar {
    padding:14px 36px 12px
}
.phone.is-desktop .s {
    padding:10px 78px 28px;
    margin:0 auto;
    width:100%
}
.ph-demo-hint-new {
    padding: 0 70px;
}
.phone.is-desktop .s h1 {
    font-size:2.4rem;
    line-height:1.05;
    max-width:18ch
}
.phone.is-desktop .s p.lede {
    font-size:1.02rem;
    max-width:52ch
}
.phone.is-desktop .btn-row.sticky {
    background:linear-gradient(to top,white 65%,transparent);
    padding:16px 48px 22px;
    margin:0 -48px -28px
}
.phone.is-desktop .build-orb-portrait {
    width:168px;
    height:168px
}
.phone.is-desktop .build-steps {
    max-width:320px
}
.phone.is-desktop .sms-preview {
    max-width:360px
}
.phone.is-desktop .hero-s h1 {
    font-size:2.8rem
}
.phone.is-desktop .hero-s .sub {
    font-size:1.08rem;
    max-width:420px
}
.phone.is-desktop .hero-mascot {
    width:220px;
    height:220px
}
.phone.is-desktop .progress-bar {
    padding:0 36px 14px
}
.phone.is-desktop .progress-dots {
    padding:0 36px 14px
}
.phone.is-desktop .progress-pill {
    padding:0 36px 14px
}
.phone.is-desktop .field-row.thirds {
    grid-template-columns:1fr 1fr 1fr 
}
.field { margin-top: 14px;}
.screen {
    width:100%;
    height:100%;
    background:var(--peach-50);
    border-radius:44px;
    overflow:hidden;
    position:relative;
    display:flex;
    flex-direction:column
}
.screen::before {
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:20;
    background:linear-gradient(135deg,rgb(255 255 255 / .14) 0%,transparent 30%,transparent 70%,rgb(255 255 255 / .05) 100%);
    border-radius:44px
}
.ios-status {
    height:50px;
    padding:14px 30px 0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-size:.9rem;
    font-weight:700;
    color:var(--ink);
    flex-shrink:0
}
.ios-status .icons {
    display:flex;
    gap:5px;
    align-items:center
}
.screen-body {
    flex:1;
    min-height:0;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    position:relative
}
.topbar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:6px 22px 10px;
    flex-shrink:0
}
.topbar .back {
    background:#fff0;
    border:none;
    cursor:pointer;
    font:inherit;
    font-size:.85rem;
    color:var(--ink-70);
    display:inline-flex;
    align-items:center;
    gap:4px;
    padding:6px 8px;
    margin-left:-8px;
    border-radius:8px;
    transition:color .15s,background .15s
}
.topbar .back:hover {
    color:var(--ink);
    background:rgb(43 29 27 / .04)
}
.topbar .back[disabled] {
    opacity:0;
    pointer-events:none
}
.topbar .step-label {
    font-size:.7rem;
    font-weight:700;
    color:var(--ink-50);
    letter-spacing:.14em;
    text-transform:uppercase
}
.topbar .skip {
    background:#fff0;
    border:none;
    cursor:pointer;
    font:inherit;
    font-size:.85rem;
    color:var(--ink-50);
    padding:6px 8px;
    margin-right:-8px;
    border-radius:8px;
    transition:color .15s
}
.topbar .skip:hover {
    color:var(--ink-70)
}
.progress-bar {
    height:3px;
    background:var(--peach-200);
    border-radius:2px;
    margin:0 22px 12px;
    overflow:hidden
}
.progress-bar>i {
    display:block;
    height:100%;
    background:var(--coral);
    border-radius:2px;
    transition:width .5s var(--ease);
    box-shadow:0 0 8px rgb(255 107 90 / .4)
}
.progress-dots {
    display:flex;
    gap:6px;
    justify-content:center;
    padding:2px 22px 12px
}
.progress-dots span {
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--peach-200);
    transition:all .3s var(--ease)
}
.progress-dots span.active {
    background:var(--coral);
    width:24px;
    border-radius:4px
}
.progress-dots span.done {
    background:var(--coral-soft)
}
.progress-pill {
    display:flex;
    gap:4px;
    padding:0 22px 12px;
    justify-content:center
}
.progress-pill .seg {
    flex:1;
    height:3px;
    max-width:48px;
    background:var(--peach-200);
    border-radius:2px;
    transition:background .3s var(--ease)
}
.progress-pill .seg.active {
    background:var(--coral)
}
.progress-pill .seg.done {
    background:var(--coral-soft)
}
.s {
    flex:1;
    padding:6px 22px 22px;
    display:flex;
    flex-direction:column;
    animation:fadeUp .4s var(--ease);
    min-height:0;
    overflow-y:auto;
    scrollbar-width:thin;
    scrollbar-color:var(--peach-200) #fff0
}
.s::-webkit-scrollbar {
    width:4px
}
.s::-webkit-scrollbar-thumb {
    background:var(--peach-200);
    border-radius:2px
}
@keyframes fadeUp {
    from {
        opacity:0;
        transform:translateY(8px)
    }
    to {
        opacity:1;
        transform:none
    }
}
.s h1 {
    font-family:'Fraunces',serif;
    font-weight:600;
    font-size:1.85rem;
    line-height:1.1;
    letter-spacing:-.02em;
    color:var(--ink);
    margin-bottom:8px;
    text-wrap:wrap;
    text-wrap:pretty
}
.s h1 .em {
    color:var(--coral);
    font-style:italic;
    font-weight:500
}
.s p.lede {
    color:var(--ink-70);
    font-size:.92rem;
    line-height:1.5;
    margin-bottom:18px;
    max-width:36ch
}
.btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border:none;
    cursor:pointer;
    font:inherit;
    font-weight:600;
    padding:14px 20px;
    border-radius:14px;
    font-size:1rem;
    transition:transform .15s var(--ease),box-shadow .2s,background .2s;
    -webkit-tap-highlight-color:#fff0;
    width:100%
}
.btn-primary {
    background:var(--coral);
    color:#fff;
    box-shadow:0 6px 16px rgb(217 88 74 / .3)
}
.btn-primary:hover {
    transform:translateY(-1px);
    box-shadow:0 10px 24px rgb(217 88 74 / .4)
}
.btn-primary:active {
    transform:translateY(0)
}
.btn-primary:disabled {
    background:var(--peach-200);
    color:var(--ink-50);
    box-shadow:none;
    cursor:not-allowed;
    transform:none
}
.btn-ghost {
    background:#fff0;
    color:var(--ink-70);
    border:1.5px solid var(--line-2)
}
.btn-ghost:hover {
    color:var(--ink);
    border-color:var(--ink-50)
}
.btn-row {
    display:flex;
    gap:10px;
    margin-top:16px;
    padding-top:4px
}
.btn-row.sticky {
    position:sticky;
    bottom:0;
    background:linear-gradient(180deg,transparent,var(--peach-50) 30%);
    padding-top:16px;
    padding-bottom:4px;
    margin-top:auto
}
.field.digits {
    margin-bottom:12px;
    padding:0 70px;
}
.field label {
    display:block;
    font-size:.72rem;
    font-weight:700;
    color:var(--ink-50);
    text-transform:uppercase;
    letter-spacing:.1em;
    margin-bottom:6px
}
.field label .req {
    color:var(--coral);
    margin-left:2px
}
.field input,.field textarea,.field select {
    width:100%;
    padding:13px 14px;
    font:inherit;
    font-size:1rem;
    border:1.5px solid var(--line);
    border-radius:12px;
    background:#fff;
    color:var(--ink);
    transition:border-color .2s,box-shadow .2s;
    font-family:'Inter',sans-serif
}
.field input:focus,.field textarea:focus,.field select:focus {
    outline:none;
    border-color:var(--coral);
    box-shadow:0 0 0 4px rgb(255 107 90 / .12)
}
.field textarea {
    resize:none;
    line-height:1.5
}
.field-row {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px
}
.field-row.thirds {
    grid-template-columns:1fr 1fr 1fr
}
.field-hint {
    font-size:.72rem;
    color:var(--ink-50);
    margin-top:4px
}
.field label .opt {
    font-weight:400;
    color:var(--ink-50);
    text-transform:none;
    letter-spacing:0;
    font-size:.68rem;
    margin-left:4px
}
.phone-prefix {
    display:flex;
    gap:8px
}
.phone-prefix .cc {
    flex-shrink:0;
    width:72px;
    padding:13px 12px;
    border:1.5px solid var(--line);
    border-radius:12px;
    background:#fff;
    font-weight:600;
    text-align:center
}
.chips {
    display:flex;
    flex-wrap:wrap;
    gap:6px
}
.chip {
    padding:8px 13px;
    border-radius:999px;
    border:1.5px solid var(--line);
    background:#fff;
    cursor:pointer;
    font:inherit;
    font-size:.85rem;
    font-weight:500;
    color:var(--ink-70);
    transition:all .15s
}
.chip:hover {
    border-color:var(--coral-soft);
    color:var(--ink)
}
.chip.selected {
    background:var(--coral);
    color:#fff;
    border-color:var(--coral);
    box-shadow:0 2px 8px rgb(255 107 90 / .3)
}
.p-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px
}
.p-grid.tight {
    gap:6px
}
.p-card {
    padding:12px;
    border:1.5px solid var(--line);
    background:#fff;
    border-radius:14px;
    cursor:pointer;
    text-align:left;
    transition:all .15s var(--ease);
    font:inherit;
    display:flex;
    flex-direction:column;
    gap:2px
}
.p-card:hover {
    border-color:var(--coral-soft);
    transform:translateY(-1px);
    box-shadow:var(--shadow-sm)
}
.p-card.selected {
    border-color:var(--coral);
    background:linear-gradient(135deg,#fff 0%,var(--peach-50) 100%);
    box-shadow:0 0 0 3px rgb(255 107 90 / .18)
}
.p-card .ico {
    font-size:1.4rem;
    line-height:1;
    margin-bottom:4px
}
.p-card .name {
    font-weight:600;
    font-size:.9rem;
    color:var(--ink)
}
.p-card .desc {
    font-size:.72rem;
    color:var(--ink-50);
    line-height:1.35
}
.more-toggle {
    background:#fff0;
    border:1.5px dashed var(--line-2);
    color:var(--ink-70);
    cursor:pointer;
    font:inherit;
    font-size:.82rem;
    font-weight:600;
    padding:10px 14px;
    border-radius:12px;
    width:100%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    margin:10px 0 12px;
    transition:all .15s

}
.more-toggle:hover {
    border-color:var(--coral-soft);
    color:var(--ink);
    background:rgb(255 107 90 / .04)
}
.more-toggle .chev {
    transition:transform .25s var(--ease);
    display:inline-block
}
.more-toggle.open .chev {
    transform:rotate(180deg)
}
.more-toggle .badge {
    background:var(--coral);
    color:#fff;
    font-size:.65rem;
    font-weight:700;
    padding:1px 7px;
    border-radius:999px;
    letter-spacing:.04em
}
.more-panel {
    background:#fff;
    border:1px solid var(--line);
    border-radius:16px;
    padding:14px;
    margin-bottom:14px;
    animation:drawerIn .3s var(--ease);
    box-shadow:var(--shadow-sm)
}
@keyframes drawerIn {
    from {
        opacity:0;
        transform:translateY(-4px)
    }
    to {
        opacity:1;
        transform:none
    }
}
.more-panel .panel-eyebrow {
    font-size:.68rem;
    font-weight:700;
    color:var(--ink-50);
    text-transform:uppercase;
    letter-spacing:.12em;
    margin-bottom:10px;
    display:flex;
    align-items:center;
    gap:8px
}
.more-panel .panel-eyebrow::before {
    content:"";
    width:14px;
    height:1.5px;
    background:var(--coral)
}
.hero-s {
    align-items:center;
    text-align:center;
    justify-content:center;
    gap:16px;
    padding-top:30px
}
.hero-orb {
    width:90px;
    height:90px;
    border-radius:50%;
    background:radial-gradient(circle at 30% 30%,#ff9a7a,var(--coral) 60%,var(--coral-deep));
    box-shadow:0 10px 30px rgb(255 107 90 / .35);
    display:grid;
    place-items:center;
    color:#fff;
    font-family:'Fraunces',serif;
    font-size:2.4rem;
    font-weight:600;
    animation:floatY 4s ease-in-out infinite
}
@keyframes floatY {
    0%,100% {
        transform:translateY(0)
    }
    50% {
        transform:translateY(-6px)
    }
}
.hero-s h1 {
    font-size:2.2rem
}
.hero-s .sub {
    color:var(--ink-70);
    font-size:.98rem;
    line-height:1.55;
    max-width:280px
}
.hero-chips {
    display:flex;
    gap:6px;
    flex-wrap:wrap;
    justify-content:center;
    margin:4px 0 8px
}
.hero-chips .c {
    background:#fff;
    padding:6px 11px;
    border-radius:999px;
    font-size:.75rem;
    font-weight:500;
    color:var(--ink-70);
    box-shadow:var(--shadow-sm)
}
.micro {
    font-size:.76rem;
    color:var(--ink-50);
    text-align:center;
    margin-top:8px;
    line-height:1.5
}
.micro a {
    color:var(--coral-deep);
    text-decoration:underline
}
.buddy-mini {
    display:flex;
    align-items:center;
    gap:10px;
    background:#fff;
    padding:5px 12px 5px 5px;
    border-radius:999px;
    border:1px solid var(--line);
    box-shadow:0 2px 8px rgb(0 0 0 / .04);
    align-self:flex-start;
    margin-bottom:10px;
    animation:fadeUp .3s var(--ease)
}
.buddy-mini .bm-text {
    display:flex;
    flex-direction:column;
    line-height:1.1
}
.buddy-mini .bm-label {
    font-size:.56rem;
    color:var(--ink-50);
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase
}
.buddy-mini .bm-name {
    font-family:'Fraunces',serif;
    font-size:.92rem;
    font-weight:600;
    color:var(--ink)
}
.buddy-preview {
    display:flex;
    align-items:center;
    gap:12px;
    background:linear-gradient(135deg,white,var(--peach-50));
    padding:12px 14px;
    border-radius:16px;
    border:1px solid var(--coral-soft);
    box-shadow:0 4px 14px rgb(255 107 90 / .12);
    margin-bottom:14px;
    animation:fadeUp .35s var(--ease)
}
.buddy-preview .bp-text {
    display:flex;
    flex-direction:column;
    gap:1px
}
.buddy-preview .bp-hi {
    font-size:.65rem;
    color:var(--ink-50);
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase
}
.buddy-preview .bp-name {
    font-family:'Fraunces',serif;
    font-size:1.2rem;
    font-weight:600;
    color:var(--coral-deep);
    line-height:1.1
}
.buddy-preview .bp-meta {
    font-size:.68rem;
    color:var(--ink-50);
    margin-top:3px;
    font-style:italic
}
.buddy-preview.portrait-pending {
    background:linear-gradient(135deg,#FFF5EE,var(--peach-50));
    border-style:dashed;
    border-color:var(--coral-soft)
}
.portrait-ph {
    width:56px;
    height:56px;
    border-radius:50%;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:repeating-linear-gradient(135deg,rgb(244 134 109 / .18) 0 6px,rgb(244 134 109 / .08) 6px 12px);
    color:var(--coral-deep);
    border:1.5px dashed var(--coral-soft);
    position:relative
}
.portrait-ph::after {
    content:'';
    position:absolute;
    inset:0;
    border-radius:50%;
    background:radial-gradient(circle at 30% 30%,rgb(255 255 255 / .55),transparent 60%);
    pointer-events:none
}
.build-orb-portrait {
    width:140px;
    height:140px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:radial-gradient(circle at 35% 30%,rgb(255 222 200 / .95),rgb(244 134 109 / .35) 50%,rgb(224 101 75 / .15) 80%);
    position:relative;
    overflow:hidden;
    margin:0 auto 20px;
    box-shadow:0 12px 40px rgb(244 134 109 / .35),inset 0 0 0 1px rgb(255 255 255 / .5)
}
.build-orb-portrait::before {
    content:'';
    position:absolute;
    inset:0;
    background:conic-gradient(from 0deg,transparent 0%,rgb(255 255 255 / .7) 12%,transparent 25%,transparent 50%,rgb(255 193 170 / .6) 62%,transparent 75%);
    animation:portraitSpin 2.6s linear infinite;
    filter:blur(8px)
}
.portrait-shimmer {
    position:relative;
    z-index:1;
    animation:portraitPulse 1.8s ease-in-out infinite
}
@keyframes portraitSpin {
    to {
        transform:rotate(360deg)
    }
}
@keyframes portraitPulse {
    0%,100% {
        transform:scale(1);
        opacity:.92
    }
    50% {
        transform:scale(1.06);
        opacity:1
    }
}
.peppi-toast-container {
    position:fixed;
    top:20px;
    right:20px;
    z-index:9999;
    display:flex;
    flex-direction:column;
    gap:12px;
    pointer-events:none
}
.peppi-toast {
    min-width:280px;
    max-width:380px;
    background:#fff;
    border-radius:16px;
    padding:14px 18px;
    display:flex;
    align-items:flex-start;
    gap:12px;
    box-shadow:0 12px 30px rgb(43 29 27 / .12),0 1px 0 rgb(0 0 0 / .02);
    border-left:4px solid var(--coral);
    animation:toastSlideIn 0.4s cubic-bezier(.2,.8,.2,1) forwards;
    pointer-events:auto;
    position:relative;
    overflow:hidden
}
.peppi-toast.toast-error {
    border-left-color:#F44336
}
.peppi-toast.toast-success {
    border-left-color:#5BC97D
}
.peppi-toast.toast-warning {
    border-left-color:#FFB300
}
.peppi-toast-icon {
    flex-shrink:0;
    width:24px;
    height:24px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    color:#fff;
    font-size:14px
}
.toast-error .peppi-toast-icon {
    background:#F44336
}
.toast-success .peppi-toast-icon {
    background:#5BC97D
}
.toast-warning .peppi-toast-icon {
    background:#FFB300;
    color:#FFF
}
.peppi-toast-content {
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:center
}
.peppi-toast-title {
    font-family:'Fraunces',serif;
    font-size:.95rem;
    font-weight:600;
    color:var(--ink);
    margin-bottom:2px
}
.peppi-toast-message {
    font-size:.8rem;
    color:var(--ink-70);
    line-height:1.4
}
.peppi-toast-close {
    background:none;
    border:none;
    color:var(--ink-30);
    cursor:pointer;
    padding:2px;
    font-size:1.1rem;
    transition:color 0.2s;
    align-self:flex-start
}
.peppi-toast-close:hover {
    color:var(--ink)
}
@keyframes toastSlideIn {
    from {
        opacity:0;
        transform:translateX(30px) scale(.95)
    }
    to {
        opacity:1;
        transform:translateX(0) scale(1)
    }
}
@keyframes toastSlideOut {
    from {
        opacity:1;
        transform:translateX(0) scale(1)
    }
    to {
        opacity:0;
        transform:translateX(30px) scale(.95)
    }
}
.peppi-toast.fade-out {
    animation:toastSlideOut 0.3s cubic-bezier(.2,.8,.2,1) forwards
}
.portrait-preview {
    display:flex;
    gap:14px;
    align-items:center;
    background:linear-gradient(135deg,#fff 0%,var(--peach-50) 100%);
    border:1px solid var(--peach-200);
    border-radius:18px;
    padding:12px;
    margin-bottom:16px;
    position:sticky;
    top:0;
    z-index:4;
    box-shadow:0 8px 24px rgb(41 38 27 / .06),0 1px 0 rgb(0 0 0 / .02);
    backdrop-filter:blur(10px)
}
.portrait-frame {
    width:96px;
    height:110px;
    flex-shrink:0;
    border-radius:14px;
    overflow:hidden;
    background:linear-gradient(135deg,#FFE9DD,var(--peach-200));
    position:relative;
    box-shadow:inset 0 0 0 1px rgb(255 255 255 / .6),0 4px 12px rgb(217 117 87 / .18);
    transition:transform .3s var(--ease)
}
.portrait-frame img {
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    animation:portraitFadeIn .4s var(--ease)
}
@keyframes portraitFadeIn {
    from {
        opacity:0
    }
    to {
        opacity:1
    }
}
.portrait-fallback {
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center
}
.portrait-frame.is-loading {
    transform:scale(.985)
}
.portrait-shimmer-overlay {
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(110deg,transparent 0%,transparent 35%,rgb(255 255 255 / .55) 50%,transparent 65%,transparent 100%);
    background-size:220% 100%;
    animation:shimmerSweep 1.4s ease-in-out infinite
}
@keyframes shimmerSweep {
    from {
        background-position:120% 0
    }
    to {
        background-position:-120% 0
    }
}
.portrait-meta {
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:3px
}
.pp-eyebrow {
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:.68rem;
    font-weight:700;
    color:var(--ink-70);
    letter-spacing:.08em;
    text-transform:uppercase
}
.pp-dot {
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--coral);
    flex-shrink:0
}
.pp-dot-green {
    background:#5BC97D;
    box-shadow:0 0 0 0 rgb(91 201 125 / .5);
    animation:smsPulse 1.6s ease-out infinite
}
.pp-dot-amber {
    background:#E8A23A
}
.pp-dot-spin {
    background:#fff0;
    border:2px solid var(--peach-200);
    border-top-color:var(--coral);
    width:11px;
    height:11px;
    animation:portraitSpin .8s linear infinite
}
.pp-name {
    font-family:'Fraunces',serif;
    font-size:1.1rem;
    font-weight:600;
    color:var(--ink);
    line-height:1.1;
    letter-spacing:-.01em
}
.pp-hint {
    font-size:.72rem;
    color:var(--ink-50);
    line-height:1.35
}
.avatar-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:8px
}
.av-pick {
    aspect-ratio:1;
    border:1.5px solid var(--line);
    background:#fff;
    border-radius:14px;
    cursor:pointer;
    font:inherit;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:all .15s var(--ease);
    padding:4px;
    position:relative
}
.av-pick:hover {
    border-color:var(--coral-soft);
    transform:translateY(-1px)
}
.av-pick.selected {
    border-color:var(--coral);
    background:linear-gradient(135deg,#fff,var(--peach-50));
    box-shadow:0 0 0 3px rgb(255 107 90 / .18)
}
.av-pick .nm {
    position:absolute;
    bottom:-4px;
    left:50%;
    transform:translateX(-50%);
    font-size:.62rem;
    color:var(--ink-50);
    font-weight:600;
    background:#fff;
    padding:1px 5px;
    border-radius:999px;
    border:1px solid var(--line);
    opacity:0;
    transition:opacity .15s
}
.av-pick.selected .nm {
    opacity:1;
    color:var(--coral-deep);
    border-color:var(--coral-soft)
}
.swatch-row {
    display:flex;
    gap:6px;
    flex-wrap:wrap
}
.swatch {
    width:28px;
    height:28px;
    border-radius:50%;
    border:2px solid #fff;
    cursor:pointer;
    box-shadow:0 0 0 1.5px var(--line);
    transition:transform .15s,box-shadow .15s
}
.swatch:hover {
    transform:scale(1.1)
}
.swatch.selected {
    box-shadow:0 0 0 2.5px var(--coral);
    transform:scale(1.05)
}
.slider-block {
    margin-bottom:14px
}
.slider-block .sl-head {
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    margin-bottom:6px
}
.slider-block .sl-label {
    font-size:.78rem;
    font-weight:600;
    color:var(--ink)
}
.slider-block .sl-val {
    font-size:.72rem;
    color:var(--ink-50);
    font-weight:600;
    font-variant-numeric:tabular-nums
}
.slider-block .sl-ends {
    display:flex;
    justify-content:space-between;
    font-size:.68rem;
    color:var(--ink-50);
    margin-top:2px
}
input[type="range"] {
    width:100%;
    -webkit-appearance:none;
    appearance:none;
    background:#fff0;
    height:22px
}
input[type="range"]::-webkit-slider-runnable-track {
    height:4px;
    background:var(--peach-200);
    border-radius:2px
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance:none;
    appearance:none;
    width:18px;
    height:18px;
    border-radius:50%;
    background:var(--coral);
    margin-top:-7px;
    box-shadow:0 2px 6px rgb(255 107 90 / .4),0 0 0 3px #fff;
    cursor:pointer
}
input[type="range"]::-moz-range-track {
    height:4px;
    background:var(--peach-200);
    border-radius:2px
}
input[type="range"]::-moz-range-thumb {
    width:18px;
    height:18px;
    border-radius:50%;
    background:var(--coral);
    border:3px solid #fff;
    box-shadow:0 2px 6px rgb(255 107 90 / .4);
    cursor:pointer
}
.segmented {
    display:flex;
    gap:4px;
    padding:3px;
    background:var(--peach-100);
    border-radius:10px
}
.segmented button {
    flex:1;
    padding:7px 10px;
    border:none;
    background:#fff0;
    font:inherit;
    font-size:.8rem;
    font-weight:500;
    color:var(--ink-70);
    cursor:pointer;
    border-radius:8px;
    transition:all .15s
}
.segmented button.selected {
    background:#fff;
    color:var(--ink);
    font-weight:600;
    box-shadow:var(--shadow-sm)
}
.chips-limit {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:6px
}
.chips-limit .cnt {
    font-size:.68rem;
    color:var(--ink-50);
    font-weight:600;
    font-variant-numeric:tabular-nums
}
.build-wrap {
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:22px;
    padding:30px;
    text-align:center
}
.build-orb {
    width:110px;
    height:110px;
    border-radius:50%;
    background:radial-gradient(circle at 30% 30%,#ff9a7a,var(--coral) 60%,var(--coral-deep));
    box-shadow:0 0 40px rgb(255 107 90 / .45),inset 0 2px 8px rgb(255 255 255 / .3);
    display:grid;
    place-items:center;
    color:#fff;
    font-family:'Fraunces',serif;
    font-size:2.6rem;
    font-weight:600;
    animation:orbPulse 2.4s ease-in-out infinite;
    position:relative;
    overflow:hidden
}
.build-orb::before,.build-orb::after {
    content:"";
    position:absolute;
    inset:-16px;
    border-radius:50%;
    border:2px solid var(--coral-soft);
    opacity:0;
    animation:orbRing 2.4s ease-out infinite
}
.build-orb::after {
    animation-delay:1.2s
}
@keyframes orbPulse {
    0%,100% {
        transform:scale(1)
    }
    50% {
        transform:scale(1.05)
    }
}
@keyframes orbRing {
    0% {
        transform:scale(.9);
        opacity:.8
    }
    100% {
        transform:scale(1.6);
        opacity:0
    }
}
.build-steps {
    width:100%;
    max-width:240px;
    display:flex;
    flex-direction:column;
    gap:8px
}
.build-step {
    display:flex;
    align-items:center;
    gap:10px;
    font-size:.85rem;
    color:var(--ink-50);
    opacity:.4;
    transition:all .3s;
    text-align:left
}
.build-step.active {
    color:var(--ink);
    opacity:1
}
.build-step.done {
    color:var(--ink-70);
    opacity:1
}
.build-step .tick {
    width:18px;
    height:18px;
    border-radius:50%;
    border:1.5px solid var(--line);
    display:grid;
    place-items:center;
    flex-shrink:0
}
.build-step.active .tick {
    border-color:var(--coral);
    background:#fff
}
.build-step.active .tick::after {
    content:"";
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--coral);
    animation:tickPulse 1s ease infinite
}
.build-step.done .tick {
    background:var(--coral);
    border-color:var(--coral)
}
.build-step.done .tick::after {
    content:"✓";
    color:#fff;
    font-size:.68rem;
    font-weight:700
}
@keyframes tickPulse {
    0%,100% {
        transform:scale(1)
    }
    50% {
        transform:scale(1.4)
    }
}
.build-wrap.celebrate {
    animation:celebrateIn .5s var(--ease)
}
@keyframes celebrateIn {
    from {
        opacity:0;
        transform:translateY(8px) scale(.98)
    }
    to {
        opacity:1;
        transform:none
    }
}
.build-orb-portrait.done {
    animation:orbPop .55s cubic-bezier(.34,1.56,.64,1);
    box-shadow:0 16px 50px rgb(244 134 109 / .45),inset 0 0 0 1px rgb(255 255 255 / .6),0 0 0 6px rgb(255 255 255 / .5),0 0 0 9px rgb(255 107 90 / .18)
}
.build-orb-portrait.done::before {
    animation:none;
    opacity:0
}
@keyframes orbPop {
    0% {
        transform:scale(.6);
        opacity:0
    }
    60% {
        transform:scale(1.08);
        opacity:1
    }
    100% {
        transform:scale(1)
    }
}
.done-check {
    position:absolute;
    bottom:-2px;
    right:-2px;
    width:38px;
    height:38px;
    border-radius:50%;
    background:linear-gradient(135deg,#5BC97D,#3FA565);
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 4px 12px rgb(63 165 101 / .45),0 0 0 3px #fff;
    animation:checkPop .4s .25s cubic-bezier(.34,1.56,.64,1) backwards
}
@keyframes checkPop {
    from {
        transform:scale(0)
    }
    to {
        transform:scale(1)
    }
}
.sms-preview {
    display:flex;
    align-items:center;
    gap:12px;
    background:#fff;
    border-radius:16px;
    padding:12px 14px;
    box-shadow:0 10px 30px rgb(41 38 27 / .08),0 1px 0 rgb(0 0 0 / .02);
    width:100%;
    max-width:280px;
    position:relative;
    overflow:hidden;
    animation:smsIn .5s .35s var(--ease) backwards
}
@keyframes smsIn {
    from {
        opacity:0;
        transform:translateY(10px)
    }
    to {
        opacity:1;
        transform:none
    }
}
.sms-preview::before {
    content:'';
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:3px;
    background:linear-gradient(180deg,#5BC97D,#3FA565)
}
.sms-icon {
    width:36px;
    height:36px;
    border-radius:50%;
    background:linear-gradient(135deg,#5BC97D,#3FA565);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    box-shadow:0 3px 8px rgb(63 165 101 / .3)
}
.sms-info {
    flex:1;
    min-width:0;
    text-align:left
}
.sms-from {
    font-size:.82rem;
    font-weight:600;
    color:var(--ink);
    letter-spacing:-.01em
}
.sms-num {
    font-size:.72rem;
    color:var(--ink-50);
    font-variant-numeric:tabular-nums;
    margin-top:1px
}
.sms-pulse {
    width:8px;
    height:8px;
    border-radius:50%;
    background:#5BC97D;
    flex-shrink:0;
    box-shadow:0 0 0 0 rgb(91 201 125 / .55);
    animation:smsPulse 1.4s ease-out infinite
}
@keyframes smsPulse {
    0% {
        box-shadow:0 0 0 0 rgb(91 201 125 / .55)
    }
    70% {
        box-shadow:0 0 0 10px #fff0
    }
    100% {
        box-shadow:0 0 0 0 #fff0
    }
}
.send-strip {
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:.7rem;
    color:var(--ink-50);
    font-weight:600;
    letter-spacing:.12em;
    text-transform:uppercase;
    margin-top:4px;
    animation:smsIn .5s .55s var(--ease) backwards
}
.send-strip .dot {
    width:5px;
    height:5px;
    border-radius:50%;
    background:var(--coral);
    animation:sendDot 1.2s ease-in-out infinite
}
.send-strip .d1 {
    animation-delay:0s
}
.send-strip .d2 {
    animation-delay:.2s
}
.send-strip .d3 {
    animation-delay:.4s
}
.send-label {
    margin-left:4px
}
@keyframes sendDot {
    0%,80%,100% {
        transform:scale(.6);
        opacity:.35
    }
    40% {
        transform:scale(1);
        opacity:1
    }
}
.confetti {
    position:absolute;
    inset:0;
    pointer-events:none;
    overflow:hidden;
    z-index:5
}
.confetti-pc {
    position:absolute;
    top:-16px;
    display:block;
    animation-name:confettiFall;
    animation-timing-function:cubic-bezier(.2,.6,.4,1);
    animation-fill-mode:forwards;
    will-change:transform,opacity;
    --drift:0px;
    --rot:0deg
}
@keyframes confettiFall {
    0% {
        transform:translate(0,0) rotate(0);
        opacity:0
    }
    10% {
        opacity:1
    }
    100% {
        transform:translate(var(--drift),720px) rotate(var(--rot));
        opacity:0
    }
}
.chat-hdr {
    padding:10px 18px;
    background:#fff;
    border-bottom:1px solid var(--line);
    text-align:center;
    flex-shrink:0
}
.chat-hdr .av {
    width:42px;
    height:42px;
    margin:0 auto 4px;
    background:linear-gradient(135deg,#ff9a7a 0%,var(--coral) 55%,var(--coral-deep) 100%);
    border-radius:50%;
    display:grid;
    place-items:center;
    color:#fff;
    font-family:'Fraunces',serif;
    font-weight:600;
    font-size:1.1rem;
    box-shadow:0 4px 10px rgb(217 117 87 / .3);
    position:relative;
    overflow:hidden;
    padding:0
}
.chat-hdr .av::after {
    content:"";
    position:absolute;
    bottom:0;
    right:0;
    width:11px;
    height:11px;
    background:#42c77a;
    border-radius:50%;
    border:2px solid #fff
}
.chat-hdr .name {
    font-weight:600;
    font-size:.92rem
}
.chat-hdr .status {
    font-size:.68rem;
    color:var(--ink-50);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    margin-top:1px
}
.chat-hdr .status::before {
    content:"";
    width:6px;
    height:6px;
    border-radius:50%;
    background:#42c77a;
    box-shadow:0 0 0 3px rgb(66 199 122 / .22);
    animation:pulseDot 2s ease-in-out infinite
}
@keyframes pulseDot {
    0%,100% {
        box-shadow:0 0 0 3px rgb(66 199 122 / .22)
    }
    50% {
        box-shadow:0 0 0 6px rgb(66 199 122 / .06)
    }
}
.chat-body {
    flex:1;
    min-height:0;
    overflow-y:auto;
    padding:14px 16px 12px;
    display:flex;
    flex-direction:column;
    gap:4px;
    background:linear-gradient(180deg,var(--peach-50) 0%,#fff 100%)
}
.chat-body::before {
    content:"TODAY";
    display:block;
    text-align:center;
    font-size:.58rem;
    font-weight:700;
    letter-spacing:.14em;
    color:var(--ink-50);
    margin:4px 0 8px
}
.msg {
    display:flex;
    flex-direction:column;
    gap:2px;
    max-width:82%;
    opacity:0;
    animation:bubbleIn .4s var(--ease) forwards
}
.msg.them {
    align-self:flex-start
}
.msg.you {
    align-self:flex-end;
    align-items:flex-end
}
.msg-name {
    font-size:.58rem;
    font-weight:700;
    color:var(--ink-50);
    letter-spacing:.08em;
    padding:0 6px;
    text-transform:uppercase
}
.msg.you .msg-name {
    color:var(--coral-deep)
}
.bubble {
    padding:9px 13px;
    border-radius:18px;
    font-size:.87rem;
    line-height:1.4
}
.bubble.them {
    background:#fff;
    color:var(--ink);
    border-bottom-left-radius:5px;
    box-shadow:var(--shadow-sm)
}
.bubble.you {
    background:var(--coral);
    color:#fff;
    border-bottom-right-radius:5px
}
@keyframes bubbleIn {
    from {
        opacity:0;
        transform:translateY(8px) scale(.96)
    }
    to {
        opacity:1;
        transform:none
    }
}
.vcard {
    background:#fff;
    border-radius:14px;
    padding:10px 12px;
    display:flex;
    align-items:center;
    gap:10px;
    box-shadow:var(--shadow-sm);
    max-width:88%;
    align-self:center;
    margin:4px 0;
    border:1px dashed var(--peach-200)
}
.vcard .av {
    width:40px;
    height:40px;
    border-radius:50%;
    background:linear-gradient(135deg,#ff9a7a,var(--coral-deep));
    display:grid;
    place-items:center;
    color:#fff;
    font-family:'Fraunces',serif;
    font-weight:600;
    font-size:1rem;
    flex-shrink:0;
    overflow:hidden;
    padding:0
}
.vcard .info {
    flex:1;
    min-width:0
}
.vcard .n {
    font-weight:600;
    font-size:.85rem
}
.vcard .num {
    font-size:.72rem;
    color:var(--ink-50);
    font-variant-numeric:tabular-nums
}
.vcard .add {
    background:var(--coral);
    color:#fff;
    padding:5px 11px;
    border-radius:999px;
    font-size:.68rem;
    font-weight:600;
    border:none;
    cursor:pointer
}
.perm-list {
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-bottom:12px
}
.perm {
    display:flex;
    align-items:center;
    gap:12px;
    background:#fff;
    padding:10px 12px;
    border-radius:12px;
    border:1px solid var(--line)
}
.perm .ico {
    font-size:1.2rem;
    flex-shrink:0;
    width:32px;
    height:32px;
    display:grid;
    place-items:center;
    background:var(--peach-50);
    border-radius:9px
}
.perm .t {
    font-weight:600;
    font-size:.85rem
}
.perm .d {
    font-size:.72rem;
    color:var(--ink-50);
    margin-top:1px
}
.google-btn {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    width:100%;
    padding:12px 18px;
    border-radius:14px;
    background:#fff;
    border:1.5px solid var(--line);
    font:inherit;
    font-size:.92rem;
    font-weight:600;
    color:var(--ink);
    cursor:pointer;
    transition:all .15s var(--ease);
    box-shadow:var(--shadow-sm)
}
.google-btn:hover {
    border-color:var(--ink-50);
    transform:translateY(-1px);
    box-shadow:var(--shadow-md)
}
.connected-pill {
    text-align:center;
    padding:12px 18px;
    border-radius:14px;
    background:linear-gradient(135deg,#cde7d8,#b5dcc4);
    color:#1f6f3f;
    font-weight:600;
    font-size:.92rem
}
.share-hint {
    position:relative;
    z-index:1;
    margin-top:6px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    max-width:380px;
    text-align:center
}
.share-hint .restart {
    background:#fff;
    border:1.5px solid var(--peach-200);
    padding:8px 16px;
    border-radius:999px;
    font:inherit;
    font-size:.82rem;
    font-weight:500;
    color:var(--ink-70);
    cursor:pointer;
    transition:all .15s
}
.share-hint .restart:hover {
    border-color:var(--coral);
    color:var(--coral-deep)
}
.share-hint .note {
    font-size:.76rem;
    color:var(--ink-50)
}
@media (max-width:440px) {
    .stage {
        padding:12px 8px 32px
    }
    .phone {
        width:calc(100vw - 24px);
        max-width:390px;
        height:calc(100vh - 140px);
        max-height:800px;
        border-radius:42px;
        padding:10px
    }
    .phone::before {
        top:18px;
        width:100px;
        height:28px
    }
    .screen {
        border-radius:32px
    }
}
@media(max-width:425px) {
    .s,.phone.is-desktop .s {
        max-width:100%;
        margin:0 auto;
        width:100%
    }
}
.ph-hero {
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    margin-bottom:18px
}
.ph-orb {
    width:86px;
    height:86px;
    border-radius:50%;
    background:radial-gradient(circle at 30% 30%,#ff9a7a,var(--coral) 60%,var(--coral-deep));
    box-shadow:0 14px 36px rgb(255 107 90 / .4),inset 0 2px 8px rgb(255 255 255 / .3);
    display:grid;
    place-items:center;
    position:relative;
    margin-bottom:14px
}
.ph-orb-mark {
    font-family:'Fraunces',serif;
    font-style:italic;
    font-weight:600;
    color:#fff;
    font-size:2.2rem;
    letter-spacing:-.02em
}
.ph-orb-bubble {
    position:absolute;
    bottom:-6px;
    right:-10px;
    width:38px;
    height:32px;
    background:#fff;
    border-radius:14px 14px 14px 4px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:3px;
    box-shadow:0 6px 18px rgb(0 0 0 / .12);
    animation:phBubble 2.6s ease-in-out infinite
}
.ph-orb-bubble .d {
    width:5px;
    height:5px;
    border-radius:50%;
    background:var(--coral);
    animation:otpDot 1.4s ease-in-out infinite
}
.ph-orb-bubble .d:nth-child(2) {
    animation-delay:.2s
}
.ph-orb-bubble .d:nth-child(3) {
    animation-delay:.4s
}
@keyframes otpDot {
    0%,60%,100% {
        transform:translateY(0);
        opacity:.5
    }
    30% {
        transform:translateY(-3px);
        opacity:1
    }
}
@keyframes phBubble {
    0%,100% {
        transform:rotate(-2deg) translateY(0)
    }
    50% {
        transform:rotate(2deg) translateY(-3px)
    }
}
.ph-sms-orb {
    width:86px;
    height:86px;
    border-radius:50%;
    background:radial-gradient(circle at 30% 30%,#ff9a7a,var(--coral) 60%,var(--coral-deep));
    box-shadow:0 14px 36px rgb(255 107 90 / .4);
    display:grid;
    place-items:center;
    position:relative;
    margin-bottom:14px
}
.ph-sms-pulse {
    position:absolute;
    inset:-8px;
    border-radius:50%;
    border:2px solid var(--coral-soft);
    opacity:0;
    animation:phPulse 2s ease-out infinite
}
@keyframes phPulse {
    0% {
        transform:scale(.95);
        opacity:.8
    }
    100% {
        transform:scale(1.25);
        opacity:0
    }
}
.ph-h {
    font-family:'Fraunces',serif;
    font-weight:600;
    font-size:1.85rem;
    letter-spacing:-.02em;
    line-height:1.05;
    color:var(--ink);
    margin:0 0 6px
}
.ph-h .em {
    font-style:italic;
    background:linear-gradient(135deg,var(--coral),var(--coral-deep));
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:#fff0
}
.ph-sub {
    font-size:.92rem;
    color:var(--ink-70);
    line-height:1.4;
    margin:0;
    max-width:280px;
    text-wrap:wrap;
    text-wrap:pretty
}
.ph-sub strong {
    color:var(--coral-deep);
    font-weight:700;
    font-variant-numeric:tabular-nums
}
.ph-link-inline {
    background:none;
    border:none;
    padding:0 0 0 4px;
    font:inherit;
    font-weight:700;
    color:var(--coral-deep);
    cursor:pointer;
    text-decoration:underline
}
.ph-link-inline:hover {
    color:var(--coral)
}
.ph-phone {
    display:grid;
    grid-template-columns:auto 1fr;
    align-items:stretch;
    gap:0;
    border:1.5px solid var(--line);
    border-radius:14px;
    background:#fff;
    transition:border-color .15s,box-shadow .15s;
    overflow:hidden
}
.ph-phone:focus-within {
    border-color:var(--coral);
    box-shadow:0 0 0 3px rgb(255 107 90 / .18)
}
.ph-phone.invalid {
    border-color:#E8A23A
}
.ph-cc {
    border:none;
    border-right:1px solid var(--line);
    background:var(--peach-50);
    padding:14px 26px 14px 12px;
    font:inherit;
    font-weight:600;
    color:var(--ink);
    cursor:pointer;
    appearance:none;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%23744A3F' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
    background-repeat:no-repeat;
    background-position:right 8px center;
    width:auto;
    min-width:0
}
.ph-num {
    width:100%;
    min-width:0;
    border:none;
    outline:none;
    font:inherit;
    font-size:1rem;
    padding:14px;
    background:#fff0;
    font-variant-numeric:tabular-nums;
    letter-spacing:.02em
}
.ph-consent {
    display:flex;
    flex-direction:column;
    gap:10px;
    margin:14px 0 16px
}
.ph-check {
    display:grid;
    grid-template-columns:auto 1fr;
    gap:10px;
    cursor:pointer;
    font-size:.82rem;
    line-height:1.45;
    color:var(--ink-70);
    position:relative
}
.ph-check input {
    position:absolute;
    opacity:0;
    pointer-events:none
}
.ph-check-box {
    width:20px;
    height:20px;
    border-radius:6px;
    border:1.5px solid var(--ink-50);
    background:#fff;
    display:inline-block;
    flex-shrink:0;
    margin-top:1px;
    position:relative;
    transition:all .15s
}
.ph-check input:checked+.ph-check-box {
    background:var(--coral);
    border-color:var(--coral)
}
.ph-check input:checked+.ph-check-box::after {
    content:'';
    position:absolute;
    left:6px;
    top:2px;
    width:5px;
    height:10px;
    border:solid #fff;
    border-width:0 2px 2px 0;
    transform:rotate(45deg)
}
.ph-check-text a {
    color:var(--coral-deep);
    font-weight:600;
    text-decoration:underline
}
.ph-more {
    background:none;
    border:none;
    padding:0 4px;
    font:inherit;
    font-weight:700;
    font-size:.76rem;
    color:var(--coral-deep);
    cursor:pointer;
    text-decoration:underline
}
.ph-fine {
    display:block;
    margin-top:6px;
    font-size:.74rem;
    color:var(--ink-50);
    background:var(--peach-50);
    padding:8px 10px;
    border-radius:8px;
    border-left:2px solid var(--coral-soft)
}
.ph-recap {
    width:100%;
    display:grid;
    grid-template-columns:auto 1fr auto;
    gap:12px;
    align-items:center;
    border:1.5px solid var(--line);
    border-radius:14px;
    padding:12px 14px;
    background:#fff;
    cursor:pointer;
    transition:all .15s;
    font:inherit;
    text-align:left
}
.ph-recap:hover {
    border-color:var(--coral-soft)
}
.ph-recap.checked {
    border-color:var(--coral-soft);
    background:linear-gradient(135deg,#fff,var(--peach-50))
}
.ph-recap-box {
    width:26px;
    height:26px;
    border:2px solid var(--ink-50);
    border-radius:6px;
    background:#fff;
    display:grid;
    place-items:center;
    flex-shrink:0;
    transition:all .15s
}
.ph-recap.checked .ph-recap-box {
    background:var(--coral);
    border-color:var(--coral)
}
.ph-recap-spin {
    width:14px;
    height:14px;
    border-radius:50%;
    border:2px solid var(--peach-200);
    border-top-color:var(--coral);
    animation:portraitSpin .7s linear infinite
}
.ph-recap-label {
    display:flex;
    flex-direction:column;
    line-height:1.2
}
.ph-recap-label strong {
    font-size:.9rem;
    color:var(--ink);
    font-weight:700
}
.ph-recap-label span {
    font-size:.72rem;
    color:var(--ink-50)
}
.ph-recap-shield {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:2px;
    opacity:.95
}
.ph-recap-brand {
    font-size:.56rem;
    color:var(--ink-50);
    letter-spacing:.04em;
    text-transform:lowercase;
    font-weight:600
}
.cap-overlay {
    position:absolute;
    inset:0;
    z-index:60;
    background:rgb(43 29 27 / .55);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    display:grid;
    place-items:center;
    padding:16px;
    animation:capFade .2s ease-out
}
@keyframes capFade {
    from {
        opacity:0
    }
    to {
        opacity:1
    }
}
.cap-modal {
    width:100%;
    max-width:320px;
    background:#fff;
    border-radius:18px;
    border:1px solid var(--ink-20,#E8E2DA);
    box-shadow:0 24px 60px rgb(43 29 27 / .28);
    overflow:hidden;
    animation:capPop .25s cubic-bezier(.2,.9,.3,1.2)
}
@keyframes capPop {
    from {
        opacity:0;
        transform:scale(.92) translateY(8px)
    }
    to {
        opacity:1;
        transform:none
    }
}
.cap-modal.shake {
    animation:capShake .55s
}
@keyframes capShake {
    10%,90% {
        transform:translateX(-2px)
    }
    20%,80% {
        transform:translateX(3px)
    }
    30%,50%,70% {
        transform:translateX(-5px)
    }
    40%,60% {
        transform:translateX(5px)
    }
}
.cap-head {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    padding:16px 16px 12px;
    background:linear-gradient(135deg,var(--peach-50,#FFF4EE),#fff);
    border-bottom:1px solid var(--ink-10,#F1ECE5)
}
.cap-eyebrow {
    display:inline-block;
    font-size:.58rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--coral-deep,#D85F45);
    font-weight:700;
    margin-bottom:4px
}
.cap-title {
    font-family:'Fraunces',Georgia,serif;
    font-size:1.05rem;
    line-height:1.2;
    color:var(--ink,#2B1D1B);
    margin:0;
    font-weight:500
}
.cap-title em {
    font-style:italic;
    color:var(--coral-deep,#D85F45)
}
.cap-sub {
    margin:4px 0 0;
    font-size:.78rem;
    color:var(--ink-60,#6E6058)
}
.cap-close {
    width:28px;
    height:28px;
    border:none;
    background:#fff0;
    font-size:1.4rem;
    line-height:1;
    color:var(--ink-50,#8A7B72);
    cursor:pointer;
    border-radius:8px;
    display:grid;
    place-items:center;
    flex-shrink:0
}
.cap-close:hover {
    background:var(--ink-10,#F1ECE5);
    color:var(--ink)
}
.cap-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:4px;
    padding:12px;
    background:var(--peach-50,#FFF4EE)
}
.cap-tile {
    position:relative;
    aspect-ratio:1 / 1;
    background:#fff;
    border:2px solid #fff0;
    border-radius:10px;
    cursor:pointer;
    display:grid;
    place-items:center;
    transition:transform .12s,border-color .12s,box-shadow .12s;
    padding:0;
    font:inherit
}
.cap-tile:hover {
    transform:translateY(-1px);
    box-shadow:0 4px 10px rgb(43 29 27 / .08)
}
.cap-tile:active {
    transform:scale(.96)
}
.cap-tile.sel {
    border-color:var(--coral,#F4866D);
    box-shadow:0 0 0 3px rgb(244 134 109 / .18)
}
.cap-tile-mark {
    position:absolute;
    top:4px;
    right:4px;
    width:18px;
    height:18px;
    background:var(--coral,#F4866D);
    border-radius:50%;
    display:grid;
    place-items:center;
    opacity:0;
    transform:scale(.6);
    transition:opacity .15s,transform .15s;
    box-shadow:0 2px 4px rgb(216 95 69 / .4)
}
.cap-tile.sel .cap-tile-mark {
    opacity:1;
    transform:scale(1)
}
.cap-decoy {
    font-size:1.6rem;
    opacity:.85
}
.cap-peppi {
    display:block
}
.cap-foot {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:12px 16px;
    border-top:1px solid var(--ink-10,#F1ECE5)
}
.cap-foot-left {
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
    flex:1
}
.cap-icon-btn {
    width:32px;
    height:32px;
    border:1px solid var(--ink-20,#E8E2DA);
    background:#fff;
    color:var(--ink-60,#6E6058);
    border-radius:8px;
    display:grid;
    place-items:center;
    cursor:pointer;
    flex-shrink:0;
    transition:background .12s,color .12s
}
.cap-icon-btn:hover {
    background:var(--peach-50,#FFF4EE);
    color:var(--coral-deep,#D85F45)
}
.cap-msg {
    font-size:.74rem;
    color:var(--ink-60,#6E6058);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis
}
.cap-verify {
    background:var(--coral,#F4866D);
    color:#fff;
    border:none;
    padding:8px 16px;
    border-radius:9px;
    font-size:.82rem;
    font-weight:700;
    cursor:pointer;
    flex-shrink:0;
    transition:background .12s,transform .12s
}
.cap-verify:hover {
    background:var(--coral-deep,#D85F45)
}
.cap-verify:active {
    transform:scale(.96)
}
.cap-verify.pending {
    opacity:.7;
    cursor:progress
}
.cap-verify:disabled {
    cursor:not-allowed
}
.cap-brand {
    display:flex;
    align-items:center;
    gap:5px;
    flex-wrap:wrap;
    font-size:.62rem;
    color:var(--ink-50,#8A7B72);
    padding:8px 16px 12px;
    background:var(--ink-05,#FAF7F2)
}
.cap-brand strong {
    color:var(--coral-deep,#D85F45);
    font-weight:700
}
.cap-brand a {
    color:var(--ink-60,#6E6058);
    text-decoration:underline
}
.cap-brand-shield {
    display:inline-grid;
    place-items:center
}
.ph-err {
    font-size:.82rem;
    color:#C44A38;
    background:#FFEFEC;
    padding:10px 12px;
    border-radius:10px;
    margin:10px 0;
    border-left:3px solid #C44A38
}
.ph-info {
    font-size:.82rem;
    color:#2C7A4D;
    background:#EAF7EE;
    padding:10px 12px;
    border-radius:10px;
    margin:10px 0;
    border-left:3px solid #5BC97D
}
.ph-foot {
    margin-top:14px;
    text-align:center;
    font-size:.82rem;
    color:var(--ink-60,#6E6058);
    letter-spacing:.04em
}
.ph-foot a {
    color:var(--coral-deep);
    font-weight:700;
    text-decoration:underline
}
.ph-cta-stack {
    margin-top:18px;
    display:flex;
    flex-direction:column;
    background:#fff0
}
.ph-cta-big {
    width:100%;
    background:var(--coral,#F4866D);
    color:#fff;
    border:none;
    padding:18px 24px;
    border-radius:12px;
    font-size:1.02rem;
    font-weight:800;
    letter-spacing:.12em;
    cursor:pointer;
    box-shadow:0 8px 22px rgb(217 88 74 / .32);
    transition:transform .12s,box-shadow .12s,background .12s
}
.ph-cta-big:hover {
    transform:translateY(-1px);
    box-shadow:0 12px 28px rgb(217 88 74 / .4);
    background:var(--coral-deep,#D85F45)
}
.ph-cta-big:active {
    transform:translateY(0)
}
.ph-cta-big.disabled,.ph-cta-big:disabled {
    background:var(--peach-200,#F8D5C5);
    color:#fff;
    box-shadow:none;
    cursor:not-allowed;
    transform:none;
    opacity:.85
}
.ph-num {
    white-space:nowrap
}
.ph-back-link {
    align-self:center;
    margin-top:12px;
    background:#fff0;
    border:none;
    color:var(--ink-50,#8A7B72);
    font-size:.8rem;
    cursor:pointer;
    padding:4px 10px;
    border-radius:6px
}
.ph-back-link:hover {
    color:var(--coral-deep,#D85F45)
}
/* ── Single-input OTP (iOS autocomplete="one-time-code" native autofill) ── */
.ph-otp-single {
    display:block;
    width:100%;
    border:2px solid var(--line);
    border-radius:16px;
    background:#fff;
    font-family:'Fraunces',serif;
    font-size:2rem;
    font-weight:600;
    letter-spacing:.55em;
    text-indent:.4em;
    text-align:center;
    color:var(--ink);
    padding:14px 0;
    outline:none;
    transition:border-color .15s, box-shadow .15s, background .15s;
    caret-color:var(--coral);
    -webkit-text-security:none
}
.ph-otp-single::placeholder {
    letter-spacing:.4em;
    text-indent:.4em;
    color:var(--ink-30,#ccc);
    font-size:1.2rem
}
.ph-otp-single:focus {
    border-color:var(--coral);
    box-shadow:0 0 0 4px rgb(255 107 90 / .18)
}
.ph-otp-single.has {
    border-color:var(--coral-soft);
    background:linear-gradient(180deg,#fff 0%,var(--peach-50) 100%);
    color:var(--coral-deep)
}
.ph-otp-single.err {
    border-color:#E8A23A;
    animation:otpShake .35s
}
@keyframes otpShake {
    0%,100% { transform:translateX(0) }
    25%      { transform:translateX(-6px) }
    75%      { transform:translateX(6px) }
}
.ph-resend {
    margin-top:6px;
    text-align:center;
    font-size:.82rem;
    color:var(--ink-70)
}
.ph-cooldown {
    color:var(--ink-50);
    font-variant-numeric:tabular-nums
}
.ph-demo-hint {
    margin:14px 0 4px;
    padding:10px 12px;
    background:var(--peach-50);
    border:1px dashed var(--coral-soft);
    border-radius:12px;
    font-size:.76rem;
    color:var(--ink-70);
    display:flex;
    align-items:center;
    gap:8px
}
.ph-demo-hint strong {
    color:var(--coral-deep);
    font-family:'Fraunces',serif;
    font-style:italic;
    font-size:.96rem;
    letter-spacing:.04em;
    font-variant-numeric:tabular-nums
}
.ph-demo-pill {
    background:var(--coral);
    color:#fff;
    font-weight:800;
    font-size:.58rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    padding:3px 8px;
    border-radius:999px;
    flex-shrink:0
}
.btn-arrow {
    display:inline-block;
    margin-left:8px;
    transition:transform .2s
}
.btn-primary:hover .btn-arrow {
    transform:translateX(3px)
}
.build-orb-portrait.has-portrait {
    padding:0;
    overflow:hidden
}
.build-orb-portrait .orb-portrait-img {
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:50%;
    display:block;
    position:relative;
    z-index:1;
    animation:orbPortraitReveal .55s var(--ease)
}
.build-orb-portrait.revealing::before {
    animation:portraitSpin 4s linear infinite,orbHaloFade 1s ease-out forwards
}
@keyframes orbHaloFade {
    to {
        opacity:.35
    }
}
@keyframes orbPortraitReveal {
    from {
        opacity:0;
        transform:scale(.85);
        filter:blur(8px)
    }
    to {
        opacity:1;
        transform:scale(1);
        filter:blur(0)
    }
}
.congrats-overlay {
    position:absolute;
    inset:0;
    z-index:50;
    background:rgb(43 29 27 / .55);
    backdrop-filter:blur(6px);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    animation:congratsBgIn .35s var(--ease)
}
@keyframes congratsBgIn {
    from {
        opacity:0
    }
    to {
        opacity:1
    }
}
.congrats-card {
    background:linear-gradient(180deg,#fff 0%,#FFFAF6 100%);
    border-radius:26px;
    padding:56px 28px 24px;
    width:100%;
    max-width:320px;
    position:relative;
    text-align:center;
    box-shadow:0 30px 80px rgb(41 38 27 / .4),0 0 0 1px var(--peach-200),inset 0 1px 0 #fff;
    animation:congratsCardIn .55s cubic-bezier(.34,1.56,.64,1)
}
@keyframes congratsCardIn {
    from {
        opacity:0;
        transform:translateY(30px) scale(.92)
    }
    to {
        opacity:1;
        transform:translateY(0) scale(1)
    }
}
.congrats-portrait {
    position:absolute;
    top:-44px;
    left:50%;
    transform:translateX(-50%);
    width:92px;
    height:92px;
    border-radius:50%;
    background:linear-gradient(135deg,#FFE9DD,var(--peach-200));
    border:4px solid #fff;
    box-shadow:0 8px 24px rgb(217 88 74 / .25);
    display:grid;
    place-items:center;
    overflow:hidden
}
.congrats-portrait img {
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:50%;
    display:block
}
.congrats-wave {
    position:absolute;
    bottom:-4px;
    right:-4px;
    width:32px;
    height:32px;
    display:grid;
    place-items:center;
    background:#fff;
    border-radius:50%;
    box-shadow:0 4px 12px rgb(0 0 0 / .15);
    animation:congratsWave 2s ease-in-out infinite
}
@keyframes congratsWave {
    0%,100% {
        transform:rotate(0)
    }
    20% {
        transform:rotate(-15deg)
    }
    40% {
        transform:rotate(15deg)
    }
    60% {
        transform:rotate(-10deg)
    }
    80% {
        transform:rotate(10deg)
    }
}
.congrats-eyebrow {
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:.65rem;
    font-weight:800;
    color:#2C7A4D;
    letter-spacing:.14em;
    text-transform:uppercase;
    margin-bottom:6px
}
.congrats-dot {
    width:6px;
    height:6px;
    border-radius:50%;
    background:#5BC97D;
    box-shadow:0 0 0 0 rgb(91 201 125 / .6);
    animation:smsPulse 1.6s ease-out infinite
}
.congrats-title {
    font-family:'Fraunces',serif;
    font-weight:600;
    font-size:2.6rem;
    line-height:1;
    letter-spacing:-.02em;
    margin:0 0 16px;
    color:var(--ink)
}
.congrats-title .em {
    background:linear-gradient(135deg,var(--coral),var(--coral-deep));
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:#fff0;
    font-style:italic
}
.congrats-lead {
    font-size:1rem;
    line-height:1.4;
    color:var(--ink);
    font-weight:600;
    margin:0 0 8px
}
.congrats-lead .em {
    color:var(--coral-deep);
    font-style:italic;
    font-family:'Fraunces',serif;
    font-weight:600
}
.congrats-sub {
    font-size:.88rem;
    color:var(--ink-70);
    margin:0 0 16px;
    line-height:1.4
}
.congrats-cta-line {
    font-size:1rem;
    line-height:1.3;
    color:var(--ink);
    font-weight:500;
    margin:0 0 22px
}
.congrats-cta-line .em {
    font-family:'Fraunces',serif;
    font-style:italic;
    font-weight:600;
    color:var(--coral-deep)
}
.congrats-ok {
    display:inline-block;
    padding:12px 48px;
    background:linear-gradient(135deg,var(--coral) 0%,var(--coral-deep) 100%);
    color:#fff;
    font:inherit;
    font-weight:700;
    font-size:.9rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    border:none;
    border-radius:14px;
    cursor:pointer;
    box-shadow:0 8px 22px rgb(217 88 74 / .36);
    transition:transform .15s,box-shadow .15s
}
.congrats-ok:hover {
    transform:translateY(-1px);
    box-shadow:0 12px 28px rgb(217 88 74 / .42)
}
.congrats-foot {
    margin-top:16px;
    font-size:.68rem;
    color:var(--ink-50);
    letter-spacing:.04em
}
.congrats-foot strong {
    color:var(--coral-deep);
    font-variant-numeric:tabular-nums;
    font-weight:700
}

@media (max-width:767px) {
    .ph-orb { width: 66px; height: 66px; margin-bottom: 14px; }
    .ph-recap { border: 1px solid var(--line); border-radius: 10px; padding: 6px 16px; }
    .ph-recap-shield svg { width: 28px; height: 28px;}
    .ph-cta-big { padding: 14px 14px; border-radius: 10px; font-size: 14px; font-weight: 600;}
    .screen, .phone.is-desktop .screen { border-radius: 22px; }
    .s, .phone.is-desktop .s { padding: 16px 20px 20px; }
    .field input, .field textarea, .field select { border: 1.5px solid var(--line); border-radius: 8px; padding: 9px 14px; font-size: 14px;} 
    .phone.is-desktop .screen::before { border-radius: 12px;}
    .ph-sms-orb { width: 66px; height: 66px;}
    .ph-foot { margin-top: 16px; font-size: 10px; }

    .s { overflow: unset;}
    .field .select2-container--default .select2-selection--single { min-height: 40px; padding: 8px 10px; font-size: 14px; border-radius: 8px; }
    .field .select2-container--default .select2-selection--single .select2-selection__arrow { right: 5px;}
    .field input.ph-otp-single { font-size:1.6rem; letter-spacing:.45em; padding:12px 0; }
    .phone.is-desktop .field-row.thirds { grid-template-columns: 1fr;}
    .field-row { grid-template-columns: 1fr;}
    .btn { padding: 12px 17px !important; border-radius: 10px; font-size: 14px; }
    .chat-body { min-height:460px;}
    .field.digits { padding:0 0px; }
    .ph-demo-hint-new { padding: 0 0px; }
    .ph-phone { border-radius: 8px;}
}