/* =========================================================
   Link2Manage — Executive Gold (Institutional)
   Deep Navy + Gold (Massport-style)
   ========================================================= */

/* -------------------------
   1) Design Tokens
   ------------------------- */
:root{
  /* Link2Manage marketing — aligned to app palette */
  --rust-700:#A94418;
  --rust-600:#B94C1A;
  --rust-500:#C5541E;
  --rust-450:#E06A2C;
  --gold-200:#F2C77A;

  --navy-900:#24130C;
  --navy-850:#2D170E;
  --navy-800:#361C11;
  --navy-750:#442315;
  --navy-700:#522B18;

  --bg:#FFF6EF;
  --bg2:#FFFDF9;
  --card:#FFFFFF;
  --card2:#FFF8F1;

  --text:#19120E;
  --text2:rgba(25,18,14,.78);
  --text3:rgba(25,18,14,.58);

  --line:rgba(25,18,14,.10);
  --line2:rgba(197,84,30,.20);
  --shadow:0 18px 50px rgba(17,12,9,.14);

  --r:10px;
  --r2:8px;
  --max:1200px;

  --accent:var(--rust-500);
  --accent2:var(--rust-450);

  --utility-bg:rgba(255,255,255,.88);
  --header-bg:rgba(255,250,245,.90);

  --ghost-bg:rgba(25,18,14,.04);
  --ghost-bg-hover:rgba(25,18,14,.07);
  --ghost-bd:rgba(25,18,14,.12);

  --pill-bg:rgba(197,84,30,.08);
  --pill-bd:rgba(197,84,30,.18);

  --mock-top-bg: var(--card2);
  --mock-dot-bg: var(--line2);
  --hero-bg:
    radial-gradient(1200px 520px at 22% 0%, rgba(224,106,44,.10), transparent 60%),
    radial-gradient(900px 480px at 80% 10%, rgba(242,199,122,.12), transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  --hero-bd: var(--line);

  --hero-overlay:
    radial-gradient(980px 560px at 20% 35%, rgba(224,106,44,.12), transparent 60%),
    radial-gradient(860px 560px at 78% 30%, rgba(197,84,30,.06), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0));
}

html[data-theme="dark"]{
  --gold-200:rgba(242,199,122,.24);

  --bg:#0D0705;
  --bg2:#0A0504;
  --card:rgba(22,12,9,.94);
  --card2:rgba(17,10,8,.94);

  --text:#FFF7F2;
  --text2:rgba(255,247,242,.82);
  --text3:rgba(255,247,242,.64);

  --line:rgba(255,247,242,.10);
  --line2:rgba(224,106,44,.26);
  --shadow:0 18px 50px rgba(0,0,0,.42);

  --utility-bg:rgba(16,9,7,.92);
  --header-bg:rgba(18,10,8,.92);

  --ghost-bg:rgba(255,247,242,.06);
  --ghost-bg-hover:rgba(255,247,242,.10);
  --ghost-bd:rgba(255,247,242,.14);

  --pill-bg:rgba(224,106,44,.14);
  --pill-bd:rgba(224,106,44,.24);
}

