/* Roof tile article. Styles are local to the product body. */
.rt-page {
  --ink: #092b46;
  --blue: #007db7;
  --muted: #41637b;
  --rule: #cbdfea;
  color-scheme: light;
  background: white;
  color: var(--ink);
  line-height: 1.55;
}
.rt-page *, .rt-page *::before, .rt-page *::after {box-sizing: border-box}
.rt-page :is(h1,h2,h3,p,ul,ol,dl,dd,figure) {margin: 0}
.rt-page :is(h1,h2,h3) {font-weight: 600; line-height: 1.13; letter-spacing: -.035em}
.rt-page h1 {font-size: clamp(48px,5vw,72px)}
.rt-page h2 {font-size: clamp(29px,2.8vw,40px)}
.rt-page h3 {font-size: 22px}
.rt-page p {color: var(--muted); font-size: 15px}
.rt-page em {color: var(--blue); font-style: normal}
.rt-page a {text-decoration: none; color: inherit}
.rt-page button {font: inherit; color: inherit; cursor: pointer}
.rt-page [hidden] {display: none !important}
.rt-page :is(a,button,input,summary,[tabindex]):focus-visible {outline: 3px solid #008acc; outline-offset: 3px}
.rt-page .rt-wrap {width: min(1280px,calc(100% - 48px)); margin-inline: auto}
.rt-page .rt-section {padding-block: clamp(24px,2.5vw,38px); scroll-margin-top: 98px}
.rt-page .rt-label {color: var(--blue); font-size: 11px; font-weight: 600; letter-spacing: .11em; margin-bottom: 9px}
.rt-page .rt-icon {width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linejoin: round; stroke-linecap: round; flex: none; color: #008cc7}
.rt-page :is(.rt-primary,.rt-secondary) {display: inline-flex; justify-content: space-between; align-items: center; gap: 18px; min-height: 46px; padding: 10px 16px; border-radius: 4px; border: 1px solid #0085be; font-size: 14px; font-weight: 600}
.rt-page .rt-primary {background: linear-gradient(105deg,#008bc7,#006eb2); color: white}
.rt-page .rt-primary:hover {background: #006b9c}
.rt-page .rt-secondary {color: var(--blue); background: white}
.rt-page .rt-secondary:hover {background: #edf8ff}
.rt-page .rt-arrow {font-size: 17px; line-height: 1}
.rt-page figcaption,.rt-page .rt-caption {font-size: 11px; line-height: 1.5; color: #536f83}
.rt-page .rt-entry {background: linear-gradient(114deg,#fff 15%,#edf8fd 70%,#e3f1fa); padding: 14px 0 16px}
.rt-page .rt-breadcrumb {display: flex; flex-wrap: wrap; gap: 9px; color: #557386; font-size: 11px}
.rt-page .rt-breadcrumb [aria-current] {color: var(--blue)}
.rt-page .rt-entry-grid {display: grid; grid-template-columns: .95fr 1.12fr; align-items: center; gap: 25px}
.rt-page .rt-entry-grid>div {padding-block: 18px}
.rt-page .rt-lead {margin: 13px 0 9px; font-size: clamp(20px,1.8vw,26px); line-height: 1.28; font-weight: 600; color: var(--ink)}
.rt-page .rt-actions {display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px}
.rt-page .rt-drawing {display: block; width: 100%; height: auto; stroke: none}
.rt-page .rt-entry .rt-drawing {max-height: 292px}
.rt-page .rt-entry figcaption {text-align: center}
.rt-page .rt-benefits {padding-block: 12px; background: linear-gradient(#fff,#f6fbfd); border-bottom: 1px solid #dceaf2}
.rt-page .rt-benefits>.rt-wrap {display: grid; grid-template-columns: repeat(4,1fr)}
.rt-page .rt-benefits>.rt-wrap>div {display: flex; align-items: center; gap: 12px; padding: 0 16px; min-height: 44px; font-size: 15px}
.rt-page .rt-benefits>.rt-wrap>div+div {border-left: 1px solid var(--rule)}
.rt-page .rt-benefits>.rt-wrap>div:first-child {padding-left: 0}
.rt-page .rt-heading,.rt-page .rt-studio-grid {display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(20px,3.1vw,48px)}
.rt-page .rt-heading>*,.rt-page .rt-studio-grid>* {min-width: 0}
.rt-page .rt-studio-grid {margin-top: 16px}
.rt-page .rt-model {scroll-margin-top: 90px}
.rt-page .rt-model figure {background: radial-gradient(ellipse at 50% 75%,#edf7fb,transparent 66%)}
.rt-page .rt-model .rt-drawing {max-height: 310px}
.rt-page .rt-model figcaption {text-align: center; margin-top: 4px}
.rt-page .rt-zone {opacity: 0; transition: opacity .18s}
.rt-page .rt-zone.is-active {opacity: 1}
.rt-page .rt-readout {border-left: 2px solid #1d9acb; padding: 3px 0 3px 12px; margin-top: 15px}
.rt-page .rt-readout h3 {font-size: 17px; margin-bottom: 3px}
.rt-page .rt-readout p {font-size: 14px}
.rt-page .rt-parts {border-top: 1px solid var(--rule)}
.rt-page .rt-parts button {width: 100%; display: flex; align-items: start; gap: 12px; min-height: 65px; text-align: left; border: 0; border-bottom: 1px solid var(--rule); background: white; padding: 13px 10px}
.rt-page .rt-parts button[aria-selected=true] {background: #eef8fd; box-shadow: inset 2px 0 #008ecb}
.rt-page .rt-part-icon {display: grid; place-items: center; width: 45px; height: 45px; flex: none; border-radius: 8px; background: linear-gradient(135deg,#fbfdff,#e1f1fa)}
.rt-page .rt-parts small {color: var(--blue); font-size: 11px; font-weight: 600; padding-top: 3px}
.rt-page .rt-parts strong {display: block; font-weight: 600; font-size: 18px; line-height: 1.3}
.rt-page .rt-parts strong+span {display: block; color: var(--muted); font-size: 14px; line-height: 1.55; margin-top: 4px}
.rt-page .rt-selection,.rt-page .rt-faq {background: linear-gradient(112deg,#edf7fd,#f8fcfd)}
.rt-page .rt-editorial {display: grid; grid-template-columns: 1fr 1.17fr 1fr; align-items: start; gap: 22px; margin-top: 21px}
.rt-page .rt-editorial img {display: block; width: 100%; height: clamp(100px,10vw,145px); object-fit: cover; border-radius: 4px}
.rt-page .rt-editorial h3 {font-size: 21px; margin: 12px 0 6px}
.rt-page .rt-editorial p {font-size: 14px}
.rt-page .rt-caption {margin-top: 12px}
.rt-page .rt-specs {display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding-top: 16px; margin-top: 13px; border-top: 1px solid var(--rule)}
.rt-page .rt-specs>div {display: flex; align-items: start; gap: 12px}
.rt-page .rt-specs dt {font-weight: 600}
.rt-page .rt-specs dd {font-size: 13px; color: var(--muted)}
.rt-page .rt-prep>.rt-wrap {display: grid; grid-template-columns: .8fr 1.2fr; gap: 38px; align-items: center}
.rt-page .rt-prep h2+p {margin-top: 12px}
.rt-page .rt-archive {display: flex; align-items: center; gap: 10px; margin-top: 16px}
.rt-page .rt-archive img {width: 95px; height: auto}
.rt-page .rt-archive figcaption {max-width: 185px}
.rt-page .rt-prep fieldset {display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; min-width: 0; margin: 0; padding: 0; border: 0}
.rt-page .rt-prep legend {margin-bottom: 7px; font-size: 15px; font-weight: 600; color: var(--ink)}
.rt-page .rt-prep label {display: flex; align-items: center; gap: 10px; min-height: 46px; border-top: 1px solid var(--rule); font-size: 14px; cursor: pointer}
.rt-page .rt-prep input {width: 16px; height: 16px; flex: none; accent-color: var(--blue)}
.rt-page .rt-faq .rt-heading {align-items: start; grid-template-columns: .8fr 1.3fr}
.rt-page .rt-questions {background: white; border: 1px solid var(--rule); border-radius: 4px}
.rt-page .rt-questions details+details {border-top: 1px solid var(--rule)}
.rt-page .rt-questions summary {display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 15px; min-height: 47px; font-size: 16px; font-weight: 600; cursor: pointer; list-style: none}
.rt-page .rt-questions summary::-webkit-details-marker {display: none}
.rt-page .rt-questions summary span::after {content: '+'; font-size: 21px; color: var(--blue)}
.rt-page .rt-questions details[open] summary span::after {content: '−'}
.rt-page .rt-questions details p {padding: 0 15px 15px}
.rt-page .rt-related h2 {font-size: 26px}
.rt-page .rt-related ul {display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 24px; list-style: none; padding: 0; margin-top: 12px}
.rt-page .rt-related a {display: flex; align-items: center; justify-content: space-between; min-height: 44px; border-bottom: 1px solid var(--rule); font-weight: 600; font-size: 17px}
.rt-page .rt-related a:hover {color: var(--blue)}
.rt-page .rt-related p {font-size: 13px; margin-top: 6px}
.rt-page .rt-closing {padding-block: 27px; background: linear-gradient(110deg,#e5f3fd,#f8fcff)}
.rt-page .rt-closing>.rt-wrap {display: grid; grid-template-columns: 1.25fr .9fr .7fr; align-items: center; gap: 24px}
.rt-page .rt-closing h2 {font-size: clamp(28px,2.45vw,36px)}
.rt-page .rt-closing p:not(.rt-label) {margin-top: 12px}
.rt-page .rt-closing-actions {display: grid; gap: 9px}
@media(max-width:1000px) {
  .rt-page .rt-benefits>.rt-wrap>div {gap: 9px; padding-inline: 12px; font-size: 14px}
  .rt-page .rt-editorial {gap: 15px}
  .rt-page .rt-actions a {padding-inline: 12px; gap: 9px; font-size: 13px}
  .rt-page .rt-parts button {gap: 8px; padding: 10px 8px}
  .rt-page .rt-part-icon {width: 36px; height: 36px}
  .rt-page .rt-prep>.rt-wrap {gap: 24px}
}
@media(max-width:700px) {
  .rt-page .rt-wrap {width: calc(100% - 40px)}
  .rt-page .rt-entry-grid,.rt-page .rt-heading,.rt-page .rt-studio-grid,.rt-page .rt-faq .rt-heading,.rt-page .rt-prep>.rt-wrap,.rt-page .rt-closing>.rt-wrap {grid-template-columns: 1fr; gap: 16px}
  .rt-page .rt-entry-grid>div {padding-bottom: 0}
  .rt-page .rt-entry .rt-drawing {max-height: 192px}
  .rt-page .rt-actions {gap: 8px}
  .rt-page .rt-actions a {font-size: 14px}
  .rt-page .rt-benefits>.rt-wrap {grid-template-columns: 1fr 1fr; gap: 8px}
  .rt-page .rt-benefits>.rt-wrap>div:nth-child(3) {border-left: 0; padding-left: 0}
  .rt-page .rt-studio-grid .rt-parts {grid-row: 1}
  .rt-page .rt-parts button {padding: 12px 10px}
  .rt-page .rt-parts strong+span {font-size: 14px}
  .rt-page .rt-model .rt-drawing {max-height: 219px}
  .rt-page .rt-editorial {grid-template-columns: 1fr; gap: 18px}
  .rt-page .rt-editorial article {display: grid; grid-template-columns: .67fr 1fr; gap: 5px 14px; align-items: start}
  .rt-page .rt-editorial figure {grid-row: span 2; align-self: stretch}
  .rt-page .rt-editorial img {height: 100%; max-height: 200px}
  .rt-page .rt-editorial h3 {margin: 0; font-size: 20px}
  .rt-page .rt-editorial p {font-size: 15px}
  .rt-page .rt-specs {gap: 13px; grid-template-columns: 1fr}
  .rt-page .rt-prep fieldset {column-gap: 12px}
  .rt-page .rt-prep label {padding-block: 4px}
  .rt-page .rt-related ul {grid-template-columns: 1fr 1fr; gap: 15px}
  .rt-page .rt-closing .rt-drawing {max-height: 115px}
  .rt-page p {font-size: 16px}
}
@media(prefers-reduced-motion:reduce) {
  .rt-page * {transition: none !important; scroll-behavior: auto !important}
}