/* Roof-fan category: thumbnail cards and product imagery aligned with the Composite catalogue system. */
.roof-fan-page #model .grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
}
.roof-fan-page #model .card {
  position:relative;
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:100%;
  overflow:hidden;
  border:1px solid rgba(10,49,82,.12);
  border-radius:8px;
  background:#fff;
  color:#071e3b;
  text-decoration:none;
  box-shadow:0 10px 30px rgba(10,49,82,.08);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.roof-fan-page #model .card:hover {
  transform:translateY(-3px);
  border-color:rgba(10,49,82,.24);
  box-shadow:0 16px 34px rgba(10,49,82,.13);
}
.roof-fan-page #model .card::before {
  content:attr(data-model);
  position:absolute;
  z-index:2;
  top:16px;
  left:16px;
  padding:8px 12px;
  background:#071e3b;
  color:#fff;
  font-size:12px;
  font-weight:900;
  letter-spacing:.12em;
  line-height:1;
}
.roof-fan-page #model .pic {
  position:relative;
  width:100%;
  height:auto;
  aspect-ratio:1 / 1;
  overflow:hidden;
  background:#e7f0f6;
}
.roof-fan-page #model .pic img {
  display:block;
  width:100%;
  height:100%;
  padding:0;
  object-fit:cover;
  object-position:center;
}
.roof-fan-page #model .body {
  display:flex;
  flex:1;
  flex-direction:column;
  padding:25px 28px 0;
}
.roof-fan-page #model .tag { display:none; }
.roof-fan-page #model .body h3 {
  margin:0;
  color:#071e3b;
  font-size:clamp(22px,1.8vw,29px);
  line-height:1.18;
  letter-spacing:-.03em;
}
.roof-fan-page #model .body>p {
  min-height:50px;
  margin:13px 0 21px;
  color:#5b7181;
  font-size:15px;
  line-height:1.58;
}
.roof-fan-page #model .meta {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  border-top:1px solid #dbe6ec;
  border-bottom:1px solid #dbe6ec;
}
.roof-fan-page #model .meta span {
  min-width:0;
  padding:14px 12px;
  color:#708393;
  font-size:10px;
  font-weight:800;
  line-height:1.35;
  text-transform:uppercase;
}
.roof-fan-page #model .meta span+span { border-left:1px solid #dbe6ec; }
.roof-fan-page #model .meta b {
  display:block;
  margin-top:5px;
  color:#071e3b;
  font-size:17px;
  font-weight:850;
  line-height:1.25;
  text-transform:none;
}
.roof-fan-page #model .roof-dimension {
  display:flex;
  align-items:baseline;
  gap:12px;
  padding:15px 12px 17px;
  border-bottom:1px solid #dbe6ec;
}
.roof-fan-page #model .roof-dimension span {
  flex:0 0 auto;
  color:#708393;
  font-size:10px;
  font-weight:800;
  line-height:1.3;
}
.roof-fan-page #model .roof-dimension b {
  color:#071e3b;
  font-size:17px;
  line-height:1.25;
}
.roof-fan-page #model .go {
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:64px;
  margin:0 -28px;
  padding:16px 28px;
  background:#f4b91f;
  color:#071e3b;
  font-size:15px;
  font-weight:850;
  line-height:1.35;
}
.roof-fan-page #model .go::after {
  content:'→';
  margin-left:18px;
  font-size:23px;
  font-weight:400;
  line-height:1;
}
.roof-fan-page #model .go { font-size:0; }
.roof-fan-page #model .go::before { content:'Xem thông số & kiểm tra lắp đặt'; font-size:15px; }

/* Keep the square, edge-to-edge product treatment consistent in the roof category hero. */
.roof-fan-page .hero .art {
  min-height:0;
  aspect-ratio:1 / 1;
  overflow:hidden;
  background:#e7f0f6;
}
.roof-fan-page .hero .art img {
  display:block;
  width:100%;
  height:100%;
  padding:0;
  object-fit:cover;
  object-position:center;
}

