/* GPT Image 2.5 plain-English guide — page-specific styles.
   Dark slate to sit with the rest of the site; teal accent borrowed from the
   source document so the guide reads as its own thing. */

:root {
  --gi-bg: #0a0a12;
  --gi-bg-alt: #0d0d17;
  --gi-card: #12121d;
  --gi-line: rgba(255, 255, 255, 0.09);
  --gi-accent: #2dd4bf;
  --gi-accent-dim: rgba(45, 212, 191, 0.10);
  --gi-accent-line: rgba(45, 212, 191, 0.32);
  --gi-text: #f1f5f9;
  --gi-2: #94a3b8;
  --gi-3: #64748b;
  --gi-bad: #fca5a5;
  --gi-good: #6ee7b7;
  --gi-warn: #fcd34d;
  --gi-r: 14px;
}

*, *::before, *::after { box-sizing: border-box; }

.gi-body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--gi-bg);
  color: var(--gi-text);
  line-height: 1.65;
  margin: 0;
}
.gi-wrap { max-width: 920px; margin: 0 auto; padding: 0 24px; width: 100%; }
.gi-main img { max-width: 100%; }

/* --- Hero --------------------------------------------------------------- */
.gi-hero { padding: 60px 0 56px; border-bottom: 1px solid var(--gi-line); }
.gi-crumbs { font-size: 13px; color: var(--gi-3); margin-bottom: 20px; }
.gi-crumbs a { color: var(--gi-2); text-decoration: none; }
.gi-crumbs a:hover { color: var(--gi-text); }
.gi-eyebrow {
  display: inline-block;
  font-size: 11px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--gi-accent); background: var(--gi-accent-dim);
  border: 1px solid var(--gi-accent-line); border-radius: 999px;
  padding: 6px 14px; margin-bottom: 18px;
}
.gi-hero h1 {
  font-size: clamp(32px, 6vw, 52px); font-weight: 800; letter-spacing: -1.2px;
  line-height: 1.08; margin: 0 0 14px;
}
.gi-hero__sub { font-size: clamp(16px, 2.2vw, 19px); color: var(--gi-2); margin: 0 0 32px; max-width: 620px; }
.gi-hero__note { font-size: 12.5px; color: var(--gi-3); line-height: 1.6; margin: 14px 0 0; }

/* --- Sections ----------------------------------------------------------- */
.gi-part { padding: 56px 0; border-bottom: 1px solid var(--gi-line); }
.gi-part--alt { background: var(--gi-bg-alt); }
.gi-part__label {
  font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  color: var(--gi-accent); margin: 0 0 10px;
}
.gi-part h2 {
  font-size: clamp(24px, 4vw, 34px); font-weight: 800; letter-spacing: -0.6px;
  margin: 0 0 12px; line-height: 1.2;
}
.gi-part h3 {
  font-size: 18px; font-weight: 700; margin: 40px 0 14px;
  padding-bottom: 10px; border-bottom: 1px solid var(--gi-line);
}
.gi-lede { font-size: 16px; color: var(--gi-2); margin: 0 0 30px; max-width: 680px; }
.gi-fine { font-size: 13.5px; margin-top: 14px; }
.gi-part p { color: var(--gi-2); }
.gi-part p strong, .gi-part li strong { color: var(--gi-text); font-weight: 700; }

