/* Public Solar identity. Account and telemetry palettes keep their own semantics. */
:root[data-ui="site"] {
  --design-page:#181c24; --design-surface:#222730; --design-raised:#2b313c;
  --design-text:#f7f3e9; --design-secondary:#c5c7c9; --design-muted:#a9afb8;
  --design-border:#414650; --design-accent:#ffc45b; --design-on-accent:#241b0b;
  --design-glow:rgba(239,181,85,.09); --design-blue-glow:rgba(131,149,181,.10);
  --design-highlight:rgba(255,250,234,.035); --design-glass:rgba(24,28,36,.95);
  --accent-hover:#ffd787; --field-border:#858d98; --warn:#ffcf77;
  --solar-cta:#f8bc52; --solar-cta-ink:#241b0b;
  --font:'Source Sans 3',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-heading:'Commissioner',system-ui,-apple-system,'Segoe UI',sans-serif;
  --tablet-halo:rgba(139,157,184,.26); --tablet-warm:rgba(255,203,116,.12);
  --tablet-shadow:rgba(0,0,0,.70); --tablet-floor:rgba(0,0,0,.72);
  --gutter:clamp(24px,4vw,72px);
  /* Tints derive from the amber identity; the "normal range" band stays a cool neutral so amber keeps meaning "attention". */
  --fill-soft:color-mix(in srgb,var(--solar-cta) 14%,transparent); --fill-mid:color-mix(in srgb,var(--solar-cta) 32%,transparent);
  --chart-band:rgba(139,157,184,.26); --link-underline:color-mix(in srgb,var(--design-accent) 45%,transparent);
  accent-color:var(--design-accent); caret-color:var(--design-accent); scrollbar-color:var(--design-border) var(--design-page);
}
:root[data-ui="site"][data-theme="light"] {
  --design-page:#f7f5f0; --design-surface:#fffefa; --design-raised:#efece4;
  --design-text:#242a35; --design-secondary:#50555f; --design-muted:#676b72;
  --design-border:#d9d4c9; --design-accent:#8d590d; --design-on-accent:#fff;
  --design-glow:rgba(231,180,90,.12); --design-blue-glow:rgba(131,151,180,.07);
  --design-highlight:rgba(255,255,255,.75); --design-glass:rgba(247,245,240,.96);
  --accent-hover:#754808; --field-border:#8c877c; --warn:#886011;
  --tablet-halo:rgba(137,157,187,.19); --tablet-warm:rgba(239,183,84,.19);
  --tablet-shadow:rgba(30,35,46,.29); --tablet-floor:rgba(34,36,44,.25);
  --chart-band:rgba(96,118,150,.20);
}
html[data-ui="site"] ::selection { background:color-mix(in srgb,var(--solar-cta) 42%,transparent); color:var(--design-text); }
html[data-ui="site"] body { font-family:var(--font); font-size:19px; line-height:1.55; }
html[data-ui="site"] :is(h1,h2,h3,.brand-name) { font-family:var(--font-heading); }
html[data-ui="site"] h1 { font-weight:600; letter-spacing:-.025em; line-height:1.1; }
html[data-ui="site"] h2 { font-weight:580; letter-spacing:-.024em; line-height:1.18; }
html[data-ui="site"] h3 { font-weight:550; letter-spacing:-.015em; }
html[data-ui="site"] .eyebrow { color:var(--accent); font-size:12px; font-weight:600; letter-spacing:.15em; }
html[data-ui="site"] .brand { gap:10px; }
html[data-ui="site"] .brand-name { font-size:18px; font-weight:550; }
html[data-ui="site"] .brand-tagline { letter-spacing:.62em; margin-right:-.62em; color:var(--text-muted); }
html[data-ui="site"] .brand-mark { color:var(--accent); }
html[data-ui="site"] .container { max-width:1680px; }
html[data-ui="site"] .header-inner { gap:18px; }
html[data-ui="site"] .nav a { font-weight:550; font-size:16px; padding-inline:11px; }
html[data-ui="site"] .header-actions { gap:8px; }
html[data-ui="site"] .btn { font-weight:600; }
html[data-ui="site"] :is(.btn-primary,button.btn-primary) {
  color:var(--solar-cta-ink); background:linear-gradient(140deg,#ffcf7c,var(--solar-cta)); border-color:#d39b36;
  box-shadow:0 2px 1px rgba(255,255,255,.17) inset,0 5px 10px rgba(0,0,0,.14),0 12px 28px -14px rgba(243,172,57,.55);
}
html[data-ui="site"] :is(.btn-primary,button.btn-primary):hover { background:linear-gradient(140deg,#ffdc9e,#ffc566); box-shadow:0 5px 12px rgba(0,0,0,.18),0 17px 32px -13px rgba(243,172,57,.55); }
html[data-ui="site"] :is(.btn-secondary,.btn-ghost,.btn-outline) { border-color:var(--field-border); }
html[data-ui="site"] :is(.theme-toggle,.lang,.login) { font-weight:550; }
html[data-ui="site"] .hero { overflow:clip; padding-top:calc(var(--header) + 54px); padding-bottom:92px; }
html[data-ui="site"] .hero-bg { background:radial-gradient(ellipse 42% 65% at 83% 48%,var(--tablet-halo),transparent 85%),radial-gradient(ellipse 45% 65% at 8% 8%,var(--design-glow),transparent),var(--design-page); }
html[data-ui="site"] .hero-grid { grid-template-columns:minmax(0, .94fr) minmax(0,1.06fr); column-gap:clamp(40px,4vw,76px); min-height:660px; }
html[data-ui="site"] .hero-text { max-width:660px; }
html[data-ui="site"] .hero h1 { font-size:clamp(43px,3.55vw,62px); margin-bottom:26px; }
html[data-ui="site"] .h1-accent { color:var(--accent); }
html[data-ui="site"] :is(.hero-lead,.hero-placement) { font-size:21px; line-height:1.5; max-width:590px; }
html[data-ui="site"] .hero-placement { font-size:19px; color:var(--text-muted); }
html[data-ui="site"] .hero-cta { margin-top:30px; gap:14px; }
html[data-ui="site"] .hero-cta .btn { padding-inline:24px; min-height:56px; font-size:18px; }
html[data-ui="site"] .hero-points { margin-top:34px; }
html[data-ui="site"] .hero-points li { font-size:16px; line-height:1.4; padding-inline:14px; gap:10px; }
html[data-ui="site"] .hero-points li:first-child { padding-left:0; }
html[data-ui="site"] .hero-points .ico { width:25px; height:25px; }
html[data-ui="site"] .hero-compat { margin-top:26px; padding-top:22px; gap:14px; }
html[data-ui="site"] .hero-compat p { font-size:17px; line-height:1.4; }
html[data-ui="site"] .hero-rdn { margin-top:13px; margin-left:52px; font-size:14px; line-height:1.45; }
/* Relative sizing leaves actual space for the device edge and its cast shadow. */
html[data-ui="site"] .hero-visual { align-self:center; min-height:0; margin:0; perspective:1400px; perspective-origin:50% 50%; padding:32px 14px 60px 0; isolation:isolate; }
html[data-ui="site"] .hero-visual::before { content:''; position:absolute; z-index:-2; inset:0 -5% -2% -9%; pointer-events:none; background:radial-gradient(ellipse at 60% 48%,var(--tablet-halo),transparent 68%),radial-gradient(ellipse at 30% 25%,var(--tablet-warm),transparent 60%); filter:blur(12px); }
html[data-ui="site"] .tablet { position:relative; left:auto; top:auto; width:100%; margin:0; transform:none; isolation:isolate; }
html[data-ui="site"] .tablet::after { left:5%; right:0; bottom:-54px; height:86px; z-index:-1; transform:skewX(-18deg); background:radial-gradient(ellipse at 50% 40%,var(--tablet-floor),transparent 69%); filter:blur(13px); }
html[data-ui="site"] .tablet-body {
  transform:perspective(1600px) rotateY(-8deg) rotateX(3deg) rotateZ(-1deg); transform-origin:50% 50%;
  border-radius:32px; padding:11px; border:1px solid rgba(234,239,249,.23);
  background:linear-gradient(150deg,#68717b 0%,#303946 9%,#111821 42%,#1d2633 88%,#445160 100%);
  box-shadow:inset 0 2px 1px rgba(255,255,255,.38),inset -3px -2px 3px rgba(0,0,0,.75),
    8px 10px 1px -5px #080e17, 13px 19px 15px -10px rgba(0,0,0,.65),
    24px 42px 50px -15px var(--tablet-shadow), 6px 74px 76px -28px var(--tablet-shadow);
}
html[data-ui="site"] .tablet-screen { border-radius:21px; }
html[data-ui="site"] .tablet .display-note { position:relative; top:auto; left:auto; margin:34px 24px 0; text-align:center; font-size:13px; color:var(--text-muted); }
html[data-ui="site"] .tablet-screen::after { background:linear-gradient(125deg,rgba(244,247,255,.095),transparent 43%); }
html[data-ui="site"] .feature-card { border-top-color:color-mix(in srgb,var(--accent) 38%,var(--border)); }
html[data-ui="site"] .card-icon { background:linear-gradient(135deg,var(--design-glow),var(--surface-raised)); }
html[data-ui="site"] .badge { background:var(--surface-raised); }
html[data-ui="site"] .choice:has(input:checked) { background:color-mix(in srgb,var(--accent) 7%,var(--surface)); }
html[data-ui="site"] .field :is(input,textarea,select) { font-size:18px; }
/* One focus ring: design.css already draws the outline; the old teal glow would double it. */
html[data-ui="site"] .field :is(input,textarea):focus { box-shadow:none; }
html[data-ui="site"] :is(.lang,.login):hover { background:var(--surface-raised); }
/* Chart and demo fills left over from the previous identity now derive from the amber tokens. */
html[data-ui="site"] .band { fill:var(--chart-band); }
html[data-ui="site"] .key-band { background:var(--chart-band); }
html[data-ui="site"] .soc-area { fill:var(--fill-soft); }
html[data-ui="site"] .soc-fill { background:linear-gradient(90deg,var(--fill-soft),var(--fill-mid)); }
html[data-ui="site"] .soc-corridor { background:var(--fill-soft); }
html[data-ui="site"] .official-band { border-color:color-mix(in srgb,var(--design-accent) 30%,var(--border)); background:color-mix(in srgb,var(--solar-cta) 6%,transparent); }
html[data-ui="site"] .text-link { text-decoration-color:var(--link-underline); }
html[data-ui="site"] .nav a:hover { text-decoration-color:var(--link-underline); }
/* Reading measure: Source Sans 3 is narrow, so wide columns ran past 75ch. */
html[data-ui="site"] .section-head { max-width:700px; }
html[data-ui="site"] :is(.section-lead,.faq-answer,.option-band p,.official-band p,.access-text > p,.outages-head > div > p) { max-width:66ch; }
html[data-ui="site"] :is(.price-note,.feature-note,.section > .container > .condition) { max-width:80ch; }
html[data-ui="site"] .gallery-head h2 { font-size:22px; }
@media(min-width:1600px) {
  html[data-ui="site"] .hero-grid { grid-template-columns:minmax(0,650px) minmax(0,1fr); }
}
@media(min-width:1024px) and (max-width:1279px) {
  html[data-ui="site"] .hero-grid { column-gap:30px; }
  html[data-ui="site"] .hero h1 { font-size:44px; }
  html[data-ui="site"] .hero-cta { flex-wrap:wrap; }
  html[data-ui="site"] .hero-cta .btn { font-size:17px; padding-inline:18px; }
  html[data-ui="site"] .hero-points { grid-template-columns:1fr; gap:12px; }
  html[data-ui="site"] .hero-points li { border:0; padding:0; }
  html[data-ui="site"] .hero-points li br { display:none; }
}
@media(max-width:1023px) {
  html[data-ui="site"] .hero { padding-top:calc(var(--header) + 36px); padding-bottom:56px; }
  html[data-ui="site"] .hero-grid { grid-template-columns:1fr; min-height:0; row-gap:28px; }
  html[data-ui="site"] .hero-text { max-width:720px; }
  html[data-ui="site"] .hero h1 { font-size:clamp(40px,6vw,58px); }
  html[data-ui="site"] .hero-visual { width:100%; max-width:760px; margin-inline:auto; padding:24px 16px 46px; }
  html[data-ui="site"] .tablet-body { transform:perspective(1400px) rotateY(-5deg) rotateX(3deg) rotateZ(-1deg); }
}
@media(max-width:767px) {
  :root[data-ui="site"] { --gutter:22px; }
  html[data-ui="site"] body { font-size:18px; }
  html[data-ui="site"] .hero h1 { font-size:clamp(37px,8.5vw,54px); line-height:1.12; }
  html[data-ui="site"] .hero .eyebrow { font-size:11px; letter-spacing:.11em; }
  html[data-ui="site"] .hero-lead { font-size:19px; line-height:1.45; }
  html[data-ui="site"] .hero-placement { font-size:18px; line-height:1.45; }
  html[data-ui="site"] .hero-points { margin-top:26px; }
  html[data-ui="site"] .hero-points li { padding:12px 0; }
  html[data-ui="site"] .hero-compat { margin-top:16px; }
  html[data-ui="site"] .hero-rdn { margin-left:0; }
  html[data-ui="site"] .hero-visual { padding:18px 5px 26px; }
  html[data-ui="site"] .tablet-body { border-radius:20px; padding:7px; transform:perspective(1400px) rotateY(-3deg) rotateZ(-1deg); box-shadow:inset 0 2px 1px rgba(255,255,255,.3),4px 6px 1px -3px #080e17,8px 15px 14px -7px rgba(0,0,0,.58),12px 32px 32px -13px var(--tablet-shadow); }
  html[data-ui="site"] .tablet-screen { border-radius:13px; }
  html[data-ui="site"] .tablet::after { height:50px; bottom:-22px; filter:blur(8px); }
  html[data-ui="site"] .tablet .display-note { margin:24px 0 0; }
  html[data-ui="site"] .header-inner { gap:9px; }
  html[data-ui="site"] .header-actions { gap:5px; }
  /* Card headings kept a visible step above the 18px body on phones. */
  html[data-ui="site"] :is(.feature-card,.deploy-card,.step,.option-band) h3 { font-size:22px; line-height:1.25; }
}
@media(max-width:360px) {
  :root[data-ui="site"] { --gutter:16px; }
  html[data-ui="site"] .brand-name { font-size:16px; }
  html[data-ui="site"] .brand-tagline { font-size:8px; letter-spacing:.56em; margin-right:-.56em; }
}
@media print {
  html[data-ui="site"] .hero-bg,html[data-ui="site"] .hero-visual::before,html[data-ui="site"] .tablet::after { display:none; }
  html[data-ui="site"] .tablet-body { transform:none; box-shadow:none; }
}

/* Keep the caption legible over the physical shadow, which contrast tools ignore. */
html[data-ui="site"] .tablet .display-note {
  width:fit-content; max-width:100%; margin-inline:auto; padding:4px 10px;
  border-radius:8px; background:var(--bg); color:var(--text-secondary); z-index:1;
}

/* Remembered access uses the existing two navigation actions, without adding another row. */
html[data-ui="site"] .auth-remember { margin-top:20px; }
html[data-ui="site"] .auth-remember .choice { padding:14px 16px; border:1px solid var(--border); border-radius:14px; }
html[data-ui="site"] .auth-remember .field-hint { margin-top:9px; font-size:15px; line-height:1.5; }
html[data-ui="site"] .auth-remember input { flex:none; }
html[data-ui="site"] .header-actions > .login,html[data-ui="site"] .header-cta { white-space:nowrap; }
@media(min-width:1200px) and (max-width:1439px) {
  html[data-ui="site"] .is-signed-in .header-actions > .login { display:none; }
  html[data-ui="site"] .is-signed-in .header-inner { gap:14px; }
  html[data-ui="site"] .is-signed-in .nav a { padding-inline:9px; }
}

html[data-ui="site"] .auth-form .auth-leave-hint { color:var(--text); border-left:2px solid var(--accent); padding-left:12px; margin-top:14px; }

/* Authentication is a short task on a phone: keep the code and Continue together. */
@media(max-width:767px) {
  html[data-ui="site"] body:is([data-page="login"],[data-page="register"]) .page-section { padding-top:28px; padding-bottom:48px; }
  html[data-ui="site"] body:is([data-page="login"],[data-page="register"]) .split { gap:20px; }
  html[data-ui="site"] body:is([data-page="login"],[data-page="register"]) .split-text > h1 { font-size:34px; line-height:1.15; margin-bottom:14px; }
  html[data-ui="site"] body:is([data-page="login"],[data-page="register"]) .split-text > p { font-size:17px; line-height:1.5; margin-bottom:14px; }
  html[data-ui="site"] .auth-form .form-body { gap:16px; }
  html[data-ui="site"] .auth-remember { margin-top:0; }
  html[data-ui="site"] .auth-form .auth-leave-hint { font-size:14px; line-height:1.5; margin:0; }
}