/* ==========================================================================
   module-cis-v2.css — dedicated CIS tax-return step-1 landing (/tax-return/cis)

   PROBLEM: the CIS step-1 landing needs its own unique sections (stats band,
   "What is CIS" two-col + deduction-rates callout + quick example, rebate
   estimate tiles, 4-step process rail, expense grid, why-Tax2U cards,
   testimonials, FAQ accordion, CTA band) that the shared utr-step1-redesign.css
   does not provide classes for.
   SOLUTION: this stylesheet defines ONLY the cis2- (CIS-specific) section classes.
   The hero + form card reuse the SHARED utr1- classes from utr-step1-redesign.css.
   Colours = the established Tax2U step-1 brand palette (navy #0D2240 / blue
   #1B75BC / cyan #00AEEF), font = site-wide Inter. Build date 28 Sep 2026.
   ========================================================================== */

.cis2-hero { background: linear-gradient(135deg, #081729 0%, #0D2240 40%, #0f2d5a 100%); }
.cis2-hero-badge-dot { width:7px; height:7px; background:var(--cyan,#00AEEF); border-radius:50%; display:inline-block; margin-right:8px; }
.cis2-hero-body { color: rgba(255,255,255,0.72); font-size:15px; line-height:1.65; max-width:560px; margin:-6px 0 22px; }

/* Hero feature mini-grid (2x2) — the hero trust/proof area of the shared v4 hero */
.cis2-hero-features { display:grid; grid-template-columns:1fr 1fr; gap:12px 28px; }
.cis2-hero-feat { display:flex; align-items:center; gap:10px; font-size:14px; color:rgba(255,255,255,0.8); font-weight:500; }
.cis2-hero-feat-ico { flex-shrink:0; width:22px; height:22px; color:var(--cyan,#00AEEF); }
.cis2-hero-feat-ico svg { width:22px; height:22px; }
.cis2-hero-divider { border:none; border-top:1px solid rgba(255,255,255,0.14); margin:26px 0 22px; }

/* Form card CTA arrow (Inter-friendly replacement for the design emoji) */
.cis2-btn-arrow { font-weight:700; }

/* ── STATS BAND ── */
.cis2-stats-band { background:var(--navy,#0D2240); padding:34px 24px; }
.cis2-stats-inner { max-width:1180px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center; }
.cis2-stat-value { font-size:32px; font-weight:800; color:var(--cyan,#00AEEF); line-height:1; margin-bottom:6px; }
.cis2-stat-label { font-size:13px; font-weight:500; color:rgba(255,255,255,0.7); }

/* ── SECTION COMMON ── */
.cis2-section-inner { max-width:1180px; margin:0 auto; }
.cis2-eyebrow { font-size:12px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--blue,#1B75BC); margin-bottom:10px; }
.cis2-eyebrow-light { color:var(--cyan,#00AEEF); }
.cis2-h2 { font-size:clamp(24px,2.8vw,34px); font-weight:800; color:var(--navy,#0D2240); margin-bottom:14px; text-wrap:balance; line-height:1.2; }
.cis2-h2-light { color:#fff; }
.cis2-sub { font-size:16px; color:#4A5568; max-width:640px; line-height:1.65; margin-bottom:44px; }
.cis2-sub-light { color:rgba(255,255,255,0.7); }

/* ── WHAT IS CIS ── */
.cis2-what { background:var(--off-white,#F7F9FC); padding:72px 24px; }
.cis2-what-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
.cis2-what-text p { font-size:15px; color:#4A5568; line-height:1.75; margin-bottom:18px; }
.cis2-who-qualifies { margin-top:32px; }
.cis2-who-qualifies h3 { font-size:16px; font-weight:700; color:var(--cyan,#00AEEF); margin-bottom:14px; }
.cis2-trade-chips { display:flex; flex-wrap:wrap; gap:8px; }
.cis2-trade-chip { background:#EEF2F7; color:var(--cyan,#00AEEF); font-size:13px; font-weight:600; padding:6px 14px; border-radius:20px; border:1px solid #DDE4EE; }
.cis2-what-side { display:flex; flex-direction:column; gap:20px; }
.cis2-callout { background:var(--navy,#0D2240); color:#fff; border-radius:14px; padding:28px; }
.cis2-callout h3 { font-size:17px; font-weight:700; margin-bottom:16px; color:var(--cyan,#00AEEF); }
.cis2-deduction-row { display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid rgba(255,255,255,0.12); font-size:14px; }
.cis2-deduction-row:last-of-type { border-bottom:none; }
.cis2-deduction-type { color:rgba(255,255,255,0.78); }
.cis2-deduction-rate { font-size:22px; font-weight:800; color:var(--cyan,#00AEEF); }
.cis2-deduction-note { font-size:13px; color:rgba(255,255,255,0.56); margin-top:16px; line-height:1.6; }
.cis2-quick-example { background:#fff; border:1px solid #DDE4EE; border-radius:14px; padding:24px; }
.cis2-qe-title { font-size:14px; font-weight:700; color:var(--navy,#0D2240); margin-bottom:8px; }
.cis2-qe-body { font-size:14px; color:#4A5568; line-height:1.65; }

/* ── REBATE ESTIMATES ── */
.cis2-rebate { background:#fff; padding:72px 24px; }
.cis2-rebate-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.cis2-rebate-card { background:var(--off-white,#F7F9FC); border:1px solid #DDE4EE; border-radius:14px; padding:28px 24px; position:relative; overflow:hidden; }
.cis2-rebate-card.featured { background:var(--navy,#0D2240); border-color:var(--navy,#0D2240); color:#fff; }
.cis2-rebate-badge { position:absolute; top:5px; right:5px; background:var(--cyan,#00AEEF); color:var(--navy,#0D2240); font-size:11px; font-weight:700; padding:4px 10px; border-radius:20px; text-transform:uppercase; letter-spacing:0.5px; }
.cis2-rebate-earnings { font-size:13px; font-weight:600; color:#718096; margin-bottom:8px; text-transform:uppercase; letter-spacing:0.7px; }
.cis2-rebate-card.featured .cis2-rebate-earnings { color:rgba(255,255,255,0.65); }
.cis2-rebate-amount { font-size:40px; font-weight:800; color:var(--navy,#0D2240); line-height:1; margin-bottom:8px; }
.cis2-rebate-card.featured .cis2-rebate-amount { color:var(--cyan,#00AEEF); }
.cis2-rebate-note { font-size:13px; color:#718096; line-height:1.5; }
.cis2-rebate-card.featured .cis2-rebate-note { color:rgba(255,255,255,0.68); }
.cis2-rebate-disclaimer { text-align:center; font-size:13px; color:#718096; margin-top:24px; }

/* ── HOW IT WORKS ── */
.cis2-how { background:var(--off-white,#F7F9FC); padding:72px 24px; }
.cis2-steps-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:28px; position:relative; }
.cis2-step-item { text-align:center; position:relative; }
.cis2-step-num { width:56px; height:56px; background:var(--blue,#1B75BC); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:800; color:#fff; margin:0 auto 18px; box-shadow:0 0 0 6px var(--off-white,#F7F9FC); }
.cis2-step-title { font-size:15px; font-weight:700; color:var(--navy,#0D2240); margin-bottom:8px; }
.cis2-step-desc { font-size:13px; color:#4A5568; line-height:1.6; }

/* ── EXPENSES ── */
.cis2-expenses { background:#fff; padding:72px 24px; }
.cis2-expenses-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.cis2-expense-item { display:flex; align-items:flex-start; gap:14px; background:var(--off-white,#F7F9FC); border:1px solid #DDE4EE; border-radius:12px; padding:20px; }
.cis2-expense-icon { flex-shrink:0; width:44px; height:44px; background:rgba(27,117,188,0.1); border-radius:10px; display:flex; align-items:center; justify-content:center; color:var(--blue,#1B75BC); }
.cis2-expense-icon svg { width:24px; height:24px; }
.cis2-expense-text h4 { font-size:14px; font-weight:700; color:var(--navy,#0D2240); margin-bottom:4px; }
.cis2-expense-text p { font-size:13px; color:#4A5568; line-height:1.5; }

/* ── WHY TAX2U ── */
.cis2-why { background:var(--navy,#0D2240); padding:72px 24px; }
.cis2-why-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.cis2-why-card { background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); border-radius:14px; padding:28px 24px; }
.cis2-why-icon { width:44px; height:44px; color:var(--cyan,#00AEEF); margin-bottom:14px; }
.cis2-why-icon svg { width:44px; height:44px; }
.cis2-why-card h3 { font-size:16px; font-weight:700; color:#fff; margin-bottom:8px; }
.cis2-why-card p { font-size:14px; color:rgba(255,255,255,0.68); line-height:1.65; }

/* ── TESTIMONIALS ── */
.cis2-testimonials { background:var(--off-white,#F7F9FC); padding:72px 24px; }
.cis2-testimonial-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.cis2-testimonial-card { background:#fff; border:1px solid #DDE4EE; border-radius:14px; padding:24px; box-shadow:0 4px 24px rgba(13,34,64,0.08); }
.cis2-testimonial-stars { color:#00B67A; font-size:15px; margin-bottom:12px; }
.cis2-testimonial-text { font-size:14px; color:#4A5568; line-height:1.65; margin-bottom:16px; font-style:italic; }
.cis2-testimonial-author { font-size:13px; font-weight:700; color:var(--navy,#0D2240); }
.cis2-testimonial-trade { font-size:12px; color:#718096; }

/* ── FAQ ── */
.cis2-faq { background:#fff; padding:72px 24px; }
.cis2-faq-list { max-width:780px; }
.cis2-faq-item { border-bottom:1px solid #DDE4EE; }
.cis2-faq-q { width:100%; background:none; border:none; text-align:left; padding:20px 0; font-size:16px; font-weight:600; color:var(--navy,#0D2240); font-family:'Inter',sans-serif; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.cis2-faq-arrow { font-size:18px; font-weight:400; color:var(--blue,#1B75BC); flex-shrink:0; transition:transform 0.25s; }
.cis2-faq-a { display:none; padding-bottom:18px; font-size:15px; color:#4A5568; line-height:1.7; }
.cis2-faq-item.open .cis2-faq-arrow { transform:rotate(45deg); }
.cis2-faq-item.open .cis2-faq-a { display:block; }

/* ── CTA BAND ── */
.cis2-cta { background:linear-gradient(135deg,#1B75BC 0%,#0f4a8a 100%); padding:60px 24px; text-align:center; }
.cis2-cta h2 { font-size:clamp(26px,3vw,36px); font-weight:800; color:#fff; margin-bottom:12px; text-wrap:balance; }
.cis2-cta p { font-size:16px; color:rgba(255,255,255,0.82); margin-bottom:28px; max-width:560px; margin-left:auto; margin-right:auto; line-height:1.6; }
.cis2-cta-btn { display:inline-block; padding:16px 36px; background:#fff; color:var(--blue,#1B75BC); font-size:16px; font-weight:700; border-radius:10px; text-decoration:none; }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
	.cis2-stats-inner { grid-template-columns:repeat(2,1fr); }
	.cis2-what-grid, .cis2-rebate-grid, .cis2-steps-grid, .cis2-why-grid, .cis2-testimonial-grid, .cis2-expenses-grid { grid-template-columns:1fr; }
}
@media (max-width: 600px) {
	.cis2-hero-features { grid-template-columns:1fr; }
}
/* EDIT (28 Sep 2026): on mobile stack the CIS hero so the feature grid sits BELOW the form
   card (Charan) — same pattern as the SA hero. The shared utr-step1-redesign.css makes
   .utr1-hero a column at <=768px; unwrap .utr1-hero-content with display:contents so its
   children become direct flex children, then order the form card first and the feature
   grid after it. Scoped to .utr1-hero.cis2-hero so the SA hero (which has its own rules)
   is unaffected. */
@media (max-width: 768px) {
	.utr1-hero.cis2-hero > .utr1-hero-content { display:contents; }
   /* EDIT (29 Sep 2026): mobile gap tighten (Charan). The shared utr-step1-redesign.css
	   mobile rule sets .utr1-hero { gap:24px }, which spaces hero-content above the form
	   card too wide on the CIS page. Scoped override to .utr1-hero.cis2-hero (never on UTR)
	   so the hero->form gap drops to 0px on mobile only. Desktop 56px*/
   .utr1-hero.cis2-hero { gap: 0px; }
	/* EDIT (28 Sep 2026): form card sits directly below the trust checks. The shared
	   .utr1-hero already adds gap:24px on mobile, so the form card uses margin-top:0 —
	   an extra margin would double the gap above the card. */
	.utr1-hero.cis2-hero .utr1-form-card { order:1; width:100%; margin-top:12px; margin-bottom:12px; }
	.utr1-hero.cis2-hero .cis2-hero-features { order:2; width:100%; margin-bottom:24px; }
	/* EDIT (28 Sep 2026): desired mobile order = badge -> h1 -> sub -> body -> trustpilot ->
	   trust checks -> FORM -> feature grid (Charan). Trust sits ABOVE the form in natural
	   source order (order:0); form order:1; features order:2 below. Hide the divider hr on
	   mobile so it doesn't render between the trust checks and the form card. */
	.utr1-hero.cis2-hero .cis2-hero-divider { display:none; }
}