/* -------------------------
   2) Base
   ------------------------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: linear-gradient(180deg, var(--bg), var(--bg2));
  color:var(--text);
}
.container{max-width:var(--max); margin:0 auto; padding:0 18px;}
main{min-height:60vh}

/* Subtle institutional “texture” (theme-safe) */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  /* Theme-safe institutional texture */
  background:
    radial-gradient(900px 520px at 18% 20%, rgba(200,169,81,.06), transparent 60%),
    radial-gradient(820px 520px at 86% 26%, rgba(11,18,32,.05), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0));
  opacity:.75;
}
html[data-theme="dark"] body::before{
  background:
    radial-gradient(900px 520px at 18% 20%, rgba(200,169,81,.08), transparent 60%),
    radial-gradient(820px 520px at 86% 26%, rgba(245,246,248,.05), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
  opacity:.75;
}

/* Focus styles */
:focus-visible{outline:2px solid rgba(200,169,81,.55); outline-offset:2px; border-radius:8px}

/* -------------------------
   3) Utility Bar
   ------------------------- */
.utility-bar{
  position:sticky; top:0; z-index:60;
  background:var(--utility-bg);
  border-bottom:1px solid var(--line);
}
.utility-inner{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:10px 0;}
.utility-left{display:flex; align-items:center; gap:10px; min-width:0;}
.utility-pill{
  display:inline-flex; align-items:center; justify-content:center;
  height:18px; padding:0 8px; border-radius:999px;
  font-size:11px; font-weight:900; letter-spacing:.06em;
  background:rgba(200,169,81,.14);
  border:1px solid rgba(200,169,81,.28);
  color:var(--text);
  text-transform:uppercase;
}
.utility-text{font-size:12px; color:var(--text3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.utility-right{display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:flex-end;}
.utility-right a{font-size:12px; font-weight:800; color:var(--text2); text-decoration:none;}
.utility-right a:hover{color:var(--text); text-decoration:underline; text-decoration-color:rgba(200,169,81,.65);}

/* -------------------------
   4) Header / Nav
   ------------------------- */
.site-header{
  position:sticky;
  top:40px;
  z-index:50;
  background:var(--card2);
  border-bottom:1px solid var(--line);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 0;}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit;}
.logo{
  width:38px; height:38px;
  border-radius:10px;
  background:transparent;
  background-image:url('../img/brand/link2manage-logo.png');
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  border:1px solid rgba(200,169,81,.35);
  box-shadow:0 12px 30px rgba(0,0,0,.35);
  position:relative;
}
.logo::after{
  content:"";
  position:absolute;
  inset:9px;
  border-radius:6px;
  border:1px solid rgba(200,169,81,.45);
}
.brand-text strong{
  display:block;
  font-family:"Libre Baskerville", Georgia, "Times New Roman", serif;
  font-weight:700;
  letter-spacing:.02em;
}
.brand-text span{display:block; font-size:12px; color:var(--text3); margin-top:2px;}

.nav{display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:flex-end;}
.nav a{color:var(--text2); text-decoration:none; font-weight:800; font-size:13px; position:relative;}
.nav a:hover{color:var(--text)}
.nav a:not(.btn)::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-8px;
  height:2px; border-radius:99px;
  background:rgba(200,169,81,.0);
  transform:scaleX(.65);
  transform-origin:left;
  transition:all .18s ease;
}
.nav a:not(.btn):hover::after{background:rgba(200,169,81,.65); transform:scaleX(1);}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 14px;
  border-radius:var(--r2);
  border:1px solid var(--ghost-bd);
  text-decoration:none;
  font-weight:900;
  font-size:14px;
  cursor:pointer;
}
.btn-sm{padding:10px 12px; border-radius:var(--r2); font-size:13px;}
.btn-accent{
  background:var(--accent);
  color:var(--navy-900);
  border-color:rgba(200,169,81,.65);
}
.btn-accent:hover{filter:brightness(1.03)}
.btn-ghost{
  background:var(--ghost-bg);
  color:var(--text);
  border-color:var(--ghost-bd);
}
.btn-ghost:hover{background:var(--ghost-bg-hover)}
.btn-dark{
  background:var(--navy-850);
  color:#fff;
  border-color:var(--line);
}
.btn-dark:hover{filter:brightness(1.05)}

/* -------------------------
   5) Hero
   ------------------------- */
.hero{
  position:relative;
  padding:72px 0 30px;
  border-bottom:1px solid var(--line);
}
.hero::before{
  content:"";
  position:absolute;
  inset:-40px 0 -10px 0;
  pointer-events:none;
  background: var(--hero-overlay);
  opacity:.22;
}
html[data-theme="dark"] .hero::before{opacity:.90;}
.hero > .container{position:relative; z-index:1;}
.hero-inner{display:grid; grid-template-columns:1.2fr .8fr; gap:18px; align-items:stretch;}
@media(max-width:980px){.hero-inner{grid-template-columns:1fr;}}

