/* Mint SEO — reusable components (loaded site-wide). */

/* ===== Mobile: kill horizontal overscroll / viewport-breaking overflow =====
   overflow-x: clip (not hidden) so position:sticky header still works. Artifacts that are
   wider than the phone get clipped instead of forcing a horizontal scrollbar + white gap. */
@media (max-width: 900px) {
  html, body { overflow-x: clip; max-width: 100%; }
  .mintseo-landing img, .mintseo-landing svg { max-width: 100%; }
}

/* ===== Full-width, responsive service-page hero frames (fuller on large screens) =====
   The dark "env panel in cream frame" heroes were capped ~1312 → boxed/inset on wide
   monitors. Widen the frame to near-full-width (thin gutter) while keeping the inner
   content at a readable 1440. `.mintseo-landing` beats the per-page rule without !important. */
.mintseo-landing .ag-hero__frame, .mintseo-landing .mc-hero__frame, .mintseo-landing .ae-hero__frame,
.mintseo-landing .op-hero__frame, .mintseo-landing .ct-hero__frame, .mintseo-landing .au-hero__frame {
  max-width: min(1680px, 100% - 24px);
}
.mintseo-landing .ag-hero__in, .mintseo-landing .mc-hero__in, .mintseo-landing .ae-hero__in,
.mintseo-landing .op-hero__in, .mintseo-landing .ct-hero__in, .mintseo-landing .au-hero__in {
  max-width: 1440px; margin-left: auto; margin-right: auto;
}


