/* ==========================================================================
   Shared SEO content system  (.wx-root / .wx-*)
   Used by every tool page's explainer section. Extracted from aiwa-writer.css
   so the nine remaining pages reuse it instead of duplicating ~20 KB each.

   The design's #137A3D and #EAF7EE are already this site's --aiwa-brand and
   --aiwa-brand-soft, so everything is expressed in tokens and dark mode comes
   free — no rules are needed in aiwa-dark.css.

   Scope: the content BELOW the tool only. Nothing here touches an app shell.
   Wrapper: <section class="tool-explainer ... wx-root">
   ========================================================================== */


.wx-root {
  --wx-max: 1200px;
  --wx-tint: var(--aiwa-brand-soft);
  --wx-line: color-mix(in srgb, var(--aiwa-line) 82%, transparent);
  --wx-alt: #f7faf8;
  padding: 0;
  background: var(--aiwa-card);
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
}
html[data-theme="dark"] .wx-root { --wx-alt: #121815; }
.wx-root .tool-explainer-inner { width: 100%; max-width: none; padding: 0; }

.wx { padding: clamp(56px, 7vw, 96px) 0; }
.wx-alt { background: var(--wx-alt); }
.wx-in { width: min(var(--wx-max), calc(100% - 48px)); margin-inline: auto; }
.wx-head { max-width: 780px; margin-inline: auto; text-align: center; }
.wx-head + * { margin-top: clamp(32px, 4vw, 52px); }

/* --- type --- */
.wx-eyebrow { display: block; margin-bottom: 14px; color: var(--aiwa-brand-dark); font-size: 12.5px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; }
.wx-root .wx-h { margin: 0; color: var(--aiwa-ink); font-size: clamp(1.9rem, 3.6vw, 2.9rem); font-weight: 800; line-height: 1.13; letter-spacing: -0.032em; text-wrap: balance; }
.wx-root .wx-h-lg { font-size: clamp(2.1rem, 4.4vw, 3.35rem); line-height: 1.09; }
.wx-root .wx-sub { max-width: 640px; margin: 18px auto 0; color: var(--aiwa-muted); font-size: 17px; line-height: 1.68; }
.wx-root .wx-p { margin: 0; color: var(--aiwa-muted); font-size: 15.5px; line-height: 1.7; }
.wx-root .wx-p b { color: var(--aiwa-ink); font-weight: 650; }
.wx-t { margin: 0 0 9px; color: var(--aiwa-ink); font-size: 18.5px; font-weight: 700; letter-spacing: -0.018em; }
.wx-root a { color: inherit; }

/* --- buttons --- */
.wx-cta { display: flex; justify-content: center; margin-top: clamp(30px, 4vw, 44px); }
.wx-root .wx-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 13px 30px; border: 0; border-radius: 999px; background: var(--aiwa-brand); color: #fff; font: inherit; font-size: 15.5px; font-weight: 700; letter-spacing: -0.01em; text-decoration: none; cursor: pointer; transition: background-color 150ms, transform 150ms, box-shadow 150ms; }
.wx-root .wx-btn:hover { background: var(--aiwa-brand-dark); transform: translateY(-1px); box-shadow: 0 10px 26px rgba(19, 122, 61, 0.28); }
html[data-theme="dark"] .wx-root .wx-btn { color: #08130c; }
.wx-root .wx-btn-dark { background: var(--aiwa-ink); color: var(--aiwa-card); }
.wx-root .wx-btn-dark:hover { background: var(--aiwa-ink); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28); }
html[data-theme="dark"] .wx-root .wx-btn-dark { background: var(--aiwa-ink); color: #0f1512; }

/* --- tinted numbered / plain cards --- */
.wx-grid { display: grid; gap: 20px; }
.wx-g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wx-g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wx-card { padding: clamp(24px, 2.6vw, 34px); border-radius: 16px; background: var(--wx-tint); }
.wx-card-plain { padding: clamp(22px, 2.4vw, 30px); border: 1px solid var(--wx-line); border-radius: 16px; background: var(--aiwa-card); }
.wx-num { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 18px; border-radius: 10px; background: var(--aiwa-card); color: var(--aiwa-ink); font-size: 14px; font-weight: 700; }

/* --- icon columns --- */
.wx-icon { display: block; width: 26px; height: 26px; margin-bottom: 16px; color: var(--aiwa-brand); }
.wx-icon svg { width: 100%; height: 100%; display: block; }

/* --- the prompt carousel --- */
.wx-carousel { position: relative; }
.wx-track { position: relative; display: flex; align-items: stretch; justify-content: center; min-height: 210px; }
.wx-slide { position: absolute; top: 0; left: 50%; width: min(660px, 100%); transform: translateX(-50%) scale(0.94); opacity: 0; visibility: hidden; transition: opacity 260ms ease, transform 260ms ease; }
.wx-slide.is-on { position: relative; left: auto; transform: none; opacity: 1; visibility: visible; }
.wx-prompt { margin: 0 0 14px; padding: 15px 20px; border: 1px solid var(--wx-line); border-radius: 13px; background: var(--aiwa-card); color: var(--aiwa-ink); font-size: 15.5px; font-weight: 650; line-height: 1.5; }
.wx-answer { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 14px; padding: 18px 20px; border-radius: 13px; background: var(--wx-tint); }
.wx-answer p { margin: 0; color: var(--aiwa-text); font-size: 15.5px; line-height: 1.7; }
.wx-answer .wx-spark { width: 20px; height: 20px; margin-top: 2px; color: var(--aiwa-brand); }
.wx-nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 26px; }
.wx-arrow { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--wx-line); border-radius: 999px; background: var(--aiwa-card); color: var(--aiwa-ink); cursor: pointer; transition: border-color 140ms, background-color 140ms; }
.wx-arrow:hover { border-color: var(--aiwa-brand); background: var(--wx-tint); }
.wx-arrow svg { width: 16px; height: 16px; }
.wx-dots { display: flex; align-items: center; gap: 7px; }
.wx-dot { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 999px; background: var(--aiwa-line-strong); cursor: pointer; transition: width 180ms, background-color 180ms; }
.wx-dot[aria-current="true"] { width: 22px; background: var(--aiwa-brand); }

