/* ==========================================================================
   OfficeAssist AI — shared marketing stylesheet
   Modern design system (matches the homepage). Used by the SEO landing pages,
   the resources/blog section, and the SMS opt-in / features pages.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Inter:wght@400;500;600&display=swap');

:root{
  --ink:#0f1b12; --ink-soft:#3c4a40; --muted:#5f6b62;
  --green:#2e7d32; --green-d:#1b5e20; --green-dd:#123f18;
  --lime:#7cb342; --mint:#e8f5e9; --mint-2:#f1f8e9;
  --paper:#ffffff; --paper-2:#f6faf3; --line:#e4ede2;
  --ring:0 1px 2px rgba(16,27,18,.04), 0 8px 24px rgba(16,27,18,.06);
  --ring-lg:0 18px 48px rgba(16,27,18,.12);
  --r:14px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html{ scroll-behavior:smooth; }
body {
  font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--ink); background: var(--paper); line-height: 1.6; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{ font-family:'Plus Jakarta Sans','Inter',sans-serif; letter-spacing:-.02em; }
a { color: var(--green-d); }
img{ max-width:100%; }

/* --- NAV --- */
nav {
  display: flex; justify-content: space-between; align-items: center;
  padding: .85rem 1.5rem; background: rgba(255,255,255,.86); backdrop-filter:saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 100; flex-wrap: wrap; gap: .5rem;
}
.logo { font-size: 1.3rem; font-weight: 800; color: var(--green-d); text-decoration: none; font-family:'Plus Jakarta Sans',sans-serif; }
.nav-links { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.nav-plain { color: var(--green-d); text-decoration: none; font-weight: 700; font-size: .92rem;
             padding: .55rem .8rem; border-radius: 999px; }
.nav-plain:hover { background: var(--mint); }
.nav-login { color: var(--green-d); text-decoration: none; font-weight: 700; font-size: .92rem;
             padding: .55rem 1rem; border-radius: 999px; border: 1.5px solid #cfe3cf; transition:.2s; }
.nav-login:hover { background: var(--mint); border-color:var(--green); }
.nav-cta { background: var(--green); color: #fff; padding: .6rem 1.25rem; border-radius: 999px;
           text-decoration: none; font-weight: 700; font-size: .92rem; box-shadow:0 6px 16px rgba(46,125,50,.28); transition:.2s; }
.nav-cta:hover { background: var(--green-d); transform:translateY(-1px); }

/* --- BREADCRUMBS --- */
.breadcrumbs { max-width: 1080px; margin: 0 auto; padding: 1rem 1.5rem 0;
               font-size: .85rem; color: var(--muted); }
.breadcrumbs a { color: var(--green-d); text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }

/* --- HERO (centered, single column) --- */
.hero { position:relative; overflow:hidden; text-align: center; padding: 3.8rem 1.5rem 3.2rem;
        background:
          radial-gradient(1000px 460px at 15% -10%, #dff2e1 0%, rgba(223,242,225,0) 60%),
          radial-gradient(820px 440px at 100% 0%, #eef7e6 0%, rgba(238,247,230,0) 55%),
          linear-gradient(180deg, #f4faf1 0%, #ffffff 100%); }
.hero .eyebrow { display:inline-block; text-transform: uppercase; letter-spacing: .14em; font-size: .74rem;
                 font-weight: 800; color: var(--green-d); background:#e3f2e4; padding:.4rem .8rem; border-radius:999px;
                 margin-bottom: 1rem; font-family:'Plus Jakarta Sans',sans-serif; }
.hero h1 { font-size: clamp(2rem, 5vw, 3.1rem); font-weight: 800; color: var(--ink); line-height: 1.1;
           max-width: 900px; margin: 0 auto; }
.hero .sub { max-width: 680px; margin: 1.2rem auto 2rem; font-size: 1.15rem; color: var(--ink-soft); line-height: 1.65; }
.hero-btns { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }

.btn-primary { display:inline-flex; align-items:center; gap:.5rem; background: var(--green); color: #fff; padding: .95rem 1.8rem; border-radius: 999px;
               text-decoration: none; font-weight: 700; font-size: 1rem; box-shadow:0 12px 26px rgba(46,125,50,.32); transition:.2s; }
.btn-primary:hover { background: var(--green-d); transform:translateY(-2px); box-shadow:0 16px 32px rgba(46,125,50,.36); }
.btn-secondary { display:inline-flex; align-items:center; gap:.5rem; background:#fff; border: 1.5px solid #cfe3cf; color: var(--green-d); padding: .95rem 1.7rem; border-radius: 999px;
                 text-decoration: none; font-weight: 700; font-size: 1rem; transition:.2s; }
.btn-secondary:hover { background: var(--mint); border-color:var(--green); }
.hero-sales { margin-top: 1.2rem; color: var(--muted); font-size: .96rem; }
.hero-sales a { color: var(--green-d); font-weight: 700; text-decoration: none; }

/* --- SECTIONS --- */
.section { padding: 4rem 1.5rem; max-width: 1080px; margin: 0 auto; }
.section.narrow { max-width: 760px; }
.section h2 { font-size: clamp(1.6rem, 3.5vw, 2.1rem); font-weight: 800; color: var(--ink);
              margin-bottom: 1rem; line-height: 1.2; }
.section h3 { font-size: 1.2rem; font-weight: 700; color: var(--ink); margin: 1.6rem 0 .5rem; }
.section p { color: var(--ink-soft); margin-bottom: 1rem; font-size: 1.05rem; }
.section ul { padding-left: 1.3rem; margin: .5rem 0 1.2rem; }
.section li { color: var(--ink-soft); margin-bottom: .5rem; font-size: 1.05rem; }
.section.alt { background: var(--paper-2); max-width: none; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.section.alt > * { max-width: 1080px; margin-left: auto; margin-right: auto; }
.lead-line { font-size: 1.3rem; font-weight: 700; color: var(--green-d); margin-bottom: 1.4rem; line-height: 1.4; }

/* --- CARDS --- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.1rem; margin-top: 1.5rem; }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 1.6rem; box-shadow:var(--ring); transition:.22s; }
.card:hover { transform:translateY(-4px); box-shadow:var(--ring-lg); border-color:#cfe3cf; }
.card .card-icon { display:inline-grid; place-items:center; width:46px; height:46px; border-radius:12px; background:var(--mint); font-size: 1.5rem; margin-bottom: .8rem; }
/* Inline-SVG feature-card icons */
svg.card-icon { width: 46px; height: 46px; display: block; margin-bottom: .8rem; padding:10px; border-radius:12px; background:var(--mint);
                color: var(--green-d); fill: none; stroke: var(--green-d); stroke-width: 2;
                stroke-linecap: round; stroke-linejoin: round; }
.card h3 { font-size: 1.05rem; font-weight: 700; margin: 0 0 .4rem; color: var(--ink); }
.card p { font-size: .95rem; color: var(--ink-soft); line-height: 1.6; margin: 0; }
.card a { font-weight: 700; text-decoration: none; }

/* Industry link cards */
.industry-card { display: block; text-decoration: none; color:inherit; }
.industry-card:hover { border-color: #cfe3cf; }
.industry-card h3 { color: var(--ink); }
.industry-card .go { color: var(--green-d); font-weight: 700; font-size: .9rem; margin-top: .6rem; display: inline-block; }

/* --- CHECK LIST --- */
.checklist { list-style: none; padding: 0; margin: 1rem 0 1.4rem; }
.checklist li { position: relative; padding-left: 1.9rem; margin-bottom: .6rem; font-size: 1.05rem; color: var(--ink-soft); }
.checklist li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--green); font-weight: 800; }

/* --- AI DEMO BAND --- */
.ai-demo { position:relative; overflow:hidden; background: linear-gradient(135deg, var(--green-dd) 0%, var(--green) 100%); color: #fff;
           text-align: center; padding: 3.8rem 1.5rem; }
.ai-demo::after{ content:""; position:absolute; inset:0; background:radial-gradient(600px 300px at 80% 20%, rgba(174,213,129,.28), transparent 60%); pointer-events:none; }
.ai-demo-inner { max-width: 780px; margin: 0 auto; position:relative; }
.ai-demo-eyebrow { text-transform: uppercase; letter-spacing: .16em; font-size: .8rem; font-weight: 700; color: #c8e6c9; }
.ai-demo h2 { font-size: clamp(1.7rem, 4vw, 2.4rem); font-weight: 800; color: #fff; margin: .5rem 0 .7rem; line-height: 1.2; }
.ai-demo p.lead { color: #e6f4e6; font-size: 1.12rem; max-width: 640px; margin: 0 auto; line-height: 1.6; }
.ai-demo-btn { display: inline-block; margin: 1.7rem 0 .7rem; background: #fff; color: var(--green-d); font-weight: 800;
               font-size: 1.15rem; padding: 1rem 2.3rem; border-radius: 999px; text-decoration: none;
               box-shadow: 0 10px 26px rgba(0,0,0,.28); transition:.2s; }
.ai-demo-btn:hover { background: var(--mint-2); transform:translateY(-2px); }
.ai-demo-hint { color: #c8e6c9; font-size: .98rem; font-style: italic; margin-top: .3rem; }
.ai-demo .sales-note { color: #c8e6c9; font-size: .95rem; margin-top: 1.4rem; }
.ai-demo .sales-note a { color: #fff; font-weight: 700; text-decoration: underline; }

/* --- CONTACT / SALES BLOCK --- */
.contact-band { background: linear-gradient(180deg,#eaf6ea 0%, #f4faf1 100%); text-align: center; padding: 3.4rem 1.5rem; }
.contact-band h2 { font-size: 1.7rem; font-weight: 800; color: var(--ink); margin-bottom: .5rem; }
.contact-band p { color: var(--ink-soft); margin-bottom: 1.4rem; }
.two-number { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.num-block { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 1.4rem 1.8rem; min-width: 260px; box-shadow:var(--ring); }
.num-block .label { text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; font-weight: 800; color: var(--green); }
.num-block .num { font-size: 1.5rem; font-weight: 800; color: var(--green-d); margin: .3rem 0; display: block; text-decoration: none; }
.num-block .num:hover { color: var(--green); }
.num-block .desc { font-size: .88rem; color: var(--muted); }

/* --- FAQ --- */
.faq { max-width: 800px; margin: 0 auto; }
.faq details { background:#fff; border: 1px solid var(--line); border-radius:12px; padding: .15rem 1.1rem; margin-bottom:.7rem; box-shadow:var(--ring); }
.faq summary { font-weight: 700; color: var(--ink); font-size: 1.05rem; cursor: pointer; list-style: none;
               padding:1rem 0; display:flex; justify-content:space-between; align-items:center; gap:1rem; font-family:'Plus Jakarta Sans',sans-serif; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--green); font-weight: 700; font-size:1.4rem; }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding:0 0 1.1rem; color: var(--ink-soft); }

/* --- RESOURCES / ARTICLES --- */
.article { max-width: 720px; margin: 0 auto; padding: 2.8rem 1.5rem 1rem; }
.article h1 { font-size: clamp(1.9rem, 4vw, 2.5rem); font-weight: 800; color: var(--ink); line-height: 1.2; margin-bottom: .6rem; }
.article .meta { color: var(--muted); font-size: .9rem; margin-bottom: 2rem; }
.article h2 { font-size: 1.45rem; color: var(--ink); margin: 2rem 0 .6rem; }
.article p { color: #2c352d; font-size: 1.08rem; margin-bottom: 1.1rem; }
.article ul { padding-left: 1.4rem; margin-bottom: 1.1rem; }
.article li { margin-bottom: .5rem; font-size: 1.08rem; color: #2c352d; }
.article blockquote { border-left: 4px solid var(--green); background: var(--mint-2); padding: 1rem 1.3rem;
                      margin: 1.4rem 0; border-radius: 0 10px 10px 0; color: var(--green-d); font-weight: 600; }
.post-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.2rem; margin-top: 1.5rem; }
.post-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 1.6rem; text-decoration: none; display: block; box-shadow:var(--ring); transition:.22s; color:inherit; }
.post-card:hover { transform:translateY(-4px); box-shadow:var(--ring-lg); border-color:#cfe3cf; }
.post-card h3 { color: var(--ink); font-size: 1.15rem; margin-bottom: .5rem; }
.post-card p { color: var(--ink-soft); font-size: .95rem; margin: 0; }

/* --- FOOTER --- */
footer { background: var(--green-dd); color: #bfe0c2; padding: 2.6rem 1.5rem; text-align: center; font-size: .9rem; }
footer a { color: #a5d6a7; text-decoration: none; }
footer a:hover { color:#fff; }
footer .foot-numbers { margin-top: .7rem; }
footer .foot-links { margin-top: .6rem; }
footer strong { color: #e8f5e9; }

/* --- HERO TRUST CHIPS --- */
.hero-chips{ display:flex; flex-wrap:wrap; gap:.5rem 1.2rem; justify-content:center; margin-top:1.4rem; }
.chip{ display:inline-flex; align-items:center; gap:.45rem; font-size:.9rem; font-weight:600; color:var(--ink-soft); }
.chip .ck{ color:var(--green); font-weight:800; }

/* --- HOW IT WORKS (3-step) --- */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; text-align:left; }
.step{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:1.6rem 1.4rem; box-shadow:var(--ring); }
.step .num{ width:38px;height:38px;border-radius:12px; background:var(--green); color:#fff; display:grid; place-items:center; font-weight:800; font-family:'Plus Jakarta Sans',sans-serif; margin-bottom:.9rem; }
.step h3{ font-size:1.08rem; color:var(--ink); margin:0 0 .4rem; }
.step p{ color:var(--ink-soft); font-size:.95rem; line-height:1.6; margin:0; }

/* --- COMPARISON TABLE --- */
.compare{ max-width:860px; margin:1.5rem auto 0; border:1px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:var(--ring); background:#fff; }
.compare-row{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; }
.compare-row > div{ padding:.95rem 1rem; border-bottom:1px solid var(--line); font-size:.92rem; }
.compare-head{ background:var(--paper-2); font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; color:var(--ink); text-align:center; }
.compare-head.oa{ color:var(--green-d); }
.compare-row .rl{ font-weight:600; color:var(--ink); }
.compare-row .c{ text-align:center; color:var(--muted); }
.compare-row .c.y{ color:var(--green); font-weight:800; }
.compare-row .c.n{ color:#c0392b; font-weight:700; }
.compare-row:last-child > div{ border-bottom:none; }
.compare-oa{ background:#f3faef; }
.center-head{ text-align:center; }
.center-head p{ max-width:640px; margin:0 auto 2.4rem; color:var(--muted); }

/* --- MOBILE NAV --- */
@media (max-width: 900px){
  .steps{ grid-template-columns:1fr; }
  .compare-row{ grid-template-columns:1.2fr .8fr .8fr .8fr; }
  .compare-row > div{ padding:.75rem .5rem; font-size:.82rem; }
}
@media (max-width: 640px) {
  nav { padding: .6rem .9rem; }
  .logo{ font-size:1.1rem; }
  .nav-links { width: 100%; justify-content: center; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
  .nav-links a, .nav-links a.nav-plain, .nav-links .nav-login, .nav-links .nav-cta { font-size: .82rem; padding: .45rem .7rem; }
}