/* ============================================================
   Storefront styles — the Rumbaho brand (S9, chosen 2026-09-08:
   direction "C4 · Signal Amber"). Near-black ground #0B0D12, amber
   accent #FFB020 (hover #FFC95C), sky-blue second #4DA3FF used only
   in the mark, ink #F2F4F8. Space Grotesk for headlines, IBM Plex
   Sans for everything else — both from Google Fonts, with system
   fallbacks. The mark is brand_mark() in includes/config.php and
   /favicon.svg; the wordmark is APP_NAME set in the nav's style.
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=IBM+Plex+Sans:wght@400;500;600&display=swap");
*{box-sizing:border-box}
body{margin:0;font:16px/1.6 "IBM Plex Sans",-apple-system,"Segoe UI",Arial,sans-serif;
/* no browser-default blue anywhere: every link is amber unless a rule
   says otherwise (operator, 2026-09-09) */
a{color:#FFB020}
a:hover{color:#FFC95C}
  background:#0B0D12;color:#E4E7EE;min-height:100vh}
.wrap{max-width:980px;margin:0 auto;padding:0 24px}
.nav-mark{color:#FFB020}
.mark{vertical-align:middle;flex:none}
h1,h2,h3{font-family:"Space Grotesk","IBM Plex Sans","Segoe UI",Arial,sans-serif}
.lnk{color:#FFB020}
.card-mark{margin:0 0 10px;text-align:center}
.wordmark{font-family:"Space Grotesk","IBM Plex Sans",Arial,sans-serif;letter-spacing:2px;text-transform:uppercase}
.badge{display:inline-block;padding:9px 20px;border:1px solid #FFB020;border-radius:999px;
  color:#FFB020;font-size:14px;letter-spacing:.6px;text-transform:uppercase}

/* ---- nav + footer ---- */
.nav{border-bottom:1px solid #141824}
.nav-in{display:flex;align-items:center;justify-content:space-between;padding:16px 24px}
.nav-brand{text-decoration:none;display:flex;align-items:center;gap:9px;font-family:"Space Grotesk","IBM Plex Sans",Arial,sans-serif;
  font-weight:700;font-size:17px;color:#F2F4F8;letter-spacing:2px;text-transform:uppercase}
.btn-ghost{color:#FFB020;text-decoration:none;border:1.5px solid #FFB020;border-radius:8px;
  padding:8px 16px;font-size:14.5px}
.btn-ghost:hover{background:rgba(255,176,32,.08)}
.nav-links{display:flex;gap:26px}
.nav-links a{color:#C9CFDA;text-decoration:none;font-size:15px}
.nav-links a:hover{color:#FFB020}
.nav-links a.on{color:#FFB020}
.nav-right{display:flex;gap:14px;align-items:center}
.nav-link{color:#C9CFDA;text-decoration:none;font-size:14.5px;padding:8px 6px}
.nav-link:hover{color:#FFB020}
.foot{border-top:1px solid #1C2130;padding:44px 0 32px;font-size:14.5px}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px}
.foot-about p{margin:12px 0 0;color:#8A93A6;max-width:300px;line-height:1.6}
.foot-brand{display:inline-flex;align-items:center;gap:8px;color:#F2F4F8;text-decoration:none;
  font-family:"Space Grotesk","IBM Plex Sans",Arial,sans-serif;font-weight:700;letter-spacing:2px;text-transform:uppercase;font-size:15px}
/* official platform marks on the dark ground: their own colours, 22px, a
   plain row — nothing here may restyle them */
.foot-social{display:flex;gap:14px;margin-top:16px}
.foot-social a{display:inline-flex;line-height:0;opacity:.92}
.foot-social a:hover{opacity:1}
.foot-social svg{height:22px;width:auto}
.foot-col{display:flex;flex-direction:column;gap:9px}
.foot-col h4{margin:0 0 2px;font:600 12px/1 "IBM Plex Sans",Arial,sans-serif;letter-spacing:1.5px;text-transform:uppercase;color:#6F7787}
.foot-col a{color:#C9CFDA;text-decoration:none}
.foot-col a:hover{color:#FFB020}
.foot-line{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:34px;padding-top:20px;
  border-top:1px solid #1C2130;font-size:13px;color:#6F7787}
.foot-line a{color:#8A93A6;text-decoration:none}
.cta{padding:86px 0;text-align:center;background:radial-gradient(ellipse at 50% 120%, rgba(255,176,32,.14), transparent 55%)}
.cta h2{margin:0 0 24px;font-size:38px;letter-spacing:-.8px;color:#F2F4F8}
@media (max-width:820px){.foot-grid{grid-template-columns:1fr 1fr}
  /* phones: the nav links move to a second row under the logo instead of
     disappearing (the customer nav was invisible on mobile, 2026-09-09) */
  .nav-in{flex-wrap:wrap;row-gap:10px;padding:14px 18px}
  .nav-links{order:3;width:100%;gap:18px;overflow-x:auto;white-space:nowrap;font-size:14px;padding-bottom:2px}
  .nav-right{margin-left:auto}}

/* ---- hero ---- */
.hero{padding:96px 0 84px;text-align:center;
  background:radial-gradient(ellipse at 50% -10%, rgba(77,163,255,.18), transparent 55%)}
.hero h1{margin:0 auto 22px;max-width:820px;font-size:52px;line-height:1.08;color:#F2F4F8;letter-spacing:-1.2px}
@media (max-width:900px){.hero h1{font-size:40px}}
@media (max-width:600px){.hero h1{font-size:33px}}
.hero-lead{max-width:600px;margin:0 auto 34px;font-size:20px;color:#C9CFDA}
.hero-sub{margin:0 0 30px;font-size:16.5px;color:#8A93A6}
.btn-main{display:inline-block;background:#FFB020;color:#0B0D12;font-weight:700;
  padding:13px 26px;border-radius:8px;text-decoration:none;font-size:16px}
.btn-main:hover{background:#FFC95C}

/* ---- content bands ---- */
.band{padding:58px 0}
.band.alt{background:#10131B}
.band h2{margin:0 0 14px;font-size:28px;color:#F2F4F8;text-align:center}
.band-lead{max-width:680px;margin:0 auto 30px;text-align:center;color:#C9CFDA;font-size:17px}
.band-note{max-width:680px;margin:26px auto 0;text-align:center;color:#8A93A6;font-size:14.5px}
.cols{display:flex;gap:22px;flex-wrap:wrap;justify-content:center;margin-top:30px}
.col{flex:1;min-width:250px;max-width:300px}
.col-n{width:34px;height:34px;border-radius:50%;background:#FFB020;color:#0B0D12;
  font-weight:800;display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.col h3{margin:0 0 8px;font-size:17.5px;color:#F2F4F8}
.col p{margin:0;color:#8A93A6;font-size:15px}
.col.box{background:#141824;border:1px solid #2A3142;border-radius:13px;padding:22px}
.col.box h3{color:#FFB020}
.faq{max-width:680px;margin:26px auto 0}
.qa{border-bottom:1px solid #141824;padding:18px 0}
.qa h3{margin:0 0 6px;font-size:16.5px;color:#F2F4F8}
.qa p{margin:0;color:#8A93A6;font-size:15px}

/* ---- legal pages ---- */
.legal{padding:44px 24px 60px;max-width:760px}
.legal h1{font-size:30px;color:#F2F4F8;margin:0 0 4px}
.legal-date{color:#6F7787;font-size:14px;margin:0 0 26px}
.legal h2{font-size:19px;color:#F2F4F8;margin:28px 0 8px}
.legal p{color:#C9CFDA;font-size:15.5px}
.legal a{color:#FFB020}

/* ---- the admin login (backstage door) ---- */
.login-body{display:flex;flex-direction:column;align-items:center;min-height:100vh;padding:0 0 24px}
.login-body .nav{width:100%;margin-bottom:auto}
.login-body .login-card{margin:auto}
.login-card{width:100%;max-width:380px;background:#141824;border:1px solid #2A3142;
  border-radius:14px;padding:30px 28px;text-align:center}
.login-card h1{margin:0 0 4px;font-size:22px;color:#F2F4F8}
.login-sub{margin:0 0 18px;font-size:13.5px;color:#8A93A6}
.login-note{font-size:13.5px;color:#FFB020;margin:0 0 12px}
.login-error{font-size:13.5px;color:#F87171;margin:0 0 12px}
.login-card input{width:100%;padding:11px 13px;margin-bottom:10px;border:1px solid #2A3142;
  border-radius:9px;background:#0B0D12;color:#E4E7EE;font:inherit}
.login-card button{width:100%;padding:11px;border:0;border-radius:9px;background:#FFB020;
  color:#0B0D12;font:inherit;font-weight:700;cursor:pointer}
.login-card button:hover{background:#FFC95C}

/* ---- the backstage ---- */
.admin{max-width:720px;margin:0 auto;padding:40px 24px}
.admin h1{font-size:24px;color:#F2F4F8}
.admin p{color:#8A93A6}
.admin a{color:#FFB020}
.bk-table{width:100%;border-collapse:collapse;margin-top:10px;font-size:14px}
.bk-table th{text-align:left;color:#6F7787;font-size:12px;text-transform:uppercase;
  letter-spacing:.4px;padding:7px 8px;border-bottom:2px solid #141824}
.bk-table td{padding:9px 8px;border-bottom:1px solid #141824;vertical-align:top;color:#C9CFDA}
.bk-dim{color:#6F7787;font-size:12.5px}
.bk-btn{padding:5px 10px;border:1px solid #2A3142;border-radius:7px;background:#141824;
  color:#C9CFDA;font-size:12.5px;cursor:pointer}
.bk-btn:hover{border-color:#FFB020;color:#FFB020}

/* ---- the registration form ---- */
.login-card.wide{max-width:460px;text-align:left}
.login-card.wide h1,.login-card.wide .login-sub{text-align:center}
.reg label{display:block;font-size:12px;color:#8A93A6;text-transform:uppercase;
  letter-spacing:.4px;margin:12px 0 4px}
.reg label.agree{display:flex;gap:8px;align-items:flex-start;text-transform:none;
  font-size:13.5px;letter-spacing:0;margin:16px 0;color:#C9CFDA}
.reg label.agree input{width:auto;margin:3px 0 0}
.reg label.agree a{color:#FFB020}
.reg .opt{opacity:.6;text-transform:none}
.hp{position:absolute;left:-6000px;top:-6000px}

/* ---- the customer dashboard (S5) ---- */
.dash{max-width:820px}
.dash-card{background:#141824;border:1px solid #2A3142;border-radius:12px;padding:18px 20px;margin-top:14px}
.dash-card h2{margin:0 0 6px;font-size:18px;color:#F2F4F8}
.dash-card p{margin:0 0 8px;color:#8A93A6}
.dash-card p.lead{color:#F2F4F8;font-weight:700}
.dash-flash{color:#FFB020;margin:10px 0 0}
.dash-flash.err{color:#F87171}
.dash-quiet{font-size:13px;color:#6F7787;margin-top:8px}
.dash-btn{padding:9px 16px;border:0;border-radius:9px;background:#FFB020;color:#0B0D12;font:inherit;font-weight:700;cursor:pointer}
.dash-btn:hover{background:#FFC95C}
.dash-step{border-top:1px solid #2A3142;padding:14px 0 4px;margin-top:10px}
.dash-step h3{margin:0 0 8px;font-size:15.5px;color:#F2F4F8}
.dash-step h3 .done{color:#FFB020;font-weight:700}
.dash-step ol{margin:0 0 12px;padding-left:20px;color:#C9CFDA;font-size:14.5px}
.dash-step ol li{margin:0 0 6px}
.dash-step ol b{color:#F2F4F8}
.dash-table{width:100%;border-collapse:collapse;margin-top:8px;font-size:14px}
.dash-table th{text-align:left;color:#6F7787;font-size:12px;text-transform:uppercase;letter-spacing:.4px;
  padding:7px 8px;border-bottom:2px solid #2A3142}
.dash-table td{padding:9px 8px;border-bottom:1px solid #2A3142;vertical-align:top;color:#C9CFDA}
.dash-table td.when{white-space:nowrap;color:#8A93A6}
.pill-ok,.pill-wait{display:inline-block;border-radius:999px;padding:2px 10px;font-size:12px;font-weight:700}
.pill-ok{background:rgba(255,176,32,.15);color:#FFB020}
.pill-wait{background:rgba(138,147,166,.15);color:#C9CFDA}

/* ---- the hero's one-field start: your website, then Join ---- */
.hero-join{display:flex;gap:12px;justify-content:center;max-width:760px;margin:0 auto;flex-wrap:wrap}
.hero-join input{flex:1;min-width:320px;padding:17px 20px;border:1px solid #3A4358;border-radius:8px;
  background:#141824;color:#F2F4F8;font:inherit;font-size:18px}
.hero-join input:focus{outline:none;border-color:#FFB020}
.hero-join .btn-main{border:0;cursor:pointer;font:inherit;font-weight:700;font-size:18px;padding:17px 30px}
.hero-note{margin:12px 0 0;font-size:14px;color:#6F7787}

/* ---- "Continue with…" (S6) ---- */
.social{margin:0 0 14px}
.social-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:11px 13px;
  margin-bottom:8px;border:1px solid #3A4358;border-radius:9px;background:#0B0D12;color:#F2F4F8;
  text-decoration:none;font-weight:600;font-size:15px}
.social-btn:hover{border-color:#FFB020}
.social-or{text-align:center;font-size:12.5px;color:#6F7787;margin:12px 0 4px}
.social-with{background:#0B0D12;border:1px solid #2A3142;border-radius:9px;padding:10px 13px;
  font-size:13.5px;color:#C9CFDA;margin:0 0 6px}
.social-with b{color:#FFB020}

/* ---- the beta clock, as the customer sees it (S7) ---- */
.beta-flash{display:inline-block;margin:0 0 18px;padding:7px 16px;border-radius:999px;
  background:rgba(245,158,11,.14);color:#FBBF24;font-size:14px;font-weight:600}
.beta-closed{display:inline-block;margin:6px 0 0;padding:12px 20px;border-radius:11px;
  background:#141824;border:1px solid #2A3142;color:#C9CFDA;font-size:15.5px}
.beta-closed a{color:#FFB020}

/* ---- the customer's account, Layout 1: sidebar (2026-09-08) ---- */
.acct{max-width:1120px;padding-top:34px;padding-bottom:56px}
.acct-grid{display:grid;grid-template-columns:320px minmax(0,1fr);gap:24px;align-items:start}
.acct-side{display:flex;flex-direction:column;gap:14px}
.acct-main{display:flex;flex-direction:column;gap:14px}
/* the sidebar's content block: one line per platform + kind, the counts
   on the right; the active line is the group open in the main pane */
.acct-content h2{margin:0 0 6px;font-size:15px;color:#F2F4F8}
.acct-pf{margin:10px 0 2px;font:600 12px/1 "IBM Plex Sans",Arial,sans-serif;letter-spacing:1.2px;text-transform:uppercase;color:#6F7787}
.acct-line{display:flex;justify-content:space-between;gap:10px;padding:6px 8px;margin:0 -8px;border-radius:7px;font-size:14px;color:#C9CFDA;text-decoration:none}
a.acct-line:hover{background:#1A1F2C;color:#F2F4F8}
.acct-line.on{background:#1A1F2C;color:#FFB020}
.acct-line.quiet{color:#6F7787}
.acct-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.acct-filter{display:flex;gap:6px;font-size:13px}
.acct-filter a{padding:3px 10px;border-radius:999px;border:1px solid #2A3142;color:#8A93A6;text-decoration:none}
.acct-filter a:hover{color:#F2F4F8;border-color:#3A4358}
.acct-filter a.on{background:rgba(255,176,32,.15);color:#FFB020;border-color:transparent}

.acct .dash-card{margin-top:0}
.acct-id h1{margin:0 0 10px;font-size:22px;letter-spacing:-.4px;color:#F2F4F8;line-height:1.2}
.acct-state{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:#C9CFDA}
.acct-state .dot{width:8px;height:8px;border-radius:50%;background:#6F7787}
.acct-state.on{color:#FFB020}
.acct-state.on .dot{background:#FFB020}
.acct-trial{margin-top:16px;display:flex;flex-direction:column;gap:6px}
.acct-trial-row{display:flex;justify-content:space-between;font-size:13px;color:#8A93A6}
.acct-bar{height:6px;border-radius:3px;background:#1C2130;overflow:hidden}
.acct-bar div{height:6px;border-radius:3px;background:#FFB020}
.acct-quiet{font-size:12.5px;color:#6F7787}
.acct-facts{margin:16px 0 0;padding-top:14px;border-top:1px solid #1C2130;display:grid;grid-template-columns:auto 1fr;gap:10px 14px;font-size:14px}
.acct-facts dt{color:#8A93A6}
.acct-facts dd{margin:0;text-align:right;color:#F2F4F8;overflow-wrap:anywhere}
.acct-facts dd.ok{color:#FFB020}
.acct-facts dd.wait{color:#8A93A6}
.acct-note{font-size:14px;color:#8A93A6;line-height:1.55}
.acct-foot{margin:4px 0 0;font-size:13px;color:#6F7787}
.acct-foot a{color:#8A93A6}
.acct-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.acct-tiles .tile{padding:18px 20px}
.acct-tiles .n{font-family:"Space Grotesk","IBM Plex Sans",Arial,sans-serif;font-weight:700;font-size:30px;letter-spacing:-1px;color:#F2F4F8}
.acct-tiles .cap{font-size:13.5px;color:#8A93A6;margin-top:2px}
@media (max-width:860px){.acct-grid{grid-template-columns:1fr}.acct-tiles{grid-template-columns:1fr 1fr}}

/* ---- the content controls bar (account page; shared with the removed gallery's styles, 2026-09-09) ---- */
.gal{padding:36px 24px 60px}
.gal-head{display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:10px}
.gal-head h1{margin:0;font-size:28px;color:#F2F4F8;letter-spacing:-.4px}
.gal-dates{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-top:8px}
.gal-custom{display:flex;gap:10px;align-items:center;font-size:13px;color:#8A93A6;opacity:.85}
.gal-custom.on{opacity:1;color:#FFB020}
.gal-custom input{padding:5px 8px;border:1px solid #2A3142;border-radius:7px;background:#0B0D12;color:#F2F4F8;font:inherit;font-size:13px;color-scheme:dark}
.gal-sub{margin-bottom:12px}
.gal-n{display:inline-block;margin-left:8px;padding:1px 9px;border-radius:999px;background:#1A1F2C;color:#8A93A6;font-size:12px;font-weight:700;vertical-align:middle}

/* ---- profile + the account page's content block (2026-09-09) ---- */
.prof-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:16px;margin-top:14px}
@media (max-width:820px){.prof-grid{grid-template-columns:1fr}}
.prof-facts{margin-top:8px;padding-top:0;border-top:0}
.prof-note{margin:14px 0 0;font-size:13px;color:#6F7787}
.prof-note a{color:#8A93A6}
.prof-form{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.prof-form input{width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid #2A3142;border-radius:8px;background:#0B0D12;color:#F2F4F8;font:inherit}
.prof-form input:focus{outline:none;border-color:#FFB020}
.prof-form .dash-btn{align-self:flex-start}
.acct-cf{display:flex;flex-direction:column;gap:14px}
.acct-cf .gal-head h1{font-size:20px}
.acct-cf .gal-dates{margin-top:-4px}
.acct-cf .gal-sub{margin-bottom:6px}
.dash-table td.kind{white-space:nowrap;color:#8A93A6}

/* ---- the "Show" popup: one piece, the way the platform shows it (2026-09-09) ---- */
.dash-table td.show{text-align:right;white-space:nowrap}
.post-dlg{border:0;padding:0;background:transparent;max-width:min(520px,94vw);width:100%}
.post-dlg::backdrop{background:rgba(0,0,0,.72)}
.post-card{background:#141824;border:1px solid #2A3142;border-radius:14px;overflow:hidden;color:#F2F4F8;font-size:15px}
.post-top{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid #1C2130}
.post-who{display:flex;gap:10px;align-items:center}
.post-avatar{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:#0B0D12;border:1px solid #2A3142}
.post-sub{font-size:12.5px;color:#8A93A6}
.post-close{border:0;background:transparent;color:#8A93A6;font-size:26px;line-height:1;cursor:pointer;padding:0 4px}
.post-close:hover{color:#F2F4F8}
.post-media{background:#000;max-height:70vh;display:flex;align-items:center;justify-content:center}
.post-media img,.post-media video{display:block;max-width:100%;max-height:70vh;width:auto;height:auto}
.post-text{padding:12px 14px;white-space:pre-wrap;line-height:1.5;color:#E4E7EE;max-height:32vh;overflow:auto}
.post-foot{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-top:1px solid #1C2130;font-size:13px;color:#8A93A6}