/*!
 * IronGuardWP — design system
 * Hand-written, no build step, no framework.
 * Token + class contract: THEME_CONTRACT.md §2 and §3. Values taken from template/*.dc.html.
 */

/* ==========================================================================
   1. Tokens  (THEME_CONTRACT §2)
   ========================================================================== */

:root{
  /* Surfaces / text — dark is the default mode */
  --bg:#050B16;
  --card:#0A1628;
  --line:#122240;
  --text:#B8C4D4;
  --muted:#7B8CA6;      /* LIFTED from #6B7B92 — see contrast note below */
  --head:#F7FAFC;
  --inset:#0D1B33;

  /* Fixed brand colours — identical in both themes */
  --brand:#0B57C9;
  --brand-hover:#1E90FF;
  --accent:#38BDF8;
  --ok:#16A34A;
  --warn:#D97706;
  --bad:#DC2626;

  /* Ink variants: same semantics, but safe as TEXT in this theme.
     --accent / --ok / --warn / --bad above stay exactly as the contract fixes
     them and are used for borders, rules and marks. */
  --link:#1E90FF;
  --accent-ink:#38BDF8;
  --ok-ink:#16A34A;
  --warn-ink:#D97706;
  --bad-ink:#F87171;
  --on-brand:#F7FAFC;

  /* Pill inks. A tinted pill is NOT plain --card: rgba(...,.08) composited over
     the page background shifts the fill, and the fill is lighter over --bg than
     over --card, so the worst case governs. Dark mode needs no change
     (5.03 / 5.24 / 6.33 on the worst fill); light mode does — see below. */
  --ok-pill-ink:var(--ok-ink);
  --warn-pill-ink:var(--warn-ink);
  --bad-pill-ink:var(--bad-ink);

  /* Signature gradient — DECORATIVE surfaces only: borders, rules, marks,
     icons, hero decoration. Its cyan terminus #38BDF8 measures 2.04:1 against
     #F7FAFC, so nothing with text on top of it may use this. */
  --grad:linear-gradient(135deg,#0B57C9,#38BDF8);

  /* CTA gradient — every gradient surface that carries TEXT.
     Same hue family, same 135deg, end stop darkened to the lightest blue on the
     #0B57C9 -> #38BDF8 ramp that still clears AA against #F7FAFC.
     Measured (sRGB, WCAG 2.1) against --on-brand #F7FAFC:
       start #0B57C9  6.22:1
       end   #166FD4  4.71:1   <- lightest passing stop (#1E90FF is 3.09:1)
     Luminance is monotonic between the stops, so the WORST point anywhere on
     the button is 4.71:1. THEME_CONTRACT §2, amended. */
  --grad-cta:linear-gradient(135deg,#0B57C9,#166FD4);

  /* Type */
  --font-sans:'Geist',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* Metrics lifted from the artboards */
  --shell:1180px;
  --gutter:32px;
  --radius-sm:8px;
  --radius:10px;
  --radius-md:12px;
  --radius-lg:14px;
  --radius-pill:99px;
  --header-h:72px;
}

/* --muted contrast note (measured, sRGB, WCAG 2.1):
   the contract's #6B7B92 on --card #0A1628 measures 4.21:1 and FAILS AA body text.
   §4 says lift the token rather than ship it. #7B8CA6 measures 5.31:1 on --card
   and 5.75:1 on --bg. Light mode's #61708A on #FFFFFF measures 5.01:1 and is kept. */

[data-theme="light"]{
  --bg:#F7FAFC;
  --card:#FFFFFF;
  --line:#D9E2EE;
  --text:#3A4A60;
  --muted:#61708A;
  --head:#0A1628;
  --inset:#EAF0F8;

  /* Ink swaps — the fixed brand hues are too light to read on white */
  --link:#0B57C9;        /* 6.52:1 on #FFFFFF ( #1E90FF measures 3.24:1 ) */
  --accent-ink:#0B57C9;  /* #38BDF8 measures 2.14:1 on #FFFFFF */
  --ok-ink:#15803D;      /* 5.02:1  ( #16A34A measures 3.30:1 ) */
  --warn-ink:#B45309;    /* 5.02:1  ( #D97706 measures 2.98:1 ) */
  --bad-ink:#B91C1C;     /* 6.47:1 */

  /*
   * Measured on the composited pill fill, worst backdrop (--bg #F7FAFC):
   *   --ok-ink   #15803D on #E5F3EE = 4.39:1  FAILS  ->  #137638 = 5.00:1
   *   --warn-ink #B45309 on #F5F0E8 = 4.43:1  FAILS  ->  #A64D08 = 5.02:1
   *   --bad-ink  #B91C1C on #F5E9EB = 5.46:1  passes -> unchanged
   * Over --card #FFFFFF the originals measured 4.60 / 4.61 — which is why this
   * reads as fine by eye and only shows up when you composite the tint.
   */
  --ok-pill-ink:#137638;
  --warn-pill-ink:#A64D08;
  --bad-pill-ink:#B91C1C;
}

/* ==========================================================================
   2. Reset / base
   ========================================================================== */

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

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
html:focus-within{scroll-padding-top:calc(var(--header-h) + 16px);}

body{
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-sans);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;              /* §4 — never a horizontal body scroll */
}

img,svg,video,canvas{max-width:100%;height:auto;display:block;}

a{color:var(--link);text-decoration:none;}
a:hover{color:var(--accent-ink);}

/*
 * WCAG 1.4.1 — an inline link inside running text must not be distinguished by
 * colour alone unless it clears 3:1 against the SURROUNDING text. Measured:
 *   dark   --link #1E90FF vs --text #B8C4D4 = 1.83:1
 *   light  --link #0B57C9 vs --text #3A4A60 = 1.38:1
 * Nowhere near 3:1, and no hue in this palette gets there while still clearing
 * 4.5:1 against the background. So body links are UNDERLINED, which removes the
 * requirement entirely and is the convention in prose anyway.
 *
 * Navigation, buttons, cards, pills and link-lists are distinguished by
 * position and shape rather than colour, so they stay undecorated (below).
 */
.ig-prose a,
.ig-lede a,
.ig-note a,
.ig-faq a,
.ig-plan__desc a,
.ig-plan__lead a,
.ig-plan__alt a,
.ig-plan__note a,
.ig-stat__label a,
.ig-stat__note a,
.ig-verbatim a,
.ig-source-links a,
.ig-table td a,
.ig-list--check a,
.ig-list--dash a,
.ig-band p a,
p a{
  text-decoration:underline;
  text-underline-offset:.18em;
  text-decoration-thickness:from-font;
}
.ig-prose a:hover,
.ig-lede a:hover,
.ig-note a:hover,
p a:hover{text-decoration-thickness:2px;}

/* Chrome and controls: shape and position carry the affordance, not colour. */
.ig-btn,
.ig-skip,
.ig-pill,
.ig-header__brand,
.ig-nav a,
.ig-mobile-nav a,
.ig-footer__col a,
.ig-list--docs a,
.ig-pagination a,
.ig-pagination .page-numbers,
.ig-billing-toggle__btn,
a.ig-card{text-decoration:none;}

h1,h2,h3,h4,h5,h6{color:var(--head);text-wrap:pretty;}
p{text-wrap:pretty;}

button,input,select,textarea{font:inherit;color:inherit;}

hr{border:0;border-top:1px solid var(--line);margin:40px 0;}

::selection{background:#0B57C9;color:#F7FAFC;}

code,kbd,samp,pre{font-family:var(--font-mono);font-size:.92em;}

/* Visible focus everywhere — WCAG 2.1 AA (§4) */
:focus-visible{
  outline:2px solid var(--brand-hover);
  outline-offset:2px;
  border-radius:4px;
}
:focus:not(:focus-visible){outline:none;}

.ig-sr-only{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;border:0;
}

/* Skip link */
.ig-skip{
  position:absolute;
  left:-9999px;top:0;
  z-index:200;
  padding:12px 20px;
  background:var(--card);
  color:var(--head);
  border:1px solid var(--brand-hover);
  border-radius:0 0 var(--radius) 0;
  font-weight:600;
}
.ig-skip:focus{left:0;}

/* ==========================================================================
   3. Layout  (THEME_CONTRACT §3)
   ========================================================================== */

.ig-shell{
  max-width:var(--shell);
  margin:0 auto;
  padding:0 var(--gutter);
  width:100%;
}

.ig-section{
  padding-block:80px;
  border-bottom:1px solid var(--line);
}
.ig-section--tight{padding-block:56px;}
.ig-section--hero{padding-block:88px 96px;}
.ig-section--flush{border-bottom:0;}
.ig-section--card{background:var(--card);}
.ig-section--narrow > .ig-shell{max-width:860px;}

/* Grids. §3: EVERY .ig-grid* defines a base single-column track and only widens
   at a breakpoint. A grid whose only column rule lives behind a media query
   sizes its implicit track to max-content and scrolls sideways on mobile. */
.ig-grid{
  display:grid;
  grid-template-columns:1fr;            /* base track — mandatory */
  gap:24px;
  align-items:start;
}
.ig-grid--2,
.ig-grid--3,
.ig-grid--4{grid-template-columns:1fr;} /* explicit base track for every modifier */
.ig-grid--stretch{align-items:stretch;}
.ig-grid--wide{gap:64px;}
.ig-grid--center{align-items:center;}

@media (min-width:700px){
  .ig-grid--2{grid-template-columns:repeat(2,minmax(0,1fr));}
  .ig-grid--4{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (min-width:900px){
  .ig-grid--3{grid-template-columns:repeat(3,minmax(0,1fr));}
  .ig-grid--4{grid-template-columns:repeat(4,minmax(0,1fr));}
}
@media (min-width:960px){
  .ig-grid--split{grid-template-columns:1.05fr .95fr;}
  .ig-grid--split-even{grid-template-columns:1fr 1fr;}
}

/* Anything that could out-grow its column */
.ig-scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;}

/* ==========================================================================
   4. Typography  (THEME_CONTRACT §3)
   ========================================================================== */

.ig-h1{
  margin:0 0 20px;
  font-size:clamp(34px,6.2vw,52px);
  line-height:1.08;
  letter-spacing:-.02em;
  font-weight:800;
  color:var(--head);
}
.ig-h2{
  margin:0 0 12px;
  font-size:clamp(26px,4.2vw,32px);
  line-height:1.18;
  letter-spacing:-.02em;
  font-weight:700;
  color:var(--head);
}
.ig-h3{
  margin:0 0 8px;
  font-size:clamp(17px,2.2vw,19px);
  line-height:1.35;
  font-weight:600;
  color:var(--head);
}

.ig-lede{
  margin:0 0 32px;
  font-size:19px;
  line-height:1.6;
  max-width:34em;
  color:var(--text);
}

.ig-eyebrow{
  display:block;
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--accent-ink);
  margin:0 0 10px;
}

.ig-muted{color:var(--muted);}
.ig-mono{font-family:var(--font-mono);font-size:.92em;}

.ig-stat{
  font-size:40px;
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.1;
  color:var(--head);
}

.ig-prose > :first-child{margin-top:0;}
.ig-prose > :last-child{margin-bottom:0;}
.ig-prose p,.ig-prose li{max-width:70ch;}
.ig-prose h2{margin-top:44px;}
.ig-prose h3{margin-top:32px;}
.ig-prose ul,.ig-prose ol{padding-left:1.25em;}
.ig-prose li{margin:.4em 0;}
.ig-prose blockquote{
  margin:24px 0;padding:4px 0 4px 20px;
  border-left:3px solid var(--brand);color:var(--muted);
}
.ig-prose pre{
  background:var(--inset);border:1px solid var(--line);
  border-radius:var(--radius);padding:18px 20px;overflow-x:auto;
}
.ig-prose :not(pre) > code{
  background:var(--inset);border:1px solid var(--line);
  border-radius:5px;padding:2px 6px;
}
.ig-prose img{border-radius:var(--radius-md);}

/* ==========================================================================
   5. Cards, pills, notes
   ========================================================================== */

.ig-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:28px;
  transition:border-color .18s ease;
}
.ig-card--link:hover,
a.ig-card:hover{border-color:var(--brand-hover);}
.ig-card--inset{background:var(--inset);}
.ig-card--flush{padding:0;}
.ig-card--rule{
  background:transparent;border:0;border-top:2px solid var(--brand);
  border-radius:0;padding:20px 0 0;
}

.ig-pill{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:12px;
  line-height:1.5;
  color:var(--accent-ink);
  border:1px solid var(--line);
  background:transparent;
  padding:4px 12px;
  border-radius:var(--radius-pill);
  white-space:nowrap;
}
.ig-pill--ok{color:var(--ok-pill-ink);border-color:rgba(22,163,74,.4);background:rgba(22,163,74,.08);}
.ig-pill--warn{color:var(--warn-pill-ink);border-color:rgba(217,119,6,.4);background:rgba(217,119,6,.08);}
.ig-pill--bad{color:var(--bad-pill-ink);border-color:rgba(220,38,38,.4);background:rgba(220,38,38,.08);}
.ig-pill--brand{
  color:var(--on-brand);border-color:transparent;
  background:var(--grad-cta);font-family:var(--font-sans);
  font-weight:700;font-size:12px;padding:4px 14px;
}

.ig-note{
  display:flex;
  gap:16px;
  align-items:flex-start;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:22px 28px;
  font-size:15px;
}
.ig-note > :first-child{margin-top:0;}
.ig-note > :last-child{margin-bottom:0;}
.ig-note__label{
  flex-shrink:0;
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:600;
  margin-top:2px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.04em;
}
.ig-note--warn{border-color:var(--warn);}
.ig-note--warn .ig-note__label{color:var(--warn-ink);}
.ig-note--info{border-color:var(--brand-hover);}
.ig-note--info .ig-note__label{color:var(--link);}

/* Matrix yes/no marks — status colour is functional only (§2) */
.ig-check,
.ig-dash{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:15px;
  line-height:1;
  font-weight:600;
}
.ig-check{color:var(--ok-ink);}
.ig-dash{color:var(--muted);}
/* Templates may emit an empty <span class="ig-check"> and let CSS supply the
   glyph. Both forms work. */
.ig-check:empty::before{content:'\2713';}
.ig-dash:empty::before{content:'\2014';}

/* ==========================================================================
   6. Buttons
   ========================================================================== */

.ig-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 24px;
  border-radius:9px;
  border:1px solid transparent;
  font-family:inherit;
  font-size:16px;
  font-weight:600;
  line-height:1.25;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  background:transparent;
  color:var(--head);
  transition:filter .16s ease,border-color .16s ease,background-color .16s ease;
  -webkit-appearance:none;
  appearance:none;
}
.ig-btn:hover{color:var(--head);}