/* --- Two model cards ---------------------------------------------------- */
.gi-models { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.gi-model {
  background: var(--gi-card); border: 1px solid var(--gi-line);
  border-radius: var(--gi-r); padding: 22px;
}
.gi-model__tag {
  display: inline-block; font-size: 10.5px; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase;
  border-radius: 999px; padding: 5px 11px; margin-bottom: 14px;
}
.gi-model--flare .gi-model__tag { color: #93c5fd; background: rgba(147, 197, 253, 0.12); border: 1px solid rgba(147, 197, 253, 0.28); }
.gi-model--sun .gi-model__tag { color: #fdba74; background: rgba(253, 186, 116, 0.12); border: 1px solid rgba(253, 186, 116, 0.28); }
.gi-model h4 { font-size: 17px; font-weight: 700; margin: 0 0 8px; color: var(--gi-text); }
.gi-model p { font-size: 14.5px; margin: 0 0 14px; }
.gi-model ul { margin: 0; padding-left: 18px; }
.gi-model li { font-size: 14px; color: var(--gi-2); margin-bottom: 6px; }

/* --- Definition rows and tables ----------------------------------------- */
.gi-defs { border-top: 1px solid var(--gi-line); }
.gi-defs > div {
  display: grid; grid-template-columns: 210px 1fr; gap: 20px;
  padding: 16px 4px; border-bottom: 1px solid var(--gi-line);
}
.gi-defs dt, .gi-defs b { font-size: 14.5px; font-weight: 700; color: var(--gi-text); }
.gi-defs p { font-size: 14.5px; margin: 0; }

.gi-tbl { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.gi-tbl th {
  text-align: left; font-weight: 700; font-size: 12.5px;
  letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--gi-text); background: rgba(45, 212, 191, 0.10);
  padding: 11px 14px; border-bottom: 1px solid var(--gi-accent-line);
}
.gi-tbl td { padding: 13px 14px; border-bottom: 1px solid var(--gi-line); color: var(--gi-2); vertical-align: top; }
.gi-tbl td:first-child { color: var(--gi-text); font-weight: 600; white-space: nowrap; }
.gi-tbl--wrap td:first-child { white-space: normal; font-weight: 400; color: var(--gi-2); }
.gi-scroll { overflow-x: auto; }

/* --- Callout ------------------------------------------------------------ */
.gi-note {
  background: rgba(252, 211, 77, 0.06); border: 1px solid rgba(252, 211, 77, 0.22);
  border-radius: 12px; padding: 16px 18px; margin: 26px 0 0; font-size: 14.5px;
}
.gi-note b { color: var(--gi-warn); }
.gi-note p { margin: 0; }

/* --- Habit cards -------------------------------------------------------- */
.gi-habit {
  background: var(--gi-card); border: 1px solid var(--gi-line);
  border-radius: var(--gi-r); padding: 22px; margin-bottom: 14px;
}
.gi-habit__head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.gi-habit__n {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--gi-accent); color: #04201c;
  font-size: 13px; font-weight: 800;
}
.gi-habit h4 { font-size: 17px; font-weight: 700; margin: 0; color: var(--gi-text); }
.gi-habit p { font-size: 14.5px; margin: 0; }

/* Vague / specific comparison pair */
.gi-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }
.gi-pair > div { border-radius: 11px; padding: 14px 16px; }
.gi-pair__bad { background: rgba(248, 113, 113, 0.06); border: 1px solid rgba(248, 113, 113, 0.20); }
.gi-pair__good { background: rgba(52, 211, 153, 0.06); border: 1px solid rgba(52, 211, 153, 0.20); }
.gi-pair span {
  display: block; font-size: 10.5px; font-weight: 700;
  letter-spacing: 1.3px; text-transform: uppercase; margin-bottom: 7px;
}
.gi-pair__bad span { color: var(--gi-bad); }
.gi-pair__good span { color: var(--gi-good); }
.gi-pair p { font-size: 14px; margin: 0; color: var(--gi-2); }
.gi-pair--one { grid-template-columns: 1fr; }

/* --- Figures ------------------------------------------------------------ */
.gi-figs { display: grid; gap: 18px; margin: 24px 0 0; }
.gi-figs--2 { grid-template-columns: 1fr 1fr; }
.gi-figs--3 { grid-template-columns: repeat(3, 1fr); }
.gi-fig { margin: 0; }
/* place-items + object-fit:contain keeps tiles a uniform height without
   cropping a diagram or a slide to fit the box. */
.gi-fig__media {
  background: var(--gi-card); border: 1px solid var(--gi-line);
  border-radius: 12px; overflow: hidden;
  display: grid; place-items: center; padding: 10px;
}
.gi-fig__media--tile { aspect-ratio: 3 / 4; }
/* White chip for assets that are transparent or drawn on white — dark-on-
   transparent artwork disappears against the page background. */
.gi-fig__media--light { background: #fff; border-color: rgba(255, 255, 255, 0.16); }
.gi-fig__media img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; }
.gi-fig figcaption { margin-top: 10px; font-size: 13px; color: var(--gi-3); line-height: 1.5; }
.gi-fig figcaption b { display: block; color: var(--gi-text); font-size: 14px; font-weight: 700; margin-bottom: 2px; }
.gi-figlabel {
  font-size: 10.5px; font-weight: 700; letter-spacing: 1.3px;
  text-transform: uppercase; color: var(--gi-3); margin: 0 0 8px;
}

/* Before → after rows */
.gi-ba { margin-top: 22px; }
.gi-ba__prompt {
  font-size: 14px; color: var(--gi-2); font-style: italic;
  border-left: 2px solid var(--gi-accent-line); padding-left: 14px; margin: 0 0 16px;
}
.gi-ba__row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; }
.gi-ba__row--three { grid-template-columns: 1fr auto 1fr auto 1fr; }
.gi-ba__arrow { color: var(--gi-accent); font-size: 22px; line-height: 1; }

