/* ✨ iGenerator's own page (owner, 14 Nov 2026: "a nice conversion landing page not just a tool"): the sections under the
   tool, views/igenerator-landing.php. Linked on /generator/igenerator only (IGeneratorLanding::apply), after site.css.
   Light like the site, with its colour tokens; Inter (the maker loads it) with the system font behind it; bold only for
   headings and buttons; a 16 px side gutter on phones; cards and rows never touch; inline items centred. Every selector
   here starts with .igl (or #root, for the one rule below). */

/* The maker's black bar pins under the site header on computers (site.css .header.gen-nav). Pinned bars stay inside
   their parent: here the app's root ends after the tool, so the bar would be pushed under the white header as the page
   scrolls into these sections, and show cut. Without boxes of their own, the bar's range is the whole page. */
@media (min-width: 1025px) {
  #root, #root > .app { display: contents; }
}
/* The maker gives its root a full screen of height (min-height: 100vh): on a phone that left a blank screen between the
   tool and these sections. Here the sections follow the tool directly. */
#root { min-height: 0; }

.igl {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px; line-height: 1.65; color: var(--ink, #16181d);
  background: var(--white, #fff);
  -webkit-font-smoothing: antialiased;
}
.igl-wrap { max-width: 1080px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 32px); }
.igl-section { padding: 44px 0; border-top: 1px solid var(--border, #eceae6); }
.igl-how, .igl-templates, .igl-plans { background: var(--tint, #f8f7f4); }

.igl h2 {
  margin: 0 0 12px; max-width: none;
  font-size: clamp(22px, 2.6vw, 28px); font-weight: 700; line-height: 1.25; letter-spacing: -.02em; color: var(--ink, #16181d);
}
.igl h3 { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.35; color: var(--ink, #16181d); }
.igl p { margin: 0; color: var(--body, #565961); }
.igl a { color: var(--red-deep, #a51f1a); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.igl a:hover { color: var(--red, #d32b25); }
.igl-lead { max-width: 70ch; font-size: 17px; }
.igl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------------------------------------------------------------- 3. how it works */
.igl-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 22px 0 0; padding: 0; list-style: none; }
.igl-step {
  display: flex; align-items: flex-start; gap: 14px; padding: 18px;
  background: var(--white, #fff); border: 1px solid var(--border, #eceae6); border-radius: 14px;
}
.igl-step__n {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--red-tint, #fff5f3); border: 1px solid var(--red-border, #f7d9d4); color: var(--red-deep, #a51f1a);
  font-size: 16px; font-weight: 700; line-height: 1;
}
.igl-step h3 { margin: 6px 0; }
.igl-step p { font-size: 15px; }

/* ---------------------------------------------------------------- 4. example requests: the whole card is the link */
.igl-examples__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; }
.igl-examples__item {
  position: relative; display: flex; flex-direction: column; justify-content: center; gap: 4px; min-height: 76px; padding: 14px 16px;
  background: var(--white, #fff); border: 1px solid var(--border-2, #e6e4e0); border-radius: 12px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.igl-examples__item:hover { border-color: var(--red-border-2, #f0cfc9); box-shadow: var(--shadow-hover, 0 8px 24px rgba(22, 24, 29, .08)); }
.igl a.igl-example { color: var(--ink, #16181d); text-decoration: none; font-size: 15.5px; line-height: 1.4; }
.igl a.igl-example::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
.igl a.igl-example:focus-visible { outline: none; }
.igl a.igl-example:focus-visible::after { outline: 2px solid var(--red, #d32b25); outline-offset: 2px; }
.igl-example__opens { font-size: 13.5px; line-height: 1.4; color: var(--muted, #8a8d94); }

/* ---------------------------------------------------------------- 5. all the templates, in two groups */
.igl-groups { display: grid; gap: 16px; margin-top: 22px; }
.igl-group { background: var(--white, #fff); border: 1px solid var(--border, #eceae6); border-radius: 14px; overflow: hidden; }
.igl-group__title { margin: 0; }
.igl-group__head {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 12px 18px;
  background: none; border: 0; cursor: pointer; text-align: left; font: inherit; color: var(--ink, #16181d);
}
.igl-group__name { font-size: 18px; font-weight: 700; line-height: 1.3; }
.igl-group__count { margin-left: auto; font-size: 14px; font-weight: 400; color: var(--muted, #8a8d94); }
.igl-group__arrow { flex: none; color: var(--secondary, #6b6e75); transition: transform .25s ease; }
.igl-group__head[aria-expanded="true"] .igl-group__arrow { transform: rotate(180deg); }
.igl-group__head:focus-visible { outline: 2px solid var(--red, #d32b25); outline-offset: -2px; border-radius: 14px; }
.igl-group__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; }
.igl-group__body.is-open { grid-template-rows: 1fr; }
.igl-group__inner { min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 0s linear .28s; }
.igl-group__body.is-open > .igl-group__inner { visibility: visible; transition-delay: 0s; }
.igl-group__cols {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px 28px;
  padding: 2px 18px 16px; border-top: 1px solid var(--stripe, #f1efeb);
}
.igl h4.igl-col__title {
  margin: 14px 0 4px; font-size: 12.5px; font-weight: 700; letter-spacing: .05em; line-height: 1.4; text-transform: uppercase; color: var(--muted, #8a8d94);
}
.igl-col__list { margin: 0; padding: 0; list-style: none; }
.igl .igl-col__list a {
  display: flex; align-items: center; min-height: 36px; padding: 4px 0;
  font-size: 15px; line-height: 1.35; color: var(--ink, #16181d); text-decoration: none;
}
.igl .igl-col__list a:hover { color: var(--red-deep, #a51f1a); text-decoration: underline; }
.igl-still .igl-group__body, .igl-still .igl-group__inner, .igl-still .igl-group__arrow { transition: none !important; }

/* ---------------------------------------------------------------- 6. which one do I use */
.igl-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 22px; }
.igl-card {
  display: flex; flex-direction: column; gap: 8px; padding: 20px;
  background: var(--white, #fff); border: 1px solid var(--border, #eceae6); border-radius: 14px;
}
.igl-card p { flex: 1; font-size: 15px; }
.igl a.igl-card__link {
  align-self: flex-start; display: inline-flex; align-items: center; min-height: 42px; margin-top: 6px; padding: 8px 16px;
  border: 1.5px solid var(--border-4, #d9d7d2); border-radius: 11px; background: var(--white, #fff);
  font-size: 14.5px; font-weight: 600; line-height: 1.3; color: var(--ink, #16181d); text-decoration: none;
}
.igl a.igl-card__link:hover { background: var(--tint, #f8f7f4); color: var(--ink, #16181d); }
/* 🪄 AI Builder wears its own violet, as in the maker. */
.igl-card--ai { background: #faf8ff; border-color: #ddd6fe; }
.igl .igl-card--ai a.igl-card__link { border-color: #c4b5fd; color: #5b21b6; }
.igl .igl-card--ai a.igl-card__link:hover { background: #f5f3ff; color: #4c1d95; }

/* ---------------------------------------------------------------- 7. plans */
.igl-plans__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; margin-top: 22px; }
.igl-plan { padding: 22px; background: var(--white, #fff); border: 1px solid var(--border, #eceae6); border-radius: 16px; }
.igl-plan--premium { border-color: var(--red-border, #f7d9d4); box-shadow: 0 10px 28px rgba(211, 43, 37, .08); }
.igl-plan h3 { margin-bottom: 6px; font-size: 19px; }
.igl-plan__list { margin: 0; padding: 0; list-style: none; }
/* Name and value on one line when they fit; when they do not, the value moves under the name, still on the right. */
.igl-plan__list li {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 16px; min-height: 46px; padding: 10px 0;
  border-bottom: 1px solid var(--stripe, #f1efeb); font-size: 15px; line-height: 1.4;
}
.igl-plan__list li:last-child { border-bottom: 0; }
.igl-plan__list li > span:first-child { color: var(--ink, #16181d); white-space: nowrap; }
.igl-plan__list li > span:last-child { margin-left: auto; color: var(--body, #565961); text-align: right; }
.igl-no { font-size: 16px; color: var(--muted, #8a8d94); }
.igl a.igl-plan__cta { display: block; margin-top: 18px; color: var(--white, #fff); text-decoration: none; }
.igl a.igl-plan__cta:hover { color: var(--white, #fff); }
.igl p.igl-note { margin-top: 14px; font-size: 13.5px; color: var(--muted, #8a8d94); }

/* ---------------------------------------------------------------- 8. questions */
.igl-faq__list { max-width: 820px; margin-top: 10px; }
.igl-faq__item { padding: 18px 0; border-bottom: 1px solid var(--border, #eceae6); }
.igl-faq__item:last-child { border-bottom: 0; }
.igl h3.igl-faq__q { margin-bottom: 6px; font-size: 16.5px; }
.igl-faq__a { font-size: 15.5px; }

/* ---------------------------------------------------------------- 9. the article */
.igl-prose > * { max-width: 72ch; }
.igl-prose h2 { margin-bottom: 16px; }
.igl-prose h3 { margin: 30px 0 8px; font-size: 19px; }
.igl-prose p { margin: 0 0 14px; font-size: 16.5px; }
.igl-prose ul { margin: 0 0 14px; padding-left: 22px; color: var(--body, #565961); }
.igl-prose li { margin: 5px 0; font-size: 16px; }
.igl-prose li::marker { color: var(--red, #d32b25); }

/* ---------------------------------------------------------------- phones and tablets */
@media (max-width: 960px) {
  .igl-examples__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .igl-steps { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .igl-plans__grid, .igl-cards { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .igl-section { padding: 32px 0; }
  .igl-lead { font-size: 16px; }
  .igl-examples__list { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .igl-examples__item { min-height: 0; }
  .igl-group__head { padding: 12px 16px; }
  .igl-group__cols { grid-template-columns: minmax(0, 1fr); padding: 2px 16px 14px; }
  .igl-card, .igl-plan { padding: 18px 16px; }
  .igl-prose p { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .igl-group__body, .igl-group__inner, .igl-group__arrow, .igl-examples__item { transition: none; }
}