/* Brand colors are taken from the orange and porcelain gradients in icon.svg. */
:root{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --amber:#FFB14B;
  --orange:#FF861F;
  --orange-hot:#FA5A0B;
  --orange-deep:#E7430B;
  --brand-text:#A83408;
  --paper:#FFFEFC;
  --surface:#FFFFFF;
  --soft:#FFF1DD;
  --line:#FFE7CC;
  --muted:#706258;
  --ink:#2B1B12;
  --brand-gradient:linear-gradient(145deg,var(--amber),var(--orange) 38%,var(--orange-hot) 76%,var(--orange-deep));
  --action-gradient:linear-gradient(135deg,var(--amber),var(--orange) 55%,var(--orange-hot));
  color:var(--ink);
  background:var(--paper);
}
*{box-sizing:border-box}body{margin:0}a{color:inherit;text-underline-offset:4px}button,input,select{font:inherit}button,.button{background:var(--action-gradient);color:var(--ink);border:0;border-radius:8px;padding:14px 22px;font-weight:650;cursor:pointer;text-decoration:none;display:inline-flex;justify-content:center;align-items:center;gap:18px;min-height:46px}button:hover,.button:hover{filter:brightness(.98)}button:disabled{opacity:.55;cursor:wait}
.secondary{background:var(--soft);color:var(--ink)}
.text-button{padding:8px 0;background:transparent;color:var(--ink)}:focus-visible{outline:3px solid var(--brand-text);outline-offset:4px}
.topbar{max-width:1240px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:24px 40px;border-bottom:1px solid var(--line);gap:24px}
.brand{display:flex;gap:10px;align-items:center;text-decoration:none;font-size:24px;font-weight:800;letter-spacing:-1px}
.brand-dot{color:var(--orange-hot)}nav{display:flex;align-items:center;gap:24px;font-size:14px}nav a{text-decoration:none}nav .compact{padding:10px 18px}main{max-width:1240px;margin:auto;padding:64px 40px 80px;min-height:72vh}h1{font-size:clamp(36px,5vw,66px);line-height:1.06;letter-spacing:-2.8px;font-weight:650;margin:16px 0 24px}h2{letter-spacing:-.8px;font-size:25px;margin:10px 0 16px}p{line-height:1.65}h1 span{color:var(--orange-deep)}
.eyebrow{font-size:11px;font-weight:750;letter-spacing:2px;color:var(--brand-text)}
.hero{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;min-height:440px}
.hero h1{font-size:clamp(45px,5.5vw,78px)}
.lead{font-size:19px;max-width:430px;color:var(--muted);margin-bottom:30px}
.muted{font-size:13px;color:var(--muted)}
.hero>.muted{max-width:360px}
.desktop-preview{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:10px;box-shadow:0 22px 80px #A3330614;transform:rotate(-2deg)}
.windowbar{display:flex;align-items:center;gap:5px;height:32px;padding:4px 8px}
.windowbar i{width:7px;height:7px;background:#FFD9AF;border-radius:50%}
.windowbar span{margin-left:auto;color:var(--muted);font-size:9px;letter-spacing:2px}
.preview-screen{padding:40px 28px 24px;min-height:330px;border-radius:8px;background:var(--brand-gradient)}
.preview-screen .eyebrow{color:var(--ink)}
.preview-screen h2{font-size:42px;line-height:1.1;color:var(--ink);letter-spacing:-2px;margin:24px 0 40px}
.preview-computer{display:flex;gap:10px;align-items:center;background:#FFFEFCF2;border:1px solid #fff8;padding:16px;border-radius:8px;font-size:14px;font-weight:650}
.preview-computer .muted{margin-left:auto;font-weight:400}
.status-dot{width:8px;height:8px;border-radius:50%;background:#3c8056;display:inline-block}
.steps{border-top:1px solid var(--line);margin-top:65px;padding-top:40px;display:grid;grid-template-columns:repeat(3,1fr);gap:48px}
.steps h2{font-size:20px}
.steps p{font-size:14px;color:var(--muted)}
.step-number{color:var(--brand-text);font-size:12px;font-weight:750}
.fineprint{margin-top:60px;padding:32px;background:linear-gradient(135deg,var(--soft),var(--paper));border-radius:10px}
.fineprint p{max-width:850px;font-size:14px;color:var(--muted)}
.auth-card{max-width:480px;margin:15px auto;background:var(--surface);border:1px solid var(--line);padding:36px;border-radius:12px}
.auth-card h1{font-size:40px;letter-spacing:-1.5px}
.auth-card button.is-loading{opacity:1;gap:10px;cursor:progress}
.auth-card button.is-loading::before{content:"";display:inline-block;flex:0 0 16px;width:16px;height:16px;border:2px solid #2B1B1240;border-top-color:currentColor;border-radius:50%;animation:signin-spin .8s linear infinite}
@keyframes signin-spin{to{transform:rotate(360deg)}}
.auth-card>p{color:var(--muted)}label{display:flex;flex-direction:column;gap:9px;font-size:13px;font-weight:600}input,select{width:100%;padding:13px 12px;border:1px solid #BBA08B;border-radius:6px;background:var(--surface);color:var(--ink);min-height:46px}form{display:grid;gap:18px}input[name=code]{font-size:28px;letter-spacing:14px;text-align:center}
.feedback{min-height:72px;padding:16px 0;font-size:14px;line-height:1.5;color:var(--brand-text);overflow-wrap:anywhere}
.feedback.success{color:#326a47}
.page-heading{margin-bottom:20px}
.card{background:var(--surface);border:1px solid var(--line);padding:28px;border-radius:12px;margin-bottom:28px}
.card p{font-size:14px;color:var(--muted)}
.setup{display:grid;grid-template-columns:1.2fr 1fr;gap:28px}#setup-next{grid-column:1/-1;border-top:1px solid var(--line);padding-top:16px}ol{padding-left:22px}li{font-size:14px;line-height:1.7;margin-bottom:12px}code,.mono{font-family:ui-monospace,monospace;font-size:12px;overflow-wrap:anywhere}code{background:var(--soft);border-radius:4px;padding:3px 6px;display:inline-block}
.section-heading{display:flex;justify-content:space-between;gap:20px;align-items:center;margin:35px 0 10px}
.device-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin:20px 0 30px}
.device-grid:empty{display:block}
.device{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:24px}
.device h3{margin:0 0 12px;font-size:22px}
.device .meta{color:var(--muted);font-size:13px;line-height:1.8;overflow-wrap:anywhere}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.actions button{font-size:12px;padding:10px 13px}
.pin-space{min-height:92px}
.pin{font-size:34px;font-family:ui-monospace,monospace;letter-spacing:8px;margin:12px 0 4px}
.danger{color:#a32f24;background:#f9eeeb}summary{cursor:pointer;font-weight:650}details[open] summary{margin-bottom:20px}dl{display:grid;grid-template-columns:160px 1fr;gap:18px;margin-bottom:30px}dt{font-size:13px;color:var(--muted)}dd{margin:0;overflow-wrap:anywhere}
.inline-form{display:flex;align-items:end;gap:16px;margin-bottom:24px}
.inline-form label{flex:1}
.form-grid{grid-template-columns:repeat(2,1fr);align-items:end}
.membership,.group-row,.override-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.group-row select{width:150px}
textarea{font:inherit;width:100%;padding:13px 12px;border:1px solid #BBA08B;border-radius:6px;background:var(--surface);color:var(--ink);resize:vertical;min-height:120px}
.manual-setup{scroll-margin-top:24px}.manual-setup>summary{font-size:19px}.manual-setup h3{margin:32px 0 16px;font-size:18px;letter-spacing:-.3px}
.manual-setup pre{margin:12px 0 24px;padding:18px;background:var(--soft);border:1px solid var(--line);border-radius:8px;max-width:100%;overflow:auto;line-height:1.65;tab-size:2}
.manual-setup pre code{padding:0;display:block;white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px}
.manual-setup .form-grid{align-items:start}.manual-setup .form-grid button{align-self:end}.manual-setup .form-grid p{margin:0}
.command-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:13px;flex-wrap:wrap}.command-heading button{font-size:12px;padding:10px 14px}
.manual-feedback{color:var(--brand-text);font-size:14px;line-height:1.6;overflow-wrap:anywhere}.manual-feedback:not(:empty){margin:20px 0;padding:14px 16px;background:var(--soft);border-radius:6px}.manual-feedback.success{color:#326a47}
.vpn-settings{padding:22px;background:var(--soft);border-radius:8px;font-size:14px}.device:target{outline:2px solid var(--orange);outline-offset:3px;scroll-margin-top:24px}
.group-row label{flex-direction:row;align-items:center}footer{max-width:1240px;padding:30px 40px;margin:auto;border-top:1px solid var(--line);display:flex;align-items:center;gap:30px;color:var(--muted);font-size:12px}footer>span{margin-left:auto}footer .brand{font-size:18px;color:var(--ink)}[hidden]{display:none!important}
@media(max-width:760px){.topbar{padding:18px 20px;flex-wrap:wrap;gap:16px}nav{gap:16px;font-size:12px;flex-wrap:wrap}
.brand{font-size:22px}main{padding:36px 20px 60px}
.hero{grid-template-columns:1fr;gap:32px}
.hero h1{font-size:56px}
.desktop-preview{transform:none}
.steps{grid-template-columns:1fr;gap:18px;margin-top:40px}
.steps article{border-bottom:1px solid var(--line);padding-bottom:16px}
.auth-card{padding:26px 22px}
.setup,.device-grid,.form-grid{grid-template-columns:1fr}
.inline-form{flex-direction:column;align-items:stretch}
.card{padding:22px}
.group-row label{width:100%;justify-content:space-between}dl{grid-template-columns:1fr;gap:8px}dd{margin-bottom:16px}footer{padding:24px 20px;flex-wrap:wrap;gap:16px}footer p{display:none}
.fineprint{padding:24px}
.feedback{min-height:100px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.auth-card button.is-loading::before{animation:none}}
/* Workspace VPN import keeps multiline settings consistent with existing forms. */
#outbound-vpns textarea{font:inherit;min-height:100px;resize:vertical;width:100%;border:1px solid var(--line);border-radius:8px;padding:12px;background:var(--surface);color:var(--ink)}
#connector-feedback:not(:empty){padding:12px 0;color:var(--brand-text)}
#connector-list{display:grid;gap:16px;margin-top:24px}
#connector-list pre{white-space:pre-wrap;overflow-wrap:anywhere}
#connector-form>p{grid-column:1/-1}
#connector-list .connector-error{padding:16px;border-left:3px solid #a32f24;border-radius:6px;background:#f9eeeb;line-height:1.55;overflow-wrap:anywhere}
#connector-list .connector-error strong{color:#85271e;font-size:15px}
#connector-list .connector-error p{margin:8px 0 0;color:var(--ink)}