/* ════════════════════════════════════════════════════════════════
   OrivenAI — static public pages (/learn/, /ppc-automation-software/, …)
   Generated by tools/seo/build.js. A small stand-alone stylesheet that
   reuses the marketing site's design language (near-black canvas, Geist,
   lime #B7FF2A primary pills, hairline borders) without loading the app's
   2 MB stylesheet, so these pages stay fast and fully readable as HTML.
   ════════════════════════════════════════════════════════════════ */
/* Metric-matched fallback for Geist so text wraps the same before and after the web font loads (no layout shift). Widths measured against Geist per weight. */
@font-face{font-family:'Geist Fallback';font-weight:400;src:local('Arial'),local('ArialMT'),local('Liberation Sans'),local('Arimo');size-adjust:102.5%}
@font-face{font-family:'Geist Fallback';font-weight:500;src:local('Arial'),local('ArialMT'),local('Liberation Sans'),local('Arimo');size-adjust:105%}
@font-face{font-family:'Geist Fallback';font-weight:600;src:local('Arial Bold'),local('Arial-BoldMT'),local('Liberation Sans Bold'),local('Arimo Bold');size-adjust:100%}
@font-face{font-family:'Geist Fallback';font-weight:700;src:local('Arial Bold'),local('Arial-BoldMT'),local('Liberation Sans Bold'),local('Arimo Bold');size-adjust:104%}
:root{
  --bg:#0A0A0A; --surface:#121212; --surface-2:#181818; --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14);
  --ink:#F2F2F0; --ink-2:rgba(242,242,240,.78); --muted:rgba(242,242,240,.58);
  --lime:#B7FF2A; --lime-ink:#0A0A0A; --lime-soft:rgba(183,255,42,.09); --lime-line:rgba(183,255,42,.28);
  --radius:16px; --gutter:24px; --max:1120px; --prose:720px;
  --font:'Geist','Geist Fallback',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;height:auto}
.sp-skip{position:absolute;left:-9999px;top:8px;background:var(--lime);color:var(--lime-ink);padding:8px 14px;border-radius:999px;font-weight:600;z-index:10}
.sp-skip:focus{left:16px}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:6px}
.sp-wrap{width:min(var(--max),100% - 2*var(--gutter));margin-inline:auto}

/* ── Nav: the site's main navbar (#lpNav, fixed, 64px) — markup copied from
   index.html, styles in css/site-nav.css, behaviour in js/site-nav.js. ── */
body[data-lpnav="1"]{padding-top:64px}
/* What the navbar inherits on the main site (body line-height 1.6, links not underlined). */
#lpNav,#lpMobileMenu{line-height:1.6;font-family:'Geist','Geist Fallback',system-ui,-apple-system,sans-serif}
#lpNav a,#lpMobileMenu a{text-decoration:none}
html{scroll-padding-top:84px}

/* ── Logo (footer) ── */
.sp-logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;letter-spacing:.2px}
.sp-logo img{width:30px;height:30px;display:block}

