/*
Theme Name: CrossList Pilot
Theme URI: https://crosslistpilot.com
Author: We Repair Computers
Description: Marketing site and customer dashboard shell for CrossList Pilot — cross-list, price, and track eBay and Amazon sales from one dashboard.
Version: 0.2.0
Requires PHP: 7.4
Text Domain: crosslistpilot
*/

:root{
  --bg:#171C36;
  --panel:#212648;
  --panel-raised:#2A3057;
  --border:#333A66;
  --border-strong:#454C7D;
  --ink:#EEF0F7;
  --ink-soft:#9098BE;
  --teal:#C41E2E;
  --teal-dim:#3A1620;
  --amber:#E8A33D;
  --amber-dim:#3A2E1C;
  --green:#4FAE6D;
  --green-dim:#163527;
  --danger:#E2604F;
  --radius:5px;
}
*{box-sizing:border-box;}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Inter',sans-serif;font-size:16px;line-height:1.6;}
.mono{font-family:'IBM Plex Mono',monospace;}
h1,h2,h3,h4{font-family:'Space Grotesk',sans-serif;font-weight:600;margin:0 0 .5em;line-height:1.15;letter-spacing:-.01em;}
a{color:var(--teal);}
img{max-width:100%;display:block;}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px;}
.small{font-size:13px;color:var(--ink-soft);}

/* header */
.site-header{border-bottom:1px solid var(--border);background:var(--panel);}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;}
.brand .mark{width:26px;height:26px;flex-shrink:0;}
.brand .wordmark{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:18px;color:var(--ink);}
.brand .wordmark em{font-style:normal;color:var(--amber);}
.main-nav ul{list-style:none;display:flex;gap:28px;margin:0;padding:0;}
.main-nav a{color:var(--ink-soft);text-decoration:none;font-size:14.5px;}
.main-nav a:hover{color:var(--ink);}
.header-cta{display:flex;gap:10px;align-items:center;}

.btn{display:inline-block;font-family:'Inter',sans-serif;font-size:14px;font-weight:500;padding:10px 18px;border-radius:var(--radius);border:1px solid var(--teal);background:var(--teal);color:#FFFFFF;text-decoration:none;cursor:pointer;}
.btn.secondary{background:transparent;color:var(--ink);border-color:var(--border-strong);}
.btn.amber{background:var(--amber);border-color:var(--amber);color:#2A1F0C;}
.btn:hover{opacity:.88;}

/* hero */
.hero{border-bottom:1px solid var(--border);padding:72px 0 64px;}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;}
.hero-eyebrow{font-size:13px;color:var(--teal);font-family:'IBM Plex Mono',monospace;margin-bottom:14px;}
.hero h1{font-size:44px;max-width:14ch;letter-spacing:-.02em;color:var(--ink);}
.hero p{font-size:17px;color:var(--ink-soft);max-width:46ch;margin:18px 0 28px;}
.hero-actions{display:flex;gap:12px;}
.hero-panel{background:var(--panel);border:1px solid var(--border-strong);border-radius:8px;overflow:hidden;}
.hero-panel .bar{background:var(--panel-raised);padding:8px 14px;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--ink-soft);border-bottom:1px solid var(--border);display:flex;justify-content:space-between;}
.hero-panel .rows{padding:16px;}
.hero-row{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--border);font-size:13.5px;}
.hero-row:last-child{border-bottom:none;}
.hero-row .tag{font-family:'IBM Plex Mono',monospace;font-size:10.5px;padding:2px 7px;border-radius:20px;background:var(--green-dim);color:var(--green);}
.hero-row .tag.amber{background:var(--amber-dim);color:var(--amber);}

/* feature grid */
.features{padding:64px 0;border-bottom:1px solid var(--border);}
.section-head{max-width:56ch;margin-bottom:40px;}
.section-head h2{font-size:30px;color:var(--ink);}
.section-head p{color:var(--ink-soft);font-size:16px;}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);}
.feature{background:var(--panel);padding:26px 24px;}
.feature h3{font-size:16.5px;margin-bottom:8px;color:var(--ink);}
.feature p{font-size:14px;color:var(--ink-soft);margin:0;}

