:root{
    --blue:#008dff;
    --blue-dark:#006cd8;
    --ink:#132237;
    --muted:#63728a;
    --line:#dce4ed;
    --panel:#fff;
    --navy:#0b121c;
    --radius:9px;
    font-family:Inter,"Segoe UI",Arial,sans-serif;
    color:var(--ink);
    font-synthesis:none}
*{
    box-sizing:border-box}
body{
    margin:0}
a{
    color:#087bdf;
    text-decoration:none}
a:hover{
    text-decoration:underline}
button,input,select,textarea{
    font:inherit}
button,a,input,select,textarea{
    outline-offset:4px}
button{
    cursor:pointer}
button:disabled{
    opacity:.5;
    cursor:not-allowed}
h1,h2,h3,p{
    margin-top:0}
h1{
    letter-spacing:-.045em;
    line-height:1.07}
h2{
    letter-spacing:-.035em;
    line-height:1.15}
p{
    line-height:1.65}
small,.subtle{
    color:var(--muted);
    font-size:13px;
    line-height:1.6}
.button{
    border:1px solid transparent;
    background:var(--blue);
    color:#fff;
    padding:14px 22px;
    border-radius:6px;
    font-weight:650;
    display:inline-flex;
    gap:24px;
    align-items:center;
    justify-content:center;
    min-height:46px;
    transition:background .15s,transform .15s}
.button:hover{
    background:var(--blue-dark);
    text-decoration:none;
    transform:translateY(-1px)}
.button.secondary{
    background:transparent;
    border-color:#cbd7e4;
    color:var(--ink)}
