/* === v3 page-ai-seo class extractions ===
 * Replaces inline style="..." attributes that were stripped during the
 * page-ai-seo.php refactor. Register this stylesheet via inc/enqueue.php
 * (kyul-page-ai-seo) on the AI/SEO template only, OR after kyul-pages.
 */

/* aio-hero micro label spacing (was: style="margin-bottom:24px;") */
.aio-hero .micro--mb-24 { margin-bottom: 24px; }

/* aio-hero micro label with a leading icon */
.aio-hero .micro--mb-24:has(.aio-hero__micro-icon) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.aio-hero__micro-icon {
  height: 20px;
  width: auto;
  flex: none;
  display: inline-block;
}

/* band-3-framework eyebrow spacing (was: style="display:block; margin-bottom:16px;") */
.band-3 .eyebrow--block-mb-16 { display: block; margin-bottom: 16px; }

/* aio-flow caption typography (was: style="font-size: 28px; text-align: left") */
/* TASK 9e17989f — increased from 28px */
.aio-flow__caption--lg-left { font-size: 36px; text-align: left; }

/* dark-cards section number/eyebrow (was: style="color:var(--on-dark-3); margin-bottom:16px;") */
.dark-card__num { display: none; }

/* AEO h-section: font-weight -1 (600 → 500) */
#page-aeo .h-section { font-weight: 500; }

/* detail-section centered head (was: style="text-align:center" wrapper + h2) */
.detail__head--center,
.detail__head--center .h-section { text-align: center; }

/* AEO case-study blush band padding (was: style="padding:100px 0;") */
.section--blush--padded { padding: var(--section-y-md) 0; }

/* AEO case study spacing (was: inline display:block;margin-bottom:18px / margin-top:18px / margin-bottom:8px) */
.aeo-case__eyebrow { display: block; margin-bottom: 18px; }
.aeo-case__lede { margin-top: 18px; }
/* TASK a45ca43f — hide panel eyebrow */
.aeo-case__panel-eyebrow { display: none; }

/* SEO case chart legend swatches (was: style="background:#3D7BD9" / #F2A93B / margin-left:14px) */
.seo-case__legend-i {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 0;
    margin-right: 6px;
    vertical-align: middle;
}
.seo-case__legend-i--blue   { background: #3D7BD9; }
.seo-case__legend-i--orange { background: #F2A93B; }
.seo-case__legend-i--gap    { margin-left: 14px; }

/* detail-carousel background-image fallback for image_mode='bg' */
.dc-img--bg { background-size: cover; background-position: center; }
.dc-img--bg[data-bg] { background-image: var(--dc-img-bg, none); }

/* ============================================================
   TASK e5cb8b09 — aio-hero grid staggered reveal animation
   Children animate in when .aio-hero__grid gets .is-in
   ============================================================ */
.aio-hero__grid .aio-hero__body {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s ease, transform 0.55s ease;
  transition-delay: 0s;
}
.aio-hero__grid .aio-hero__ph {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s ease, transform 0.55s ease;
  transition-delay: 0.15s;
}
.aio-hero__grid.is-in .aio-hero__body,
.aio-hero__grid.is-in .aio-hero__ph {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   TASK ad6c791a — aio-flow section staggered sub-reveals
   ============================================================ */
.aio-flow .aio-flow__head.reveal { transition-delay: 0s; }
.aio-flow .iso.reveal            { transition-delay: 0.12s; }
.aio-flow .aio-flow__caption.reveal { transition-delay: 0.2s; }
.aio-flow .iso-labels.reveal     { transition-delay: 0.3s; }

/* ============================================================
   TASK de78d6fa — dark-cards staggered cascade reveal
   nth-child targets within .dark-cards .container
   ============================================================ */
.dark-cards .dark-card.reveal:nth-child(2) { transition-delay: 0.16s; }
.dark-cards .dark-card.reveal:nth-child(3) { transition-delay: 0.32s; }

/* ============================================================
   TASK b95619c2 — detail-carousel accordion smooth animations
   ============================================================ */
/* Smooth button transitions; kill mobile blue tap-highlight + focus flash */
.dc-btn {
  transition: color 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  -webkit-user-select: none;
  user-select: none;
}
.dc-btn:focus,
.dc-btn:focus-visible,
.dc-btn:active {
  outline: none;
  background-color: transparent;
  color: inherit;
}
.detail-carousel .dc-item,
.detail-carousel .dc-item .dc-btn {
  -webkit-tap-highlight-color: transparent;
}

/* dc-title color transition when accordion opens */
.dc-title {
  transition: color 0.25s ease;
}
.dc-item.is-open .dc-title {
  color: inherit;
}

/* dc-img fade+scale in non-open items */
.dc-img {
  opacity: 0.5;
  transform: scale(0.97);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* dc-img full visibility in open item */
.dc-item.is-open .dc-img {
  opacity: 1;
  transform: scale(1);
}

/* ============================================================
   TASK f9072305 — seo-case__before fade-up entry
   Animates in after seo-case__grid gets .is-in
   ============================================================ */
.seo-case__before {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  transition-delay: 0.3s;
}
.seo-case__grid.is-in .seo-case__before {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   TASK d99ebddb — dark-cta blinking block cursor
   Matches about-hero cursor style (about.css)
   ============================================================ */
@keyframes cursor-blink {
  50% { opacity: 0; }
}

.dark-cta h2 .cursor {
  display: inline-block;
  position: relative;
  vertical-align: baseline;
  width: 0.42em;
  height: 0.525em;
  background: currentColor;
  animation: cursor-blink 1.2s step-start infinite;
}

/* ============================================================
   TASK 8f2eca09 — aio-hero__ph image square
   ============================================================ */
.aio-hero__grid .aio-hero__ph {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
}

/* ============================================================
   TASK b9a49d5d — aio-flow caption colour split
   grey span uses --ink-4 (#8A8A8A), white span is #ffffff
   ============================================================ */
.aio-flow__caption--grey { color: var(--ink-4, #8A8A8A); }

/* === dark-cta cursor blink (kept from prior bridge batch) === */
@keyframes cta-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
.aio-flow__caption--white { color: #ffffff; }

/* ============================================================
   TASK 7c79e44f — chip--on-dark pill shape
   ============================================================ */
#page-ai-seo .chip.chip--on-dark { border-radius: 9999px; }

/* ============================================================
   TASK 7f8959c5 — hide dark-cta--panel section (get rid)
   ============================================================ */
#page-ai-seo .dark-cta--panel,
#page-aio .dark-cta--panel { display: none; }

/* ============================================================
   TASK 8969472a — left align band-3 title (SEO/GEO/AEO)
   ============================================================ */
#page-ai-seo .band-3__head,
#page-ai-seo .band-3__head h2 { text-align: left; }
#page-ai-seo .band-3__head .lede { text-align: left; margin-left: 0; margin-right: 0; }

/* ============================================================
   TASK 88f51da5 — center band-3 head in .section--blush.band-3
   Overrides the left-align rule above for the blush band-3 section
   ============================================================ */
#page-ai-seo .section--blush.band-3 .band-3__head,
#page-ai-seo .section--blush.band-3 .band-3__head h2,
#page-ai-seo .section--blush.band-3 .band-3__head .lede {
  text-align: center;
}
#page-ai-seo .section--blush.band-3 .band-3__head,
#page-ai-seo .section--blush.band-3 .band-3__head .lede {
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   TASK 2ad37b5b — widen h-section heading so it fits in 2 lines
   The parent .detail__head was max-width:746px which was clamping
   the h2 to 3 lines; widen both wrapper and heading.
   ============================================================ */
#page-ai-seo .detail .detail__head {
  max-width: 980px;
}
#page-ai-seo .detail .detail__head .h-section,
#page-ai-seo .detail .detail__head h2.h-section {
  max-width: 980px;
}

/* ============================================================
   TASK dc12fdfd — remove card border/outline in band-3 section
   ============================================================ */
#page-ai-seo .section--blush .card { border: none; }

/* ============================================================
   TASKS 21d1c517 (+ f580b1ac, 6c4462fb, 312a9650, 385243d3, 4ee3cf86)
   aio-feature__thumb — square icon, left-top aligned
   Overrides more.css (width:100%; aspect-ratio:4/3) and pages.css
   ============================================================ */
#page-ai-seo .aio-feature__thumb,
#page-aio .aio-feature__thumb {
  display: block;
  width: 48px;
  height: 48px;
  aspect-ratio: 1 / 1;
  align-self: flex-start;
  margin-bottom: 22px;
}
@media (max-width: 900px) {
  #page-ai-seo .aio-feature__thumb,
  #page-aio .aio-feature__thumb { width: 44px; height: 44px; margin-bottom: 18px; }
}

/* ============================================================
   TASK 5dc3d60c — seo-case__grid consistent alignment all sides
   The .container already handles horizontal centering; ensure the
   grid itself has no stray padding that would break the 4-side
   alignment inside the page-ai-seo context.
   ============================================================ */
#page-ai-seo .seo-case__grid , #page-seo .seo-case__grid {
  padding: 0;
}

/* ============================================================
   TASK 3d22b8ef — aio-flow caption: bold + full container width
   .aio-flow__caption--lg-left is already left-aligned (line 15).
   pages.css sets max-width:720px on .aio-flow__caption — override
   to match the container width and add font-weight:700.
   ============================================================ */
#page-ai-seo .aio-flow__caption--lg-left,
#page-aio .aio-flow__caption--lg-left,
.aio-flow__caption--lg-left {
  font-weight: 700;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* ==========================================================================
   v6 Drawbridge reference patches — coder.com styling
   ========================================================================== */

/* Hero sections — flex layout (was grid) */
#page-ai-seo .aio-hero--tall {
  padding-top: 64px;
  padding-bottom: 64px;
}
#page-ai-seo .aio-hero--tall .aio-hero__grid {
  display: flex;
  gap: 64px;
  align-items: center;
  justify-content: space-between;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0;
  min-height: auto;
}
#page-ai-seo .aio-hero--tall:not(.aio-hero--reverse) .aio-hero__grid {
  flex-direction: row;
}
#page-ai-seo .aio-hero--tall.aio-hero--reverse .aio-hero__grid {
  flex-direction: row-reverse;
}
#page-ai-seo .aio-hero--tall .aio-hero__body {
  flex: 1 1 auto;
  min-width: 0;
}
#page-ai-seo .aio-hero--tall .aio-hero__ph {
  flex: 0 0 600px;
  width: 600px;
  max-width: 600px;
}
#page-ai-seo .aio-hero--tall h1 {
  font-size: 52px;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

