/* OrderOwl customer site — frozen design system (Clay-style patterns, own implementation).
   One job per screen. One card, one button, one label style everywhere.
   Palette, unchanged from the current site: charcoal, warm neutral, gold, red, green. */
:root{
  --bg:#faf6ef; --card:#fffdf7; --text:#221d19; --muted:#6d6257;
  --border:#e3d9c6; --charcoal:#221d19; --red:#a81e1e; --red-dark:#7d1414;
  --green:#1e6b34; --green-dark:#145225; --gold:#b9972f; --gold-light:#e8c766;
  --shadow:0 2px 14px rgba(34,29,25,.10);
  --radius:16px; --pad:24px; --gap:24px; --section-gap:40px;
}
[data-theme="dark"]{
  --bg:#171412; --card:#241e1a; --text:#f5efe6; --muted:#c9bfae;
  --border:#3d332b; --charcoal:#f5efe6; --red:#e05252; --red-dark:#ff7a6b;
  --green:#5cb87a; --green-dark:#7ed492; --gold:#e8c766; --gold-light:#f2d98a;
  --shadow:0 2px 14px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;font-size:17px}
a{color:var(--red)} [data-theme="dark"] a{color:var(--gold-light)}
/* Header: logo given real space, nav in one clean row */
header{position:sticky;top:0;background:var(--card);border-bottom:2px solid var(--gold);z-index:10}
.nav{max-width:1120px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.nav img.logo{width:64px;height:64px;object-fit:cover;border-radius:12px;border:2px solid var(--gold)}
.brand{font-weight:800;font-size:1.4rem;letter-spacing:.02em}
.brand span{color:var(--gold)}
.nav-links{margin-left:auto;display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.nav-links a{text-decoration:none;font-weight:600;color:var(--text);padding:6px 2px}
.nav-links a:hover{text-decoration:underline}
.theme-btn{cursor:pointer;border:2px solid var(--charcoal);background:var(--card);color:var(--text);border-radius:999px;padding:8px 14px;font-weight:700}
/* Page frame: wider, more breathing room */
main{max-width:1120px;margin:0 auto;padding:32px 24px 64px}
.page-head{margin:8px 0 32px;max-width:760px}
.page-head h1,.page-head h2{margin:.2em 0}
.eyebrow{display:inline-block;font-weight:800;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gold)}
h1{font-size:2.5rem;line-height:1.12;margin:.2em 0}
h2{font-size:1.75rem;line-height:1.2;margin:.2em 0 .5em}
h3{font-size:1.2rem;line-height:1.25;margin:.2em 0 .4em}
.lead{font-size:1.15rem;color:var(--muted);max-width:680px}
/* Hero: copy on the left, a real sample dashboard on the right — one job: start the trial */
.hero{background:var(--charcoal);color:#faf6ef;border-radius:18px;padding:36px 32px;box-shadow:var(--shadow);display:grid;grid-template-columns:1fr;gap:32px}
[data-theme="dark"] .hero{background:#2e2721;color:#f5efe6}
.hero h1{margin:.2em 0;font-size:2.5rem;line-height:1.12}
.hero h1 .gold{color:var(--gold-light)}
.hero p{max-width:640px}
.hero .tag{background:var(--gold);color:#221d19}
/* The one primary action, identical wording and styling everywhere it appears */
.btn{display:inline-block;border:0;border-radius:10px;padding:14px 22px;font-weight:800;text-decoration:none;cursor:pointer;font-size:1rem}
.btn-gold{background:var(--gold);color:#221d19}
.btn-red{background:var(--red);color:#fff}
.btn-green{background:var(--green);color:#fff}
.btn-outline{background:transparent;border:2px solid var(--text);color:var(--text);text-decoration:none}
.text-link{font-weight:700}
/* One card style, used on every page */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:var(--pad);margin:0 0 var(--gap);box-shadow:var(--shadow)}
.section{margin:0 0 var(--section-gap)}
.grid{display:grid;grid-template-columns:1fr;gap:var(--gap)}
@media(min-width:720px){.grid{grid-template-columns:1fr 1fr}.grid3{grid-template-columns:1fr 1fr 1fr}.hero{grid-template-columns:1.05fr .95fr}.hero h1{font-size:3rem}}
.tag{display:inline-block;background:var(--gold);color:#221d19;font-weight:800;border-radius:999px;padding:4px 12px;font-size:.85rem}
.tier-tag{background:var(--charcoal);color:#faf6ef}
.pill-red{background:var(--red);color:#fff}
.pill-green{background:var(--green);color:#fff}
.price{font-size:2.25rem;font-weight:900;margin:.2em 0}
.price small{font-size:.95rem;font-weight:600;color:var(--muted)}
/* Dashboard-in-the-hero: sample only, clearly labelled, tappable tabs */
.dashboard{background:#fffdf7;color:#221d19;border-radius:16px;padding:20px;border:2px solid var(--gold)}
.dashboard h3{color:#221d19}
.dashboard .sample-label{font-size:.85rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#6d6257}
.dash-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.dash-tab{border:2px solid #e3d9c6;background:#faf6ef;color:#221d19;border-radius:999px;padding:8px 14px;font-weight:700;cursor:pointer}
.dash-tab.active{background:#221d19;color:#faf6ef;border-color:#221d19}
.dash-row{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid #e3d9c6}
.dash-row:first-of-type{border-top:0}
.dash-row strong{font-size:1rem}
.dash-row span{color:#6d6257;text-align:right}
.dash-panel{display:none}
.dash-panel.active{display:block}
/* Pain cards: pain -> what OrderOwl shows -> next step, labelled in that order */
.pain-card h3{margin-top:0}
.pain-label{font-size:.85rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--gold)}
.pain-next{font-weight:700;margin-top:12px}
.logo-showcase{padding:32px 0;text-align:center}
.logo-large{width:100%;max-width:420px;border-radius:16px;border:3px solid var(--gold);display:block;margin:0 auto}
table{width:100%;border-collapse:collapse}
th,td{border:1px solid var(--border);padding:12px;text-align:left;vertical-align:top}
th{background:var(--charcoal);color:#faf6ef}
[data-theme="dark"] th{background:#2e2721}
label{display:block;font-weight:700;margin:14px 0 4px}
input,select,textarea{width:100%;padding:12px;border:1px solid var(--border);border-radius:10px;background:var(--bg);color:var(--text);font-size:1rem}
input[type="checkbox"]{width:auto;margin-right:8px}
.explain-btn{margin-top:12px;background:transparent;border:2px solid var(--gold);color:var(--text);border-radius:999px;padding:8px 14px;font-weight:700;cursor:pointer}
.explain-box{display:none;margin-top:12px;border-left:4px solid var(--gold);background:var(--bg);padding:12px 14px;border-radius:0 10px 10px 0}
.explain-box.open{display:block}
.explain-box strong{color:var(--gold)}
.notice{border:2px solid var(--red);border-radius:12px;padding:16px;margin:16px 0;background:var(--card)}
.notice-green{border-color:var(--green)}
footer{max-width:1120px;margin:0 auto;padding:24px 24px 48px;color:var(--muted)}
.check{list-style:none;padding:0}
.check li{padding-left:28px;position:relative;margin:10px 0}
.check li:before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:900}
.small{color:var(--muted);font-size:.92rem}

.billing-sides{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0}
.billing-side{border:1px solid #d9c9a8;border-radius:10px;padding:10px}
.billing-side:nth-child(3){grid-column:1 / -1}
.billing-side .btn{display:inline-block;margin-top:6px}

.counters-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-top:12px}
.counter-box{border:1px solid #e8c766;border-radius:12px;padding:14px;text-align:center}
.counter-label{font-weight:700;color:#e8c766;margin:0}
.counter-number{font-size:32px;font-weight:800;margin:6px 0;color:#fff}
@media(max-width:900px){.counters-grid{grid-template-columns:1fr 1fr}} @media(max-width:600px){.counters-grid{grid-template-columns:1fr}}