/* ── Buttons ── */
.sp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 22px;border-radius:999px;font-weight:600;font-size:15px;text-decoration:none;border:1px solid transparent;transition:background .15s ease,border-color .15s ease,color .15s ease}
.sp-btn-primary{background:var(--lime);color:var(--lime-ink)}
.sp-btn-primary:hover{background:#c8ff5a}
.sp-btn-ghost{background:var(--surface-2);color:var(--ink);border-color:var(--line-2)}
.sp-btn-ghost:hover{border-color:rgba(255,255,255,.3)}
.sp-btn-sm{min-height:38px;padding:0 18px;font-size:14px}

/* ── Article contents ("On this page") ── */
.sp-toc{margin:0 0 36px;padding:18px 22px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.sp-toc p{margin:0 0 8px;font-size:12px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted)}
.sp-toc ol{margin:0;padding-left:20px;display:grid;gap:4px;font-size:15px;line-height:1.5}
.sp-toc a{text-decoration:none;color:var(--ink-2)}
.sp-toc a:hover{color:var(--lime)}

/* ── Breadcrumb ── */
.sp-crumbs{padding-top:28px;font-size:13px;color:var(--muted)}
.sp-crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.sp-crumbs li+li::before{content:'/';margin-right:6px;color:rgba(255,255,255,.3)}
.sp-crumbs a{text-decoration:none}
.sp-crumbs a:hover{color:var(--ink)}

/* ── Hero ── */
.sp-hero{padding:56px 0 40px}
.sp-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--lime);margin:0 0 18px}
.sp-eyebrow::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--lime)}
h1{font-size:clamp(34px,5.2vw,58px);line-height:1.06;letter-spacing:-.03em;font-weight:700;margin:0 0 20px;max-width:880px;text-wrap:balance}
.sp-lede{font-size:clamp(17px,1.6vw,20px);line-height:1.6;color:var(--ink-2);max-width:700px;margin:0 0 30px}
.sp-cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.sp-note{font-size:13px;color:var(--muted);margin-top:14px}
.sp-meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:14px;color:var(--muted);margin:-6px 0 0}

/* ── Sections ── */
.sp-section{padding:56px 0;border-top:1px solid var(--line)}
h2{font-size:clamp(26px,3.2vw,36px);line-height:1.15;letter-spacing:-.02em;font-weight:700;margin:0 0 16px;text-wrap:balance}
h3{font-size:19px;line-height:1.35;font-weight:600;margin:0 0 8px}
.sp-section > .sp-wrap > p{max-width:var(--prose);color:var(--ink-2)}
.sp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:28px}
.sp-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.sp-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.sp-card p{margin:0;color:var(--ink-2);font-size:15.5px;line-height:1.6}
.sp-card .sp-tag{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--lime);margin-bottom:10px}
.sp-steps{counter-reset:s;list-style:none;padding:0;margin:28px 0 0;display:grid;gap:14px;max-width:820px}
.sp-steps li{counter-increment:s;display:grid;grid-template-columns:40px 1fr;gap:16px;align-items:start;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.sp-steps li::before{content:counter(s);width:32px;height:32px;border-radius:50%;background:var(--lime);color:var(--lime-ink);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px}
.sp-steps li p{margin:0;color:var(--ink-2);font-size:15.5px}

/* platform support table */
.sp-table-wrap{overflow-x:auto;margin-top:24px;border:1px solid var(--line);border-radius:var(--radius)}
.sp-table{width:100%;border-collapse:collapse;font-size:15px;min-width:560px}
.sp-table th,.sp-table td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.sp-table thead th{font-size:12.5px;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);font-weight:700;background:var(--surface)}
.sp-table tbody tr:last-child td{border-bottom:0}
.sp-yes{color:var(--lime);font-weight:600}
.sp-no{color:var(--muted)}

/* ── FAQ (native details/summary: no JS, answers in the HTML) ── */
.sp-faq{max-width:820px;margin-top:24px;display:grid;gap:10px}
.sp-faq details{background:var(--surface);border:1px solid var(--line);border-radius:14px}
.sp-faq summary{cursor:pointer;list-style:none;padding:18px 52px 18px 20px;font-weight:600;position:relative;line-height:1.45}
.sp-faq summary::-webkit-details-marker{display:none}
.sp-faq summary::after{content:'+';position:absolute;right:20px;top:50%;transform:translateY(-50%);font-size:22px;color:var(--lime);font-weight:400}
.sp-faq details[open] summary::after{content:'–'}
.sp-faq .sp-faq-a{padding:0 20px 18px;color:var(--ink-2)}
.sp-faq .sp-faq-a p{margin:0 0 10px}
.sp-faq .sp-faq-a p:last-child{margin:0}

/* ── CTA band ── */
.sp-band{margin:8px 0 72px;padding:44px clamp(24px,5vw,56px);border-radius:24px;background:radial-gradient(600px 260px at 15% 0%,var(--lime-soft),transparent 70%),var(--surface);border:1px solid var(--lime-line);display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}
.sp-band h2{margin:0 0 6px;font-size:clamp(24px,2.8vw,32px)}
.sp-band p{margin:0;color:var(--ink-2);max-width:560px}