/* aio-quote section — bg, large blockquote */
#page-ai-seo .aio-quote,
#page-aio .aio-quote,
.aio-quote.aio-quote--v2 {
  display: block;
  padding: var(--section-y-sm) 0;
  background-color: #FAF9F7;
  max-width: 780px;
  margin: 0 auto;
}
/* v2 width handled in pages.css (full-bleed bg, content centered at 1200) */
#page-ai-seo .aio-quote blockquote {
  font-size: 40px;
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.01em;
}

/* aio-flow heading — 56px medium */
#page-ai-seo .aio-flow__head h2 {
  font-size: 56px;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.56px;
  max-width: 1062px;
}

/* dark-cta — hidden by default (AIO is default tab); shown via JS for SEO/GEO/AEO */
#page-ai-seo .dark-cta.ai-seo-dark-cta { display: none; }

/* dark-cta — centered, generous padding */
#page-ai-seo .dark-cta {
  padding: clamp(80px, 9.5vw, 164px) 0 clamp(64px, 8vw, 144px);
  background-color: #1a2a2a;
  text-align: center;
}
#page-ai-seo .dark-cta .dark-cta__inner {
  max-width: 641px;
  margin: 0 auto;
}
#page-ai-seo .dark-cta h2 {
  font-size: 40px;
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.01em;
}
#page-ai-seo .dark-cta p {
  margin-left: auto;
  margin-right: auto;
}
#page-ai-seo .dark-cta .btn {
  align-self: center;
}

/* detail sections (AEO/SEO/GEO) — wider container, large heading */
#page-ai-seo .detail {
  padding: var(--section-y-md) 0 var(--section-y);
}
#page-ai-seo .detail .detail__container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
#page-ai-seo .detail .detail__head {
  max-width: 746px;
}
#page-ai-seo .detail h2 {
  font-size: 52px;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

/* packages section — grid of 3 cards */
#page-ai-seo .packages {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--section-y) 0;
}
@media (max-width: 1200px) {
  #page-ai-seo .packages { padding: var(--section-y) var(--gutter); }
}
#page-ai-seo .packages .packages__intro {
  max-width: 750px;
  margin: 0 auto 64px;
  text-align: center;
}
#page-ai-seo .packages .packages__intro h2 {
  font-size: 52px;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.01em;
}
#page-ai-seo .packages .packages__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
#page-ai-seo .packages .package-card {
  max-width: 483px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 40px;
  border-radius: 16px;
  background-color: #faf5f3;
}

/* pkg-table — comparison table layout */
#page-ai-seo .pkg-table {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--section-y) 0;
}
#page-ai-seo .pkg-table h2 {
  font-size: 36px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 48px;
}
#page-ai-seo .pkg-table table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}
#page-ai-seo .pkg-table thead {
  position: sticky;
  top: 0;
  background-color: #ffffff;
  z-index: 2;
}
#page-ai-seo .pkg-table th,
#page-ai-seo .pkg-table td {
  padding: 16px 20px;
  text-align: left;
  font-size: 15px;
  font-weight: 500;
  border-bottom: 1px solid #e5e0dc;
}

/* cfr rows — gap and spacing */
#page-ai-seo .cfr__row {
  gap: 32px 24px;
  max-width: var(--container);
  margin-bottom: 144px;
}
#page-ai-seo .cfr__body {
  max-width: 483px;
  gap: 28px;
}

/* Responsive — scale headings, stack flex layouts */
@media (max-width: 768px) {
  #page-ai-seo .aio-hero--tall h1 { font-size: 32px; line-height: 1.15; }
  #page-ai-seo .aio-hero--tall .aio-hero__grid { flex-direction: column; padding: 0 24px; gap: 24px; }
  #page-ai-seo .aio-flow__head h2 { font-size: 32px; }
  #page-ai-seo .detail h2 { font-size: 32px; }
  #page-ai-seo .aio-quote blockquote { font-size: 26px; }
  #page-ai-seo .dark-cta { padding: 80px 0 64px; }
  #page-ai-seo .dark-cta h2 { font-size: 28px; }
  #page-ai-seo .packages .packages__intro h2 { font-size: 32px; }
  #page-ai-seo .packages .packages__grid { grid-template-columns: 1fr; gap: 16px; }
  #page-ai-seo .packages { padding: 64px 24px; }
  #page-ai-seo .pkg-table { padding: 64px 24px; }
  #page-ai-seo .pkg-table h2 { font-size: 26px; }
  #page-ai-seo .cfr__row { margin-bottom: 64px; gap: 24px; }
  #page-ai-seo .detail .detail__container { padding: 0 24px; }
}

/* === Imported from https://coder.com on 2026-05-18 — task 19f81587 === */
/* Note: FT System Mono and LayGrotesk woff2 assets are from coder.com and not hosted on kyulco.
   TASK 019-023: @font-face declarations removed to prevent 404-triggered FOUT across the page.
   .kc-import-hiring-cta is display:none so these fonts are not needed. */

.kc-import-hiring-cta {
  display: none;
  background-color: oklch(0.15 0.0034 196.79);
  color: oklch(1 0 0);
  padding: clamp(80px, 9.5vw, 144px) 0;
  text-align: center;
  font-family: LayGrotesk, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  box-sizing: border-box;
}

.kc-import-hiring-cta .container {
  max-width: var(--container);
  padding: 0 var(--gutter);
  text-align: center;
}

.kc-import-hiring-cta .mx-auto.max-w-\[641px\] {
  margin: 0 auto;
  max-width: 641px;
  text-align: center;
}

.kc-import-hiring-cta h2.font-mono {
  font-family: var(--f-sans);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.28px;
  line-height: 1.4;
  opacity: 0.7;
  margin-bottom: 28px;
}

.kc-import-hiring-cta h3.inline-block {
  display: inline-block;
  font-size: 52px;
  font-weight: 500;
  letter-spacing: -0.52px;
  line-height: 1.05;
  color: oklch(1 0 0);
}

.kc-import-hiring-cta p.prose {
  display: block;
  max-width: 820px;
  margin: 16px auto 0;
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  opacity: 0.7;
}