/* --- split: media left, green panel right --- */
.wx-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 20px; overflow: hidden; }
.wx-split-media { position: relative; min-height: 320px; background: var(--wx-tint); }
.wx-split-media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.wx-split-panel { padding: clamp(28px, 3.4vw, 46px); background: var(--aiwa-brand); color: #fff; }
html[data-theme="dark"] .wx-split-panel { background: #12613a; }
.wx-split-panel h3 { margin: 0 0 22px; color: #fff; font-size: clamp(1.55rem, 2.5vw, 2.05rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.028em; }
.wx-checks { display: grid; gap: 16px; margin: 0 0 28px; padding: 0; list-style: none; }
.wx-checks li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 13px; color: rgba(255, 255, 255, 0.92); font-size: 15px; line-height: 1.6; }
.wx-checks svg { width: 18px; height: 18px; margin-top: 2px; color: #fff; }

/* --- persona cards with an illustration --- */
.wx-persona { display: flex; flex-direction: column; border-radius: 16px; background: var(--wx-tint); overflow: hidden; }
.wx-persona-copy { flex: 1 1 auto; padding: clamp(22px, 2.4vw, 30px) clamp(22px, 2.4vw, 30px) 18px; }
.wx-persona-art { flex: 0 0 auto; position: relative; margin-top: auto; aspect-ratio: 78 / 47; background: var(--wx-tint); }
.wx-persona-art img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }

/* --- brief in / draft out --- */
.wx-io { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--wx-line); border-radius: 18px; overflow: hidden; }
.wx-io > div { padding: clamp(24px, 2.8vw, 36px); }
.wx-io-brief { background: var(--wx-tint); }
.wx-io-out { background: var(--aiwa-card); }
.wx-tag { display: inline-block; margin-bottom: 16px; padding: 4px 11px; border-radius: 6px; background: var(--aiwa-card); color: var(--aiwa-brand-dark); font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; }
.wx-io-out .wx-tag { background: var(--wx-tint); }
.wx-io h4 { margin: 0 0 12px; color: var(--aiwa-ink); font-size: 19px; font-weight: 700; letter-spacing: -0.018em; }
.wx-io p { margin: 0 0 13px; color: var(--aiwa-text); font-size: 15.5px; line-height: 1.72; }
.wx-io p:last-child { margin-bottom: 0; }
.wx-io-brief p { color: var(--aiwa-muted); }

/* --- definition rows --- */
.wx-defs { margin: 0; padding: 0; list-style: none; max-width: 940px; margin-inline: auto; }
.wx-defs li { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 10px 32px; padding: 20px 0; border-top: 1px solid var(--wx-line); }
.wx-defs li:last-child { border-bottom: 1px solid var(--wx-line); }
.wx-defs b { color: var(--aiwa-ink); font-size: 16px; font-weight: 700; letter-spacing: -0.014em; }
.wx-defs span { color: var(--aiwa-muted); font-size: 15.5px; line-height: 1.7; }

/* --- mode table --- */
.wx-tablewrap { overflow-x: auto; border: 1px solid var(--wx-line); border-radius: 18px; }
.wx-table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 15px; text-align: left; }
.wx-table th, .wx-table td { padding: 16px 22px; }
.wx-table thead th { background: var(--wx-alt); color: var(--aiwa-muted); font-size: 11.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; }
.wx-table tbody tr { border-top: 1px solid var(--wx-line); }
.wx-table tbody th { color: var(--aiwa-ink); font-weight: 700; }
.wx-table tbody td { color: var(--aiwa-muted); }