.ig-btn--primary{
  background:var(--grad-cta);
  color:var(--on-brand);
  border-color:transparent;
}
.ig-btn--primary:hover{filter:brightness(1.12);color:var(--on-brand);}

.ig-btn--ghost{
  border-color:var(--brand-hover);
  color:var(--link);
  background:transparent;
}
.ig-btn--ghost:hover{background:rgba(30,144,255,.10);color:var(--link);}

.ig-btn--outline{border-color:var(--line);color:var(--head);}
.ig-btn--outline:hover{border-color:var(--brand-hover);color:var(--head);}

.ig-btn--lg{padding:15px 32px;font-size:17px;border-radius:var(--radius);}
.ig-btn--block{display:flex;width:100%;}

/* The CTA gradient already clears AA at every point. This flattens it to the
   solid brand blue (6.22:1) for anyone who asks for more contrast still. */
@media (prefers-contrast:more){
  .ig-btn--primary{background:var(--brand);}
  .ig-pill--brand,.ig-plan__badge{background:var(--brand);}
  .ig-band{background:var(--brand);}
}

/* ==========================================================================
   7. Tables  (feature matrix — §4 hard case)
   ========================================================================== */

.ig-table-wrap{
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  overflow:hidden;
  background:var(--bg);
}

.ig-table{
  width:100%;
  border-collapse:collapse;
  font-size:15px;
  background:var(--bg);
}
.ig-table th,
.ig-table td{text-align:left;padding:14px 20px;vertical-align:top;}
.ig-table thead th{
  color:var(--muted);
  font-weight:500;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.ig-table thead th.ig-table__tier{
  text-align:center;
  padding:16px 14px;
  color:var(--head);
  font-weight:600;
  font-size:15px;
  text-transform:none;
  letter-spacing:0;
}
.ig-table thead th.ig-table__tier--featured{color:var(--accent-ink);font-weight:700;}
.ig-table thead tr{border-bottom:1px solid var(--line);}
.ig-table tbody tr + tr{border-top:1px solid var(--line);}
.ig-table td.ig-table__mark{text-align:center;padding:13px 14px;white-space:nowrap;}
.ig-table td.ig-table__name{color:var(--head);font-weight:500;}
.ig-table caption{
  caption-side:top;text-align:left;padding:0 0 12px;
  color:var(--muted);font-size:14px;
}

/* Under 760px the matrix restructures to stacked per-row cards instead of
   scrolling the page. Markup pattern: each mark td carries data-label="Free". */
@media (max-width:759px){
  .ig-table--stack,
  .ig-table--stack thead,
  .ig-table--stack tbody,
  .ig-table--stack tr,
  .ig-table--stack th,
  .ig-table--stack td{display:block;width:auto;}
  .ig-table--stack thead{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
  }
  .ig-table--stack tbody tr{padding:18px 20px;}
  .ig-table--stack tbody tr + tr{border-top:1px solid var(--line);}
  .ig-table--stack td{padding:4px 0;}
  .ig-table--stack td.ig-table__name{font-size:16px;padding-bottom:6px;}
  .ig-table--stack td.ig-table__mark{
    text-align:left;
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    border-top:1px dashed var(--line);padding:8px 0 0;margin-top:8px;
  }
  .ig-table--stack td.ig-table__mark::before{
    content:attr(data-label);
    color:var(--muted);font-size:13px;
    text-transform:uppercase;letter-spacing:.06em;
  }
}

/* ==========================================================================
   8. FAQ  (details/summary — keyboard operable by construction)
   ========================================================================== */

.ig-faq{display:flex;flex-direction:column;gap:12px;}

.ig-faq details{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:0 22px;
}
.ig-faq details[open]{border-color:var(--brand-hover);}
.ig-faq summary{
  cursor:pointer;
  padding:18px 0;
  font-weight:600;
  color:var(--head);
  font-size:16px;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.ig-faq summary::-webkit-details-marker{display:none;}
.ig-faq summary::marker{content:'';}
.ig-faq summary::after{
  content:'+';
  flex-shrink:0;
  font-family:var(--font-mono);
  font-size:18px;
  line-height:1;
  color:var(--accent-ink);
}
.ig-faq details[open] summary::after{content:'\2212';}
.ig-faq summary:focus-visible{outline:2px solid var(--brand-hover);outline-offset:2px;}
.ig-faq p,
.ig-faq .ig-faq__a{margin:0;padding:0 0 20px;font-size:15px;}

/* ==========================================================================
   9. Pricing  (THEME_CONTRACT §3 + §5)
   ========================================================================== */

.ig-price-grid{
  display:grid;
  grid-template-columns:1fr;              /* base track — mandatory */
  gap:24px;
  align-items:stretch;
}
@media (min-width:960px){
  .ig-price-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}

.ig-plan{
  position:relative;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:36px 32px;
  display:flex;
  flex-direction:column;
}
.ig-plan__name{font-weight:600;color:var(--head);font-size:18px;}
.ig-plan__price{
  margin:10px 0 2px;
  font-size:44px;
  font-weight:800;
  color:var(--head);
  letter-spacing:-.02em;
  line-height:1.05;
}
.ig-plan__price small,
.ig-plan__period{
  display:block;
  font-size:14px;
  font-weight:500;
  color:var(--muted);
  letter-spacing:0;
}
.ig-plan__desc{margin:18px 0 0;font-size:15px;}
.ig-plan__list{
  margin:18px 0 0;
  padding:0;
  list-style:none;
  font-size:15px;
  display:flex;
  flex-direction:column;
  gap:9px;
  flex:1;
}
.ig-plan__list li{display:flex;gap:10px;align-items:flex-start;}
.ig-plan .ig-btn{margin-top:24px;width:100%;padding:13px 20px;}

/* Featured plan: gradient border via a double background, as the artboard does */
.ig-plan--featured{
  border:2px solid transparent;
  background-image:linear-gradient(var(--card),var(--card)),var(--grad);
  background-origin:border-box;
  background-clip:padding-box,border-box;
}
.ig-plan__badge{
  position:absolute;
  top:-13px;
  left:50%;
  transform:translateX(-50%);
  background:var(--grad-cta);
  color:var(--on-brand);
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
  padding:4px 14px;
  border-radius:var(--radius-pill);
  white-space:nowrap;
}

/* Billing toggle — must work with JS off: yearly is the server-rendered default */
.ig-billing-toggle{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px;
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  background:var(--card);
}
.ig-billing-toggle__btn{
  border:0;
  background:transparent;
  color:var(--muted);
  font-size:14px;
  font-weight:600;
  padding:8px 18px;
  border-radius:var(--radius-pill);
  cursor:pointer;
  white-space:nowrap;
  transition:background-color .16s ease,color .16s ease;
}
.ig-billing-toggle__btn:hover{color:var(--head);}
/*
 * Selected state. Agent B renders the options as real <a> links so the page
 * works without JavaScript, and aria-pressed is invalid ARIA on a link — so
 * aria-current is the hook. aria-pressed/aria-checked stay supported in case a
 * <button> implementation appears later.
 *
 * Not colour alone (WCAG 1.4.1): the selected option also changes WEIGHT
 * (600 -> 700) and gains a ring, so it is still distinguishable in greyscale
 * and to anyone who cannot separate the two hues.
 */
.ig-billing-toggle__btn[aria-current="true"],
.ig-billing-toggle__btn[aria-current="page"],
.ig-billing-toggle__btn[aria-pressed="true"],
.ig-billing-toggle__btn[aria-checked="true"]{
  background:var(--grad-cta);
  color:var(--on-brand);
  font-weight:700;
  box-shadow:inset 0 0 0 1px rgba(247,250,252,.30);
}
.ig-billing-toggle__btn[aria-current="true"]:hover,
.ig-billing-toggle__btn[aria-current="page"]:hover{
  color:var(--on-brand);
  filter:brightness(1.12);
}

/* Visible focus ring, consistent with the rest of the site. The offset is
   pulled in to 1px so the ring is not clipped by the 4px toggle housing. */
.ig-billing-toggle__btn:focus-visible{
  outline:2px solid var(--brand-hover);
  outline-offset:1px;
  border-radius:var(--radius-pill);
}
.ig-billing-toggle__save{
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--ok-ink);
  margin-left:6px;
}

/* Price / period swapping. Yearly renders server-side; JS flips data-billing on
   <html>. Both variants live in the DOM so nothing reflows on toggle.
   No-JS: only the yearly variant is ever visible. */
[data-price-monthly],
[data-period-monthly]{display:none;}
[data-billing="monthly"] [data-price-yearly],
[data-billing="monthly"] [data-period-yearly]{display:none;}
[data-billing="monthly"] [data-price-monthly],
[data-billing="monthly"] [data-period-monthly]{display:revert;}

/* ==========================================================================
   10. Site header
   ========================================================================== */

.ig-header{
  position:sticky;
  top:0;
  z-index:50;
  background:var(--bg);
  border-bottom:1px solid var(--line);
}
.ig-header__inner{
  max-width:var(--shell);
  margin:0 auto;
  padding:0 var(--gutter);
  min-height:var(--header-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.ig-header__brand{display:flex;align-items:center;flex-shrink:0;}
.ig-header__brand img{height:44px;width:auto;display:block;}
.ig-header__mark{display:none;}

.ig-nav{
  display:flex;
  align-items:center;
  gap:26px;
  font-size:15px;
  font-weight:500;
}
.ig-nav ul{
  display:flex;
  align-items:center;
  gap:26px;
  list-style:none;
  margin:0;
  padding:0;
}
.ig-nav a{color:var(--text);}
.ig-nav a:hover{color:var(--head);}
.ig-nav .current-menu-item > a,
.ig-nav .current_page_item > a,
.ig-nav [aria-current="page"]{color:var(--head);}
.ig-nav__login{color:var(--head);font-weight:500;}
.ig-nav__login:hover{color:var(--accent-ink);}

.ig-theme-toggle{
  width:36px;height:36px;
  flex-shrink:0;
  border-radius:var(--radius-sm);
  border:1px solid var(--line);
  background:transparent;
  color:var(--text);
  font-size:16px;
  line-height:1;
  cursor:pointer;
  display:grid;
  place-items:center;
  transition:border-color .16s ease,color .16s ease;
}
.ig-theme-toggle:hover{border-color:var(--brand-hover);color:var(--head);}

.ig-header__mobile-actions{display:none;align-items:center;gap:10px;}

.ig-nav-toggle{
  align-items:center;
  gap:9px;
  height:38px;
  padding:0 12px;
  border-radius:var(--radius-sm);
  border:1px solid var(--line);
  background:transparent;
  color:var(--text);
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  display:inline-flex;
}
.ig-nav-toggle:hover{border-color:var(--brand-hover);color:var(--head);}
.ig-nav-toggle__bars{
  position:relative;
  display:block;
  width:16px;height:2px;
  background:currentColor;
  border-radius:2px;
}
.ig-nav-toggle__bars::before,
.ig-nav-toggle__bars::after{
  content:'';position:absolute;left:0;
  width:16px;height:2px;background:currentColor;border-radius:2px;
}
.ig-nav-toggle__bars::before{top:-5px;}
.ig-nav-toggle__bars::after{top:5px;}
.ig-nav-toggle[aria-expanded="true"] .ig-nav-toggle__bars{background:transparent;}
.ig-nav-toggle[aria-expanded="true"] .ig-nav-toggle__bars::before{top:0;transform:rotate(45deg);}
.ig-nav-toggle[aria-expanded="true"] .ig-nav-toggle__bars::after{top:0;transform:rotate(-45deg);}

/* Mobile disclosure panel — the artboard has no mobile nav; this is ours. */
.ig-mobile-nav{
  display:block;
  border-top:1px solid var(--line);
  background:var(--bg);
  max-height:calc(100vh - var(--header-h));
  max-height:calc(100dvh - var(--header-h));
  overflow-y:auto;
}
.ig-mobile-nav[hidden]{display:none;}
.ig-mobile-nav__inner{
  max-width:var(--shell);
  margin:0 auto;
  padding:16px var(--gutter) 28px;
  display:flex;
  flex-direction:column;
}
.ig-mobile-nav ul{list-style:none;margin:0;padding:0;}
.ig-mobile-nav a{
  display:block;
  padding:13px 4px;
  color:var(--text);
  font-size:17px;
  font-weight:500;
  border-bottom:1px solid var(--line);
}
.ig-mobile-nav a:hover,
.ig-mobile-nav .current-menu-item > a,
.ig-mobile-nav .current_page_item > a,
.ig-mobile-nav [aria-current="page"]{color:var(--head);}
.ig-mobile-nav .ig-btn{margin-top:20px;width:100%;}

@media (max-width:899px){
  .ig-header__desktop-nav{display:none;}
  .ig-header__mobile-actions{display:flex;}
  .ig-header__brand img{height:38px;}
}
@media (min-width:900px){
  .ig-mobile-nav{display:none;}
}
@media (max-width:479px){
  :root{--gutter:20px;}
  .ig-header__full{display:none;}
  .ig-header__mark{display:block;height:36px;}
  /*
   * CRITICAL: this label is the button's ONLY accessible name — the bars span
   * is aria-hidden. display:none would strip it from the accessibility tree and
   * leave an unnamed button at exactly the width where it is the only way to
   * navigate. Visually hidden, never display:none.
   */
  .ig-nav-toggle__label{
    position:absolute !important;
    width:1px;height:1px;
    padding:0;margin:-1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    clip-path:inset(50%);
    white-space:nowrap;border:0;
  }
  .ig-nav-toggle{padding:0 11px;}
}

/* ==========================================================================
   11. Site footer
   ========================================================================== */

.ig-footer{
  background:var(--bg);
  border-top:1px solid var(--line);
  font-family:var(--font-sans);
}
.ig-footer__inner{
  max-width:var(--shell);
  margin:0 auto;
  padding:64px var(--gutter) 40px;
}
.ig-footer__cols{
  display:grid;
  grid-template-columns:1fr;              /* base track — mandatory */
  gap:32px 40px;
  font-size:14px;
}
@media (min-width:560px){.ig-footer__cols{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (min-width:900px){.ig-footer__cols{grid-template-columns:repeat(4,minmax(0,1fr));}}

.ig-footer__col{display:flex;flex-direction:column;gap:12px;}
.ig-footer__heading{
  font-weight:600;
  color:var(--head);
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.ig-footer__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;}
.ig-footer__col a{color:var(--text);}
.ig-footer__col a:hover{color:var(--accent-ink);}

.ig-footer__base{
  margin-top:56px;
  padding-top:28px;
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
}
.ig-footer__base img{height:36px;width:auto;}
.ig-footer__legal{
  font-size:13px;
  color:var(--muted);
  max-width:640px;
}
@media (min-width:700px){.ig-footer__legal{text-align:right;margin-left:auto;}}
.ig-footer__legal a{color:var(--muted);text-decoration:underline;}
.ig-footer__legal a:hover{color:var(--accent-ink);}

/* ==========================================================================
   12. Utilities used by page templates
   ========================================================================== */

.ig-center{text-align:center;}
.ig-flow > * + *{margin-top:16px;}
.ig-cta-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap;}
.ig-cta-row--center{justify-content:center;}
.ig-stack{display:flex;flex-direction:column;gap:12px;}
.ig-mt-0{margin-top:0;}
.ig-mb-0{margin-bottom:0;}
.ig-mt-32{margin-top:32px;}
.ig-mt-40{margin-top:40px;}
.ig-list-plain{list-style:none;padding:0;margin:0;}
.ig-measure{max-width:44em;}
.ig-measure-narrow{max-width:38em;}
.ig-mx-auto{margin-left:auto;margin-right:auto;}

.ig-band{background:var(--grad-cta);color:var(--on-brand);}
.ig-band .ig-h1,.ig-band .ig-h2,.ig-band h1,.ig-band h2{color:var(--on-brand);}
/* Full opacity, not rgba(...,.9): at 90% this composites to #E0ECF8, which
   measures 4.12:1 on the gradient's end stop and fails. */
.ig-band p{color:var(--on-brand);}
.ig-band .ig-btn{background:#050B16;color:#F7FAFC;border-color:transparent;}
.ig-band .ig-btn:hover{filter:brightness(1.3);color:#F7FAFC;}

/* Placeholder frames from the artboards (real product UI pending, website.md §15) */
.ig-placeholder{
  border:1px dashed var(--accent);
  border-radius:var(--radius-lg);
  background:repeating-linear-gradient(135deg,var(--card),var(--card) 14px,var(--inset) 14px,var(--inset) 28px);
  display:grid;
  place-items:center;
  padding:24px;
  text-align:center;
  font-family:var(--font-mono);
  font-size:13px;
  color:var(--muted);
  line-height:1.7;
}
.ig-placeholder--4x3{aspect-ratio:4/3;}
.ig-placeholder--16x10{aspect-ratio:16/10;}
.ig-placeholder--wide{aspect-ratio:21/9;}

/* Search form */
.ig-searchform{display:flex;gap:10px;max-width:520px;}
.ig-searchform input[type="search"]{
  flex:1;min-width:0;
  padding:12px 16px;
  border-radius:9px;
  border:1px solid var(--line);
  background:var(--inset);
  color:var(--head);
}
.ig-searchform input[type="search"]::placeholder{color:var(--muted);}

/* Post list */
.ig-postlist article{padding:28px 0;border-bottom:1px solid var(--line);}
.ig-postlist article:first-child{padding-top:0;}
.ig-meta{font-family:var(--font-mono);font-size:13px;color:var(--muted);}

.ig-pagination{display:flex;gap:8px;flex-wrap:wrap;margin-top:32px;}
.ig-pagination .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:40px;height:40px;padding:0 12px;
  border:1px solid var(--line);border-radius:var(--radius-sm);
  color:var(--text);
}
.ig-pagination .page-numbers:hover{border-color:var(--brand-hover);color:var(--head);}
.ig-pagination .page-numbers.current{background:var(--grad-cta);color:var(--on-brand);border-color:transparent;}

/* WordPress core alignment/caption classes */
.alignleft{float:left;margin:0 24px 16px 0;}
.alignright{float:right;margin:0 0 16px 24px;}
.aligncenter{margin-left:auto;margin-right:auto;}
.alignwide,.alignfull{max-width:100%;}
.wp-caption-text,figcaption{font-size:13px;color:var(--muted);margin-top:8px;}
.screen-reader-text{
  position:absolute !important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* Long unbroken strings (URLs, file paths) must not force a horizontal scroll */
p,li,td,th,dd,dt,h1,h2,h3,h4{overflow-wrap:anywhere;}

/* ==========================================================================
   12b. Classes the page templates use beyond THEME_CONTRACT §3
   --------------------------------------------------------------------------
   Pages agents B and C write markup against these. They are additions to §3,
   not replacements — everything in §3 above still stands. Anything added here
   must also be recorded in the contract.
   ========================================================================== */

.ig-main{display:block;}
.ig-main:focus{outline:none;}

/* A section that is a named anchor target must clear the sticky header. */
.ig-anchor,
[id]{scroll-margin-top:calc(var(--header-h) + 24px);}

.ig-shell--narrow{max-width:860px;}
.ig-section--alt{background:var(--card);}
.ig-section--pagehead{padding-block:72px 56px;}

.ig-small{font-size:14px;line-height:1.55;}

/* Button rows — the same thing as .ig-cta-row, under the name the pages use. */
.ig-btn-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap;}
.ig-btn-row--center{justify-content:center;}

/* Gradient display text. Falls back to a solid colour where background-clip
   is unsupported, and switches hue in light mode so the large text still
   clears 3:1 (the cyan terminus measures 2.14:1 on white). */
.ig-gradient-text{
  color:var(--accent-ink);
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
}
@supports (-webkit-background-clip:text) or (background-clip:text){
  .ig-gradient-text{-webkit-text-fill-color:transparent;}
}
[data-theme="light"] .ig-gradient-text{background:linear-gradient(135deg,#0B57C9,#1E90FF);}

/* Stat blocks */
.ig-stat__value{
  font-size:clamp(32px,5vw,40px);
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.1;
  color:var(--head);
  margin:0;
}
.ig-stat__label{margin:8px 0 0;font-size:15px;color:var(--text);}
.ig-stat__note{margin:10px 0 0;}

/* Lists ---------------------------------------------------------------- */

.ig-list{list-style:none;padding:0;margin:0;}
.ig-list:not(.ig-grid){display:flex;flex-direction:column;gap:10px;}
.ig-list > li{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;}
.ig-list--check > li > .ig-check,
.ig-list--dash > li > .ig-dash{flex-shrink:0;}
.ig-list--check > li strong,
.ig-list--dash > li strong{color:var(--head);font-weight:600;}
.ig-list--docs > li{
  justify-content:space-between;
  padding:9px 0;
  border-bottom:1px solid var(--line);
  align-items:center;
}
.ig-list--docs > li:last-child{border-bottom:0;}
.ig-list__item--inert{cursor:default;}
.ig-list__item--inert .ig-muted{color:var(--muted);}

.ig-pill--muted{color:var(--muted);border-color:var(--line);}

/* Cards ---------------------------------------------------------------- */

.ig-card__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.ig-card__head > :first-child{margin:0;}

/* Plans ---------------------------------------------------------------- */

.ig-plans{display:grid;grid-template-columns:1fr;gap:24px;align-items:stretch;}
@media (min-width:960px){.ig-plans{grid-template-columns:repeat(3,minmax(0,1fr));}}
.ig-plan__lead{margin:14px 0 0;font-size:15px;}
.ig-plan__alt{margin:6px 0 0;font-size:14px;}
.ig-plan__note{margin:12px 0 0;font-size:13px;}

/* Definition attributions ---------------------------------------------- */

/*
 * Required licence notices are reproduced VERBATIM (THEME_CONTRACT §7).
 * pre-wrap keeps the upstream line breaks — never re-wrap or re-indent this.
 */
.ig-verbatim{
  margin:12px 0 0;
  padding:16px 18px;
  background:var(--inset);
  border:1px solid var(--line);
  border-left:3px solid var(--accent);
  border-radius:var(--radius-sm);
  font-family:var(--font-mono);
  font-size:13px;
  line-height:1.65;
  color:var(--text);
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}
.ig-source-links{margin:16px 0 0;display:flex;gap:10px;flex-wrap:wrap;align-items:center;}

/* Legal documents ------------------------------------------------------ */

.ig-legal-doc{max-width:70ch;}
.ig-legal-doc__section{margin-top:36px;}
.ig-legal-doc__section:first-of-type{margin-top:0;}
.ig-draft-banner{margin-bottom:32px;}

/* Forms ---------------------------------------------------------------- */

.ig-form{display:flex;flex-direction:column;gap:18px;}
.ig-field{display:flex;flex-direction:column;gap:7px;}
.ig-label{
  display:block;
  margin:20px 0 8px;
  font-size:13px;
  font-weight:600;
  color:var(--head);
  text-transform:uppercase;
  letter-spacing:.06em;
}
.ig-field .ig-label{margin:0;}
.ig-input,
.ig-textarea,
.ig-select{
  width:100%;
  max-width:100%;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--inset);
  color:var(--head);
  font-family:inherit;
  font-size:16px;   /* 16px stops iOS Safari zooming the viewport on focus */
  line-height:1.5;
}
.ig-input.ig-mono,
.ig-textarea.ig-mono{font-family:var(--font-mono);}
.ig-textarea{min-height:150px;resize:vertical;}
.ig-select{
  -webkit-appearance:none;
  appearance:none;
  padding-right:38px;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 2px),calc(100% - 14px) calc(50% + 2px);
  background-size:6px 6px,6px 6px;
  background-repeat:no-repeat;
}
.ig-input::placeholder,
.ig-textarea::placeholder{color:var(--muted);}
.ig-input:focus-visible,
.ig-textarea:focus-visible,
.ig-select:focus-visible{border-color:var(--brand-hover);}

.ig-docs-search{margin-top:28px;max-width:520px;}
.ig-docs-search form,
.ig-docs-search .ig-searchform{max-width:100%;}

/* ==========================================================================
   13. Reduced motion  (§4)
   ========================================================================== */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ==========================================================================
   14. Print
   ========================================================================== */

@media print{
  .ig-header,.ig-footer__cols,.ig-nav-toggle,.ig-mobile-nav,.ig-skip{display:none !important;}
  body{background:#fff;color:#000;font-size:12pt;}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:10pt;}
}