.kc-import-hiring-cta a.mt-6 {
  display: inline-block;
  margin-top: 24px;
}

.kc-import-hiring-cta button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: #ffffff;
  color: #000000;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0.01em;
  padding: 14px 20px;
  min-height: 43px;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.4s ease-in-out;
}

.kc-import-hiring-cta button:hover {
  background-color: #f5f0e8;
}

@media (max-width: 768px) {
  .kc-import-hiring-cta { padding: 64px 0 48px; }
  .kc-import-hiring-cta h3.inline-block { font-size: 32px; }
  .kc-import-hiring-cta p.prose { font-size: 16px; }
  .kc-import-hiring-cta .container { padding: 0 24px; }
}

/* ============================================================
   TASK 4dbec584 — center h2.h-section block in blush band-3
   Text is centered (text-align:center already set) but the h2
   block itself is off-center. Use width:fit-content + margin:auto.
   ============================================================ */
#page-ai-seo .section--blush.band-3 .band-3__head h2.h-section,
#page-seo .section--blush.band-3 .band-3__head h2.h-section,
#page-geo .section--blush.band-3 .band-3__head h2.h-section,
#page-aeo .section--blush.band-3 .band-3__head h2.h-section {
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   TASK b949166b — open accordion retains darker background
   Base hover = rgba(0,0,0,0.015) on .dc-item; open state
   should be visibly darker (rgba(0,0,0,0.05)) to persist when
   the user is not hovering.
   ============================================================ */
#page-ai-seo .detail-carousel .dc-item.is-open,
#page-ai-seo .detail-carousel .dc-item.is-open .dc-btn {
  background-color: rgba(0, 0, 0, 0.05);
}

/* ============================================================
   TASK a08128c7 — Korean stat-name = half the size of the big "1.2"
   .seo-case__big (before-stat) = 133px; half = 66.5px → 67px
   ============================================================ */
#page-ai-seo .seo-case__before-stat , #page-seo .seo-case__before-stat {
  font-size: 50px;
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 0.12em;
}
/* 월 매출 label — same size as 억 (both inherit from .seo-case__before-stat) */
#page-ai-seo .seo-case__stat-label , #page-seo .seo-case__stat-label {
  font-size: inherit;
  font-weight: 700;
  white-space: nowrap;
}

/* ============================================================
   TASK 27f334dd — pkg-table: individual pill header cells
   Switching to border-collapse:separate + border-spacing:8px 0
   so each th can have its own border-radius with visible gaps
   between the pills. The first (label) column has no pill bg.
   Also fixes first-column overlap via min-width + padding.
   ============================================================ */
#page-ai-seo .pkg-table table {
  border-collapse: separate;
  border-spacing: 8px 0;
}
#page-ai-seo .pkg-table thead th {
  background-color: #faf5f3;
  border-radius: 9999px;
  border-bottom: none;
  padding: 10px 20px;
}
#page-ai-seo .pkg-table thead th:first-child {
  background-color: transparent;
  border-radius: 0;
}
/* Restore bottom border on data cells */
#page-ai-seo .pkg-table tbody td {
  border-bottom: 1px solid #e5e0dc;
}
/* Fix first column overlap: ensure enough min-width */
#page-ai-seo .pkg-table th:first-child,
#page-ai-seo .pkg-table td:first-child {
  padding-left: 0;
  padding-right: 24px;
  min-width: 200px;
}

/* ============================================================
   TASK da84000a — swap hero layout: text LEFT, image RIGHT
   pages.css has row / row-reverse split; override the non-reverse
   (default) flex-direction so image goes right.
   ============================================================ */
#page-ai-seo .aio-hero--tall:not(.aio-hero--reverse) .aio-hero__grid {
  flex-direction: row-reverse;
}

/* ============================================================
   Swap AIO + Content heroes to image-LEFT / text-RIGHT, and
   tighten the AIO image↔text gap (64px → 32px).
   - Standalone /aio/ + /content/ pages use the CSS grid (pages.css):
     image_position='left' puts the image in DOM column 1; swap the
     track widths so the text keeps the wider column on the right.
   - Combined /ai-seo/ page uses flex with a row-reverse default
     (TASK da84000a above); flip section-aio + section-content to row.
   ============================================================ */
@media (min-width: 901px) {
  #page-aio .aio-hero--tall .aio-hero__grid,
  #page-content-mktg .aio-hero--tall .aio-hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  }
}
@media (min-width: 769px) {
  #page-ai-seo #section-aio .aio-hero__grid,
  #page-ai-seo #section-content .aio-hero__grid {
    flex-direction: row;
  }
}

/* ============================================================
   TASK a425c4b1 — decrease font-weight on aio-intro heading
   pages.css: font-weight 600 → decrease one step → 500
   ============================================================ */
#section-aio .aio-intro--stacked .aio-intro__heading {
  font-weight: 500;
}

/* ============================================================
   TASK c74af754 — increase font-weight and font-size on subcopy
   pages.css: font-size 13.5px, no weight (inherits 400) → 14.5px / 500
   ============================================================ */
#section-aio .aio-intro__subcopy {
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.65;
}

/* ============================================================
   TASKS 9fc834e0 + a2dcda4d + ad807319 — increase .aio-feature p size
   pages.css: font-size 13px → 15px (fills section better)
   ============================================================ */
#page-ai-seo .aio-feature p,
#page-aio .aio-feature p {
  font-size: 15px;
  line-height: 1.6;
}

/* ============================================================
   TASK e6b5694c — decrease line-height on aio-flow caption
   Current: inherits 1.75 from .aio-flow__caption → 1.5
   ============================================================ */
#page-ai-seo .aio-flow__caption--lg-left,
#page-aio .aio-flow__caption--lg-left,
.aio-flow__caption--lg-left {
  line-height: 1.2;
  font-weight: 500;
}

/* ============================================================
   TASK 629199db — decrease gap between title and body in dark-card
   pages.css: dark-card h3 margin-bottom: 18px → 8px
   ============================================================ */
#page-ai-seo .dark-card h3 {
  margin-bottom: 8px;
}

/* ============================================================
   TASK dc6ece73 — remove border lines separating dark-card articles
   pages.css sets border-top + :last-child border-bottom
   ============================================================ */
#page-ai-seo .dark-cards .dark-card {
  border-top: none;
}
#page-ai-seo .dark-cards .dark-card:last-child {
  border-bottom: none;
}

/* ============================================================
   dark-card image: cap at natural width (500px) to prevent upscale pixelation.
   The 1fr column is wider than the source image — constrain so it never upscales.
   ============================================================ */
#page-aio .dark-cards .dark-card > img.dark-card__ph {
  max-width: 500px;
  width: 100%;
  margin-left: auto;   /* right-align in normal cards (text left, image right) */
}
#page-aio .dark-cards .dark-card--reverse > img.dark-card__ph {
  margin-left: 0;      /* left-align in reverse cards (image left, text right) */
  margin-right: auto;
}

/* ============================================================
   dark-card slide-in animation (AIO page)
   First child (column 1) slides from left; second child (column 2)
   slides from right — mirrors the CFR section pattern.
   ============================================================ */

/* Disable the row-level fade-up so children can animate individually */
#page-aio .dark-cards .dark-card.reveal,
#page-aio .dark-cards .dark-card.reveal.is-in {
  opacity: 1;
  transform: none;
  transition: none;
}
/* Also cancel the nth-child stagger on the card row */
#page-aio .dark-cards .dark-card.reveal:nth-child(2),
#page-aio .dark-cards .dark-card.reveal:nth-child(3) {
  transition-delay: 0s;
}

/* Initial off-screen state for each column. The card clips on x because those
   translateX(±44px) start positions hang past the viewport edge at ~1024 and put a
   horizontal scrollbar on the page until the reveal finishes. clip, not hidden —
   hidden would make this a scroll container. */
#page-aio .dark-cards .dark-card { overflow-x: clip; }
#page-aio .dark-cards .dark-card > *:first-child {
  opacity: 0;
  transform: translateX(-44px);
  transition: opacity 0.7s cubic-bezier(.22,.61,.36,1),
              transform 0.7s cubic-bezier(.22,.61,.36,1);
}
#page-aio .dark-cards .dark-card > *:last-child {
  opacity: 0;
  transform: translateX(44px);
  transition: opacity 0.7s cubic-bezier(.22,.61,.36,1),
              transform 0.7s cubic-bezier(.22,.61,.36,1);
  transition-delay: 0.08s;
}