.eyebrow{
  display:inline-flex;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(200,169,81,.10);
  border:1px solid rgba(200,169,81,.22);
  color:var(--text);
  font-weight:900;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.hero-copy h1{
  margin:14px 0 10px;
  font-family:"Libre Baskerville", Georgia, "Times New Roman", serif;
  font-size:44px;
  line-height:1.10;
  letter-spacing:-.01em;
}
@media(max-width:680px){.hero-copy h1{font-size:34px}}
.lead{color:var(--text2); font-size:16px; line-height:1.65; max-width:56ch;}
.hero-cta{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px;}
.hero-badges{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px;}
.badge{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 10px;
  border-radius:999px;
  background:var(--pill-bg);
  border:1px solid var(--pill-bd);
  color:var(--text2);
  font-weight:800;
  font-size:12px;
}
.dot{
  width:8px;height:8px;border-radius:99px;
  background:rgba(200,169,81,.95);
  box-shadow:0 0 0 4px rgba(200,169,81,.16);
}

/* Hero card / panels */
.hero-card,
.mock,
.contact-card,
.card.thanks{
  background:var(--card);
  color:var(--text);
  border-radius:var(--r);
  padding:16px;
  box-shadow:var(--shadow);
  border:1px solid rgba(200,169,81,.18);
}
.card-top{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.card-title{
  font-family:"Libre Baskerville", Georgia, "Times New Roman", serif;
  font-weight:700;
  letter-spacing:.02em;
}

/* Reusable card */
.card{
  background:var(--card);
  border:1px solid rgba(200,169,81,.18);
  border-radius:var(--r);
  padding:18px;
  box-shadow:var(--shadow);
}
.card.soft{
  background:var(--card2);
  border-color:var(--line2);
}
.card + .card{margin-top:14px;}

.panel{ /* backward compatible */
  background:var(--card);
  border:1px solid rgba(200,169,81,.18);
  border-radius:var(--r);
  padding:18px;
  box-shadow:var(--shadow);
}
.ptitle{
  font-family:"Libre Baskerville", Georgia, "Times New Roman", serif;
  font-weight:700;
  letter-spacing:.02em;
  margin:0 0 6px;
}
.pmini{color:var(--text2); font-size:14px; line-height:1.55;}
.pill{
  display:inline-flex; align-items:center;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  background:rgba(200,169,81,.10);
  border:1px solid rgba(200,169,81,.22);
  color:var(--text);
}

/* Checklist */
.checklist{list-style:none; padding:10px 0 0; margin:0;}
.checklist li{
  padding:10px 0;
  border-bottom:1px solid var(--line);
  font-weight:800;
  color:var(--text);
}
.checklist li:last-child{border-bottom:0;}
.card-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px;}

/* -------------------------
   6) Sections / Features
   ------------------------- */
.section{padding:56px 0;}
.section-alt{
  background:var(--card2);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:18px;}
.section-head h2{
  margin:0;
  font-family:"Libre Baskerville", Georgia, "Times New Roman", serif;
  font-size:28px;
  letter-spacing:.01em;
}
.section-head p{margin:6px 0 0; color:var(--text3); max-width:66ch}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
@media(max-width:980px){.grid-3{grid-template-columns:1fr}}

.ficon{
  width:36px;height:36px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(200,169,81,.12);
  border:1px solid rgba(200,169,81,.22);
  font-size:18px;
}
.feature{
  background:var(--card2);
  border:1px solid var(--line2);
  border-radius:var(--r);
  padding:16px;
}
.feature h3{
  margin:10px 0 6px;
  font-family:"Libre Baskerville", Georgia, "Times New Roman", serif;
  font-size:17px;
  letter-spacing:.01em;
}
.feature p{margin:0; color:var(--text2); line-height:1.6;}

.icon{
  width:42px; height:42px;
  border-radius:10px;
  display:grid; place-items:center;
  background:rgba(200,169,81,.12);
  border:1px solid rgba(200,169,81,.22);
  color:var(--text);
}
.icon svg{width:22px;height:22px}

.split{display:grid; grid-template-columns:1.1fr .9fr; gap:18px; align-items:center;}
@media(max-width:980px){.split{grid-template-columns:1fr}}
.bullets{display:grid; gap:10px; margin-top:14px; color:var(--text2)}
.bullets strong{color:var(--text)}

/* Mock panel */
.mock{overflow:hidden; padding:0;}
.mock-top{
  display:flex; gap:8px; padding:12px 14px;
  background:var(--mock-top-bg);
  border-bottom:1px solid var(--line);
}
.mock-dot{width:10px;height:10px;border-radius:99px;background:var(--mock-dot-bg)}
.mock-body{padding:14px}
.mock-row{display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--line)}
.mock-k{color:var(--text3); font-weight:800}
.mock-v{font-weight:900}
.mock-v.ok{color:rgba(200,169,81,.92)}
.mock-hr{border:0;border-top:1px solid var(--line); margin:18px 0}
.mock-mini{font-size:12px; color:var(--text3); font-weight:900; margin-bottom:8px; letter-spacing:.06em; text-transform:uppercase}
.mock-line{height:10px;border-radius:999px;background:var(--pill-bd); margin-bottom:10px}
.mock-line.short{width:65%}

