/* ==================================================================
   iG2 site stylesheet
   Shared by every page outside /aipod/. Tokens and components are
   lifted from the AIPOD pages (rails, eyebrows, numbered cards, dark
   grids, finale) so the whole of ig2.ca reads as one design.
   ================================================================== */
:root {
  --black: #000;
  --ink: #111214;
  --gray: #6E6E73;
  --soft: #A1A1A6;
  --line: #E8E8EA;
  --bg2: #F6F6F7;
  --d-line: #262628;
  --d-card: #0C0C0D;
  --d-mute: #8A8A8F;
  --accent: #FF5757;
  --accent-2: #7FD6F8;
  --font: "Inter", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --rail: 1080px;
}

* { box-sizing: border-box; margin: 0; padding: 0 }
html { scroll-behavior: smooth }
body { font-family: var(--font); color: var(--ink); background: #fff; -webkit-font-smoothing: antialiased; line-height: 1.5 }
a { color: inherit }
img { max-width: 100% }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px }
.skip { position: absolute; left: -9999px; top: 0; background: #fff; color: #000; padding: 10px 16px; z-index: 300 }
.skip:focus { left: 16px; top: 12px }

/* ---------- Rails: the thin grid frame ---------- */
.band { border-top: 1px solid var(--line) }
.band.dark { background: var(--black); color: #fff; border-top-color: var(--d-line) }
.band.soft { background: var(--bg2) }
.rail { width: min(var(--rail), 100% - 32px); margin-inline: auto; border-left: 1px solid var(--line); border-right: 1px solid var(--line); position: relative }
.dark .rail { border-color: var(--d-line) }
.rail::before, .rail::after { content: ""; position: absolute; top: -4px; width: 7px; height: 7px; border-radius: 50%; background: #fff; border: 1px solid #D0D0D4 }
.rail::before { left: -4px }
.rail::after { right: -4px }
.dark .rail::before, .dark .rail::after { background: #000; border-color: #3A3A3D }
.soft .rail::before, .soft .rail::after { background: var(--bg2) }
.pad { padding: 96px 72px }
.pad-top0 { padding-top: 0 }
.eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--soft) }
.dark .eyebrow { color: #7A7A80 }
.flag { display: inline-block; width: 1.8em; height: .9em; vertical-align: -.1em; margin-right: .5em; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12) }
.ca-badge { display: inline-flex; align-items: center; color: #fff; border: 1px solid #2A2A2E; background: rgba(255, 255, 255, .05); border-radius: 999px; padding: 6px 14px 6px 10px }
.ca-badge .flag { width: 2.2em; height: 1.1em; vertical-align: 0 }
.legal .ca { color: #A1A1A6; white-space: nowrap }
.center { text-align: center }
.center .sec-sub { margin-inline: auto }

/* ---------- Nav bar ---------- */
header.nav { background: #000; color: #fff; position: sticky; top: 0; z-index: 100; border-bottom: 1px solid #151516 }
header.nav .in { width: min(1200px, 100% - 48px); margin: auto; display: flex; align-items: center; gap: 28px; height: 64px }
.ig2-brand { display: flex; align-items: center; flex: 0 0 auto }
.ig2-logo { display: flex; align-items: center; line-height: 0 }
.ig2-logo img { display: block; width: 96px; height: 52px; object-fit: contain }
.menu { display: flex; align-items: center; gap: 26px; margin-right: auto }
.menu > a { font-size: 14px; font-weight: 500; text-decoration: none; color: #C7C7CC }
.menu > a:hover, .menu > a[aria-current="page"] { color: #fff }
header.nav .cta { font-size: 14px; font-weight: 600; text-decoration: none; color: #fff; flex: 0 0 auto }
header.nav .cta:hover { color: var(--accent) }

.ig2-switch { position: relative; flex: 0 0 auto; line-height: 1 }
.ig2-switch-btn { font: inherit; font-size: 14px; font-weight: 500; color: #C7C7CC; background: none; border: 0; padding: 8px 0; margin: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 7px }
.ig2-switch-btn:hover, .ig2-switch-btn[aria-expanded="true"], .ig2-switch.current .ig2-switch-btn { color: #fff }
.ig2-switch-btn svg { width: 10px; height: 6px; flex: 0 0 auto; transition: transform .18s }
.ig2-switch-btn[aria-expanded="true"] svg { transform: rotate(180deg) }
.ig2-switch-menu { position: absolute; top: calc(100% + 12px); left: -14px; min-width: 260px; z-index: 200; background: #0B0B0C; border: 1px solid #2A2A2E; border-radius: 12px; padding: 6px; box-shadow: 0 26px 50px -18px rgba(0, 0, 0, .85); transform-origin: top left; animation: ig2-menu-in .18s cubic-bezier(.22, .61, .36, 1) }
.ig2-switch-menu a { display: block; padding: 11px 14px; border-radius: 8px; text-decoration: none; font-size: 14px; font-weight: 500; color: #C7C7CC; white-space: nowrap }
.ig2-switch-menu a:hover { background: #17171A; color: #fff }
.ig2-switch-menu a[aria-current="page"] { color: #fff }
.ig2-switch-menu a[aria-current="page"]::after { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); margin-left: 9px; vertical-align: middle }
.ig2-switch-menu hr { border: 0; border-top: 1px solid #222225; margin: 6px 8px }
.ig2-switch-menu .grp { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #5E5E63; padding: 10px 14px 4px }
.ig2-switch-menu .ig2-all { font-size: 13px; color: #7A7A80; font-weight: 400 }

.ig2-burger { display: none; background: none; border: 0; padding: 9px 8px 9px 12px; margin: 0; cursor: pointer; flex: 0 0 auto }
.ig2-burger span { display: block; width: 22px; height: 2px; background: #fff; border-radius: 2px; transition: transform .2s, opacity .2s }
.ig2-burger span + span { margin-top: 5px }
.ig2-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg) }
.ig2-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0 }
.ig2-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) }

@keyframes ig2-menu-in { from { opacity: 0; transform: translateY(-6px) scale(.98) } to { opacity: 1; transform: none } }
@keyframes ig2-drawer-in { from { opacity: 0; transform: translateY(-8px) } to { opacity: 1; transform: none } }

@media (max-width:900px) {
  header.nav .in { gap: 16px }
  .ig2-brand { margin-right: auto }
  .ig2-burger { display: block }
  .menu { display: none }
  .menu.open { display: flex; flex-direction: column; align-items: stretch; gap: 0; position: absolute; top: 64px; left: 0; right: 0; z-index: 30; background: #000; border-bottom: 1px solid #1D1E21; padding: 6px 24px 20px; max-height: calc(100vh - 64px); overflow-y: auto; animation: ig2-drawer-in .2s cubic-bezier(.22, .61, .36, 1) }
  .menu.open > a { display: block; padding: 14px 0; font-size: 16px; border-bottom: 1px solid #18181A }
  .menu.open .ig2-switch { border-bottom: 1px solid #18181A; padding: 10px 0 }
  .menu.open .ig2-switch-btn { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #6A6A70; pointer-events: none }
  .menu.open .ig2-switch-btn svg { display: none }
  .menu.open .ig2-switch-menu { display: block; position: static; background: none; border: 0; box-shadow: none; padding: 0; min-width: 0; animation: none }
  .menu.open .ig2-switch-menu a { padding: 10px 0; font-size: 16px }
  .menu.open .ig2-switch-menu hr, .menu.open .ig2-switch-menu .grp { display: none }
}
@media (max-width:440px) {
  .ig2-logo img { width: 77px; height: 42px }
  header.nav .cta { font-size: 13px }
}

/* ---------- Buttons & links ---------- */
.pill { display: inline-block; font: inherit; font-size: 15px; font-weight: 500; padding: 12px 24px; border-radius: 999px; text-decoration: none; border: 0; cursor: pointer; transition: transform .15s, opacity .15s }
.pill:active { transform: scale(.97) }
.pill:hover { opacity: .88 }
.pill.white { background: #fff; color: #000 }
.pill.black { background: #000; color: #fff }
.pill.red { background: var(--accent); color: #fff }
.pill.ghost { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .45) }
.pill.line { background: transparent; color: var(--ink); border: 1px solid #CFCFD4 }
.btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 32px }
.link { font-weight: 500; color: var(--accent); text-decoration: none }
.link:hover { text-decoration: underline }

/* ---------- Hero ---------- */
.hero { background: #000; color: #fff; position: relative; overflow: hidden; text-align: center; padding: 120px 24px 112px }
.chrome { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-weight: 700; font-size: clamp(150px, 27vw, 380px); letter-spacing: -.06em; line-height: .9; white-space: nowrap; background: linear-gradient(180deg, #5A5D63 0%, #1E1F22 38%, #8F949B 55%, #232427 75%, #0A0A0A 100%); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: .32; pointer-events: none; user-select: none }
.hero .inner { position: relative; max-width: 780px; margin: auto }
.hero .eyebrow { color: #7A7A80 }
.hero h1 { font-size: clamp(42px, 6.4vw, 80px); font-weight: 600; letter-spacing: -.045em; line-height: 1.02; margin-top: 16px }
.hero h1 span { display: block; color: var(--accent) }
.hero p.lede { color: #B5B5BA; font-size: 17px; max-width: 610px; margin: 26px auto 0 }
.hero p.lede b { color: #fff; font-weight: 600 }
.hero .chips { margin-top: 30px }
.hero .chips span { border-color: #2A2A2E; color: #C7C7CC }
.hero.short { padding: 96px 24px 88px }

/* hero stat strip */
.hstats { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); max-width: 900px; margin: 72px auto 0; border-top: 1px solid #1D1E21; text-align: left }
.hstats div { padding: 20px 18px 0; border-left: 1px solid #1D1E21 }
.hstats div:first-child { border-left: 0 }
.hstats b { display: block; font-size: clamp(30px, 3.6vw, 42px); font-weight: 600; letter-spacing: -.04em; line-height: 1 }
.hstats b em { font-style: normal; color: var(--accent) }
.hstats span { display: block; font-size: 13px; color: var(--d-mute); margin-top: 8px }
@media (max-width:760px) {
  .hstats { grid-template-columns: 1fr 1fr }
  .hstats div:nth-child(3) { border-left: 0 }
  .hstats div:nth-child(n+3) { border-top: 1px solid #1D1E21; margin-top: 20px }
}

/* ---------- Section titles ---------- */
.sec-title { font-size: clamp(30px, 3.8vw, 46px); font-weight: 600; letter-spacing: -.035em; line-height: 1.08; margin-top: 14px }
.sec-title span { color: var(--accent) }
.sec-sub { color: var(--gray); font-size: 17px; margin-top: 16px; max-width: 640px }
.dark .sec-sub { color: #A1A1A6 }
.statement { font-size: clamp(26px, 3.2vw, 38px); font-weight: 600; letter-spacing: -.03em; line-height: 1.18; color: #8A8A8F; max-width: 760px; margin-top: 14px }
.statement b { color: var(--ink); font-weight: 600 }
.dark .statement { color: #77777C }
.dark .statement b { color: #fff }
.body-copy { color: var(--gray); font-size: 16px; max-width: 700px; margin-top: 22px }
.body-copy + .body-copy { margin-top: 14px }
.dark .body-copy { color: #A1A1A6 }
.body-copy b { color: var(--ink); font-weight: 600 }
.dark .body-copy b { color: #fff }

/* ---------- Numbered cards ---------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line) }
.cards.two { grid-template-columns: repeat(2, 1fr) }
.cards.four { grid-template-columns: repeat(2, 1fr) }
.card { border-right: 1px solid var(--line); padding: 44px 34px 38px; display: flex; flex-direction: column; position: relative; text-decoration: none; background: #fff; transition: background .2s }
.cards > .card:last-child { border-right: 0 }
.cards.four > .card:nth-child(2n) { border-right: 0 }
.cards.four > .card:nth-child(-n+2) { border-bottom: 1px solid var(--line) }
a.card:hover { background: var(--bg2) }
.card .n { font-family: var(--mono); font-size: 12px; color: var(--soft); letter-spacing: .14em }
.card h3 { font-size: 25px; font-weight: 600; letter-spacing: -.03em; line-height: 1.15; margin-top: 22px }
.card .pos { color: var(--gray); font-size: 15px; margin-top: 12px }
.card ul { list-style: none; margin-top: 22px; font-size: 14px; color: var(--ink) }
.card ul li { padding: 9px 0; border-top: 1px solid var(--line); display: flex; gap: 10px; align-items: baseline }
.card ul li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; transform: translateY(-2px) }
.card .go { margin-top: auto; padding-top: 26px; font-size: 15px; font-weight: 500; color: var(--accent) }
.card .go em { font-style: normal; transition: margin .15s }
a.card:hover .go em { margin-left: 5px }
.card.soon { background: var(--bg2) }
.card.soon h3, .card.soon .pos, .card.soon .go { color: var(--gray) }
.card.soon ul li::before { background: #C9C9CE }
.tag { position: absolute; top: 44px; right: 34px; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; padding: 5px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--gray) }
.tag.on { border-color: rgba(255, 87, 87, .4); color: #C43B3B; background: rgba(255, 87, 87, .08) }
@media (max-width:900px) {
  .cards, .cards.two, .cards.four { grid-template-columns: 1fr }
  .card, .cards.four > .card { border-right: 0; border-bottom: 1px solid var(--line) }
  .cards > .card:last-child { border-bottom: 0 }
}

/* ---------- Dark grid (one line each) ---------- */
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--d-line); margin-top: 44px; border: 1px solid var(--d-line) }
.grid3 .g3 { background: #000; padding: 28px 26px }
.grid3 .g3 small { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #5E5E63; margin-bottom: 12px }
.grid3 h4 { font-size: 16px; font-weight: 600; letter-spacing: -.01em }
.grid3 p { color: var(--d-mute); font-size: 14px; margin-top: 8px }
.grid3 p.k { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; color: var(--accent-2); margin-top: 12px }
@media (max-width:820px) { .grid3 { grid-template-columns: 1fr } }

/* ---------- Dark feature cards with checks ---------- */
.grid6 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 44px }
.g { background: var(--d-card); border: 1px solid #17181A; border-radius: 6px; padding: 24px; min-height: 190px }
.g .ic { background: #1A1B1E; color: #D1D1D6; border-radius: 8px; width: 32px; height: 32px }
.g h3 { font-size: 15px; font-weight: 600; margin-top: 22px }
.g > p { font-size: 13px; color: var(--d-mute); margin-top: 8px }
.g ul { list-style: none; margin-top: 12px }
.g li { font-size: 13px; color: var(--d-mute); padding: 3px 0 3px 20px; position: relative }
.g li b { color: #E4E4E8; font-weight: 500 }
.g li::before, .checks li::before, .ticks li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 8px; height: 4px; border-left: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent); transform: rotate(-45deg) }
@media (max-width:900px) { .grid6 { grid-template-columns: 1fr 1fr } }
@media (max-width:600px) { .grid6, .grid6.two { grid-template-columns: 1fr } }
.grid6.two { grid-template-columns: 1fr 1fr }
@media (max-width:600px) { .grid6.two { grid-template-columns: 1fr } }
.g h3:first-child { margin-top: 0 }

/* ---------- Pillars with icons ---------- */
.ic { width: 30px; height: 30px; border-radius: 50%; background: #FFECEC; display: grid; place-items: center; color: #C43B3B; flex: none }
.ic svg { width: 15px; height: 15px }
.checks { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line) }
.checks.four { grid-template-columns: repeat(4, 1fr) }
.checks > div { padding: 32px 28px; border-right: 1px solid var(--line) }
.checks > div:last-child { border-right: 0 }
.checks h3 { font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 10px; letter-spacing: -.01em }
.checks p { font-size: 14px; color: var(--gray); margin-top: 12px }
.checks ul { list-style: none; margin-top: 16px }
.checks li { font-size: 13.5px; color: var(--gray); padding: 4px 0 4px 22px; position: relative }
.checks li::before { left: 3px; top: 10px }
@media (max-width:900px) {
  .checks, .checks.four { grid-template-columns: 1fr }
  .checks > div { border-right: 0; border-bottom: 1px solid var(--line) }
  .checks > div:last-child { border-bottom: 0 }
}

/* plain tick list */
.ticks { list-style: none; margin-top: 18px }
.ticks li { font-size: 15px; color: var(--gray); padding: 6px 0 6px 24px; position: relative }
.ticks li::before { top: 13px }
.ticks li b { color: var(--ink); font-weight: 600 }
.dark .ticks li { color: #A1A1A6 }
.dark .ticks li b { color: #fff }
.ticks.cols { columns: 2; column-gap: 40px }
.ticks.cols li { break-inside: avoid }
@media (max-width:700px) { .ticks.cols { columns: 1 } }

/* ---------- Chips ---------- */
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px }
.chips.left { justify-content: flex-start }
.chips span { font-size: 13px; border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px 7px 28px; position: relative }
.chips span::before { content: ""; position: absolute; left: 12px; top: 12px; width: 7px; height: 4px; border-left: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent); transform: rotate(-45deg) }
.chips.mono span { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; padding: 7px 14px }
.chips.mono span::before { display: none }
.dark .chips span { border-color: #2A2A2E; color: #C7C7CC }

/* ---------- Stats row ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 56px }
.stats.three { grid-template-columns: repeat(3, 1fr) }
.stat { border-top: 1px solid var(--line); padding-top: 14px }
.dark .stat { border-top-color: var(--d-line) }
.stat small { font-size: 12px; color: var(--gray) }
.dark .stat small { color: var(--d-mute) }
.stat .num { display: flex; align-items: baseline; gap: 6px; margin-top: 2px }
.stat .num b { font-size: clamp(44px, 5vw, 60px); font-weight: 700; letter-spacing: -.05em; line-height: 1 }
.stat .num span { font-size: 18px; font-weight: 600; letter-spacing: -.02em; color: var(--accent) }
.stat p { font-size: 13px; color: var(--gray); margin-top: 6px; max-width: 22em }
.dark .stat p { color: var(--d-mute) }
@media (max-width:900px) { .stats, .stats.three { grid-template-columns: 1fr 1fr } }
@media (max-width:480px) { .stats, .stats.three { grid-template-columns: 1fr } }

/* ---------- Spec rows (label → value → explanation) ---------- */
.rows-spec { margin-top: 44px; border-top: 1px solid var(--line) }
.rows-spec > div { display: grid; grid-template-columns: 240px 1fr; gap: 28px; padding: 22px 0; border-bottom: 1px solid var(--line) }
.rows-spec dt, .rows-spec h3 { font-size: 16px; font-weight: 600; letter-spacing: -.01em }
.rows-spec .k { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--soft); margin-bottom: 6px; font-weight: 400 }
.rows-spec p { font-size: 15px; color: var(--gray) }
.rows-spec p + p { margin-top: 10px }
.rows-spec p b { color: var(--ink); font-weight: 600 }
.dark .rows-spec { border-top-color: var(--d-line) }
.dark .rows-spec > div { border-bottom-color: var(--d-line) }
.dark .rows-spec p { color: var(--d-mute) }
@media (max-width:760px) { .rows-spec > div { grid-template-columns: 1fr; gap: 8px } }
.rows-spec.single > div { grid-template-columns: 1fr; padding: 18px 0 }

/* ---------- Tabs (light console) ---------- */
.tabs { margin-top: 44px; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: #fff; display: grid; grid-template-columns: 250px 1fr; min-height: 440px }
.t-side { border-right: 1px solid var(--line); padding: 14px 10px; display: flex; flex-direction: column; gap: 2px; background: var(--bg2) }
.t-tab { font: inherit; font-size: 14px; text-align: left; color: var(--gray); background: none; border: 1px solid transparent; border-radius: 9px; padding: 10px 12px; cursor: pointer; line-height: 1.3 }
.t-tab:hover { color: var(--ink) }
.t-tab[aria-selected="true"] { color: var(--ink); background: #fff; border-color: var(--line); font-weight: 500; box-shadow: 0 1px 2px rgba(0, 0, 0, .04) }
.t-main { padding: 34px 38px }
.t-view[hidden] { display: none }
.t-view h3 { font-size: 22px; font-weight: 600; letter-spacing: -.025em; line-height: 1.2 }
.t-view .t-sub { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px }
.t-view > p { color: var(--gray); font-size: 15px; margin-top: 12px; max-width: 640px }
.t-view h4 { font-size: 14px; font-weight: 600; margin-top: 24px }
.t-view .ticks li { font-size: 14px }
.t-view .ticks li b { display: block }
.t-view .go { display: inline-block; margin-top: 22px; font-size: 15px }
@media (max-width:900px) {
  .tabs { grid-template-columns: 1fr }
  .t-side { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line) }
  .t-tab { white-space: nowrap }
  .t-main { padding: 26px 22px }
}

/* ---------- Dark console (CRISPER) ---------- */
.console { margin-top: 40px; background: #07080A; border: 1px solid #1D1E21; border-radius: 18px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, .02), 0 60px 120px -40px rgba(255, 87, 87, .18); text-align: left }
.c-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid #1D1E21 }
.c-top b { font-size: 14px; font-weight: 600 }
.c-top span { font-family: var(--mono); font-size: 12px; color: var(--d-mute); display: flex; align-items: center; gap: 8px }
.c-top i { width: 7px; height: 7px; border-radius: 50%; background: #2BD17E }
.c-body { display: grid; grid-template-columns: 200px 1fr; min-height: 400px }
.c-side { border-right: 1px solid #1D1E21; padding: 14px 10px; display: flex; flex-direction: column; gap: 2px }
.c-tab { font: inherit; font-size: 14px; text-align: left; color: var(--d-mute); background: none; border: 1px solid transparent; border-radius: 9px; padding: 9px 12px; cursor: pointer }
.c-tab:hover { color: #fff }
.c-tab[aria-selected="true"] { color: #fff; background: #141518; border-color: #26272B }
.c-main { padding: 22px }
.c-main h3 { font-size: 16px; font-weight: 600; margin-bottom: 14px }
.c-view[hidden] { display: none }
.apps { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.app { background: #0F1012; border: 1px solid #202124; border-radius: 12px; padding: 16px; position: relative }
.app::after { content: ""; position: absolute; top: 18px; right: 16px; width: 7px; height: 7px; border-radius: 50%; background: #2BD17E }
.app h4 { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 8px; padding-right: 16px }
.app h4 em { font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--d-mute); border: 1px solid #2A2B2F; border-radius: 5px; padding: 1px 6px }
.app p { color: var(--d-mute); font-size: 13px; margin-top: 8px }
.rows { margin-top: 12px; background: #0F1012; border: 1px solid #202124; border-radius: 12px }
.rows:first-of-type { margin-top: 0 }
.rows div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px; font-size: 14px; border-bottom: 1px solid #1D1E21 }
.rows div:last-child { border-bottom: 0 }
.rows span { color: var(--d-mute); text-align: right }
.rows span.ok { color: #2BD17E }
.rows span.warn { color: var(--accent) }
.caption { text-align: center; color: #7A7A80; font-size: 13px; margin-top: 18px }
@media (max-width:900px) {
  .c-body { grid-template-columns: 1fr }
  .c-side { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid #1D1E21 }
  .c-tab { white-space: nowrap }
}
@media (max-width:560px) { .apps { grid-template-columns: 1fr } }

/* ---------- Steps (numbered process) ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); margin-top: 44px }
.step { padding: 30px 24px 34px; border-right: 1px solid var(--line) }
.step:last-child { border-right: 0 }
.step .n { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--soft) }
.step .dot { width: 30px; height: 30px; border-radius: 50%; background: #000; color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 600; margin-top: 18px }
.step h3 { font-size: 17px; font-weight: 600; letter-spacing: -.015em; margin-top: 16px }
.step p { font-size: 14px; color: var(--gray); margin-top: 8px }
.step ul { list-style: none; margin-top: 12px }
.step li { font-size: 13px; color: var(--gray); padding: 6px 0; border-top: 1px solid var(--line) }
.step li b { color: var(--ink); font-weight: 600 }
@media (max-width:900px) {
  .steps { grid-template-columns: 1fr 1fr }
  .step:nth-child(2n) { border-right: 0 }
  .step:nth-child(-n+2) { border-bottom: 1px solid var(--line) }
}
@media (max-width:600px) {
  .steps { grid-template-columns: 1fr }
  .step { border-right: 0; border-bottom: 1px solid var(--line) }
}

/* ---------- Split (mark + statement) ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; align-items: center }
.split > div { padding: 90px 60px }
.split > div + div { border-left: 1px solid var(--line) }
.mark { display: grid; place-items: center; gap: 22px; text-align: center }
.mark .icon { width: 76px; height: 76px; border-radius: 50%; background: #000; color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 20px; letter-spacing: -.03em; box-shadow: 0 18px 30px -12px rgba(0, 0, 0, .45) }
.mark .word { font-size: clamp(44px, 5.6vw, 72px); font-weight: 700; letter-spacing: -.05em; line-height: 1 }
.mark .word span { color: var(--accent) }
.split .statement { font-size: clamp(21px, 2.3vw, 27px); margin-top: 0 }
@media (max-width:900px) {
  .split { grid-template-columns: 1fr }
  .split > div { padding: 60px 24px }
  .split > div + div { border-left: 0; border-top: 1px solid var(--line) }
}

/* ---------- Quote ---------- */
.quote { font-size: clamp(24px, 3vw, 36px); font-weight: 500; letter-spacing: -.03em; line-height: 1.2; max-width: 820px; margin: 18px auto 0 }
.quote::before { content: "\201C"; color: var(--accent) }
.quote::after { content: "\201D"; color: var(--accent) }
.cite { margin-top: 22px; font-size: 14px; color: var(--d-mute) }
.cite b { color: #fff; font-weight: 600 }

/* ---------- Light tile grid (platforms, documents) ---------- */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); margin-top: 44px }
.tile { padding: 28px 26px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); position: relative; background: #fff }
.tile .n { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--soft); text-transform: uppercase }
.tile h3 { font-size: 17px; font-weight: 600; letter-spacing: -.015em; margin-top: 12px }
.tile p { font-size: 14px; color: var(--gray); margin-top: 8px }
.tile ul { list-style: none; margin-top: 14px }
.tile li { font-size: 13.5px; padding: 7px 0; border-top: 1px solid var(--line); display: flex; gap: 10px; align-items: baseline }
.tile li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; transform: translateY(-2px) }
.tile .tag { top: 26px; right: 22px }
.tile.muted h3 { color: var(--gray) }
@media (max-width:900px) { .tiles { grid-template-columns: 1fr 1fr } }
@media (max-width:600px) { .tiles { grid-template-columns: 1fr } }

/* ---------- Gradient band ---------- */
.gradient { background: linear-gradient(120deg, #4A0D0D 0%, #A31818 50%, #FF5757 100%); color: #fff; border-top: 0 }
.gradient .rail { border-color: rgba(255, 255, 255, .18) }
.gradient .rail::before, .gradient .rail::after { background: #A31818; border-color: rgba(255, 255, 255, .35) }
.gradient h2 { font-size: clamp(32px, 4.2vw, 50px); font-weight: 500; letter-spacing: -.035em; line-height: 1.1 }
.gradient p { color: rgba(255, 255, 255, .85); margin: 14px auto 26px; max-width: 520px; font-size: 16px }

/* ---------- Finale ---------- */
.finale { background: #000; color: #fff; position: relative; overflow: hidden; text-align: center; padding: 140px 24px; border-top: 1px solid var(--d-line) }
.finale .chrome { opacity: .45 }
.finale h2 { position: relative; font-size: clamp(34px, 5vw, 60px); font-weight: 600; letter-spacing: -.04em; line-height: 1.06; max-width: 800px; margin: auto }
.finale h2 span { color: #8A8A8F }
.finale .btns { position: relative }

/* ---------- Contact block & form ---------- */
.contact { display: grid; grid-template-columns: 1fr 1.15fr }
.contact > div { padding: 80px 60px }
.contact > div + div { border-left: 1px solid var(--line) }
.contact h2 { font-size: clamp(32px, 4vw, 48px); font-weight: 600; letter-spacing: -.04em; line-height: 1.05; margin-top: 14px }
.contact h2 span { color: var(--accent) }
.contact .lead { color: var(--gray); font-size: 16px; margin-top: 16px; max-width: 400px }
.clist { list-style: none; margin-top: 30px; border-top: 1px solid var(--line) }
.clist li { display: grid; grid-template-columns: 90px 1fr; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 15px }
.clist .k { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--soft); padding-top: 3px }
.clist a { text-decoration: none }
.clist a:hover { color: var(--accent) }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px }
.form .full { grid-column: 1 / -1 }
.form label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px }
.form input, .form textarea { width: 100%; font: inherit; font-size: 15px; color: var(--ink); background: #fff; border: 1px solid #D9D9DE; border-radius: 10px; padding: 11px 13px; transition: border-color .15s, box-shadow .15s }
.form textarea { min-height: 140px; resize: vertical }
.form input:focus, .form textarea:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 87, 87, .15) }
.form .pill { justify-self: start }
.form .note { font-size: 12.5px; color: var(--gray) }
.form-status { grid-column: 1 / -1; font-size: 14px; min-height: 1.4em }
@media (max-width:900px) {
  .contact { grid-template-columns: 1fr }
  .contact > div { padding: 60px 24px }
  .contact > div + div { border-left: 0; border-top: 1px solid var(--line) }
}
@media (max-width:520px) { .form { grid-template-columns: 1fr } }

/* ---------- Prose (privacy) ---------- */
.prose { max-width: 720px }
.prose h2 { font-size: 22px; font-weight: 600; letter-spacing: -.02em; margin-top: 48px }
.prose h2:first-child { margin-top: 0 }
.prose p { color: #3A3A3F; font-size: 16px; margin-top: 14px; line-height: 1.7 }
.notice { font-size: 13px; color: var(--gray); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 6px; padding: 14px 16px; margin-bottom: 40px; background: var(--bg2) }

/* ---------- Footer ---------- */
footer.site { background: #000; color: #fff; border-top: 1px solid var(--d-line) }
footer.site .rail { border-color: var(--d-line) }
footer.site .rail::before, footer.site .rail::after { background: #000; border-color: #3A3A3D }
.fgrid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 30px; padding: 60px 48px 48px }
.fgrid p { color: var(--d-mute); font-size: 13px; margin-top: 12px; max-width: 250px }
.fgrid h4 { font-size: 13px; color: var(--d-mute); font-weight: 500; margin-bottom: 12px }
.fgrid a { display: block; font-size: 13px; text-decoration: none; padding: 4px 0; color: #E4E4E8 }
.fgrid a:hover { color: var(--accent) }
.flogo { display: inline-block !important; font-weight: 700; font-size: 20px !important; letter-spacing: -.02em; padding: 0 !important }
.flogo span { color: var(--accent) }
.legal { border-top: 1px solid var(--d-line); padding: 20px 48px 34px; font-size: 12px; color: #6E6E73; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px }
.legal a { color: inherit }
@media (max-width:900px) {
  .fgrid { grid-template-columns: 1fr 1fr; padding: 48px 24px }
  .fgrid > div:first-child { grid-column: 1 / -1 }
  .legal { padding: 20px 24px 30px }
}

/* ---------- Responsive padding ---------- */
@media (max-width:640px) {
  .pad { padding: 64px 22px }
  .card { padding: 34px 24px 30px }
  .card .tag { top: 34px; right: 24px }
  .hero { padding: 88px 20px 84px }
  .finale { padding: 104px 22px }
}

/* ==================================================================
   Motion (same vocabulary as the AIPOD pages)
   ================================================================== */
@keyframes ig2-enter { from { opacity: 0 } to { opacity: 1 } }
@keyframes ig2-rise { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }
@keyframes ig2-reveal { from { opacity: 0; transform: translateY(20px) } to { opacity: 1; transform: none } }
header, main, footer { animation: ig2-enter .45s ease backwards }
.hero .inner > * { animation: ig2-rise .7s cubic-bezier(.22, .61, .36, 1) backwards }
.hero .inner > *:nth-child(1) { animation-delay: .06s }
.hero .inner > *:nth-child(2) { animation-delay: .14s }
.hero .inner > *:nth-child(3) { animation-delay: .22s }
.hero .inner > *:nth-child(4) { animation-delay: .30s }
.hero .inner > *:nth-child(5) { animation-delay: .38s }
.reveal { opacity: 0 }
.reveal.in { animation: ig2-reveal .7s cubic-bezier(.22, .61, .36, 1) forwards }
.rv-stagger > .reveal.in:nth-child(2) { animation-delay: .07s }
.rv-stagger > .reveal.in:nth-child(3) { animation-delay: .14s }
.rv-stagger > .reveal.in:nth-child(4) { animation-delay: .21s }
.rv-stagger > .reveal.in:nth-child(5) { animation-delay: .28s }
.rv-stagger > .reveal.in:nth-child(6) { animation-delay: .35s }
.no-js .reveal { opacity: 1 }
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important }
  .reveal { opacity: 1 }
}

/* nav bar theme (toggled by ig2.js over light sections) */
header.nav { transition: background-color .4s ease, border-color .4s ease }
header.nav .menu > a, header.nav .ig2-switch-btn, header.nav .cta { transition: color .4s ease }
header.nav .ig2-burger span { transition: transform .2s, opacity .2s, background-color .4s ease }
header.nav.light { background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); border-bottom-color: #E8E8EA }
header.nav.light .menu > a, header.nav.light .ig2-switch-btn { color: #6E6E73 }
header.nav.light .menu > a:hover, header.nav.light .menu > a[aria-current="page"], header.nav.light .ig2-switch-btn:hover, header.nav.light .ig2-switch-btn[aria-expanded="true"], header.nav.light .ig2-switch.current .ig2-switch-btn, header.nav.light .cta { color: #111214 }
header.nav.light .cta:hover { color: var(--accent) }
header.nav.light .ig2-burger span { background: #111214 }
@media (prefers-reduced-motion:reduce) { header.nav, header.nav * { transition: none !important } }