/* ============================
   TagOnDrop Home Page styles
   Scope: #homeApp
============================ */

/* ===== Base reset + typography ===== */
:root{
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --bg:#f6f6f6; /* keeps your existing look if unset elsewhere */
  --text:#111;
  --accent:#1e479b;
}

html, body{ margin:0; padding:0; }
*{ box-sizing:border-box; }

body{
  font-family: var(--font-sans);
  font-size:16px;
  line-height:1.45;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
/* Remove all default link styling site-wide */
a, a:link, a:visited { 
  color: inherit; 
  text-decoration: none; 
  outline: 0; 
  background: none; 
  -webkit-tap-highlight-color: transparent;
}
a:hover, a:focus, a:active {
  color: inherit;
  text-decoration: none;
  outline: 0;
}
/* kill default margins that cause jumps */
h1,h2,h3,h4,h5,h6,p,ul,ol,figure{ margin:0; }

/* keep footer spacing working from your page */
body.has-fixed-footer{ padding-bottom:var(--footer-h); }


#homeApp{
  --accent:#1e479b;
  --accent-2:#173a80;
  --card:#ffffff;
  --muted:#6b7280;
  --header-h:64px;
  --footer-h:56px;
  --checkout-h:640px;
}
@media (max-width:560px){ #homeApp{ --checkout-h:680px; } }

#homeApp *{ box-sizing:border-box; }

.td-header{
  height:var(--header-h);
  background:#0f1d3b;
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.td-header .wrap{
  height:100%;
  max-width:1100px;
  margin:0 auto;
  padding:0 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.td-brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  letter-spacing:.2px;
}
.td-brand .logo{
  width:36px;height:36px;border-radius:10px;
  display:grid;place-items:center;
  background:#1e479b;
  box-shadow:0 2px 6px rgba(0,0,0,.2);
}
.td-brand span{ font-size:18px; }

.td-nav{
  display:flex;align-items:center;gap:14px;
}
.td-nav a{
  color:#cdd6f4;text-decoration:none;font-size:14px;
}
.td-nav a:hover{ color:#fff; }

.td-footer{
  position:fixed;left:0;right:0;bottom:0;
  height:var(--footer-h);
  background:#f8fafc;
  border-top:1px solid #e5e7eb;
  display:flex;align-items:center;
  z-index:50;
}
.td-footer .wrap{
  max-width:1100px;margin:0 auto;padding:0 16px;
  width:100%;display:flex;justify-content:space-between;gap:10px;
  color:#334155;font-size:14px;
}
.td-footer a{ color:#1e479b;text-decoration:none; }
.td-footer a:hover{ text-decoration:underline; }

/* Keep footer from overlapping content */
body.has-fixed-footer{ padding-bottom:var(--footer-h); }

/* ---------- Home grid ---------- */
#homeApp .home-wrap{
  max-width:1100px;
  margin:0 auto;
  padding:24px 16px 40px;
  min-height:calc(100vh - var(--header-h) - var(--footer-h));
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:24px;
}
@media (max-width:980px){
  #homeApp .home-wrap{ grid-template-columns:1fr; }
}

/* Hero */
#homeApp .hero{
  background:var(--card);
  border-radius:14px;
  box-shadow:0 3px 12px rgba(0,0,0,.08);
  padding:22px;
}
#homeApp .hero h1{ margin:0 0 10px; font-size:32px; line-height:1.15; }
#homeApp .hero p{ margin:8px 0 14px; color:#374151; font-size:16px; }
#homeApp .hero .bullets{ list-style:none; padding:0; margin:14px 0 0; display:grid; gap:10px; }
#homeApp .hero .bullets li{ display:flex; align-items:flex-start; gap:10px; color:#111; }
#homeApp .hero .bullets i{ flex:0 0 auto; }
#homeApp .hero .meta{ color:var(--muted); font-size:13px; margin-top:10px; }

/* Signup / Pricing card */
#homeApp .signup-card{
  background:var(--card);
  border-radius:14px;
  box-shadow:0 3px 12px rgba(0,0,0,.10);
  padding:18px;
}
#homeApp .plans{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:12px;margin:0 0 14px;
}
#homeApp .plan{
  background:#fff;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.08);
  padding:16px;border:2px solid transparent;transition:border-color .2s, box-shadow .2s; cursor:pointer;
}
#homeApp .plan.active{ border-color:var(--accent); box-shadow:0 6px 16px rgba(30,71,155,.15); }
#homeApp .plan .title{ font-weight:700; }
#homeApp .plan .price{ color:var(--accent); font-weight:700; margin:8px 0 0; min-height:1.6em; }
#homeApp .inline-note{ color:var(--muted); font-size:12px; margin-top:6px; }