/* -------------------------
   7) Forms / Contact
   ------------------------- */
.contact-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:14px;}
@media(max-width:980px){.contact-grid{grid-template-columns:1fr}}

.label{
  display:block;
  font-weight:900;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text2);
  margin:0 0 10px;
}

.input{
  width:100%;
  margin-top:6px;
  padding:12px 12px;
  border-radius:var(--r2);
  border:1px solid var(--line);
  background:var(--utility-bg);
  color:var(--text);
  outline:none;
}

.input::placeholder{
  color:var(--text3);
}

.linklist a:hover{background:var(--ghost-bg-hover); border-color:var(--line2)}

.spacer{height:14px}
.note{
  padding:12px 12px;
  border-radius:var(--r);
  background:rgba(200,169,81,.10);
  border:1px solid rgba(200,169,81,.20);
  color:var(--text);
  line-height:1.6;
}
.mono{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;}

/* ---- Theme-safe Contact / Access block ---- */
.contact-card{
  background:var(--card);
  border:1px solid var(--line2);
  border-radius:var(--r);
  padding:18px;
  box-shadow:var(--shadow);
  color:var(--text);
}
.contact-card h3{color:var(--text);}

.linklist{display:grid; gap:10px; margin-top:12px;}
.linklist a{
  text-decoration:none;
  padding:10px 12px;
  border-radius:var(--r2);
  border:1px solid var(--line);
  background:var(--utility-bg);
  color:var(--text);
  font-weight:800;
}
.linklist a:hover{
  border-color:var(--line2);
  background:var(--bg2);
}

.note{
  background:rgba(200,169,81,.10);
  border-color:var(--line2);
  color:var(--text2);
}

/* -------------------------
   8) Footer
   ------------------------- */
.site-footer{
  padding:28px 0 34px;
  border-top:1px solid var(--line2);
  background:var(--bg2);
}

.footer-inner{display:flex; align-items:flex-start; justify-content:space-between; gap:18px; flex-wrap:wrap;}
.footer-brand{
  font-family:"Libre Baskerville", Georgia, "Times New Roman", serif;
  font-weight:700;
  letter-spacing:.02em;
}
.footer-small{color:var(--text3); font-size:12px; margin-top:6px}
.footer-links{display:flex; gap:12px; flex-wrap:wrap}
.footer-links a{color:var(--text2); text-decoration:none; font-weight:900; font-size:13px}
.footer-links a:hover{color:var(--text); text-decoration:underline; text-decoration-color:rgba(200,169,81,.65);}

/* -------------------------
   9) Small Utilities
   ------------------------- */
