/* Shared design tokens: change these colors once to re-theme the public and admin pages. */
:root{
    --ink:#102234;
    --muted:#607080;
    --paper:#f5f7f2;
    --card:#fff;
    --lime:#c8f44d;
    --blue:#155eef;
    --red:#c62f42;
    --line:#dce2dc;
    --shadow:0 20px 50px rgba(16, 34, 52, .12)}
*{
    box-sizing:border-box}
body{
    margin:0;
    font-family:Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
    color:var(--ink);
    background:var(--paper)}
a{
    color:inherit}
/* .shell centers regular marketing and utility pages with readable side gutters. */
.shell{
    width:min(1120px, calc(100% - 32px));
    margin:auto}
.nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:22px 0}
.brand{
    font-weight:900;
    letter-spacing:-.04em;
    font-size:1.25rem;
    text-decoration:none}
.brand span{
    color:var(--blue)}
/* Buttons and button-like links share one style so forms and navigation feel consistent. */
.button, button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:10px;
    padding:12px 18px;
    background:var(--ink);
    color:white;
    font:inherit;
    font-weight:800;
    text-decoration:none;
    cursor:pointer}
.button.primary, button.primary{
    background:var(--blue)}
.button.lime{
    background:var(--lime);
    color:var(--ink)}
/* Landing-page hero: text on the left, signup form on the right on wide screens. */
.hero{
    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:64px;
    align-items:center;
    padding:72px 0 88px}
.eyebrow{
    text-transform:uppercase;
    letter-spacing:.15em;
    font-size:.78rem;
    font-weight:900;
    color:var(--blue)}
h1{
    font-size:clamp(2.8rem, 7vw, 5.8rem);
    line-height:.92;
    letter-spacing:-.075em;
    margin:18px 0 26px}
h2{
    font-size:clamp(1.8rem, 4vw, 3rem);
    letter-spacing:-.05em}
p{
    line-height:1.65;
    color:var(--muted)}
.lead{
    font-size:1.2rem;
    max-width:650px}
.signup, .card{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:18px;
    box-shadow:var(--shadow);
    padding:28px}
.signup h2{
    margin-top:0}
.field{
    display:grid;
    gap:7px;
    margin:14px 0}
.field label{
    font-weight:800;
    font-size:.9rem}
.field input, .field select{
    width:100%;
    padding:12px 13px;
    border:1px solid #cbd4d0;
    border-radius:9px;
    background:white;
    font:inherit}
.fine{
    font-size:.78rem}
.benefits{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:18px;
    padding-bottom:80px}
.benefit{
    padding:24px;
    border-top:3px solid var(--lime)}
.benefit strong{
    display:block;
    font-size:1.1rem}