/* --- FAQ --- */
.wx-faq { max-width: 860px; margin-inline: auto; }
.wx-faq details { border-bottom: 1px solid var(--wx-line); }
.wx-faq details:first-of-type { border-top: 1px solid var(--wx-line); }
.wx-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 4px; color: var(--aiwa-ink); font-size: 17px; font-weight: 650; letter-spacing: -0.016em; cursor: pointer; list-style: none; }
.wx-faq summary::-webkit-details-marker { display: none; }
.wx-faq summary svg { flex: 0 0 auto; width: 15px; height: 15px; color: var(--aiwa-muted); transition: transform 200ms ease; }
.wx-faq details[open] summary svg { transform: rotate(180deg); }
.wx-root .wx-faq details p { max-width: 74ch; margin: 0; padding: 0 4px 24px; color: var(--aiwa-muted); font-size: 15.5px; line-height: 1.75; }

/* --- inline "Pro" badge, for feature cards and table cells --- */
.wx-root .wx-pro { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: var(--wx-tint); color: var(--aiwa-brand-dark); font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; vertical-align: 2px; }
html[data-theme="dark"] .wx-root .wx-pro { background: rgba(47, 174, 99, 0.2); }

/* --- tool chips --- */
.wx-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.wx-root .wx-chip { display: flex; align-items: center; gap: 13px; padding: 17px 20px; border: 1px solid var(--wx-line); border-radius: 13px; background: var(--aiwa-card); color: var(--aiwa-ink); font-size: 15.5px; font-weight: 650; letter-spacing: -0.014em; text-decoration: none; transition: border-color 140ms, background-color 140ms, transform 140ms; }
.wx-root .wx-chip:hover { border-color: var(--aiwa-brand); background: var(--wx-tint); transform: translateY(-1px); }
.wx-chip svg { flex: 0 0 auto; width: 20px; height: 20px; color: var(--aiwa-brand); }

/* --- product figure --- */
.wx-fig { margin: 0; }
.wx-fig-frame { padding: clamp(14px, 1.8vw, 26px); border-radius: 18px; background: var(--wx-tint); }
.wx-fig img { display: block; width: 100%; height: auto; border-radius: 10px; box-shadow: 0 12px 32px rgba(15, 42, 26, 0.14); }
html[data-theme="dark"] .wx-fig img { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55); }
.wx-root .wx-fig figcaption { max-width: 720px; margin: 15px auto 0; color: var(--aiwa-muted); font-size: 14px; line-height: 1.65; text-align: center; }

/* --- portrait screenshot split ----------------------------------------------
   A 3:4 shot sits in a frame with the SAME 3:4 aspect-ratio, so object-fit has
   nothing to crop; `contain` is belt-and-braces if a shot is ever replaced with
   a different ratio. Copy column is vertically centred against it.            */
.wx-shot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
/* `order` alone swaps the items but not the column tracks, so the picture would
   land in the wide track. Reverse the template too and both sections match. */
.wx-shot.is-flipped { grid-template-columns: minmax(0, 0.86fr) minmax(0, 1fr); }
.wx-shot.is-flipped .wx-shot-copy { order: 2; }
.wx-shot.is-flipped .wx-shot-media { order: 1; }
.wx-shot-copy { max-width: 560px; }
.wx-root .wx-shot-copy .wx-h { text-align: left; }
.wx-root .wx-shot-copy .wx-sub { margin: 14px 0 0; text-align: left; }
.wx-shot-list { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.wx-root .wx-shot-list li { position: relative; padding-left: 28px; color: var(--aiwa-text); font-size: 16px; line-height: 1.62; }
.wx-shot-list li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--aiwa-brand); }
.wx-shot-media { margin: 0; }
.wx-shot-frame { position: relative; aspect-ratio: 3 / 4; border-radius: 18px; padding: clamp(10px, 1.2vw, 18px); background: var(--wx-tint); }
.wx-shot-frame img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center top; border-radius: 10px; box-shadow: 0 14px 36px rgba(15, 42, 26, 0.16); }
html[data-theme="dark"] .wx-shot-frame img { box-shadow: 0 14px 36px rgba(0, 0, 0, 0.55); }
.wx-root .wx-shot figcaption { margin: 14px 2px 0; color: var(--aiwa-muted); font-size: 14px; line-height: 1.6; }