a{color:inherit}
hr{border:0;border-top:1px solid var(--line); margin:18px 0}

/* -------------------------
   10) Alternate header/footer markup (includes/*)
   ------------------------- */
.wrap{min-height:100vh; display:flex; flex-direction:column;}
.site-main{flex:1;}

/* Topbar (includes/site_header.php) */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 18px;
  background:var(--header-bg);
  border-bottom:1px solid var(--line2);
}
.topbar .brand{gap:12px}
.topbar .brand strong{
  font-family:"Libre Baskerville", Georgia, "Times New Roman", serif;
  letter-spacing:.02em;
  font-weight:700;
}
.topbar .brand span span{display:block; font-size:12px; color:var(--text3); margin-top:2px}
.top-actions{display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end;}
.navlinks{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
.navlink{
  position:relative;
  display:inline-flex;
  align-items:center;
  padding:10px 2px;
  color:var(--text2);
  text-decoration:none;
  font-weight:800;
  font-size:13px;
  letter-spacing:.02em;
}
.navlink:hover{color:var(--text);}
.navlink::after{
  content:"";
  position:absolute; left:0; right:0; bottom:2px;
  height:2px; border-radius:99px;
  background:rgba(200,169,81,0);
  transform:scaleX(.65);
  transform-origin:left;
  transition:all .18s ease;
}
.navlink:hover::after{background:rgba(200,169,81,.65); transform:scaleX(1);}
.navlink.is-active{color:var(--text);}
.navlink.is-active::after{background:rgba(200,169,81,.85); transform:scaleX(1);}

.login-link{
  display:inline-flex;
  align-items:center;
  padding:10px 6px;
  color:var(--text3);
  text-decoration:none;
  font-weight:800;
  font-size:13px;
}
.login-link:hover{color:var(--text)}

.chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid var(--ghost-bd);
  background:var(--pill-bg);
  color:var(--text);
  text-decoration:none;
  font-weight:900;
  font-size:13px;
}
.chip:hover{background:var(--ghost-bg-hover);}
.chip.green{
  background:rgba(200,169,81,.16);
  border-color:rgba(200,169,81,.30);
  color:var(--text);
}

/* Includes footer */
.site-footer-inner{
  max-width:var(--max);
  margin:0 auto;
  padding:28px 18px 16px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
}
.foot-brand{
  font-family:"Libre Baskerville", Georgia, "Times New Roman", serif;
  font-weight:700;
  letter-spacing:.02em;
}
.foot-muted{color:var(--text3); font-size:12px; margin-top:6px; max-width:56ch; line-height:1.6}
.foot-cols{display:flex; gap:28px; flex-wrap:wrap}
.foot-title{font-weight:900; letter-spacing:.08em; text-transform:uppercase; font-size:12px; color:var(--text3); margin-bottom:10px}
.site-footer-inner a{display:block; color:var(--text2); text-decoration:none; font-weight:900; font-size:13px; margin:8px 0}
.site-footer-inner a:hover{color:var(--text); text-decoration:underline; text-decoration-color:rgba(200,169,81,.65)}
.site-footer-bottom{
  border-top:1px solid rgba(200,169,81,.18);
  padding:14px 18px 22px;
  max-width:var(--max);
  margin:0 auto;
  color:var(--text3);
  font-size:12px;
}

/* -------------------------
   Page hero (Institutional)
   ------------------------- */
.page-hero{
  padding: 42px 0 22px;
  background: var(--hero-bg);
  border-bottom: 1px solid var(--hero-bd);
}
.page-hero .kicker{
  display:inline-flex;
  gap:10px;
  align-items:center;
  color: var(--text2);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 12px;
}
.page-hero .kicker:before{
  content:"";
  width: 34px;
  height: 2px;
  background: var(--gold-500);
  opacity: .85;
}
.page-hero h1{
  font-family: var(--serif, "Libre Baskerville", ui-serif, Georgia, serif);
  margin: 12px 0 10px;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.08;
}
.page-hero p{
  margin: 0;
  max-width: 70ch;
  color: var(--text2);
  font-size: 16px;
}
.page-shell{
  padding: 26px 0 54px;
}