/* Animated-in state */
#page-aio .dark-cards .dark-card.is-in > *:first-child,
#page-aio .dark-cards .dark-card.is-in > *:last-child {
  opacity: 1;
  transform: translateX(0);
}

/* Mobile: columns stack vertically — use fade-up instead */
@media (max-width: 900px) {
  #page-aio .dark-cards .dark-card > *:first-child,
  #page-aio .dark-cards .dark-card > *:last-child {
    transform: translateY(14px);
  }
  #page-aio .dark-cards .dark-card.is-in > *:first-child,
  #page-aio .dark-cards .dark-card.is-in > *:last-child {
    transform: none;
  }
}

/* ============================================================
   TASK 7fbdfeed — decrease font-weight on dc-title by 1
   pages.css: font-weight 700 → 600
   ============================================================ */
#page-ai-seo .detail-carousel .dc-title {
  font-weight: 600;
}

/* ============================================================
   TASKS 16c50c00 + 231a8653 — increase font-size on seo-case__eyebrow by 2px
   pages.css: font-size 13px → 15px
   ============================================================ */
#page-ai-seo .seo-case__eyebrow , #page-seo .seo-case__eyebrow {
  font-size: 15px;
}

/* ============================================================
   TASK d9f69f3b — decrease font-weight on seo-case__title by 1
   pages.css: font-weight 700 → 600
   ============================================================ */
#page-ai-seo .seo-case__title , #page-seo .seo-case__title {
  font-weight: 600;
}

/* ============================================================
   TASKS dff134de + fba14450 + 29d9eece — increase font-weight on bullets li
   pages.css: no explicit weight (inherits 400) → 500
   ============================================================ */
#page-ai-seo .seo-case__bullets li , #page-seo .seo-case__bullets li {
  font-weight: 500;
}

/* ============================================================
   TASKS db692ff0 + 573a2093 — clear background on seo-case__bullets, keep border
   pages.css: background var(--bg-card) → transparent
   ============================================================ */
#page-ai-seo .seo-case__bullets , #page-seo .seo-case__bullets {
  background: transparent;
}

/* ============================================================
   TASK 798e058a — widen seo-case__strategy to fit on one line
   pages.css: max-width 46ch → 60ch
   ============================================================ */
#page-ai-seo .seo-case__strategy , #page-seo .seo-case__strategy {
  max-width: 60ch;
}

/* ============================================================
   TASK 452e7471 — change seo-case__extra-tag color to navy
   The var --seo-case-navy is scoped to .seo-case__before; use direct hex
   ============================================================ */
#page-ai-seo .seo-case__extra-tag , #page-seo .seo-case__extra-tag {
  color: #0E1E5C;
}

/* ============================================================
   TASK 6e155853 — change left border of seo-case__extra to navy
   ============================================================ */
#page-ai-seo .seo-case__extra , #page-seo .seo-case__extra {
  border-left-color: #0E1E5C;
}

/* ============================================================
   TASK c0922af1 — align top of seo-case__before with 월매출 stat
   + increase BEFORE label (seo-case__before-label) font-size by 2px
   pages.css: .seo-case__before has align-items:end; override to start
   .seo-case__before-label: 14px → 16px
   ============================================================ */
#page-ai-seo .seo-case__before , #page-seo .seo-case__before {
  align-items: end;
  grid-template-columns: auto auto;
  gap: 20px;
  column-gap: 22px;
  width: fit-content;
  margin-left: auto;
  align-self: flex-end;
  margin-top: auto;
}
#page-ai-seo .seo-case__before-label , #page-seo .seo-case__before-label {
  font-size: 16px;
  text-align: right;
  padding-top: 0;
  padding-bottom: 38px;
}
#page-ai-seo .seo-case__col--label , #page-seo .seo-case__col--label {
  padding-bottom: 0;
  justify-content: flex-end;
}
#page-ai-seo .seo-case__col--name , #page-seo .seo-case__col--name {
  align-items: flex-start;
  padding-bottom: 14px;
}
#page-ai-seo .seo-case__stat-name , #page-seo .seo-case__stat-name {
  color: var(--ink);
  font-weight: 700;
}
#page-ai-seo .seo-case__col--figure , #page-seo .seo-case__col--figure {
  position: relative;
  align-items: stretch;
}
#page-ai-seo .seo-case__col--figure > .seo-case__arrow , #page-seo .seo-case__col--figure > .seo-case__arrow {
  position: absolute;
  top: -36px;
  left: 24px;
  font-size: 52px;
  font-weight: 400;
  color: var(--ink);
  line-height: 1;
}
#page-ai-seo .seo-case__figure-row , #page-seo .seo-case__figure-row {
  align-items: baseline;
  justify-content: flex-end;
}
#page-ai-seo .seo-case__unit , #page-seo .seo-case__unit {
  padding-bottom: 0;
  align-self: baseline;
}
#page-ai-seo .seo-case__before-sub , #page-seo .seo-case__before-sub {
  grid-column: 1 / -1;
  margin-top: 10px;
  flex-wrap: nowrap;
  white-space: nowrap;
  justify-content: flex-end;
}
#page-ai-seo .seo-case__before-sub > span , #page-seo .seo-case__before-sub > span {
  white-space: nowrap;
}

/* push text block (.seo-case__before) to bottom of right column so its bottom
   aligns with the chips on the left; image stays anchored to top */
#page-ai-seo .seo-case__grid , #page-seo .seo-case__grid {
  align-items: stretch;
}
#page-ai-seo .seo-case__right , #page-seo .seo-case__right {
  justify-content: flex-start;
}
/* align chips bottom-edge with before-sub bottom-edge */
#page-ai-seo .seo-case__left , #page-seo .seo-case__left {
  display: flex;
  flex-direction: column;
}
#page-ai-seo .seo-case__left .seo-case__chips , #page-seo .seo-case__left .seo-case__chips {
  margin-top: auto;
}

/* ============================================================
   TASK 8fd22767 — decrease gap in seo-case__right to make bullets
   look like a footnote above the 월매출 stat
   pages.css: gap 56px → 24px
   ============================================================ */
#page-ai-seo .seo-case__right , #page-seo .seo-case__right {
  gap: 24px;
}
/* Tighten gap between .seo-case__before stat block and .seo-case__before-sub
   paragraph — push the stat block visually lower so it sits closer to the
   sub line. Negative margin-bottom collapses the flex gap to ~6px. */
#page-ai-seo .seo-case__before , #page-seo .seo-case__before {
  margin-bottom: -18px;
}

/* ============================================================
   TASK 5d29dcb5 — change 6th chip row bg to grey (too dark now = #333)
   pages.css:1049 sets #333 on :nth-child(6) .seo-case__chip → override to light grey
   ============================================================ */
#page-ai-seo .seo-case__left .seo-case__chips:nth-child(6) .seo-case__chip , #page-seo .seo-case__left .seo-case__chips:nth-child(6) .seo-case__chip {
  background: #e5e5e5;
  color: var(--ink-2);
  border-color: #d1d5db;
}

/* ============================================================
   TASKS f4eea87e + f63332e2 — reduce aio-hero__body-copy width to 4 lines
   pages.css: max-width 520px → 380px, no mid-word breaks
   ============================================================ */
#page-ai-seo .aio-hero__body-copy {
  max-width: 380px;
  word-break: keep-all;
}

/* ============================================================
   TASK 02510b0f — hide eyebrow in band-3__head on ai-seo (GEO Framework label)
   Scope: the GEO section band-3 eyebrow
   ============================================================ */
#page-ai-seo .band-3__head .eyebrow {
  display: none;
}

/* ============================================================
   TASK 8be79a8c — increase card height to be more square (in blush band-3)
   styles.css .card has padding 32px 28px; increase padding-bottom to make square
   ============================================================ */
#page-ai-seo .section--blush.band-3 .card,
#page-seo .section--blush.band-3 .card,
#page-geo .section--blush.band-3 .card,
#page-aeo .section--blush.band-3 .card {
  padding: 32px 28px;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
