/* Industry landing pages. Built on main.css variables (Poppins, blue to green gradient). */
:root {
    --ix-ink: #0f1e3a;
    --ix-night: #0f1e3a;
    --ix-night-2: #17305c;
    --ix-sky: #eef6ff;
    --ix-line: #dbe5f1;
    --ix-mint: #d7f5ea;
}

.ix-band { padding: 84px 0; background: var(--bg-white); }
.ix-h2 { font-size: 2.2rem; line-height: 1.2; font-weight: 700; color: var(--ix-ink); margin: 0 0 0.6rem; max-width: 34ch; letter-spacing: -0.01em; }
.ix-sub { color: var(--text-secondary); font-size: 1.1rem; margin: 0 0 2.5rem; }
.ix-h2 + .ix-reason-grid, .ix-h2 + .ix-limit-grid, .ix-h2 + .ix-faq-grid { margin-top: 2.5rem; }

/* ---------- Hero ---------- */
.ix-hero { padding: 150px 0 80px; background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); }
.ix-hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 3.5rem; align-items: center; }
.ix-hero .hero-title { font-size: 2.9rem; line-height: 1.12; margin: 0 0 1.25rem; text-align: left; }
.ix-hero .hero-description { margin: 0 0 2rem; text-align: left; max-width: 34em; }
.ix-hero .hero-cta { justify-content: flex-start; }
.ix-points { display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.ix-points li { color: var(--ix-ink); font-weight: 500; font-size: 0.95rem; }
.ix-points i { color: var(--secondary); margin-right: 0.4rem; }

.ix-call { background: #fff; border-radius: 1.5rem; box-shadow: 0 30px 60px -20px rgba(15, 30, 58, 0.28); overflow: hidden; border: 1px solid var(--ix-line); }
.ix-call-head { display: flex; align-items: center; gap: 0.8rem; padding: 1rem 1.25rem; background: var(--ix-night); color: #fff; }
.ix-call-head .av { width: 42px; height: 42px; border-radius: 50%; background: var(--gradient-primary); display: flex; align-items: center; justify-content: center; flex: none; }
.ix-call-head strong { display: block; font-weight: 600; font-size: 0.98rem; }
.ix-call-head span { font-size: 0.82rem; opacity: 0.75; }
.ix-wave { margin-left: auto; display: flex; align-items: center; gap: 3px; height: 26px; }
.ix-wave i { width: 3px; border-radius: 2px; background: #34d399; height: 30%; }
.ix-wave i:nth-child(2) { height: 80%; } .ix-wave i:nth-child(3) { height: 55%; } .ix-wave i:nth-child(4) { height: 100%; } .ix-wave i:nth-child(5) { height: 40%; }
.ix-audio { display: flex; align-items: center; gap: 0.9rem; padding: 0.8rem 1.25rem; background: var(--ix-sky); border-bottom: 1px solid var(--ix-line); }
.ix-audio audio { flex: 1; min-width: 0; height: 42px; }
.ix-audio span { color: var(--text-secondary); font-size: 0.85rem; white-space: nowrap; }
.ix-msgs { padding: 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; max-height: 400px; overflow-y: auto; }
.ix-msg { max-width: 86%; padding: 0.7rem 0.95rem; border-radius: 1.1rem; line-height: 1.55; font-size: 0.93rem; }
.ix-msg .who { display: block; font-size: 0.72rem; font-weight: 600; margin-bottom: 0.15rem; opacity: 0.7; }
.ix-msg.ai { align-self: flex-start; background: #f1f5f9; color: var(--ix-ink); border-bottom-left-radius: 0.3rem; }
.ix-msg.them { align-self: flex-end; background: var(--primary); color: #fff; border-bottom-right-radius: 0.3rem; }

/* ---------- Links to regional versions ---------- */
.ix-regions { background: #fff; border-bottom: 1px solid var(--ix-line); padding: 1rem 0; }
.ix-regions .container { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.75rem; }
.ix-regions span { color: var(--text-secondary); font-size: 0.95rem; }
.ix-regions a { color: var(--primary); font-weight: 600; font-size: 0.95rem; text-decoration: none; }
.ix-regions a:hover { text-decoration: underline; }
.ix-regions a i { font-size: 0.75rem; margin-left: 0.25rem; }

/* ---------- The problem, as a story ---------- */
.ix-story { background: linear-gradient(160deg, var(--ix-night) 0%, var(--ix-night-2) 100%); }
.ix-story .ix-h2 { color: #fff; }
.ix-lede { font-size: 1.5rem; line-height: 1.55; color: #e6eefb; font-weight: 400; margin: 1.5rem 0 2.5rem; max-width: 46em; }
.ix-story-rest { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; border-top: 1px solid rgba(255, 255, 255, 0.16); padding-top: 2rem; }
.ix-story-rest p { color: #b9c7de; line-height: 1.8; margin: 0; font-size: 1.02rem; }
.ix-story-rest strong { color: #fff; }

/* ---------- Reasons: rows, not boxes ---------- */
.ix-reason-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 4rem; }
.ix-reason { display: flex; gap: 1.25rem; padding: 1.75rem 0; border-top: 1px solid var(--ix-line); }
.ix-reason > i { flex: none; width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; color: var(--primary); background: var(--ix-sky); }
.ix-reason h3 { font-size: 1.2rem; color: var(--ix-ink); margin: 0 0 0.35rem; }
.ix-reason p { color: var(--text-secondary); line-height: 1.7; margin: 0; }

/* ---------- Step through the enquiry ---------- */
.ix-day { background: var(--ix-sky); }
.ix-day-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 3rem; align-items: start; }
.ix-steps { list-style: none; margin: 0; padding: 0; }
.ix-steps li { border-left: 3px solid var(--ix-line); padding: 0 0 0.4rem 1.5rem; }
.ix-step { all: unset; box-sizing: border-box; display: flex; align-items: baseline; gap: 1rem; width: 100%; padding: 0.7rem 0; cursor: pointer; font-family: inherit; }
.ix-step .t { flex: none; width: 5.2rem; font-size: 0.9rem; font-weight: 600; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.ix-step .h { font-size: 1.12rem; font-weight: 600; color: var(--text-secondary); }
.ix-step:hover .h { color: var(--ix-ink); }
.ix-step:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; border-radius: 0.4rem; }
.ix-step-text { display: none; margin: 0 0 0.9rem 6.2rem; color: var(--text-secondary); line-height: 1.7; }
.ix-steps li.is-active { border-left-color: var(--primary); }
.ix-steps li.is-active .t { color: var(--primary); }
.ix-steps li.is-active .h { color: var(--ix-ink); }
.ix-steps li.is-active .ix-step-text { display: block; }
.ix-steps li.is-done { border-left-color: #93c5fd; }

.ix-screen { position: sticky; top: 110px; background: var(--ix-night); border-radius: 1.5rem; padding: 2rem; color: #fff; box-shadow: 0 30px 60px -24px rgba(15, 30, 58, 0.5); }
.ix-clock { font-size: 3.4rem; font-weight: 700; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin-bottom: 1.5rem; }
.ix-enquiry { background: #fff; border-radius: 1rem; padding: 1.1rem 1.25rem 0.4rem; color: var(--ix-ink); }
.ix-enquiry-head { font-weight: 600; font-size: 0.95rem; padding-bottom: 0.8rem; border-bottom: 1px solid var(--ix-line); }
.ix-enquiry-head i { color: var(--primary); margin-right: 0.4rem; }
.ix-enquiry dl { margin: 0; }
.ix-field { display: flex; justify-content: space-between; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid #eef2f7; }
.ix-field:last-child { border-bottom: none; }
.ix-field dt { color: var(--text-secondary); font-size: 0.9rem; }
.ix-field dd { margin: 0; font-weight: 600; font-size: 0.93rem; text-align: right; }
/* fields not yet captured at the selected step show as a blank line */
.ix-field.is-empty dd { color: transparent; background: #e9eef5; border-radius: 0.4rem; min-width: 7rem; user-select: none; }
.ix-field.is-new dd { color: #047857; }
.ix-screen-note { margin: 1.25rem 0 0; font-size: 0.85rem; color: #9fb2d1; }

/* ---------- How it works ---------- */
.ix-how-rail { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.5rem; counter-reset: none; }
.ix-how-rail li { position: relative; padding-top: 1.5rem; border-top: 3px solid var(--ix-line); }
.ix-how-rail li::before { content: ""; position: absolute; top: -3px; left: 0; width: 3.5rem; height: 3px; background: var(--gradient-primary); }
.ix-how-rail .n { display: block; font-size: 3rem; font-weight: 800; line-height: 1; background: var(--gradient-primary); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 0.9rem; }
.ix-how-rail h3 { font-size: 1.2rem; color: var(--ix-ink); margin: 0 0 0.5rem; }
.ix-how-rail p { color: var(--text-secondary); line-height: 1.7; margin: 0; }

/* ---------- What the team receives ---------- */
.ix-receive { background: var(--bg-light); }
.ix-receive-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 3.5rem; align-items: start; }
.ix-alert { background: #fff; border-radius: 1.25rem; border: 1px solid var(--ix-line); box-shadow: 0 24px 48px -24px rgba(15, 30, 58, 0.3); padding: 1.4rem 1.5rem; transform: rotate(-1.2deg); }
.ix-alert-top { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; color: var(--ix-ink); }
.ix-alert-top .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--secondary); }
.ix-alert-top time { margin-left: auto; font-weight: 400; font-size: 0.85rem; color: var(--text-secondary); }
.ix-alert-sum { margin: 0.9rem 0 1rem; color: var(--ix-ink); line-height: 1.65; font-size: 1rem; }
.ix-alert dl { margin: 0; border-top: 1px solid var(--ix-line); }
.ix-alert dl div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0; border-bottom: 1px solid #eef2f7; font-size: 0.9rem; }
.ix-alert dt { color: var(--text-secondary); }
.ix-alert dd { margin: 0; font-weight: 600; color: var(--ix-ink); text-align: right; }
.ix-alert-foot { display: flex; gap: 0.6rem; margin-top: 1rem; }
.ix-alert-foot span { font-size: 0.85rem; font-weight: 500; color: var(--primary); background: var(--ix-sky); border-radius: 999px; padding: 0.4rem 0.9rem; }
.ix-items { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem 2.5rem; }
.ix-items li { display: flex; gap: 0.9rem; }
.ix-items i { flex: none; color: var(--primary); font-size: 1.1rem; margin-top: 0.25rem; width: 1.4rem; text-align: center; }
.ix-items h3 { font-size: 1.05rem; color: var(--ix-ink); margin: 0 0 0.3rem; }
.ix-items p { color: var(--text-secondary); line-height: 1.65; margin: 0; font-size: 0.97rem; }

/* ---------- Languages ---------- */
.ix-lang-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.ix-lang p { color: var(--text-secondary); line-height: 1.8; font-size: 1.05rem; margin: 1rem 0 0; }
.ix-lang p a { color: var(--primary); }
.ix-greet { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1.6rem; }
.ix-greet span { font-weight: 700; line-height: 1.5; color: var(--ix-ink); font-size: 2rem; }
.ix-greet span:nth-child(3n+1) { font-size: 3.1rem; background: var(--gradient-primary); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ix-greet span:nth-child(3n+2) { font-size: 2.3rem; color: #5b7aa8; }

/* ---------- Comparison ---------- */
.ix-compare { background: var(--bg-light); }
.ix-table-scroll { overflow-x: auto; }
.ix-table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 680px; }
.ix-table th, .ix-table td { padding: 1.05rem 1.25rem; text-align: left; vertical-align: top; line-height: 1.55; font-size: 0.98rem; border-bottom: 1px solid var(--ix-line); color: var(--text-secondary); }
.ix-table thead th { font-size: 1rem; font-weight: 600; color: var(--ix-ink); border-bottom: 2px solid var(--ix-ink); }
.ix-table tbody th { font-weight: 600; color: var(--ix-ink); width: 22%; }
.ix-table td:last-child, .ix-table thead th:last-child { background: #fff; color: var(--ix-ink); font-weight: 500; border-left: 2px solid var(--primary); border-right: 2px solid var(--primary); }
.ix-table thead th:last-child { border-top: 2px solid var(--primary); border-radius: 0.9rem 0.9rem 0 0; color: var(--primary); }
.ix-table tbody tr:last-child td:last-child { border-bottom: 2px solid var(--primary); border-radius: 0 0 0.9rem 0.9rem; }
.ix-yes, .ix-no { margin-right: 0.5rem; }
.ix-yes { color: var(--secondary); }
.ix-no { color: #dc2626; }

/* ---------- Topics ---------- */
.ix-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ix-line); border-left: 1px solid var(--ix-line); }
.ix-tiles li { display: flex; align-items: center; gap: 0.9rem; padding: 1.4rem 1.25rem; border-right: 1px solid var(--ix-line); border-bottom: 1px solid var(--ix-line); color: var(--ix-ink); font-weight: 500; }
.ix-tiles i { color: var(--primary); font-size: 1.2rem; width: 1.6rem; text-align: center; }

/* ---------- Calculator ---------- */
.ix-calc { background: var(--ix-sky); }
.ix-calc-grid { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 0; background: #fff; border-radius: 1.5rem; overflow: hidden; border: 1px solid var(--ix-line); }
.ix-calc-in { padding: 2.25rem 2.5rem; display: grid; gap: 1.75rem; }
.ix-calc-row { display: grid; grid-template-columns: 1fr 7rem; gap: 0.6rem 1.25rem; align-items: center; }
.ix-calc-row label { grid-column: 1 / -1; font-weight: 600; color: var(--ix-ink); }
.ix-calc-row input[type="range"] { width: 100%; accent-color: var(--primary); height: 1.6rem; }
.ix-calc-row input[type="number"] { width: 100%; padding: 0.6rem 0.7rem; border: 1px solid var(--ix-line); border-radius: 0.6rem; font: inherit; font-weight: 600; color: var(--ix-ink); text-align: right; }
.ix-calc-out { background: var(--gradient-primary); color: #fff; padding: 2.25rem 2rem; display: flex; flex-direction: column; justify-content: center; }
.ix-calc-out .big { font-size: 3.4rem; font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ix-calc-out .lab { font-size: 1.05rem; margin-top: 0.4rem; }
.ix-calc-out small { margin-top: 1.25rem; font-size: 0.82rem; line-height: 1.55; opacity: 0.9; }

/* ---------- What it does not do ---------- */
.ix-limit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
.ix-limit { display: flex; gap: 1rem; }
.ix-limit i { flex: none; color: #94a3b8; font-size: 1.3rem; margin-top: 0.3rem; }
.ix-limit p { color: var(--text-secondary); line-height: 1.8; margin: 0; font-size: 1.03rem; }

/* ---------- Questions ---------- */
.ix-faq { background: var(--bg-light); }
.ix-faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 3rem; align-items: start; }
.ix-qa { border-top: 1px solid var(--ix-line); }
.ix-qa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; padding: 1.25rem 0; }
.ix-qa summary::-webkit-details-marker { display: none; }
.ix-qa summary::after { content: "+"; font-size: 1.5rem; line-height: 1; color: var(--primary); flex: none; }
.ix-qa[open] summary::after { content: "\2212"; }
.ix-qa summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; border-radius: 0.4rem; }
.ix-qa h3 { font-size: 1.08rem; color: var(--ix-ink); margin: 0; font-weight: 600; }
.ix-qa p { color: var(--text-secondary); line-height: 1.75; margin: 0 0 1.4rem; }

/* ---------- Smaller screens ---------- */
@media (max-width: 1024px) {
    .ix-hero-grid, .ix-day-grid, .ix-receive-grid, .ix-lang-grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .ix-how-rail { grid-template-columns: 1fr 1fr; }
    .ix-tiles { grid-template-columns: 1fr 1fr; }
    .ix-screen { position: static; }
    .ix-calc-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .ix-band { padding: 56px 0; }
    .ix-hero { padding: 115px 0 50px; }
    .ix-hero .hero-title { font-size: 2.05rem; }
    .ix-h2 { font-size: 1.65rem; }
    .ix-lede { font-size: 1.2rem; }
    .ix-story-rest, .ix-reason-grid, .ix-limit-grid, .ix-faq-grid, .ix-items, .ix-how-rail { grid-template-columns: 1fr; }
    .ix-story-rest { gap: 1.25rem; }
    .ix-step { flex-direction: column; gap: 0.1rem; }
    .ix-step-text { margin-left: 0; }
    .ix-clock { font-size: 2.6rem; }
    .ix-alert { transform: none; }
    .ix-greet span { font-size: 1.5rem; }
    .ix-greet span:nth-child(3n+1) { font-size: 2.1rem; }
    .ix-greet span:nth-child(3n+2) { font-size: 1.7rem; }
    .ix-calc-in { padding: 1.5rem; }
    .ix-calc-row { grid-template-columns: 1fr 5.5rem; }
    .ix-tiles li { padding: 1rem 0.9rem; font-size: 0.93rem; }
}