/* ===== Global Fluent Forms skin (works on light + dark cards) ===== */
.mintseo-landing .fluentform .ff-el-group { margin-bottom: 16px; }
.mintseo-landing .fluentform .ff-el-input--label label { font-size: 16px; font-weight: 800; color: var(--ink); margin-bottom: 8px; padding: 0; }
.mintseo-landing .fluentform input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.mintseo-landing .fluentform select,
.mintseo-landing .fluentform textarea {
  width: 100%; background: #fff; border: 1px solid #d5e6e2; border-radius: 10px;
  padding: 14px 16px; font-size: 16px; line-height: 1.4; color: var(--ink); font-family: inherit;
  height: auto; min-height: 0; box-shadow: none; appearance: auto;
}
.mintseo-landing .fluentform input:focus, .mintseo-landing .fluentform select:focus, .mintseo-landing .fluentform textarea:focus {
  outline: none; border-color: var(--mint); box-shadow: 0 0 0 3px rgba(48,159,151,0.12);
}
.mintseo-landing .fluentform textarea { min-height: 110px; resize: vertical; }
.mintseo-landing .fluentform .ff-btn-submit, .mintseo-landing .fluentform button[type="submit"] {
  background: var(--mint-ink) !important; color: #fff !important; font-size: 17px; font-weight: 800;
  padding: 15px 24px; border: 0; border-radius: 11px; width: 100%; cursor: pointer;
  transition: background 0.2s, transform 0.2s; box-shadow: none; text-shadow: none;
}
.mintseo-landing .fluentform .ff-btn-submit:hover, .mintseo-landing .fluentform button[type="submit"]:hover { background: #2b9089 !important; transform: translateY(-1px); }
/* dark-card context (e.g. retainers) — light labels */
.ff-on-dark .fluentform .ff-el-input--label label { color: #fff; }
.ff-on-dark .fluentform .ff-el-input--content .ff-el-form-check-label, .ff-on-dark .fluentform .ff-el-help { color: rgba(255,255,255,0.7); }
/* Guarantee readable dark text + placeholder inside every input (never white-on-white) */
.mintseo-landing .fluentform input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.mintseo-landing .fluentform select, .mintseo-landing .fluentform textarea { color: #141413 !important; -webkit-text-fill-color: #141413; }
.mintseo-landing .fluentform input::placeholder, .mintseo-landing .fluentform textarea::placeholder { color: #707974 !important; opacity: 1; }
/* Email-only lead-magnet forms (AEO / Tech free-audit / Audit strategy): clean inline capture */
.ae-lead__form .fluentform .ff-el-group, .fa-form .fluentform .ff-el-group, .au-str__form .fluentform .ff-el-group, .ct-plan__form .fluentform .ff-el-group { margin-bottom: 12px; }
.ae-lead__form .fluentform .ff-el-input--label, .fa-form .fluentform .ff-el-input--label, .au-str__form .fluentform .ff-el-input--label, .ct-plan__form .fluentform .ff-el-input--label { display: none; }


/* ===== Universal Retainer Banner (Figma 830:2 / 923:184) ===== */
.mint-retainer { background: var(--mint-tint); padding: 44px 0; }
.mint-retainer__card {
  max-width: 1280px; margin: 0 auto;
  background: radial-gradient(120% 170% at 12% 0%, #1a4a43 0%, #0b201d 60%), #0b201d;
  border-radius: 24px; padding: 44px 48px;
  display: grid; grid-template-columns: 1fr auto; gap: 44px; align-items: center;
  box-shadow: 0 40px 80px -50px rgba(0,0,0,0.6);
  position: relative; overflow: hidden;
}
/* Gloss/shine sweep across the banner */
.mint-retainer__card::after {
  content: ""; position: absolute; top: -60%; left: -60%; width: 42%; height: 220%;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.14) 50%, transparent 100%);
  transform: skewX(-18deg); pointer-events: none; z-index: 4;
  animation: mintRetainerGloss 5.5s ease-in-out infinite;
}
@keyframes mintRetainerGloss { 0% { left: -60%; } 45%, 100% { left: 135%; } }
@media (prefers-reduced-motion: reduce) { .mint-retainer__card::after { animation: none; display: none; } }
.mint-retainer .eyebrow { font-size: 16px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mint-light); margin: 0 0 14px; }
.mint-retainer h2 { margin: 0; font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; color: #fff; }
.mint-retainer h2 em { font-style: normal; color: var(--mint-light); }
.mint-retainer .sub { margin: 16px 0 0; max-width: 62ch; font-size: 17px; line-height: 1.55; color: rgba(255,255,255,0.72); }
.mint-retainer__tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.mint-retainer__tags span { font-size: 16px; font-weight: 700; color: #fff; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; padding: 9px 18px; }
.mint-retainer__rail { border: 1px solid rgba(255,255,255,0.14); border-radius: 18px; padding: 24px 26px; text-align: center; min-width: 300px; }
.mint-retainer__seal { position: relative; width: 100px; height: 100px; margin: 0 auto 16px; display: grid; place-items: center; }
.mint-retainer__seal svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mint-retainer__seal b { position: relative; font-size: 16px; font-weight: 800; color: #04211d; text-align: center; line-height: 1.1; letter-spacing: 0.02em; }
.mint-retainer__terms { font-size: 16px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mint-light); margin: 0 0 16px; line-height: 1.45; }
.mint-retainer__cta { display: block; background: var(--mint); color: #04211d; font-weight: 800; font-size: 16px; padding: 15px; border-radius: 12px; text-decoration: none; transition: background 0.2s, transform 0.2s; }
.mint-retainer__cta:hover { background: #3fc4b6; transform: translateY(-2px); }
/* ── Retainer banner effects ── */
.mint-retainer__seal svg { transform-origin: 50% 50%; animation: mintSealSpin 18s linear infinite; }
@keyframes mintSealSpin { to { transform: rotate(360deg); } }
.mint-retainer__tags span { opacity: 0; transform: translateY(10px); transition: opacity 0.5s ease, transform 0.5s ease, background 0.2s, border-color 0.2s; }
.mint-retainer__body.is-visible .mint-retainer__tags span { opacity: 1; transform: translateY(0); }
.mint-retainer__body.is-visible .mint-retainer__tags span:nth-child(1) { transition-delay: 0.08s; }
.mint-retainer__body.is-visible .mint-retainer__tags span:nth-child(2) { transition-delay: 0.16s; }
.mint-retainer__body.is-visible .mint-retainer__tags span:nth-child(3) { transition-delay: 0.24s; }
.mint-retainer__body.is-visible .mint-retainer__tags span:nth-child(4) { transition-delay: 0.32s; }
.mint-retainer__body.is-visible .mint-retainer__tags span:nth-child(5) { transition-delay: 0.40s; }
.mint-retainer__body.is-visible .mint-retainer__tags span:nth-child(6) { transition-delay: 0.48s; }
.mint-retainer__tags span:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.4); }
.mint-retainer__cta { position: relative; }
@media (prefers-reduced-motion: reduce) {
  .mint-retainer__seal svg { animation: none; }
  .mint-retainer__tags span { opacity: 1; transform: none; transition: none; }
}
@media (max-width: 860px) {
  .mint-retainer { padding: 32px 0; }
  .mint-retainer__card { grid-template-columns: 1fr; padding: 32px 24px; gap: 28px; margin: 0 16px; }
  .mint-retainer__rail { min-width: 0; }
}

/* ===== Social proof (reusable [mintseo_social]) — mirrors homepage 918:161 ===== */
.hp-social { background: #f3f4f2; }
.hp-social__in { max-width: 1300px; margin: 0 auto; padding: clamp(64px, 7vw, 96px) 48px; }
.hp-social__head { text-align: center; max-width: 720px; margin: 0 auto 38px; }
.hp-social .eyebrow { font-size: 16px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mint-ink); margin: 0 0 14px; }
.hp-social h2 { margin: 0; font-size: clamp(32px, 4vw, 46px); font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.hp-social h2 em { font-style: normal; color: var(--mint); }
.hp-social .sub { margin: 16px auto 0; max-width: 56ch; font-size: 18px; line-height: 1.55; color: var(--body); }
.hp-social__rating { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; background: #fff; border: 1px solid var(--border); border-radius: 999px; padding: 9px 18px; font-size: 16px; }
.hp-social__rating .stars { color: #f0a91b; letter-spacing: 1px; }
.hp-social__rating b { color: var(--ink); }
.hp-social__rating .dim { color: var(--body); }
.hp-social__results { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 22px; }
.rz-card { border-radius: 18px; padding: 26px; }
.rz-card b { display: block; font-size: 44px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.rz-card > span { display: block; margin: 10px 0 16px; font-size: 16px; }
.rz-card .tag { display: inline-block; font-size: 16px; font-weight: 800; letter-spacing: 0.06em; border-radius: 999px; padding: 6px 14px; font-style: normal; }
.rz-card--dark { background: radial-gradient(120% 140% at 15% 0%, #1c4f4a, #0c2320); color: #fff; }
.rz-card--dark b { color: #fff; }
.rz-card--dark > span { color: rgba(255,255,255,0.7); }
.rz-card--dark .tag { background: rgba(255,255,255,0.1); color: var(--mint-light); }
.rz-card--light { background: #fff; border: 1px solid var(--border); }
.rz-card--light b { color: var(--mint-deep); }
.rz-card--light > span { color: var(--body); }
.rz-card--light .tag { background: var(--mint-tint); color: var(--mint-deep); }
.hp-social__quotes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.qz-card { background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 24px; display: flex; flex-direction: column; }
.qz-card .qmark { font-size: 40px; font-weight: 800; color: var(--mint-light); line-height: 0.7; height: 24px; }
.qz-card p { margin: 14px 0 auto; font-size: 16px; line-height: 1.55; color: #2c302e; }
.qz-foot { margin-top: 20px; padding-top: 18px; border-top: 1px solid #eef1ef; display: flex; align-items: center; gap: 12px; }
.qz-foot img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.qz-foot b { display: block; font-size: 16px; color: var(--ink); }
.qz-foot span { font-size: 16px; color: var(--body); line-height: 1.3; }
@media (max-width: 900px) { .hp-social__in { padding-left: 22px; padding-right: 22px; } .hp-social__results { grid-template-columns: 1fr; } .hp-social__quotes { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .hp-social__quotes { grid-template-columns: 1fr; } }

/* ===== Decorative store-mockup CTAs — illustrations, not real actions (non-interactive, not dead links) ===== */
.atc, .ct-fc__btn, .wd-sc__buy { pointer-events: none; cursor: default; }

/* ===== Shared service-page hero ATF (.sc-hero) — dark-teal rounded panel framed by cream =====
 * House ATF: a cream page frame holding a dark-teal rounded panel. Left (in the panel) = eyebrow (mint-light)
 * + white H1 (mint-light em) + sub + two CTAs + optional founder chip. Right = the page's own WHITE artifact
 * card (pops on the teal) + small floating .sc-tag stat tags that overhang the card CORNERS (never the centre).
 * Single source of truth (components.css loads AFTER page CSS). Used by SEO Consulting, Technical SEO, AEO,
 * Website Design, Shopify. Each page keeps its own artifact markup/styles inside .sc-hero__r. */
.sc-hero { position: relative; background: var(--page); padding: clamp(14px, 2vh, 26px) clamp(24px, 2.4vw, 40px) clamp(22px, 3vh, 40px); overflow: hidden; }
.sc-hero__in { max-width: 1560px; margin: 0 auto; background: radial-gradient(85% 130% at 82% 12%, #1c4f4a, #0a1f1c 60%), #0a1f1c; border-radius: 28px; box-shadow: 0 50px 100px -60px rgba(20,20,19,0.55); padding: clamp(40px, 3.4vw, 60px) clamp(40px, 4vw, 72px); display: grid; grid-template-columns: 55fr 45fr; gap: 56px; align-items: center; color: #fff; box-sizing: border-box; }
.sc-hero .eyebrow { font-size: 16px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mint-light); margin: 0 0 16px; }
.sc-hero__l { min-width: 0; }
.sc-hero__l h1 { margin: 0; font-size: clamp(36px, 4.2vw, 54px); font-weight: 800; line-height: 1.04; letter-spacing: -0.03em; color: #fff; }
.sc-hero__l h1 em { font-style: normal; color: var(--mint-light); }
.sc-hero__l .sub { margin: 18px 0 0; font-size: 19px; line-height: 1.5; color: rgba(255,255,255,0.78); max-width: 34em; }
.sc-hero__ctas { display: flex; flex-wrap: wrap; gap: 13px; margin: 28px 0 0; }
.sc-hero__chip { display: flex; align-items: center; gap: 13px; margin-top: 28px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.15); }
.sc-hero__chip img { width: 42px; height: 42px; border-radius: 50%; }
.sc-hero__chip .n { font-size: 16px; font-weight: 800; color: #fff; }
.sc-hero__chip .r { font-size: 15px; color: rgba(255,255,255,0.62); }
.sc-hero__r { position: relative; min-width: 0; }
/* ghost CTA reads on the dark panel */
.sc-hero .btn--ghost { background: rgba(255,255,255,0.08); color: #fff; border: 1px solid rgba(255,255,255,0.24); }
.sc-hero .btn--ghost:hover { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.4); }
.sc-tag { position: absolute; background: #fff; border: 1px solid rgba(20,20,19,0.06); border-radius: 15px; box-shadow: 0 26px 55px -28px rgba(0,0,0,0.55); padding: 13px 16px; z-index: 4; }
.sc-tag .k { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--body); white-space: nowrap; }
.sc-tag b { display: block; font-size: 25px; font-weight: 800; letter-spacing: -0.02em; color: var(--mint-ink); margin: 4px 0 2px; white-space: nowrap; }
.sc-tag .s { font-size: 14px; color: var(--body); white-space: nowrap; }
.sc-tag--a { top: -24px; right: -30px; }
.sc-tag--b { bottom: -24px; left: -34px; }
.btn { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 800; padding: 15px 24px; border-radius: 12px; text-decoration: none; transition: background 0.2s, transform 0.2s, border-color 0.2s; white-space: nowrap; }
.btn--mint { background: var(--mint-ink); color: #fff; }
.btn--mint:hover { background: #2b9089; transform: translateY(-2px); }
.btn--ghost { background: #fff; color: var(--mint-deep); border: 1.5px solid var(--border); }
.btn--ghost:hover { border-color: var(--mint-ink); }
.btn--light { background: var(--mint-light); color: #07211d; }
.btn--light:hover { background: #a5e0da; transform: translateY(-2px); }
@media (max-width: 980px) {
  .sc-hero { padding: 18px 20px 28px; }
  .sc-hero__in { grid-template-columns: 1fr; gap: 34px; padding: clamp(30px, 6vw, 44px) clamp(22px, 5vw, 34px); }
  /* copy (H1) leads on mobile, artifact follows — do NOT reorder the artifact above the headline */
  .sc-tag--a { top: -14px; right: 4px; } .sc-tag--b { bottom: -14px; left: 4px; }
}
@media (max-width: 560px) {
  /* stack the floating stat tags into flow on mobile so they never overlap/clip the artifact */
  .sc-hero__r { display: flex; flex-direction: column; gap: 12px; }
  .sc-tag { position: static; align-self: flex-start; }
  .sc-tag--a, .sc-tag--b { inset: auto; }
  .sc-tag b { font-size: 22px; }
}

/* ── Global heading accent ─────────────────────────────────────────────
   Italic in ANY heading (<em>/<i>, i.e. the editor's italic button) renders
   as the upright mint accent — never a synthesized faux-slant. Designed
   headings keep their own scoped em rule (higher specificity), so this is a
   site-wide fallback for every other heading.
   Defaults to --mint (reads on light backgrounds, the common case). A dark
   section can switch to the brighter accent with:  --head-accent: var(--mint-light);
*/
h1 em, h2 em, h3 em, h4 em,
h1 i,  h2 i,  h3 i,  h4 i {
  font-style: normal;
  color: var(--head-accent, var(--mint));
}

/* Smooth in-page scrolling + offset for the sticky header (home "Our Services →" → #hp-services) */
html { scroll-behavior: smooth; }
:target, #hp-services { scroll-margin-top: 92px; }

/* On-Page & Content Writing heroes: keep the two CTAs side by side (their longer labels
   overflow the narrow hero column and wrapped). Slightly tighter buttons so both fit;
   still allowed to stack on small mobile. */
.op-hero__ctas, .ct-hero__ctas { flex-wrap: nowrap; gap: 10px; }
.op-hero__ctas > a, .ct-hero__ctas > a { padding: 14px 18px; font-size: 15px; white-space: nowrap; }
@media (max-width: 600px) { .op-hero__ctas, .ct-hero__ctas { flex-wrap: wrap; } }

/* ── Links keep their colour after being clicked (no purple :visited state) ──
   :where() = zero specificity, so it only affects links that would otherwise fall
   back to the UA visited colour; explicitly-coloured buttons are untouched. */
:where(a):visited { color: inherit; }

/* Homepage hero CTAs side by side on mobile */
@media (max-width: 600px) {
  .hp-hero__ctas { flex-wrap: nowrap; }
  .hp-hero__ctas > a { flex: 1 1 0; justify-content: center; white-space: nowrap; padding-left: 16px; padding-right: 16px; }
}

/* SERP mockup URLs truncate instead of wrapping (like real Google) */
.op-serp .u { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* GMC "same store appears twice" callout: stack the two steps on mobile */
@media (max-width: 600px) { .mc-twice .steps { flex-direction: column; gap: 10px; } }

/* Retainers hero: give the CTA buttons breathing room below the intro paragraph */
.rt-hero .rt-hero__cta { margin-top: 30px; }