/* GEO + AEO: content-driven height (no forced min) to match reference */
#page-geo .section--blush.band-3 .card,
#page-aeo .section--blush.band-3 .card {
  min-height: 0;
}
/* SEO/GEO/AEO band3 cards: content packed at the top (no bottom-push) */
#page-seo .section--blush.band-3 .card > p,
#page-geo .section--blush.band-3 .card > p,
#page-aeo .section--blush.band-3 .card > p {
  margin-top: 12px;
}
#page-ai-seo .section--blush.band-3 .card .ph-icon {
  margin-bottom: auto;
}

/* ============================================================
   TASKS 90cc229b + d8e9f72e — increase .h-section width to fit in 2 lines
   styles.css: max-width 18ch → 32ch
   ============================================================ */
#page-ai-seo .reveal .h-section {
  max-width: 32ch;
}

/* ============================================================
   TASK ce63e556 — increase .lede width to fit in 2 lines
   styles.css: max-width 64ch; pages.css .detail .lede: 58ch
   Override to remove constraint so text flows to 2 lines
   ============================================================ */
#page-ai-seo .reveal .lede {
  max-width: 80ch;
}

/* ============================================================
   TASK bd2e4ad5 — aio-quote placeholder image on right side
   ============================================================ */
.aio-quote--with-img {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 48px;
  align-items: start;
}
.aio-quote--with-img .aio-quote__copy {
  grid-column: 1;
  grid-row: 1;
}
.aio-quote--with-img img.aio-quote__img {
  grid-column: 2;
  grid-row: 2;
  width: auto;
  height: auto;
  max-width: 100%;
  aspect-ratio: auto;
  object-fit: contain;
  background: transparent;
  justify-self: end;
}
@media (max-width: 900px) {
  .aio-quote--with-img {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }
  .aio-quote--with-img .aio-quote__copy { grid-column: 1; grid-row: 1; }
  .aio-quote--with-img img.aio-quote__img { grid-column: 1; grid-row: 2; justify-self: end; }
}

/* ============================================================
   TASK 91720ead — aio-quote__img: 400x200px, right-aligned
   ============================================================ */
#section-aio .aio-quote__img.ph {
  width: 400px;
  height: 200px;
  flex: 0 0 400px;
  margin-left: auto;
}

/* ============================================================
   TASK 0a1e444a — swap columns in #section-seo first aio-hero--tall
   Override global row-reverse so text goes left, image goes right
   ============================================================ */
#section-seo > .aio-hero--tall:nth-child(1) .aio-hero__grid {
  flex-direction: row;
}

/* ============================================================
   TASK 9ade2ff3 — set card height to 360px in #section-seo
   ============================================================ */
#section-seo .card {
  height: 360px;
}
/* …but the band-3 feature cards must stay content-height (matching the GEO/AEO
   reference). The fixed 360px above left a large empty void below the text. */
#section-seo .section--blush.band-3 .grid-3 > .card,
#section-seo .band-3 .grid-3 > .card {
  height: auto;
}

/* ============================================================
   TASK f4019478 — swap columns in #section-geo first aio-hero--tall
   Identical approach to 0a1e444a but for geo section
   ============================================================ */
#section-geo > .aio-hero--tall:nth-child(1) .aio-hero__grid {
  flex-direction: row;
}

/* ============================================================
   TASK e755d96b — decrease height of seo-case__viz container
   Current boundingRect h=280px; reduce container to ~180px
   ============================================================ */
#page-ai-seo .seo-case__viz , #page-seo .seo-case__viz {
  margin-top: 109px;
  height: 180px;
  max-height: 180px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}
#page-ai-seo .seo-case__viz img , #page-seo .seo-case__viz img {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: right bottom;
}

/* ============================================================
   TASK b77099e2 — #section-content: bring in animation/transitions
   Add fade-up reveal to content sections and card elements
   ============================================================ */
#section-content .reveal {
  transition: opacity 0.55s ease, transform 0.55s ease;
}
#section-content .card.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
#section-content .card.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}
#section-content .card.reveal:nth-child(2) { transition-delay: 0.1s; }
#section-content .card.reveal:nth-child(3) { transition-delay: 0.2s; }
#section-content .card.reveal:nth-child(4) { transition-delay: 0.3s; }

/* ============================================================
   TASK 623ea3ad — fix 4-column overlap in pkg-table
   Expand max-width from 1062px to 1200px so all 4 columns fit
   Also reduce first-column min-width and relax border-spacing
   ============================================================ */
#page-ai-seo .pkg-table {
  max-width: 1200px;
}

/* ============================================================
   TASK bb1ce3e2 — Growth pill: entire pill blue, not just outline
   Make the th.is-featured itself fully blue; clear inner span bg
   ============================================================ */
#page-ai-seo .pkg-table thead th.is-featured {
  background-color: #2f4dd0;
  color: #ffffff;
}
#page-ai-seo .pkg-table thead th.is-featured .pkg-table__col {
  background: transparent;
  color: #ffffff;
}

/* ============================================================
   TASK e6832975 — Scale pill (th:nth-child(4)): match box color
   The th box is #faf5f3; make inner .pkg-table__col match
   ============================================================ */
#page-ai-seo .pkg-table thead th:nth-child(4) .pkg-table__col {
  background: #faf5f3;
  color: var(--ink-2, #47433d);
  border-radius: 9999px;
}

/* ============================================================
   TASK 5c981810 — Starter pill (th:nth-child(2)): match box color
   Same as e6832975 for the second column
   ============================================================ */
#page-ai-seo .pkg-table thead th:nth-child(2) .pkg-table__col {
  background: #faf5f3;
  color: var(--ink-2, #47433d);
  border-radius: 9999px;
}

/* ============================================================
   TASK 6836026c — pkg-table__notes directly under 포함 사항 table
   Remove top margin gap so notes sit directly below the table
   ============================================================ */
#section-pricing .pkg-table__notes {
  margin-top: 0;
}

/* ============================================================
   TASK 2a37c36e — #section-pricing: all elements fit 1200px width
   Packages section and pkg-table__wrap should use 1200px max-width
   ============================================================ */
#section-pricing .packages {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
#section-pricing .pkg-table__wrap {
  max-width: 1200px;
}
#section-pricing .pkg-table__head {
  max-width: 1200px;
}
#section-pricing .pkg-table__notes {
  max-width: 1200px;
}

/* === Imported from https://coder.com/ on 2026-05-18 — task b77099e2 (CTA section arrows + transitions) === */

/* Round nav button */
.ref-aio-arrow-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  width: 36px;
  border-radius: 9999px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  cursor: pointer;
  overflow: visible;
  transition: scale 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ai-seo carousel — blockquote variant */
.home-facts--ai-seo .home-facts__title {
  font-size: clamp(22px, 2.6vw, 34px);
  font-weight: 700;
  line-height: 1.45;
  margin-bottom: 0;
}
.home-facts--ai-seo > .container {
  min-height: 380px;
}
@media (max-width: 700px) {
  /* Mobile: shrink the empty middle so the nav/count sit near the bottom,
     matching the wider-viewport layout (overrides the 380px above). */
  .home-facts--ai-seo > .container { min-height: 300px; }
}
/* This variant keeps home.css's slide art / bg video. It used to be flattened to
   #FAF9F7 with dark type, from when home.css didn't load here; now that it does,
   the art is back and the type is white over it (base .home-facts treatment). */
.home-facts--ai-seo .home-facts__title,
.home-facts--ai-seo .home-facts__count {
  color: #fff;
}
.home-facts--ai-seo .home-facts__btn { color: rgba(255, 255, 255, 0.75); }
.home-facts--ai-seo .home-facts__ring-track { stroke: rgba(255, 255, 255, 0.25); }
.home-facts--ai-seo .home-facts__ring-fill { stroke: #fff; }

/* ============================================================
   TASK 020 — clean up text layout in #section-content hero
   Tighten line-height, consistent alignment, fix body copy spacing
   ============================================================ */
#section-content .aio-hero--tall .aio-hero__body {
  text-align: left;
  gap: 0;
}
#section-content .aio-hero--tall h1 {
  line-height: 1.08;
  letter-spacing: -0.02em;
}
#section-content .aio-hero--tall .aio-hero__body-copy {
  margin-top: 20px;
  line-height: 1.7;
}

/* ============================================================
   TASK 021 — portrait image in #section-content aio-hero
   pages.css sets aspect-ratio:1/1 (square) on .aio-hero__ph.
   Override to portrait (3/4) for this section only.
   ============================================================ */