/* -------------------------
   Components
   ------------------------- */
.pricebox{margin:14px 0 12px; padding:12px 12px; border-radius:var(--r2);
  background:var(--pill-bg); border:1px solid var(--pill-bd);}
.price{font-family:"Libre Baskerville", Georgia, serif; font-size:28px; letter-spacing:.01em; color:var(--text);}
.price span{font-size:14px; color:var(--text2); font-family:var(--sans, Inter, ui-sans-serif, system-ui); font-weight:800; margin-left:6px;}
.pricenote{margin-top:4px; color:var(--text2); font-size:13px; font-weight:700;}

.checklist{margin:0 0 14px; padding-left:18px; color:var(--text2)}
.checklist li{margin:6px 0;}
.notice{
  margin-top:12px;
  padding:12px 14px;
  border-radius:var(--r2);
  background:rgba(200,169,81,.10);
  border:1px solid rgba(200,169,81,.20);
  color:var(--text);
  font-size:13px;
}

/* FAQ */
.faq details{
  border:1px solid var(--line2);
  background:var(--card2);
  border-radius:var(--r);
  padding:12px 14px;
}
.faq details + details{margin-top:12px;}
.faq summary{
  cursor:pointer;
  list-style:none;
  font-weight:900;
  color:var(--text);
}
.faq summary::-webkit-details-marker{display:none;}
.faq-body{margin-top:10px; color:var(--text2); line-height:1.65;}


/* =========================================================
   Mobile Header — App style
   ========================================================= */
.topbar{
  position:sticky;
  top:0;
  z-index:60;
  backdrop-filter:saturate(1.2) blur(10px);
}

/* CTA group in header */
.top-ctas{display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end;}
.iconbtn{
  width:40px; height:40px;
  border-radius:12px;
  border:1px solid var(--ghost-bd);
  background:var(--pill-bg);
  color:var(--text);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.iconbtn:hover{background:var(--ghost-bg-hover);}

/* Hamburger */
.nav-toggle{display:none; position:relative;}
.nav-toggle .bar{
  display:block;
  width:18px; height:2px;
  background: currentColor;
  border-radius: 999px;
  margin:2px 0;
}

/* Compact chip on smaller screens */
.chip-compact .chip-label{display:inline;}
.chip-compact .chip-ico{display:none;}

/* Mobile drawer */
.mobnav{position:fixed; inset:0; z-index:80;}
.mobnav-backdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,.42);
  border:0; padding:0; margin:0;
}
.mobnav-sheet{
  position:absolute;
  top:12px; left:12px; right:12px; bottom:12px;
  border-radius: 18px;
  background: var(--card);
  border:1px solid var(--line2);
  box-shadow: var(--shadow);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
html[data-theme="dark"] .mobnav-backdrop{background: rgba(0,0,0,.55);}

.mobnav-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px;
  border-bottom: 1px solid var(--line);
  background: var(--card2);
}
.mobnav-brand{display:flex; align-items:center; gap:12px; min-width:0;}
.mobnav-btxt strong{display:block; font-family:"Libre Baskerville", Georgia, "Times New Roman", serif; letter-spacing:.02em;}
.mobnav-btxt span{display:block; font-size:12px; color:var(--text3); margin-top:2px;}

.mobnav-links{
  padding: 10px 14px;
  display:grid;
  grid-template-columns: 1fr;
  gap: 8px;
  overflow:auto;
}
.mobnav-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 14px;
  border-radius: 14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.55);
  text-decoration:none;
  font-weight:900;
  color: var(--text);
}
html[data-theme="dark"] .mobnav-link{
  background: rgba(255,255,255,.04);
  border-color: rgba(245,246,248,.12);
}
.mobnav-link.is-active{
  border-color: rgba(200,169,81,.35);
  box-shadow: 0 10px 24px rgba(200,169,81,.12);
}

