
/* ============================================================
   eits-page.css - page polish for ExplainItSimply
   ============================================================ */
html { scroll-padding-top: 94px; }
body { overflow-wrap: normal; word-break: normal; }
.nav-link.active, .nav-item.active > .nav-link, .mobile-nav-link.active, .mobile-nav-toggle.active { color: var(--primary) !important; background: var(--primary-light); font-weight: 800; }
.dropdown a.active, .mobile-subnav a.active { color: var(--accent-hover) !important; background: #fff7ed; font-weight: 800; }
.eits-hero { position: relative; overflow: hidden; padding: calc(var(--header-h) + 78px) 0 86px; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 62%, #0f766e 100%); color: #fff; }
.eits-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 18% 20%, rgba(255,255,255,.14), transparent 30%), radial-gradient(circle at 84% 20%, rgba(249,115,22,.24), transparent 28%); pointer-events: none; }
.eits-hero .container { position: relative; z-index: 1; }
.eits-breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: rgba(255,255,255,.72); font-size: 13px; margin-bottom: 22px; }
.eits-breadcrumb a { color: #fff; font-weight: 700; }
.eits-breadcrumb a:hover { color: var(--accent); }
.eits-hero h1 { font-family: var(--font-display); font-size: clamp(36px, 6vw, 64px); line-height: 1.06; margin: 0 0 18px; color: #fff; max-width: 980px; text-wrap: balance; }
.eits-hero p { max-width: 790px; color: rgba(255,255,255,.84); font-size: 18px; line-height: 1.8; margin: 0; }
.eits-hero-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.eits-hero-meta span { border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.10); color: #fff; border-radius: 999px; padding: 7px 13px; font-size: 12px; font-weight: 700; }
.eits-wave { position: absolute; left:0; right:0; bottom:-1px; height:56px; }
.eits-wave svg { width:100%; height:100%; display:block; }
.eits-page { background: #fff; padding: 72px 0 96px; }
.eits-layout { display: grid; grid-template-columns: minmax(0, 1fr) 312px; gap: 34px; align-items: start; }
.eits-article { min-width: 0; display: grid; gap: 28px; }
.eits-card { background: #fff; border: 1px solid var(--border); border-radius: 24px; padding: clamp(24px, 4vw, 42px); box-shadow: var(--shadow-sm); overflow-wrap: normal; word-break: normal; }
.eits-card.soft { background: linear-gradient(180deg,#fff,#f8fafc); }
.eits-card h2 { font-family: var(--font-display); font-size: clamp(25px, 3vw, 36px); line-height: 1.18; color: var(--fg); margin: 0 0 16px; scroll-margin-top: 96px; text-wrap: balance; }
.eits-card h3 { font-family: var(--font-display); font-size: clamp(20px, 2.2vw, 25px); line-height: 1.25; color: var(--fg); margin: 28px 0 10px; scroll-margin-top: 96px; }
.eits-card p { font-size: 16.5px; line-height: 1.95; color: #374151; margin: 0 0 18px; max-width: 76ch; }
.eits-card p:last-child { margin-bottom: 0; }
.eits-card ul, .eits-card ol { padding-left: 0; margin: 18px 0; display: grid; gap: 12px; }
.eits-card li { position: relative; padding-left: 28px; font-size: 16px; line-height: 1.85; color: #374151; }
.eits-card ul li::before { content: ''; position: absolute; left: 6px; top: 12px; width: 8px; height: 8px; background: var(--accent); border-radius: 50%; }
.eits-card ol { counter-reset: eits-list; }
.eits-card ol li::before { counter-increment: eits-list; content: counter(eits-list); position:absolute; left:0; top:4px; width:20px; height:20px; border-radius:50%; background:#fff7ed; color:var(--accent); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; }
.eits-two-cards { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; }
.eits-mini { background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; padding: 24px; }
.eits-mini h3 { margin-top:0; }
.eits-mini p { font-size: 15.5px; line-height: 1.85; }
.eits-figure { margin: 0; border-radius: 24px; overflow: hidden; border: 1px solid var(--border); background: var(--bg-subtle); box-shadow: var(--shadow-sm); }
.eits-figure img { width: 100%; max-height: 430px; object-fit: cover; }
.eits-figure figcaption { padding: 14px 18px; font-size: 13px; line-height: 1.65; color: var(--muted); background: #fff; }
.eits-callout { border-left: 5px solid var(--accent); background: #fff7ed; border-radius: 18px; padding: 22px 24px; margin: 22px 0; }
.eits-callout strong { display:block; color: var(--accent-hover); text-transform: uppercase; letter-spacing: .06em; font-size: 12px; margin-bottom: 6px; }
.eits-sidebar { position: sticky; top: 88px; display: grid; gap: 18px; }
.eits-side-card { background:#fff; border:1px solid var(--border); border-radius: 20px; padding: 22px; box-shadow: var(--shadow-sm); }
.eits-side-card h2, .eits-side-card h3, .eits-side-card h4 { font-family: var(--font-display); color: var(--fg); margin:0 0 14px; font-size: 19px; }
.eits-toc { display: grid; gap: 2px; }
.eits-toc a { display:block; padding: 9px 10px; color: var(--muted); border-radius: 10px; font-size: 13.5px; line-height:1.45; font-weight:700; }
.eits-toc a:hover { background: var(--primary-light); color: var(--primary); }
.eits-side-card p { font-size: 14px; line-height: 1.8; color: var(--muted); margin:0; }
.eits-ad-box { min-height: 300px; display:flex; align-items:center; justify-content:center; text-align:center; background: var(--bg-subtle); border: 1px dashed rgba(26,58,107,.25); border-radius: 20px; color: var(--muted); font-size:12px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; }
.eits-related-grid { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; margin-top: 18px; }
.eits-related-card { display:block; padding: 18px; background: var(--bg-card); border:1px solid var(--border); border-radius: 18px; color: var(--fg); font-weight:800; line-height:1.35; }
.eits-related-card:hover { background: var(--primary-light); color: var(--primary); transform: translateY(-2px); }
.eits-cta { text-align:center; background: linear-gradient(135deg, var(--primary), #0f766e); color:#fff; }
.eits-cta h2 { color:#fff; }
.eits-cta p { color: rgba(255,255,255,.84); max-width: 720px; margin-left:auto; margin-right:auto; }
.eits-cta .btn-primary { margin-top: 6px; }
.eits-contact-grid { display:grid; grid-template-columns: 1fr 1.1fr; gap: 24px; align-items:start; }
.eits-contact-panel { background: var(--bg-card); border:1px solid var(--border); border-radius: 22px; padding: 26px; }
.eits-contact-form { display:grid; gap: 16px; }
.eits-field { display:grid; gap: 7px; }
.eits-field label { font-size: 13px; font-weight: 800; color: var(--fg); }
.eits-field input, .eits-field textarea, .eits-field select { width:100%; border:1px solid var(--border); border-radius: 12px; padding: 13px 14px; font-family: var(--font-body); font-size: 15px; color: var(--fg); background:#fff; outline:none; transition: border-color .15s, box-shadow .15s; }
.eits-field textarea { min-height: 150px; resize: vertical; line-height:1.65; }
.eits-field input:focus, .eits-field textarea:focus, .eits-field select:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(26,58,107,.10); }
.eits-help-card { display:flex; gap:14px; padding:16px; border-radius:16px; background:#fff; border:1px solid var(--border); margin-top:14px; }
.eits-help-card strong { display:block; color:var(--fg); margin-bottom:4px; }
.eits-help-card p { font-size:14px; line-height:1.7; color:var(--muted); margin:0; }
.eits-anchor-fix { position: relative; }
@media (max-width: 980px) { .eits-layout { grid-template-columns: 1fr; } .eits-sidebar { position: static; order: -1; } .eits-two-cards, .eits-related-grid, .eits-contact-grid { grid-template-columns: 1fr; } .eits-page { padding-top: 46px; } }
@media (max-width: 620px) { .eits-hero { padding-bottom: 68px; } .eits-card { border-radius: 18px; padding: 22px; } .eits-card p { font-size: 15.8px; line-height:1.9; } }


/* ============================================================
   Homepage and About page polish
   ============================================================ */
.eits-home-hero .hero-bg { background-image: url('../images/home-learning-journey.png'); background-position: right center; opacity: .08; }
.eits-split { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(300px,.95fr); gap: 56px; align-items: center; }
.eits-split.reverse { grid-template-columns: minmax(300px,.95fr) minmax(0,1.05fr); }
.eits-split h2, .eits-standout h2, .eits-promise-box h2 { font-family: var(--font-display); font-size: clamp(30px, 4vw, 46px); line-height: 1.15; margin-bottom: 18px; color: var(--fg); }
.eits-split p, .eits-standout p, .eits-promise-box p { font-size: 16.5px; line-height: 1.85; color: #374151; margin-bottom: 16px; }
.eits-image-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px; box-shadow: var(--shadow-md); }
.eits-image-card img { width: 100%; border-radius: 16px; }
.eits-feature-band { background: var(--bg-subtle); }
.eits-card-grid { display: grid; gap: 22px; }
.eits-card-grid.three { grid-template-columns: repeat(3,1fr); }
.eits-card-grid.four { grid-template-columns: repeat(4,1fr); }
.eits-card { display: block; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 26px; box-shadow: var(--shadow-sm); color: var(--fg); text-decoration: none; transition: transform .18s, box-shadow .18s, border-color .18s; }
.eits-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: rgba(249,115,22,.35); }
.eits-card h3 { font-family: var(--font-display); font-size: 20px; line-height: 1.25; margin-bottom: 10px; color: var(--fg); }
.eits-card p { font-size: 15px; line-height: 1.75; color: var(--muted); margin: 0; }
.eits-five-grid { grid-template-columns: repeat(5,1fr); }
.eits-reader-promise { background: #fff; }
.eits-promise-box { background: #fff7ed; border: 1px solid #fed7aa; border-radius: var(--radius-lg); padding: 34px; }
.eits-quote-panel, .eits-side-note { background: var(--primary); color: #fff; border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow-lg); }
.eits-quote-panel p, .eits-side-note p { color: rgba(255,255,255,.82); font-size: 17px; line-height: 1.8; margin: 0; }
.eits-quote-panel small { display: block; color: rgba(255,255,255,.58); margin-top: 14px; }
.eits-side-note h3 { font-family: var(--font-display); font-size: 26px; color: #fff; margin-bottom: 12px; }
.eits-side-note.warm { background: linear-gradient(135deg, #f97316, #c2410c); }
.eits-hero-grid { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(300px,.95fr); gap: 56px; align-items: center; }
.about-hero { padding-bottom: 86px; }
.eits-values-section { background: #fff; }
.nav-link.active, .nav-item.active > .nav-link, .mobile-nav-link.active, .mobile-nav-toggle.active { color: var(--primary) !important; background: var(--primary-light); font-weight: 800; }
.dropdown a.active, .mobile-subnav a.active { color: var(--accent-hover) !important; background: #fff7ed; font-weight: 800; }
@media (max-width: 1100px) { .eits-five-grid { grid-template-columns: repeat(2,1fr); } .eits-card-grid.four { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 860px) { .eits-split, .eits-split.reverse, .eits-hero-grid { grid-template-columns: 1fr; gap: 32px; } .eits-card-grid.three, .eits-card-grid.four, .eits-five-grid { grid-template-columns: 1fr; } .eits-promise-box, .eits-side-note, .eits-quote-panel { padding: 24px; } }


/* ============================================================
   Final professional polish pass
   ============================================================ */
.logo { font-size: 24px; letter-spacing: -0.02em; }
.footer-brand .logo, .footer-brand .logo span { color: var(--accent) !important; }
.footer-brand p { max-width: 360px; }
.nav-link.active, .nav-item.active > .nav-link, .mobile-nav-link.active, .mobile-nav-toggle.active {
  color: var(--primary) !important;
  background: var(--primary-light) !important;
  font-weight: 800 !important;
}
.dropdown a.active, .mobile-subnav a.active { color: var(--accent-hover) !important; background: #fff7ed !important; font-weight: 800 !important; }
.eits-table-wrap { width: 100%; overflow-x: auto; margin: 22px 0; border: 1px solid var(--border); border-radius: 18px; background:#fff; }
.eits-table-wrap table { width: 100%; min-width: 640px; border-collapse: collapse; }
.eits-table-wrap th { background: var(--primary); color:#fff; font-weight:800; text-align:left; padding:14px 16px; font-size:13px; }
.eits-table-wrap td { padding:14px 16px; border-bottom:1px solid var(--border); color:#374151; line-height:1.65; vertical-align:top; }
.eits-table-wrap tr:last-child td { border-bottom:0; }
.eits-table-wrap tr:nth-child(even) td { background:#f8fafc; }
.eits-visual-row { display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; margin: 4px 0; }
.eits-visual-row .eits-figure img { max-height: 340px; }
.eits-figure-wide img { max-height: 500px; object-fit: cover; }
.eits-card .content-list, .eits-card ul.content-list { display:grid; gap:14px; padding:0; margin:20px 0; }
.eits-card .content-list li { padding-left: 32px; }
.eits-layer-grid { display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:18px; margin:22px 0; }
.eits-layer-card { background:#f8fafc; border:1px solid var(--border); border-radius:18px; padding:20px; }
.eits-layer-card strong { display:block; font-family:var(--font-display); font-size:20px; color:var(--fg); margin-bottom:8px; }
.eits-layer-card p { font-size:15.5px; line-height:1.8; margin:0; color:#374151; }
.eits-home-link-fix { cursor:pointer; }
@media (max-width: 860px) { .eits-visual-row, .eits-layer-grid { grid-template-columns: 1fr; } .logo { font-size:22px; } }
@media (max-width: 620px) { .eits-table-wrap table { min-width: 540px; } .logo { font-size:21px; } }


/* ===== ExplainItSimply platform upgrades ===== */
.logo{font-size:24px}.footer-logo span,.brand-orange{color:var(--accent)!important}.nav-link.active-parent,.nav-item.active-parent>.nav-link,.mobile-nav-link.active-parent,.mobile-nav-item.active-parent>.mobile-nav-toggle{background:var(--primary-light);color:var(--primary);font-weight:800}.dropdown a.active-link,.mobile-subnav a.active-link{background:#fff7ed;color:var(--accent-hover);font-weight:800}.eits-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:34px;align-items:start}.eits-sidebar{position:sticky;top:88px;display:flex;flex-direction:column;gap:18px}.sidebar-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:22px;box-shadow:var(--shadow-sm)}.sidebar-card h3{font-family:var(--font-display);font-size:20px;margin-bottom:12px}.sidebar-card a{display:block;color:var(--primary);font-weight:700;margin:10px 0;font-size:14px}.sidebar-card p{color:var(--muted);line-height:1.7;font-size:14px;margin-bottom:14px}.did-you-know{background:linear-gradient(135deg,#fff7ed,#ffffff);border:1px solid rgba(249,115,22,.25);border-left:5px solid var(--accent);border-radius:18px;padding:20px 24px;margin:28px 0;box-shadow:var(--shadow-sm)}.did-you-know strong{display:block;color:var(--accent-hover);font-size:13px;text-transform:uppercase;letter-spacing:.09em;margin-bottom:8px}.did-you-know p{margin:0;color:#374151;line-height:1.8}.learning-visual{margin:30px 0;border-radius:22px;overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow-md);background:#fff}.learning-visual img{width:100%;height:auto;display:block}.learning-visual figcaption{font-size:13px;color:var(--muted);padding:12px 18px;background:#fff;line-height:1.5}.visual-2{max-width:720px}.visual-3{max-width:520px;margin-left:auto;margin-right:auto}.deep-section,.value-card,.promise-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px;margin:32px 0;box-shadow:var(--shadow-sm)}.deep-section h2,.value-card h3,.promise-card h3{font-family:var(--font-display);color:var(--fg);margin-bottom:14px}.deep-section p,.promise-card p{font-size:16.5px;line-height:1.9;color:#374151;margin-bottom:16px}.value-card{background:#f6f8fc}.value-card ul{margin:0;padding:0;display:grid;gap:12px}.value-card li{list-style:none;position:relative;padding-left:28px;line-height:1.75;color:#374151}.value-card li:before{content:'v';position:absolute;left:0;top:0;color:var(--accent);font-weight:900}.layer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:22px 0}.layer-grid div{background:#f0f4fb;border:1px solid var(--border);border-radius:16px;padding:18px}.layer-grid strong{display:block;font-size:17px;color:var(--primary);margin-bottom:8px}.responsive-table-wrap,.table-wrapper,.comparison-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}.comparison-table,table{width:100%;border-collapse:collapse;min-width:680px}.eits-article ul,.eits-article ol{padding-left:0}.eits-article li{line-height:1.75;margin-bottom:10px}.cta-ribbon{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;border-radius:24px;padding:34px;margin:40px 0;box-shadow:var(--shadow-lg)}.cta-ribbon h2{font-family:var(--font-display);font-size:30px;margin-bottom:10px;color:#fff}.cta-ribbon p{color:rgba(255,255,255,.78);line-height:1.8;margin-bottom:18px}.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.blog-card{background:#fff;border:1px solid var(--border);border-radius:20px;padding:24px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;min-height:230px}.blog-card .article-cat{align-self:flex-start;margin-bottom:12px}.blog-card h3{font-family:var(--font-display);font-size:22px;margin-bottom:10px}.blog-card p{color:var(--muted);line-height:1.7;flex:1}.counter-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:30px 0}.counter-card{background:#fff;border:1px solid var(--border);border-radius:18px;padding:22px;text-align:center;box-shadow:var(--shadow-sm)}.counter-card strong{display:block;font-family:var(--font-display);font-size:34px;color:var(--primary)}.counter-card span{font-size:13px;color:var(--muted)}.scroll-reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease, transform .7s ease}.scroll-reveal.is-visible{opacity:1;transform:none}.footer-brand p strong{font-weight:800}.ad-slot.sidebar-ad{border-radius:18px;border:1px dashed var(--border);min-height:250px}.homepage-quick-links a[href="#"],.articles-cta a[href="#"]{pointer-events:auto}@media(max-width:980px){.eits-layout{grid-template-columns:1fr}.eits-sidebar{position:static;display:grid;grid-template-columns:1fr}.blog-grid{grid-template-columns:1fr 1fr}.counter-strip{grid-template-columns:1fr 1fr}.layer-grid{grid-template-columns:1fr}.logo{font-size:22px}}@media(max-width:640px){.blog-grid,.counter-strip{grid-template-columns:1fr}.deep-section,.value-card,.promise-card,.cta-ribbon{padding:22px}.learning-visual{border-radius:16px}}


/* ===== FAQ, learning path and AdSense readiness polish ===== */
.nav-link.active-parent,.nav-item.active-parent>.nav-link,.mobile-nav-link.active-parent,.mobile-nav-item.active-parent>.mobile-nav-toggle{background:var(--primary-light)!important;color:var(--primary)!important;font-weight:800!important}.dropdown a.active-link,.mobile-subnav a.active-link{background:#fff7ed!important;color:var(--accent-hover)!important;font-weight:800!important}.faq-section{scroll-margin-top:96px}.faq-section .section-label{margin-bottom:10px}.faq-accordion{display:grid;gap:14px;margin-top:20px}.faq-item{border:1px solid var(--border);border-radius:18px;background:#fff;box-shadow:var(--shadow-sm);overflow:hidden}.faq-item summary{list-style:none;cursor:pointer;padding:18px 54px 18px 20px;font-weight:800;color:var(--fg);position:relative;line-height:1.45}.faq-item summary::-webkit-details-marker{display:none}.faq-item summary:after{content:'+';position:absolute;right:18px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;background:#fff7ed;color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:900}.faq-item[open] summary{background:var(--bg-subtle);color:var(--primary)}.faq-item[open] summary:after{content:'-';background:var(--accent);color:#fff}.faq-answer{padding:0 20px 20px;color:#374151;font-size:16px;line-height:1.85}.learning-nav{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:28px 0}.learning-nav a{display:block;border:1px solid var(--border);border-radius:18px;padding:20px;background:#fff;box-shadow:var(--shadow-sm);color:var(--fg)}.learning-nav a:hover{border-color:rgba(249,115,22,.45);box-shadow:var(--shadow-md);transform:translateY(-2px)}.learning-nav small{display:block;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-size:11px;font-weight:800;margin-bottom:8px}.learning-nav strong{font-family:var(--font-display);font-size:20px;color:var(--primary);line-height:1.25}.site-faq-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.faq-category-card{border:1px solid var(--border);border-radius:22px;background:#fff;padding:24px;box-shadow:var(--shadow-sm)}.faq-category-card h2{font-family:var(--font-display);font-size:26px;margin:0 0 10px}.faq-category-card p{color:var(--muted);line-height:1.75;margin-bottom:18px}.trust-note{background:#f0fdf4;border-left:5px solid #16a34a;border-radius:18px;padding:20px 24px;margin:24px 0}.trust-note strong{display:block;color:#15803d;text-transform:uppercase;letter-spacing:.08em;font-size:12px;margin-bottom:8px}.legal-page .eits-card h2{margin-top:6px}.legal-page .eits-card p{max-width:82ch}@media(max-width:780px){.learning-nav,.site-faq-grid{grid-template-columns:1fr}.faq-item summary{padding-right:48px}}

/* ============================================================
   Layout stability patch - no content changes
   Fixes sidebar overlap, table overflow, card stretching and smooth accordions
   ============================================================ */
* { box-sizing: border-box; }
html { scroll-padding-top: 96px; }
body { overflow-x: hidden; }
.container { width: 100%; }
.eits-page .container,
.eits-layout { max-width: 1200px; margin-left: auto; margin-right: auto; }
.eits-layout {
  width: 100%;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 300px) !important;
  gap: clamp(22px, 3vw, 38px) !important;
  align-items: start !important;
}
.eits-article, .eits-main, article.eits-article { min-width: 0 !important; max-width: 100% !important; }
.eits-sidebar {
  width: 100%;
  min-width: 0;
  align-self: start;
  position: sticky;
  top: 88px;
  z-index: 1;
}
.eits-card, .deep-section, .value-card, .promise-card, .cta-ribbon, .faq-section {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: normal;
}
.eits-card:hover { transform: none; }
.eits-card p, .deep-section p, .promise-card p { max-width: 78ch; }
.eits-card img, .learning-visual img, .eits-figure img { max-width: 100%; height: auto; }
.eits-visual-row, .eits-two-cards, .eits-related-grid, .blog-grid, .counter-strip, .layer-grid, .eits-layer-grid { min-width: 0; }
.eits-visual-row > *, .eits-two-cards > *, .eits-related-grid > *, .blog-grid > *, .counter-strip > *, .layer-grid > *, .eits-layer-grid > * { min-width: 0; }
/* Tables must scroll inside the article instead of pushing under the sidebar */
.eits-article table,
.article-content table,
.comparison-table {
  width: 100%;
  max-width: 100%;
  min-width: 640px;
  border-collapse: collapse;
}
.eits-article table:not(.no-scroll-table),
.article-content table:not(.no-scroll-table) {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.responsive-table-wrap, .table-wrapper, .comparison-table-wrap, .eits-table-wrap {
  max-width: 100%;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}
/* Lists must align cleanly */
.eits-article ul, .eits-article ol, .article-content ul, .article-content ol {
  max-width: 78ch;
}
.eits-article li, .article-content li {
  overflow-wrap: break-word;
}
/* FAQ accordion smooth open/close feel */
.faq-item {
  transition: box-shadow .25s ease, border-color .25s ease, transform .25s ease;
}
.faq-item:hover {
  border-color: rgba(249,115,22,.35);
  box-shadow: var(--shadow-md);
}
.faq-item summary::after { transition: transform .25s ease, background .25s ease, color .25s ease; }
.faq-item[open] summary::after { transform: translateY(-50%) rotate(180deg); }
.faq-answer {
  animation: eitsFaqFade .24s ease both;
}
@keyframes eitsFaqFade {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 1100px) {
  .eits-layout { grid-template-columns: minmax(0,1fr) 270px !important; gap: 24px !important; }
}
@media (max-width: 980px) {
  .eits-layout { grid-template-columns: 1fr !important; }
  .eits-sidebar { position: static !important; order: 2 !important; }
  .eits-article { order: 1; }
  .eits-side-card, .eits-ad-box { max-width: 100%; }
}
@media (max-width: 720px) {
  .eits-card p, .deep-section p, .promise-card p, .eits-article ul, .eits-article ol { max-width: 100%; }
  .eits-visual-row, .eits-two-cards, .eits-related-grid, .blog-grid, .counter-strip, .layer-grid, .eits-layer-grid { grid-template-columns: 1fr !important; }
  .eits-article table, .article-content table, .comparison-table { min-width: 560px; }
}


/* ============================================================
   Real image + value sections added for AdSense-ready pass
   ============================================================ */
.eits-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:34px;align-items:start;}
.eits-article{min-width:0;}
.eits-sidebar{position:sticky;top:86px;align-self:start;z-index:1;}
.real-image-card{margin:30px 0;border-radius:22px;overflow:hidden;background:#fff;border:1px solid var(--border);box-shadow:var(--shadow-md);}
.real-image-card img{width:100%;height:clamp(260px,36vw,430px);object-fit:cover;display:block;}
.real-image-card figcaption{font-size:13px;line-height:1.6;color:var(--muted);padding:12px 18px;background:#fff;}
.real-life-section{background:#fff;}
.real-life-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:18px;}
.real-life-card{border:1px solid var(--border);border-radius:16px;background:var(--bg-card);padding:18px;}
.real-life-card h3{font-family:var(--font-display);font-size:18px;margin:0 0 8px;color:var(--fg);}
.real-life-card p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.7;}
.eits-table-wrap,.table-wrapper{overflow-x:auto;max-width:100%;}
.eits-table-wrap table,.table-wrapper table{min-width:640px;}
.eits-article ul:not(.related-list){padding-left:0;}
.eits-article li{line-height:1.75;}
@media (max-width: 980px){.eits-layout{display:block}.eits-sidebar{position:static;margin-top:26px}.real-life-grid{grid-template-columns:1fr}.real-image-card img{height:260px}}

.sidebar-real-image{width:100%;height:150px;object-fit:cover;border-radius:14px;margin-top:16px;border:1px solid var(--border);}

/* Final mobile safety override */
@media (max-width:768px){.hero.has-hero-slider{min-height:calc(100svh - var(--header-h))!important;height:auto!important}.eits-hero.has-hero-slider,.page-hero.has-hero-slider{min-height:auto!important}.hero-slider-image{background-size:cover!important;background-position:center!important}}

/* ============================================================
   ExplainItSimply - Deeper Understanding final readable style
   Applies globally to all article pages using .eits-deep-dive
   ============================================================ */

.eits-deep-dive,
section.eits-deep-dive {
  max-width: 1120px !important;
  margin: 64px auto !important;
  padding: clamp(28px, 4vw, 52px) !important;
  border: 1px solid rgba(26, 58, 107, 0.12) !important;
  border-radius: 26px !important;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;
  box-shadow: 0 18px 50px rgba(15, 35, 72, 0.08) !important;
  color: #102a56 !important;
  font-family: var(--font-body, 'Plus Jakarta Sans', system-ui, sans-serif) !important;
  line-height: 1.85 !important;
  overflow: hidden !important;
}

.eits-deep-dive *,
section.eits-deep-dive * {
  box-sizing: border-box !important;
}

.eits-deep-dive .section-label,
section.eits-deep-dive .section-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: auto !important;
  margin: 0 0 18px 0 !important;
  padding: 8px 13px !important;
  border-radius: 999px !important;
  background: rgba(249, 115, 22, 0.10) !important;
  color: #f97316 !important;
  font-family: var(--font-body, 'Plus Jakarta Sans', system-ui, sans-serif) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.16em !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
}

.eits-deep-dive .section-label::before,
section.eits-deep-dive .section-label::before {
  content: "" !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #f97316 !important;
  display: inline-block !important;
}

.eits-deep-dive h2,
section.eits-deep-dive h2 {
  max-width: 920px !important;
  margin: 0 0 34px 0 !important;
  color: #061b45 !important;
  font-family: var(--font-display, 'Fraunces', Georgia, serif) !important;
  font-size: clamp(30px, 3.6vw, 48px) !important;
  font-weight: 800 !important;
  line-height: 1.18 !important;
  letter-spacing: -0.03em !important;
}

.eits-deep-dive h3,
section.eits-deep-dive h3 {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 36px 0 13px 0 !important;
  color: #102a56 !important;
  font-family: var(--font-body, 'Plus Jakarta Sans', system-ui, sans-serif) !important;
  font-size: clamp(20px, 2vw, 26px) !important;
  font-weight: 800 !important;
  line-height: 1.32 !important;
  letter-spacing: -0.015em !important;
}

.eits-deep-dive h3::before,
section.eits-deep-dive h3::before {
  content: "" !important;
  width: 10px !important;
  height: 10px !important;
  flex: 0 0 10px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #f97316, #1a3a6b) !important;
  box-shadow: 0 0 0 6px rgba(249,115,22,0.09) !important;
}

.eits-deep-dive h4,
section.eits-deep-dive h4 {
  margin: 0 0 12px 0 !important;
  color: #0f2348 !important;
  font-family: var(--font-body, 'Plus Jakarta Sans', system-ui, sans-serif) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
}

.eits-deep-dive p,
section.eits-deep-dive p {
  max-width: 980px !important;
  margin: 0 0 22px 0 !important;
  color: #34415d !important;
  font-family: var(--font-body, 'Plus Jakarta Sans', system-ui, sans-serif) !important;
  font-size: clamp(16px, 1.18vw, 18px) !important;
  font-weight: 400 !important;
  line-height: 1.95 !important;
}

.eits-deep-dive p:last-child,
section.eits-deep-dive p:last-child {
  margin-bottom: 0 !important;
}

.eits-question-card,
.eits-deep-dive .eits-question-card,
section.eits-deep-dive .eits-question-card {
  margin: 28px 0 34px 0 !important;
  padding: clamp(22px, 3vw, 32px) !important;
  border: 1px solid rgba(249, 115, 22, 0.22) !important;
  border-left: 6px solid #f97316 !important;
  border-radius: 22px !important;
  background: linear-gradient(135deg, #fff7ed 0%, #ffffff 70%) !important;
  box-shadow: 0 12px 30px rgba(249, 115, 22, 0.08) !important;
}

.eits-question-card h3,
.eits-deep-dive .eits-question-card h3,
section.eits-deep-dive .eits-question-card h3 {
  margin-top: 0 !important;
  color: #0f2348 !important;
}

.eits-question-card p,
.eits-deep-dive .eits-question-card p,
section.eits-deep-dive .eits-question-card p {
  margin-bottom: 0 !important;
  color: #334155 !important;
}

.eits-flow-diagram,
.eits-deep-dive .eits-flow-diagram,
section.eits-deep-dive .eits-flow-diagram {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 14px !important;
  margin: 30px 0 38px 0 !important;
  padding: 26px !important;
  border-radius: 24px !important;
  background: linear-gradient(135deg, #0f2348 0%, #1a3a6b 100%) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), 0 16px 32px rgba(15,35,72,0.12) !important;
  overflow-x: auto !important;
}

.eits-flow-diagram span,
.eits-deep-dive .eits-flow-diagram span,
section.eits-deep-dive .eits-flow-diagram span {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
  padding: 10px 17px !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.12) !important;
  color: #ffffff !important;
  font-family: var(--font-body, 'Plus Jakarta Sans', system-ui, sans-serif) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
}

.eits-flow-diagram span:not(:last-child)::after,
.eits-deep-dive .eits-flow-diagram span:not(:last-child)::after,
section.eits-deep-dive .eits-flow-diagram span:not(:last-child)::after {
  content: "→" !important;
  margin-left: 14px !important;
  color: #f97316 !important;
  font-weight: 900 !important;
}

.eits-deep-grid,
.eits-deep-dive .eits-deep-grid,
section.eits-deep-dive .eits-deep-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 22px !important;
  margin: 34px 0 38px 0 !important;
}

.eits-mini-card,
.eits-deep-dive .eits-mini-card,
section.eits-deep-dive .eits-mini-card {
  min-width: 0 !important;
  padding: 26px !important;
  border: 1px solid rgba(26, 58, 107, 0.12) !important;
  border-radius: 22px !important;
  background: #ffffff !important;
  box-shadow: 0 12px 30px rgba(15, 35, 72, 0.07) !important;
}

.eits-mini-card p,
.eits-deep-dive .eits-mini-card p,
section.eits-deep-dive .eits-mini-card p {
  font-size: 16px !important;
  line-height: 1.85 !important;
  margin-bottom: 0 !important;
}

.eits-summary-card,
.eits-deep-dive .eits-summary-card,
section.eits-deep-dive .eits-summary-card {
  margin: 42px 0 0 0 !important;
  padding: clamp(24px, 3vw, 34px) !important;
  border: 1px solid rgba(26, 58, 107, 0.14) !important;
  border-radius: 24px !important;
  background: linear-gradient(135deg, #eef6ff 0%, #ffffff 78%) !important;
  box-shadow: 0 14px 34px rgba(15, 35, 72, 0.08) !important;
}

.eits-summary-card h3,
.eits-deep-dive .eits-summary-card h3,
section.eits-deep-dive .eits-summary-card h3 {
  margin-top: 0 !important;
}

.eits-summary-card p,
.eits-deep-dive .eits-summary-card p,
section.eits-deep-dive .eits-summary-card p {
  margin-bottom: 0 !important;
}

.eits-deep-dive a,
section.eits-deep-dive a {
  color: #1d4ed8 !important;
  font-weight: 800 !important;
  text-decoration: underline !important;
  text-underline-offset: 4px !important;
}

@media (max-width: 768px) {
  .eits-deep-dive,
  section.eits-deep-dive {
    margin: 42px 14px !important;
    padding: 24px 18px !important;
    border-radius: 20px !important;
  }

  .eits-deep-dive h2,
  section.eits-deep-dive h2 {
    font-size: 30px !important;
    line-height: 1.25 !important;
    margin-bottom: 26px !important;
  }

  .eits-deep-dive h3,
  section.eits-deep-dive h3 {
    font-size: 21px !important;
    line-height: 1.35 !important;
    margin-top: 30px !important;
  }

  .eits-deep-dive p,
  section.eits-deep-dive p {
    font-size: 16px !important;
    line-height: 1.85 !important;
    margin-bottom: 20px !important;
  }

  .eits-deep-grid,
  .eits-deep-dive .eits-deep-grid,
  section.eits-deep-dive .eits-deep-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .eits-flow-diagram,
  .eits-deep-dive .eits-flow-diagram,
  section.eits-deep-dive .eits-flow-diagram {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 20px !important;
  }

  .eits-flow-diagram span,
  .eits-deep-dive .eits-flow-diagram span,
  section.eits-deep-dive .eits-flow-diagram span {
    width: 100% !important;
  }

  .eits-flow-diagram span:not(:last-child)::after,
  .eits-deep-dive .eits-flow-diagram span:not(:last-child)::after,
  section.eits-deep-dive .eits-flow-diagram span:not(:last-child)::after {
    content: "↓" !important;
    position: static !important;
    margin-left: 12px !important;
  }
}
