.appearance-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:24px 0}.appearance-controls label{display:flex;flex-direction:column;gap:8px;font-size:12px;font-weight:600;color:#526171}.appearance-controls select,.appearance-controls input{width:100%;min-width:0;min-height:46px;border:1px solid #dbe1e7;border-radius:10px;background:#fff;padding:9px;color:#20313f;font:inherit}.appearance-controls input[type=color]{padding:5px;cursor:pointer}.appearance-controls select{font-size:16px}.demo-colors{flex-wrap:wrap}.demo-colors button{flex-shrink:0}
.phone,.demo-card{--card-color:#152335;--card-ink:#1c2c40;--card-size:16px;--card-font:Manrope,sans-serif;--card-weight:600;background:linear-gradient(150deg,#fff 0%,#f4f6fa 70%,#eef2f6 100%);background:linear-gradient(145deg,#fff 15%,color-mix(in srgb,var(--card-color) 5%,white) 75%,color-mix(in srgb,var(--card-color) 10%,white));box-shadow:0 28px 60px #15233518,0 2px 6px #15233508;border:1px solid #e4e9ee}
.phone .cover,.demo-card .demo-cover{position:relative;isolation:isolate;background-color:var(--card-color);background-image:radial-gradient(ellipse at 12% 0%,#ffffff35,transparent 60%),radial-gradient(ellipse at 95% 100%,#00000055,transparent 70%),linear-gradient(120deg,transparent 30%,#ffffff10 50%,transparent 65%);color:#fff}
.phone .cover:before,.demo-cover:before{content:'';position:absolute;width:300px;height:300px;inset:-210px auto auto -40px;border:1px solid #ffffff28;border-radius:50%;pointer-events:none}.phone .cover:after,.demo-cover:after{content:'';position:absolute;width:300px;height:300px;inset:auto -140px -210px auto;border:1px solid #ffffff35;border-radius:50%;pointer-events:none}.demo-cover>*{z-index:1;position:relative}
.phone .profilebody,.demo-card .demo-card-body{font-family:var(--card-font);color:var(--card-ink);font-size:var(--card-size);font-weight:var(--card-weight)}
.phone .profilebody h3,.demo-card h3{font-family:var(--card-font);font-size:calc(var(--card-size) + 10px);font-weight:var(--card-weight);color:var(--card-ink);line-height:1.25;letter-spacing:-.6px}
.phone .profilebody .job,.phone .profilebody .company,.phone .profilebody .bio,.phone .profilebody .bankdetail,.phone .profilebody .plink,.demo-card [data-demo-title],.demo-card [data-demo-company],.demo-card [data-demo-bio],.demo-card .demo-contact-list span{font-family:var(--card-font);font-size:var(--card-size);font-weight:var(--card-weight);color:var(--card-ink);line-height:1.6}
.phone .profileimage,.demo-avatar{box-shadow:0 8px 24px #14233525;border:5px solid white}.phone .profilenav{background:#ffffffa6;border:1px solid #ffffff;border-radius:15px}.phone .profilebody .btn.primary,.demo-save-look{background:var(--card-color);color:white;border:0;box-shadow:0 8px 20px #15233518}.phone .powered,.demo-card-footer{border-top:1px solid #15233512;padding-top:22px}.phone .contactrow a{background:#ffffffa6;box-shadow:0 3px 12px #15233508;border:1px solid #fff}
.logointro{background:radial-gradient(ellipse at 50% 20%,#284b59,#101d29 75%);color:#fff}.logointro>div{animation:logoReveal 1.2s ease both}.logointro img{filter:drop-shadow(0 10px 25px #00000030)}.logointro .btn{background:#ffffff14;border:1px solid #ffffff35;color:white}.land-header .land-brand{animation:logoReveal .8s ease both}
@keyframes logoReveal{from{opacity:0;transform:translateY(12px) scale(.94);filter:blur(5px)}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}
@media(max-width:420px){.appearance-controls{gap:12px}.appearance-controls label{font-size:11px}.phone .profilebody,.demo-card .demo-card-body{padding-left:20px;padding-right:20px}}
.demo-card .demo-cover{height:160px;padding:22px 24px 50px;align-items:center}.demo-cover [data-demo-logo]:empty{display:none}.demo-cover [data-demo-logo]:not(:empty),.phone .coverbrand:has(.companylogo){width:min(210px,80%);height:78px;padding:10px 16px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid #ffffffb3;border-radius:14px;box-shadow:0 7px 20px #00000012}.phone .coverbrand:has(.companylogo){left:50%;right:auto;top:22px;transform:translateX(-50%)}.demo-card .demo-cover [data-demo-logo] img,.phone .coverbrand .companylogo{display:block;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;object-position:center;border-radius:0}.demo-cover [data-demo-brand][hidden]{display:none}
.phone,.demo-card{background:var(--card-bg,#f4f6fa)}.phone .cover,.publicview .phone .cover,.demo-card .demo-cover{height:200px;position:relative;padding:22px 24px 48px}.phone .coverbrand:has(.companylogo),.demo-cover [data-demo-logo]:not(:empty){width:calc(100% - 48px);height:118px;background:transparent;border:0;border-radius:0;box-shadow:none;padding:0;top:20px}.phone .coverbrand:has(.companylogo){left:50%;transform:translateX(-50%)}.demo-cover [data-demo-logo]:not(:empty){width:100%}.phone .coverbrand .companylogo,.demo-cover [data-demo-logo] img{filter:drop-shadow(0 2px 5px #00000018);object-fit:contain}.phone .cover .card-cover-image,.demo-card .demo-cover .card-cover-image{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;z-index:0}.demo-card .demo-cover .card-cover-image[hidden]{display:none}.phone .profilebody .powered,.demo-card-footer{color:var(--card-ink)}.demo-images{flex-wrap:wrap}
.phone .cover,.demo-card .demo-cover{background-image:url('graphite-cover-v19.png');background-size:cover;background-position:center;background-blend-mode:luminosity}.phone .cover:before,.phone .cover:after,.demo-card .demo-cover:before,.demo-card .demo-cover:after{display:none}.phone .coverbrand,.demo-cover [data-demo-logo],.demo-cover [data-demo-brand]{z-index:2}.phone .coverbrand .companylogo,.demo-cover [data-demo-logo] img{filter:drop-shadow(0 3px 7px #00000066)}.auth-story .story-copy h2{font-size:clamp(27px,3vw,38px);line-height:1.25}.auth-story .story-copy h2 em{display:inline-block;margin-top:8px}
@media(prefers-reduced-motion:reduce){.logointro>div,.land-header .land-brand{animation:none}}
/* Compact left-aligned branding on the sculpted graphite cover. */
.demo-card .demo-cover [data-demo-brand][hidden]{display:none}
.phone .coverbrand,.phone .coverbrand:has(.companylogo),.demo-card .demo-cover [data-demo-logo]:not(:empty),.demo-card .demo-cover [data-demo-brand]{position:absolute;top:24px;left:24px;right:auto;bottom:auto;transform:none;width:min(190px,58%);height:76px;padding:0;display:flex;align-items:flex-start;justify-content:flex-start;text-align:left}
.phone .coverbrand .companylogo,.demo-card .demo-cover [data-demo-logo] img{object-fit:contain;object-position:left top;width:100%;height:100%}