/* Ink and Lime one-off English pages (2026-11-04): /sitemap, /glossary, /as-seen-on, /instagram-ai-agent, /chatgpt-for-instagram.
   Templates: frontend/singles/*_ink.pug. Loads after ink/home.css, which owns the tokens, header, footer and every shared part
   (hero, phone, Triggers cards, voices, FAQ, lime close). This file adds only what these pages have of their own. Body class: ik iks.
   Every rule is scoped html body.ik:not(#_) so it wins over the legacy sheets (INK-SYSTEM.md section 11, step 8). */

/* ---------- Words-only hero (sitemap, glossary, as-seen-on): short, so the list starts on the first screen ---------- */
html body.ik:not(#_) .iks-dhero { padding-bottom: clamp(40px, 4.4vw, 64px); }
html body.ik:not(#_) .iks-dhero p.ik-hero__sub { max-width: 640px; }
html body.ik:not(#_) .iks-dhero .ik-proof { margin-top: 28px; }
html body.ik:not(#_) p.iks-date { margin-top: 18px; font-size: 14px; color: var(--cf-on-ink-2); }

/* ---------- Shared small parts ---------- */
/* No colour behind visuals (INK-SYSTEM.md section 4): the quotes sit on plain mist. */
html body.ik.iks:not(#_) .ik-voice { background: var(--cf-mist); }
html body.ik:not(#_) ul.ik-trg.iks-trg3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* The post tile and its keyword comment both fit the 220px panel, so the comment is not cut (it is the point of the card). */
html body.ik:not(#_) .ik-trg .ik-post--tile { width: 156px; }
html body.ik:not(#_) .ik-trg .ik-post--tile .ik-post__pic { aspect-ratio: 4 / 3; }
html body.ik:not(#_) .ik-trg .ik-post--tile .ik-post__cmt { white-space: nowrap; }
html body.ik:not(#_) p.iks-also { margin-top: 20px; font-size: 15px; line-height: 1.6; color: var(--cf-text-2); text-align: left; }
html body.ik:not(#_) .iks-also a { color: var(--cf-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
html body.ik:not(#_) .ik-close__card.iks-close--solo { grid-template-columns: minmax(0, 1fr); }
html body.ik:not(#_) .iks-close--solo .ik-close__copy { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 48px; align-items: center; }
html body.ik:not(#_) .iks-close--solo :is(.ik-close__h, .ik-close__p, .ik-proof) { grid-column: 1; }
html body.ik:not(#_) .iks-close--solo .ik-btns { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
@media (max-width: 899px) {
  html body.ik:not(#_) .iks-close--solo .ik-close__copy { grid-template-columns: minmax(0, 1fr); }
  html body.ik:not(#_) .iks-close--solo .ik-btns { grid-column: 1; grid-row: auto; margin-top: 28px; }
}

/* Numbered steps: white cards on a sheet, raised ink cards on a band (white cards on ink inherit light text otherwise). */
html body.ik:not(#_) ol.iks-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
html body.ik:not(#_) .iks-steps li { display: flex; flex-direction: column; gap: 10px; padding: 24px; border: 1px solid var(--cf-ink-line); border-radius: 28px; background: var(--cf-ink-2); }
html body.ik:not(#_) .ik-sheet .iks-steps li { border-color: var(--cf-line); background: #fff; }
.iks-steps__n { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 6px; border-radius: 50%; background: var(--cf-lime); font-size: 15px; font-weight: 600; color: var(--cf-ink); }
html body.ik:not(#_) .iks-steps p.ik-p { margin-top: 0; }

/* Can and cannot: two white lists side by side. */
html body.ik:not(#_) .iks-know { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
html body.ik:not(#_) .iks-know > div { padding: 24px 26px; border-radius: 28px; background: #fff; }
html body.ik:not(#_) p.iks-know__h { margin-bottom: 10px; font-size: 13px; font-weight: 500; color: var(--cf-text-3); }
html body.ik:not(#_) .iks-know li { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; font-size: 16px; line-height: 1.5; color: var(--cf-text); }
.iks-know__ico { flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; background: var(--cf-mist); color: var(--cf-text-3); }
.iks-know__ico.is-yes { background: var(--cf-lime); color: var(--cf-ink); }

/* ---------- /chatgpt-for-instagram ---------- */
/* A short ChatGPT exchange on the mist panel of a Triggers card: the prompt on the right, the draft on the left. */
html body.ik:not(#_) .ik-trg__card .ik-art:has(.iks-chat) { justify-content: center; padding-bottom: 14px; }
html body.ik:not(#_) .iks-chat { display: flex; flex-direction: column; gap: 10px; width: 100%; }
html body.ik:not(#_) .iks-chat p { padding: 10px 14px; border-radius: 18px; background: #fff; outline: 1px solid var(--cf-line); outline-offset: -1px; font-size: 14px; line-height: 1.45; color: var(--cf-text); text-align: left; }
html body.ik:not(#_) p.iks-chat__you { align-self: flex-end; max-width: 86%; border-bottom-right-radius: 6px; background: var(--cf-ink); outline: 0; color: #fff; }
html body.ik:not(#_) p.iks-chat__gpt { align-self: flex-start; max-width: 94%; border-bottom-left-radius: 6px; }
html body.ik:not(#_) p.iks-chat__gpt::before { content: "InstaCaption Studio"; display: block; margin-bottom: 4px; font-size: 13px; font-weight: 500; color: var(--cf-text-3); }

/* Prompts to copy: two columns of rows, the name and button on top, the prompt under it. Rows with a line, not a mock grid. */
html body.ik:not(#_) ul.iks-prompts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
html body.ik:not(#_) .iks-prompts li { display: flex; flex-direction: column; gap: 12px; padding: 20px 22px; border: 1px solid var(--cf-ink-line); border-radius: 24px; background: var(--cf-ink-2); }
.iks-prompts__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.iks-prompts__top > span { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.iks-prompts__eye { font-size: 13px; font-weight: 500; color: var(--cf-on-ink-2); }
html body.ik:not(#_):not(#_) [role="main"] h3.iks-prompts__t { font-size: 19px !important; line-height: 1.25; letter-spacing: -.02em; color: var(--cf-on-ink); text-align: left; }
html body.ik:not(#_) p.iks-prompts__text { font-size: 15px; line-height: 1.55; color: var(--cf-on-ink-2); text-align: left; }
html body.ik:not(#_) button.iks-copy { flex: none; min-height: 40px; padding: 0 16px; border: 1px solid #4a4a50; border-radius: 8px; background: transparent; font: inherit; font-size: 14px; font-weight: 500; color: var(--cf-on-ink); cursor: pointer; transition: border-color .15s, background-color .15s, color .15s; }
@media (hover: hover) { html body.ik:not(#_) button.iks-copy:hover { border-color: var(--cf-lime); background: var(--cf-lime); color: var(--cf-ink); } }
html body.ik:not(#_) button.iks-copy:focus-visible { outline: 2px solid var(--cf-lime); outline-offset: 2px; }

/* Words left, the three ways to get the DM right, on the band. */
html body.ik:not(#_) .iks-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: center; }
html body.ik:not(#_) .iks-split p.ik-lead { margin-top: 16px; }
html body.ik:not(#_) .iks-split .ik-btns { margin-top: 28px; }
html body.ik:not(#_) ul.iks-ways { display: grid; gap: 10px; }
html body.ik:not(#_) .iks-ways a { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 20px 52px 20px 22px; border: 1px solid var(--cf-ink-line); border-radius: 22px; background: var(--cf-ink-2); color: var(--cf-on-ink); text-decoration: none; transition: border-color .2s; }
html body.ik:not(#_) .iks-ways a::after { content: "→"; position: absolute; top: 20px; right: 22px; font-size: 18px; color: var(--cf-lime); }
@media (hover: hover) { html body.ik:not(#_) .iks-ways a:hover { border-color: #4a4a50; } }
.iks-ways b { font-size: 18px; font-weight: 600; }
.iks-ways span { font-size: 15px; line-height: 1.45; color: var(--cf-on-ink-2); }

/* ---------- /as-seen-on: one column per group, one row per page ---------- */
html body.ik:not(#_) .iks-dirs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
html body.ik:not(#_) .iks-dirs__g { padding: 24px; border-radius: 28px; background: #fff; }
html body.ik:not(#_) p.iks-dirs__sub { margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--cf-text-2); text-align: left; }
html body.ik:not(#_) .iks-dirs ul { margin-top: 14px; }
html body.ik:not(#_) .iks-dirs li + li { border-top: 1px solid var(--cf-line); }
html body.ik:not(#_) .iks-dirs a { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 14px 0; color: var(--cf-text); text-decoration: none; }
.iks-dirs__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.iks-dirs__txt b { font-size: 17px; font-weight: 600; }
.iks-dirs__txt span { font-size: 15px; line-height: 1.4; color: var(--cf-text-2); }
.iks-dirs__txt i { font-style: normal; font-size: 13px; color: var(--cf-text-3); overflow-wrap: anywhere; }
.iks-dirs__go { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--cf-mist); font-size: 15px; color: var(--cf-ink); transition: background-color .15s; }
@media (hover: hover) { html body.ik:not(#_) .iks-dirs a:hover .iks-dirs__go { background: var(--cf-lime); } html body.ik:not(#_) .iks-dirs a:hover b { text-decoration: underline; text-underline-offset: 3px; } }
html body.ik:not(#_) .iks-dirs a:focus-visible { outline: 2px solid var(--cf-ink); outline-offset: 2px; border-radius: 8px; }

/* ---------- /glossary: one reading column, the find box and A to Z beside it ---------- */
html body.ik:not(#_) .iks-doc { display: grid; grid-template-columns: minmax(0, 720px) minmax(260px, 300px); grid-template-areas: "col side"; justify-content: space-between; gap: 64px; align-items: start; }
html body.ik:not(#_) .iks-col { grid-area: col; min-width: 0; color: var(--cf-text); }
html body.ik:not(#_) aside.iks-side { grid-area: side; position: sticky; top: 96px; display: flex; flex-direction: column; gap: 18px; padding: 20px; border-radius: 24px; background: #fff; }
html body.ik:not(#_) label.iks-find { display: flex; flex-direction: column; gap: 8px; }
.iks-find__l { font-size: 13px; font-weight: 500; color: var(--cf-text-3); }
html body.ik:not(#_) .iks-find input { width: 100%; height: 46px; padding: 0 14px; border: 1px solid var(--cf-field); border-radius: 12px; background: #fff; font: inherit; font-size: 16px; color: var(--cf-text); }
html body.ik:not(#_) .iks-find input:focus { outline: 2px solid var(--cf-ink); outline-offset: 1px; border-color: var(--cf-ink); }
html body.ik:not(#_) nav.iks-az { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
html body.ik:not(#_) .iks-az :is(a, span) { display: grid; place-items: center; height: 34px; border-radius: 9px; font-size: 15px; font-weight: 600; }
html body.ik:not(#_) .iks-az a { background: var(--cf-mist); color: var(--cf-text); text-decoration: none; transition: background-color .15s; }
@media (hover: hover) { html body.ik:not(#_) .iks-az a:hover { background: var(--cf-lime); } }
html body.ik:not(#_) .iks-az a:focus-visible { outline: 2px solid var(--cf-ink); outline-offset: 2px; }
html body.ik:not(#_) .iks-az span { color: #c4c4ca; }
html body.ik:not(#_) p.iks-none { font-size: 15px; line-height: 1.5; color: var(--cf-text-2); text-align: left; }
html body.ik:not(#_) section.iks-letter { scroll-margin-top: 96px; }
html body.ik:not(#_) section.iks-letter + section.iks-letter { margin-top: 40px; }
html body.ik:not(#_):not(#_) [role="main"] h2.iks-letter__h { margin-bottom: 4px; font-size: 40px !important; font-weight: 600 !important; line-height: 1; letter-spacing: -.04em; color: var(--cf-text); text-align: left; }
html body.ik:not(#_) article.iks-term { padding: 20px 0; scroll-margin-top: 96px; }
html body.ik:not(#_) article.iks-term + article.iks-term { border-top: 1px solid var(--cf-line); }
html body.ik:not(#_):not(#_) [role="main"] .iks-term h3 { font-size: 21px !important; line-height: 1.25; letter-spacing: -.02em; color: var(--cf-text); text-align: left; }
html body.ik:not(#_) .iks-term p { margin-top: 8px; font-size: 17px; line-height: 1.65; color: var(--cf-text-2); text-align: left; }
html body.ik:not(#_) .iks-term p.iks-term__ex { font-size: 16px; }
html body.ik:not(#_) .iks-term__ex b { font-weight: 600; color: var(--cf-text); }
html body.ik:not(#_) a.iks-term__link { display: inline-block; margin-top: 10px; font-size: 15px; font-weight: 500; color: var(--cf-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
html body.ik:not(#_) .iks-term:target h3 { text-decoration: underline; text-decoration-color: var(--cf-lime); text-decoration-thickness: 3px; text-underline-offset: 6px; }
html body.ik:not(#_) .iks-col p.iks-also { margin-top: 40px; }

/* ---------- /sitemap: the jump row in the hero, then one link list per group ---------- */
html body.ik:not(#_) nav.iks-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
html body.ik:not(#_) .iks-jump a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid #4a4a50; border-radius: 999px; font-size: 15px; font-weight: 500; color: var(--cf-on-ink); text-decoration: none; transition: border-color .15s, background-color .15s, color .15s; }
.iks-jump a span { font-size: 13px; color: var(--cf-on-ink-2); }
@media (hover: hover) { html body.ik:not(#_) .iks-jump a:hover { border-color: var(--cf-lime); background: var(--cf-lime); color: var(--cf-ink); } html body.ik:not(#_) .iks-jump a:hover span { color: var(--cf-ink); } }
html body.ik:not(#_) .iks-jump a:focus-visible { outline: 2px solid var(--cf-lime); outline-offset: 2px; }
html body.ik:not(#_) section.iks-sm { scroll-margin-top: 80px; }
html body.ik:not(#_) section.iks-sm.ik-band + section.iks-sm.ik-sheet, html body.ik:not(#_) section.iks-sm.ik-sheet + section.iks-sm.ik-band { margin-top: 12px; }
.iks-sm__n { font-size: .5em; font-weight: 500; letter-spacing: 0; color: var(--cf-on-ink-2); vertical-align: .55em; }
html body.ik:not(#_) .ik-sheet .iks-sm__n { color: var(--cf-text-3); }
html body.ik:not(#_) .iks-sm__cols { columns: 4 200px; column-gap: 32px; }
html body.ik:not(#_) .iks-sm__cols.has-parts .iks-sm__part { break-inside: avoid; margin-bottom: 24px; }
html body.ik:not(#_):not(#_) [role="main"] h3.iks-sm__h { margin-bottom: 6px; font-size: 13px !important; font-weight: 500 !important; line-height: 1.4; letter-spacing: 0; color: var(--cf-on-ink-2); text-align: left; }
html body.ik:not(#_):not(#_) [role="main"] .ik-sheet h3.iks-sm__h { color: var(--cf-text-3); }
html body.ik:not(#_) .iks-sm li { break-inside: avoid; }
/* A help topic's own page is its part heading: same label look, underlined so it reads as a link. */
html body.ik:not(#_) .iks-sm__h a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
@media (hover: hover) { html body.ik:not(#_) .iks-sm__h a:hover { color: var(--cf-on-ink); } html body.ik:not(#_) .ik-sheet .iks-sm__h a:hover { color: var(--cf-text); } }
html body.ik:not(#_) .iks-sm li a { display: inline-block; padding: 5px 0; font-size: 15px; line-height: 1.4; color: var(--cf-on-ink); text-decoration: none; }
html body.ik:not(#_) .ik-sheet.iks-sm li a { color: var(--cf-text); }
@media (hover: hover) { html body.ik:not(#_) .iks-sm li a:hover { text-decoration: underline; text-underline-offset: 3px; } }
html body.ik:not(#_) .iks-sm li a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 4px; }

/* ---------- Tablets ---------- */
@media (max-width: 1099px) {
  html body.ik:not(#_) .iks-doc { grid-template-columns: minmax(0, 1fr); grid-template-areas: "side" "col"; gap: 28px; }
  html body.ik:not(#_) aside.iks-side { position: static; }
  html body.ik:not(#_) nav.iks-az { grid-template-columns: repeat(13, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  html body.ik:not(#_) :is(ol.iks-steps, .iks-know, .iks-dirs) { grid-template-columns: minmax(0, 1fr); }
  html body.ik:not(#_) .iks-split { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

/* ---------- Phones ---------- */
@media (max-width: 767px) {
  html body.ik:not(#_) ul.ik-trg.iks-trg3 { display: flex; }
  /* Phones: number beside the title, so three steps stay short. */
  html body.ik:not(#_) ol.iks-steps { gap: 8px; }
  html body.ik:not(#_) .iks-steps li { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; padding: 16px 18px; border-radius: 20px; }
  .iks-steps__n { grid-row: span 2; width: 32px; height: 32px; margin-bottom: 0; font-size: 14px; }
  html body.ik:not(#_) .iks-steps h3.ik-h3 { font-size: 18px; }
  html body.ik:not(#_) .iks-know > div { padding: 18px 20px; border-radius: 22px; }
  html body.ik:not(#_) .iks-know li { font-size: 15px; }
  /* Phones: the prompts swipe sideways, as every card row does (INK-SYSTEM.md section 2). */
  html body.ik:not(#_) ul.iks-prompts.ik-scroll { display: flex; }
  html body.ik:not(#_) .iks-prompts li { padding: 18px; border-radius: 20px; }
  html body.ik:not(#_) .iks-dirs__g { padding: 20px; border-radius: 22px; }
  html body.ik:not(#_) nav.iks-az { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  html body.ik:not(#_) aside.iks-side { padding: 16px; border-radius: 20px; }
  html body.ik:not(#_) .iks-term p { font-size: 16px; }
  html body.ik:not(#_):not(#_) [role="main"] .iks-term h3 { font-size: 19px !important; }
  html body.ik:not(#_) .iks-sm__cols { columns: 2; column-gap: 16px; }
  html body.ik:not(#_) .iks-sm li a { font-size: 14px; padding: 6px 0; }
  html body.ik:not(#_) nav.iks-jump { gap: 6px; }
  html body.ik:not(#_) .iks-jump a { min-height: 36px; padding: 0 12px; font-size: 14px; }
}