@media (max-width: 1000px) {
  .wx-g4, .wx-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wx-shot { grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr); gap: 30px; }
  .wx-shot.is-flipped { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr); }
  .wx-defs li { grid-template-columns: 1fr; gap: 6px; }
}
@media (max-width: 860px) {
  .wx-g3 { grid-template-columns: 1fr; }
  .wx-split, .wx-io { grid-template-columns: 1fr; }
  /* stacked: the heading leads, the shot follows it — same reading order both ways */
  .wx-shot, .wx-shot.is-flipped { grid-template-columns: 1fr; gap: 26px; }
  .wx-shot .wx-shot-copy, .wx-shot.is-flipped .wx-shot-copy { order: 1; max-width: none; }
  .wx-shot .wx-shot-media, .wx-shot.is-flipped .wx-shot-media { order: 2; }
  .wx-shot-frame { max-width: 460px; margin-inline: auto; }
  .wx-root .wx-shot figcaption { text-align: center; }
  .wx-split-media { min-height: 0; aspect-ratio: 16 / 11; }
  .wx-fig-scroll { overflow-x: auto; }
  .wx-fig-scroll img { min-width: 600px; }
}
@media (max-width: 560px) {
  .wx-g4, .wx-chips { grid-template-columns: 1fr; }
  .wx-shot-frame { max-width: 380px; padding: 8px; border-radius: 14px; }
  .wx-root .wx-shot-list li { font-size: 15px; }
  .wx-in { width: calc(100% - 32px); }
}
@media (prefers-reduced-motion: reduce) {
  .wx-slide, .wx-btn, .wx-chip, .wx-dot, .wx-faq summary svg { transition: none !important; }
}

/* --- illustration palette ---------------------------------------------------
   Explicit values per theme rather than token inversion: a device frame has to
   stay darker than its surroundings in light mode and lighter in dark, and
   var(--aiwa-ink) flips the wrong way for that.                               */
.wx-root svg .a-bg, .wx-root svg .a-bg2 { fill: transparent; }
.wx-root svg .a-screen  { fill: #18221c; }
.wx-root svg .a-doc     { fill: #ffffff; }
.wx-root svg .a-card2   { fill: #cbe4d5; }
.wx-root svg .a-tint    { fill: #e3f0e8; }
.wx-root svg .a-line    { fill: rgba(23, 33, 27, 0.15); }
.wx-root svg .a-line-on { fill: rgba(255, 255, 255, 0.8); }
.wx-root svg .a-head    { fill: #17211b; }
.wx-root svg .a-accent, .wx-root svg .a-accent-soft, .wx-root svg .a-spark { fill: #137a3d; }
.wx-root svg .a-base    { fill: #3d4c44; }
.wx-root svg .a-desk    { fill: rgba(23, 33, 27, 0.16); }
.wx-root svg .a-stroke  { stroke: rgba(23, 33, 27, 0.3); stroke-width: 5; fill: none; }
.wx-root svg .a-steam   { stroke: rgba(19, 122, 61, 0.55); stroke-width: 4; stroke-linecap: round; fill: none; }

html[data-theme="dark"] .wx-root svg .a-screen  { fill: #0c120e; }
html[data-theme="dark"] .wx-root svg .a-doc     { fill: #242f29; }
html[data-theme="dark"] .wx-root svg .a-card2   { fill: #2d4638; }
html[data-theme="dark"] .wx-root svg .a-tint    { fill: #1f2b24; }
html[data-theme="dark"] .wx-root svg .a-line    { fill: rgba(233, 239, 235, 0.22); }
html[data-theme="dark"] .wx-root svg .a-head    { fill: #e9efeb; }
html[data-theme="dark"] .wx-root svg .a-accent,
html[data-theme="dark"] .wx-root svg .a-accent-soft,
html[data-theme="dark"] .wx-root svg .a-spark   { fill: #2fae63; }
html[data-theme="dark"] .wx-root svg .a-base    { fill: #2b3a33; }
html[data-theme="dark"] .wx-root svg .a-desk    { fill: rgba(233, 239, 235, 0.14); }
html[data-theme="dark"] .wx-root svg .a-stroke  { stroke: rgba(233, 239, 235, 0.3); }
html[data-theme="dark"] .wx-root svg .a-steam   { stroke: rgba(47, 174, 99, 0.6); }