@media (max-width: 700px) {
  .roof-fan-page #model .grid { grid-template-columns:1fr; gap:18px; }
  .roof-fan-page #model .body { padding:21px 19px 0; }
  .roof-fan-page #model .card::before { top:13px; left:13px; font-size:11px; }
  .roof-fan-page #model .body h3 { font-size:23px; }
  .roof-fan-page #model .body>p { min-height:0; font-size:14px; }
  .roof-fan-page #model .meta b,.roof-fan-page #model .roof-dimension b { font-size:15px; }
  .roof-fan-page #model .roof-dimension { gap:8px; padding:14px 10px 15px; }
  .roof-fan-page #model .roof-dimension b { margin-left:auto; text-align:right; }
  .roof-fan-page #model .go { min-height:58px; margin:0 -19px; padding:15px 19px; }
}
/* Keep CTA text in the document for accessibility; the yellow band remains the visual call to action. */
.roof-fan-page #model .go { font-size:15px; }
.roof-fan-page #model .go::before { content:none; }
/* Roof-fan category UX: decision-led flow for Google Ads and technical buyers. */
.roof-fan-page #model,.roof-fan-page #lua-chon,.roof-fan-page #lap-mai,.roof-fan-page #faq { scroll-margin-top:145px; }
.roof-fan-page .roof-anchor-nav { position:sticky; top:86px; z-index:40; border-bottom:1px solid #dbe6ec; background:rgba(255,255,255,.96); backdrop-filter:blur(10px); }
.roof-fan-page .roof-anchor-nav .c { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.roof-fan-page .roof-anchor-nav a { display:flex; align-items:center; justify-content:center; min-height:48px; padding:11px 14px; border-left:1px solid #dbe6ec; color:#466275; font-size:13px; font-weight:850; line-height:1.25; text-align:center; text-decoration:none; }
.roof-fan-page .roof-anchor-nav a:first-child { border-left:0; }
.roof-fan-page .roof-anchor-nav a:hover,.roof-fan-page .roof-anchor-nav a:focus-visible { background:#f4f8fa; color:#071e3b; outline:0; }
.roof-fan-page .roof-hero-proof span { display:block; }
.roof-fan-page .roof-hero-proof b { display:block; margin-bottom:4px; color:#fff; font-size:13px; }
.roof-fan-page .sec { padding-top:78px; padding-bottom:78px; }
.roof-fan-page .sh { max-width:850px; }
.roof-fan-page .sh h2 { max-width:820px; font-size:clamp(32px,3.4vw,44px); line-height:1.13; letter-spacing:-.035em; }

.roof-fan-page .roof-path-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
.roof-fan-page .roof-path-grid article { position:relative; overflow:hidden; padding:32px 32px 0; border:1px solid #dbe6ec; border-top:4px solid #071e3b; background:#fff; box-shadow:0 12px 32px rgba(10,49,82,.07); }
.roof-fan-page .roof-path-grid article>span { position:absolute; top:21px; right:24px; color:#d8e2e8; font-size:54px; font-weight:900; line-height:1; }
.roof-fan-page .roof-path-grid small { color:#956a08; font-size:10px; font-weight:900; letter-spacing:.12em; }
.roof-fan-page .roof-path-grid h3 { max-width:430px; margin:10px 0 12px; color:#071e3b; font-size:25px; line-height:1.2; letter-spacing:-.025em; }
.roof-fan-page .roof-path-grid p { max-width:560px; margin:0 0 17px; color:#5b7181; font-size:14px; line-height:1.65; }
.roof-fan-page .roof-path-grid ul { display:grid; gap:9px; margin:0 0 25px; padding:0; list-style:none; }
.roof-fan-page .roof-path-grid li { position:relative; padding-left:21px; color:#294d65; font-size:13px; line-height:1.5; }
.roof-fan-page .roof-path-grid li:before { content:'✓'; position:absolute; left:0; color:#a27308; font-weight:900; }
.roof-fan-page .roof-path-grid article>a { display:flex; align-items:center; justify-content:space-between; min-height:58px; margin:0 -32px; padding:15px 32px; background:#071e3b; color:#fff; font-size:13px; font-weight:850; text-decoration:none; }
.roof-fan-page .roof-path-grid article>a:hover { background:#0c426d; }

.roof-fan-page .roof-compare { background:#fff; }
.roof-fan-page .roof-table-wrap { overflow-x:auto; border:1px solid #dbe6ec; box-shadow:0 10px 30px rgba(10,49,82,.05); }
.roof-fan-page .roof-table-wrap table { width:100%; min-width:980px; border-collapse:collapse; background:#fff; }
.roof-fan-page .roof-table-wrap th { padding:15px 16px; background:#071e3b; color:#fff; font-size:11px; font-weight:850; line-height:1.35; text-align:left; white-space:nowrap; }
.roof-fan-page .roof-table-wrap td { padding:17px 16px; border-top:1px solid #dbe6ec; color:#486579; font-size:13px; line-height:1.5; vertical-align:top; }
.roof-fan-page .roof-table-wrap td:first-child { color:#071e3b; font-size:15px; }
.roof-fan-page .roof-table-wrap tbody tr:nth-child(even) { background:#f7fafb; }
.roof-fan-page .roof-table-note { margin:15px 0 0; padding:13px 15px; border-left:3px solid #f4b91f; background:#fff8e6; color:#536d7b; font-size:13px; line-height:1.55; }
.roof-fan-page .roof-table-note b { color:#071e3b; }

.roof-fan-page .roof-check-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }
.roof-fan-page .roof-check-grid article { min-height:220px; padding:23px 19px; border:1px solid #dbe6ec; background:#fff; }
.roof-fan-page .roof-check-grid article>b { display:grid; width:36px; height:36px; place-items:center; margin-bottom:23px; background:#f4b91f; color:#071e3b; font-size:11px; }
.roof-fan-page .roof-check-grid h3 { margin:0 0 9px; color:#071e3b; font-size:18px; line-height:1.25; }
.roof-fan-page .roof-check-grid p { margin:0; color:#5b7181; font-size:13px; line-height:1.58; }
.roof-fan-page .roof-warning { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:28px; align-items:center; margin-top:22px; padding:25px 28px; background:#071e3b; color:#fff; }
.roof-fan-page .roof-warning small { color:#f5c548; font-size:10px; font-weight:900; letter-spacing:.12em; }
.roof-fan-page .roof-warning h3 { max-width:760px; margin:7px 0 0; color:#fff; font-size:23px; line-height:1.28; }
.roof-fan-page .roof-warning .btn { white-space:nowrap; }

.roof-fan-page .roof-faq-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.roof-fan-page .roof-faq-grid details { border:1px solid #dbe6ec; background:#fff; }
.roof-fan-page .roof-faq-grid summary { position:relative; min-height:67px; padding:20px 52px 20px 20px; color:#071e3b; font-size:15px; font-weight:850; line-height:1.45; cursor:pointer; list-style:none; }
.roof-fan-page .roof-faq-grid summary::-webkit-details-marker { display:none; }
.roof-fan-page .roof-faq-grid summary:after { content:'+'; position:absolute; top:18px; right:19px; display:grid; width:29px; height:29px; place-items:center; border:1px solid #bdcfda; color:#9a6c08; font-size:20px; font-weight:400; }
.roof-fan-page .roof-faq-grid details[open] summary { border-bottom:1px solid #dbe6ec; background:#f8fafb; }
.roof-fan-page .roof-faq-grid details[open] summary:after { content:'−'; }
.roof-fan-page .roof-faq-grid details p { margin:0; padding:17px 20px 21px; color:#5b7181; font-size:13px; line-height:1.65; }

.roof-fan-page .roof-final .bandgrid { grid-template-columns:minmax(0,1fr) auto; }
.roof-fan-page .roof-final-actions { display:flex; gap:10px; align-items:center; }
.roof-fan-page .roof-final-actions .btn:not(.primary) { border-color:rgba(255,255,255,.5); color:#fff; background:transparent; }
.roof-fan-page .roof-info-strip { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:28px; border:1px solid rgba(255,255,255,.2); }
.roof-fan-page .roof-info-strip span { display:flex; align-items:center; gap:11px; min-height:66px; padding:13px 16px; border-left:1px solid rgba(255,255,255,.2); color:#d6e3eb; font-size:12px; line-height:1.4; }
.roof-fan-page .roof-info-strip span:first-child { border-left:0; }
.roof-fan-page .roof-info-strip b { display:grid; flex:0 0 28px; width:28px; height:28px; place-items:center; background:#f4b91f; color:#071e3b; font-size:10px; }

@media (max-width: 980px) {
  .roof-fan-page .roof-check-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .roof-fan-page .roof-check-grid article:last-child { grid-column:1 / -1; min-height:0; }
  .roof-fan-page .roof-final .bandgrid { grid-template-columns:1fr; }
  .roof-fan-page .roof-final-actions { margin-top:18px; }
  .roof-fan-page .roof-info-strip { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .roof-fan-page .roof-info-strip span:nth-child(odd) { border-left:0; }
  .roof-fan-page .roof-info-strip span:nth-child(n+3) { border-top:1px solid rgba(255,255,255,.2); }
}
@media (max-width: 700px) {
  .roof-fan-page #model,.roof-fan-page #lua-chon,.roof-fan-page #lap-mai,.roof-fan-page #faq { scroll-margin-top:158px; }
  .roof-fan-page .roof-anchor-nav { top:70px; }
  .roof-fan-page .roof-anchor-nav .c { width:100%; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .roof-fan-page .roof-anchor-nav a { min-height:42px; padding:8px; border-top:1px solid #dbe6ec; font-size:11px; }
  .roof-fan-page .roof-anchor-nav a:nth-child(odd) { border-left:0; }
  .roof-fan-page .roof-anchor-nav a:nth-child(-n+2) { border-top:0; }
  .roof-fan-page .roof-hero-proof { grid-template-columns:1fr 1fr; }
  .roof-fan-page .roof-hero-proof span { min-height:0; font-size:11px; }
  .roof-fan-page .sec { padding-top:58px; padding-bottom:58px; }
  .roof-fan-page .sh h2 { font-size:31px; }
  .roof-fan-page .roof-path-grid,.roof-fan-page .roof-faq-grid { grid-template-columns:1fr; }
  .roof-fan-page .roof-path-grid article { padding:25px 21px 0; }
  .roof-fan-page .roof-path-grid article>a { margin:0 -21px; padding:15px 21px; }
  .roof-fan-page .roof-check-grid { grid-template-columns:1fr; }
  .roof-fan-page .roof-check-grid article,.roof-fan-page .roof-check-grid article:last-child { grid-column:auto; min-height:0; }
  .roof-fan-page .roof-warning { grid-template-columns:1fr; padding:22px 20px; }
  .roof-fan-page .roof-warning .btn { width:100%; }
  .roof-fan-page .roof-final-actions { display:grid; grid-template-columns:1fr; width:100%; }
  .roof-fan-page .roof-final-actions .btn { width:100%; }
  .roof-fan-page .roof-info-strip { grid-template-columns:1fr; }
  .roof-fan-page .roof-info-strip span,.roof-fan-page .roof-info-strip span:nth-child(odd) { border-top:1px solid rgba(255,255,255,.2); border-left:0; }
  .roof-fan-page .roof-info-strip span:first-child { border-top:0; }
}
/* Keep contact controls available without covering the roof-fan product imagery. */
@media (min-width: 701px) {
  body.roof-fan-page .qmfc-floating { top:74%; right:12px; gap:8px; }
  body.roof-fan-page .qmfc-floating > a { justify-content:center; width:56px; min-height:56px; padding:8px; border-radius:50%; }
  body.roof-fan-page .qmfc-floating > a > span:last-child { display:none; }
  body.roof-fan-page .qmfc-floating > a:hover { transform:translateY(-3px); }
}

/* Final compact UX pass: reduce page length while preserving every decision insight. */
.roof-fan-page .hero { min-height:0; }
.roof-fan-page .hero .c { padding-top:34px; padding-bottom:36px; }
.roof-fan-page .hero .hgrid { gap:42px; }
.roof-fan-page .hero h1 { font-size:clamp(48px,4.4vw,58px); line-height:1.04; }
.roof-fan-page .hero .lead { max-width:610px; margin-top:15px; font-size:17px; line-height:1.55; }
.roof-fan-page .roof-hero-proof { gap:8px; margin:20px 0 21px; }
.roof-fan-page .roof-hero-proof span { min-height:62px; padding:10px 11px 10px 13px; font-size:11px; line-height:1.4; }
.roof-fan-page .roof-hero-proof b { font-size:12px; }
.roof-fan-page .hero .acts .btn { min-height:48px; }
.roof-fan-page .hero .art { max-width:480px; justify-self:end; }

.roof-fan-page .sec { padding-top:66px; padding-bottom:66px; }
.roof-fan-page .sh { margin-bottom:25px; }
.roof-fan-page .sh h2 { font-size:clamp(32px,3vw,39px); line-height:1.15; }
.roof-fan-page .sh>p { max-width:740px; margin-top:11px; }

.roof-fan-page #model .body { padding:21px 23px 0; }
.roof-fan-page #model .body h3 { font-size:clamp(21px,1.55vw,25px); }
.roof-fan-page #model .body>p { min-height:0; margin:10px 0 15px; display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2; font-size:13px; line-height:1.55; }
.roof-fan-page #model .meta span { padding:11px 10px; }
.roof-fan-page #model .meta b { font-size:15px; }
.roof-fan-page #model .roof-dimension { padding:12px 10px 13px; }
.roof-fan-page #model .roof-dimension b { font-size:15px; }
.roof-fan-page #model .go { min-height:56px; margin:0 -23px; padding:13px 23px; font-size:13px; }

.roof-fan-page .roof-compare-compact { display:grid; border:1px solid #dbe6ec; background:#fff; box-shadow:0 10px 28px rgba(10,49,82,.05); }
.roof-fan-page .roof-compare-compact>a { display:grid; grid-template-columns:120px 230px minmax(0,1fr) 28px; gap:20px; align-items:center; min-height:82px; padding:15px 20px; color:#071e3b; text-decoration:none; }
.roof-fan-page .roof-compare-compact>a+a { border-top:1px solid #dbe6ec; }
.roof-fan-page .roof-compare-compact>a:hover { background:#f7fafb; }
.roof-fan-page .roof-compare-compact strong { font-size:17px; }
.roof-fan-page .roof-compare-compact span,.roof-fan-page .roof-compare-compact span b,.roof-fan-page .roof-compare-compact span small { display:block; }
.roof-fan-page .roof-compare-compact span b { font-size:16px; }
.roof-fan-page .roof-compare-compact span small { margin-top:3px; color:#6b8090; font-size:10px; line-height:1.4; }
.roof-fan-page .roof-compare-compact em { color:#526d7e; font-size:13px; font-style:normal; line-height:1.5; }
.roof-fan-page .roof-compare-compact i { color:#9a6c08; font-size:22px; font-style:normal; }

.roof-fan-page .roof-check-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.roof-fan-page .roof-check-grid article { display:grid; grid-template-columns:40px minmax(0,1fr); column-gap:14px; align-content:center; min-height:104px; padding:17px 18px; }
.roof-fan-page .roof-check-grid article:last-child { grid-column:1 / -1; }
.roof-fan-page .roof-check-grid article>b { grid-row:1 / 3; width:36px; height:36px; margin:1px 0 0; }
.roof-fan-page .roof-check-grid h3 { margin:0 0 5px; font-size:17px; }
.roof-fan-page .roof-check-grid p { font-size:12px; line-height:1.5; }
.roof-fan-page .roof-warning { margin-top:16px; padding:21px 24px; }
.roof-fan-page .roof-warning h3 { font-size:20px; }

.roof-fan-page .roof-final { padding-top:48px; padding-bottom:48px; }
.roof-fan-page .roof-final h2 { font-size:clamp(30px,3vw,38px); }
.roof-fan-page .roof-info-strip { margin-top:20px; }
.roof-fan-page .roof-info-strip span { min-height:56px; padding:10px 13px; }

.roof-fan-page .roof-anchor-nav a.is-active { background:#071e3b; color:#fff; }

@media (max-width: 700px) {
  .roof-fan-page .hero .c { padding-top:23px; padding-bottom:27px; }
  .roof-fan-page .hero .hgrid { gap:16px; }
  .roof-fan-page .hero h1 { font-size:37px; line-height:1.06; }
  .roof-fan-page .hero .lead { margin-top:12px; font-size:15px; line-height:1.5; }
  .roof-fan-page .roof-hero-proof { gap:7px; margin:14px 0 15px; }
  .roof-fan-page .roof-hero-proof span { min-height:0; padding:9px 9px 9px 11px; font-size:10px; }
  .roof-fan-page .roof-hero-proof b { font-size:11px; }
  .roof-fan-page .hero .acts { gap:8px; }
  .roof-fan-page .hero .acts .btn { min-height:45px; padding-top:11px; padding-bottom:11px; }
  .roof-fan-page .hero .art { max-width:330px; margin:auto; }

  .roof-fan-page .roof-anchor-nav .c { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .roof-fan-page .roof-anchor-nav a,.roof-fan-page .roof-anchor-nav a:nth-child(n) { min-height:43px; padding:7px 3px; border-top:0; border-left:1px solid #dbe6ec; font-size:10px; white-space:nowrap; }
  .roof-fan-page .roof-anchor-nav a:first-child { border-left:0; }

  .roof-fan-page .sec { padding-top:50px; padding-bottom:50px; }
  .roof-fan-page .sh { margin-bottom:20px; }
  .roof-fan-page .sh h2 { font-size:28px; line-height:1.17; }
  .roof-fan-page #model .body { padding:18px 17px 0; }
  .roof-fan-page #model .body h3 { font-size:21px; }
  .roof-fan-page #model .body>p { margin:9px 0 13px; font-size:12px; }
  .roof-fan-page #model .meta b,.roof-fan-page #model .roof-dimension b { font-size:14px; }
  .roof-fan-page #model .roof-dimension { align-items:center; padding:11px 9px 12px; }
  .roof-fan-page #model .go { min-height:53px; margin:0 -17px; padding:12px 17px; font-size:12px; }

  .roof-fan-page .roof-compare-compact>a { grid-template-columns:90px minmax(0,1fr) 22px; gap:10px; padding:14px; }
  .roof-fan-page .roof-compare-compact em { grid-column:1 / -1; padding-top:8px; border-top:1px solid #edf2f5; }
  .roof-fan-page .roof-compare-compact i { grid-column:3; grid-row:1; }
  .roof-fan-page .roof-check-grid { grid-template-columns:1fr; }
  .roof-fan-page .roof-check-grid article,.roof-fan-page .roof-check-grid article:last-child { grid-column:auto; min-height:0; }
  .roof-fan-page .roof-warning { padding:18px; }
  .roof-fan-page .roof-warning h3 { font-size:18px; }

  .roof-fan-page .roof-final { padding-top:40px; padding-bottom:40px; }
  .roof-fan-page .roof-info-strip { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .roof-fan-page .roof-info-strip span,.roof-fan-page .roof-info-strip span:nth-child(odd) { min-height:54px; border-top:1px solid rgba(255,255,255,.2); border-left:1px solid rgba(255,255,255,.2); font-size:10px; }
  .roof-fan-page .roof-info-strip span:nth-child(odd) { border-left:0; }
  .roof-fan-page .roof-info-strip span:nth-child(-n+2) { border-top:0; }
  body.roof-fan-page { padding-bottom:54px; }
  body.roof-fan-page .qmfc-floating>a { min-height:54px; padding:7px 10px; }
  body.roof-fan-page .qmfc-float-icon { flex-basis:31px; width:31px; height:31px; font-size:16px; }
}
/* Restore the roof-fan Hero media width after the compact layout pass. */
.roof-fan-page .hero .art {
  width:100%;
  min-width:0;
}

/* Model-specific decision insight: resolve selection and installation anxiety near the cards. */
.roof-fan-page .roof-model-insight { background:#f7fafb; }
.roof-fan-page .roof-model-insight-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.roof-fan-page .roof-model-insight-grid article { min-width:0; padding:25px 24px 24px; border:1px solid #dbe6ec; border-top:4px solid #071e3b; background:#fff; }
.roof-fan-page .roof-insight-kicker { display:block; color:#956a08; font-size:10px; font-weight:900; letter-spacing:.12em; }
.roof-fan-page .roof-model-insight-grid h3 { max-width:460px; margin:10px 0 9px; color:#071e3b; font-size:22px; line-height:1.22; }
.roof-fan-page .roof-model-insight-grid p { max-width:560px; margin:0 0 15px; color:#5b7181; font-size:13px; line-height:1.65; }
.roof-fan-page .roof-model-insight-grid article>b { display:block; padding-top:13px; border-top:1px solid #edf2f5; color:#294d65; font-size:11px; line-height:1.5; }
.roof-fan-page .roof-model-insight-note { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:26px; align-items:center; margin-top:14px; padding:23px 25px; border-left:4px solid #f4b91f; background:#071e3b; color:#fff; }
.roof-fan-page .roof-model-insight-note small { color:#f5c548; font-size:10px; font-weight:900; letter-spacing:.12em; }
.roof-fan-page .roof-model-insight-note h3 { max-width:700px; margin:7px 0 7px; color:#fff; font-size:21px; line-height:1.25; }
.roof-fan-page .roof-model-insight-note p { max-width:800px; margin:0; color:#c8d6e1; font-size:13px; line-height:1.6; }
.roof-fan-page .roof-model-insight-note .btn { white-space:nowrap; }
@media (max-width:700px) {
  .roof-fan-page .roof-model-insight-grid { grid-template-columns:1fr; }
  .roof-fan-page .roof-model-insight-grid article { padding:21px 18px; }
  .roof-fan-page .roof-model-insight-grid h3 { font-size:20px; }
  .roof-fan-page .roof-model-insight-note { grid-template-columns:1fr; gap:17px; padding:20px 18px; }
  .roof-fan-page .roof-model-insight-note .btn { width:100%; }
}