/* how it works */
.how{padding:64px 0;border-bottom:1px solid var(--border);background:var(--panel);}
.how-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:8px;}
.how-step .num{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--amber);margin-bottom:10px;}
.how-step h4{font-size:15.5px;margin-bottom:6px;color:var(--ink);}
.how-step p{font-size:13.5px;color:var(--ink-soft);margin:0;}

/* honesty panel */
.honesty{padding:56px 0;border-bottom:1px solid var(--border);}
.honesty .box{background:var(--panel);border:1px solid var(--border-strong);border-radius:8px;padding:28px 30px;max-width:760px;}
.honesty h3{font-size:18px;color:var(--ink);}
.honesty p{color:var(--ink-soft);font-size:14.5px;margin:0;}
.honesty ul{margin:14px 0 0;padding-left:20px;color:var(--ink-soft);font-size:14px;}
.honesty li{margin-bottom:6px;}

/* cta */
.cta-section{padding:70px 0;text-align:center;}
.cta-section h2{font-size:28px;max-width:22ch;margin:0 auto 14px;color:var(--ink);}
.cta-section p{color:var(--ink-soft);margin:0 auto 26px;max-width:44ch;}

/* footer */
.site-footer{border-top:1px solid var(--border);padding:36px 0;background:var(--panel);}
.site-footer .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;}
.site-footer .small{margin:0;}
.site-footer .brand .wordmark{font-size:15px;}
.site-footer .brand .mark{width:20px;height:20px;}

/* marketplace bar */
.marketplaces{padding:36px 0;border-bottom:1px solid var(--border);}
.marketplaces-label{font-size:11px;color:var(--ink-soft);text-align:center;margin-bottom:14px;letter-spacing:.06em;}
.marketplaces-row{display:flex;justify-content:center;gap:48px;}
.marketplaces-row span{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:20px;color:var(--ink-soft);}

/* contact */
.contact{padding:64px 0;}
.contact-notice{padding:12px 16px;border-radius:var(--radius);margin-bottom:20px;font-size:14px;max-width:560px;}
.contact-notice.success{background:var(--green-dim);color:var(--ink);border:1px solid var(--green);}
.contact-notice.error{background:var(--amber-dim);color:var(--ink);border:1px solid var(--amber);}
.contact-form{max-width:560px;}
.contact-form .field{margin-bottom:16px;}
.contact-form label{display:block;font-size:12.5px;color:var(--ink-soft);margin-bottom:6px;}
.contact-form input, .contact-form textarea{
  width:100%;background:var(--panel);border:1px solid var(--border-strong);border-radius:var(--radius);
  color:var(--ink);padding:10px 12px;font-family:'Inter',sans-serif;font-size:14px;
}
.contact-form input:focus, .contact-form textarea:focus{outline:none;border-color:var(--teal);}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}

/* footer */
.site-footer{border-top:1px solid var(--border);padding:48px 0 24px;background:var(--panel);}
.footer-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px;padding-bottom:32px;}
.footer-brand .brand{margin-bottom:10px;}
.footer-brand .mark{width:22px;height:22px;}
.footer-brand .wordmark{font-size:16px;}
.footer-col h4{font-family:'Space Grotesk',sans-serif;font-size:13px;color:var(--ink);margin-bottom:12px;}
.footer-col ul{list-style:none;margin:0;padding:0;}
.footer-col li{margin-bottom:8px;}
.footer-col a{color:var(--ink-soft);text-decoration:none;font-size:13.5px;}
.footer-col a:hover{color:var(--teal);}
.footer-bottom{border-top:1px solid var(--border);padding-top:20px;}
.footer-bottom .small{margin:0;}

/* generic page */
.page-content{padding:56px 0;max-width:760px;margin:0 auto;}
.page-content h1{font-size:32px;color:var(--ink);}
.page-content, .page-content p{color:var(--ink-soft);}

@media (max-width:860px){
  .hero .wrap{grid-template-columns:1fr;}
  .hero h1{font-size:34px;}
  .feature-grid{grid-template-columns:1fr;}
  .how-steps{grid-template-columns:1fr 1fr;}
  .main-nav{display:none;}
  .footer-top{grid-template-columns:1fr 1fr;}
  .contact-grid{grid-template-columns:1fr;}
  .marketplaces-row{gap:28px;}
}