/* ===================================================================
   SubmitX — FAQ shared design tokens & components
   Matches Industries.html visual system 1:1
   ================================================================ */

:root{
  --orange:#ff6b1a;
  --orange-50:#fff4ec;
  --orange-100:#ffe6d4;
  --orange-200:#ffd2b3;
  --orange-600:#ff5c00;
  --ink:#0b1220;
  --ink-2:#1b2333;
  --muted:#5b6577;
  --muted-2:#8892a3;
  --line:#ececef;
  --line-2:#f1f1f3;
  --bg:#ffffff;
  --bg-2:#fafafa;
  --green:#1f9d55;
  --green-50:#e7f7ee;
  --shadow-sm: 0 1px 2px rgba(15,20,35,.04), 0 1px 1px rgba(15,20,35,.03);
  --shadow-md: 0 12px 28px -10px rgba(15,20,35,.12), 0 4px 10px -6px rgba(15,20,35,.06);
  --shadow-lg: 0 40px 80px -30px rgba(15,20,35,.20), 0 10px 30px -10px rgba(15,20,35,.08);
  --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:22px;
}
*{box-sizing:border-box}
html,body{margin:0;overflow-x:hidden;background:var(--bg);color:var(--ink);font-family:'Inter',system-ui,-apple-system,Segoe UI,sans-serif;-webkit-font-smoothing:antialiased;font-feature-settings:"ss01","cv11"}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}

/* ===== Mobile burger ===== */
.burger{display:none;background:none;border:none;cursor:pointer;padding:8px;border-radius:8px;color:var(--ink-2);align-items:center;justify-content:center;margin-left:auto;flex-shrink:0;-webkit-tap-highlight-color:transparent}
.burger svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round}

/* ===== Mobile responsive ===== */
@media(max-width:1024px){
  /* !important: later base rules otherwise keep the desktop padding(40)/gap(36),
     overflowing the mobile row (logo + toggles + burger) off-screen */
  .topbar-inner{padding:12px 16px !important;gap:10px !important}
  /* !important: a later base rule (.nav{display:flex}) otherwise wins the cascade
     and the desktop nav + actions overflow off-screen on mobile (burger replaces them) */
  .nav{display:none !important}
  .top-actions{display:none !important}
  .burger{display:flex}
  .page{padding:16px 16px 60px}
  .page.with-sidebar{grid-template-columns:1fr}
  .sidebar{display:none}
  .breadcrumbs{grid-column:auto}
  .sec-h{flex-direction:column;align-items:flex-start;gap:6px;margin:0 0 16px}
  .cta{flex-direction:column;gap:16px;text-align:center}
  .cta .actions{justify-content:center}
  .cta-orange{flex-direction:column;gap:16px;padding:28px 24px;text-align:center}
  .cta-orange .actions{justify-content:center}
}

