/* English guides hub and guides, Ink and Lime (Vytas, 2026-11-03). Loads after ink/home.css and reuses its components.
   Templates: frontend/guides/ink/. Switch: routes/modules/guides-ink.js. Plan: tasks/todo-guides-ink-2026-11-03.md.
   Default styles are the final state, so no JavaScript and reduced motion both show the finished page. */

/* ---------- Hero ---------- */
html body.ikg:not(#_) nav.gd-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; font-size: 14px; color: var(--cf-on-ink-2); }
html body.ikg:not(#_) nav.gd-crumb a { color: var(--cf-on-ink-2); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
html body.ikg:not(#_) nav.gd-crumb a:hover { color: var(--cf-on-ink); }
html body.ikg:not(#_) nav.gd-crumb [aria-current] { color: var(--cf-on-ink); }
.gd-nb { white-space: nowrap; }

/* ---------- White cards on the ink band keep dark words (trap seen on /for: white H3s on white cards) ---------- */
html body.ikg:not(#_) .ik-band :is(.ik-trg__card, .ik-step) h3.ik-h3 { color: var(--cf-text); }
html body.ikg:not(#_) .ik-band :is(.ik-trg__card, .ik-step) p.ik-p { color: var(--cf-text-2); }

/* ---------- Card rows: 2, 3 or 4 across ---------- */
html body.ikg:not(#_) .gd-cards.gd-n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html body.ikg:not(#_) .gd-cards.gd-n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Mocks that are not a post sit in the middle of their frame. */
html body.ikg:not(#_) .ik-trg__card .ik-art.gd-art { justify-content: center; padding: 16px; }
html body.ikg:not(#_) .gd-art .ik-dmcard, html body.ikg:not(#_) .gd-art .ik-ui { width: min(270px, 100%); }
html body.ikg:not(#_) .gd-cards.gd-n3 .ik-post--tile { width: 160px; }
html body.ikg:not(#_) .gd-dm .ik-dm__msgs { gap: 6px; padding: 10px 2px 2px; font-size: 13px; }
html body.ikg:not(#_) .gd-dm :is(p.ik-dm__in, p.ik-dm__me, p.ik-dm__btn) { padding: 7px 11px; border-radius: 16px; }
html body.ikg:not(#_) .gd-dm .ik-dm__card { padding: 6px; }
html body.ikg:not(#_) .gd-dm .ik-dm__card img { width: 36px; height: 36px; }
html body.ikg:not(#_) .gd-dm .ik-dm__head { padding: 0 2px 8px; }
html body.ikg:not(#_) .gd-dm .ik-dm__head img { width: 26px; height: 26px; }
html body.ikg:not(#_) .gd-dm .ik-dm__head span { font-size: 13px; }

/* ---------- Steps: 3 or 4 across ---------- */
html body.ikg:not(#_) .gd-steps.gd-n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
html body.ikg:not(#_) .gd-steps.gd-n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html body.ikg:not(#_) .gd-steps .ik-art { height: 176px; padding: 16px; }
html body.ikg:not(#_) .gd-steps .ik-art .ik-ui, html body.ikg:not(#_) .gd-steps .ik-art .ik-dmcard { width: min(280px, 100%); }
html body.ikg:not(#_) .gd-steps .ik-art:has(.gd-kw, .gd-write, .ik-ui--pick, .gd-dm, .gd-login) { height: auto; min-height: 176px; }

/* ---------- Builder mocks (CLAUDE-APP-UI.md, automation builder) ---------- */
.gd-kw .ik-ui__field { flex-wrap: wrap; margin-bottom: 10px; }
.gd-kw__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gd-kw__chips span { padding: 4px 10px; border: 1px solid var(--cf-line); border-radius: 999px; font-size: 12px; color: #3f3f46; }
html body.ikg:not(#_) .gd-write p.ik-ui__msg { margin-bottom: 8px; }
.gd-write__link { display: flex; flex-direction: column; padding: 8px 10px; border: 1px solid var(--cf-line); border-radius: 10px; }
.gd-write__link span { font-size: 13px; font-weight: 600; color: #0a64d8; }
html body.ikg:not(#_) .gd-write__link i { font-size: 11px; }
html body.ikg:not(#_) p.gd-write__count { margin-top: 6px; font-size: 11px; color: #8a8a92; text-align: right; }

/* ---------- Night comment ---------- */
.gd-clock { display: flex; flex-direction: column; align-items: center; gap: 12px; width: min(270px, 100%); }
.gd-clock__t { font-size: 46px; font-weight: 600; line-height: 1; letter-spacing: -.04em; color: var(--cf-ink); font-variant-numeric: tabular-nums; }
.gd-clock__row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border-radius: 14px; background: #fff; font-size: 13px; color: #111; }
html body.ikg:not(#_) .gd-clock__row img { flex: none; width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.gd-clock__row > span:not(.ik-inbox__tag) { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.gd-clock__row b { font-weight: 600; }

/* ---------- Instagram approval screen and the bot login ---------- */
.gd-login { width: min(270px, 100%); padding: 14px 16px; border-radius: 16px; background: #fff; font-size: 13px; line-height: 1.35; color: #111; }
html body.ikg:not(#_) p.gd-login__brand { margin-bottom: 8px; font-size: 15px; font-weight: 600; letter-spacing: -.02em; }
html body.ikg:not(#_) p.gd-login__h { margin-bottom: 6px; font-weight: 600; }
html body.ikg:not(#_) .gd-login li { display: flex; align-items: center; gap: 8px; padding: 4px 0; color: #3f3f46; }
.gd-login li .hx-i { color: #1f7a3d; }
.gd-login__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
.gd-login__btns span { padding: 8px; border-radius: 8px; background: var(--cf-mist); font-weight: 600; text-align: center; }
.gd-login__btns span.is-on { background: #0a64d8; color: #fff; }
.gd-login--pw { display: flex; flex-direction: column; gap: 6px; }
.gd-login__field { padding: 8px 10px; border: 1px solid var(--cf-field); border-radius: 8px; color: #8a8a92; }
.gd-login__field.is-pw { border-color: #e5484d; color: #111; }
.gd-login__warn { align-self: flex-start; margin-top: 4px; padding: 5px 10px; border-radius: 999px; background: #fde8e8; font-size: 12px; font-weight: 600; color: #b42318; }

/* ---------- Content calendar and b-roll shots ---------- */
.gd-cal { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; width: min(300px, 100%); padding: 10px; border-radius: 16px; background: #fff; color: #111; }
.gd-cal__d { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; }
.gd-cal__d b { font-weight: 600; color: #63636b; }
html body.ikg:not(#_) .gd-cal__d img, .gd-cal__d > i { width: 100%; aspect-ratio: 1; border-radius: 8px; object-fit: cover; }
.gd-cal__d > i { display: block; border: 1.5px dashed var(--cf-field); }
.gd-cal__d span { font-weight: 500; }
.gd-shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; width: min(270px, 100%); }
.gd-shots__t { position: relative; overflow: hidden; border-radius: 10px; aspect-ratio: 4 / 5; background: #fff; }
html body.ikg:not(#_) .gd-shots__t img { width: 100%; height: 100%; object-fit: cover; }
.gd-shots__t span { position: absolute; left: 4px; bottom: 4px; padding: 2px 6px; border-radius: 6px; background: rgba(255, 255, 255, .92); font-size: 11px; font-weight: 600; color: #111; }

/* ---------- Icon tile ---------- */
.gd-icon { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; color: var(--cf-ink); }
.gd-icon__i { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: #fff; }
.gd-icon b { font-size: 15px; font-weight: 600; }
.gd-icon span:not(.gd-icon__i) { font-size: 13px; color: #3f3f46; }

/* ---------- Prose: heading left, short paragraphs right ---------- */
html body.ikg:not(#_) .gd-prose { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.gd-prose__side { position: sticky; top: 96px; }
html body.ikg:not(#_) .gd-prose__side p.ik-lead { margin-top: 16px; }
html body.ikg:not(#_) .gd-prose__body p { max-width: 640px; font-size: 17px; line-height: 1.65; color: var(--cf-on-ink-2); }
html body.ikg:not(#_) .gd-prose__body p + p { margin-top: 14px; }
html body.ikg:not(#_) .ik-sheet .gd-prose__body p { color: var(--cf-text-2); }
html body.ikg:not(#_) .gd-prose__body strong { font-weight: 600; color: var(--cf-on-ink); }
html body.ikg:not(#_) .ik-sheet .gd-prose__body strong { color: var(--cf-text); }
html body.ikg:not(#_) .gd-prose__art { max-width: 640px; height: 220px; margin-top: 24px; padding: 16px; }

/* ---------- Messages to copy ---------- */
html body.ikg:not(#_) .gd-ex { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
html body.ikg:not(#_) .gd-ex li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 14px; padding: 16px 16px 16px 18px; border-radius: 22px; background: #fff; color: var(--cf-text); }
html body.ikg:not(#_) .ik-sheet .gd-ex li { border: 1px solid var(--cf-line); }
.gd-ex__kw { padding-top: 2px; }
.gd-ex__kw .ik-kw { font-size: 13px; }
.gd-ex__txt { display: flex; flex-direction: column; gap: 4px; }
.gd-ex__txt b { font-size: 15px; font-weight: 600; }
.gd-ex__txt span { font-size: 15px; line-height: 1.5; color: var(--cf-text-2); }
html body.ikg:not(#_) button.gd-ex__copy { appearance: none; min-height: 36px; padding: 0 14px; border: 1px solid var(--cf-field); border-radius: 8px; background: #fff; font: inherit; font-size: 14px; font-weight: 500; color: var(--cf-text); cursor: pointer; }
@media (hover: hover) { html body.ikg:not(#_) button.gd-ex__copy:hover { border-color: var(--cf-text); } }

/* ---------- Fits / does not fit ---------- */
html body.ikg:not(#_) .gd-fit { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
html body.ikg:not(#_) .gd-fit__card { padding: 22px 24px 24px; border-radius: 28px; background: #fff; color: var(--cf-text); }
html body.ikg:not(#_) .ik-sheet .gd-fit__card { border: 1px solid var(--cf-line); }
html body.ikg:not(#_) .gd-fit__card.is-yes { border-color: var(--cf-text); }
html body.ikg:not(#_) p.gd-fit__t { margin-bottom: 8px; font-size: 21px; font-weight: 500; letter-spacing: -.02em; }
html body.ikg:not(#_) .gd-fit li, html body.ikg:not(#_) .gd-list li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; padding: 9px 0 0; font-size: 16px; line-height: 1.45; color: var(--cf-text-2); }
html body.ikg:not(#_) .gd-fit__card.is-yes li { color: var(--cf-text); }
.gd-fit li > i, .gd-list li > i { display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: var(--cf-mist); font-size: 11px; font-style: normal; color: #8a8a92; }
.gd-fit__card.is-yes li > i { background: var(--cf-lime); color: var(--cf-ink); }
.gd-list li > i { background: var(--cf-lime); color: var(--cf-ink); }

/* ---------- Simple list ---------- */
html body.ikg:not(#_) .gd-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 32px; padding: 16px 24px 24px; border-radius: 28px; background: #fff; }
html body.ikg:not(#_) .ik-sheet .gd-list { border: 1px solid var(--cf-line); }

/* ---------- Table ---------- */
html body.ikg:not(#_) .gd-table { overflow: hidden; padding: 8px; border-radius: 28px; background: #fff; color: var(--cf-text); }
html body.ikg:not(#_) .ik-sheet .gd-table { border: 1px solid var(--cf-line); }
html body.ikg:not(#_) .gd-table table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
html body.ikg:not(#_) .gd-table :is(th, td) { padding: 14px 16px; border-bottom: 1px solid var(--cf-line); text-align: left; vertical-align: top; }
html body.ikg:not(#_) .gd-table tbody tr:last-child :is(th, td) { border-bottom: 0; }
html body.ikg:not(#_) .gd-table thead th { font-size: 13px; font-weight: 600; color: var(--cf-text-3); }
html body.ikg:not(#_) .gd-table tbody th { width: 28%; font-weight: 600; color: var(--cf-text); }
html body.ikg:not(#_) .gd-table td { color: var(--cf-text-2); }
html body.ikg:not(#_) .gd-table thead th:last-child, html body.ikg:not(#_) .gd-table td:last-child { background: #f7ffd9; }
html body.ikg:not(#_) .gd-table thead th:last-child { border-radius: 14px 14px 0 0; color: var(--cf-text); }
html body.ikg:not(#_) .gd-table tbody tr:last-child td:last-child { border-radius: 0 0 14px 14px; }
html body.ikg:not(#_) .gd-table.is-plain thead th:last-child, html body.ikg:not(#_) .gd-table.is-plain td:last-child { background: none; }
html body.ikg:not(#_) p.gd-note, html body.ikg:not(#_) p.gd-after { max-width: 720px; margin-top: 16px; font-size: 15px; line-height: 1.55; color: var(--cf-on-ink-2); }
html body.ikg:not(#_) .ik-sheet :is(p.gd-note, p.gd-after) { color: var(--cf-text-2); }

/* ---------- Icon tiles ---------- */
html body.ikg:not(#_) .gd-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
html body.ikg:not(#_) .gd-tiles.gd-n4, html body.ikg:not(#_) .gd-tiles.gd-n8 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
html body.ikg:not(#_) .gd-tiles.gd-n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html body.ikg:not(#_) .gd-tiles li { display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; padding: 18px; border-radius: 24px; background: #fff; color: var(--cf-text); }
html body.ikg:not(#_) .ik-sheet .gd-tiles li { border: 1px solid var(--cf-line); }
.gd-tiles__ico { display: grid; place-items: center; grid-row: span 2; width: 40px; height: 40px; border-radius: 12px; color: var(--cf-ink); }
.gd-tiles b { font-size: 17px; font-weight: 600; line-height: 1.3; }
.gd-tiles li > span:last-child { margin-top: 4px; font-size: 15px; line-height: 1.45; color: var(--cf-text-2); }

/* ---------- List and stage, on either surface, up to six items ---------- */
html body.ikg:not(#_) .gd-aud .ik-aud__stage { min-height: 460px; }
html body.ikg:not(#_) .gd-aud .ik-aud__scene.gd-aud__scene { display: flex; align-items: center; justify-content: center; padding: 24px; border-radius: 22px; }
html body.ikg:not(#_) .gd-aud__scene .ik-dmcard, html body.ikg:not(#_) .gd-aud__scene .ik-ui, html body.ikg:not(#_) .gd-aud__scene .gd-login { width: min(340px, 100%); transform: scale(1.12); }
html body.ikg:not(#_) .gd-aud__scene .ik-post--tile { width: 220px; }
html body.ikg:not(#_) .gd-aud__scene p.ik-trg__reply { right: 32px; bottom: 32px; }
html body.ikg:not(#_) .ik-aud[data-on="3"] .ik-aud__scene:nth-child(4),
html body.ikg:not(#_) .ik-aud[data-on="4"] .ik-aud__scene:nth-child(5),
html body.ikg:not(#_) .ik-aud[data-on="5"] .ik-aud__scene:nth-child(6) { opacity: 1; visibility: visible; }
html body.ikg:not(#_) .ik-sheet .ik-aud__item.is-on { border-color: var(--cf-line); background: #fff; }
html body.ikg:not(#_) .ik-sheet .ik-aud__item::after { border-color: var(--cf-field); color: var(--cf-text-3); }
html body.ikg:not(#_) .ik-sheet p.ik-aud__eye { color: var(--cf-text-3); }
html body.ikg:not(#_) .ik-sheet .ik-aud__item.is-on p.ik-aud__eye { color: #5b7000; }
html body.ikg:not(#_) .ik-sheet button.ik-aud__tab { color: var(--cf-text-3); }
html body.ikg:not(#_) .ik-sheet .ik-aud__item.is-on button.ik-aud__tab { color: var(--cf-text); }
html body.ikg:not(#_) .ik-sheet a.ik-aud__link { color: var(--cf-text); }
html body.ikg:not(#_) .ik-sheet .ik-aud__stage { border: 1px solid var(--cf-line); }
@media (hover: hover) { html body.ikg:not(#_) .ik-sheet .ik-aud__item:not(.is-on):hover button.ik-aud__tab { color: var(--cf-text); } }

/* ---------- FAQ column: next guide, related links, date ---------- */
html body.ikg:not(#_) a.gd-next { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 16px; margin-top: 28px; padding: 18px 22px; border-radius: 22px; background: var(--cf-ink); color: var(--cf-on-ink); text-decoration: none; transition: background-color .15s var(--ease); }
.gd-next span { font-size: 13px; color: var(--cf-on-ink-2); }
.gd-next b { grid-column: 1; font-size: 19px; font-weight: 500; letter-spacing: -.02em; }
.gd-next .hx-i { grid-row: 1 / span 2; grid-column: 2; color: var(--cf-lime); }
@media (hover: hover) { html body.ikg:not(#_) a.gd-next:hover { background: #262626; } }
html body.ikg:not(#_) p.gd-also { margin-top: 20px; font-size: 15px; line-height: 1.6; color: var(--cf-text-2); }
html body.ikg:not(#_) p.gd-upd { margin-top: 10px; font-size: 14px; color: var(--cf-text-3); }

/* ---------- Hub: the reading path in the hero ---------- */
html body.ikg:not(#_) nav.gd-start { width: min(480px, 100%); margin-left: auto; padding: 28px; border-radius: 32px; }
.gd-start__card { padding: 8px; border-radius: 24px; background: #fff; color: var(--cf-text); }
html body.ikg:not(#_) p.gd-start__h { padding: 14px 16px 10px; font-size: 19px; font-weight: 500; letter-spacing: -.02em; }
html body.ikg:not(#_) .gd-start ol li + li { border-top: 1px solid var(--cf-line); }
html body.ikg:not(#_) .gd-start a { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 14px; min-height: 76px; padding: 12px 16px; border-radius: 16px; color: var(--cf-text); text-decoration: none; transition: background-color .15s var(--ease); }
.gd-start__n { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--cf-ink); font-size: 14px; font-weight: 600; color: var(--cf-lime); }
.gd-start__t { display: flex; flex-direction: column; gap: 2px; }
.gd-start__t b { font-size: 17px; font-weight: 500; line-height: 1.25; }
.gd-start__t i { font-style: normal; font-size: 13px; color: var(--cf-text-3); }
.gd-start a .hx-i { color: var(--cf-text-3); transition: transform .15s var(--ease), color .15s var(--ease); }
@media (hover: hover) {
  html body.ikg:not(#_) .gd-start a:hover { background: var(--cf-mist); }
  .gd-start a:hover .hx-i { color: var(--cf-text); transform: translateX(3px); }
}

/* ---------- Hub: cards that are links ---------- */
html body.ikg:not(#_) a.gd-cardlink { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
html body.ikg:not(#_) .gd-cards--links .ik-trg__card { padding-bottom: 8px; }
.gd-cardlink__go { display: inline-flex; align-items: center; gap: 6px; margin: auto 12px 10px; padding-top: 14px; font-size: 15px; font-weight: 600; color: var(--cf-text); }
.gd-cardlink__go .hx-i { transition: transform .15s var(--ease); }
@media (hover: hover) { html body.ikg:not(#_) a.gd-cardlink:hover .gd-cardlink__go .hx-i { transform: translateX(3px); } }

/* ---------- Hub: every guide by topic. A plain list: topic left, guides in two columns right. ---------- */
html body.ikg:not(#_) .gd-index { display: flex; flex-direction: column; }
html body.ikg:not(#_) .gd-index__grp { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 32px; padding: 22px 0 18px; border-top: 1px solid var(--cf-ink-line); }
html body.ikg:not(#_) h3.gd-index__h { padding-top: 14px; font-size: 19px; font-weight: 500; letter-spacing: -.02em; color: var(--cf-on-ink); text-align: left; }
html body.ikg:not(#_) .gd-index ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
html body.ikg:not(#_) .gd-index a { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 10px 14px; border-radius: 14px; color: var(--cf-on-ink); text-decoration: none; transition: background-color .15s var(--ease); }
.gd-index a > span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gd-index a b { font-size: 16px; font-weight: 500; line-height: 1.3; }
.gd-index a i { font-style: normal; font-size: 14px; line-height: 1.4; color: var(--cf-on-ink-2); }
.gd-index a .hx-i { flex: none; color: #6b6b72; transition: transform .15s var(--ease), color .15s var(--ease); }
html body.ikg:not(#_) .gd-index a:focus-visible { outline-offset: -2px; }
@media (hover: hover) {
  html body.ikg:not(#_) .gd-index a:hover { background: var(--cf-ink-2); }
  .gd-index a:hover .hx-i { color: var(--cf-lime); transform: translateX(3px); }
}

/* ---------- Tablet ---------- */
@media (max-width: 1099px) {
  html body.ikg:not(#_) nav.gd-crumb { justify-content: center; }
  html body.ikg:not(#_) nav.gd-start { margin: 0 auto; }
  html body.ikg:not(#_) .gd-prose { grid-template-columns: 1fr; gap: 24px; }
  .gd-prose__side { position: static; }
  html body.ikg:not(#_) :is(.gd-cards.gd-n3, .gd-steps.gd-n4, .gd-tiles.gd-n4, .gd-tiles.gd-n8) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html body.ikg:not(#_) .gd-index__grp { grid-template-columns: 1fr; gap: 6px; }
  html body.ikg:not(#_) h3.gd-index__h { padding: 0 14px; }
  html body.ikg:not(#_) .gd-ex { grid-template-columns: 1fr; }
}

/* ---------- Phones ---------- */
@media (max-width: 767px) {
  html body.ikg:not(#_) nav.gd-crumb { margin-bottom: 12px; font-size: 13px; }
  html body.ikg:not(#_) :is(.gd-cards.gd-n2, .gd-cards.gd-n3, .gd-steps.gd-n2, .gd-steps.gd-n4) { display: flex; }
  html body.ikg:not(#_) .gd-steps .ik-art { height: auto; min-height: 168px; }
  html body.ikg:not(#_) :is(.gd-tiles, .gd-tiles.gd-n2, .gd-tiles.gd-n4, .gd-tiles.gd-n8) { grid-template-columns: 1fr; gap: 8px; }
  html body.ikg:not(#_) .gd-index ul { grid-template-columns: 1fr; }
  html body.ikg:not(#_) .gd-index__grp { padding: 18px 0 10px; }
  html body.ikg:not(#_) .gd-index a { padding: 10px 0; }
  html body.ikg:not(#_) h3.gd-index__h { padding: 0; }
  html body.ikg:not(#_) .gd-ex li { grid-template-columns: minmax(0, 1fr) auto; padding: 14px; }
  .gd-ex__kw { grid-column: 1 / -1; }
  html body.ikg:not(#_) .gd-fit { display: flex; }
  html body.ikg:not(#_) .gd-fit__card { padding: 20px; }
  html body.ikg:not(#_) .gd-list { grid-template-columns: 1fr; padding: 12px 18px 20px; }
  html body.ikg:not(#_) .gd-prose__body p { font-size: 16px; }
  html body.ikg:not(#_) .gd-prose__art { height: 200px; }
  /* Tables become one block per row: the row name, then each value with its column name. */
  html body.ikg:not(#_) .gd-table { padding: 4px 16px; }
  html body.ikg:not(#_) .gd-table thead { display: none; }
  html body.ikg:not(#_) .gd-table :is(table, tbody, tr, th, td) { display: block; width: auto; }
  html body.ikg:not(#_) .gd-table tr { padding: 14px 0; border-bottom: 1px solid var(--cf-line); }
  html body.ikg:not(#_) .gd-table tbody tr:last-child { border-bottom: 0; }
  html body.ikg:not(#_) .gd-table :is(th, td) { padding: 0; border: 0; background: none !important; }
  html body.ikg:not(#_) .gd-table tbody th { margin-bottom: 6px; font-size: 16px; }
  html body.ikg:not(#_) .gd-table td { padding: 4px 0; }
  html body.ikg:not(#_) .gd-table td::before { content: attr(data-h) ": "; font-weight: 600; color: var(--cf-text); }
  /* List and stage: heading, stage, list, as on the homepage. */
  html body.ikg:not(#_) .gd-aud .ik-aud__stage { min-height: 340px; }
  html body.ikg:not(#_) .gd-aud__scene .ik-dmcard, html body.ikg:not(#_) .gd-aud__scene .ik-ui, html body.ikg:not(#_) .gd-aud__scene .gd-login { transform: none; }
  html body.ikg:not(#_) nav.gd-start { padding: 12px; border-radius: 24px; }
  html body.ikg:not(#_) .gd-start a { min-height: 68px; padding: 10px 12px; }
  html body.ikg:not(#_) a.gd-next { padding: 16px 18px; }
}

/* ==================== Article guides (2026-11-04) ====================
   INK-SYSTEM.md section 6: a guide is an article. One readable column (720px) with the answer first, numbered steps, tables,
   a contents list beside it and the guides of the same topic under that. No card grids or mock stages between paragraphs.
   Same look as the help guides (ink/help-guide.css, hg-*), so guides and help read as one family. */

/* Hero: the video guides show the video, the pages that keep their words show "On this page". */
html body.ikg:not(#_) .ga-player { align-self: center; width: 100%; padding: 8px; border: 1px solid var(--cf-ink-line); border-radius: 26px; background: var(--cf-ink-2); }
.ga-player__screen { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 18px; background: #000; }
html body.ikg:not(#_) .ga-player__screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
html body.ikg:not(#_) button.ga-player__poster { position: absolute; inset: 0; display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; }
html body.ikg:not(#_) .ga-player__poster img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.ga-player__play { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 80px; height: 80px; margin: -40px 0 0 -40px; border-radius: 50%; background: var(--cf-grad-lime); color: var(--cf-ink); transition: transform .25s var(--ease-out); }
.ga-player__play svg { margin-left: 4px; }
@media (hover: hover) {
  .ga-player__poster:hover .ga-player__play { transform: scale(1.06); }
  html body.ikg:not(#_) .ga-player__poster:hover img { transform: scale(1.015); }
}
html body.ikg:not(#_) .ga-player__poster:focus-visible { outline: 2px solid var(--cf-lime); outline-offset: -4px; }
html body.ikg:not(#_) p.ga-player__cap { margin: 10px 6px 2px; font-size: 14px; color: var(--cf-on-ink-2); }

html body.ikg:not(#_) nav.ga-toc--hero { justify-self: end; align-self: center; width: min(440px, 100%); padding: 22px 22px 14px; border-radius: 28px; background: #fff; color: var(--cf-text); }
html body.ikg:not(#_) p.ga-toc__h { font-size: 13px; font-weight: 500; color: var(--cf-text-3); }
html body.ikg:not(#_) .ga-toc ol { margin-top: 8px; }
html body.ikg:not(#_) .ga-toc li + li { border-top: 1px solid var(--cf-line); }
html body.ikg:not(#_) .ga-toc a { display: flex; align-items: center; gap: 12px; padding: 10px 4px; font-size: 15px; font-weight: 500; line-height: 1.3; color: var(--cf-text); text-decoration: none; }
html body.ikg:not(#_) .ga-toc__n { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--cf-mist); font-size: 12px; font-weight: 600; color: var(--cf-text-2); transition: background-color .15s var(--ease), color .15s var(--ease); }
@media (hover: hover) { html body.ikg:not(#_) .ga-toc a:hover .ga-toc__n { background: var(--cf-lime); color: var(--cf-ink); } }
html body.ikg:not(#_) .ga-toc a:focus-visible { outline: 2px solid var(--cf-ink); outline-offset: 2px; border-radius: 8px; }

/* Body: the guide in one column, the contents and the topic's guides beside it. */
html body.ikg:not(#_) .ga-grid { display: grid; grid-template-columns: minmax(0, 720px) minmax(260px, 300px); justify-content: space-between; gap: 64px; align-items: start; }
html body.ikg:not(#_) .ga-aside { grid-column: 2; grid-row: 1; position: sticky; top: 96px; display: flex; flex-direction: column; gap: 12px; max-height: calc(100vh - 120px); overflow-y: auto; }
html body.ikg:not(#_) .ga-article { grid-column: 1; grid-row: 1; min-width: 0; color: var(--cf-text); }
html body.ikg:not(#_) .ga-aside :is(nav.ga-toc, nav.ga-sib) { padding: 18px 14px 12px; border: 1px solid var(--cf-line); border-radius: 24px; background: #fff; color: var(--cf-text); }
html body.ikg:not(#_) .ga-aside nav.ga-toc { padding: 18px 18px 8px; }
html body.ikg:not(#_) .ga-aside .ga-toc a { padding: 8px 2px; font-size: 14px; }
html body.ikg:not(#_) p.ga-sib__h { padding: 0 8px 6px; }
html body.ikg:not(#_) .ga-sib p.ga-sib__h a { font-size: 15px; font-weight: 600; color: var(--cf-text); text-decoration: none; }
@media (hover: hover) { html body.ikg:not(#_) .ga-sib p.ga-sib__h a:hover { text-decoration: underline; text-underline-offset: 3px; } }
html body.ikg:not(#_) .ga-sib ol a { display: block; padding: 8px; border-radius: 10px; font-size: 14px; line-height: 1.35; color: var(--cf-text-2); text-decoration: none; }
html body.ikg:not(#_) .ga-sib li.is-on a { background: var(--cf-mist); font-weight: 500; color: var(--cf-text); }
@media (hover: hover) { html body.ikg:not(#_) .ga-sib li:not(.is-on) a:hover { background: var(--cf-mist); color: var(--cf-text); } }
html body.ikg:not(#_) a.ga-sib__all { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; padding: 12px 14px; border-radius: 14px; background: var(--cf-mist); font-size: 14px; font-weight: 600; color: var(--cf-text); text-decoration: none; transition: background-color .2s var(--ease); }
@media (hover: hover) { html body.ikg:not(#_) a.ga-sib__all:hover { background: var(--cf-lime); } }
html body.ikg:not(#_) .ga-sib a:focus-visible { outline: 2px solid var(--cf-ink); outline-offset: -2px; }

html body.ikg:not(#_) section.ga-sec { margin: 0; padding: 0; scroll-margin-top: 100px; }
html body.ikg:not(#_) :is(section.ga-sec, aside.ga-summary) + section.ga-sec { margin-top: 48px; }
html body.ikg:not(#_):not(#_) [role="main"] h2.ga-h2 { font-size: clamp(26px, 2.3vw, 32px) !important; font-weight: 500 !important; line-height: 1.15; letter-spacing: -.03em; color: var(--cf-text); text-align: left; }
html body.ikg:not(#_) .ga-article p { margin-top: 12px; font-size: 17px; line-height: 1.65; color: var(--cf-text-2); text-align: left; }
html body.ikg:not(#_) .ga-article strong { font-weight: 600; color: var(--cf-text); }
html body.ikg:not(#_) .ga-article :is(p, li, td) a:not(.ga-seek) { color: var(--cf-text); text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) { html body.ikg:not(#_) .ga-article :is(p, li, td) a:not(.ga-seek):hover { text-decoration-thickness: 2px; } }

/* The answer first: a white box with an ink line on the left. */
html body.ikg:not(#_) aside.ga-callout { margin-top: 18px; padding: 18px 20px; border: 1px solid var(--cf-line); border-left: 3px solid var(--cf-ink); border-radius: 14px; background: #fff; }
html body.ikg:not(#_) aside.ga-summary { margin-top: 0; border-left-color: var(--cf-lime); }
html body.ikg:not(#_) .ga-callout b { display: block; font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--cf-text); }
html body.ikg:not(#_) .ga-article .ga-callout p { margin-top: 4px; font-size: 16px; line-height: 1.6; }

/* Tick list and titled rows (not cards). */
html body.ikg:not(#_) ul.ga-ticks { margin-top: 14px; }
html body.ikg:not(#_) .ga-ticks li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; padding: 7px 0; font-size: 17px; line-height: 1.55; color: var(--cf-text); }
.ga-ticks li > i { display: grid; place-items: center; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%; background: var(--cf-lime); font-style: normal; color: var(--cf-ink); }
html body.ikg:not(#_) ul.ga-rows { margin-top: 14px; }
html body.ikg:not(#_) .ga-rows li { display: flex; align-items: flex-start; gap: 14px; padding: 12px 0; }
html body.ikg:not(#_) .ga-rows li + li { border-top: 1px solid var(--cf-line); }
html body.ikg:not(#_) .ga-rows li > div { min-width: 0; }
.ga-rows__dot { flex: none; width: 8px; height: 8px; margin: 10px 4px 0 2px; border-radius: 50%; background: var(--cf-ink); }
html body.ikg:not(#_) .ga-rows b { display: block; font-size: 17px; font-weight: 500; line-height: 1.4; color: var(--cf-text); }
html body.ikg:not(#_) .ga-article .ga-rows p { margin-top: 2px; font-size: 16px; line-height: 1.6; }

/* Numbered steps: one white row per step, the number in lime. */
html body.ikg:not(#_) ol.ga-steps { margin-top: 18px; }
html body.ikg:not(#_) .ga-steps > li { display: flex; align-items: flex-start; gap: 16px; padding: 18px 20px; border: 1px solid var(--cf-line); border-radius: 18px; background: #fff; }
html body.ikg:not(#_) .ga-steps > li + li { margin-top: 8px; }
html body.ikg:not(#_) .ga-steps > li > div { flex: 1; min-width: 0; }
.ga-steps__n { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--cf-lime); font-size: 14px; font-weight: 600; color: var(--cf-ink); }
html body.ikg:not(#_):not(#_) [role="main"] .ga-steps h3 { margin-top: 3px; font-size: 17px !important; font-weight: 500 !important; line-height: 1.35; letter-spacing: -.01em; color: var(--cf-text); text-align: left; }
html body.ikg:not(#_) .ga-article .ga-steps p { margin-top: 6px; font-size: 16px; line-height: 1.6; }
html body.ikg:not(#_) img.ga-steps__img { display: block; width: 100%; height: auto; margin-top: 14px; border: 1px solid var(--cf-line); border-radius: 12px; }
html body.ikg:not(#_) a.ga-seek { display: inline-flex; align-items: center; gap: 7px; height: 32px; margin-top: 12px; padding: 0 13px 0 11px; border-radius: 999px; background: var(--cf-mist); font-size: 14px; font-weight: 500; color: var(--cf-text); text-decoration: none; font-variant-numeric: tabular-nums; transition: background-color .15s var(--ease); }
@media (hover: hover) { html body.ikg:not(#_) a.ga-seek:hover { background: var(--cf-lime); } }
html body.ikg:not(#_) a.ga-seek:focus-visible { outline: 2px solid var(--cf-ink); outline-offset: 2px; }
html body.ikg:not(#_) p.ga-seekp { margin-top: 4px; }

/* Tables: white box, thin rows. The CreatorFlow column is light lime unless the table is plain. */
html body.ikg:not(#_) .ga-table { margin-top: 18px; overflow-x: auto; border: 1px solid var(--cf-line); border-radius: 18px; background: #fff; }
html body.ikg:not(#_) .ga-table table { width: 100%; border-collapse: collapse; }
html body.ikg:not(#_) .ga-table :is(th, td) { padding: 13px 16px; font-size: 15px; line-height: 1.45; color: var(--cf-text); text-align: left; vertical-align: top; }
html body.ikg:not(#_) .ga-table th { font-size: 13px; font-weight: 500; color: var(--cf-text-3); }
html body.ikg:not(#_) .ga-table tbody td { border-top: 1px solid var(--cf-line); }
html body.ikg:not(#_) .ga-table td:first-child { font-weight: 500; }
html body.ikg:not(#_) .ga-table.is-hi :is(th, td):last-child { background: #f7ffd9; }

/* Messages to copy: one column inside the article. */
html body.ikg:not(#_) ul.gd-ex.ga-ex { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 18px; }
html body.ikg:not(#_) .ga-ex li { border: 1px solid var(--cf-line); }

/* Numbers. */
html body.ikg:not(#_) ul.ga-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-top: 18px; }
html body.ikg:not(#_) .ga-stats li { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border: 1px solid var(--cf-line); border-radius: 18px; background: #fff; }
.ga-stats b { font-size: 26px; font-weight: 600; letter-spacing: -.03em; color: var(--cf-text); }
.ga-stats span { font-size: 14px; line-height: 1.4; color: var(--cf-text-2); }

/* One picture inside the text: a screenshot, or a product mock on the white panel (no colour frame). */
html body.ikg:not(#_) figure.ga-fig { margin: 20px 0 0; overflow: hidden; border: 1px solid var(--cf-line); border-radius: 18px; background: #fff; }
html body.ikg:not(#_) .ga-fig > img { display: block; width: 100%; height: auto; }
html body.ikg:not(#_) .ga-fig__mock { display: flex; align-items: center; justify-content: center; min-height: 200px; padding: 22px; background: var(--cf-mist); }
html body.ikg:not(#_) .ga-fig__mock :is(.ik-dmcard, .ik-ui, .gd-login, .ik-inbox) { width: min(340px, 100%); }
html body.ikg:not(#_) figure.ga-fig--two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--cf-line); }
html body.ikg:not(#_) .ga-fig--two figcaption { grid-column: 1 / -1; }
html body.ikg:not(#_) .ga-fig figcaption { padding: 10px 16px; background: #fff; font-size: 14px; line-height: 1.5; color: var(--cf-text-3); }
html body.ikg:not(#_) .ga-article p.ga-note { font-size: 14px; color: var(--cf-text-3); }

/* The Claude Skills list: every skill visible as a row; filters on top. */
html body.ikg:not(#_) .ga-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
html body.ikg:not(#_) button.ga-filter { appearance: none; min-height: 40px; padding: 0 16px; border: 1px solid var(--cf-field); border-radius: 999px; background: #fff; font: inherit; font-size: 14px; font-weight: 500; color: var(--cf-text); cursor: pointer; }
html body.ikg:not(#_) button.ga-filter[aria-pressed="true"] { border-color: var(--cf-ink); background: var(--cf-ink); color: var(--cf-on-ink); }
@media (hover: hover) { html body.ikg:not(#_) button.ga-filter:not([aria-pressed="true"]):hover { border-color: var(--cf-text); } }
html body.ikg:not(#_) ul.ga-skills { margin-top: 16px; }
html body.ikg:not(#_) li.ga-skill { padding: 18px 20px; border: 1px solid var(--cf-line); border-radius: 18px; background: #fff; }
html body.ikg:not(#_) li.ga-skill + li.ga-skill { margin-top: 8px; }
html body.ikg:not(#_) li.ga-skill[hidden] { display: none; }
.ga-skill__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
html body.ikg:not(#_):not(#_) [role="main"] .ga-skill h3 { font-size: 19px !important; font-weight: 500 !important; line-height: 1.3; letter-spacing: -.01em; color: var(--cf-text); text-align: left; }
.ga-skill__repo { font-size: 14px; color: var(--cf-text-3); }
.ga-skill__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ga-skill__tags span { padding: 3px 10px; border-radius: 999px; background: var(--cf-mist); font-size: 13px; font-weight: 500; color: var(--cf-text-2); }
.ga-skill__tags span.is-free { background: var(--cf-lime); color: var(--cf-ink); }
html body.ikg:not(#_) .ga-skill p { margin-top: 10px; font-size: 16px; line-height: 1.6; }
.ga-skill__cmd { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 6px 6px 6px 14px; border-radius: 12px; background: var(--cf-ink); }
html body.ikg:not(#_) .ga-skill__cmd code { flex: 1; min-width: 0; overflow-x: auto; font: 500 14px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--cf-on-ink); white-space: nowrap; }
html body.ikg:not(#_) a.ga-skill__go { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 15px; font-weight: 600; color: var(--cf-text); text-decoration: none; }
@media (hover: hover) { html body.ikg:not(#_) a.ga-skill__go:hover { text-decoration: underline; text-underline-offset: 3px; } }

/* After the guide: questions, next guide, related links as one line, the date. */
html body.ikg:not(#_) .ga-article .ik-faq { margin-top: 16px; }
html body.ikg:not(#_) .ga-article .ik-faq p { margin-top: 0; }
html body.ikg:not(#_) a.gd-next.ga-next { margin-top: 40px; }
html body.ikg:not(#_) .ga-article p.ga-also { margin-top: 22px; font-size: 16px; line-height: 1.6; }
html body.ikg:not(#_) .ga-article p.ga-upd { margin-top: 10px; font-size: 14px; color: var(--cf-text-3); }

/* Tablets and phones: the contents list on top, the guide, then the topic's guides. */
@media (max-width: 1099px) {
  html body.ikg:not(#_) .ga-grid { display: flex; flex-direction: column; gap: 32px; }
  html body.ikg:not(#_) .ga-aside { display: contents; }
  html body.ikg:not(#_) .ga-aside nav.ga-toc { order: 0; width: 100%; max-width: 720px; }
  html body.ikg:not(#_) .ga-article { order: 1; width: 100%; max-width: 720px; }
  html body.ikg:not(#_) .ga-aside nav.ga-sib { order: 2; width: 100%; max-width: 720px; }
  html body.ikg:not(#_) nav.ga-toc--hero { justify-self: start; width: 100%; max-width: 720px; }
  html body.ikg:not(#_) .ga-player { width: min(760px, 100%); margin: 0 auto; }
}
@media (max-width: 767px) {
  html body.ikg:not(#_) .ga-article p, html body.ikg:not(#_) .ga-rows b, html body.ikg:not(#_) .ga-ticks li { font-size: 16px; }
  html body.ikg:not(#_) :is(section.ga-sec, aside.ga-summary) + section.ga-sec { margin-top: 40px; }
  html body.ikg:not(#_) .ga-steps > li { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: start; gap: 0 12px; padding: 14px 16px; }
  html body.ikg:not(#_) .ga-steps > li > div { display: contents; }
  html body.ikg:not(#_) .ga-steps > li > div > :not(h3) { grid-column: 1 / -1; }
  html body.ikg:not(#_) .ga-article :is(.ga-steps, .ga-rows, .ga-callout) p { font-size: 15.5px; }
  html body.ikg:not(#_) .ga-table thead { display: none; }
  html body.ikg:not(#_) .ga-table :is(table, tbody, tr, td) { display: block; }
  html body.ikg:not(#_) .ga-table tr { padding: 12px 16px; }
  html body.ikg:not(#_) .ga-table tbody tr + tr { border-top: 1px solid var(--cf-line); }
  html body.ikg:not(#_) .ga-table tbody td { padding: 3px 0; border-top: 0; background: none !important; }
  html body.ikg:not(#_) .ga-table td:first-child { padding-bottom: 6px; }
  html body.ikg:not(#_) .ga-table td[data-th] { display: grid; grid-template-columns: minmax(84px, 38%) minmax(0, 1fr); gap: 12px; }
  html body.ikg:not(#_) .ga-table td[data-th]::before { content: attr(data-th); color: var(--cf-text-3); }
  html body.ikg:not(#_) figure.ga-fig--two { grid-template-columns: minmax(0, 1fr); }
  html body.ikg:not(#_) .ga-player { padding: 6px; border-radius: 20px; }
  html body.ikg:not(#_) .ga-player__screen { border-radius: 15px; }
  .ga-player__play { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
  html body.ikg:not(#_) nav.ga-toc--hero { padding: 18px 16px 10px; border-radius: 22px; }
  html body.ikg:not(#_) li.ga-skill { padding: 16px; }
}
/* The hero visual is a flex row on Ink pages; the contents card reads top to bottom. */
html body.ikg:not(#_) nav.ga-toc--hero { display: block; }
/* Article guides read left-aligned on every screen, as the help guides do (long answers centred are hard to read). */
@media (max-width: 1099px) {
  html body.ikg--art:not(#_) .gd-hero .ik-hero__copy { align-items: flex-start; text-align: left; }
  html body.ikg--art:not(#_):not(#_) .gd-hero .ik-hero__copy :is(h1.ik-h1, p.ik-hero__sub, p.ik-eyebrow) { text-align: left; margin-left: 0; margin-right: 0; }
  html body.ikg--art:not(#_) .gd-hero nav.gd-crumb { justify-content: flex-start; }
  html body.ikg--art:not(#_) .gd-hero .ik-btns { justify-content: flex-start; }
  html body.ikg--art:not(#_) .gd-hero .ik-proof { justify-content: flex-start; }
}
/* The hero visual is a flex box: the player takes the full column, and its screen keeps 16:9. */
html body.ikg:not(#_) .ik-hero__visual.ga-player { display: block; }
html body.ikg:not(#_) .ga-player__screen { width: 100%; }
/* App screenshots show at their own size or smaller, never stretched. */
html body.ikg:not(#_) img.ga-steps__img { width: auto; max-width: 100%; }
/* Pages that keep long ranked H1s (the Claude Skills guides) give the words the room up to the 740px cap; the contents card takes the rest. */
@media (min-width: 1100px) {
  html body.ikg:not(#_) .gd-hero--toc .ik-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); }
}
/* Install commands wrap on phones, so the whole command shows next to Copy. */
@media (max-width: 767px) {
  html body.ikg:not(#_) .ga-skill__cmd code { white-space: normal; overflow-wrap: anywhere; }
}
/* On phones the hero visual is cut at 400px for the phone mock; the video and the contents card keep their own height. */
@media (max-width: 1099px) {
  html body.ikg:not(#_) .ik-hero--v1 .ik-hero__visual:is(.ga-player, .ga-toc--hero) { height: auto; overflow: visible; }
}
/* A sub-heading inside a guide section (the two lists on why-dm-automation-works). */
html body.ikg:not(#_):not(#_) [role="main"] h3.ga-h3 { margin-top: 22px; font-size: 19px !important; font-weight: 600 !important; line-height: 1.35; letter-spacing: -.01em; color: var(--cf-text); text-align: left; }
/* Long guide H1s that keep their ranked words: one smaller step where they would run to 4 lines, so they stay at 3.
   --long: from 1400px up the copy column narrows while the H1 grows to 88px; 80px keeps 3 lines (measured 2026-11-04).
   --longer: /guides/how-to-turn-comments-into-sales, 4 lines from 1100px up at the normal size. */
@media (min-width: 1400px) {
  html body.ikg:not(#_):not(#_):not(#_) .is-left h1.ik-h1.gd-h1--long { font-size: min(5.9vw, 80px) !important; }
}
@media (min-width: 1100px) {
  html body.ikg:not(#_):not(#_):not(#_) .is-left h1.ik-h1.gd-h1--longer { font-size: min(5.2vw, 71px) !important; }
}
@media (min-width: 1100px) and (max-width: 1199px) {
  html body.ikg:not(#_):not(#_):not(#_) .gd-hero--toc .is-left h1.ik-h1.gd-h1--long { font-size: 5.4vw !important; }
}