#section-content .aio-hero--tall .aio-hero__ph {
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center top;
  height: auto;
}

/* ============================================================
   TASK 022 — Before state all-black color treatment
   .seo-case__before uses --seo-case-navy (#0E1E5C) for most colors.
   Override ALL colored elements in the Before block to black.
   Note: .seo-case__extra-tag is in .seo-case__left (sibling of before),
   not inside .seo-case__before — do NOT scope it here.
   ============================================================ */
#page-ai-seo .seo-case__before , #page-seo .seo-case__before {
  --seo-case-navy: #000000;
}
#page-ai-seo .seo-case__before .seo-case__before-label , #page-seo .seo-case__before .seo-case__before-label {
  color: #000000;
  transition: color 0.4s ease;
}
#page-ai-seo .seo-case__before .seo-case__big , #page-seo .seo-case__before .seo-case__big {
  color: #000000;
  transition: color 0.4s ease;
}
#page-ai-seo .seo-case__before .seo-case__unit , #page-seo .seo-case__before .seo-case__unit {
  color: #000000;
  transition: color 0.4s ease;
}
/* d2: "0" of "10" — hidden until .is-after is added, then slides in */
#page-ai-seo .seo-roller__d2 , #page-seo .seo-roller__d2 {
  max-width: 0;
  overflow: hidden;
  transition: max-width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
/* the rn-ghost rule sets opacity:0 globally — override so d2's "0" shows */
#page-ai-seo .seo-roller__d2 .rn-ghost , #page-seo .seo-roller__d2 .rn-ghost {
  opacity: 1;
}
/* ============================================================
   TASK seo-roll-after — AFTER state: navy color + reveal d2
   Triggered by JS adding .is-after after the rolling animation
   ============================================================ */
#page-ai-seo .seo-case__before.is-after , #page-seo .seo-case__before.is-after {
  --seo-case-navy: #0E1E5C;
}
#page-ai-seo .seo-case__before.is-after .seo-case__before-label , #page-seo .seo-case__before.is-after .seo-case__before-label {
  color: #0E1E5C;
}
#page-ai-seo .seo-case__before.is-after .seo-case__big , #page-seo .seo-case__before.is-after .seo-case__big {
  color: #0E1E5C;
}
/* reveal the hidden "0" of "10" */
#page-ai-seo .seo-case__before.is-after .seo-roller__d2 , #page-seo .seo-case__before.is-after .seo-roller__d2 {
  max-width: 1.2em;
}

/* ============================================================
   TASK 023 — Fix font rendering in SEO/GEO/AEO sections
   The unhosted @font-face declarations (FT System Mono / LayGrotesk)
   were removed above (lines 495-500) to prevent FOUT.
   Additionally, force var(--f-sans) on the seo-case sections
   so no external font bleeds through.
   ============================================================ */
#section-seo,
#section-geo,
#section-aeo,
#section-content {
  font-family: var(--f-sans);
}
.kc-import-hiring-cta {
  font-family: 'Inter', sans-serif;
}
.kc-import-hiring-cta h2.font-mono {
  font-family: var(--f-mono);
}

/* ============================================================
   TASK 024 — Buttons in SEO/GEO/AEO/Content sections match reference
   Canonical .btn is square (border-radius:0) in styles.css.
   Reference shows pill-shaped dark filled buttons.
   ============================================================ */
#section-seo .btn--primary,
#section-geo .btn--primary,
#section-aeo .btn--primary,
#section-content .btn--primary {
  border-radius: 9999px;
  background: var(--ink, #47433d);
  color: #ffffff;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 500;
}
#section-seo .btn--primary:hover,
#section-geo .btn--primary:hover,
#section-aeo .btn--primary:hover,
#section-content .btn--primary:hover {
  background: #000000;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* ============================================================
   Tab nav hidden — navigation via mega menu instead.
   ID selector overrides .ai-seo-section.is-active from pages.css.
   ============================================================ */
.ai-seo-tabs { display: none; }
.ai-seo-tabs__head { display: none; }
#page-ai-seo .ai-seo-section { display: block; }

/* ============================================================
   MOBILE — AI SEO pages responsive fixes
   ============================================================ */