/* ===== Topbar ===== */
.topbar{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line)}
.topbar-inner{max-width:1440px;margin:0 auto;padding:16px 40px;display:flex;align-items:center;gap:36px}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:20px;letter-spacing:-0.02em;color:#0b1220;text-decoration:none}
.logo img.mark{width:36px;height:36px;display:block;object-fit:contain}
.logo img.brand{height:42px;width:auto;display:block;object-fit:contain}
.logo img, .sx-logo img, .auth-top .logo img{}
.logo .wm{display:flex;align-items:baseline;gap:1px}
.logo .wm .s{color:#0b1220}
.logo .wm .x{color:var(--orange)}
.nav{display:flex;align-items:center;gap:6px;margin-left:8px}
.nav a{padding:8px 12px;border-radius:9px;font-size:14.5px;font-weight:500;color:#2b3344}
.nav a:hover{background:#f5f6f8}
.nav a.active{color:var(--orange);background:var(--orange-50)}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:10px}
.btn-ghost{padding:9px 14px;border-radius:10px;border:1px solid var(--line);background:#fff;font-weight:500;color:#1b2333;font-size:14px}
.btn-ghost:hover{background:#fafafa}
.btn-primary{padding:10px 16px;border-radius:10px;background:var(--orange);color:#fff;border:0;font-weight:600;font-size:14px;box-shadow:0 6px 14px -4px rgba(255,107,26,.45);transition:background .12s}
.btn-primary:hover{background:var(--orange-600)}

/* ===== Layout ===== */
.page{max-width:1440px;margin:0 auto;padding:24px 40px 80px}
.page.with-sidebar{display:grid;grid-template-columns:260px 1fr;gap:32px}
.breadcrumbs{grid-column:1 / -1;display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px;margin:6px 0 8px}
.breadcrumbs .sep{color:#cfd3dc}
.breadcrumbs .curr{color:var(--ink);font-weight:500}

/* ===== Sidebar (sub-pages) ===== */
.sidebar{position:sticky;top:88px;align-self:start}
.side-title{font-size:11.5px;letter-spacing:.14em;font-weight:600;color:var(--muted-2);margin:6px 8px 12px}
.side-list{display:flex;flex-direction:column;gap:2px}
.side-item{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:11px;font-size:14px;color:#2b3344;font-weight:500;border:1px solid transparent;cursor:pointer;transition:background .12s, color .12s;text-decoration:none}
.side-item:hover{background:#fafafa}
.side-item .dot{width:6px;height:6px;border-radius:50%;background:#cfd3dc;flex:none}
.side-item.active{background:var(--orange-50);color:var(--orange);border-color:var(--orange-100)}
.side-item.active .dot{background:var(--orange)}
.side-foot{margin-top:18px;padding:14px;border:1px dashed var(--line);border-radius:14px;font-size:12.5px;color:var(--muted);line-height:1.5}
.side-foot strong{color:var(--ink);font-weight:600;display:block;margin-bottom:4px}
.side-foot .btn-primary{margin-top:10px;padding:9px 12px;font-size:12.5px;display:inline-block}

/* ===== Generic pill / badge ===== */
.pill{display:inline-flex;align-items:center;gap:8px;padding:5px 10px 5px 8px;border:1px solid var(--orange-100);background:var(--orange-50);color:var(--orange);border-radius:999px;font-size:12px;font-weight:600;width:fit-content}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--orange)}
.pill.green{border-color:#bfe7cd;background:var(--green-50);color:var(--green)}
.pill.green::before{background:var(--green)}
.pill.dark{border-color:#1b2333;background:#0f172a;color:#fff}
.pill.dark::before{background:#22d37e}

/* ===== Section headers ===== */
.sec-h{display:flex;align-items:end;justify-content:space-between;margin:0 4px 22px}
.sec-h h2{font-size:30px;letter-spacing:-0.028em;margin:0;font-weight:700;line-height:1.1}
.sec-h p{margin:6px 0 0;color:var(--muted);max-width:540px;font-size:14.5px;line-height:1.55}
.sec-h .right{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:8px}
.sec-h .right .dotsep{color:#cfd3dc}

/* ===== Feature card ===== */
.feat{border:1px solid var(--line);border-radius:16px;padding:22px;background:#fff;transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease}
.feat:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:#e3e6ec}
.feat-ic{width:38px;height:38px;border-radius:11px;background:var(--orange-50);color:var(--orange);display:grid;place-items:center;margin-bottom:14px;border:1px solid var(--orange-100)}
.feat-ic svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.feat-ic.green{background:var(--green-50);border-color:#bfe7cd;color:var(--green)}
.feat h3{font-size:15px;font-weight:600;margin:0 0 6px;letter-spacing:-0.012em}
.feat p{margin:0;color:var(--muted);font-size:13px;line-height:1.55}

/* ===== CTA block ===== */
.cta{margin-top:48px;border-radius:20px;border:1px solid var(--line);background:linear-gradient(180deg,#fff, #fafafa);padding:36px;display:flex;align-items:center;gap:24px;justify-content:space-between}
.cta h3{margin:0;font-size:24px;letter-spacing:-0.02em;font-weight:700}
.cta p{margin:6px 0 0;color:var(--muted);font-size:14px}
.cta .actions{display:flex;gap:10px}

/* Big orange CTA */
.cta-orange{margin-top:48px;border-radius:20px;background:linear-gradient(135deg,#ff6b1a 0%, #ff5c00 65%, #f24c00 100%);padding:40px 44px;display:flex;align-items:center;gap:24px;justify-content:space-between;color:#fff;position:relative;overflow:hidden;box-shadow:0 30px 60px -20px rgba(255,92,0,.45)}
.cta-orange::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 100% 0%, rgba(255,255,255,.18), transparent 50%), radial-gradient(80% 80% at 0% 100%, rgba(0,0,0,.18), transparent 50%);pointer-events:none}
.cta-orange h3{margin:0;font-size:26px;letter-spacing:-0.02em;font-weight:700;color:#fff;position:relative}
.cta-orange p{margin:8px 0 0;color:rgba(255,255,255,.85);font-size:14.5px;max-width:520px;position:relative}
.cta-orange .actions{display:flex;gap:10px;position:relative}
.cta-orange .btn-ghost{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.30);color:#fff}
.cta-orange .btn-ghost:hover{background:rgba(255,255,255,.22)}
.cta-orange .btn-primary{background:#fff;color:var(--ink);box-shadow:0 10px 24px -8px rgba(0,0,0,.25)}
.cta-orange .btn-primary:hover{background:#fff}

/* ===== Tiny icon stroke utility ===== */
.ico{stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ===== Accordion (FAQ Q&A) ===== */
.acc{display:flex;flex-direction:column;gap:10px}
.acc-item{border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden;transition:border-color .15s, box-shadow .15s}
.acc-item:hover{border-color:#e3e6ec}
.acc-item[open]{border-color:var(--orange-100);box-shadow:0 6px 18px -8px rgba(255,107,26,.18)}
.acc-item summary{list-style:none;cursor:pointer;padding:18px 22px;display:flex;align-items:center;gap:14px;font-weight:600;font-size:15px;letter-spacing:-0.005em;color:var(--ink)}
.acc-item summary::-webkit-details-marker{display:none}
.acc-q-no{font-size:12px;font-weight:600;color:var(--muted-2);font-variant-numeric:tabular-nums;flex:none;width:28px}
.acc-q-text{flex:1}
.acc-caret{width:20px;height:20px;border-radius:6px;display:grid;place-items:center;color:var(--muted-2);transition:transform .2s, color .2s, background .2s;flex:none}
.acc-item[open] .acc-caret{transform:rotate(180deg);color:var(--orange);background:var(--orange-50)}
.acc-body{padding:0 22px 20px 64px;color:var(--muted);font-size:14px;line-height:1.65}
.acc-body p{margin:0 0 10px}
.acc-body p:last-child{margin:0}
.acc-body strong{color:var(--ink);font-weight:600}
.acc-body ul{margin:8px 0 0;padding-left:18px}
.acc-body li{margin:4px 0}

/* ===== Tweaks panel ===== */
#tweaks{position:fixed;right:18px;bottom:18px;width:300px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);padding:14px;z-index:100;display:none;font-size:13px}
#tweaks.on{display:block}
#tweaks h4{margin:0 0 8px;font-size:13px}
#tweaks .row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px}
#tweaks select,#tweaks input[type=color]{padding:6px 8px;border:1px solid var(--line);border-radius:8px;font-family:inherit;font-size:12.5px}
#tweaks .x{position:absolute;top:8px;right:8px;background:transparent;border:0;color:var(--muted-2);font-size:14px}

/* ===================================================================
   DARK THEME + preference toggles (site-wide dark/EN) — Template B
   =================================================================== */
:root[data-theme="dark"]{
  --orange-50:rgba(255,107,26,.14);
  --orange-100:rgba(255,107,26,.30);
  --orange-200:rgba(255,107,26,.42);
  --ink:#f3f4f6;
  --ink-2:#e5e7eb;
  --muted:#9aa3b8;
  --muted-2:#7c8499;
  --line:#272727;
  --line-2:#202020;
  --bg:#0f0f0f;
  --bg-2:#161616;
  --green:#22d37e;
  --green-50:rgba(34,211,126,.14);
  color-scheme:dark;
}
/* Topbar + nav */
:root[data-theme="dark"] .topbar{background:rgba(15,15,15,.86);border-bottom-color:var(--line)}
:root[data-theme="dark"] .logo,
:root[data-theme="dark"] .logo .wm .s{color:var(--ink)}
:root[data-theme="dark"] .nav a{color:var(--ink-2)}
:root[data-theme="dark"] .nav a:hover{background:var(--bg-2)}
:root[data-theme="dark"] .btn-ghost{background:transparent;color:var(--ink-2);border-color:var(--line)}
:root[data-theme="dark"] .btn-ghost:hover{background:var(--bg-2)}
:root[data-theme="dark"] .burger{color:var(--ink-2)}
:root[data-theme="dark"] .topbar .logo img{filter:invert(1) hue-rotate(180deg) saturate(1.15)}
:root[data-theme="dark"] .breadcrumbs .sep,
:root[data-theme="dark"] .side-item .dot{color:#444;background:#333}
:root[data-theme="dark"] .breadcrumbs .curr{color:var(--ink)}
/* Surfaces / cards */
:root[data-theme="dark"] .feat,
:root[data-theme="dark"] .acc-item,
:root[data-theme="dark"] #tweaks{background:var(--bg-2);border-color:var(--line)}
:root[data-theme="dark"] .feat:hover,
:root[data-theme="dark"] .acc-item:hover{border-color:#3a3a3a}
:root[data-theme="dark"] .cta{background:linear-gradient(180deg,var(--bg-2),var(--bg));border-color:var(--line)}
:root[data-theme="dark"] .side-item{color:var(--ink-2)}
:root[data-theme="dark"] .side-item:hover{background:var(--bg-2)}
:root[data-theme="dark"] .side-foot strong,
:root[data-theme="dark"] .acc-body strong{color:var(--ink)}
:root[data-theme="dark"] .cta-orange .btn-primary{color:#3a1900;background:#fff}
/* Minimal inline-styled footer used by Template B pages */
:root[data-theme="dark"] body > footer[style]{background:var(--bg-2)!important;border-top-color:var(--line)!important;color:var(--muted)!important}
:root[data-theme="dark"] body > footer[style] a{color:var(--muted)!important}

/* Preference toggles (theme + language) */
.sx-prefs{display:flex;align-items:center;gap:8px;flex-shrink:0}
.sx-theme-toggle{width:38px;height:38px;border-radius:9px;border:1.5px solid var(--line);background:transparent;color:var(--ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .15s,background .15s}
.sx-theme-toggle:hover{border-color:var(--muted);background:var(--bg-2)}
.sx-theme-toggle svg{width:18px;height:18px;display:block}
.sx-theme-toggle .sx-sun{display:none}
:root[data-theme="dark"] .sx-theme-toggle .sx-moon{display:none}
:root[data-theme="dark"] .sx-theme-toggle .sx-sun{display:block}
.sx-lang-toggle{display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:9px;overflow:hidden}
.sx-lang-toggle button{border:none;background:transparent;cursor:pointer;font-family:inherit;font-size:12.5px;font-weight:700;color:var(--muted);padding:8px 11px;line-height:1;transition:background .15s,color .15s}
.sx-lang-toggle button:hover{color:var(--ink)}
.sx-lang-toggle button.active{background:var(--orange);color:#fff}
@media(max-width:1024px){
  .sx-prefs{margin-left:auto;margin-right:4px;gap:6px}
  .sx-theme-toggle{width:36px;height:36px}
  .sx-lang-toggle button{padding:7px 9px;font-size:12px}
}