#homeApp .controls{
  display:grid; grid-template-columns:1fr 160px; gap:10px;
}
@media (max-width:560px){ #homeApp .controls{ grid-template-columns:1fr; } }

#homeApp input[type="email"]{
  width:100%;font-size:16px;padding:12px 14px;border-radius:10px;border:1px solid #d1d5db;outline:0;background:#fff;
}
#homeApp input[type="email"]:focus{ border-color:var(--accent); }
#homeApp button.btn{
  background:var(--accent);color:#fff;font-size:16px;border:0;border-radius:10px;padding:12px 16px;cursor:pointer;
}
#homeApp button.btn:disabled{ opacity:.6;cursor:not-allowed; }
#homeApp button.btn:hover:not(:disabled){ background:var(--accent-2); }
#homeApp #email-help{ color:var(--muted); font-size:13px; margin-top:8px; }

/* Checkout morph + frame */
#homeApp #morph-wrap{ position:relative;height:var(--checkout-h);overflow:hidden;max-width:560px;margin:18px 0 0; }
#homeApp .pane{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; will-change:transform,opacity; }
#homeApp #checkoutPane{ opacity:0; transform:translateY(100%); pointer-events:none; transition:opacity .55s ease, transform .55s cubic-bezier(.2,.7,0,1); }
html.morph #emailPane .controls{ transform:translateY(-90px); opacity:0; pointer-events:none; transition:transform .55s, opacity .55s; }
html.morph #emailPane #email-help{ transform:translateY(-100px); opacity:0; pointer-events:none; transition:transform .55s, opacity .55s; }
html.morph #checkoutPane{ opacity:1; transform:translateY(0); pointer-events:auto; }

#homeApp .checkout-card{ background:var(--card); border-radius:12px; box-shadow:0 3px 10px rgba(0,0,0,.10); padding:0; overflow:hidden;  display:flex; }
#homeApp .checkout-container{ width:100%; min-height:var(--checkout-h); border:none; }

/* Result modal */
 #signupResult{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.45); z-index:9999; }
 #signupResult .card{ background:#fff; border-radius:14px; padding:20px; width:min(520px,92vw); box-shadow:0 10px 25px rgba(0,0,0,.25); text-align:left; }
 #signupResult .title{ font-weight:800; margin:0 0 8px; }
 #signupResult .kv{ display:grid; grid-template-columns:130px 1fr; gap:8px; margin:12px 0 6px; }
 #signupResult .kv .mono{ font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }
 #signupResult .actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:14px; }
 #signupResult .btn{ background:var(--accent); color:#fff; border:0; border-radius:10px; padding:10px 16px; cursor:pointer; text-decoration:none; display:inline-block; }
 #signupResult .btn.secondary{ background:#e5e7eb; color:#111; }
 #signupResult .muted{ color:#6b7280; font-size:13px; }



/* ===== Gradient hero ===== */
#homeApp .hero-landing{
  position:relative;
  border-radius:16px;
  padding:48px 24px;
  background:linear-gradient(135deg,#1e479b 0%,#173a80 45%,#0f1d3b 100%);
  color:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}
