/* cPanelControlPanel identity (2026-10-27): "the site is the control panel".
   Graphite console, a warm signal orange, monospace labels, and measured gauges.
   Loaded after site.css on cpanelcontrolpanel.com only. */
.brand-cpanel{
  --signal:#c2410c;            /* orange text and fills on light surfaces: 5.2:1 on white */
  --signal-bright:#ff7a3d;     /* orange on the graphite console */
  --console:#0f1318;--console-2:#161c24;--console-line:#28313c;--console-ink:#eef2f6;--console-muted:#9aa7b4;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --accent:#c2410c;--accent-strong:#9a3412;--on-accent:#ffffff;
}
:root[data-theme=dark] .brand-cpanel{--signal:#ff8a4c;--accent:#ff8a4c;--accent-strong:#ffab7a;--on-accent:#1a0d05}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .brand-cpanel{--signal:#ff8a4c;--accent:#ff8a4c;--accent-strong:#ffab7a;--on-accent:#1a0d05}}

.brand-cpanel .cta{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.brand-cpanel .cta:hover{background:var(--accent-strong);border-color:var(--accent-strong)}
.brand-cpanel .cta.secondary{background:transparent;color:var(--accent);border:1.5px solid var(--accent)}

/* Hero: the console */
.cp-hero{background:var(--console);color:var(--console-ink);padding:72px 0 80px;position:relative;overflow:hidden;
  background-image:radial-gradient(60rem 30rem at 85% 10%,rgb(255 122 61 / 16%),transparent 60%),
    linear-gradient(rgb(255 255 255 / 4%) 1px,transparent 1px),linear-gradient(90deg,rgb(255 255 255 / 4%) 1px,transparent 1px);
  background-size:auto,32px 32px,32px 32px}
.cp-hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:center}
.cp-kicker,.cp-label{font-family:var(--mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;margin:0 0 14px}
.cp-kicker{color:var(--signal-bright)}
.cp-label{color:var(--signal)}
.cp-hero h1{font-size:clamp(2.4rem,5.4vw,4.1rem);line-height:1.02;letter-spacing:-.025em;margin:0 0 20px;color:var(--console-ink)}
.cp-hero .lead{color:#c9d2db;font-size:1.13rem;max-width:36rem}
.cp-hero .cta{background:var(--signal-bright);border-color:var(--signal-bright);color:#1a0d05}
.cp-hero .cta:hover{background:#ff9663;border-color:#ff9663}
.cp-ghost{color:var(--console-ink);font-weight:600;text-underline-offset:4px}
.cp-proof{list-style:none;display:flex;flex-wrap:wrap;gap:10px 28px;padding:0;margin:34px 0 0;color:var(--console-muted);font-size:.9rem}
.cp-proof strong{display:block;color:var(--console-ink);font-family:var(--mono);font-size:1.15rem;font-weight:600}

/* Switchboard */
.cp-console{background:var(--console-2);border:1px solid var(--console-line);border-radius:16px;box-shadow:0 30px 80px rgb(0 0 0 / 45%);overflow:hidden}
.cp-console-bar{display:flex;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--console-line);font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--console-muted)}
.cp-leds{display:flex;gap:6px}.cp-leds i{width:9px;height:9px;border-radius:50%;background:#3a444f}
.cp-leds i:first-child{background:var(--signal-bright);box-shadow:0 0 10px var(--signal-bright)}
.cp-console-body{padding:22px 22px 24px}
.cp-q{border:0;margin:0 0 20px;padding:0;min-width:0}
.cp-q legend{font-weight:600;margin-bottom:10px;color:var(--console-ink)}
.cp-q legend span{font-family:var(--mono);color:var(--signal-bright);margin-right:8px}
.cp-seg{display:grid;grid-template-columns:1fr 1fr;background:#0b0f13;border:1px solid var(--console-line);border-radius:10px;padding:4px;gap:4px}
.cp-seg button,.cp-chips button{font:inherit;cursor:pointer;color:var(--console-muted);background:transparent;border:1px solid transparent;border-radius:7px;padding:10px 12px;min-height:44px;font-weight:600}
.cp-seg button[aria-pressed=true]{background:var(--console-ink);color:var(--console)}
.cp-chips{display:flex;flex-wrap:wrap;gap:8px}
.cp-chips button{border-color:var(--console-line);background:#0b0f13}
.cp-chips button[aria-pressed=true]{border-color:var(--signal-bright);color:var(--console-ink);box-shadow:inset 0 0 0 1px var(--signal-bright)}
.cp-seg button:focus-visible,.cp-chips button:focus-visible{outline:2px solid var(--signal-bright);outline-offset:2px}
.cp-output{border-top:1px dashed var(--console-line);padding-top:18px}
.cp-result p{margin:0 0 10px;color:#c9d2db}
.cp-result .cp-result-label{font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--console-muted)}
.cp-result-price{font-size:1rem;color:var(--console-muted)}
.cp-result-price strong{font-family:var(--mono);font-size:2.1rem;color:var(--console-ink);letter-spacing:-.02em}
.cp-result-price span{font-size:.9rem}
.cp-result .cta{margin-top:6px}
.cp-alt{color:var(--console-ink);margin-left:14px;font-weight:600}
.cp-noscript{color:var(--console-muted)}
[data-switchboard].is-live [data-cloud-q][hidden]{display:none}

/* Sections */
.cp-section-head{max-width:46rem;margin-bottom:34px}
.cp-section-head h2{margin:0 0 10px}
.cp-section-head p:not(.cp-label){color:var(--muted)}
.cp-sub-head{margin:56px 0 20px}
.cp-way-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.cp-way{display:grid;gap:10px;padding:28px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);text-decoration:none;position:relative;transition:border-color .15s,transform .15s}
.cp-way::after{content:"→";position:absolute;right:26px;top:26px;font-size:1.3rem;color:var(--signal)}
.cp-way:hover{border-color:var(--signal);transform:translateY(-2px)}
.cp-way strong{font-size:1.35rem;line-height:1.25;padding-right:30px}
.cp-way span:last-child{color:var(--muted);font-family:var(--mono);font-size:.92rem}
.cp-way-tag{font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--signal)}

.cp-plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;align-items:stretch}
.cp-plan{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:24px 22px;position:relative}
.cp-plan.is-start{border:2px solid var(--signal);box-shadow:0 14px 40px rgb(194 65 12 / 12%)}
.cp-flag{position:absolute;top:-12px;left:20px;margin:0;background:var(--signal);color:var(--on-accent);font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:999px}
.cp-plan h3{margin:4px 0 6px;font-size:1.3rem}
.cp-who{color:var(--muted);font-size:.93rem;min-height:3.2em}
.cp-price{margin:10px 0 2px;color:var(--muted)}
.cp-price strong{font-family:var(--mono);font-size:2.2rem;color:var(--ink);letter-spacing:-.03em}
.cp-sub{margin:0 0 14px;color:var(--muted);font-size:.86rem}
.cp-plan ul{list-style:none;padding:14px 0 0;margin:0 0 20px;border-top:1px solid var(--line);display:grid;gap:8px;font-size:.93rem}
.cp-plan li{padding-left:20px;position:relative}
.cp-plan li::before{content:"";position:absolute;left:2px;top:.55em;width:8px;height:8px;border-radius:2px;background:var(--signal)}
.cp-plan .cta{margin-top:auto;text-align:center}
.cp-note{color:var(--muted);font-size:.88rem;margin-top:18px;max-width:52rem}

.cp-clouds{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.cp-cloud{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) minmax(250px,1.3fr) auto;gap:8px 28px;align-items:center;padding:20px 24px;background:var(--surface);border:1px solid var(--line);border-radius:14px}
.cp-cloud-head h3{margin:0;font-size:1.15rem}
.cp-from{margin:2px 0 0;color:var(--muted);font-size:.9rem}
.cp-from strong{font-family:var(--mono);color:var(--ink);font-size:1.1rem}
.cp-cloud-note{margin:0;color:var(--muted);font-size:.93rem}
.cp-gauge{height:10px;border-radius:999px;background:var(--soft,#eef2f6);overflow:hidden;grid-column:3;grid-row:1}
.cp-gauge-fill{display:block;height:100%;width:var(--w);border-radius:inherit;background:linear-gradient(90deg,var(--signal),#f59e0b)}
.cp-gauge-label{grid-column:3;grid-row:2;margin:0;display:flex;flex-wrap:wrap;gap:2px 10px;align-items:baseline;white-space:nowrap;font-size:.8rem;color:var(--muted)}
.cp-gauge-label strong{font-family:var(--mono);color:var(--ink);font-size:.95rem}
.cp-cloud > a{grid-column:4;grid-row:1/3;font-weight:600;color:var(--accent);white-space:nowrap}
.cp-cloud-note{grid-column:2;grid-row:1/3}
.cp-cloud-head{grid-column:1;grid-row:1/3}

.cp-manage{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.cp-manage article{padding:24px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.cp-step{font-family:var(--mono);color:var(--signal);margin:0}
.cp-manage h3{margin:6px 0 4px}
.cp-manage-price{color:var(--muted);margin:0 0 12px}
.cp-manage-price strong{font-family:var(--mono);color:var(--ink);font-size:1.2rem}
.cp-manage ul{padding-left:18px;margin:0;display:grid;gap:6px;font-size:.93rem;color:var(--muted)}

.cp-trust{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:48px;align-items:start}
.cp-guides{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.cp-guides a{display:grid;gap:2px;padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:var(--surface);text-decoration:none;color:var(--ink)}
.cp-guides a:hover{border-color:var(--signal)}
.cp-guides span{color:var(--muted);font-size:.88rem}

/* Product pages reuse the decks inside the article column */
.article .cp-plans{grid-template-columns:repeat(2,minmax(0,1fr));margin:28px 0}
.article .cp-cloud{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) auto}
.article .cp-cloud-note{grid-column:1/-1;grid-row:auto}
.article .cp-cloud-head{grid-column:1;grid-row:1}
.article .cp-gauge{grid-column:2;grid-row:1}
.article .cp-gauge-label{grid-column:2;grid-row:2}
.article .cp-cloud > a{grid-column:3;grid-row:1/3}
.article .cp-manage{grid-template-columns:1fr;margin:20px 0}

@media (max-width:1100px){
  .cp-hero-grid{grid-template-columns:1fr;gap:40px}
  .cp-plans{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cp-cloud{grid-template-columns:minmax(0,1fr) auto}
  .cp-cloud-head{grid-column:1;grid-row:1}.cp-cloud > a{grid-column:2;grid-row:1}
  .cp-cloud-note{grid-column:1/-1;grid-row:2}
  .cp-gauge{grid-column:1/-1;grid-row:3}.cp-gauge-label{grid-column:1/-1;grid-row:4}
  .cp-trust{grid-template-columns:1fr}
}
@media (max-width:720px){
  .cp-hero{padding:48px 0 56px}
  .cp-way-grid,.cp-manage,.cp-plans,.article .cp-plans{grid-template-columns:1fr}
  .article .cp-cloud{grid-template-columns:minmax(0,1fr) auto}
  .article .cp-gauge,.article .cp-gauge-label{grid-column:1/-1}
  .article .cp-gauge{grid-row:3}.article .cp-gauge-label{grid-row:4}
  .article .cp-cloud-note{grid-row:2}
  .cp-seg{grid-template-columns:1fr}
  .cp-who{min-height:0}
}
@media (prefers-reduced-motion:reduce){.cp-way{transition:none}.cp-way:hover{transform:none}}

/* Wordmark and mark (brand files in sites/cpanelcontrolpanel.com/brand/) */
.brand-cpanel .brand img,.brand-cpanel .footer-logo img{border-radius:10px}
.wordmark{letter-spacing:-.01em;font-weight:650}
.wordmark-light{font-weight:400;color:var(--muted)}
.site-footer .wordmark-light{color:var(--navy-text,#c6d6ea)}
.brand-cpanel .site-footer{background:var(--console);border-top:3px solid var(--signal-bright)}
.brand-cpanel .utility-bar{background:var(--console)}
/* Phones: product-page cloud cards stack, with the order link last (2026-10-27). */
@media (max-width:720px){
  .article .cp-cloud,.cp-cloud{grid-template-columns:1fr}
  .article .cp-cloud-head,.cp-cloud-head{grid-column:1;grid-row:1}
  .article .cp-cloud-note,.cp-cloud-note{grid-column:1;grid-row:2}
  .article .cp-gauge,.cp-gauge{grid-column:1;grid-row:3}
  .article .cp-gauge-label,.cp-gauge-label{grid-column:1;grid-row:4}
  .article .cp-cloud > a,.cp-cloud > a{grid-column:1;grid-row:5;margin-top:4px}
}