.button.danger{
    background:#b92e3b}
.button.compact{
    padding:9px 15px;
    min-height:38px;
    font-size:13px}
.button.full{
    width:100%}
.actions{
    display:flex;
    gap:12px;
    align-items:center;
    flex-wrap:wrap}
.text-button{
    background:none;
    border:0;
    padding:5px;
    color:#087bdf;
    font-size:13px}
.brand{
    display:inline-flex;
    align-items:center;
    gap:12px;
    color:inherit;
    font-weight:750;
    letter-spacing:1.2px;
    font-size:22px;
    white-space:nowrap}
.brand:hover{
    text-decoration:none}
.brand-mark{
    font-style:italic;
    color:#008dff;
    font-size:34px;
    font-weight:950;
    letter-spacing:-6px;
    padding-right:7px}
.brand small{
    display:block;
    font-size:10px;
    font-weight:450;
    letter-spacing:2px;
    margin-top:2px;
    color:#9eafc4}
.wrap{
    max-width:1320px;
    margin:auto;
    padding-left:38px;
    padding-right:38px}
.public-site{
    background:#0a111b;
    color:#eef4fb}
.public-header{
    height:96px;
    border-bottom:1px solid #1e2c3e;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 4.5%;
    gap:22px}
.public-header nav{
    display:flex;
    gap:28px;
    align-items:center;
    font-size:14px}
.public-header nav>a:not(.button){
    color:#b5c2d3}
.hero{
    display:grid;
    grid-template-columns:1.12fr 1fr;
    gap:72px;
    align-items:center;
    padding-top:94px;
    padding-bottom:104px}
.eyebrow{
    color:#6db9ff;
    font-size:11px;
    font-weight:700;
    letter-spacing:2.4px;
    display:block;
    margin-bottom:23px}
.hero h1{
    font-size:clamp(42px,4.5vw,70px);
    font-weight:660;
    margin-bottom:25px}
.hero h1 em{
    font-style:normal;
    color:#35a7ff}
.hero-copy>p{
    color:#98abc1;
    font-size:17px;
    max-width:510px;
    margin-bottom:30px}
.hero .secondary{
    border-color:#34445b;
    color:white}
.hero-details{
    display:flex;
    flex-wrap:wrap;
    gap:20px;
    font-size:11px;
    color:#89a0ba;
    margin-top:35px}
.hero-details span:before{
    content:'✓';
    color:#56b5ff;
    margin-right:7px}
.promise-strip{
    border-block:1px solid #203047;
    background:#0e1826}
.promise-strip>.wrap{
    padding-block:25px;
    display:flex;
    justify-content:space-between;
    color:#8da3bd;
    font-size:10px;
    font-weight:650;
    letter-spacing:1.5px}
.section{
    padding-top:90px;
    padding-bottom:90px}
.section-heading{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:60px;
    margin-bottom:35px}
.section-heading h2,.closing-panel h2{
    font-size:44px;
    font-weight:600}
.section-heading p{
    max-width:390px;
    color:#92a7bf}
.feature-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px}
.feature-grid article{
    border:1px solid #22324a;
    border-radius:9px;
    padding:30px;
    background:#0d1827}
.step-number{
    display:block;
    color:#4faaf4;
    font-size:13px;
    margin-bottom:35px}
.feature-grid h3{
    font-size:21px;
    font-weight:550}
.feature-grid p{
    color:#8fa4bd;
    font-size:14px;
    margin-bottom:0}
.closing-panel{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding-block:45px;
    background:#11243a;
    border:1px solid #244365;
    border-radius:12px;
    margin-bottom:80px}
.closing-panel p{
    color:#9fb4cb;
    max-width:640px;
    margin-bottom:0}
.public-footer{
    border-top:1px solid #213047;
    padding:50px 4.5%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:22px;
    font-size:12px}
.public-footer p{
    color:#90a4bb;
    margin:0}
.public-footer nav{
    display:flex;
    gap:18px}
.public-footer a{
    color:#a7b9ce}
.public-messages{
    max-width:1200px;
    margin:auto}
.notice{
    padding:14px 18px;
    border:1px solid var(--line);
    border-radius:7px;
    margin-bottom:20px;
    font-size:14px;
    background:white;
    color:var(--ink)}
.notice.success{
    background:#edf9f2;
    border-color:#b9e0c8;
    color:#216342}
.notice.error{
    background:#fff1f1;
    border-color:#efc4c5;
    color:#a42b35}
.notice.info{
    background:#edf5ff;
    border-color:#c5ddf5;
    color:#245b91}
.validation-errors:empty,.validation-summary-valid{
    display:none}
.validation-errors{
    color:#bb2837;
    background:#fff0f1;
    padding:12px 20px;
    border-radius:7px;
    margin-bottom:15px}
.validation-errors ul{
    padding-left:20px}
.auth-layout{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:100px;
    align-items:center;
    padding-block:70px}
.auth-intro h1{
    font-size:58px;
    font-weight:600}
.auth-intro p{
    color:#92a8c2;
    max-width:380px}
.onboarding-steps{
    list-style:none;
    padding:0;
    margin-top:50px}
.onboarding-steps li{
    padding:18px 0;
    color:#afc1d7;
    border-bottom:1px solid #26364b}
.onboarding-steps b{
    color:#4fb0ff;
    margin-right:20px;
    font-weight:500}
.auth-card{
    background:white;
    color:var(--ink);
    padding:38px;
    border-radius:12px;
    box-shadow:0 30px 70px #0003}
.auth-card h2{
    font-size:29px;
    margin-bottom:10px}
.auth-card h1{
    font-size:32px}
.auth-card>p{
    font-size:14px;
    color:var(--muted)}
.auth-card.solo{
    max-width:520px;
    margin:70px auto;
    min-height:280px}
.auth-card label,label.field{
    display:flex;
    flex-direction:column;
    gap:8px;
    font-size:13px;
    font-weight:550;
    margin-bottom:18px}
.form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px}
input:not([type=checkbox]),select,textarea{
    width:100%;
    background:#fff;
    border:1px solid #cbd6e3;
    border-radius:5px;
    padding:11px 12px;
    color:#24364c;
    min-height:43px}
input:focus,select:focus,textarea:focus{
    border-color:#008dff;
    box-shadow:0 0 0 3px #008dff15;
    outline:none}
textarea{
    min-height:110px;
    resize:vertical}
input[readonly]{
    background:#eef2f6}
input[type=checkbox]{
    accent-color:#008dff;
    width:17px;
    height:17px;
    flex-shrink:0}
.auth-card label.check,.check{
    display:flex;
    flex-direction:row;
    align-items:center;
    flex-wrap:wrap;
    gap:7px;
    font-size:12px;
    font-weight:400;
    margin-top:17px}
.optional{
    font-size:11px;
    font-weight:400;
    color:#7b8ca1}
.form-link{
    display:block;
    text-align:right;
    font-size:12px;
    margin-bottom:23px}
.form-footer{
    margin-top:25px;
    text-align:center;
    font-size:13px}
.setup-key{
    padding:14px;
    display:block;
    word-break:break-all;
    background:#eef5ff;
    font-size:16px;
    margin:24px 0}
.pricing-section h1{
    font-size:56px;
    max-width:700px}
.lead{
    font-size:18px;
    color:#9bafc7}
.pricing-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:25px;
    margin-top:45px;
    margin-bottom:25px}
.price-card{
    border:1px solid #28476b;
    background:#102137;
    padding:38px;
    border-radius:12px}
.price-card h2{
    font-size:27px;
    margin-top:22px}
.price{
    font-size:58px;
    letter-spacing:-2px;
    margin-block:25px}
.price small{
    font-size:12px;
    letter-spacing:0;
    display:block;
    color:#8ca4bf}
.price-card p{
    color:#a3b6cd;
    font-size:14px}
.price-card .secondary{
    color:#d4e4f6;
    border-color:#3b536d}
.renewal-card{
    background:#0d1725}
.check-list{
    list-style:none;
    padding:0;
    line-height:2.3;
    font-size:14px;
    margin-bottom:30px}
.check-list li:before{
    content:'✓';
    color:#38aeff;
    margin-right:10px}
.badge{
    display:inline-block;
    font-size:11px;
    padding:6px 10px;
    background:#eaf5ff;
    color:#076ac3;
    border-radius:5px;
    font-weight:600;
    white-space:nowrap}
.badge.good{
    background:#e7f6ed;
    color:#207a46}
.badge.warn{
    background:#fff3d8;
    color:#946311}
.badge.bad{
    background:#ffebed;
    color:#ac2e3b}
.badge.muted{
    background:#edf0f4;
    color:#68758b}
.legal{
    max-width:860px;
    min-height:500px}
.preserve-lines{
    white-space:pre-wrap;
    line-height:1.8}
.pricing-section>.subtle{
    color:#95abc4}
@media(max-width:1050px){
    .hero{
        gap:35px}
    .hero h1{
        font-size:49px}
    .auth-layout{
        gap:40px}
    .public-header nav{
        gap:15px}
    .public-footer{
        flex-wrap:wrap}
    .public-header{
        padding-inline:25px}
    .closing-panel{
        margin-inline:25px}
    .section-heading{
        gap:25px}
    .section-heading h2{
        font-size:36px}
}
@media(max-width:740px){
    .wrap{
        padding-inline:22px}
    .public-header{
        height:auto;
        padding:20px;
        align-items:start;
        gap:15px}
    .brand{
        font-size:17px}
    .brand-mark{
        font-size:28px}
    .public-header nav{
        gap:10px;
        flex-wrap:wrap;
        justify-content:end;
        font-size:12px}
    .public-header nav>a:first-child{
        display:none}
    .hero{
        grid-template-columns:1fr;
        padding-block:45px;
        gap:40px}
    .hero h1{
        font-size:44px}
    .hero-details{
        gap:12px}
    .promise-strip>.wrap{
        flex-wrap:wrap;
        gap:18px}
    .section{
        padding-block:50px}
    .section-heading{
        display:block}
    .section-heading h2,.closing-panel h2{
        font-size:34px}
    .feature-grid,.pricing-grid,.auth-layout{
        grid-template-columns:1fr}
    .closing-panel{
        display:block;
        padding:30px}
    .closing-panel .button{
        margin-top:25px}
    .auth-intro{
        display:none}
    .auth-layout{
        padding-block:35px}
    .auth-card{
        padding:26px}
    .auth-card.solo{
        margin:35px 20px}
    .pricing-section h1{
        font-size:42px}
    .form-grid{
        grid-template-columns:1fr}
    .public-footer{
        padding:30px 22px}
}
/* Photography anchors the public site;
account screens retain the readable light workspace. */
.hero-scene{
    background: linear-gradient(90deg,rgba(5,11,18,.93) 0%,rgba(5,11,18,.76) 34%,rgba(5,11,18,.1) 65%),url('/images/workshop-hero-v1.png') center/cover;
}
.hero-scene .hero{
    min-height:720px;
    padding-top:105px;
    padding-bottom:70px;
    align-items:center;
}
.hero-scene .hero-copy{
    max-width:660px;
}
.hero-scene h1{
    font-size:clamp(44px,4.6vw,72px);
    line-height:1.04;
    letter-spacing:-2.8px;
}
.hero-scene .hero-copy>p{
    color:#c4ccd5;
    max-width:500px;
}
.hero-caption{
    align-self:end;
    justify-self:end;
    padding:20px 28px;
    border-left:2px solid #0092ff;
    background:rgba(4,10,16,.65);
    backdrop-filter:blur(8px);
}
.hero-caption .eyebrow{
    font-size:10px;
}
.hero-caption p{
    margin:10px 0 0;
    color:#e1e7ef;
    line-height:1.6;
    font-size:14px;
}
.marketing-light{
    background:#f3f6fa;
    color:#142336;
}
.marketing-light h2,.marketing-light h3{
    color:#122235;
}
.marketing-light p{
    color:#607186;
}
.marketing-light .feature-grid article{
    background:white;
    border-color:#d8e1ea;
}
.marketing-light .eyebrow{
    color:#44617e;
}
.recipient-list{
    max-height:250px;
    overflow:auto;
    font-size:12px;
}
@media(max-width:760px){
    .hero-scene{
        background-position:65% center;
        background-image:linear-gradient(90deg,rgba(5,11,18,.9),rgba(5,11,18,.7)),url('/images/workshop-hero-v1.png');
    }
    .hero-scene .hero{
        padding-top:65px;
        padding-bottom:38px;
        min-height:650px;
        gap:35px;
    }
    .hero-scene h1{
        font-size:43px;
        letter-spacing:-1.8px;
    }
    .hero-caption{
        justify-self:start;
    }
}