/* English /tools pages in Ink and Lime (Vytas, 2026-11-03), dev only. Templates: frontend/tools/ink/tool_ink.pug, hub_ink.pug.
   Loads after ink/home.css, which owns the tokens, buttons, cards, FAQ and close. This file owns the tool hero, the tool sheet,
   the shared tool controls, the steps, the uses, the DM story, the related rows and the hub. Default styles are the final state. */

/* ---------- Base: the ink/home.css resets, for the Ink sections only ----------
   Tool pages use <main> without role="main", so the tool keeps its own sheet's spacing, weights and links. */
/* :where keeps each reset at the weight of html body.ikt:not(#_), so every component rule below and in ink/home.css wins. */
html body.ikt:not(#_) :where(main.ikt-main > :not(.ikt-tool)) :where(h1, h2, h3, p, ul, ol, li) { margin: 0; padding: 0; }
html body.ikt:not(#_) :where(main.ikt-main > :not(.ikt-tool)) :where(ul, ol) { list-style: none; }
html body.ikt:not(#_) :where(main.ikt-main > :not(.ikt-tool)) :where(img) { display: block; max-width: 100%; }
html body.ikt:not(#_):not(#_) :where(main.ikt-main > :not(.ikt-tool)) :is(h1, h2, h3) { font-weight: 500 !important; }
html body.ikt:not(#_):not(#_) main.ikt-main h1.ik-h1 { font-weight: 600 !important; letter-spacing: -.05em; }
html body.ikt:not(#_):not(#_) :where(main.ikt-main > :not(.ikt-tool)) p a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
html body.ikt:not(#_):not(#_) main.ikt-main h2.ik-close__h { max-width: 640px; font-size: clamp(32px, 3.4vw, 48px) !important; font-weight: 600 !important; line-height: 1.04; letter-spacing: -.04em; color: var(--cf-ink); text-align: left; text-wrap: balance; }
@media (max-width: 767px) { html body.ikt:not(#_):not(#_) main.ikt-main h2.ik-close__h { font-size: 32px !important; } }

/* ---------- Hero: short, so the tool starts on the first screen ---------- */
html body.ikt:not(#_) .ikt-hero { padding: calc(76px + clamp(40px, 3.6vw, 56px)) 0 clamp(32px, 3.4vw, 48px); }
/* The H1 column is the shared 740px cap (INK-SYSTEM.md, section 8), so a 44-character H1 stays on 3 lines. */
.ikt-hero__grid { display: grid; grid-template-columns: minmax(0, 740px) minmax(0, 1fr); column-gap: 64px; align-items: end; }
html body.ikt:not(#_):not(#_) .ikt-hero h1.ik-h1 { max-width: 740px; font-size: clamp(46px, 5.9vw, 88px) !important; line-height: .98; text-align: left; text-wrap: balance; }
html body.ikt:not(#_) .ikt-hero p.ik-eyebrow { margin-bottom: 18px; }
html body.ikt:not(#_) p.ikt-hero__sub { max-width: 480px; margin: 0; text-align: left; }
html body.ikt:not(#_) .ikt-facts { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 20px; font-size: 15px; color: var(--cf-on-ink); }
.ikt-facts li { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.ikt-facts svg { color: var(--cf-lime); }

/* ---------- The tool on a light sheet ---------- */
html body.ikt:not(#_) section.ikt-tool { padding: clamp(24px, 2.6vw, 40px) 0; }
.ikt-tool__in { width: calc(min(1400px, 100% + 24px) - 2 * clamp(40px, 5vw, 92px)); margin: 0 auto; }
html body.ikt:not(#_) .ikt-tool :is(.tool-section, .calendar-section, .tool-tabs, .tool-interface, .roi-section, .prompt-vault-filters, .prompt-vault-grid-section, .tool-hero, .roi-hero, .prompt-vault-hero) { min-height: 0 !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; }
html body.ikt:not(#_) .ikt-tool > .ikt-tool__in > * + * { margin-top: 16px !important; }
html body.ikt:not(#_) .ikt-tool :is(.tool-section__container, .tool-container, .container, .calendar-container, .roi-container, .roi-wrap, .tool-hero__container, .prompt-vault-hero__container) { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
/* The old tools-v9.css layer kept [hidden] hidden; a tool's own "display: block" must not show an empty image. */
html body.ikt:not(#_) .ikt-tool [hidden] { display: none !important; }
/* Shared controls inside every tool: one field look, General Sans, ink text. Each tool's own sheet still sets its layout. */
html body.ikt:not(#_) .ikt-tool { color: var(--cf-text); }
html body.ikt:not(#_) .ikt-tool :is(input, textarea, select, button) { font-family: inherit; }
/* Not on the ROI calculator: its value boxes beside the sliders are meant to have no edge. */
html body.ikt:not(#roi):not(#_) .ikt-tool :is(input[type="text"], input[type="number"], input[type="url"], input[type="email"], input[type="search"], input:not([type]), textarea, select) { border-color: var(--cf-field); border-radius: 10px; color: var(--cf-text); background-color: #fff; }
/* tools-base.css pads every .form-input for an icon; only fields that have one keep the space. */
html body.ikt:not(#_) .ikt-tool .form-input { padding-left: 16px; }
html body.ikt:not(#_) .ikt-tool :is(.input-icon ~ .form-input, .input-wrapper:has(.input-icon, > svg, > .iconify) .form-input) { padding-left: 48px; }
html body.ikt:not(#_) .ikt-tool :is(input, textarea)::placeholder { color: #8a8a93; }
/* Not inside the media kit preview: its four templates colour their own titles, and that preview is what the PDF and image save. */
html body.ikt:not(#_) .ikt-tool :is(h2, h3, h4, label):not(.media-kit-preview *) { color: var(--cf-text); }
/* Most tools keep their own narrower width and sit centred, so the line under the result is centred too. */
html body.ikt:not(#_) .ikt-tool p.tool-after-line { margin: 20px auto 0; font-size: 15px; color: var(--cf-text-2); text-align: center; }

/* tools-v9.css (the shared tool layer) painted the page white and the tool tabs for a black frame. On Ink the canvas is ink
   and the tool sits on the light sheet, so these go back. */
html body.ikt:not(#_) main.ikt-main { background: transparent; }
html body.ikt:not(#_) .ikt-tool .tool-tabs { display: flex; justify-content: center; gap: 4px; width: fit-content; max-width: 100%; margin: 0 auto 16px !important; padding: 4px; border: 0; border-radius: 12px; background: #e6e6e9; box-shadow: none; }
html body.ikt:not(#_) .ikt-tool .tool-tab { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border: 0; border-radius: 9px; background: transparent; font-size: 14px; font-weight: 500; color: var(--cf-text-2); white-space: nowrap; box-shadow: none; }
html body.ikt:not(#_) .ikt-tool .tool-tab:disabled { color: var(--cf-text-3); opacity: .8; }
html body.ikt:not(#_) .ikt-tool .tool-tab.tool-tab--active { background: #fff; color: var(--cf-ink); }
html body.ikt:not(#_) .ikt-tool .tool-tab::after { display: none; }
html body.ikt:not(#_) .ikt-tool .tool-tab .tool-tab__number { display: inline-grid; place-items: center; width: 20px; height: 20px; min-width: 0; border-radius: 50%; background: transparent; font-size: 12px; font-weight: 600; color: inherit; }
html body.ikt:not(#_) .ikt-tool .tool-tab--active .tool-tab__number { background: var(--cf-lime); color: var(--cf-ink); }
html body.ikt:not(#_) .ikt-tool .tool-card { margin-left: auto; margin-right: auto; }
/* The tools' black main button takes the Ink ink button (INK-SYSTEM.md, section 5); lime download buttons keep their lime. */
html body.ikt:not(#_) .ikt-tool .btn.btn--primary { border: 1px solid #383838 !important; border-radius: 8px !important; background: var(--cf-grad-ink) !important; color: #fff !important; }
@media (hover: hover) { html body.ikt:not(#_) .ikt-tool .btn.btn--primary:hover { border-color: var(--cf-lime) !important; background: var(--cf-lime) !important; color: var(--cf-ink) !important; } }

/* button-standardization.css gave the tools' main buttons their size; it is not loaded on Ink, so the size is set here. */
html body.ikt:not(#_) .ikt-tool .btn:is(.btn--primary, .btn--outline, .btn--secondary) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 22px; font-size: 15px; font-weight: 600; }
html body.ikt:not(#_) .ikt-tool .btn:is(.btn--outline, .btn--secondary) { border: 1px solid var(--cf-field); border-radius: 8px; background: #fff; color: var(--cf-text); cursor: pointer; }
@media (hover: hover) { html body.ikt:not(#_) .ikt-tool .btn:is(.btn--outline, .btn--secondary):hover { border-color: var(--cf-ink); } }

/* The old CreatorFlow box some tools show after a result carries old copy; the Ink DM section below the tool replaces it. */
html body.ikt:not(#_) .ikt-tool :is(.tool-cta-bridge, .tool-next-step, .next-step-cta) { display: none !important; }

/* ---------- Per tool: widths and fixes found in QA ---------- */
/* Media kit: the quick-add chips and the remove button had no style on the old page either. */
html body.ikt[data-tool="instagram-media-kit-generator"]:not(#_) .suggestion-chip { height: 34px; margin: 6px 6px 0 0; padding: 0 12px; 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; }
@media (hover: hover) { html body.ikt[data-tool="instagram-media-kit-generator"]:not(#_) .suggestion-chip:hover { border-color: var(--cf-ink); } }
html body.ikt[data-tool="instagram-media-kit-generator"]:not(#_) .package-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
html body.ikt[data-tool="instagram-media-kit-generator"]:not(#_) .package-number { font-size: 15px; font-weight: 600; color: var(--cf-text); }
html body.ikt[data-tool="instagram-media-kit-generator"]:not(#_) .suggestions-label { display: block; margin: 16px 0 2px; font-size: 14px; color: var(--cf-text-2); }
html body.ikt[data-tool="instagram-media-kit-generator"]:not(#_) .preview-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
html body.ikt[data-tool="instagram-media-kit-generator"]:not(#_) :is(.preview-actions, .download-actions) { display: flex; flex-wrap: wrap; gap: 10px; }
html body.ikt[data-tool="instagram-media-kit-generator"]:not(#_) .download-actions { justify-content: center; margin-top: 20px; }
html body.ikt[data-tool="instagram-media-kit-generator"]:not(#_) .share-hint { margin-top: 12px; font-size: 14px; color: var(--cf-text-2); text-align: center; }
html body.ikt[data-tool="instagram-media-kit-generator"]:not(#_) .package-remove { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-left: 6px; border: 1px solid var(--cf-field); border-radius: 8px; background: #fff; color: var(--cf-text-2); cursor: pointer; }
/* Hashtags by country: the button took the full card width beside the country list and ran 155px past the card. */
html body.ikt[data-tool="instagram-trending-hashtags"]:not(#_) .country-select-wrapper { gap: 10px; }
html body.ikt[data-tool="instagram-trending-hashtags"]:not(#_) .country-select-wrapper .form-select { flex: 1 1 auto; min-width: 0; }
html body.ikt[data-tool="instagram-trending-hashtags"]:not(#_) .country-select-wrapper .btn { flex: none; width: auto; }
/* Holiday calendar: the month title kept a 48px bottom margin and sat above its arrows. */
html body.ikt[data-tool="social-media-holiday-calendar"]:not(#_) .calendar-month-title { margin: 0 !important; }
/* Prompt library: the category chips wrap on wide screens instead of running past the edge with no cue; phones keep the swipe row. */
@media (min-width: 768px) {
  html body.ikt[data-tool="instagram-prompt-vault"]:not(#_) .prompt-vault-filters__scroll { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; overflow: visible; }
}
/* Holiday calendar: "View calendar" scrolled to the calendar, which now sits right under it. */
html body.ikt[data-tool="social-media-holiday-calendar"]:not(#_) #scrollToCalendar { display: none !important; }
@media (max-width: 760px) {
  /* The two-field rows stack on phones; the old page lost the space under the second field (Likes touched Style). */
  html body.ikt[data-tool="instagram-comment-generator"]:not(#_) .cg-grid-2 { row-gap: 0; }
  html body.ikt[data-tool="instagram-comment-generator"]:not(#_) .cg-grid-2 > .cg-field { margin-bottom: 1.15rem; }
  html body.ikt[data-tool="instagram-comment-generator"]:not(#_) .cg-panel > .cg-grid-2:last-child > .cg-field:last-child { margin-bottom: 0; }
  /* A shorter stage puts the first field higher on the first phone screen. */
  html body.ikt[data-tool="instagram-comment-generator"]:not(#_) .cg-stage { min-height: 200px; }
}

/* ---------- Fixes from the 45-tool check at 1440 and 390 (2026-11-04) ---------- */
/* creatorflow-modern.css sets every .btn to display: block !important up to 768px, so on phones a button's icon lost its gap
   and sat high against the words. Flex keeps the button a full row. */
@media (max-width: 768px) {
  html body.ikt:not(#_) .ikt-tool .btn:not([hidden]) { display: flex !important; align-items: center; justify-content: center; gap: 8px; }
}
/* Step tabs: three tools stack their tabs in a column on phones and set the tab text to 1rem, and two equal-width tabs
   squeezed the number badge to 0px on four more. One row, 14px, and the badge never shrinks. */
html body.ikt:not(#_) .ikt-tool .tool-tabs { flex-direction: row; flex-wrap: nowrap; }
html body.ikt:not(#_) .ikt-tool .tool-tab { flex: 0 1 auto; min-width: 0; }
html body.ikt:not(#_) .ikt-tool .tool-tab .tool-tab__number { flex: none; }
html body.ikt:not(#_) .ikt-tool .tool-tab__text { font-size: inherit; }
/* tools-v9.css paints .mg-studio and the post preview grid white for its black frame; on the light sheet that white showed
   between the two panels and under the shorter one. */
html body.ikt:not(#_) .ikt-tool .mg-studio,
html body.ikt[data-tool="instagram-post-preview"]:not(#_) .tool-interface__grid { background-color: transparent; }
/* Date fields were missing from the shared white field rule, so tools-v9.css filled them grey. */
html body.ikt:not(#roi):not(#_) .ikt-tool input[type="date"] { border-color: var(--cf-field); border-radius: 10px; color: var(--cf-text); background-color: #fff; }
html body.ikt:not(#_) .ikt-tool input[type="checkbox"] { accent-color: var(--cf-ink); }
html body.ikt:not(#_) .ikt-tool .form-hint + .btn { margin-top: 12px; }
html body.ikt:not(#_) .ikt-tool :is(h2, h3) { text-wrap: balance; }
/* Giveaway: the checkbox had no space before its words. */
html body.ikt[data-tool="instagram-giveaway-picker"]:not(#_) .checkbox-label { display: inline-flex; align-items: center; gap: 8px; }
/* Screenshot background: there section.tool-tabs holds the whole tool (nav and panels), so the shared pill rule shrank the
   tool to the width of its tabs. The pill goes on its nav. */
html body.ikt[data-tool="screenshot-background"]:not(#_) section.tool-tabs { display: block; width: auto; max-width: none; }
html body.ikt[data-tool="screenshot-background"]:not(#_) .tool-tabs__nav { display: flex; justify-content: center; gap: 4px; width: fit-content; max-width: 100%; margin: 0 auto 16px; padding: 4px; border: 0; border-radius: 12px; background: #e6e6e9; }
@media (max-width: 480px) {
  html body.ikt[data-tool="screenshot-background"]:not(#_) .tool-tabs__nav .tool-tab { flex: 1 1 0; justify-content: center; white-space: normal; text-align: center; }
}
/* Media downloader: the link icon is a 20px SVG with 12px padding, and border-box sizing left it no room to draw. */
html body.ikt[data-tool="media-downloader"]:not(#_) .url-icon { box-sizing: content-box; }
/* Post preview: the username is an @ and a field inside one bordered box; the field also took the shared border (box in a box). */
html body.ikt[data-tool="instagram-post-preview"]:not(#_) .input-wrapper { border: 1px solid var(--cf-field); border-radius: 10px; }
html body.ikt[data-tool="instagram-post-preview"]:not(#_) .input-wrapper:focus-within { border-color: var(--cf-ink); }
html body.ikt[data-tool="instagram-post-preview"]:not(#_) .input-wrapper .form-input { border: 0; border-radius: 0; background: transparent; padding-left: 4px; }
/* Image sizes: on phones the controls stack in a column and the search box kept flex-basis 240px as its height, so the
   search icon sat 100px under the field. */
@media (max-width: 720px) {
  html body.ikt[data-tool="social-media-image-sizes"]:not(#_) .sz-search { flex: none; }
}
@media (max-width: 420px) {
  /* The post, post modal and profile mockups stack their two-field rows here; the gap sat inside a pair and none between
     pairs (Comments touched "Audio label"). */
  html body.ikt:not(#_) .ikt-tool .mg-grid-2 { row-gap: 0; }
  html body.ikt:not(#_) .ikt-tool .mg-grid-2 > .mg-field { margin-bottom: 1.15rem; }
  html body.ikt:not(#_) .ikt-tool .mg-panel > .mg-grid-2:last-child > .mg-field:last-child { margin-bottom: 0; }
}

/* ---------- How to use: numbered steps on ink, no cards ---------- */
html body.ikt:not(#_) .ikt-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; counter-reset: s; }
html body.ikt:not(#_) .ikt-steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
html body.ikt:not(#_) .ikt-steps li { padding-top: 20px; border-top: 1px solid var(--cf-ink-line); }
.ikt-steps__n { display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: 16px; border-radius: 50%; background: var(--cf-lime); font-size: 15px; font-weight: 600; color: var(--cf-ink); }

/* ---------- Uses: white cards on the sheet, one idea each ---------- */
html body.ikt:not(#_) .ikt-uses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
html body.ikt:not(#_) .ikt-uses--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
html body.ikt:not(#_) .ikt-uses li { padding: 24px; border-radius: 28px; background: #fff; }
html body.ikt:not(#_) p.ikt-uses__eye { display: inline-flex; margin-bottom: 18px; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--cf-ink); }

/* ---------- The DM story: copy left, post and DM right ---------- */
.ikt-dm { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
html body.ikt:not(#_) p.ikt-dm__eye { margin-bottom: 14px; font-size: 13px; font-weight: 500; color: var(--cf-on-ink-2); }
html body.ikt:not(#_) .ikt-dm p.ik-lead { margin-top: 16px; }
html body.ikt:not(#_) .ikt-dm__pts { display: grid; gap: 10px; margin: 24px 0 28px; }
.ikt-dm__pts li { display: flex; align-items: center; gap: 10px; font-size: 16px; color: var(--cf-on-ink); }
.ikt-dm__pts i { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--cf-lime); color: var(--cf-ink); }
.ikt-dm__art { position: relative; display: block; height: 420px; }
/* The post and the DM card overlap only a little, so the comment with the keyword stays readable. */
.ikt-dm__post { position: absolute; top: 32px; left: 6%; width: 47%; transform: rotate(-3deg); }
html body.ikt:not(#_) .ikt-dm__post .ik-post__cmt > span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
html body.ikt:not(#_) .ikt-dm__post .ik-post__pic { aspect-ratio: 1 / 1; }
.ikt-dm__card { position: absolute !important; right: 5%; bottom: 36px; width: min(300px, 46%) !important; transform: rotate(1.5deg); }
.ikt-dm__sent { position: absolute; top: -12px; right: 16px; padding: 4px 10px; border-radius: 999px; background: var(--cf-ink); font-size: 12px; font-weight: 600; color: var(--cf-lime); }

/* ---------- More tools: plain rows on ink ---------- */
html body.ikt:not(#_) .ikt-rel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
html body.ikt:not(#_) .ikt-rel a { display: flex; align-items: flex-start; gap: 14px; height: 100%; padding: 18px; border: 1px solid var(--cf-ink-line); border-radius: 20px; background: var(--cf-ink-2); color: var(--cf-on-ink); text-decoration: none; transition: border-color .15s var(--ease), background-color .15s var(--ease); }
.ikt-rel__ico { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 12px; background: var(--cf-ink-3); color: var(--cf-on-ink); }
.ikt-rel__t { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ikt-rel__t b { font-size: 16px; font-weight: 500; }
.ikt-rel__t i { font-size: 14px; font-style: normal; line-height: 1.4; color: var(--cf-on-ink-2); }
@media (hover: hover) {
  html body.ikt:not(#_) .ikt-rel a:hover { border-color: #4a4a50; background: var(--cf-ink-3); }
  html body.ikt:not(#_) .ikt-rel a:hover .ikt-rel__ico { background: var(--cf-lime); color: var(--cf-ink); }
}

.ikt-stash { display: none !important; }

/* ---------- Motion: blocks rise once ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.ik-js body.ikt .rv:not(.is-in) { opacity: 0; transform: translateY(22px); }
  html.ik-js body.ikt .rv.is-in { transition: opacity .6s var(--ease-out) var(--rd, 0s), transform .8s var(--ease-out) var(--rd, 0s); }
}

/* ---------- Tablet and phone ---------- */
@media (max-width: 1023px) {
  .ikt-hero__grid { grid-template-columns: 1fr; row-gap: 20px; }
  html body.ikt:not(#_) .ikt-steps, html body.ikt:not(#_) .ikt-steps--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ikt-dm { grid-template-columns: 1fr; gap: 36px; }
  html body.ikt:not(#_) .ikt-rel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .ikt-tool__in { width: calc(100% - 32px); }
}
@media (max-width: 767px) {
  html body.ikt:not(#_) .ikt-hero { padding: calc(76px + 28px) 0 28px; }
  /* 40px, not 46px: the long tool names (follower ratio, giveaway picker, handle checker) ran to 4 lines at 390 (2026-11-04). */
  html body.ikt:not(#_):not(#_) .ikt-hero h1.ik-h1 { font-size: 40px !important; }
  html body.ikt:not(#_) .ikt-hero p.ik-eyebrow { margin-bottom: 14px; font-size: 12px; }
  html body.ikt:not(#_) p.ikt-hero__sub { font-size: 17px; }
  html body.ikt:not(#_) .ikt-facts { margin-top: 16px; font-size: 14px; }
  html body.ikt:not(#_) section.ikt-tool { margin: 8px 8px 0; padding: 16px 0; border-radius: 24px; }
  html body.ikt:not(#_) .ikt-steps, html body.ikt:not(#_) .ikt-steps--4 { grid-template-columns: 1fr; gap: 20px; }
  html body.ikt:not(#_) .ikt-steps li { display: grid; grid-template-columns: 32px 1fr; column-gap: 14px; padding-top: 16px; }
  html body.ikt:not(#_) .ikt-steps li .ikt-steps__n { grid-row: span 2; margin: 0; }
  html body.ikt:not(#_) .ikt-steps li p.ik-p { margin-top: 4px; }
  /* The grid rule above outranks .ik-scroll, so the swipe row is set again here (INK-SYSTEM.md, section 2 trap). */
  html body.ikt:not(#_) .ikt-uses { display: flex; }
  html body.ikt:not(#_) .ikt-uses li { padding: 20px; }
  /* Phones: a shorter post photo, and the DM sits under the comment row so the keyword stays readable (INK-SYSTEM.md, section 11 trap). */
  .ikt-dm__art { height: 450px; }
  .ikt-dm__post { top: 20px; left: 5%; width: 58%; }
  html body.ikt:not(#_) .ikt-dm__post .ik-post__pic { aspect-ratio: 16 / 10; }
  .ikt-dm__card { top: 228px; bottom: auto; right: 4%; width: 68% !important; }
  html body.ikt:not(#_) .ikt-dm__card .ik-dm__card img { display: none; }
  html body.ikt:not(#_) .ikt-rel { grid-template-columns: 1fr; gap: 8px; }
  html body.ikt:not(#_) .ikt-rel a { padding: 14px; }
}

/* ---------- Light sheet variants: the DM story and the price row on the hub ---------- */
html body.ikt:not(#_) .ik-sheet p.ikt-dm__eye { color: var(--cf-text-3); }
html body.ikt:not(#_) .ik-sheet .ikt-dm__pts li { color: var(--cf-text); }
html body.ikt:not(#_) .ikt-price { display: grid; grid-template-columns: minmax(0, 1.1fr) auto auto; gap: 32px; align-items: center; margin-top: 40px; padding: 20px 24px; border-radius: 28px; background: #fff; color: var(--cf-text); }
html body.ikt:not(#_) p.ikt-price__t { font-size: 19px; font-weight: 500; letter-spacing: -.02em; }
html body.ikt:not(#_) p.ikt-price__p { margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--cf-text-2); }
html body.ikt:not(#_) .ikt-price__plans { display: flex; gap: 8px; }
html body.ikt:not(#_) .ikt-price__plans li { display: flex; flex-direction: column; min-width: 128px; padding: 10px 14px; border-radius: 16px; background: var(--cf-mist); }
.ikt-price__plans span { font-size: 13px; font-weight: 500; color: var(--cf-text-2); }
.ikt-price__plans b { font-size: 26px; font-weight: 500; line-height: 1.15; letter-spacing: -.03em; }
.ikt-price__plans b small { font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--cf-text-3); }
.ikt-price__plans i { font-style: normal; font-size: 12px; color: var(--cf-text-3); white-space: nowrap; }
html body.ikt:not(#_) a.ikt-price__link { font-size: 15px; font-weight: 600; color: var(--cf-text); white-space: nowrap; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ---------- FAQ on an ink band (the hub) ---------- */
html body.ikt:not(#_) .ik-band .ik-faq { border-top-color: var(--cf-ink-line); }
html body.ikt:not(#_) .ik-band .ik-faq details { border-bottom-color: var(--cf-ink-line); }
html body.ikt:not(#_) .ik-band .ik-faq summary { color: var(--cf-on-ink); }
html body.ikt:not(#_) .ik-band .ik-faq p { color: var(--cf-on-ink-2); }
html body.ikt:not(#_) .ik-band .ik-faq__ico { background: var(--cf-ink-3); color: var(--cf-on-ink); }
html body.ikt:not(#_) .ik-band .ik-faq details[open] .ik-faq__ico { background: var(--cf-lime); color: var(--cf-ink); }

/* ---------- The /tools hub ---------- */
html body.ikth:not(#_) [hidden] { display: none !important; }
.ikth-hero__grid { display: grid; grid-template-columns: minmax(0, 740px) minmax(0, 1fr); gap: 56px; align-items: center; }
html body.ikth:not(#_) .ikth-hero p.ikt-hero__sub { max-width: 560px; margin-top: 20px; }
.ikth-search { margin-top: 28px; max-width: 560px; }
.ikth-search__box { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 18px; border: 1px solid #3a3a3f; border-radius: 14px; background: var(--cf-ink-2); color: var(--cf-on-ink-2); cursor: text; transition: border-color .15s var(--ease); }
.ikth-search__box:focus-within { border-color: var(--cf-lime); }
html body.ikth:not(#_) .ikth-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; font: inherit; font-size: 17px; color: var(--cf-on-ink); outline: 0; }
html body.ikth:not(#_) .ikth-search input::placeholder { color: #8a8a93; }
.ikth-search input::-webkit-search-cancel-button { filter: invert(1); }
.ikth-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html body.ikth:not(#_) .ikth-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; max-width: 640px; }
html body.ikth:not(#_) .ikth-chips button { height: 36px; padding: 0 14px; border: 1px solid #3a3a3f; border-radius: 999px; background: transparent; font: inherit; font-size: 14px; font-weight: 500; color: var(--cf-on-ink); cursor: pointer; transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease); }
html body.ikth:not(#_) .ikth-chips button.is-on { border-color: var(--cf-lime); background: var(--cf-lime); color: var(--cf-ink); }
@media (hover: hover) { html body.ikth:not(#_) .ikth-chips button:not(.is-on):hover { border-color: var(--cf-on-ink); } }

/* Hero picture: three results the most used tools make, on one lime frame. */
.ikth-hero__art { position: relative; display: block; height: 400px; }
.ikth-hero__a, .ikth-hero__b, .ikth-hero__c { position: absolute; }
/* One comment on top, the ratio and the fonts side by side under it. */
.ikth-hero__a { top: 56px; left: 8%; width: 84%; transform: rotate(-1.5deg); }
.ikth-hero__c { top: 186px; left: 8%; width: 41%; transform: rotate(-2deg); }
.ikth-hero__b { top: 178px; right: 8%; width: 41%; transform: rotate(2deg); }
/* White mocks on the mist frame get the same 1px edge as the homepage mocks (ink/home.css, after .ik-art). */
html body.ikt:not(#_) .ik-art :is(.iktp-cmt, .iktp-fonts, .iktp-num, .iktp-prof, .iktp-post, .iktp-stats > span) { outline: 1px solid var(--cf-line); outline-offset: -1px; }

/* The drawn results (hub hero and popular cards). */
.iktp-cmt { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border-radius: 16px; background: #fff; color: #111; font-size: 14px; line-height: 1.35; text-align: left; }
html body.ikth:not(#_) .iktp-cmt img { flex: none; width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.iktp-cmt > span { display: flex; flex-direction: column; gap: 2px; }
.iktp-cmt b { font-weight: 600; }
.iktp-cmt i { font-style: normal; font-size: 12px; color: #737373; }
html body.ikt:not(#_) .iktp-fonts { display: grid; gap: 6px; padding: 14px 16px; border-radius: 16px; background: #fff; color: #111; font-size: 17px; line-height: 1.25; text-align: left; }
.iktp-num { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 16px; background: #fff; color: #111; text-align: left; }
.iktp-num__k { font-size: 13px; color: #63636b; }
.iktp-num b { font-size: 34px; font-weight: 600; line-height: 1; letter-spacing: -.03em; }
.iktp-num__bar { display: block; height: 8px; border-radius: 99px; background: #ececef; overflow: hidden; }
.iktp-num__bar i { display: block; width: calc(var(--w) * 100%); height: 100%; border-radius: 99px; background: var(--cf-ink); }
.iktp-num__note { font-size: 12px; color: #63636b; }
.iktp-prof { width: 100%; padding: 14px; border-radius: 16px; background: #fff; color: #111; text-align: left; }
.iktp-prof__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
html body.ikth:not(#_) .iktp-prof__top img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.iktp-prof__top span { display: flex; flex-direction: column; align-items: center; font-size: 12px; }
.iktp-prof__top b { font-size: 15px; font-weight: 600; }
.iktp-prof__top i { font-style: normal; color: #63636b; }
html body.ikth:not(#_) p.iktp-prof__bio { margin-top: 8px; font-size: 12px; line-height: 1.35; }
.iktp-prof__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: 10px; }
html body.ikth:not(#_) .iktp-prof__grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.iktp-post { width: 100%; overflow: hidden; border-radius: 16px; background: #fff; color: #111; text-align: left; }
.iktp-post__pic { height: 84px; overflow: hidden; }
html body.ikth:not(#_) .iktp-post__pic img { width: 100%; height: 100%; object-fit: cover; }
html body.ikth:not(#_) p.iktp-post__cap { padding: 8px 12px 12px; font-size: 12px; line-height: 1.35; }
.iktp-post__cap b { font-weight: 600; }
.iktp-post__cap i { font-style: normal; color: #737373; }
.iktp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: 100%; }
.iktp-stats span { display: flex; flex-direction: column; gap: 2px; padding: 12px 10px; border-radius: 14px; background: #fff; color: #111; text-align: left; }
.iktp-stats i { font-style: normal; font-size: 12px; color: #63636b; }
.iktp-stats b { font-size: 20px; font-weight: 600; letter-spacing: -.02em; }

/* Popular: six cards in the Triggers card look; the whole card is the link. */
html body.ikth:not(#_) .ikth-pop__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
html body.ikth:not(#_) .ikth-card a { display: block; height: 100%; padding: 8px 8px 20px; border-radius: 28px; background: #fff; color: var(--cf-text); text-decoration: none; transition: transform .2s var(--ease); }
html body.ikth:not(#_) .ikth-card .ik-art { height: 220px; padding: 16px 22px; }
html body.ikth:not(#_) .ikth-card .ik-art > * { max-width: 300px; }
html body.ikth:not(#_) .ikth-card :is(.ik-trg__eye, .ik-h3, .ik-p) { padding: 0 12px; }
html body.ikth:not(#_) .ikth-card p.ik-trg__eye { margin-top: 14px; }
html body.ikth:not(#_) .ikth-card h3.ik-h3 { margin-top: 4px; }
@media (hover: hover) { html body.ikth:not(#_) .ikth-card a:hover { transform: translateY(-3px); } }

/* Every tool: six groups on a 3 x 2 grid, plain rows, so 43 tools fit in about two screens. */
.ikth-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; align-items: start; }
.ikth-group--soon { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; }
html body.ikth:not(#_) h3.ikth-group__h { font-size: 21px; letter-spacing: -.02em; color: var(--cf-on-ink); }
html body.ikth:not(#_) p.ikth-group__p { margin: 6px 0 14px; font-size: 15px; line-height: 1.45; color: var(--cf-on-ink-2); }
html body.ikth:not(#_) .ikth-rows { display: grid; grid-template-columns: 1fr; gap: 2px; margin-left: -12px; }
html body.ikth:not(#_) .ikth-rows a { padding: 10px 12px; border: 0; border-radius: 14px; background: transparent; }
@media (hover: hover) { html body.ikth:not(#_) .ikth-rows a:hover { background: var(--cf-ink-2); } }
html body.ikth:not(#_) .ikth-rows .ikt-rel__ico { width: 38px; height: 38px; border-radius: 10px; }
html body.ikth:not(#_) .ikth-rows .ikt-rel__t b { font-size: 15px; }
html body.ikth:not(#_) .ikth-soon { display: flex; flex-wrap: wrap; gap: 8px; }
html body.ikth:not(#_) .ikth-group--soon h3.ikth-group__h { font-size: 16px; color: var(--cf-on-ink-2); }
html body.ikth:not(#_) .ikth-soon a { display: inline-flex; height: 36px; align-items: center; padding: 0 14px; border: 1px solid var(--cf-ink-line); border-radius: 999px; font-size: 14px; color: var(--cf-on-ink-2); text-decoration: none; }
html body.ikth:not(#_) .ikth-none { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 32px 0; }
html body.ikth:not(#_) .ikth-none p { font-size: 18px; color: var(--cf-on-ink); }
html body.ikth:not(#_) .ikth-none button.ik-btn { display: inline-flex; align-items: center; height: 46px; padding: 0 20px; border: 1px solid #4a4a50; border-radius: 8px; background: transparent; font: inherit; font-weight: 500; color: var(--cf-on-ink); cursor: pointer; }
html body.ikth:not(#_) .ikth-dm .ikt-dm { margin-bottom: 0; }

@media (max-width: 1099px) {
  /* minmax(0, 1fr): the chip row does not wrap on phones, and an auto track would grow to its full width. */
  .ikth-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .ikth-hero__copy { min-width: 0; }
  .ikth-hero__art { display: none; }
  .ikth-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  html body.ikth:not(#_) .ikth-pop__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html body.ikt:not(#_) .ikt-price { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  html body.ikt:not(#_) .ikt-price__plans li { flex: 1; min-width: 0; }
}
@media (max-width: 767px) {
  .ikth-search__box { height: 52px; }
  html body.ikth:not(#_) .ikth-chips { flex-wrap: nowrap; margin-right: -24px; padding-right: 24px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  html body.ikth:not(#_) .ikth-chips::-webkit-scrollbar { display: none; }
  html body.ikth:not(#_) .ikth-chips button { white-space: nowrap; }
  html body.ikth:not(#_) .ikth-pop__list { display: flex; }
  .ikth-groups { grid-template-columns: 1fr; gap: 28px; }
  .ikth-group--soon { flex-direction: column; align-items: flex-start; gap: 10px; }
  html body.ikt:not(#_) .ikt-price__plans { gap: 6px; }
  html body.ikt:not(#_) .ikt-price__plans li { padding: 8px 10px; }
  .ikt-price__plans b { font-size: 22px; }
  .ikt-price__plans i { white-space: normal; }
}

/* Filtered hub list: one group per row, its tools across three columns; the count and the way back above it. */
html body.ikth:not(#_) .ikth-groups.is-filter { grid-template-columns: minmax(0, 1fr); }
html body.ikth:not(#_) .ikth-groups.is-filter .ikth-rows { grid-template-columns: repeat(3, minmax(0, 1fr)); }
html body.ikth:not(#_) .ikth-filter { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; padding: 12px 12px 12px 20px; border: 1px solid var(--cf-ink-line); border-radius: 16px; font-size: 16px; color: var(--cf-on-ink); }
html body.ikth:not(#_) .ikth-filter button { height: 40px; padding: 0 16px; border: 1px solid #4a4a50; border-radius: 8px; background: transparent; font: inherit; font-size: 15px; font-weight: 500; color: var(--cf-on-ink); cursor: pointer; }
@media (max-width: 1023px) { html body.ikth:not(#_) .ikth-groups.is-filter .ikth-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { html body.ikth:not(#_) .ikth-groups.is-filter .ikth-rows { grid-template-columns: 1fr; } }