/* =========================================================================
   Web SEO + services pages. Built on the brand book: cream / ghost / lime-wash
   grounds, deep-teal + navy structure, lime accent used ONLY to mark the one
   thing that should get attention on a section (never rotated across cards).
   1.5px ink borders and flat black offset shadows; motion 300-500ms ease-out.
   ========================================================================= */

:root{
  --cream: #F5EEE9;
  --wash: #F3FFBF;
  --ghost: #E8ECEC;
}
section[id]{ scroll-margin-top: 72px; }

/* Placeholder for any number that has not been supplied */
.ph{
  background: rgba(255,196,0,.22); border: 1px dashed rgba(138,91,0,.55);
  border-radius: 5px; padding: 0 .3em; font-weight: 700; color: #8A5B00; white-space: nowrap;
}
.dark-panel .ph, .chart-frame .ph{ background: rgba(255,214,90,.18); border-color: rgba(255,214,90,.6); color: #FFD65A; }

/* ---------- Tones — used sparingly, at most one per section ---------- */
.t-cream{ background: var(--cream) !important; }
.t-wash { background: var(--wash)  !important; }
.t-ghost{ background: var(--ghost) !important; }
.t-white{ background: #fff !important; }

/* Plain brand card: white, ink border, flat shadow. Every repeating card on
   these pages uses this ONE style — colour comes from the icon, not the card. */
.b-card{
  background:#fff; border: 1.5px solid var(--ink); border-radius: 16px; box-shadow: var(--shadow-sm);
  transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s cubic-bezier(.16,1,.3,1);
}
.b-card:hover{ transform: translate(-3px,-3px); box-shadow: 6px 6px 0 0 #000; }

/* Big tinted panel for a whole section — the one deliberate spot of colour */
.tint-panel{
  border: 1.5px solid var(--ink); border-radius: 28px; box-shadow: var(--shadow-sm);
  padding: 3.5rem 2rem;
}
@media (max-width: 767.98px){ .tint-panel{ padding: 2.25rem 1.1rem; border-radius: 20px; } }

/* Headings that need more than the default 700px measure to stay on fewer lines */
.wide-head{ max-width: 880px !important; margin-left:auto !important; margin-right:auto !important; }
.wide-head .section-sub{ max-width: 620px; margin-left:auto; margin-right:auto; }

/* Hero fills most of the viewport so it reads clearly as the page's opener.
   Nav stays absolute (see style.css), so centering the container doesn't
   move it. Left off mobile, where content height already fills the screen. */
@media (min-width: 768px){
  .hero-80vh{ min-height: 80vh; display: flex; align-items: center; }
}

/* ---------- Typed heading: reserves the LONGEST phrase so nothing jumps ---------- */
.typed-stack{ display: inline-grid; vertical-align: top; max-width: 100%; }
.typed-stack > *{ grid-area: 1 / 1; }
.ts-size{ visibility: hidden; pointer-events: none; }
.ts-size::before{ content: attr(data-t); }
.ts-live{ display: block; }
.ts-live .hero-highlight{ display: inline; }
.hero-section h1 .typed-cursor{ color: var(--primary); }
.seo-hero-line{ display: block; }

/* Nav: current section */
.main-nav .nav-link.is-current{ background: linear-gradient(transparent 62%, var(--accent) 62%); }

/* ---------- Split hero (heading + CTA left, floating proof card right) --- */
.hero-split{ display:grid; grid-template-columns: 1.15fr 1fr; gap:2.5rem; align-items:center; text-align:left; }
.hero-split h1{ margin-bottom: .9rem; }
.hero-split .hero-sub{ margin-left:0; margin-right:0; }
.hero-split .hero-ctas{ justify-content:flex-start !important; }
.hero-visual{ position:relative; }
.hero-float-card{
  background:#fff; border:1.5px solid var(--ink); border-radius:18px; box-shadow: var(--shadow-md);
  padding:1.25rem 1.35rem; animation: floatY 5s ease-in-out infinite;
}
.hero-float-card .ft-title{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.9rem; }
.hero-float-card .ft-title span{ font-size:.78rem; font-weight:700; color: rgba(16,16,19,.55); }
.hero-float-card .ft-badge{ background: var(--accent); color: var(--primary); font-size:.68rem; font-weight:800; padding:.25rem .6rem; border-radius:99px; }
.hero-chip{
  position:absolute; background:#fff; border:1.5px solid var(--ink); border-radius:14px; box-shadow: var(--shadow-sm);
  padding:.6rem .85rem; display:flex; align-items:center; gap:.55rem; animation: floatY 4.5s ease-in-out infinite;
}
.hero-visual{ padding:2.5rem 0 2.5rem; }
.hero-chip.c1{ top:0; right:22px; animation-delay:.3s; }
.hero-chip.c2{ bottom:0; left:22px; animation-delay:.9s; }
.hero-chip .n{ font-family: var(--heading-font); font-weight:700; font-size:1.05rem; color: var(--primary); }
.hero-chip small{ display:block; font-size:.68rem; color: rgba(16,16,19,.5); font-weight:600; }
.hero-chip i{ color: var(--accent); background: var(--navy); width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex:none; }
@keyframes floatY{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce){ .hero-float-card, .hero-chip{ animation: none; } }
@media (max-width: 991.98px){
  .hero-split{ grid-template-columns: 1fr; text-align:center; gap:1.75rem; }
  .hero-split .hero-ctas{ justify-content:center !important; }
  .hero-visual{ max-width:420px; margin:0 auto; padding:0; }
  .hero-chip{ display:none; }
}

/* ---------- Clean metric cards (replaces the old dark KPI strip) --------- */
.metric-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:1rem; }
.metric-card{
  background:#fff; border:1.5px solid var(--ink); border-radius:16px; padding:1.25rem 1.35rem;
  box-shadow: var(--shadow-sm); transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s cubic-bezier(.16,1,.3,1);
}
.metric-card:hover{ transform: translate(-3px,-3px); box-shadow: 6px 6px 0 0 #000; }
.metric-card .m-label{ font-size:.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color: rgba(16,16,19,.5); margin-bottom:.6rem; }
.metric-card .m-flow{ display:flex; align-items:baseline; gap:.5rem; font-family: var(--heading-font); font-weight:700; line-height:1; flex-wrap:wrap; }
.metric-card .m-from{ font-size:1.15rem; color: rgba(16,16,19,.35); text-decoration: line-through; text-decoration-color: rgba(16,16,19,.25); }
.metric-card .m-to{ font-size:1.85rem; color: var(--primary); }
.metric-card .m-cap{ color: rgba(16,16,19,.55); font-size:.78rem; margin-top:.5rem; }
@media (max-width: 767.98px){ .metric-grid{ grid-template-columns: repeat(2, 1fr); } .metric-card .m-to{ font-size:1.5rem; } }

.seo-note{ font-size:.8rem; color: rgba(16,16,19,.55); text-align:center; margin-top: 1rem; }
.seo-note i{ margin-right:.3rem; }

/* ---------- Audit findings ---------- */
.find-card{ padding:1.5rem; height:100%; }
.find-card .find-tag{ display:inline-flex; align-items:center; gap:.35rem; font-size:.66rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:.3rem .65rem; border-radius:99px; background: var(--ghost); color: rgba(16,16,19,.55); margin-bottom:.9rem; }
.find-card h5{ font-size:1.05rem; margin-bottom:.4rem; }
.find-card p{ font-size:.86rem; color: rgba(16,16,19,.68); margin:0; }
/* The single most costly issue gets called out; the rest stay quiet */
.find-card.find-worst{ border-color:#C81E1E; border-width:2px; box-shadow: 6px 6px 0 0 #C81E1E; }
.find-card.find-worst:hover{ box-shadow: 8px 8px 0 0 #C81E1E; }
.find-tag.find-tag-worst{ background:#C81E1E; color:#fff; }

/* ---------- Keyword table ---------- */
.kw-card{ overflow:hidden; }
.kw-head, .kw-row{ display:grid; grid-template-columns: 2.4fr 1fr 1.3fr; gap:1rem; align-items:center; padding:.95rem 1.4rem; }
.kw-head{ background: var(--navy); color: rgba(255,255,255,.75); font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.kw-row{ border-top:1px solid rgba(16,16,19,.1); font-size:.92rem; }
.kw-row:nth-child(even){ background: #FAFAF8; }
.kw-row .kw{ font-weight:700; color: var(--ink); }
.kw-move{ display:inline-flex; align-items:center; gap:.45rem; font-weight:700; font-size:.85rem; }
.kw-move .from{ color:#C81E1E; }
.kw-move .to{ color: var(--primary); background: var(--accent); padding:.15rem .55rem; border-radius:99px; }
.kw-move i{ color: rgba(16,16,19,.35); font-size:.8rem; }
@media (max-width: 575.98px){
  .kw-head, .kw-row{ grid-template-columns: 1.6fr 1fr; padding:.85rem 1rem; }
  .kw-head span:nth-child(2), .kw-row .vol{ display:none; }
}

/* ---------- Maps / AI mock-ups ---------- */
.pack-card, .ai-card{ padding:1.4rem; height:100%; }
.pack-tag{ font-size:.68rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.pack-card .before-tag{ color:#C81E1E; } .pack-card .after-tag{ color: var(--primary); }
.pack-q{ font-size:.9rem; color: rgba(16,16,19,.65); margin:.4rem 0 1rem; }
.pack-q strong{ color: var(--ink); font-weight:800; }
.pack-row{ display:flex; align-items:center; gap:.7rem; padding:.75rem .85rem; border-radius:11px; border:1px solid rgba(16,16,19,.12); margin-bottom:.55rem; font-size:.92rem; font-weight:600; background:#fff; }
.pack-row .pin{ width:26px; height:26px; border-radius:50%; background: var(--ghost); color: rgba(16,16,19,.6); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.72rem; flex:none; }
.pack-row small{ display:block; color: rgba(16,16,19,.5); font-size:.7rem; }
.pack-row.you{ background: var(--navy); border-color: var(--navy); color:#fff; }
.pack-row.you .pin{ background: var(--accent); color: var(--primary); }
.pack-row.you small{ color: rgba(255,255,255,.65); }
.pack-row.missing{ border-style:dashed; background:#FFE4E4; color: rgba(16,16,19,.65); }
.pack-row.missing .pin{ background:#fff; color:#C81E1E; }
.ai-bubble{ border-radius:14px; padding:.9rem 1.05rem; font-size:.88rem; margin-bottom:.7rem; }
.ai-bubble.q{ background: var(--ghost); color: var(--ink); margin-left:2rem; }
.ai-bubble.a{ background:#fff; border:1.5px solid var(--ink); margin-right:1rem; }
.ai-bubble.a ol{ margin:.5rem 0 0; padding-left:1.15rem; }
.ai-bubble.a li{ margin-bottom:.3rem; color: rgba(16,16,19,.7); }
.ai-bubble.a li.you{ background: var(--accent); color: var(--primary); font-weight:700; border-radius:6px; padding:.05rem .4rem; margin-left:-.4rem; list-style-position:inside; }
.ai-cap{ font-size:.72rem; color: rgba(16,16,19,.5); margin:.4rem 0 0; }

/* ---------- Steps (approach) — plain cards, colour lives in the icon only */
.step-card{ padding:1.5rem 1.3rem; height:100%; position:relative; }
.step-n{ position:absolute; top:1rem; right:1.1rem; font-family: var(--heading-font); font-weight:700; font-size:1.5rem; line-height:1; color: rgba(16,16,19,.15); }
.step-ic{ width:44px; height:44px; border-radius:11px; background: var(--accent); color: var(--primary); display:flex; align-items:center; justify-content:center; font-size:1.15rem; margin-bottom:1rem; }
.step-card h4{ font-size:1.05rem; margin-bottom:.4rem; }
.step-card p{ font-size:.85rem; color: rgba(16,16,19,.7); margin:0; }
.step-when{ display:inline-block; margin-top:.9rem; font-size:.66rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; padding:.25rem .6rem; border-radius:99px; border:1.5px solid var(--ink); background: var(--ghost); color: var(--ink); }

/* ---------- Keyword clusters ---------- */
.cluster{ padding:1.4rem; height:100%; }
.cluster-pillar{ background: var(--navy); color:#fff; border-radius:12px; padding:1rem 1.1rem; margin-bottom:.8rem; }
.cluster-pillar .lab{ font-size:.62rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color: var(--accent); }
.cluster-pillar strong{ display:block; font-size:1rem; margin:.15rem 0 .25rem; color:#fff; }
.cluster-pillar small{ color: rgba(255,255,255,.7); font-size:.74rem; }
.cluster-post{ display:flex; gap:.6rem; align-items:flex-start; padding:.65rem .75rem; border:1px solid rgba(16,16,19,.14); border-radius:10px; margin-bottom:.45rem; font-size:.84rem; background:#fff; }
.cluster-post i{ color: var(--primary); margin-top:.15rem; }
.cluster-note{ font-size:.76rem; color: rgba(16,16,19,.6); margin:.6rem 0 0; }

/* ---------- Results panel ---------- */
.chart-frame{ background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14); border-radius:18px; padding:1.4rem; height:100%; }
.chart-frame .chart-title{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.5rem; margin-bottom:1rem; color:#fff; font-weight:700; }
.chart-frame .chart-title small{ color: rgba(255,255,255,.6); font-weight:500; }
.seo-chart-svg{ width:100%; height:auto; display:block; }
.seo-line{ stroke-dasharray: 1; stroke-dashoffset: 1; animation: seoDraw 1.6s ease-out .3s forwards; }
@keyframes seoDraw{ to{ stroke-dashoffset: 0; } }
.chart-empty{ border:1.5px dashed rgba(255,255,255,.25); border-radius:14px; min-height:230px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color: rgba(255,255,255,.7); padding:1.5rem; gap:.4rem; }
.chart-empty i{ font-size:1.8rem; color: var(--accent); }
.chart-shot{ width:100%; border-radius:12px; display:block; border:1px solid rgba(255,255,255,.15); }
.change-list{ list-style:none; padding:0; margin:0; }
.change-list li{ display:flex; gap:.7rem; align-items:flex-start; margin-bottom:.9rem; font-size:.9rem; color: rgba(255,255,255,.88); }
.change-list li:last-child{ margin-bottom:0; }
.change-list .ic{ flex:0 0 22px; width:22px; height:22px; border-radius:50%; background: var(--accent); color: var(--primary); display:flex; align-items:center; justify-content:center; font-size:.7rem; margin-top:.1rem; }
.mini-stats{ display:grid; grid-template-columns: repeat(3, 1fr); gap:.85rem; margin-top:1.25rem; }
.mini-stats-6{ grid-template-columns: repeat(3, 1fr); }
.mini-stat{ background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.16); border-top: 3px solid var(--accent); border-radius:12px; padding:1rem 1.1rem; }
.mini-stat .lab{ font-size:.66rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color: rgba(255,255,255,.55); display:block; margin-bottom:.35rem; }
.mini-stat .num{ font-family: var(--heading-font); font-weight:700; font-size:1.2rem; line-height:1.25; color:#fff; }
.mini-stat .num small{ font-size:.72rem; font-weight:600; color: rgba(255,255,255,.6); }
@media (max-width: 767.98px){ .mini-stats, .mini-stats-6{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px){ .mini-stats, .mini-stats-6{ grid-template-columns: 1fr; } }

/* ---------- Case-study grid (hub) + chips — one consistent card style --- */
.cs-grid .industry-card{ background:#fff; border: 1.5px solid var(--ink); box-shadow: var(--shadow-sm); transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s cubic-bezier(.16,1,.3,1); }
.cs-grid .industry-card:hover{ transform: translate(-3px,-3px); box-shadow: 6px 6px 0 0 #000; }
.cs-grid .industry-card .ic-hook{ color: rgba(16,16,19,.72); }
.cs-grid .industry-card .ic-icon{ background: var(--accent); color: var(--primary); }
.cs-chips{ display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; }
.cs-chips a{ display:inline-flex; align-items:center; gap:.45rem; border:1.5px solid var(--ink); border-radius:50px; padding:.55rem 1.05rem; font-size:.85rem; font-weight:600; color: var(--ink); background:#fff; transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s cubic-bezier(.16,1,.3,1), background-color .3s; }
.cs-chips a:hover{ background: var(--accent); box-shadow: var(--shadow-sm); transform: translate(-2px,-2px); color: var(--ink); }
.cs-chips a i{ color: var(--primary); }

/* ---------- Channel tabs (Google / Maps / AI) — larger, easier to read --- */
.chan-tabs{ display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; margin-bottom:1.75rem; }
.chan-tab{ font-family: var(--ui-font); font-weight:700; font-size:.98rem; border:1.5px solid var(--ink); background:#fff; color: var(--ink); border-radius:50px; padding:.65rem 1.3rem; display:inline-flex; gap:.5rem; align-items:center; cursor:pointer; transition: background-color .3s cubic-bezier(.16,1,.3,1), box-shadow .3s cubic-bezier(.16,1,.3,1), transform .3s cubic-bezier(.16,1,.3,1); }
.chan-tab:hover{ transform: translate(-2px,-2px); box-shadow: var(--shadow-sm); }
.chan-tab.active{ background: var(--accent); color: var(--primary); box-shadow: var(--shadow-sm); }
.chan-panel{ display:none; grid-template-columns: 1fr 1.15fr; gap:2.25rem; align-items:center; padding:2.25rem; }
.chan-panel.active{ display:grid; animation: chanIn .4s ease-out; }
@keyframes chanIn{ from{ opacity:0; transform: translateY(10px); } to{ opacity:1; transform:none; } }
.chan-panel h4{ font-size:1.7rem; line-height:1.25; margin-bottom:.75rem; }
.chan-panel p{ color: rgba(16,16,19,.72); font-size:1.03rem; line-height:1.65; }
.chan-panel ul{ list-style:none; padding:0; margin:1.1rem 0 0; }
.chan-panel li{ display:flex; gap:.6rem; margin-bottom:.65rem; font-size:1rem; font-weight:500; }
.chan-panel li i{ color: var(--primary); margin-top:.18rem; }
.chan-mock{ background:#fff; border:1.5px solid var(--ink); border-radius:16px; padding:1.25rem; box-shadow: var(--shadow-sm); }
@media (max-width: 991.98px){ .chan-panel{ grid-template-columns: 1fr; padding:1.25rem; gap:1.25rem; } .chan-panel h4{ font-size:1.4rem; } }
.serp-bar{ display:flex; gap:.6rem; align-items:center; border:1.5px solid var(--ink); border-radius:50px; padding:.55rem 1rem; font-size:.88rem; margin-bottom:1rem; background: var(--ghost); }
.serp-r{ padding:.75rem .9rem; border-radius:12px; border:1px solid rgba(16,16,19,.12); margin-bottom:.55rem; font-size:.84rem; }
.serp-r .url{ font-size:.7rem; color: rgba(16,16,19,.5); display:block; }
.serp-r b{ display:block; color: #1a0dab; font-size:.95rem; margin:.15rem 0; }
.serp-r p{ margin:0; font-size:.78rem; color: rgba(16,16,19,.65); line-height:1.4; }
.serp-r.ad{ background: var(--ghost); }
.serp-r.ad .tag{ font-size:.62rem; font-weight:800; border:1px solid rgba(16,16,19,.4); border-radius:4px; padding:0 .3rem; margin-right:.3rem; }
.serp-r.you{ background: var(--wash); border:1.5px solid var(--ink); }
.serp-r.you .rank{ float:right; background: var(--accent); color: var(--primary); font-weight:800; font-size:.68rem; border-radius:99px; padding:.15rem .55rem; border:1px solid var(--ink); }
.serp-r.dim b, .serp-r.dim p{ color: rgba(16,16,19,.4); }

/* ---------- Search demos: results clear while typing, settle back in ---- */
.chan-mock .res{ transition: opacity .45s ease, transform .45s cubic-bezier(.16,1,.3,1); transition-delay: calc(var(--i, 0) * 90ms); }
.chan-mock.is-typing .res{ opacity:.1; transform: translateY(8px); transition-delay: 0s; }
.chan-mock:not(.is-typing) .res.you, .chan-mock:not(.is-typing) .rank-card.you{ animation: youPulse .9s ease-out .25s; }
@keyframes youPulse{ 0%{ box-shadow: 0 0 0 0 rgba(226,255,94,.9); } 100%{ box-shadow: 0 0 0 14px rgba(226,255,94,0); } }
@media (prefers-reduced-motion: reduce){ .chan-mock .res{ transition:none; } .chan-mock .res.you, .chan-mock .rank-card.you{ animation:none !important; } }

/* Maps and AI answers: the three results sit side by side to save height */
.rank-row{ display:grid; grid-template-columns: repeat(3, 1fr); gap:.6rem; }
.rank-card{ border:1px solid rgba(16,16,19,.14); border-radius:12px; padding:.85rem .45rem; text-align:center; font-size:.86rem; font-weight:700; line-height:1.25; background:#fff; }
.rank-card .pin{ width:26px; height:26px; border-radius:50%; background: var(--ghost); color: rgba(16,16,19,.6); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.72rem; margin:0 auto .45rem; }
.rank-card small{ display:block; margin-top:.2rem; font-weight:600; font-size:.7rem; color: rgba(16,16,19,.5); }
.rank-card.you{ background: var(--navy); border-color: var(--navy); color:#fff; }
.rank-card.you .pin{ background: var(--accent); color: var(--primary); }
.rank-card.you small{ color: rgba(255,255,255,.7); }
.chan-mock .ai-bubble.q{ min-height:3.6em; }
@media (max-width: 575.98px){ .rank-row{ gap:.4rem; } .rank-card{ font-size:.76rem; padding:.7rem .3rem; } .rank-card small{ font-size:.64rem; } }

/* ---------- Pricing: one-time website band + 3 SEO plans ---------- */
.price-onetime{
  display:grid; grid-template-columns: 1.3fr 1fr; gap:2rem; align-items:center;
  background:#fff; border:1.5px solid var(--ink); border-radius:20px; box-shadow: var(--shadow-sm);
  padding:2rem 2.25rem; margin-bottom:2.75rem;
}
.price-onetime .ot-badge{ display:inline-block; background: var(--ghost); color: var(--ink); font-size:.68rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:.3rem .7rem; border-radius:99px; margin-bottom:.7rem; }
.price-onetime h3{ font-size:1.4rem; margin-bottom:.4rem; }
.price-onetime p{ font-size:.92rem; color: rgba(16,16,19,.68); margin:0; }
.price-onetime .ot-right{ text-align:center; border-left:1px solid rgba(16,16,19,.12); padding-left:2rem; }
.price-onetime .ot-price{ font-family: var(--heading-font); font-weight:700; font-size:2.1rem; line-height:1; color: var(--primary); }
.price-onetime .ot-price small{ display:block; font-size:.72rem; font-weight:700; color: rgba(16,16,19,.5); margin-top:.3rem; text-transform:uppercase; letter-spacing:.05em; }
.price-onetime .btn{ margin-top:.9rem; width:100%; }
@media (max-width: 767.98px){
  .price-onetime{ grid-template-columns: 1fr; text-align:center; padding:1.5rem; }
  .price-onetime .ot-right{ border-left:none; border-top:1px solid rgba(16,16,19,.12); padding-left:0; padding-top:1.25rem; }
}

.plans{ display:grid; grid-template-columns: repeat(3, 1fr); gap:1.25rem; align-items:stretch; }
.plan{ position:relative; display:flex; flex-direction:column; padding:1.85rem 1.5rem 1.65rem; border:1.5px solid var(--ink); border-radius:20px; box-shadow: var(--shadow-sm); background:#fff; transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s cubic-bezier(.16,1,.3,1); }
.plan:hover{ transform: translate(-3px,-3px); box-shadow: 6px 6px 0 0 #000; }
.plan.best{ background: var(--navy); color:#fff; box-shadow: var(--shadow-md); }
.plan.best:hover{ box-shadow: 8px 8px 0 0 #000; }
@media (min-width: 992px){ .plan.best{ transform: translateY(-10px); } .plan.best:hover{ transform: translate(-3px,-13px); } }
.plan-flag{ position:absolute; top:-13px; left:50%; transform:translateX(-50%); background: var(--accent); color: var(--primary); font-size:.66rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:.35rem .85rem; border-radius:99px; border:1.5px solid var(--ink); white-space:nowrap; }
.plan-ic{ width:42px; height:42px; border-radius:11px; background: var(--accent); color: var(--primary); display:flex; align-items:center; justify-content:center; font-size:1.1rem; margin-bottom:.9rem; }
.plan h3{ font-size:1.2rem; margin-bottom:.2rem; }
.plan.best h3{ color:#fff; }
.plan-tag{ font-size:.8rem; color: rgba(16,16,19,.65); margin-bottom:1rem; min-height:2.4em; }
.plan.best .plan-tag{ color: rgba(255,255,255,.72); }
.plan-price{ font-family: var(--heading-font); font-weight:700; font-size:2.5rem; line-height:1; margin-bottom:1.1rem; }
.plan-price sup{ font-size:1.05rem; top:-1rem; margin-right:.1rem; }
.plan-price small{ font-size:.8rem; font-weight:600; opacity:.65; margin-left:.2rem; }
.plan ul{ list-style:none; padding:0; margin:0 0 1.4rem; flex:1; }
.plan li{ display:flex; gap:.55rem; align-items:flex-start; font-size:.85rem; margin-bottom:.6rem; }
.plan li i{ color: var(--primary); margin-top:.15rem; flex:none; }
.plan.best li i{ color: var(--accent); }
.plan li.art-count{ background: var(--ghost); border-radius:10px; padding:.6rem .7rem; margin-bottom:.9rem; }
.plan.best li.art-count{ background: rgba(255,255,255,.08); }
.plan li.art-count i{ font-size:1.1rem; }
.plan li.art-count strong{ display:block; font-size:.9rem; }
.plan li.art-count small{ display:block; color: rgba(16,16,19,.55); font-size:.76rem; margin-top:.1rem; }
.plan.best li.art-count small{ color: rgba(255,255,255,.6); }
.plan .btn{ width:100%; }
@media (max-width: 991.98px){ .plans{ grid-template-columns: 1fr; max-width:480px; margin:0 auto; gap:1.5rem; } .plan-tag{ min-height:0; } .plan.best{ transform:none; } }

/* ---------- FAQ, two columns: heading + contact card | accordion -------- */
.faq-split{ display:grid; grid-template-columns: .85fr 1.15fr; gap:2.5rem; align-items:start; }
.faq-side h2{ font-size:1.9rem; margin-bottom:.6rem; }
.faq-side .section-sub{ margin:0 0 1.5rem; }
.faq-contact{ background:#fff; border:1.5px solid var(--ink); border-radius:16px; padding:1.25rem 1.4rem; display:flex; align-items:center; gap:.9rem; box-shadow: var(--shadow-sm); text-decoration:none; color:inherit; transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s cubic-bezier(.16,1,.3,1); cursor:pointer; }
.faq-contact:hover{ color:inherit; transform: translate(-3px,-3px); box-shadow: 6px 6px 0 0 #000; }
.faq-contact .fc-ic{ width:42px; height:42px; border-radius:50%; background: var(--accent); color: var(--primary); display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex:none; }
.faq-contact strong{ display:block; font-size:.95rem; }
.faq-contact small{ display:block; color: rgba(16,16,19,.55); font-size:.82rem; margin-top:.1rem; }
@media (max-width: 991.98px){ .faq-split{ grid-template-columns: 1fr; gap:1.5rem; text-align:center; } .faq-side{ max-width:520px; margin:0 auto; } .faq-contact{ justify-content:center; } }

/* ---------- ERP page + services page ---------- */
.shot-card{ border:1.5px solid var(--ink); border-radius:16px; overflow:hidden; background:#fff; box-shadow: var(--shadow-sm); height:100%; display:flex; flex-direction:column; }
.shot-card img{ width:100%; aspect-ratio:2/1; object-fit:cover; object-position:top; display:block; border-bottom:1.5px solid var(--ink); }
.shot-card .cap{ padding:.9rem 1.1rem; font-size:.85rem; font-weight:700; }
.shot-card .cap small{ display:block; font-weight:500; color: rgba(16,16,19,.6); margin-top:.15rem; }

.svc-feature{ display:grid; grid-template-columns: 1.3fr 1fr; gap:2rem; align-items:center; padding:2.5rem; background: var(--navy); color:#fff; border:1.5px solid var(--ink); border-radius:28px; box-shadow: var(--shadow-md); position:relative; overflow:hidden; }
.svc-feature h3{ color:#fff; font-size:1.9rem; margin:.9rem 0 .6rem; }
.svc-feature p{ color: rgba(255,255,255,.75); max-width:46ch; }
.svc-feature ul{ list-style:none; padding:0; margin:1.2rem 0 1.6rem; display:flex; flex-wrap:wrap; gap:.5rem .5rem; }
.svc-feature li{ font-size:.82rem; font-weight:600; padding:.4rem .8rem; border-radius:99px; background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); }
.svc-feature li i{ color: var(--accent); margin-right:.3rem; }
.svc-feature .new-flag{ background: var(--accent); color: var(--primary); font-size:.68rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:.35rem .8rem; border-radius:99px; }
.svc-feature .chan-mock{ box-shadow: 6px 6px 0 0 var(--accent); color: var(--ink); }
.svc-feature .chan-mock p{ color: rgba(16,16,19,.65); max-width:none; }
.svc-feature .chan-mock .serp-r.dim p{ color: rgba(16,16,19,.4); }
@media (max-width: 991.98px){ .svc-feature{ grid-template-columns: 1fr; padding:1.75rem 1.25rem; border-radius:20px; } .svc-feature h3{ font-size:1.5rem; } }
.svc-card{ display:flex; flex-direction:column; height:100%; padding:1.75rem; color: var(--ink); }
.svc-card:hover{ color: var(--ink); }
.svc-card .svc-ic{ width:48px; height:48px; border-radius:12px; background: var(--accent); color: var(--primary); display:flex; align-items:center; justify-content:center; font-size:1.25rem; margin-bottom:1.1rem; transition: transform .3s cubic-bezier(.16,1,.3,1); }
.svc-card:hover .svc-ic{ transform: scale(1.08) rotate(-4deg); }
.svc-card h4{ font-size:1.25rem; margin-bottom:.4rem; }
.svc-card p{ font-size:.9rem; color: rgba(16,16,19,.72); margin-bottom:1rem; }
.svc-card ul{ list-style:none; padding:0; margin:0 0 1.25rem; }
.svc-card li{ display:flex; gap:.5rem; font-size:.84rem; margin-bottom:.35rem; font-weight:500; }
.svc-card li i{ color: var(--primary); margin-top:.12rem; }
.svc-card .svc-go{ margin-top:auto; font-family: var(--ui-font); font-weight:700; font-size:.88rem; display:inline-flex; align-items:center; gap:.4rem; color: var(--primary); }
.svc-card:hover .svc-go i{ transform: translateX(3px); }
.svc-card .svc-go i{ transition: transform .3s cubic-bezier(.16,1,.3,1); }

/* ---------- Buttons feel alive: lift on hover (scoped to these pages) --- */
.oxen-seo .btn{ transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .25s cubic-bezier(.16,1,.3,1); }
.oxen-seo .btn:hover{ transform: translate(-2px,-2px); }
.oxen-seo .btn i{ transition: transform .25s cubic-bezier(.16,1,.3,1); }
.oxen-seo .btn:hover i.bi-arrow-right{ transform: translateX(4px); }
.oxen-seo .btn:hover i.bi-arrow-down{ transform: translateY(3px); }
.oxen-seo .video-testimonial-card{ transition: transform .3s cubic-bezier(.16,1,.3,1); }
.oxen-seo .video-testimonial-card:hover{ transform: translateY(-4px); }

/* ---------- "Where you'll show up" trust chips ---------- */
.appear-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:.75rem; }
.appear-chip{ display:inline-flex; align-items:center; gap:.55rem; border:1.5px solid var(--ink); border-radius:50px; padding:.7rem 1.3rem; font-weight:700; font-size:.95rem; background:#fff; box-shadow: var(--shadow-sm); transition: transform .3s cubic-bezier(.16,1,.3,1); }
.appear-chip:hover{ transform: translate(-2px,-2px); }
.appear-chip i{ color: var(--primary); font-size:1.1rem; }
.appear-chip img{ width:22px; height:22px; border-radius:6px; object-fit:cover; display:block; }

/* ---------- Chart dots: hover target for the native tooltip ---------- */
.seo-chart-svg.is-interactive .chart-pt{ cursor: pointer; transition: r .15s ease; }
.seo-chart-svg.is-interactive .chart-pt:hover{ r: 7; }

/* Mobile polish */
@media (max-width: 575.98px){
  .hero-section h1{ font-size: 28px; }
  .section-heading{ font-size: 25px; }
}