/* ── Related links ── */
.sp-related{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:24px}
.sp-related a{display:block;text-decoration:none;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px 20px;transition:border-color .15s ease}
.sp-related a:hover{border-color:var(--lime-line)}
.sp-related strong{display:block;font-size:16px;margin-bottom:4px}
.sp-related span{font-size:14px;color:var(--muted)}

/* ── Article prose ── */
.sp-article{max-width:var(--prose)}
.sp-article p,.sp-article li{color:var(--ink-2)}
.sp-article h2{font-size:clamp(24px,2.6vw,30px);margin:48px 0 14px}
.sp-article h3{margin:30px 0 8px;font-size:20px}
.sp-article ul,.sp-article ol{padding-left:22px}
.sp-article li{margin:6px 0}
.sp-article strong{color:var(--ink)}
.sp-article a{color:var(--lime);text-underline-offset:3px}
.sp-article .sp-callout{background:var(--lime-soft);border:1px solid var(--lime-line);border-radius:14px;padding:18px 20px;margin:28px 0}
.sp-article .sp-callout p{margin:0;color:var(--ink)}
.sp-tldr{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px 22px;margin:0 0 8px}
.sp-tldr strong{display:block;font-size:12px;letter-spacing:1.2px;text-transform:uppercase;color:var(--lime);margin-bottom:6px}
.sp-tldr p{margin:0;color:var(--ink)}

/* ── Learn hub ── */
.sp-hub-group{margin-top:36px}
.sp-hub-group h2{font-size:22px;margin-bottom:12px}

/* ── Footer ── */
.sp-footer{border-top:1px solid var(--line);padding:48px 0 32px;font-size:14px;color:var(--muted)}
.sp-footer-top{display:grid;grid-template-columns:1.3fr repeat(4,1fr);gap:28px}
.sp-footer h2{font-size:12px;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink);margin:0 0 12px;font-weight:700}
.sp-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.sp-footer a{text-decoration:none}
.sp-footer a:hover{color:var(--ink)}
.sp-footer-brand p{margin:12px 0 0;max-width:280px}
.sp-footer-bottom{margin-top:36px;padding-top:20px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between}

/* ── Responsive ── */
@media (max-width:960px){
  .sp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sp-related{grid-template-columns:1fr 1fr}
  .sp-footer-top{grid-template-columns:1fr 1fr}
  .sp-footer-brand{grid-column:1/-1}
}
@media (max-width:760px){
  :root{--gutter:16px}
  body{font-size:16px}
  .sp-hero{padding:36px 0 28px}
  .sp-section{padding:40px 0}
  .sp-grid,.sp-grid-2,.sp-related{grid-template-columns:1fr}
  .sp-band{margin-bottom:48px}
  .sp-cta-row .sp-btn{flex:1 1 auto}
}

/* Figures (real product screenshots), sources, and the character counter tool */
.sp-figure{margin:28px 0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface)}
.sp-figure img{display:block;width:100%;height:auto}
.sp-figure figcaption{padding:12px 16px;font-size:13.5px;color:var(--muted);border-top:1px solid var(--line)}
.sp-sources-note{font-size:14px;color:var(--muted)}
.sp-sources{padding-left:20px}
.sp-sources li{margin:6px 0;font-size:15px}
.sp-sources span{color:var(--muted);font-size:13.5px}
.sp-tool{margin:24px 0;padding:20px;border:1px solid var(--lime-line);border-radius:var(--radius);background:var(--surface);display:grid;gap:12px}
.sp-tool label{font-weight:600;font-size:14px}
.sp-tool select,.sp-tool textarea{width:100%;font:inherit;color:inherit;background:transparent;border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.sp-tool textarea{min-height:96px;resize:vertical}
.sp-tool select:focus-visible,.sp-tool textarea:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.sp-tool-out{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:14px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.sp-tool-out strong{color:var(--ink)}
.sp-tool-over{color:#ff6b5e}