/* --- Checks and takeaways ----------------------------------------------- */
.gi-checks { list-style: none; padding: 0; margin: 0; }
.gi-checks li {
  display: flex; gap: 13px; align-items: flex-start;
  background: var(--gi-card); border: 1px solid var(--gi-line);
  border-radius: 12px; padding: 16px 18px; margin-bottom: 10px;
  font-size: 14.5px; color: var(--gi-2);
}
.gi-checks li::before {
  content: '\2713'; flex: none;
  width: 22px; height: 22px; border-radius: 6px;
  display: grid; place-items: center;
  background: var(--gi-accent); color: #04201c; font-size: 13px; font-weight: 800;
}
.gi-checks b { color: var(--gi-text); }

.gi-take { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.gi-take > div {
  background: var(--gi-card); border: 1px solid var(--gi-line);
  border-radius: 12px; padding: 18px 20px;
}
.gi-take h4 { font-size: 16px; font-weight: 700; margin: 0 0 6px; color: var(--gi-text); }
.gi-take p { font-size: 14px; margin: 0; }

/* --- Source box and footer ---------------------------------------------- */
.gi-source {
  background: var(--gi-accent-dim); border: 1px solid var(--gi-accent-line);
  border-left-width: 3px; border-radius: 12px; padding: 18px 20px; margin-top: 30px;
}
.gi-source b { display: block; color: var(--gi-text); font-size: 15px; margin-bottom: 6px; }
.gi-source a { color: var(--gi-accent); font-size: 14px; word-break: break-all; }
.gi-source p { font-size: 13.5px; color: var(--gi-3); margin: 8px 0 0; }

.gi-attrib {
  font-size: 12.5px; color: var(--gi-3); text-align: center;
  padding: 26px 24px; margin: 0; line-height: 1.6;
}

/* --- CTA ---------------------------------------------------------------- */
.gi-cta { text-align: center; padding: 56px 0; }
.gi-cta h2 { font-size: clamp(22px, 3.4vw, 30px); font-weight: 800; margin: 0 0 10px; }
.gi-cta p { font-size: 15.5px; margin: 0 auto 22px; max-width: 520px; }
.gi-btn {
  display: inline-block; background: var(--gi-accent); color: #04201c;
  font-size: 15px; font-weight: 700; text-decoration: none;
  border-radius: 10px; padding: 13px 26px;
  transition: transform .16s ease, box-shadow .16s ease;
}
.gi-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(45, 212, 191, 0.22); }

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 860px) {
  .gi-figs--3 { grid-template-columns: 1fr 1fr; }
  .gi-defs > div { grid-template-columns: 1fr; gap: 4px; }
}
@media (max-width: 620px) {
  .gi-hero { padding: 40px 0 36px; }
  .gi-part { padding: 40px 0; }
  .gi-models, .gi-pair, .gi-take, .gi-figs--2, .gi-figs--3 { grid-template-columns: 1fr; }
  /* Stack the before/after pair and turn the arrow a quarter-turn so the
     reading order still runs original → result. */
  .gi-ba__row, .gi-ba__row--three { grid-template-columns: 1fr; }
  .gi-ba__arrow { transform: rotate(90deg); justify-self: center; }
}