#homeApp .hero-landing h1{
  font-size:40px; line-height:1.1; margin:0 0 10px;
}
#homeApp .hero-landing p.sub{
  font-size:18px; opacity:.95; margin:0 0 12px; max-width:70ch;
}
#homeApp .hero-tags{
  display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 0;
}
#homeApp .hero-tag{
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.10);
  padding:6px 10px; border-radius:999px; font-size:14px;
  display:inline-flex; align-items:center; gap:6px;
}
#homeApp .hero-ctas{ margin-top:18px; display:flex; gap:10px; flex-wrap:wrap; }
#homeApp .btn-primary{
  background:#fff; color:#0f1d3b; text-decoration:none;
  padding:12px 16px; border-radius:10px; display:inline-block; font-weight:600;
}
#homeApp .btn-secondary{
  background:transparent; color:#fff; text-decoration:none;
  padding:12px 16px; border-radius:10px; display:inline-block; border:1px solid rgba(255,255,255,.45);
}
@media (max-width:700px){
  #homeApp .hero-landing h1{ font-size:32px; }
}


/* ===== Hero benefits ===== */
#homeApp .hero-benefits{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px;padding:0;
}
@media (max-width:700px){ #homeApp .hero-benefits{ grid-template-columns:1fr; } }
#homeApp .hero-benefits li{
  list-style:none;display:flex;gap:10px;align-items:flex-start;color:#fff;opacity:.95;
}
#homeApp .hero-benefits i{ flex:0 0 auto; }

/* ===== How it works ===== */
#homeApp .how{
  background:#fff;border-radius:14px;box-shadow:0 3px 12px rgba(0,0,0,.08);padding:22px;margin-top:20px;
}
#homeApp .how h2{ margin:0 0 8px;font-size:24px; }
#homeApp .how-steps{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:12px;
}
#homeApp .how-step{
  background:#f8fafc;border:1px solid #e5e7eb;border-radius:12px;padding:14px;
}
#homeApp .how-step h3{
  margin:0 0 6px;font-size:16px;display:flex;gap:8px;align-items:center;color:#0f1d3b;
}
#homeApp .how-step p{ margin:0;color:#374151;font-size:14px; }


/* ===== Industries ===== */
#homeApp .industries{
  background:#fff;border-radius:14px;box-shadow:0 3px 12px rgba(0,0,0,.08);
  padding:22px;margin-top:20px;
}
#homeApp .industries h2{ margin:0 0 8px; font-size:24px; }
#homeApp .industry-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:14px; margin-top:12px;
}
#homeApp .industry-card{
  background:#f8fafc;border:1px solid #e5e7eb;border-radius:12px;padding:14px;
}
#homeApp .industry-card h3{
  margin:0 0 6px;font-size:16px;display:flex;gap:8px;align-items:center;color:#0f1d3b;
}
#homeApp .asset-list{
  margin:6px 0 0; padding-left:18px; color:#374151; font-size:14px;
}
#homeApp .industries-cta{ margin-top:14px; }

/* Extra space under the "Simple, fast, and reliable" section */
#homeApp #about { margin-bottom: 32px; }


/* Scoped FAQ cosmetics that sit on top of your existing cards */
#homeApp .faq-card .faq-list{ margin-top:12px; }
#homeApp .faq-card details{
  background:#f8fafc;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:12px 14px;
  margin:10px 0;
}
#homeApp .faq-card summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-weight:600;
  color:#0f1d3b;
}
#homeApp .faq-card summary::-webkit-details-marker{ display:none; }
#homeApp .faq-card details[open]{ background:#fff; }
#homeApp .faq-card details > div{ margin-top:10px; color:#374151; font-size:14px; }
#homeApp .faq-meta{ color:#6b7280; font-size:13px; margin:0 0 14px; }

.menuitem{
      display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
}


/* ===== Driver app split section ===== */
#homeApp .driver-simple{ margin-top:20px; }
#homeApp .driver-simple .split-card{
  background:#fff; border-radius:14px; box-shadow:0 3px 12px rgba(0,0,0,.08);
  overflow:hidden; display:grid; grid-template-columns:1fr 1fr; align-items:stretch;
}
@media (max-width:900px){ #homeApp .driver-simple .split-card{ grid-template-columns:1fr; } }

#homeApp .driver-simple .media{ position:relative; }
#homeApp .driver-simple .media img{
  display:block; width:100%; height:100%; object-fit:cover;
}

#homeApp .driver-simple .copy{ padding:22px; }
#homeApp .driver-simple .eyebrow{
  color:#6b7280; font-size:12px; letter-spacing:.08em; text-transform:uppercase; margin:0 0 6px;
}
#homeApp .driver-simple h2{ margin:0 0 8px; font-size:24px; color:#0f1d3b; }
#homeApp .driver-simple p{ color:#374151; }