@media (max-width: 768px) {
  /* 0. Prevent horizontal scroll on AI SEO pages — safety net for any
        section that bleeds past viewport (full-bleed hero, wide modules).
        The pricing table has its own .pkg-table__wrap with overflow-x:auto
        so its internal scroll is preserved (independent stacking context). */
  #page-ai-seo,
  #page-seo,
  #page-geo,
  #page-aeo,
  #page-aio,
  #page-content-mktg {
    overflow-x: hidden;
  }

  /* 1. Re-show the tab nav on mobile (desktop hides it globally). */
  .ai-seo-tabs { display: block; }

  /* 2. Main /ai-seo/ page: re-hide non-active sections on mobile.
        Desktop forces all sections visible via the rule above.
        .is-active (1-2-0) always shows. */
  #page-ai-seo .ai-seo-section { display: none; }
  #page-ai-seo .ai-seo-section.is-active { display: block; }

  /* ── SUB-PAGE HEROES (seo / geo / aeo / aio / content-mktg) ──────────── */

  /* 3. Hero grid — full-bleed single column, no gap (padding lives on body) */
  #page-seo .aio-hero--tall .aio-hero__grid,
  #page-geo .aio-hero--tall .aio-hero__grid,
  #page-aeo .aio-hero--tall .aio-hero__grid,
  #page-aio .aio-hero--tall .aio-hero__grid,
  #page-content-mktg .aio-hero--tall .aio-hero__grid {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 0;
    padding: 0;
  }

  /* 4. Hero image — top of stack, cinematic 16:9 aspect ratio, breathing room */
  #page-seo .aio-hero--tall .aio-hero__ph,
  #page-geo .aio-hero--tall .aio-hero__ph,
  #page-aeo .aio-hero--tall .aio-hero__ph,
  #page-aio .aio-hero--tall .aio-hero__ph,
  #page-content-mktg .aio-hero--tall .aio-hero__ph {
    order: -1;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    margin-top: 24px;
    margin-bottom: 4px;
  }
  /* SEO / GEO / AEO: crop the hero image center-center (cover) instead of
     letterboxing (contain) — overrides the sub-page contain rule in pages.css */
  #page-seo .aio-hero--tall img.aio-hero__ph,
  #page-geo .aio-hero--tall img.aio-hero__ph,
  #page-aeo .aio-hero--tall img.aio-hero__ph {
    object-fit: cover;
    object-position: center center;
  }

  /* 5. Hero body — comfortable internal padding */
  #page-seo .aio-hero--tall .aio-hero__body,
  #page-geo .aio-hero--tall .aio-hero__body,
  #page-aeo .aio-hero--tall .aio-hero__body,
  #page-aio .aio-hero--tall .aio-hero__body,
  #page-content-mktg .aio-hero--tall .aio-hero__body {
    padding: 28px 24px 40px;
  }

  /* 6. Hero h1 */
  #page-seo .aio-hero--tall h1,
  #page-geo .aio-hero--tall h1,
  #page-aeo .aio-hero--tall h1,
  #page-aio .aio-hero--tall h1,
  #page-content-mktg .aio-hero--tall h1 {
    font-size: 33px;
    line-height: 1.2;
  }

  /* 7. Hero body-copy */
  #page-seo .aio-hero--tall .aio-hero__body-copy,
  #page-geo .aio-hero--tall .aio-hero__body-copy,
  #page-aeo .aio-hero--tall .aio-hero__body-copy,
  #page-aio .aio-hero--tall .aio-hero__body-copy,
  #page-content-mktg .aio-hero--tall .aio-hero__body-copy {
    max-width: 100%;
    font-size: 14px;
    line-height: 1.7;
    margin-top: 14px;
  }

  /* 8. Hero section outer padding */
  #page-seo .aio-hero--tall,
  #page-geo .aio-hero--tall,
  #page-aeo .aio-hero--tall,
  #page-aio .aio-hero--tall,
  #page-content-mktg .aio-hero--tall {
    padding: 0;
  }

  /* ── MAIN /ai-seo/ PAGE HEROES ───────────────────────────────────────── */

  /* 9. Force column layout — override desktop rules at lines 278-282 & 677.
        Those rules use specificity 1-3-0 (:not(.aio-hero--reverse) or
        .aio-hero--reverse counts as an extra class). Match that specificity
        here; later source order wins. */
  #page-ai-seo .aio-hero--tall:not(.aio-hero--reverse) .aio-hero__grid,
  #page-ai-seo .aio-hero--tall.aio-hero--reverse .aio-hero__grid {
    flex-direction: column;
    padding: 0;
    gap: 0;
  }

  /* 10. Main page hero image — top of stack, reset hardcoded 600px flex-basis */
  #page-ai-seo .aio-hero--tall .aio-hero__ph {
    flex: 0 0 auto;
    order: -1;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    margin-top: 24px;
    margin-bottom: 4px;
  }

  /* 11. Main page hero body — comfortable internal padding */
  #page-ai-seo .aio-hero--tall .aio-hero__body {
    padding: 28px 24px 40px;
    max-width: 100%;
  }

  /* 12. Main page hero h1 */
  #page-ai-seo .aio-hero--tall h1 {
    font-size: 28px;
    line-height: 1.2;
  }

  /* 13. Main page hero body-copy */
  #page-ai-seo .aio-hero__body-copy {
    max-width: 100%;
    font-size: 14px;
    line-height: 1.7;
    margin-top: 14px;
  }

  /* 14. Main page hero section — flush to viewport, no outer padding */
  #page-ai-seo .aio-hero--tall { padding: 0; }

  /* ── PRICING TABLE ────────────────────────────────────────────────────── */

  /* 15. Section padding */
  #page-ai-seo .pkg-table { padding: 48px 0; }

  /* 16. Heading + sub + lede — side padding matching h2 (20px)
          since .pkg-table has padding:0 on mobile, all text in .pkg-table__head
          needs explicit side padding to align with the h2. */
  #page-ai-seo .pkg-table h2,
  #page-ai-seo .pkg-table__sub,
  #page-ai-seo .pkg-table__lede {
    padding-left: 20px;
    padding-right: 20px;
  }
  #page-ai-seo .pkg-table h2 {
    font-size: 24px;
    margin-bottom: 24px;
  }

  /* 17. Scroll container — full bleed so sticky column touches screen edge */
  #page-ai-seo .pkg-table__wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0;
  }

  /* 18. Table — remove pill gaps (border-spacing:8px set by desktop rule),
          auto-layout so columns size to content */
  #page-ai-seo .pkg-table table {
    min-width: 400px;
    border-spacing: 0;
    table-layout: auto;
  }

  /* 19. Tier column headers — pill lives on the inner span, not the th,
          so adjacent cells have transparent backgrounds and the pills
          appear properly spaced with visible gaps between them. */
  #page-ai-seo .pkg-table thead th {
    background: transparent;
    border-radius: 0;
    border-bottom: none;
    padding: 8px 4px;
    white-space: nowrap;
  }
  #page-ai-seo .pkg-table thead th .pkg-table__col {
    display: block;
    background: #faf5f3;
    border-radius: 9999px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
  }

  /* 20. Featured tier — clear the full-cell blue from desktop rule (line 1039,
          thead th.is-featured { background:#2f4dd0 }, specificity 1-2-2).
          Matching selector inside @media wins by later source order. */
  #page-ai-seo .pkg-table thead th.is-featured {
    background: transparent;
  }
  #page-ai-seo .pkg-table thead th.is-featured .pkg-table__col {
    background: #2563eb;
    color: #ffffff;
  }

  /* 21. Data cells */
  #page-ai-seo .pkg-table th,
  #page-ai-seo .pkg-table td {
    padding: 10px 10px;
    font-size: 13px;
    font-weight: 400;
  }

  /* 22. Sticky row-label column — stays visible while tier columns scroll */
  #page-ai-seo .pkg-table th:first-child,
  #page-ai-seo .pkg-table td:first-child {
    position: sticky;
    left: 0;
    background: #ffffff;
    z-index: 2;
    min-width: 90px;
    max-width: 110px;
    font-size: 12px;
    font-weight: 500;
    padding: 10px 8px 10px 16px;
    border-right: 1px solid #e5e0dc;
  }

  /* 23. Corner cell (sticky both axes) — needs z-index above both sticky layers.
          Reset pill shape from rule 19 since the empty header cell stays flat. */
  #page-ai-seo .pkg-table thead th:first-child {
    z-index: 3;
    background: #ffffff;
    border-bottom: none;
    border-radius: 0;
  }

  /* 24. Featured tier — soft background highlight */
  #page-ai-seo .pkg-table tbody td.is-featured {
    background: #faf5f3;
  }

  /* 25. Notes below table */
  #section-pricing .pkg-table__notes { padding: 0 16px; }
}

/* ============================================================
   2026-05-28 — mobile polish pass
   ============================================================ */
@media (max-width: 768px) {
  /* AIO hero img — fill grid column width, keep section side gutter */
  #page-ai-seo .aio-hero--tall .aio-hero__ph,
  #page-ai-seo img.aio-hero__ph,
  #page-seo .aio-hero--tall .aio-hero__ph,
  #page-geo .aio-hero--tall .aio-hero__ph,
  #page-aeo .aio-hero--tall .aio-hero__ph,
  #page-aio .aio-hero--tall .aio-hero__ph,
  #page-content-mktg .aio-hero--tall .aio-hero__ph {
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: top left;
  }

  /* aio-quote v2 — restore side gutter on mobile (full-bleed bg stays via clip-path) */
  .aio-quote.aio-quote--v2,
  #page-ai-seo .aio-quote.aio-quote--v2,
  #page-aio .aio-quote.aio-quote--v2 {
    padding-left: 24px;
    padding-right: 24px;
  }

  /* seo-case / geo-case — stack columns, prevent SVG chart overflow */
  #page-ai-seo .seo-case__grid,
  #page-seo .seo-case__grid,
  #page-geo .seo-case__grid,
  #page-aeo .seo-case__grid {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }
  #page-ai-seo .seo-case__left,
  #page-seo .seo-case__left,
  #page-geo .seo-case__left,
  #page-aeo .seo-case__left { order: 1; }
  #page-ai-seo .seo-case__right,
  #page-seo .seo-case__right,
  #page-geo .seo-case__right,
  #page-aeo .seo-case__right {
    order: 2;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
  }
  /* chart SVG — let it shrink, never overflow */
  #page-ai-seo .seo-case__chart-svg,
  #page-seo .seo-case__chart-svg,
  #page-geo .seo-case__chart-svg,
  #page-aeo .seo-case__chart-svg {
    width: 100%;
    max-width: 100%;
    height: auto;
  }
  #page-ai-seo .seo-case__chart,
  #page-seo .seo-case__chart,
  #page-geo .seo-case__chart,
  #page-aeo .seo-case__chart {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }
  /* Chart head/legend pieces — wrap rather than push horizontal */
  #page-ai-seo .seo-case__chart-head,
  #page-ai-seo .seo-case__chart-tabs,
  #page-ai-seo .seo-case__chart-legend,
  #page-seo .seo-case__chart-head,
  #page-seo .seo-case__chart-tabs,
  #page-seo .seo-case__chart-legend,
  #page-geo .seo-case__chart-head,
  #page-geo .seo-case__chart-tabs,
  #page-geo .seo-case__chart-legend {
    flex-wrap: wrap;
    gap: 8px 12px;
  }

  /* Band-3 cards — improved mobile typography & spacing */
  #page-ai-seo .band-3 .grid-3,
  #page-seo .band-3 .grid-3,
  #page-geo .band-3 .grid-3,
  #page-aeo .band-3 .grid-3,
  #page-aio .band-3 .grid-3 {
    gap: 16px;
  }
  #page-ai-seo .band-3 .grid-3 > .card,
  #page-seo .band-3 .grid-3 > .card,
  #page-geo .band-3 .grid-3 > .card,
  #page-aeo .band-3 .grid-3 > .card,
  #page-aio .band-3 .grid-3 > .card {
    padding: 28px 26px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  /* Content packs from the top (matches reference). Previously min-height +
     margin-top:auto pushed the body to the card floor, leaving a large empty
     gap between the heading and the text — the "too empty" look. */
  #page-ai-seo .band-3 .grid-3 > .card > p,
  #page-seo .band-3 .grid-3 > .card > p,
  #page-geo .band-3 .grid-3 > .card > p,
  #page-aeo .band-3 .grid-3 > .card > p,
  #page-aio .band-3 .grid-3 > .card > p {
    margin-top: 0;
  }
  #page-ai-seo .band-3 .grid-3 > .card .band3-icon,
  #page-seo .band-3 .grid-3 > .card .band3-icon,
  #page-geo .band-3 .grid-3 > .card .band3-icon,
  #page-aeo .band-3 .grid-3 > .card .band3-icon,
  #page-aio .band-3 .grid-3 > .card .band3-icon {
    width: 52px;
    height: 52px;
    margin: 0 0 6px;
  }
  #page-ai-seo .band-3 .grid-3 > .card h3,
  #page-seo .band-3 .grid-3 > .card h3,
  #page-geo .band-3 .grid-3 > .card h3,
  #page-aeo .band-3 .grid-3 > .card h3,
  #page-aio .band-3 .grid-3 > .card h3 {
    font-size: 18px;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: -0.015em;
    margin: 0;
  }
  #page-ai-seo .band-3 .grid-3 > .card p,
  #page-seo .band-3 .grid-3 > .card p,
  #page-geo .band-3 .grid-3 > .card p,
  #page-aeo .band-3 .grid-3 > .card p,
  #page-aio .band-3 .grid-3 > .card p {
    font-size: 14px;
    line-height: 1.7;
    color: var(--ink-2);
    margin: 0;
  }

  /* seo-case / geo-case AFTER stat — shrink so 월매출 + 10.0 + 억 fits on one line after roll */
  #page-ai-seo .seo-case__before-stat,
  #page-seo .seo-case__before-stat,
  #page-geo .seo-case__before-stat,
  #page-aeo .seo-case__before-stat {
    font-size: clamp(28px, 8vw, 56px);
    line-height: 1.05;
    flex-wrap: nowrap;
    white-space: nowrap;
    gap: 6px 8px;
  }
  #page-ai-seo .seo-case__before .seo-case__big,
  #page-seo .seo-case__before .seo-case__big,
  #page-geo .seo-case__before .seo-case__big,
  #page-aeo .seo-case__before .seo-case__big,
  #page-ai-seo .seo-case__before.is-after .seo-case__big,
  #page-seo .seo-case__before.is-after .seo-case__big,
  #page-geo .seo-case__before.is-after .seo-case__big,
  #page-aeo .seo-case__before.is-after .seo-case__big {
    font-size: clamp(28px, 8vw, 56px);
    line-height: 1.05;
  }
  #page-ai-seo .seo-case__stat-label,
  #page-seo .seo-case__stat-label,
  #page-geo .seo-case__stat-label,
  #page-aeo .seo-case__stat-label {
    font-size: inherit;
  }
  #page-ai-seo .seo-case__before-label,
  #page-seo .seo-case__before-label,
  #page-geo .seo-case__before-label,
  #page-aeo .seo-case__before-label {
    font-size: 14px;
    padding-bottom: 0;
    line-height: 1;
  }
  /* align top of BEFORE/AFTER label with top of 월 매출 stat */
  #page-ai-seo .seo-case__before,
  #page-seo .seo-case__before,
  #page-geo .seo-case__before,
  #page-aeo .seo-case__before {
    align-items: start;
  }
}

