:root {
     --navy: #1f2a44;
     --amber: #e9a23b;
     --cream: #faf5ec;
     --sand: #f0e8dc;
     --ink: #2b2f3a;
     --mute: #5d6270;
     --line: #e3dccf;
     --green: #17803d;
     box-sizing: border-box;
     padding-top: env(safe-area-inset-top, 0px);
     padding-bottom: env(safe-area-inset-bottom, 0px)
 }

 * {
     box-sizing: border-box
 }

 html {
     scroll-padding-top: env(safe-area-inset-top, 0px)
 }

 body {
     margin: 0;
     background: var(--cream);
     color: var(--ink);
     font: 16px/1.55 'Source Sans 3', system-ui, sans-serif
 }

 h1,
 h2,
 h3,
 .f {
     font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
     line-height: 1.05;
     margin: 0;
     color: var(--navy)
 }

 .w {
     max-width: 1100px;
     margin: 0 auto;
     padding: 0 20px
 }

 .btn {
     display: inline-block;
     border: 1px solid var(--navy);
     border-radius: 8px;
     padding: 12px 20px;
     font-weight: 600;
     font-size: 14px;
     text-decoration: none;
     background: transparent;
     color: var(--navy)
 }

 .btn.a {
     background: var(--amber);
     border-color: var(--amber)
 }

 .btn.n {
     background: var(--navy);
     color: #fff
 }

 .btn.o {
     color: #fff;
     border-color: #fff
 }

 .hero {
     padding: 110px 0 90px;
     color: #fff;
     background: linear-gradient(180deg, rgba(31, 42, 68, .88), rgba(31, 42, 68, .8)), linear-gradient(135deg, #2a3556, #8a6e4a)
 }

 .hero h1 {
     color: #fff;
     font-size: clamp(38px, 5.5vw, 58px);
     max-width: 680px
 }

 .hero p {
     font-size: 18px;
     color: #dfe3ec;
     max-width: 560px;
     margin: 18px 0 26px
 }

 .kick {
     font-size: 11px;
     letter-spacing: .14em;
     text-transform: uppercase;
     color: var(--amber);
     margin-bottom: 14px
 }

 .hero .btn {
     margin-right: 8px
 }

 section {
     padding: 64px 0
 }

 .alt {
     background: var(--sand)
 }

 h2 {
     font-size: clamp(30px, 4vw, 40px);
     margin-bottom: 10px
 }

 .sub {
     color: var(--mute);
     max-width: 420px;
     font-size: 14px;
     margin: 0
 }

 .panel {
     background: #fff;
     border: 1px solid var(--line);
     border-radius: 12px;
     padding: 24px;
     margin-top: 24px;
     max-width: 780px
 }

 .top {
     display: flex;
     justify-content: space-between;
     gap: 20px;
     flex-wrap: wrap;
     margin-bottom: 10px
 }

 .top h3 {
     font-size: 22px
 }

 .top .p {
     font-size: 30px;
     font-family: 'Barlow Condensed';
     font-weight: 700;
     color: var(--navy)
 }

 .top small {
     display: block;
     max-width: 330px;
     font-size: 12px;
     color: var(--mute)
 }

 .meta {
     font-size: 12px;
     color: var(--mute);
     margin-bottom: 18px
 }

 .two {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 30px
 }

 h4 {
     margin: 0 0 12px;
     font-size: 11px;
     letter-spacing: .14em;
     text-transform: uppercase;
     color: var(--mute);
     font-weight: 600
 }

 ul {
     padding: 0;
     margin: 0
 }

 li {
     list-style: none;
     margin: 0 0 10px;
     font-size: 14px;
     font-weight: 600
 }

 li small {
     display: block;
     color: var(--mute);
     font-size: 12px;
     font-weight: 400
 }

 .inc li:before {
     content: "✓ ";
     color: var(--green)
 }

 .exc li:before {
     content: "– ";
     color: var(--mute)
 }

 .exc li.am:before {
     color: var(--amber)
 }

 .foot {
     border-top: 1px solid var(--line);
     margin-top: 10px;
     padding-top: 18px;
     display: flex;
     gap: 16px;
     align-items: center;
     flex-wrap: wrap;
     font-size: 12px;
     color: var(--mute)
 }

 .gal {
     display: grid;
     grid-template-columns: repeat(6, 1fr);
     gap: 16px;
     margin-top: 24px
 }

 .gal figure {
     margin: 0
 }

 .gal figure:nth-child(1) {
     grid-column: span 4
 }

 .gal figure:nth-child(2) {
     grid-column: span 2
 }

 .gal figure:nth-child(n+3) {
     grid-column: span 2
 }

 .img {
     border-radius: 10px;
     background-image: url(../images/roof-tent/65deda0e039eb6853f3d938925eda419ef6c892e.webp);
     background-size: cover;
     background-position: center;
     height: 170px
 }

 .gal figure:nth-child(1) .img {
     height: 300px;
    background-image: url(../images/roof-tent/9dd2fe1c916067b4076e63c59b46e6ee04283531.webp);
 }

 .gal figure:nth-child(2) .img {
     height: 300px;
     background-image: url(../images/roof-tent/7a8749eb6b2fcc665bc567aeeb3a1380e33519cb.webp);
 }

 .gal figure:nth-child(4) .img {
     background-image: url(../images/roof-tent/b09d68f5e9c97178a011d410c55dedf6c6f0e834.webp);
 }

 .gal figure:nth-child(5) .img {
     background-image: url(../images/roof-tent/8eb641fbff6717e979d04d995d587083f1c1c02b.webp);
 }

 figcaption {
     font-size: 12px;
     color: var(--mute);
     margin-top: 6px
 }

 .specs {
     display: grid;
     grid-template-columns: 1fr 1.25fr;
     gap: 40px;
     align-items: start
 }

 .specs .img {
     height: 230px;
     background: linear-gradient(135deg, #f3ece0, #cfc3a8);
     margin-top: 20px
 }

 .note {
     font-size: 12px;
     color: #8a5a14;
     margin-top: 8px
 }

 table {
     width: 100%;
     border-collapse: collapse;
     background: #fff;
     border: 1px solid var(--line);
     border-radius: 12px;
     overflow: hidden;
     font-size: 14px
 }

 td {
     padding: 14px 16px;
     border-top: 1px solid var(--line);
     vertical-align: top
 }

 tr:first-child td {
     border-top: 0
 }

 td:first-child {
     color: var(--mute);
     width: 34%;
     font-size: 13px
 }

 td:last-child {
     font-weight: 600;
     color: var(--navy)
 }

 i {
     color: #c8860f;
     font-style: normal;
     font-size: 11px
 }

 @media(max-width:860px) {

     .two,
     .specs {
         grid-template-columns: 1fr
     }

     .gal {
         grid-template-columns: 1fr 1fr
     }

     .gal figure:nth-child(n) {
         grid-column: span 1
     }

     .gal figure:nth-child(1) {
         grid-column: span 2
     }

     .gal figure:nth-child(1) .img,
     .gal figure:nth-child(2) .img {
         height: 200px
     }
 }

 .open {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 40px;
     align-items: start
 }

 .st {
     display: flex;
     gap: 16px;
     align-items: center;
     margin: 0 0 14px;
     font-size: 15px;
     max-width: 440px
 }

 .st .num {
     flex: none;
     width: 38px;
     height: 38px;
     border-radius: 50%;
     background: var(--amber);
     font: 700 18px 'Barlow Condensed';
     display: grid;
     place-items: center;
     color: var(--navy)
 }

 .open .img {
     height: 330px;
     background: linear-gradient(135deg, #8a6e4a, #c9a876)
 }

 .open figure {
     margin: 0 0 16px
 }

 .rules {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 30px;
     margin-top: 24px
 }

 .rules .panel {
     margin: 0;
     max-width: none;
     font-size: 13px;
     min-height: 200px
 }

 .rules .no {
     border-color: #c0805e
 }

 .rules h4 {
     color: #a4472a
 }

 .rules .ok h4 {
     color: #8a5a14
 }

 .rules p {
     margin: 0;
     max-width: 380px
 }

 .fq {
     display: grid;
     grid-template-columns: 1fr 1.5fr;
     gap: 40px
 }

 details {
     background: #fff;
     border: 1px solid var(--line);
     border-bottom: 0;
     padding: 20px 24px
 }

 details:first-of-type {
     border-radius: 12px 12px 0 0
 }

 details:last-of-type {
     border-bottom: 1px solid var(--line);
     border-radius: 0 0 12px 12px
 }

 summary {
     font: 700 21px 'Barlow Condensed', sans-serif;
     color: var(--navy);
     cursor: pointer;
     list-style: none;
     display: flex;
     justify-content: space-between
 }

 summary:after {
     content: "+"
 }

 details[open] summary:after {
     content: "–"
 }

 details p {
     color: var(--mute);
     font-size: 15px;
     max-width: 400px;
     margin: 14px 0 0
 }

 .fq .btn.g {
     background: var(--green);
     border-color: var(--green);
     color: #fff;
     margin-top: 20px
 }

 .cta {
     background: var(--amber);
     padding: 64px 0
 }

 .cta .w {
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 20px;
     flex-wrap: wrap;
 }

 .cta h2 {
     font-size: clamp(32px, 4.5vw, 46px)
 }

 .cta p {
     margin: 8px 0 0;
     font-size: 14px;
     max-width: 340px
 }
 .img5{
    background-image: url(../images/roof-tent/06acddeb72b0c2769def0c6ee9849d04dd5b2713.webp);
    background-size: cover;
     background-position: center;
     height: 240px;
 }

  .img6{
    background-image: url(../images/87a2b9633113480550f226303203ad1814e44c63.webp);
    background-size: cover;
     background-position: center;
      height: 290px;
     border-radius: 6px;
 }

  .img7{
    background-image: url(../images/dd765ec04b90a1eea11f47a8c414baaa4dfebc11.webp);
    background-size: cover;
     background-position: center;
     height: 290px;
     border-radius: 6px;
 }

 @media(max-width:860px) {

     .open,
     .rules,
     .fq {
         grid-template-columns: 1fr
     }
 }