#homeApp .driver-simple .ticks{
  list-style:none; padding:0; margin:12px 0 0; display:grid; gap:8px;
}
#homeApp .driver-simple .ticks li{
  display:flex; gap:8px; align-items:flex-start; color:#111;
}
#homeApp .driver-simple .ticks i{ flex:0 0 auto; color:var(--accent); }


/* ===== Works-with badges ===== */
#homeApp .works-with{ margin-top:10px; color:var(--muted); font-size:13px; }
#homeApp .works-with .label{ opacity:.95; }
#homeApp .works-with .badges{
  display:flex; flex-wrap:wrap; gap:8px; margin-top:8px;
}
#homeApp .works-with .badge{
  display:inline-flex; align-items:center; gap:6px;
  background:#fff; border:1px solid #e5e7eb; border-radius:999px;
  padding:6px 10px; box-shadow:0 1px 2px rgba(0,0,0,.04);
}
#homeApp .works-with .badge i{ width:16px; height:16px; color:var(--accent); }


/* ===== Manage anywhere section ===== */
#homeApp .manage-anywhere{ margin-top:20px; }
#homeApp .manage-anywhere .card{
  background:#fff; border-radius:14px; box-shadow:0 3px 12px rgba(0,0,0,.08);
  padding:22px; display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:center;
}
@media (max-width:980px){
  #homeApp .manage-anywhere .card{ grid-template-columns:1fr; }
}

#homeApp .manage-anywhere .copy .eyebrow{
  color:#6b7280; font-size:12px; letter-spacing:.08em; text-transform:uppercase; margin:0 0 6px;
}
#homeApp .manage-anywhere h2{ margin:0 0 8px; font-size:24px; color:#0f1d3b; }
#homeApp .manage-anywhere p{ color:#374151; }

#homeApp .manage-anywhere .app-modes{
  display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 6px;
}
#homeApp .manage-anywhere .app-modes .mode{
  display:inline-flex; align-items:center; gap:6px;
  background:#f8fafc; border:1px solid #e5e7eb; border-radius:999px;
  padding:6px 10px; font-size:13px; color:#111;
}
#homeApp .manage-anywhere .app-modes .mode i{ width:16px; height:16px; color:var(--accent); }

#homeApp .manage-anywhere .ticks{
  list-style:none; padding:0; margin:12px 0 0; display:grid; gap:8px;
}
#homeApp .manage-anywhere .ticks li{ display:flex; gap:8px; align-items:flex-start; color:#111; }
#homeApp .manage-anywhere .ticks i{ flex:0 0 auto; color:var(--accent); }

/* Screenshots layout */
#homeApp .manage-anywhere .gallery{ position:relative; min-height:280px; }
#homeApp .manage-anywhere .gallery .desk{
  width:100%; border-radius:12px; display:block; box-shadow:0 8px 20px rgba(0,0,0,.12);
}
#homeApp .manage-anywhere .gallery .mobile{
  position:absolute; right:-8px; bottom:-8px; width:33%;
  border-radius:14px; box-shadow:0 10px 24px rgba(0,0,0,.18);
}
@media (max-width:980px){
  #homeApp .manage-anywhere .gallery .mobile{
    position:static; width:100%; margin-top:10px; display:block;
  }
}

#homeApp .btn-primary-alt {
    background: var(--accent);
    color: var(--card);
    text-decoration: none;
    padding: 12px 16px;
    border-radius: 10px;
    display: inline-block;
    font-weight: 600;
    box-shadow: 0px 0px 20px -12px #000;
}


/* Bulleted feature list */
/* Bulleted feature list */
#homeApp .bullets{list-style:none;margin:0;padding:0;display:grid;gap:10px}
#homeApp .bullets li{display:flex;align-items:flex-start;gap:10px}
#homeApp .bullets li i,
#homeApp .bullets li svg{width:22px;height:22px;flex:0 0 22px;display:block;margin-top:2px}
#homeApp .bullets li>div{flex:1}