.alert{
    padding:13px 16px;
    border-radius:9px;
    margin:16px 0;
    background:#e9f0ff}
.alert.error{
    background:#ffe9ec;
    color:#8d1d2e}
/* Rotator layout: a fixed top bar plus a full-height iframe for the selected website. */
.rotator{
    height:100vh;
    display:grid;
    grid-template-rows:auto 1fr;
    background:#0b1724}
.rotator-bar{
    display:grid;
    grid-template-columns:minmax(150px, 1fr) auto minmax(150px, 1fr);
    align-items:center;
    gap:16px;
    padding:10px 18px;
    background:#101f2e;
    color:white}
.rotator-meta{
    min-width:0}
.rotator-meta strong, .rotator-meta span{
    display:block;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis}
.rotator-meta span{
    font-size:.75rem;
    color:#a9bac9}
.rotator-actions{
    justify-self:end;
    display:flex;
    gap:8px}
.rotator-actions a, .rotator-actions button{
    font-size:.8rem;
    padding:9px 11px;
    background:#27394b}
.rotator-actions .rotator-cta{
    background:#fff200;
    color:#102234;
    box-shadow:0 0 0 3px rgba(255, 242, 0, .22);
    text-transform:uppercase;
    letter-spacing:.04em}
/* Banners are designed for the classic 468x60 ad slot used by this app. */
.banner{
    width:468px;
    height:60px;
    display:block;
    object-fit:cover;
    background:#26384a}
.site-frame{
    border:0;
    width:100%;
    height:100%;
    background:white}
.empty{
    display:grid;
    place-items:center;
    color:white}
/* Admin pages use a slightly narrower workspace to keep tables and forms scannable. */
.admin-wrap{
    width:min(1050px, calc(100% - 32px));
    margin:36px auto}
.admin-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px}
.grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:20px}
.table-card{
    overflow:auto}
.list{
    width:100%;
    border-collapse:collapse}
.list th, .list td{
    text-align:left;
    padding:12px;
    border-bottom:1px solid var(--line);
    vertical-align:middle}
.list th{
    font-size:.75rem;
    text-transform:uppercase;
    color:var(--muted)}
.inline{
    display:flex;
    gap:8px;
    align-items:center;
    flex-wrap:wrap}
.inline input{
    max-width:110px}
.danger{
    background:var(--red)}

.backup-card{
    margin-top:20px}
.backup-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
    align-items:start}
.stats{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:12px;
    margin:20px 0}
.stat{
    background:white;
    border:1px solid var(--line);
    border-radius:12px;
    padding:18px}
.stat strong{
    font-size:1.8rem;
    display:block}
.center-card{
    max-width:580px;
    margin:12vh auto}
.code{
    background:#102234;
    color:#d7e6f2;
    padding:14px;
    border-radius:9px;
    overflow:auto}
/* Small screens stack grids and move the banner beneath the rotator metadata/actions. */
@media (max-width: 800px) {
    .hero, .grid, .backup-actions{
    grid-template-columns:1fr}
.hero{
    gap:28px;
    padding-top:32px}
.benefits{
    grid-template-columns:1fr}
.rotator-bar{
    grid-template-columns:1fr auto}
.banner{
    grid-column:1/-1;
    grid-row:2;
    width:min(468px, 100%);
    height:auto;
    aspect-ratio:7.8;
    margin:auto}
.stats{
    grid-template-columns:repeat(2, 1fr)}
}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.nav-links{display:flex;align-items:center;gap:18px;flex-wrap:wrap}.nav-links a{font-weight:800;text-decoration:none}.button.secondary{background:white;color:var(--ink);border:1px solid var(--line)}.cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}.product-preview,.split{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center;padding:70px 0}.dashboard-preview{background:#0f2133;color:white;border-radius:20px;padding:22px;box-shadow:var(--shadow)}.preview-top{font-weight:900;margin-bottom:18px}.preview-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.preview-grid span,.preview-row{background:#18324d;border:1px solid #2b4a68;border-radius:12px;padding:14px}.preview-grid b{font-size:1.8rem;color:var(--lime)}.preview-row{display:grid;grid-template-columns:1fr 2fr auto;gap:12px;align-items:center;margin-top:12px}.preview-row meter{width:100%;height:16px}.six{grid-template-columns:repeat(3,1fr);padding-bottom:50px}.faq{padding:70px 0}.faq details{background:white;border:1px solid var(--line);border-radius:12px;padding:18px;margin:12px 0}.faq summary{font-weight:900;cursor:pointer}.final-cta{background:#102234;color:white;border-radius:24px;padding:42px;margin-bottom:50px}.final-cta p{color:#d6e1ea}.footer{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;padding:26px 0 42px}.footer a{color:var(--muted);font-weight:800}.hp{position:absolute;left:-10000px}:focus-visible{outline:4px solid #ffbf47;outline-offset:3px}@media (prefers-reduced-motion: reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}@media (max-width: 820px){.hero,.product-preview,.split{grid-template-columns:1fr;padding:44px 0}.benefits,.six{grid-template-columns:1fr}.rotator-bar{grid-template-columns:1fr;justify-items:start}.banner{width:100%;height:auto;max-width:468px}.rotator-actions{justify-self:start;flex-wrap:wrap}.nav{align-items:flex-start}.nav-links{justify-content:flex-end}}
.launch-path{margin:20px 0}.launch-head{display:flex;justify-content:space-between;gap:18px;align-items:start}.launch-path progress{width:100%;height:16px}.launch-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding-left:20px}.launch-list li{border:1px solid var(--line);border-radius:12px;padding:14px;background:#fff}.launch-list li.done{border-color:#9fcf48;background:#fbfff0}.celebration{border-left:4px solid var(--blue);background:#f2f6ff;border-radius:12px;padding:18px;margin-top:14px}.button.secondary,button.secondary{background:white;color:var(--ink);border:1px solid var(--line)}
@media(max-width:800px){.launch-list{grid-template-columns:1fr}.launch-head{display:block}}


/* Admin form system: applies consistently to core Admin, Home Base, and every MOD admin page. */
.admin-wrap form > label,
.admin-wrap form > p > label,
.admin-login form > label,
.homebase-admin form > label,
.homebase-admin form > p > label{
    display:grid;
    gap:7px;
    margin:14px 0;
    color:var(--ink);
    font-size:.9rem;
    font-weight:800}
.admin-wrap input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
.admin-wrap select,
.admin-wrap textarea,
.admin-login input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
.admin-login select,
.admin-login textarea,
.homebase-admin input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
.homebase-admin select,
.homebase-admin textarea{
    width:100%;
    min-height:46px;
    padding:11px 13px;
    border:1px solid #bac6c1;
    border-radius:10px;
    background:#fff;
    color:var(--ink);
    font:inherit;
    line-height:1.35;
    box-shadow:0 1px 2px rgba(16,34,52,.04);
    transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease}
.admin-wrap textarea,
.admin-login textarea,
.homebase-admin textarea{
    min-height:120px;
    resize:vertical}
.admin-wrap select,
.admin-login select,
.homebase-admin select{
    padding-right:38px;
    cursor:pointer}
.admin-wrap input::placeholder,
.admin-wrap textarea::placeholder,
.admin-login input::placeholder,
.admin-login textarea::placeholder,
.homebase-admin input::placeholder,
.homebase-admin textarea::placeholder{
    color:#87958f;
    opacity:1}
.admin-wrap input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):hover,
.admin-wrap select:hover,
.admin-wrap textarea:hover,
.admin-login input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):hover,
.admin-login select:hover,
.admin-login textarea:hover,
.homebase-admin input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):hover,
.homebase-admin select:hover,
.homebase-admin textarea:hover{
    border-color:#8fa19a}
.admin-wrap input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):focus,
.admin-wrap select:focus,
.admin-wrap textarea:focus,
.admin-login input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):focus,
.admin-login select:focus,
.admin-login textarea:focus,
.homebase-admin input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):focus,
.homebase-admin select:focus,
.homebase-admin textarea:focus{
    border-color:var(--blue);
    outline:3px solid rgba(21,94,239,.18);
    outline-offset:1px;
    box-shadow:0 0 0 1px var(--blue)}
