/* RemoteAdmin SDS: public pages (landing, account, status). Tokens shared with admin.css. */
:root{--bg:#0a0a0b;--surface:#19191b;--white:#fafafa;--muted:#a1a1a7;--red:#ff424d;--button:#d62633;--button-hover:#e02b37;--ok:#4cc38a;--warn:#f0b44c;--line:rgba(255,255,255,.13)}
*,*::before,*::after{box-sizing:border-box}
/* :where keeps the reset at zero specificity, so a single class can set a margin. */
:where(h1,h2,h3,p,figure,dl,dd,ul,ol,fieldset){margin:0}
:where(ul,ol){padding:0;list-style:none}
html{background:var(--bg)}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;position:relative;isolation:isolate;background:var(--bg);color:var(--white);font:400 15px/1.65 "Manrope",Arial,sans-serif;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.08;background-image:url("../img/grain.svg")}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--white);outline-offset:5px}
main{flex:1 0 auto}
.shell{width:min(1360px,calc(100% - 96px));margin-inline:auto}
.wordmark{color:var(--white);white-space:nowrap}
.wordmark>span{color:var(--red)}
.eyebrow{display:flex;align-items:center;gap:12px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.eyebrow::before{content:"";width:22px;height:2px;flex:0 0 auto;background:var(--red)}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.notice{margin-top:24px;padding:12px 16px;border:1px solid var(--line);border-left:3px solid var(--ok);border-radius:4px;font-size:13px}
.notice.error{border-left-color:var(--red)}

/* Header and footer */
.site-header{border-bottom:1px solid var(--line)}
.header-inner{min-height:86px;display:flex;align-items:center;gap:40px}
.brand{display:inline-flex;align-items:center;gap:11px;font-size:22px;font-weight:800;letter-spacing:-.065em}
.brand svg{width:25px;height:25px;color:var(--red)}
.header-nav{display:flex;gap:32px;margin-left:auto;font-size:13px;font-weight:500;color:var(--muted)}
.header-nav a:hover,.login-link:hover{color:var(--red)}
.login-link{display:inline-flex;align-items:center;gap:14px;min-height:44px;padding:10px 0 10px 30px;border-left:1px solid var(--line);font-size:13px;font-weight:700}
.login-link svg{width:16px;height:16px}
.user-chip{display:inline-flex;align-items:center;gap:12px;min-height:44px;padding-left:30px;border-left:1px solid var(--line);font-size:13px;font-weight:700}
.user-chip small{display:block;color:var(--muted);font-weight:500;font-size:11px;line-height:1.2}
.avatar{width:30px;height:30px;flex:0 0 auto;border-radius:50%;background:#2a2a2d;display:grid;place-items:center;font-size:12px;font-weight:800;color:var(--red)}
.site-footer{padding-block:30px 35px}
.site-footer.ruled{border-top:1px solid var(--line);color:var(--muted);font-size:11px}
.footer-inner{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:40px;color:var(--muted);font-size:11px}
.footer-info>p:first-child{color:var(--white)}
.footer-info>p+p{margin-top:5px;font-size:10px}
.footer-note{font-size:10px;line-height:1.8}

/* Buttons */
.button{min-height:54px;display:inline-flex;align-items:center;justify-content:space-between;gap:36px;padding:15px 23px;border:1px solid transparent;border-radius:4px;background:var(--button);color:#fff;font-size:13px;font-weight:700;transition:background .2s,transform .25s}
.button:hover{background:var(--button-hover);transform:translateY(-2px)}
.button svg{width:20px;height:20px;flex:0 0 auto}
.text-link{display:inline-flex;align-items:center;gap:14px;padding-block:9px;font-size:13px;font-weight:600;border-bottom:1px solid #555}
.text-link:hover{color:var(--red);border-color:var(--red)}
.ghost{min-height:44px;display:inline-flex;align-items:center;padding:10px 18px;border:1px solid var(--line);border-radius:4px;background:transparent;font-size:12px;font-weight:700}
.ghost:hover{border-color:#666}
.ghost.danger{color:var(--red);border-color:rgba(255,66,77,.4)}

/* Landing: hero and carousel */
.hero{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.24fr);grid-template-areas:"copy visual";column-gap:clamp(44px,6vw,96px);row-gap:48px;align-items:center;padding-top:72px;padding-bottom:26px}
.hero-copy{grid-area:copy;min-width:0}
.hero-title{margin:24px 0 27px;font-size:clamp(64px,7.4vw,118px);font-weight:800;line-height:.93;letter-spacing:-.085em}
.hero-title>span{display:block}
.hero-title .admin{color:var(--red)}
.hero-intro{max-width:400px;font-size:clamp(20px,1.75vw,27px);font-weight:500;line-height:1.4;letter-spacing:-.045em}
.hero-description{max-width:365px;margin-top:16px;color:var(--muted);font-size:14px;line-height:1.8}
.hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:22px;margin-top:30px}
.product-view{grid-area:visual;min-width:0}
.preview-label{min-height:44px;display:flex;align-items:center;justify-content:space-between;margin-bottom:15px;color:var(--muted);font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.showcase{position:relative;padding-top:15px;isolation:isolate}
.showcase::before{content:"";position:absolute;z-index:-1;top:19px;right:24px;bottom:10px;left:-13px;border-radius:5px;background:#cf2633;transform:rotate(-3.5deg)}
.screen{position:relative;padding:6px;border:1px solid #49494c;border-radius:7px;background:#222224;box-shadow:0 26px 55px -20px rgba(0,0,0,.8)}
.screen img{display:block;width:100%;height:auto;aspect-ratio:1391/697;border-radius:3px;background:#202020}
.carousel-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:29px}
.slide-caption p{font-size:13px;font-weight:600}
.slide-caption span{display:block;margin-top:4px;color:var(--muted);font-size:11px}
.carousel-controls{display:flex;align-items:center;gap:7px}
.slide-count{margin-right:9px;color:var(--muted);font-size:11px;font-variant-numeric:tabular-nums;white-space:nowrap}
.slide-count b{color:var(--white);font-weight:600}
.icon-button{width:44px;height:44px;display:grid;place-items:center;padding:0;border:1px solid var(--line);border-radius:50%;background:transparent}
.icon-button:hover{background:#272729;border-color:#666}
.icon-button svg{width:17px;height:17px}
.slide-selectors{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:13px;margin-top:26px}
.slide-selector{display:flex;flex-direction:column;gap:7px;min-height:53px;padding:12px 0 0;border:0;border-top:2px solid #3e3e42;background:none;text-align:left;color:var(--muted);font-size:10px}
.slide-selector>span{font-size:9px;font-variant-numeric:tabular-nums}
.slide-selector:hover{color:var(--white);border-color:#949498}
.slide-selector.on{color:var(--white);border-color:var(--red)}
.slide-selector.on>span{color:var(--red)}

/* Landing: features and detail blocks */
.features{padding-block:116px 30px}
.section-heading{display:grid;grid-template-columns:1.3fr .7fr;align-items:end;gap:60px;margin-top:27px;margin-bottom:58px}
.section-heading h2{font-size:clamp(34px,4.2vw,62px);font-weight:600;line-height:1.12;letter-spacing:-.06em}
.section-heading>p{max-width:330px;justify-self:end;color:var(--muted);font-size:14px;line-height:1.85}
.feature-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:68px}
.feature{min-width:0;padding-block:30px 38px;border-top:1px solid var(--line)}
.feature.wide{grid-column:1/-1}
.feature-heading{display:flex;align-items:baseline;gap:20px}
.feature-number{color:var(--red);font-size:11px;font-weight:600}
.feature h3{font-size:24px;font-weight:600;line-height:1.3;letter-spacing:-.045em}
.feature>p{max-width:490px;margin-top:17px;color:var(--muted);font-size:13px;line-height:1.85}
.tool-list{display:grid;grid-template-columns:1fr 1fr;column-gap:20px;row-gap:11px;margin-top:25px}
.feature.wide .tool-list{grid-template-columns:repeat(4,minmax(0,1fr))}
.tool-list li{display:flex;align-items:baseline;gap:10px;font-size:12px}
.tool-list li::before{content:"";width:4px;height:4px;flex:0 0 auto;position:relative;top:-2px;background:#7d7d83}
.map-story{position:relative;display:grid;grid-template-columns:minmax(0,.68fr) minmax(0,1.32fr);align-items:center;gap:42px;margin-top:46px;padding:42px;border:1px solid var(--line);border-radius:5px;background:rgba(255,255,255,.025)}
.map-story::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;border-radius:5px 0 0 5px;background:var(--red)}
.map-story.flip{grid-template-columns:minmax(0,1.32fr) minmax(0,.68fr)}
.map-copy .eyebrow{font-size:10px}
.map-copy .eyebrow::before{display:none}
.map-copy h3{margin-top:21px;font-size:clamp(28px,3.2vw,45px);font-weight:600;line-height:1.13;letter-spacing:-.055em}
.map-copy p{max-width:285px;margin-top:18px;color:var(--muted);font-size:13px;line-height:1.8}
.map-image{padding:5px;border:1px solid #464649;border-radius:5px;background:#222224;box-shadow:0 20px 40px #0005}
.map-image img{display:block;width:100%;height:auto;border-radius:2px}

/* Landing: download */
.download{display:grid;grid-template-columns:1fr 1fr;gap:70px;margin-top:116px;padding-block:55px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.download h2{margin-top:22px;font-size:clamp(38px,4.5vw,64px);font-weight:600;line-height:1.09;letter-spacing:-.065em}
.download-copy>p.lead{max-width:380px;margin-top:20px;color:var(--muted);font-size:13px}
.notes{margin-top:34px;max-width:440px}
.notes h3{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.notes ul{margin-top:10px}
.notes li{display:flex;gap:10px;padding:10px 0;border-top:1px solid var(--line);font-size:12px}
.notes li::before{content:"+";color:var(--red);font-weight:700}
.download-panel{min-width:0;align-self:center}
.release-heading{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:15px;padding-bottom:24px}
.release-heading .wordmark{font-size:26px;font-weight:800;letter-spacing:-.065em}
.release-label{font-size:10px;color:var(--muted)}
.release-label b{color:var(--white);font-weight:600}
.release-specs{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:0 0 28px;padding-top:22px;border-top:1px solid var(--line)}
.release-specs dt{color:var(--muted);font-size:10px}
.release-specs dd{margin:7px 0 0;font-size:12px;font-weight:500}
.download-panel .button{width:100%;margin:32px 0 24px}
.alt-links{display:flex;justify-content:space-between;gap:12px;margin-top:14px;font-size:11px;color:var(--muted)}
.alt-links a{color:var(--white);text-decoration:underline;text-underline-offset:3px}
.access-note{margin-top:13px;color:var(--muted);font-size:11px;text-align:center}
.access-note a{color:var(--white);text-decoration:underline;text-underline-offset:3px}
.channels{margin-top:26px}
.channels h3{display:flex;justify-content:space-between;min-height:40px;align-items:center;color:var(--muted);font-size:12px;font-weight:500}
.channels li{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:13px 0;border-top:1px solid var(--line);font-size:11px}
.channels li>span:last-child{color:var(--muted)}
.channels .current{color:var(--red)}

/* Account */
.page-head{display:grid;grid-template-columns:1fr auto;align-items:end;gap:40px;padding-block:72px 40px;border-bottom:1px solid var(--line)}
.page-head h1{margin-top:22px;font-size:clamp(44px,5vw,72px);font-weight:700;line-height:1;letter-spacing:-.07em}
.identity{display:flex;align-items:center;gap:16px}
.identity .avatar{width:52px;height:52px;font-size:20px}
.identity p{font-size:13px;color:var(--muted)}
.identity b{display:block;color:var(--white);font-size:16px}
.account-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:68px;padding-block:48px 80px}
.block h2{display:flex;align-items:baseline;gap:16px;font-size:24px;font-weight:600;letter-spacing:-.045em}
.block h2 span{color:var(--red);font-size:11px;font-weight:600}
.block>p{margin-top:10px;color:var(--muted);font-size:13px;max-width:460px}
.rows{margin-top:24px}
.rows li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;padding:16px 0;border-top:1px solid var(--line)}
.rows li:last-child{border-bottom:1px solid var(--line)}
.rows b{font-size:14px;font-weight:600}
.rows small{display:block;color:var(--muted);font-size:12px}
.rows .empty{color:var(--muted);font-size:13px}
.tag{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.tag.on{color:var(--red)}
.foot-actions{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap}
.foot-actions form{display:contents}

/* Status pages (403, OAuth error, 404) */
.status-main{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:80px;align-items:center;padding-block:90px}
.status-main .code{font-size:clamp(120px,16vw,230px);font-weight:800;line-height:.8;letter-spacing:-.09em;color:var(--red);user-select:none}
.status-main h1{margin-top:22px;font-size:clamp(40px,4.6vw,66px);font-weight:700;line-height:1.05;letter-spacing:-.065em}
.status-main .lead{max-width:480px;margin-top:20px;color:var(--muted);font-size:14px;line-height:1.8}
.status-main .detail{margin-top:26px;max-width:480px;padding:16px 18px;border:1px solid var(--line);border-left:3px solid var(--red);border-radius:4px;font-size:12px;color:var(--muted)}
.status-main .actions{display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin-top:32px}
.status-main .button{gap:30px}

@media (max-width:880px){
  .hero,.feature-grid,.map-story,.map-story.flip,.download,.section-heading,.account-grid,.page-head,.status-main{grid-template-columns:1fr}
  .hero{grid-template-areas:"copy" "visual"}
  .header-nav{display:none}
  .slide-selectors{grid-template-columns:repeat(3,minmax(0,1fr))}
  .feature.wide .tool-list{grid-template-columns:1fr 1fr}
  .footer-inner{grid-template-columns:1fr}
  .section-heading>p{justify-self:start}
  .status-main{gap:30px}
  .status-main .code{order:-1}
  .map-story.flip .map-image{order:2}
}
@media (max-width:600px){
  .shell{width:calc(100% - 32px)}
  .tool-list,.feature.wide .tool-list{grid-template-columns:1fr}
  .release-specs{grid-template-columns:1fr}
  .map-story{padding:24px}
  .header-inner{gap:16px}
  .login-link,.user-chip{padding-left:16px}
}