/* ============================================================
   RESIDENTIAL PAGE — page-specific styles
   (base tokens, .wrap, .sec, .label, .title, .btn variants,
    body/heading fonts come from style.css)
   ============================================================ */

/* directional tweaks */
[dir="ltr"] .cmp th, [dir="ltr"] .cmp td { text-align:left; }
[dir="ltr"] .prob-fix { border-right:none; border-left:3px solid var(--teal-d); }
[dir="rtl"] .faq-item summary::before { font-family:'Rubik',sans-serif; content:"+"; font-size:1.4rem; font-weight:900; color:var(--teal); order:999; flex-shrink:0; }
[dir="rtl"] .faq-item[open] summary::before { content:"−"; }
[dir="ltr"] .faq-item summary { direction:ltr; }
[dir="ltr"] .faq-item summary::after { font-family:'Inter',sans-serif; content:"+"; font-size:1.4rem; font-weight:900; color:var(--teal); flex-shrink:0; }
[dir="ltr"] .faq-item[open] summary::after { content:"−"; }
[dir="ltr"] .fc-spec { border-left:none; border-right:1px solid #E2E4EA; }
[dir="ltr"] .fc-spec:last-child { border-right:none; }
[dir="rtl"] .fc-spec:first-child { border-left:none; }

/* hero — page variant (smaller, sub/eyebrow/btns block classes) */
.hero-wrap::before { content:""; position:absolute; top:-80px; right:8%; width:280px; height:280px; border-radius:50%; background:rgba(255,255,255,.05); pointer-events:none; }
.hero-wrap::after { content:""; position:absolute; bottom:-100px; left:-80px; width:360px; height:360px; border-radius:50%; background:rgba(255,255,255,.06); pointer-events:none; }
.hero { padding:72px 0 88px; position:relative; z-index:1; }
[dir="ltr"] .hero { text-align:left; }
.hero__eyebrow { font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.75); margin-bottom:20px; display:flex; align-items:center; gap:10px; }
[dir="rtl"] .hero__eyebrow { font-family:'Rubik',sans-serif; }
[dir="ltr"] .hero__eyebrow { font-family:'Inter',sans-serif; }
[dir="rtl"] .hero__eyebrow::before { content:""; display:block; width:24px; height:2px; background:rgba(255,255,255,.5); }
[dir="ltr"] .hero__eyebrow::after { content:""; display:block; width:24px; height:2px; background:rgba(255,255,255,.5); }
.hero h1 { font-size:clamp(2rem,4vw,3rem); font-weight:900; line-height:1.1; color:#fff; margin-bottom:16px; }
.hero h1 .c { color:#fff; font-weight:500; }
.hero__sub { font-size:1.05rem; color:rgba(255,255,255,.82); max-width:640px; margin-bottom:32px; line-height:1.7; }
.hero__btns { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:28px; }
.btn--dark { background:var(--blue); color:#fff; }
.btn--dark:hover { background:var(--indigo); color:#fff; }

/* stat strip */
.stat-strip { display:grid; grid-template-columns:repeat(4,1fr); background:#fff; box-shadow:0 8px 32px rgba(0,0,0,.12); position:relative; z-index:2; }
.stat-item { padding:20px 16px; text-align:center; border-left:1px solid var(--line); }
.stat-item:first-child { border-left:none; }
[dir="ltr"] .stat-item { border-left:none; border-right:1px solid var(--line); }
[dir="ltr"] .stat-item:first-child { border-right:none; }
.stat-n { font-size:1.7rem; font-weight:900; color:var(--blue); }
.stat-l { font-size:.75rem; color:var(--grey); margin-top:3px; line-height:1.35; }

/* body lede */
.body-l { font-size:1rem; color:var(--grey); line-height:1.75; max-width:640px; }

/* problems */
.prob-grid { display:grid; grid-template-columns:1.15fr 1fr; gap:56px; align-items:stretch; margin-top:40px; }
.prob-item { display:grid; grid-template-columns:60px 1fr; column-gap:18px; border-bottom:1px solid var(--line); align-items:start; }
.prob-item:last-child { border-bottom:none; }
.prob-num { font-size:2.6rem; font-weight:900; color:var(--grey-lt); line-height:1; text-align:center; padding:24px 0 0; }
[dir="rtl"] .prob-num { padding:24px 0 0; }
[dir="ltr"] .prob-num { padding:24px 0 0; }
.prob-content { padding:22px 0; }
.prob-content h3 { font-size:.98rem; font-weight:700; color:var(--orange); margin-bottom:6px; }
.prob-content p { font-size:.87rem; color:var(--grey); line-height:1.65; }
.prob-fix { margin-top:8px; background:var(--off); border-right:3px solid var(--teal-d); padding:7px 12px; font-size:.83rem; color:var(--teal-d); font-weight:600; line-height:1.5; }
.prob-fix strong { font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; display:block; color:var(--navy); margin-bottom:2px; }
[dir="rtl"] .prob-fix strong { font-family:'Rubik',sans-serif; }
[dir="ltr"] .prob-fix strong { font-family:'Inter',sans-serif; }
.prob-side { position:sticky; top:24px; display:flex; flex-direction:column; }
.prob-ph { height:260px; background:var(--grey-lt); display:flex; align-items:center; justify-content:center; color:#9aa1ad; font-size:.78rem; font-weight:700; }
.prob-callout { background:var(--navy); color:#fff; padding:26px 28px; border-radius:12px; border-top:4px solid var(--navy-2); box-shadow:0 10px 28px -14px rgba(6,43,76,.4); margin-top:16px; }
.prob-callout__n { font-size:3rem; font-weight:900; line-height:1; margin-bottom:8px; color:var(--teal); }
.prob-callout__l { font-size:1rem; font-weight:700; opacity:1; line-height:1.5; }
@media(max-width:860px){ .prob-grid { grid-template-columns:1fr; } }

/* feature cards */
.fc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:36px; }
.fc { background:#fff; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:0 8px 24px -16px rgba(0,0,0,.2); }
.fc--rec { border:2px solid var(--blue)!important; position:relative; z-index:1; }
.fc-rec-tag { background:var(--blue); color:#fff; font-size:.68rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; text-align:center; padding:6px; }
[dir="rtl"] .fc-rec-tag { font-family:'Rubik',sans-serif; }
[dir="ltr"] .fc-rec-tag { font-family:'Inter',sans-serif; }
.fc-head { padding:20px 22px 16px; border-bottom:1px solid var(--line); }
.fc-badge { font-size:.68rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; padding:3px 10px; border-radius:999px; display:inline-block; margin-bottom:10px; }
[dir="rtl"] .fc-badge { font-family:'Rubik',sans-serif; }
[dir="ltr"] .fc-badge { font-family:'Inter',sans-serif; }
.b-pro { background:#ECEBFB; color:var(--blue); }
.b-green { background:var(--teal-light); color:var(--teal-d); }
.b-warn { background:#FEF0E9; color:#c5501e; }
.fc-name { font-size:1.5rem; font-weight:900; line-height:1.05; color:#000; margin-bottom:5px; }
[dir="rtl"] .fc-name { font-family:'Rubik',sans-serif; }
[dir="ltr"] .fc-name { font-family:'Inter',sans-serif; }
.fc-sub { font-size:.85rem; color:var(--grey); line-height:1.5; }
.fc-specs { display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid var(--line); }
.fc-spec { padding:12px 14px; text-align:center; border-left:1px solid var(--line); }
.fc-spec:first-child { border-left:none; }
.fc-spec__v { font-size:1rem; font-weight:900; color:var(--teal-d); }
[dir="rtl"] .fc-spec__v { font-family:'Rubik',sans-serif; }
[dir="ltr"] .fc-spec__v { font-family:'Inter',sans-serif; }
.fc-spec__k { font-size:.7rem; color:var(--grey); margin-top:2px; }
.fc-body { padding:18px 22px; flex:1; }
.fc-lbl { font-size:.65rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; color:var(--grey); margin-bottom:8px; margin-top:14px; display:block; }
[dir="rtl"] .fc-lbl { font-family:'Rubik',sans-serif; }
[dir="ltr"] .fc-lbl { font-family:'Inter',sans-serif; }
.fc-body p { font-size:.85rem; color:var(--grey); line-height:1.65; margin-bottom:8px; }
.fc-list { list-style:none; padding:0; }
.fc-list li { font-size:.83rem; color:var(--grey); padding:5px 0; border-bottom:1px dashed var(--line); line-height:1.45; }
.fc-list li:last-child { border-bottom:none; }
[dir="rtl"] .fc-list li::before { content:"•"; color:var(--teal); font-weight:900; margin-left:6px; }
[dir="ltr"] .fc-list li::before { content:"•"; color:var(--teal); font-weight:900; margin-right:6px; }
.fc-foot { padding:16px 22px; border-top:1px solid var(--line); margin-top:auto; }
.fc-foot a { font-size:.85rem; font-weight:700; color:var(--blue); text-decoration:none; display:block; }
.fc-foot a:hover { color:var(--teal-d); }
@media(max-width:900px){ .fc-grid { grid-template-columns:1fr; } .fc--rec { margin:0; } }

/* quiz banner */
.quiz-banner { margin-top:24px; background:var(--off); border:1px solid var(--line); padding:20px 24px; display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.quiz-icon { width:40px; height:40px; border-radius:10px; background:#E8F0FD; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.quiz-icon svg { width:22px; height:22px; stroke:#1a4fcc; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.quiz-text { flex:1; min-width:180px; }
.quiz-text h3 { font-size:.98rem; font-weight:700; color:#000; margin-bottom:3px; }
.quiz-text p { font-size:.83rem; color:var(--grey); line-height:1.4; }

/* comparison table */
.cmp-scroll { overflow-x:auto; margin-top:32px; }
table.cmp { width:100%; border-collapse:collapse; font-size:.85rem; }
.cmp thead th { padding:12px 14px; border-bottom:2px solid var(--blue); font-size:.8rem; font-weight:900; letter-spacing:.06em; text-transform:uppercase; text-align:right; }
[dir="rtl"] .cmp thead th { font-family:'Rubik',sans-serif; }
[dir="ltr"] .cmp thead th { font-family:'Inter',sans-serif; text-align:left; }
.cmp thead th:first-child { color:var(--grey); }
.th-pearl { color:var(--blue); background:#ECEBFB; }
.th-plus { color:var(--teal-d); background:var(--teal-light); }
.th-k40 { color:#c5501e; background:#FEF0E9; }
.th-alt { color:var(--grey); background:var(--off); }
.cmp td { padding:11px 14px; border-bottom:1px solid var(--line); vertical-align:middle; text-align:right; line-height:1.4; }
[dir="ltr"] .cmp td { text-align:left; }
.cmp tr:last-child td { border-bottom:none; }
.cmp td:first-child { font-weight:700; color:#000; }
.cmp tr:nth-child(even) td { background:var(--off); }
.good { color:var(--teal-d); font-weight:600; }
.bad { color:var(--orange); }
.neu { color:var(--grey); }

/* applications */
.apps-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); margin-top:32px; }
.app-card { background:#fff; padding:24px 26px; transition:.12s; }
.app-card:hover { background:var(--off); }
.app-ic { width:40px; height:40px; border-radius:10px; background:#ECEBFB; display:flex; align-items:center; justify-content:center; margin-bottom:12px; }
.app-ic svg { width:22px; height:22px; stroke:var(--blue); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.app-h { font-size:.96rem; font-weight:700; color:#000; margin-bottom:4px; }
.app-p { font-size:.85rem; color:var(--grey); line-height:1.6; }
@media(max-width:600px){ .apps-grid { grid-template-columns:1fr; } }

/* faq */
.faq-list { margin-top:32px; }
.faq-item { border-bottom:1px solid var(--line); }
.faq-item:first-child { border-top:1px solid var(--line); }
.faq-item summary { list-style:none; padding:18px 0; font-weight:700; font-size:.96rem; color:var(--navy); cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:14px; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item[open] summary { color:var(--teal-d); }
.faq-body { padding:0 0 18px; font-size:.9rem; color:var(--grey); line-height:1.72; max-width:760px; }

/* cta cards — page variant of .cta-split */
.cta-split { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:48px; min-height:0; }
.cta-card { border-radius:12px; padding:28px 30px; }
.cta-primary { background:var(--blue); color:#fff; }
.cta-secondary { background:var(--off); border:1px solid var(--line); }
.cta-card h3 { font-size:1.05rem; font-weight:900; margin-bottom:6px; }
.cta-primary h3 { color:#fff; }
.cta-secondary h3 { color:#000; }
.cta-card p { font-size:.88rem; margin-bottom:18px; line-height:1.55; }
.cta-primary p { color:rgba(255,255,255,.75); }
.cta-secondary p { color:var(--grey); }
@media(max-width:640px){ .cta-split { grid-template-columns:1fr; } }
@media(max-width:600px){ .hero__btns { flex-direction:column; } .stat-strip { grid-template-columns:1fr 1fr; } }