.mobnav-actions{
  padding: 12px 14px 14px;
  border-top: 1px solid var(--line);
  display:grid;
  gap: 10px;
  background: var(--card2);
}
.mobnav-actions .btn{justify-content:center; width:100%;}
.mobnav-foot{padding:10px 14px; color: var(--text3); text-align:center;}

/* Prevent background scroll when menu open */
html.nav-open, html.nav-open body{overflow:hidden;}

/* Breakpoints */
@media(max-width: 980px){
  .navlinks{display:none;}
  .nav-toggle{display:inline-flex;}
  .top-actions{gap:8px;}
  .chip-compact .chip-label{display:none;}
  .chip-compact .chip-ico{display:inline;}
  .login-link{display:none;}
  .topbar{padding:12px 12px;}
  .topbar .brand-text span{display:none;}
  .btn.btn-accent.btn-sm{display:none;} /* move CTA into drawer on mobile */
}

/* =========================================================
   Mobile polish across pages
   ========================================================= */
@media(max-width: 680px){
  .container{padding:0 14px;}
  .hero{padding-top: 26px;}
  .hero-inner{gap: 18px;}
  .hero-card{border-radius: 16px;}
  .hero-cta{flex-direction:column; align-items:stretch;}
  .hero-cta .btn{width:100%; justify-content:center;}
  .grid-3, .split, .contact-grid{gap: 12px;}
  .section{padding: 42px 0;}
  .page-hero{padding: 28px 0 16px;}
  .page-hero .hero-row{grid-template-columns: 1fr !important;}
}


/* Go-live marketing refresh */
.header-start{min-width:110px}
.header-demo{min-width:122px}
.metric-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.metric-card{padding:14px; border:1px solid var(--line2); border-radius:var(--r2); background:var(--card2);}
.metric-label{font-size:12px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; color:var(--text3);}
.metric-value{font-family:"Libre Baskerville", Georgia, serif; font-size:22px; margin-top:6px;}
.metric-note{font-size:13px; color:var(--text2); margin-top:4px;}
.hero-list{display:grid; gap:12px;}
.hero-list div{display:grid; gap:2px; padding:10px 0; border-bottom:1px solid var(--line);}
.hero-list div:last-child{border-bottom:0;}
.hero-list strong{font-size:14px;}
.hero-list span{color:var(--text2); line-height:1.55;}
.cta-band{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;}
.guide-article h2{font-family:"Libre Baskerville", Georgia, serif; margin:0 0 8px; font-size:24px;}
.guide-article h2:not(:first-child){margin-top:22px;}
.guide-article p{margin:0; color:var(--text2); line-height:1.7;}
@media(max-width:980px){
  .header-demo{display:none;}
}
@media(max-width:680px){
  .metric-grid{grid-template-columns:1fr;}
  .cta-band{align-items:flex-start;}
}


/* Professional trust + mobile improvements */
img, svg{max-width:100%; height:auto}
body{overflow-x:hidden}
.card,.feature,.mock,.hero-card,.metric-card{min-width:0}
.topbar .brand, .brand-text, .top-actions, .top-ctas, .hero-copy, .hero-card, .split > *, .grid-3 > *{min-width:0}