/* ─── Gutter fix: prevent full-bleed at 769–1200px ─── */
@media (min-width: 769px) and (max-width: 1200px) {
  #page-ai-seo .aio-hero--tall .aio-hero__grid { padding: 0 var(--gutter); }
  #page-ai-seo .pkg-table { padding: var(--section-y) var(--gutter); }
}

/* ============================================================
   Sub-page mobile heroes — body first, image second, padded (not full-bleed).
   Override the shared sub-page rule that puts image on top (order:-1).
   All five AI-SEO sub-pages share identical 600x670 hero images, so they
   render the natural (aspect-ratio:auto) portrait crop, matching /aio/.
   ============================================================ */
@media (max-width: 900px) {
  #page-aio .aio-hero--tall .aio-hero__ph,
  #page-seo .aio-hero--tall .aio-hero__ph,
  #page-geo .aio-hero--tall .aio-hero__ph,
  #page-aeo .aio-hero--tall .aio-hero__ph,
  #page-content-mktg .aio-hero--tall .aio-hero__ph {
    order: 1;
    margin: 0 24px 4px;
    width: calc(100% - 48px);
    max-width: calc(100% - 48px);
    aspect-ratio: auto;
    height: auto;
  }
  /* SEO / GEO / AEO: their next section is a coloured band (section--blush),
     so add breathing room below the hero image before it begins. */
  #page-seo .aio-hero--tall .aio-hero__ph,
  #page-geo .aio-hero--tall .aio-hero__ph,
  #page-aeo .aio-hero--tall .aio-hero__ph {
    margin-bottom: 60px;
  }
}

/* ============================================================
   AIO / SEO / GEO / AEO / content — desktop hero: drop the fixed 720px min-height.
   720px is sized for large screens; at "barely above 900px" widths the
   content is only ~360–440px tall, leaving ~230px of dead air above AND
   below it. Although align-items:center keeps it geometrically centred,
   the excess height makes it read as stranded/off-centre (worse with the
   77px sticky nav eating the top on short laptops). Letting the hero be
   content-driven keeps it compact and balanced at every width — and the
   image height already scales with the viewport, so larger screens still
   grow naturally with no band-edge jump.
   ============================================================ */
@media (min-width: 901px) {
  #page-aio .aio-hero--tall .aio-hero__grid,
  #page-seo .aio-hero--tall .aio-hero__grid,
  #page-geo .aio-hero--tall .aio-hero__grid,
  #page-aeo .aio-hero--tall .aio-hero__grid,
  #page-content-mktg .aio-hero--tall .aio-hero__grid {
    min-height: 0;
  }
}

/* ============================================================
   AIO page — aio-quote: subcopy line-height + blockquote margin
   ============================================================ */
#page-aio .aio-quote--v2 blockquote {
  margin-bottom: 10px;
  font-weight: 500;
}
#page-aio .aio-quote--v2 .aio-quote__sub {
  line-height: 1.5;
  margin-bottom: 40px;
}

/* aio-quote--with-img image: slightly smaller, right-aligned on mobile */
@media (max-width: 900px) {
  .aio-quote--with-img img.aio-quote__img {
    width: 70%;
    max-width: 70%;
  }
}

/* ============================================================
   AIO page — dark-card: h3 lighter weight, no top/bottom borders, no p top margin
   ============================================================ */
#page-aio .dark-card h3 {
  font-weight: 500;
  margin-bottom: 6px;
}
#page-aio .dark-cards .dark-card {
  border-top: none;
}
#page-aio .dark-cards .dark-card:last-child {
  border-bottom: none;
}
#page-aio .dark-card p {
  margin-top: 0;
  line-height: 1.6;
}

/* AIO page — more top padding on the aio-intro section.
   Flat 80px so mobile matches the homepage 80px between-sections standard
   (was clamp floor 56px on mobile); desktop already resolved to 80px. */
#page-aio .aio-intro--stacked {
  padding-top: 80px;
}

/* AIO page — lighter h3 weight in feature cards */
#page-aio .aio-feature h3 {
  font-weight: 500;
}

/* AIO page — wider copy column so first sentence fits one line on desktop */
#page-aio .aio-quote--with-img {
  grid-template-columns: 1.5fr 1fr;
}

/* Mobile — suppress manual <br> in aio-quote__sub so text reflows naturally */
@media (max-width: 900px) {
  #page-aio .aio-quote__sub br {
    display: none;
  }
}

/* AIO page — lighter subcopy weight (400 → 300) */
#page-aio .aio-quote__sub {
  font-weight: 300;
}

/* Mobile — suppress manual <br> in aio-flow caption (all pages) */
@media (max-width: 900px) {
  .aio-flow__caption br {
    display: none;
  }
}

/* Reduce margin-top to 50px (overrides pages.css .aio-flow__caption 80px).
   The two-class selector already outranks the single-class shorthand — no !important needed. */
.aio-flow__caption.aio-flow__caption--lg-left {
  margin-top: 50px;
}

/* ── Content-mktg: more breathing room between hero and the detail block (mobile) ─ */
@media (max-width: 768px) {
  #page-content-mktg section.detail { padding-top: 96px; }
}