.admin-wrap input:disabled,
.admin-wrap select:disabled,
.admin-wrap textarea:disabled,
.admin-login input:disabled,
.admin-login select:disabled,
.admin-login textarea:disabled,
.homebase-admin input:disabled,
.homebase-admin select:disabled,
.homebase-admin textarea:disabled{
    background:#edf1ed;
    color:#718078;
    cursor:not-allowed}
.admin-wrap input[type="checkbox"],
.admin-wrap input[type="radio"],
.admin-login input[type="checkbox"],
.admin-login input[type="radio"],
.homebase-admin input[type="checkbox"],
.homebase-admin input[type="radio"]{
    width:18px;
    height:18px;
    margin:0 7px 0 0;
    accent-color:var(--blue);
    vertical-align:-3px}
.admin-wrap input[type="file"],
.admin-login input[type="file"],
.homebase-admin input[type="file"]{
    padding:7px;
    background:#f8faf7}
.admin-wrap input[type="file"]::file-selector-button,
.admin-login input[type="file"]::file-selector-button,
.homebase-admin input[type="file"]::file-selector-button{
    margin-right:12px;
    border:0;
    border-radius:7px;
    padding:8px 12px;
    background:var(--ink);
    color:#fff;
    font:inherit;
    font-weight:800;
    cursor:pointer}
.admin-wrap .inline input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
.admin-wrap .inline select,
.homebase-admin .inline input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
.homebase-admin .inline select{
    width:auto;
    min-width:90px}
.admin-wrap form.card > button,
.admin-wrap form.card > .button,
.admin-login form.card > button,
.homebase-admin form.card > button{
    margin-top:8px}
.homebase-admin .card form:not(.inline) > input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
.homebase-admin .card form:not(.inline) > select,
.homebase-admin .card form:not(.inline) > textarea{
    margin:6px 0 12px}
.homebase-admin table{
    width:100%;
    border-collapse:collapse}
.homebase-admin th,
.homebase-admin td{
    padding:11px;
    border-bottom:1px solid var(--line);
    text-align:left;
    vertical-align:middle}
.homebase-admin th{
    color:var(--muted);
    font-size:.75rem;
    text-transform:uppercase}
@media(max-width:800px){
    .admin-wrap .inline input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    .admin-wrap .inline select,
    .homebase-admin .inline input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    .homebase-admin .inline select{
        width:100%;
        max-width:none}
}

/* Browser installer keeps a longer one-time setup form readable. */
.installer-card{max-width:760px;margin:5vh auto 10vh}
.installer-card h1{font-size:clamp(2.5rem,6vw,4.5rem)}
.installer-card h2{margin-top:32px}
.installer-card small{color:var(--muted);line-height:1.45}
.alert.success{background:#effbd7;color:#34520b}

/* Installed-site identity and styled package guides. */
.site-brand{display:grid;gap:2px;letter-spacing:0}
.site-brand>span{color:var(--ink);font-weight:900;font-size:1.15rem}
.site-brand small{color:var(--muted);font-size:.67rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.site-identity{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.site-identity strong{color:var(--ink);font-size:1rem;letter-spacing:0;text-transform:none}
.guide-shell{padding:30px 0 70px}
.guide-hero{max-width:780px;padding:48px 0}
.guide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.guide-link{display:grid;gap:8px;padding:18px;border:1px solid var(--line);border-radius:12px;background:#fff;text-decoration:none;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}
.guide-link:hover{transform:translateY(-2px);border-color:#9baea6;box-shadow:0 10px 24px rgba(16,34,52,.08)}
.guide-link strong{font-size:1.05rem}
.guide-link span{color:var(--muted);line-height:1.45}
.guide-document{max-width:900px;margin:20px auto 45px;padding:clamp(24px,5vw,54px)}
.guide-document h1{font-size:clamp(2.4rem,6vw,4.6rem);margin-top:12px}
.guide-document h2{margin-top:2.2rem;padding-top:.5rem;border-top:1px solid var(--line)}
.guide-document h3{margin-top:1.7rem}
.guide-document p,.guide-document li{line-height:1.72}
.guide-document li{margin:.45rem 0}
.guide-document code{background:#edf2ef;padding:.14em .35em;border-radius:5px}
.guide-document pre{background:#102234;color:#d7e6f2;padding:18px;border-radius:10px;overflow:auto}
.guide-document pre code{background:transparent;padding:0}
.guide-document hr{border:0;border-top:1px solid var(--line);margin:2rem 0}
.guide-aside{max-width:900px;margin:auto}
@media(max-width:760px){.guide-grid{grid-template-columns:1fr}.site-brand small{font-size:.6rem}}

/* Pro Rotator: clean delivery and compact scheduling controls. */
.rotator.no-top-bar{grid-template-rows:1fr}
.weekday-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.weekday-row label{display:inline-flex!important;align-items:center;gap:2px;margin:0!important;font-size:.78rem!important}