.btn-accent{
  color:#fff;
  border-color:rgba(197,84,30,.65);
  background:linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow:0 14px 30px rgba(197,84,30,.18);
}
html[data-theme="dark"] .btn-accent{color:#fff7f2;}
.btn-dark{
  background:linear-gradient(135deg, #2f180f, #5c2a17);
  border-color:rgba(224,106,44,.26);
}

html[data-theme="dark"] .input,
html[data-theme="dark"] select.input,
html[data-theme="dark"] textarea.input{
  background:#fff;
  color:#19120E;
  border-color:rgba(197,84,30,.28);
}
html[data-theme="dark"] .input::placeholder,
html[data-theme="dark"] textarea.input::placeholder{color:rgba(25,18,14,.52);}
.input:focus,
select.input:focus,
textarea.input:focus{
  border-color:rgba(197,84,30,.42);
  box-shadow:0 0 0 4px rgba(224,106,44,.12);
}
textarea.input{min-height:132px; resize:vertical}

.security-strip,
.trial-strip{
  margin-top:18px;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:14px;
}
.trust-panel,
.seal-card{
  border:1px solid var(--line2);
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.72));
  box-shadow:var(--shadow);
}
html[data-theme="dark"] .trust-panel,
html[data-theme="dark"] .seal-card{
  background:linear-gradient(180deg, rgba(39,20,14,.92), rgba(22,12,9,.92));
}
.trust-panel{padding:16px 16px 14px}
.trust-kicker{display:inline-flex; align-items:center; gap:8px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:900; color:var(--text2)}
.trust-kicker::before{content:""; width:26px; height:2px; background:var(--accent2); border-radius:999px}
.trust-title{margin:8px 0 6px; font-size:18px; font-weight:900}
.trust-copy{margin:0; color:var(--text2); line-height:1.65}
.trust-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:14px}
.trust-item{padding:12px; border-radius:14px; border:1px solid var(--line); background:var(--card2)}
.trust-item strong{display:block; font-size:13px; margin-bottom:4px}
.trust-item span{display:block; color:var(--text2); line-height:1.5; font-size:13px}
.seal-card{padding:18px; display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start}
.security-seal{display:inline-grid; gap:8px; width:100%}
.security-badge{display:inline-flex; align-items:center; gap:10px; padding:12px 14px; border-radius:999px; border:1px solid rgba(197,84,30,.28); background:rgba(224,106,44,.08); font-weight:900; color:var(--text)}
.security-badge .seal-ico{width:32px; height:32px; border-radius:999px; display:grid; place-items:center; background:linear-gradient(135deg, rgba(197,84,30,.22), rgba(242,199,122,.26)); font-size:16px}
.seal-list{display:grid; gap:10px; margin-top:16px; width:100%}
.seal-list div{padding:10px 12px; border-radius:14px; border:1px solid var(--line); background:var(--card2); font-size:13px; font-weight:800; color:var(--text2)}
.seal-list span{color:var(--text);}

.page-hero p,.lead,.feature p,.guide-article p,.bullets span{line-height:1.7}
.hero-badges{margin-top:16px}
.hero-badges,.hero-cta,.cta-band{row-gap:10px}

.policy-article{display:grid; gap:18px}
.policy-section{padding:18px; border:1px solid var(--line2); border-radius:18px; background:var(--card2)}
.policy-section h2{margin:0 0 8px; font-size:22px; font-family:"Libre Baskerville", Georgia, serif}
.policy-section p,.policy-section li{color:var(--text2); line-height:1.7}
.policy-section ul{margin:0; padding-left:18px}
.policy-meta{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:18px}
.policy-meta .feature{padding:16px}

@media(max-width:980px){
  .security-strip,.trial-strip,.policy-meta{grid-template-columns:1fr}
}

@media(max-width:680px){
  .topbar{padding:10px 12px; gap:10px}
  .hero-copy h1{font-size:32px; line-height:1.08}
  .hero-copy .lead{font-size:15px}
  .hero-card,.mock,.card,.feature,.policy-section{padding:16px}
  .security-strip,.trial-strip{gap:12px}
  .trust-grid{grid-template-columns:1fr}
  .site-footer-inner,.foot-cols{gap:18px}
  .page-shell{padding:20px 0 42px}
  .hero-badges{display:grid; grid-template-columns:1fr}
  .page-shell form .grid-3{grid-template-columns:1fr !important; gap:12px !important;}
  .page-shell form [style*="grid-template-columns:1fr 1fr 1fr"]{display:grid !important; grid-template-columns:1fr !important; gap:12px !important;}
  .page-shell form [style*="display:flex"]{align-items:stretch}
  .page-shell form [style*="display:flex"] .btn{flex:1 1 auto; justify-content:center}
}