@font-face{font-family:"Onest";font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/onest-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Unbounded";font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/unbounded-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Martian Mono";font-style:normal;font-weight:400 500;font-display:swap;src:url(/assets/fonts/martian-mono-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{--surface: #E9EFF2; --card: #FFFFFF; --tile: #E9EFF2; --tile-2: #F4F7F9; --ink: #13202B; --ink-2: #33434F; --ink-3: #4A5A66; --line: #D3DCE1; --category-shark: #3E5C76; --category-reef: #0A7C8C; --category-night: #2B2F8F; --category-quiet: #5B6770; --glow: #3FD1E0; --action: #C43A1B; --action-press: #A32F15; --now: #C9E24A; --warn: #7A3B69; --ride: #D2B97A; --ride-ink: #3D2E10; --sand: #EFE3C4; --sand-ink: #5A3A12; --r-card: 28px; --r-photo: 20px; --r-btn: 16px; --r-tile: 12px; --f-display: 'Unbounded',sans-serif; --f-text: 'Onest',sans-serif; --f-mono: 'Martian Mono',monospace; --ease-rise: cubic-bezier(.3,1.5,.5,1); --gap: 14px;}
*{box-sizing: border-box;}
a{color: var(--ink);}
a:hover{color: var(--category-reef);}
img{display: block; max-width: 100%;}
button{font-family: inherit; color: inherit;}
@media (prefers-reduced-motion: reduce){*,::before,::after{transition: none !important; animation: auto ease 0s 1 normal none running none !important;}}
.icon{width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentcolor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;}
.icon--sm{width: 14px; height: 14px;}
.icon--lg{width: 26px; height: 26px;}
.fam-shark{--fam: var(--category-shark);}
.fam-reef{--fam: var(--category-reef);}
.fam-night{--fam: var(--category-night);}
.fam-quiet{--fam: var(--category-quiet);}
.sign{width: 40px; height: 40px; flex: 0 0 auto; overflow: visible;}
.sign__water{fill: var(--fam,var(--category-shark));}
.sign__lens,.sign__snorkel{fill: none; stroke: var(--ink); stroke-width: 3.2;}
.sign--ghost{opacity: 0.55;}
.sign--ghost .sign__lens,.sign--ghost .sign__snorkel{stroke-width: 2;}
.page{container-type: inline-size; background: var(--surface); color: var(--ink); font-family: var(--f-text); min-height: 100%; position: relative;}
.wrap{padding-inline: 16px; max-width: 1280px; margin-inline: auto;}
.block{padding-block: 44px;}
.block--card{background: var(--card);}
.block--seam{background: var(--ink); color: rgb(221, 230, 235);}
.block--seam .h2,.block--seam .h3{color: rgb(255, 255, 255);}
.block--seam a{color: rgb(255, 255, 255);}
.h1{margin: 0px; font-family: var(--f-display); font-weight: 700; font-size: 38px; line-height: 1.03; letter-spacing: -0.045em; text-wrap: balance;}
.h2{margin: 0px; font-family: var(--f-display); font-weight: 600; font-size: 26px; line-height: 1.1; letter-spacing: -0.035em; text-wrap: balance;}
.h3{margin: 0px; font-family: var(--f-display); font-weight: 600; font-size: 18px; line-height: 1.22; letter-spacing: -0.02em;}
.lead{margin: 0px; font-size: 16px; line-height: 1.5; text-wrap: pretty;}
.kicker{margin: 0px; display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; line-height: 1.3;}
.kicker::before{content: ""; flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: var(--now); border: 2px solid var(--ink);}
.block--seam .kicker{color: rgb(255, 255, 255);}
.block--seam .kicker::before{border-color: rgb(255, 255, 255);}
.shead{display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; max-width: 920px;}
.stack{display: flex; flex-direction: column; gap: var(--gap);}
.grid-2,.grid-3,.grid-5{display: grid; gap: var(--gap); grid-template-columns: minmax(0px, 1fr);}
.section-end{display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 26px;}
@container (min-width: 900px){.wrap{padding-inline: 40px;}
.block{padding-block: 80px;}
.h1{font-size: 72px;}
.h2{font-size: 44px;}
.h3{font-size: 22px;}
.lead{font-size: 18px;}
.kicker{font-size: 16px;}
.shead{margin-bottom: 36px;}
.grid-2{grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 20px;}
.grid-3{grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 20px;}
.grid-5{grid-template-columns: repeat(5, minmax(0px, 1fr));}}
.btn{display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0px 18px; border-radius: var(--r-btn); border: 0px; font-weight: 700; font-size: 15px; line-height: 1.2; text-decoration: none; cursor: pointer; text-align: center; transition: transform .25s var(--ease-rise),background .2s,color .2s,box-shadow .25s;}
.btn--book{background: var(--action); color: rgb(255, 255, 255); box-shadow: rgba(196, 58, 27, 0.9) 0px 10px 22px -10px;}
.btn--book:hover,.btn--book.is-hover{color: rgb(255, 255, 255); transform: translateY(-2px); box-shadow: rgba(196, 58, 27, 0.95) 0px 16px 30px -10px;}
.btn--book:active,.btn--book.is-press{transform: scale(0.97); background: var(--action-press);}
.btn:focus-visible,.btn.is-focus{outline: 3px solid var(--now); outline-offset: 3px; box-shadow: 0 0 0 7px var(--ink);}
.btn--block{display: flex; width: 100%; min-height: 54px; font-size: 16px;}
.btn--internal{background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink);}
.btn--internal:hover,.btn--internal.is-hover{background: var(--ink); color: rgb(255, 255, 255);}
.btn--quiet{min-height: 44px; padding: 0px 4px; background: none; color: var(--ink); font-size: 14.5px;}
.btn--quiet:hover{color: var(--category-reef);}
.btn--soldout{background: rgb(220, 228, 233); color: var(--ink-3); cursor: not-allowed; box-shadow: none;}
.btn--loading .btn__spin{width: 16px; height: 16px; border-radius: 50%; border-width: 3px; border-style: solid; border-right-color: rgba(255, 255, 255, 0.35); border-bottom-color: rgba(255, 255, 255, 0.35); border-left-color: rgba(255, 255, 255, 0.35); border-image: initial; border-top-color: var(--now);}
.block--seam .btn--internal{color: rgb(255, 255, 255); box-shadow: rgb(255, 255, 255) 0px 0px 0px 2px inset;}
.block--seam .btn--internal:hover{background: rgb(255, 255, 255); color: var(--ink);}
.link{font-weight: 700; color: var(--ink); text-decoration-line: underline; text-decoration-style: initial; text-decoration-color: var(--now); text-decoration-thickness: 3px; text-underline-offset: 3px;}
.echo{margin: 0px; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; color: var(--ink-2); text-align: center;}
.echo .icon{color: var(--fam,var(--category-reef));}
.block--seam .echo{color: rgb(221, 230, 235);}
.fact-token{display: inline-flex; align-items: center; gap: 4px; font-family: var(--f-mono); font-size: 10px; padding: 2px 7px; border-radius: 6px; border: 1.5px dashed var(--ink-3); color: var(--ink-2); white-space: nowrap;}
.price{display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 5px;}
.price__from,.price__basis{font-size: 12.5px;}
.price__value{font-family: var(--f-display); font-weight: 700; font-size: 32px; line-height: 1; letter-spacing: -0.045em; font-variant-numeric: tabular-nums;}
.price__note{flex-basis: 100%; font-size: 12px; color: var(--ink-2);}
.price__checked{flex-basis: 100%; font-family: var(--f-mono); font-size: 9.5px; color: var(--ink-3); letter-spacing: 0.02em; margin-top: 2px;}
.price--lg .price__value{font-size: 40px;}
.price--sm .price__value{font-size: 22px;}
.price--pending .price__value{font-family: var(--f-text); font-size: 15px; letter-spacing: 0px;}
.block--seam .price__checked,.block--seam .price__note{color: rgb(184, 198, 206);}
.rating{display: inline-flex; align-items: stretch; gap: 5px; flex-wrap: wrap;}
.rating__score{display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 10px; background: var(--tile); color: var(--ink); font-weight: 700; font-size: 13.5px;}
.rating__star{width: 14px; height: 14px; fill: var(--now); stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round;}
.rating__count{display: inline-flex; align-items: center; padding: 4px 9px; border-radius: 10px; background: var(--tile-2); font-size: 12px; color: var(--ink-2);}
.rating__count:empty{display: none;}
.rating--new .rating__score{background: transparent; border: 1.5px dashed var(--ink); border-radius: 999px;}
.rating--red .rating__score{background: var(--warn); color: rgb(255, 255, 255);}
.rating--red .rating__star{fill: none; stroke: rgb(255, 255, 255);}
.rating--none .rating__score{background: transparent; color: var(--ink-3);}
.chip{display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; background: var(--fam,var(--category-quiet)); color: rgb(255, 255, 255); font-size: 11.5px; font-weight: 700; line-height: 1.1;}
.tag{display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; font-size: 11.5px; font-weight: 700; line-height: 1.1; background: rgb(255, 255, 255); color: var(--ink);}
.tag--pick{background: var(--now); border-radius: 999px;}
.tag--value{box-shadow: inset 0 0 0 1.5px var(--ink); border-radius: 6px;}
.tag--season{color: var(--category-shark); box-shadow: inset 0 0 0 1.5px var(--category-shark); border-radius: 6px;}
.tag--next{background: var(--ink); color: var(--now); border-radius: 6px;}
.tag--nosnorkel{background: var(--sand); color: var(--sand-ink); border-radius: 3px;}
.tag--new{border: 1.5px dashed var(--ink); border-radius: 999px; padding: 3px 9px;}
.tag--red{background: var(--warn); color: rgb(255, 255, 255); border-radius: 3px;}
.verdict{display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 8px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.04em; background: var(--tile);}
.verdict--go{background: var(--now);}
.verdict--value{box-shadow: inset 0 0 0 1.5px var(--ink); background: rgb(255, 255, 255);}
.verdict--season{background: var(--category-shark); color: rgb(255, 255, 255);}
.verdict--nosnorkel{background: var(--sand); color: var(--sand-ink);}
.verdict--skip{background: var(--warn); color: rgb(255, 255, 255);}
.verdict--none{background: transparent; color: var(--ink-3); letter-spacing: 0px; font-weight: 600;}
.ride{display: flex; flex-direction: column; gap: 5px;}
.ride__ends{display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; font-size: 12.5px; font-weight: 600; line-height: 1.3;}
.ride__end{display: flex; align-items: flex-start; gap: 5px;}
.ride__end .icon{width: 15px; height: 15px; margin-top: 1px;}
.ride__end--boat .icon{color: rgb(138, 106, 46);}
.ride__end--water{color: var(--fam); text-align: right; justify-content: flex-end;}
.ride__track{display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: rgb(227, 233, 237);}
.ride__boat{background: var(--ride); transition: width .5s var(--ease-rise);}
.ride__water{background: var(--fam); transition: width .5s var(--ease-rise);}
.ride__calc{font-size: 11px; color: var(--ink-3);}
.ride--not-stated .ride__track,.ride--no-share .ride__track{background: transparent; border: 1.5px dashed var(--ink-3);}
.ride--not-stated .ride__ends{color: var(--ink-3); font-style: italic;}
.ride--not-stated .ride__end--water{color: var(--ink-3);}
.ride--no-snorkel .ride__end--water,.ride--free .ride__end--water{color: var(--warn);}
.ride--free .ride__track{background: repeating-linear-gradient(135deg, rgb(196, 206, 214) 0px, rgb(196, 206, 214) 3px, rgb(227, 233, 237) 3px, rgb(227, 233, 237) 7px);}
.ride--page .ride__ends{font-size: 15px;}
.ride--page .ride__track{height: 22px; border-radius: 8px;}
.ride--page .ride__calc{font-size: 12.5px;}
.block--seam .ride__calc{color: rgb(184, 198, 206);}
.block--seam .ride__track{background: rgb(38, 56, 74);}
.ridechart{display: flex; flex-direction: column; gap: 22px;}
.ridechart__row{display: grid; gap: 10px; border-top: 2px solid var(--line); padding-top: 16px;}
.ridechart__name{font-weight: 700; color: var(--fam);}
.ridechart__line{font-family: var(--f-display); font-weight: 600; font-size: 16px; line-height: 1.25; margin-top: 3px;}
.ridechart__axis{display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: 10px; color: var(--ink-3); border-top: 1.5px solid var(--ink); padding-top: 6px;}
@container (min-width: 900px){.ridechart__row{grid-template-columns: 300px minmax(0px, 1fr); gap: 28px; align-items: center;}
.ridechart__axis{margin-left: 328px;}}
.tcard{background: var(--card); border-radius: var(--r-card); padding: 8px; display: flex; flex-direction: column; height: 100%; color: var(--ink); box-shadow: rgba(19, 32, 43, 0.5) 0px 22px 44px -30px; transition: transform .3s var(--ease-rise),box-shadow .3s;}
.tcard:hover{transform: translateY(-3px); box-shadow: rgba(19, 32, 43, 0.6) 0px 30px 50px -30px;}
.tcard--featured{box-shadow: 0 0 0 3px var(--now),0 22px 44px -30px rgba(19,32,43,.5);}
.tcard__media{position: relative; aspect-ratio: 16 / 10; border-radius: var(--r-photo); overflow: hidden; background: var(--tile);}
.tcard__photo{width: 100%; height: 100%; object-fit: cover;}
.tcard--next .tcard__photo{filter: saturate(0.6);}
.tcard__empty{position: absolute; inset: 0px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; font-size: 12.5px; color: var(--ink-2); background: linear-gradient(180deg,var(--tile) 0 60%,color-mix(in oklch,var(--fam) 16%,var(--tile)) 60%);}
.tcard__empty .sign{width: 64px; height: 64px;}
.tcard__tags{position: absolute; left: 10px; top: 10px; right: 10px; display: flex; flex-wrap: wrap; gap: 6px;}
.tcard__line{display: flex; align-items: baseline; gap: 5px; padding: 14px 6px 0px;}
.tcard__rule{flex: 1 1 0%; height: 2px; background: var(--fam); border-radius: 2px; align-self: center; margin-left: 6px;}
.tcard__meta{display: flex; flex-wrap: wrap; column-gap: 6px; padding: 3px 6px 0px;}
.tcard__body{flex: 1 1 0%; display: flex; flex-direction: column; gap: 11px; padding: 10px 6px 6px;}
.tcard__title{font-family: var(--f-display); font-weight: 600; font-size: 16px; line-height: 1.25; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; text-wrap: pretty;}
.tcard__title:hover{color: var(--ink); text-decoration-line: underline; text-decoration-style: initial; text-decoration-color: var(--now); text-decoration-thickness: 3px;}
.tcard__title--missing{font-family: var(--f-mono); font-size: 11px; font-weight: 500; letter-spacing: 0px; color: var(--ink-3);}
.tcard__trade{margin: 0px; font-size: 14px; line-height: 1.5; color: var(--ink-2);}
.tcard__foot{margin-top: auto; display: flex; flex-direction: column; gap: 11px;}
.specs{display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 5px;}
.spec{background: var(--tile); border-radius: var(--r-tile); padding: 7px 8px; display: flex; flex-direction: column; gap: 1px; min-width: 0px;}
.spec__v{font-weight: 700; font-size: 12.5px; line-height: 1.2; overflow-wrap: anywhere;}
.spec__k{font-size: 10.5px; color: var(--ink-3);}
.spec--unknown .spec__v{font-weight: 500; font-style: italic; color: var(--ink-3);}
.cards{display: grid; gap: var(--gap); grid-template-columns: minmax(0px, 1fr);}
@container (min-width: 900px){.cards{grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 20px;}}
.site-header{display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 16px; position: relative; z-index: 5;}
.brand{display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink);}
.brand .sign{--fam: var(--category-shark); width: 32px; height: 32px;}
.brand__word{display: flex; flex-direction: column; line-height: 1;}
.brand__holbox{font-family: var(--f-display); font-weight: 700; font-size: 16px; letter-spacing: -0.04em;}
.brand__rule{height: 1.5px; background: var(--category-shark); margin: 3px 0px;}
.brand__snork{font-family: var(--f-display); font-size: 9px;}
.site-nav{display: none;}
.today{margin-left: auto; display: inline-flex; align-items: center; gap: 6px; background: rgb(255, 255, 255); border-radius: 12px; padding: 7px 10px; font-family: var(--f-mono); font-size: 10px; white-space: nowrap;}
.today::before{content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--now); border: 1.5px solid var(--ink);}
.menu-btn{min-height: 44px; padding: 0px 14px; border-radius: 14px; border: 0px; box-shadow: inset 0 0 0 2px var(--ink); background: transparent; font-weight: 700; font-size: 13px; cursor: pointer; letter-spacing: 0.04em;}
.menu-btn.is-open{background: var(--ink); color: rgb(255, 255, 255);}
.drawer{display: none; position: absolute; left: 8px; right: 8px; top: 64px; background: rgb(255, 255, 255); border-radius: 24px; padding: 10px; box-shadow: rgba(19, 32, 43, 0.6) 0px 30px 60px -20px; z-index: 20;}
.drawer.is-open{display: grid; gap: 2px;}
.drawer a{display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0px 14px; border-radius: 14px; text-decoration: none; font-weight: 600;}
.drawer a:hover{background: var(--tile);}
@container (min-width: 900px){.site-header{padding: 18px 40px; gap: 30px;}
.brand .sign{width: 38px; height: 38px;}
.brand__holbox{font-size: 20px;}
.brand__snork{font-size: 10.5px;}
.site-nav{display: flex; gap: 22px; margin-left: auto; font-size: 15px; font-weight: 600;}
.site-nav a{text-decoration: none;}
.today{margin-left: 0px; font-size: 10.5px;}
.menu-btn,.drawer{display: none !important;}}
.site-footer{background: rgb(255, 255, 255); border-radius: 32px 32px 0px 0px; padding: 28px 16px 110px; display: grid; gap: 22px; margin-top: 40px;}
.site-footer__brand{display: flex; flex-direction: column; gap: 12px; max-width: 420px;}
.site-footer__brand p{margin: 0px; font-size: 14px; line-height: 1.5; color: var(--ink-2);}
.site-footer__nav{display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px;}
.site-footer__nav a{min-height: 36px; display: flex; align-items: center; font-size: 14px; font-weight: 600; text-decoration: none;}
.site-footer__legal{display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--ink-3); border-top: 2px solid var(--tile); padding-top: 16px;}
.site-footer__legal a{color: var(--ink-2);}
@container (min-width: 900px){.site-footer{grid-template-columns: 1fr 1.4fr; padding: 48px 40px 40px; column-gap: 60px;}
.site-footer__nav{grid-template-columns: repeat(3, 1fr);}
.site-footer__legal{grid-column: 1 / -1;}}
.sticky-bar{position: sticky; bottom: 8px; margin: 0px 8px 8px; z-index: 10; background: var(--ink); color: rgb(255, 255, 255); border-radius: 24px; padding: 10px 10px 10px 16px; display: flex; align-items: center; gap: 10px; box-shadow: rgba(19, 32, 43, 0.5) 0px -6px 30px -10px;}
.sticky-bar__info{flex: 1 1 0%; min-width: 0px; display: flex; flex-direction: column; gap: 1px;}
.sticky-bar__name{font-size: 12px; font-weight: 600; line-height: 1.25;}
.sticky-bar__price{font-family: var(--f-display); font-weight: 700; font-size: 17px; letter-spacing: -0.03em;}
.sticky-bar__basis{font-family: var(--f-text); font-weight: 500; font-size: 11px; letter-spacing: 0px; margin-left: 4px; opacity: 0.85;}
.sticky-bar .btn{flex: 0 0 auto; min-height: 48px;}
.to-top{position: absolute; right: 14px; top: -58px; width: 44px; height: 44px; border-radius: 50%; background: rgb(255, 255, 255); color: var(--ink); display: flex; align-items: center; justify-content: center; box-shadow: rgba(19, 32, 43, 0.5) 0px 8px 20px -8px;}
.to-top--solo{position: sticky; top: auto; right: auto; bottom: 16px; margin: 0px 16px 16px auto; z-index: 10; box-shadow: 0 8px 20px -8px rgba(19,32,43,.5),inset 0 0 0 2px var(--ink);}
.to-top{transition: transform .25s var(--ease-rise);}
.to-top:hover{transform: translateY(-3px); color: var(--ink);}
@container (min-width: 900px){.sticky-bar{max-width: 760px; margin: 0px auto 16px; bottom: 16px;}}
.consent{background: rgb(255, 255, 255); border-radius: 24px; padding: 16px; display: flex; flex-direction: column; gap: 12px; box-shadow: rgba(19, 32, 43, 0.55) 0px 20px 50px -20px; font-size: 13.5px; line-height: 1.5;}
.consent__row{display: flex; gap: 8px; flex-wrap: wrap;}
.hero-home__head{display: flex; flex-direction: column; gap: 10px; padding-top: 6px; padding-bottom: 16px;}
.hero-home__titles{display: grid; gap: 10px;}
.hero-home__stage{display: grid; grid-template-columns: minmax(0px, 1fr); padding: 0px 12px;}
.hero-home__panel{display: contents;}
.hero-home__panel > *{transition: opacity 0.35s, visibility;}
.hero-home__panel:not(.is-active) > *{opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.35s, visibility 0.35s;}
.hero-home__media{grid-area: 1 / 1; margin: 0px; height: 168px; border-radius: 24px; overflow: hidden; position: relative; background: var(--fam);}
.hero-home__photo{width: 100%; height: 100%; object-fit: cover;}
.hero-home__cap{position: absolute; left: 14px; bottom: 44px; font-family: var(--f-mono); font-size: 10px; color: rgb(255, 255, 255); letter-spacing: 0.04em; text-shadow: rgba(0, 0, 0, 0.5) 0px 1px 8px; display: none;}
.fswitch{grid-area: 2 / 1; margin: -26px 8px 0px; position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 4px; padding: 4px; background: rgb(255, 255, 255); border-radius: 18px; box-shadow: rgba(19, 32, 43, 0.7) 0px 12px 26px -14px;}
.fswitch__tab{border: 0px; cursor: pointer; min-height: 48px; min-width: 0px; border-radius: 14px; padding: 5px 8px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; text-align: left; background: transparent; color: var(--ink); transition: background .3s var(--ease-rise),color .3s;}
.fswitch__tab.is-active{background: var(--ink); color: rgb(255, 255, 255);}
.fswitch__label{font-size: 12px; font-weight: 700; line-height: 1.15; overflow-wrap: anywhere;}
.fswitch__sub{display: block; font-size: 10px; line-height: 1.25; opacity: 0.9; overflow-wrap: anywhere;}
.fswitch__dot{display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 4px; vertical-align: 0px; background: transparent;}
.fswitch__dot.is-pick{background: var(--now);}
.hero-card{grid-area: 3 / 1; margin-top: 10px; position: relative; z-index: 2; background: rgb(255, 255, 255); border-radius: 28px; padding: 16px; display: flex; flex-direction: column; gap: 12px; box-shadow: rgba(19, 32, 43, 0.6) 0px 24px 50px -30px;}
.hero-card__tags{display: flex; flex-wrap: wrap; gap: 6px;}
.hero-card__title{font-family: var(--f-display); font-weight: 600; font-size: 16px; line-height: 1.25; letter-spacing: -0.02em; text-decoration-line: underline; text-decoration-style: initial; text-decoration-color: var(--now); text-decoration-thickness: 3px; text-underline-offset: 4px;}
.hero-card__deal{display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; flex-wrap: wrap;}
.hero-card__lead{margin: 0px; font-size: 14.5px; line-height: 1.5; order: 5;}
.hero-card__more{order: 6; display: flex; flex-direction: column; gap: 12px; border-top: 2px solid var(--tile); padding-top: 12px;}
.hero-card__warn{order: 7; display: flex; gap: 8px; font-size: 12.5px; line-height: 1.4; color: var(--warn); font-weight: 600;}
@container (min-width: 900px){.hero-home__head{padding-top: 18px; padding-bottom: 30px;}
.hero-home__titles{grid-template-columns: minmax(0px, 1fr) 470px; gap: 32px; align-items: end;}
.hero-home__stage{grid-template-columns: minmax(0px, 1fr) 420px 28px; grid-template-rows: 28px auto 1fr 28px; padding: 0px 24px;}
.hero-home__media{grid-area: 1 / 1 / -1 / -1; height: auto; min-height: 640px; border-radius: 36px;}
.hero-home__cap{display: block; left: 36px; bottom: 34px; font-size: 11px;}
.fswitch{grid-area: 2 / 2; margin: 0px;}
.hero-card{grid-area: 3 / 2; margin-top: 10px; align-self: start; padding: 22px;}
.hero-card__lead{order: 0;}
.hero-card__title{font-size: 18px;}
.hero-card__warn{order: 0;}}
.hero-page{display: grid; gap: 14px; padding-bottom: 10px;}
.hero-page__media{margin: 0px 12px; height: 190px; border-radius: 24px; overflow: hidden; position: relative; background: var(--fam);}
.hero-page__photo{width: 100%; height: 100%; object-fit: cover;}
.hero-page__body{display: flex; flex-direction: column; gap: 12px;}
.hero-page__deal{background: rgb(255, 255, 255); border-radius: 24px; padding: 14px; display: flex; flex-direction: column; gap: 10px;}
.hero-page__dealrow{display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; flex-wrap: wrap;}
.hero-page__facts{display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; font-weight: 600;}
.hero-page__facts span{background: rgb(255, 255, 255); border-radius: 10px; padding: 5px 9px;}
@container (min-width: 900px){.hero-page{grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr); gap: 0px; align-items: stretch; padding: 18px 24px 0px;}
.hero-page__media{order: 2; margin: 0px; height: auto; min-height: 560px; border-radius: 36px;}
.hero-page__body{padding: 30px 40px 30px 16px; justify-content: center; gap: 18px;}
.hero-page__deal{padding: 20px; max-width: 460px;}}
.hero-page--dark{background: var(--ink); color: rgb(221, 230, 235);}
.hero-page--dark .h1{color: rgb(255, 255, 255);}
.hero-page--dark .kicker{color: rgb(255, 255, 255);}
.hero-page--dark .kicker::before{border-color: rgb(255, 255, 255);}
@container (min-width: 900px){.hero-page--dark{padding-bottom: 40px;}}
.hero-answer{display: flex; flex-direction: column; gap: 14px; padding-top: 8px;}
.hero-answer__big{font-family: var(--f-display); font-weight: 700; font-size: 44px; line-height: 1; letter-spacing: -0.05em; color: var(--category-reef); margin: 0px;}
.hero-answer__big em{font-style: normal; color: var(--ink);}
.hero-answer__row{display: grid; gap: 14px;}
@container (min-width: 900px){.hero-answer{padding-top: 30px;}
.hero-answer__big{font-size: 112px;}
.hero-answer__row{grid-template-columns: minmax(0px, 1fr) 440px; gap: 40px; align-items: end;}}
.answers{margin: 0px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px;}
.answers__item{background: rgb(255, 255, 255); border-radius: 20px; padding: 12px 14px; display: flex; flex-direction: column; gap: 3px;}
.answers__item:last-child{grid-column: 1 / -1;}
.answers dt{font-size: 12px; color: var(--ink-3);}
.answers dd{margin: 0px; font-family: var(--f-display); font-weight: 600; font-size: 18px; letter-spacing: -0.02em;}
@container (min-width: 900px){.answers{grid-template-columns: repeat(5, minmax(0px, 1fr)); gap: 0px; background: rgb(255, 255, 255); border-radius: 24px; padding: 6px;}
.answers__item{border-radius: 0px; background: none; border-right: 2px solid var(--tile);}
.answers__item:last-child{grid-column: auto; border-right: 0px;}
.answers dd{font-size: 22px;}}
.famtile{position: relative; display: flex; flex-direction: column; border-radius: var(--r-card); overflow: hidden; background: var(--fam); color: rgb(255, 255, 255); text-decoration: none; min-height: 260px; transition: transform .3s var(--ease-rise);}
.famtile:hover{color: rgb(255, 255, 255); transform: translateY(-3px);}
.famtile__photo{position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; mix-blend-mode: luminosity;}
.famtile__body{position: relative; margin-top: auto; padding: 18px; display: flex; flex-direction: column; gap: 8px; background: linear-gradient(180deg,transparent,color-mix(in oklch,var(--fam) 85%,black) 45%);}
.famtile__name{font-family: var(--f-display); font-weight: 700; font-size: 24px; letter-spacing: -0.035em;}
.famtile__facts{display: flex; flex-wrap: wrap; gap: 6px;}
.famtile__price{display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;}
.famtile__from{font-size: 13px; opacity: 0.9;}
.famtile__value{font-family: var(--f-display); font-weight: 700; font-size: 34px; line-height: 1; letter-spacing: -0.045em;}
.famtile__fact{display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); box-shadow: rgba(255, 255, 255, 0.4) 0px 0px 0px 1px inset; color: rgb(255, 255, 255); font-size: 12.5px; font-weight: 600; line-height: 1.1;}
.famtile__go{display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; min-height: 44px;}
.factcard{background: rgb(255, 255, 255); border-radius: 24px; padding: 18px; display: flex; flex-direction: column; gap: 8px;}
.factcard__icon{color: var(--fam,var(--category-reef)); width: 28px; height: 28px;}
.factcard__title{font-weight: 700; font-size: 16px; line-height: 1.3;}
.factcard__text{margin: 0px; font-size: 14px; line-height: 1.5; color: var(--ink-2);}
.tiles{display: grid; grid-template-columns: 1fr 1fr; gap: 8px;}
.tile{background: rgb(255, 255, 255); border-radius: 20px; padding: 14px; display: flex; flex-direction: column; gap: 6px;}
.tile__icon{width: 24px; height: 24px; color: var(--category-reef);}
.tile__k{font-size: 12px; color: var(--ink-3);}
.tile__v{font-weight: 700; font-size: 15px; line-height: 1.3;}
@container (min-width: 900px){.tiles{grid-template-columns: repeat(6, minmax(0px, 1fr)); gap: 12px;}}
.checklist{list-style: none; margin: 0px; padding: 0px; display: grid; gap: 8px;}
.checklist li{display: flex; gap: 10px; align-items: flex-start; background: rgb(255, 255, 255); border-radius: 16px; padding: 12px 14px; font-size: 14.5px; line-height: 1.4;}
.checklist .icon{color: var(--category-reef); margin-top: 1px;}
.checklist__src{margin-left: auto; font-family: var(--f-mono); font-size: 9.5px; color: var(--ink-3); white-space: nowrap; padding-top: 3px;}
.inc{display: grid; gap: 10px;}
.inc__col{background: rgb(255, 255, 255); border-radius: 24px; padding: 16px;}
.inc__col h3{margin: 0px 0px 10px; font-size: 14px; font-weight: 700;}
.inc__list{list-style: none; margin: 0px; padding: 0px; display: grid; gap: 7px; font-size: 14px; line-height: 1.4;}
.inc__list li{display: flex; gap: 8px;}
.inc__list--yes .icon{color: var(--category-reef);}
.inc__list--no .icon{color: var(--warn);}
@container (min-width: 900px){.inc{grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 16px;}}
.pick{background: rgb(255, 255, 255); border-radius: 32px; padding: 8px; display: grid; gap: 8px;}
.pick__media{position: relative; border-radius: 24px; overflow: hidden; height: 180px;}
.pick__photo{width: 100%; height: 100%; object-fit: cover;}
.pick__media .tag{position: absolute; left: 12px; top: 12px;}
.pick__body{padding: 12px 10px 10px; display: flex; flex-direction: column; gap: 14px;}
.pick__headline{font-family: var(--f-display); font-weight: 700; font-size: 21px; line-height: 1.12; letter-spacing: -0.035em; color: var(--fam);}
.pick__reason{margin: 0px; font-size: 15px; line-height: 1.55;}
.why{list-style: none; margin: 0px; padding: 0px; display: grid; gap: 10px;}
.why li{display: grid; grid-template-columns: 26px 1fr; gap: 10px; font-size: 14.5px; line-height: 1.45;}
.why .icon{width: 24px; height: 24px; color: var(--fam);}
.pick__minus{font-size: 14px; font-weight: 600; color: var(--warn); line-height: 1.45; margin: 0px;}
@container (min-width: 900px){.pick{grid-template-columns: 440px minmax(0px, 1fr); gap: 12px;}
.pick__media{height: auto; min-height: 420px;}
.pick__body{padding: 24px 26px; display: grid; grid-template-columns: minmax(0px, 1.1fr) minmax(0px, 1fr); gap: 22px 30px; align-content: start;}
.pick__headline{font-size: 30px; grid-column: 1 / -1;}}
.persona{background: rgb(255, 255, 255); border-radius: 28px; padding: 18px; display: flex; flex-direction: column; gap: 12px; height: 100%;}
.persona__head{display: flex; align-items: center; gap: 12px;}
.persona__mark{display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--fam); flex: 0 0 auto;}
.persona__mark .icon{width: 30px; height: 30px; stroke-width: 1.9;}
.persona__wave{width: 30px; height: 6px; fill: none; stroke: currentcolor; stroke-width: 1.8; stroke-linecap: round;}
.persona__name{font-family: var(--f-display); font-weight: 600; font-size: 17px; line-height: 1.15; letter-spacing: -0.02em; color: var(--fam);}
.persona__reason{margin: 0px; font-size: 14.5px; line-height: 1.5;}
.persona__foot{margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; flex-wrap: wrap;}
.vsheet{display: grid; gap: 14px;}
.vsheet__main{background: rgb(255, 255, 255); border-radius: 32px; padding: 20px; display: flex; flex-direction: column; gap: 14px;}
.vsheet__name{font-family: var(--f-display); font-weight: 700; font-size: 24px; line-height: 1.1; letter-spacing: -0.035em; text-decoration: none;}
.vsheet__reasons{list-style: none; margin: 0px; padding: 0px; counter-reset: r 0; display: grid; gap: 12px;}
.vsheet__reasons li{counter-increment: r 1; display: grid; grid-template-columns: 34px 1fr; gap: 10px; font-size: 15px; line-height: 1.5;}
.vsheet__reasons li::before{content: counter(r); font-family: var(--f-display); font-weight: 700; font-size: 22px; color: var(--fam); line-height: 1;}
.vsheet__minus{border-radius: 28px; padding: 20px; background: rgb(255, 255, 255); box-shadow: inset 0 0 0 2px var(--warn); display: flex; flex-direction: column; gap: 10px;}
.vsheet__minus h3{margin: 0px; color: var(--warn); font-size: 15px;}
.vsheet__minus ul{margin: 0px; padding-left: 18px; display: grid; gap: 6px; font-size: 14.5px; line-height: 1.45;}
.alts{display: grid; gap: 8px;}
.alt{background: rgb(255, 255, 255); border-radius: 22px; padding: 14px 16px; display: grid; gap: 10px;}
.alt__text{font-size: 14px; line-height: 1.45;}
@container (min-width: 900px){.vsheet{grid-template-columns: minmax(0px, 1.5fr) minmax(0px, 1fr); gap: 20px;}
.vsheet__main{padding: 30px;}
.vsheet__name{font-size: 34px;}
.alt{grid-template-columns: minmax(0px, 1.4fr) minmax(0px, 1fr) auto; align-items: center; gap: 24px;}}
.sortbar{display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 12px; font-size: 13px; font-weight: 700;}
.sortbar__btn{min-height: 40px; padding: 0px 12px; border-radius: 12px; border: 0px; box-shadow: inset 0 0 0 1.5px var(--ink); background: rgb(255, 255, 255); font-weight: 700; font-size: 13px; cursor: pointer;}
.sortbar__btn.is-active{background: var(--ink); color: rgb(255, 255, 255);}
.sortbar__meta{margin-left: auto; font-family: var(--f-mono); font-size: 10px; font-weight: 400; color: var(--ink-3);}
.ctable{width: 100%; border-collapse: separate; border-spacing: 0px 8px; font-size: 13.5px;}
.ctable thead{display: none;}
.ctable,.ctable tbody,.ctable tr,.ctable td{display: block;}
.ctable__row{background: rgb(255, 255, 255); border-radius: 24px; padding: 14px 16px; margin-bottom: 10px; grid-template-columns: 1fr 1fr; gap: 10px 12px; display: grid !important;}
.ctable td{padding: 0px; min-width: 0px;}
.ctable td[data-label]::before{content: attr(data-label); display: block; font-size: 10.5px; color: var(--ink-3); margin-bottom: 2px;}
.ctable__trip,.ctable__ride,.ctable__verdict,.ctable__act{grid-column: 1 / -1;}
.ctable__verdict{order: -1;}
.ctable__verdict::before{display: none !important;}
.ctable__name{font-family: var(--f-display); font-weight: 600; font-size: 15px; line-height: 1.25; text-decoration: none;}
.ctable__row.is-pick{box-shadow: 0 0 0 3px var(--now);}
.ctable__row.is-diy{background: repeating-linear-gradient(135deg, rgb(244, 247, 249) 0px, rgb(244, 247, 249) 8px, rgb(255, 255, 255) 8px, rgb(255, 255, 255) 16px);}
.ctable__diy{font-size: 12.5px; color: var(--ink-3);}
@container (min-width: 900px){.ctable{display: table;}
.ctable thead{display: table-header-group;}
.ctable tbody{display: table-row-group;}
.ctable tr{display: table-row;}
.ctable td,.ctable th{display: table-cell; padding: 14px 10px; vertical-align: middle; text-align: left;}
.ctable__row{padding: 0px; margin: 0px; display: table-row !important;}
.ctable__row td{background: rgb(255, 255, 255);}
.ctable__row.is-diy td{background: transparent;}
.ctable__row td:first-child{border-radius: 20px 0px 0px 20px; padding-left: 18px;}
.ctable__row td:last-child{border-radius: 0px 20px 20px 0px; padding-right: 16px;}
.ctable td[data-label]::before{display: none;}
.ctable th{font-size: 11.5px; font-weight: 700; color: var(--ink-3); padding-block: 4px;}
.ctable__verdict{order: 0;}
.ctable__ride{width: 26%;}
.ctable__row.is-pick td{box-shadow: inset 0 3px 0 var(--now),inset 0 -3px 0 var(--now);}}
.thsort{border: 0px; background: none; padding: 0px; font: inherit; color: inherit; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px;}
.seasonbar{display: flex; flex-direction: column; gap: 5px;}
.seasonbar__head{display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; font-weight: 600;}
.seasonbar__head .icon{width: 15px; height: 15px;}
.seasonbar__note{font-weight: 500; color: var(--ink-3); text-align: right;}
.seasonbar__cells{display: grid; grid-template-columns: repeat(12, minmax(0px, 1fr)); gap: 3px;}
.seasonbar__cell{display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 9.5px; color: var(--ink-3); min-height: 22px;}
.seasonbar__cell::before{content: ""; width: 100%; height: 8px; border-radius: 4px; background: rgb(227, 233, 237);}
.seasonbar__cell.is-on::before{background: var(--fam);}
.seasonbar__cell.is-now::before{box-shadow: 0 0 0 2px var(--ink),0 0 0 5px var(--now);}
.months{display: flex; flex-direction: column; gap: 14px;}
.months__row{display: grid; grid-auto-flow: column; grid-auto-columns: 92px; gap: 6px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 8px; margin: 0px -2px;}
.month{scroll-snap-align: start; border: 0px; box-shadow: inset 0 0 0 1.5px var(--line); background: rgb(255, 255, 255); border-radius: 16px; padding: 10px 9px 9px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; text-align: left; min-height: 118px; position: relative; transition: transform .25s var(--ease-rise);}
.month:hover{transform: translateY(-2px);}
.month.is-active{box-shadow: inset 0 0 0 2.5px var(--ink);}
.month--shark{box-shadow: inset 0 5px 0 var(--category-shark),inset 0 0 0 1.5px var(--line);}
.month--shark.is-active{box-shadow: inset 0 5px 0 var(--category-shark),inset 0 0 0 2.5px var(--ink);}
.month__name{font-weight: 800; font-size: 14px; display: flex; align-items: center; gap: 5px;}
.month__now{font-family: var(--f-mono); font-size: 8.5px; font-weight: 500; background: var(--now); border-radius: 6px; padding: 1px 5px;}
.month__price{margin-top: auto; font-family: var(--f-display); font-weight: 700; font-size: 15px; letter-spacing: -0.03em;}
.mdots{display: flex; flex-direction: column; gap: 3px; font-size: 10.5px; line-height: 1.2;}
.mdot{display: flex; align-items: center; gap: 5px;}
.mdot::before{content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--fam);}
.mdot--off{color: var(--ink-3);}
.mdot--off::before{background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-3);}
.mdot--half::before{background: linear-gradient(90deg,var(--fam) 50%,transparent 50%); box-shadow: inset 0 0 0 1.5px var(--fam);}
.months__panel{display: none; background: rgb(255, 255, 255); border-radius: 28px; padding: 16px; gap: 12px;}
.months__panel.is-active{display: grid;}
.months__pair{display: grid; gap: 8px;}
.mbox{border-radius: 18px; padding: 12px 14px; background: var(--tile); display: flex; flex-direction: column; gap: 3px;}
.mbox__k{font-size: 11.5px; font-weight: 700; display: flex; align-items: center; gap: 6px;}
.mbox__v{font-size: 14.5px; line-height: 1.4;}
.mbox--avoid .mbox__k{color: var(--warn);}
.months__tour{display: flex; flex-direction: column; gap: 10px;}
.months__foot{font-size: 12.5px; color: var(--warn); font-weight: 600; display: flex; gap: 6px; align-items: flex-start;}
@container (min-width: 900px){.months__row{grid-auto-flow: row; grid-template-columns: repeat(12, minmax(0px, 1fr)); overflow: visible;}
.month{min-height: 128px;}
.months__panel.is-active{grid-template-columns: minmax(0px, 1.3fr) minmax(0px, 1fr); padding: 22px; gap: 22px;}
.months__pair{grid-template-columns: 1fr 1fr;}}
.timeline{display: flex; flex-direction: column; gap: 16px;}
.timeline__bar{display: flex; height: 34px; gap: 2px; border-radius: 12px; overflow: hidden;}
.tseg{display: flex; align-items: center; padding: 0px 8px; font-size: 11.5px; font-weight: 700; min-width: 0px;}
.tseg__label{display: none; white-space: nowrap;}
.tseg--boat{background: var(--ride); color: var(--ride-ink);}
.tseg--water{background: var(--fam); color: rgb(255, 255, 255);}
.tseg--land{background: var(--sand); color: var(--sand-ink);}
.tseg--unknown{background: repeating-linear-gradient(135deg, rgb(196, 206, 214) 0px, rgb(196, 206, 214) 3px, rgb(227, 233, 237) 3px, rgb(227, 233, 237) 8px); color: var(--ink-2);}
.timeline__steps{list-style: none; margin: 0px; padding: 0px; display: grid; gap: 0px;}
.tstep{display: grid; grid-template-columns: 74px 20px minmax(0px, 1fr); gap: 10px; padding-bottom: 14px; position: relative;}
.tstep__time{font-family: var(--f-mono); font-size: 10.5px; padding-top: 3px; color: var(--ink-2);}
.tstep__dot{width: 14px; height: 14px; border-radius: 50%; margin-top: 2px; background: var(--ride); position: relative; z-index: 1;}
.tstep--water .tstep__dot{background: var(--fam);}
.tstep--land .tstep__dot{background: var(--sand); box-shadow: inset 0 0 0 1.5px var(--sand-ink);}
.tstep--unknown .tstep__dot{background: rgb(255, 255, 255); box-shadow: inset 0 0 0 2px var(--ink-3);}
.tstep::before{content: ""; position: absolute; left: 90px; top: 14px; bottom: 0px; width: 2px; background: var(--line);}
.tstep:last-child::before{display: none;}
.tstep__what{font-weight: 700; font-size: 14.5px;}
.tstep__desc{font-size: 13.5px; color: var(--ink-2); line-height: 1.45;}
@container (min-width: 900px){.timeline__bar{height: 48px;}
.tseg__label{display: inline;}
.timeline__steps{grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 18px;}
.tstep{grid-template-columns: 1fr; gap: 4px; padding: 0px;}
.tstep::before{display: none;}
.tstep__dot{order: -1;}}
.duel{width: 100%; border-collapse: separate; border-spacing: 0px; background: rgb(255, 255, 255); border-radius: 28px; overflow: hidden; font-size: 13.5px; table-layout: fixed;}
.duel th,.duel td{padding: 11px 10px; text-align: left; vertical-align: top; border-bottom: 1.5px solid var(--tile); line-height: 1.4;}
.duel thead th{vertical-align: bottom; background: var(--tile-2);}
.duel__crit{width: 30%; font-size: 11.5px; font-weight: 700; color: var(--ink-3);}
.duel__top{box-shadow: inset 0 4px 0 var(--now);}
.duel__pname{font-family: var(--f-display); font-weight: 600; font-size: 13px; line-height: 1.25; display: block; margin-top: 6px; text-decoration: none;}
.duel tfoot td{border-bottom: 0px;}
.duel__whom td{background: color-mix(in oklch,var(--now) 18%,#fff); font-weight: 600;}
@container (min-width: 900px){.duel{font-size: 15px;}
.duel th,.duel td{padding: 14px 20px;}
.duel__crit{width: 22%; font-size: 12.5px;}
.duel__pname{font-size: 17px;}}
.route{list-style: none; margin: 0px; padding: 0px; display: grid; gap: 8px;}
.route__leg{background: rgb(255, 255, 255); border-radius: 22px; padding: 14px 16px; display: grid; grid-template-columns: 34px minmax(0px, 1fr); gap: 4px 12px; align-items: start;}
.route__leg .icon{width: 28px; height: 28px; color: var(--category-reef); grid-row: span 2;}
.route__what{font-weight: 700; font-size: 15px;}
.route__facts{display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px;}
.entity{display: grid; gap: 14px;}
.entity__dl{margin: 0px; display: grid; grid-template-columns: 120px minmax(0px, 1fr); gap: 0px; background: rgba(255, 255, 255, 0.06); border-radius: 24px; overflow: hidden;}
.entity__dl dt,.entity__dl dd{margin: 0px; padding: 11px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); font-size: 13.5px; line-height: 1.4;}
.entity__dl dt{color: rgb(184, 198, 206); font-size: 12px;}
@container (min-width: 900px){.entity{grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr); gap: 40px;}
.entity__dl{grid-template-columns: 200px minmax(0px, 1fr);}}
.gotchas{list-style: none; margin: 0px; padding: 0px; display: grid; gap: 8px;}
.gotcha{background: rgb(255, 255, 255); border-radius: 22px; padding: 14px 16px; display: grid; gap: 6px;}
.gotcha__issue{display: flex; gap: 8px; font-weight: 700; font-size: 14.5px; line-height: 1.35;}
.gotcha__issue .icon{color: var(--warn);}
.gotcha__fix{display: flex; gap: 8px; font-size: 14px; line-height: 1.45; color: var(--ink-2);}
.gotcha__fix .icon{color: var(--category-reef);}
@container (min-width: 900px){.gotchas{grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 14px;}}
.species{width: 100%; border-collapse: collapse; background: rgb(255, 255, 255); border-radius: 24px; overflow: hidden; font-size: 14px;}
.species th,.species td{padding: 11px 14px; text-align: left; border-bottom: 1.5px solid var(--tile); vertical-align: top;}
.species th{font-size: 11.5px; color: var(--ink-3); background: var(--tile-2);}
.species__what{font-weight: 700; white-space: nowrap;}
.leader{display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 22px;}
.leader__score{font-family: var(--f-display); font-weight: 700; font-size: 64px; line-height: 1; letter-spacing: -0.05em; color: rgb(255, 255, 255);}
.leader__meta{display: flex; flex-direction: column; gap: 4px; font-size: 14px;}
.review{background: rgb(255, 255, 255); color: var(--ink); border-radius: 26px; padding: 18px; display: flex; flex-direction: column; gap: 12px; height: 100%;}
.review__head{display: flex; align-items: center; gap: 10px;}
.review__avatar{width: 44px; height: 44px; border-radius: 50%; background: var(--category-shark); color: rgb(255, 255, 255); display: flex; align-items: center; justify-content: center; font-family: var(--f-display); font-weight: 700; font-size: 17px; flex: 0 0 auto;}
.review__who{display: flex; flex-direction: column; gap: 2px; font-size: 13px; min-width: 0px;}
.review__name{font-weight: 700; font-size: 15px;}
.review__quote{margin: 0px; display: flex; flex-direction: column; gap: 6px;}
.review__pending{height: 10px; border-radius: 5px; background: repeating-linear-gradient(90deg, rgb(227, 233, 237) 0px, rgb(227, 233, 237) 60%, transparent 60%, transparent 100%);}
.review__pending--short{width: 62%;}
.review__label{font-family: var(--f-mono); font-size: 9.5px; color: var(--ink-3);}
.review__tour{margin-top: auto; font-size: 13px; display: flex; gap: 6px; align-items: center;}
.review--critical{box-shadow: inset 0 0 0 2px var(--warn);}
.review--critical .review__avatar{background: var(--warn);}
.review__src{font-size: 12.5px; color: rgb(184, 198, 206); margin-top: 14px;}
.faq{display: flex; flex-direction: column; gap: 8px;}
.faq__bar{display: flex; justify-content: flex-end;}
.faq__item{background: rgb(255, 255, 255); border-radius: 24px; padding: 4px 16px 16px;}
.faq__q{width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 52px; border: 0px; background: none; padding: 10px 0px 4px; text-align: left; cursor: pointer; font-family: var(--f-display); font-weight: 600; font-size: 15px; line-height: 1.3; letter-spacing: -0.015em;}
.faq__mark{flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: var(--tile); display: flex; align-items: center; justify-content: center; font-family: var(--f-text); font-weight: 700; font-size: 18px; transition: transform .3s var(--ease-rise);}
.faq__a{font-size: 15px; line-height: 1.6; color: var(--ink-2); display: flex; flex-direction: column; gap: 10px;}
.faq__a p{margin: 0px;}
.faq__a p:first-child{color: var(--ink);}
.faq__item.is-closed{padding-bottom: 4px;}
.faq__item.is-closed .faq__a{display: none;}
.faq__item.is-closed .faq__mark{transform: rotate(90deg);}
@container (min-width: 900px){.faq{display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 12px;}
.faq__bar{grid-column: 1 / -1;}
.faq__item{padding: 6px 24px 22px;}
.faq__q{font-size: 17px;}}
.article{display: grid; gap: 18px;}
.article__body{display: flex; flex-direction: column; gap: 16px; max-width: 680px;}
.article__body p{margin: 0px; font-size: 16.5px; line-height: 1.7; text-wrap: pretty;}
.article__body h3{margin: 10px 0px 0px;}
.article__aside{display: flex; flex-direction: column; gap: 14px;}
@container (min-width: 900px){.article{grid-template-columns: minmax(0px, 680px) minmax(0px, 1fr); gap: 60px; align-items: start;}
.article__aside{position: sticky; top: 20px;}
.article__body p{font-size: 17px;}}
.keypoint{border-radius: 22px; padding: 16px 18px; background: rgb(255, 255, 255); box-shadow: inset 4px 0 0 var(--now); display: flex; flex-direction: column; gap: 4px;}
.keypoint__k{font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.06em;}
.keypoint__v{font-size: 16px; font-weight: 600; line-height: 1.45;}
.tldr{border-radius: 24px; padding: 18px; background: rgb(255, 255, 255); box-shadow: inset 0 0 0 2px var(--ink); display: flex; flex-direction: column; gap: 6px;}
.tldr__k{font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.06em;}
.tldr__v{margin: 0px; font-size: 17px; line-height: 1.5; font-weight: 600;}
@container (min-width: 900px){.tldr{padding: 26px 30px;}
.tldr__v{font-size: 21px;}}
.bigfig{display: flex; flex-direction: column; gap: 2px; padding: 6px 0px;}
.bigfig__n{font-family: var(--f-display); font-weight: 700; font-size: 48px; line-height: 1; letter-spacing: -0.05em; color: var(--fam,var(--category-reef));}
.bigfig__l{font-size: 14px; color: var(--ink-2);}
.pull{margin: 0px; padding: 6px 0px 6px 18px; border-left: 3px solid var(--fam,var(--category-reef)); font-family: var(--f-display); font-weight: 500; font-size: 19px; line-height: 1.35; letter-spacing: -0.02em;}
.pull cite{display: block; margin-top: 8px; font-family: var(--f-text); font-style: normal; font-size: 12.5px; color: var(--ink-3);}
.fig{margin: 0px; display: flex; flex-direction: column; gap: 8px;}
.fig__img{width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-photo);}
.fig__cap{font-size: 12.5px; color: var(--ink-3); line-height: 1.45;}
.sidenote{background: var(--tile-2); border-radius: 18px; padding: 14px 16px; font-size: 14px; line-height: 1.5; display: flex; gap: 10px;}
.sidenote .icon{color: var(--ink-3);}
.steps{list-style: none; margin: 0px; padding: 0px; counter-reset: s 0; display: grid; gap: 10px;}
.steps li{counter-increment: s 1; display: grid; grid-template-columns: 32px 1fr; gap: 10px; font-size: 15px; line-height: 1.5;}
.steps li::before{content: counter(s); width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: rgb(255, 255, 255); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px;}
.defn{margin: 0px; display: grid; gap: 4px; border-top: 2px solid var(--ink); padding-top: 10px;}
.defn dt{font-family: var(--f-display); font-weight: 600; font-size: 15px;}
.defn dd{margin: 0px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2);}
.fn{font-size: 12.5px; color: var(--ink-3); line-height: 1.5; border-top: 1px solid var(--line); padding-top: 10px;}
.catbar{display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px;}
.filters{display: flex; flex-wrap: wrap; gap: 6px;}
.filter{min-height: 44px; padding: 0px 14px; border-radius: 999px; border: 0px; box-shadow: inset 0 0 0 1.5px var(--ink); background: rgb(255, 255, 255); font-weight: 700; font-size: 13.5px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;}
.filter::before{content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--fam,var(--ink));}
.filter.is-active{background: var(--fam,var(--ink)); color: rgb(255, 255, 255); box-shadow: none;}
.filter.is-active::before{background: rgb(255, 255, 255);}
.viewtoggle{display: inline-flex; padding: 4px; background: rgb(255, 255, 255); border-radius: 16px; gap: 4px; align-self: flex-start;}
.viewtoggle__btn{min-height: 40px; padding: 0px 14px; border-radius: 12px; border: 0px; background: none; font-weight: 700; font-size: 13px; cursor: pointer; display: flex; align-items: center; gap: 6px;}
.viewtoggle__btn.is-active{background: var(--ink); color: rgb(255, 255, 255);}
.catview{display: none;}
.catview.is-active{display: block;}
.empty{background: rgb(255, 255, 255); border-radius: 28px; padding: 30px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px;}
.navgrid{display: grid; grid-template-columns: 1fr 1fr; gap: 8px;}
.navgrid a{background: rgb(255, 255, 255); border-radius: 20px; padding: 14px; min-height: 72px; display: flex; flex-direction: column; justify-content: space-between; gap: 6px; text-decoration: none; font-weight: 700; font-size: 14px;}
.navgrid a span{font-weight: 500; font-size: 12px; color: var(--ink-3);}
@container (min-width: 900px){.navgrid{grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 12px;}}
.e404{display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding-block: 30px;}
.e404 .sign{width: 150px; height: 150px;}
.service{max-width: 680px; display: flex; flex-direction: column; gap: 14px;}
.service p{margin: 0px; font-size: 16px; line-height: 1.65;}
.mail{font-family: var(--f-display); font-weight: 600; font-size: 18px; letter-spacing: -0.02em; word-break: break-all;}
.block--tight{padding-block: 36px;}
@container (min-width: 900px){.block--tight{padding-block: 56px;}}
.hero-home__over{display: none;}
@container (min-width: 900px){.hero-home__media::after{content: ""; position: absolute; inset: 0px; background: linear-gradient(90deg, rgba(19, 32, 43, 0.78) 0%, rgba(19, 32, 43, 0.35) 42%, rgba(19, 32, 43, 0) 62%);}
.hero-home__over{display: flex; position: absolute; z-index: 1; left: 36px; top: 36px; bottom: 76px; width: min(560px, 46%); flex-direction: column; justify-content: flex-end; gap: 26px; color: rgb(255, 255, 255);}
.hero-home__overlead{margin: 0px; font-family: var(--f-display); font-weight: 600; font-size: 30px; line-height: 1.18; letter-spacing: -0.03em; text-wrap: balance;}
.hero-home__big{display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 18px; border-top: 1.5px solid rgba(255, 255, 255, 0.45); padding-top: 16px;}
.hero-home__big .bigfig__n{color: rgb(255, 255, 255); font-size: 34px;}
.hero-home__big .bigfig__l{color: rgb(221, 230, 235); font-size: 13px;}
.hero-home__cap{z-index: 1;}
.hero-card__lead{display: none;}}
.famtile__body{background: linear-gradient(180deg,transparent,color-mix(in oklch,var(--fam) 92%,black) 38%);}
.famtile__photo{opacity: 0.7;}
.months__row{grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(4, minmax(0px, 1fr)); overflow: visible; scroll-snap-type: none; padding: 0px; margin: 0px;}
.month{min-height: 104px; padding: 9px 8px 8px; gap: 5px;}
.month .mdots{font-size: 10px;}
.ridechart__len{min-width: 6px;}
.duel-actions{display: grid; gap: 10px; margin-top: 14px;}
.duel-act{background: rgb(255, 255, 255); border-radius: 22px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px;}
.duel-act__name{font-family: var(--f-display); font-weight: 600; font-size: 14px; line-height: 1.25; letter-spacing: -0.015em;}
@container (min-width: 900px){.duel-actions{grid-template-columns: 22% minmax(0px, 1fr) minmax(0px, 1fr); gap: 14px;}
.duel-actions::before{content: "";}}
@container (max-width: 899px){.duel,.duel thead,.duel tbody{display: block; width: 100%;}
.duel tr{display: grid; grid-template-columns: 1fr 1fr;}
.duel thead th.duel__crit{display: none;}
.duel tbody th.duel__crit{grid-column: 1 / -1; padding: 9px 12px 2px; border-bottom: 0px; background: none; text-transform: uppercase; letter-spacing: 0.05em; font-size: 10px;}
.duel td{padding: 4px 12px 11px; font-size: 14px;}
.duel thead th{padding: 12px;}
.duel thead th + th{border-left: 1.5px solid var(--tile);}
.duel tbody td + td{border-left: 1.5px solid var(--tile);}
.duel__whom th.duel__crit{background: color-mix(in oklch,var(--now) 18%,#fff) !important;}
.duel__whom td{padding-top: 4px;}}
@container (min-width: 900px){.cards--2{grid-template-columns: repeat(2, minmax(0px, 1fr));}
.cards--h{grid-template-columns: minmax(0px, 1fr);}
.cards--h .tcard{display: grid; grid-template-columns: minmax(0px, 420px) minmax(0px, 1fr); grid-template-rows: auto auto 1fr; column-gap: 14px;}
.cards--h .tcard__media{grid-row: 1 / 4; aspect-ratio: auto; min-height: 320px;}
.cards--h .tcard__line{padding-top: 18px;}
.cards--h .tcard__body{padding: 12px 18px 14px 6px;}
.cards--h .tcard__line,.cards--h .tcard__meta{padding-right: 18px;}}
.bring{display: grid; gap: 12px;}
.bring__col{background: var(--surface); border-radius: 28px; padding: 20px 20px 22px; display: flex; flex-direction: column; gap: 14px;}
.bring__col--add{background: rgb(255, 255, 255); box-shadow: inset 0 0 0 2px var(--ink);}
.bring__head{font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase;}
.bring__list{list-style: none; margin: 0px; padding: 0px; display: grid; gap: 16px;}
.bring__item{display: grid; grid-template-columns: 34px minmax(0px, 1fr); gap: 12px; align-items: start;}
.bring__icon{width: 30px; height: 30px; color: var(--category-reef); stroke-width: 1.8;}
.bring__col--add .bring__icon{color: var(--ink);}
.bring__t{display: block; font-weight: 700; font-size: 16px; line-height: 1.3;}
.bring__why{display: block; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); margin-top: 2px;}
@container (min-width: 900px){.bring{grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 20px;}
.bring__col{padding: 28px;}}
.mtext{display: grid; gap: 10px;}
.mcard{background: var(--surface); border-radius: 24px; padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 10px; box-shadow: inset 0 0 0 1.5px var(--line);}
.mcard--shark{background: rgb(255, 255, 255); box-shadow: inset 0 6px 0 var(--category-shark),inset 0 0 0 1.5px var(--line);}
.mcard.is-now{box-shadow: inset 0 0 0 2.5px var(--ink);}
.mcard--shark.is-now{box-shadow: inset 0 6px 0 var(--category-shark),inset 0 0 0 2.5px var(--ink);}
.mcard__head{display: flex; align-items: baseline; gap: 8px;}
.mcard__name{font-family: var(--f-display); font-weight: 700; font-size: 26px; letter-spacing: -0.04em; line-height: 1;}
.mcard__price{margin-left: auto; font-family: var(--f-display); font-weight: 700; font-size: 17px; letter-spacing: -0.03em; white-space: nowrap;}
.mcard__price .price__from{font-family: var(--f-text); font-weight: 500; letter-spacing: 0px;}
.mcard__dots{display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px;}
.mcard__h{margin: 0px; font-size: 12.5px; font-weight: 700; color: var(--ink-3); letter-spacing: 0.01em;}
.mcard__t{margin: 0px; font-size: 15px; line-height: 1.6;}
.mcard__link{margin-top: auto; font-size: 13.5px;}
@container (min-width: 900px){.mtext{grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 14px;}
.mcard{padding: 20px 20px 22px;}}
.ctable__tags{display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px;}
.ctable__trip{display: flex; flex-direction: column; align-items: flex-start; gap: 6px;}
.ctable__trip .verdict{order: -1;}
.ctable .verdict{white-space: nowrap;}
.ctable__act .btn{white-space: nowrap;}
@container (min-width: 900px){.ctable__trip{display: table-cell; width: 31%;}
.ctable__trip .verdict{margin-top: 8px;}
.ctable__name{display: block;}
.ctable .rating{flex-direction: column; align-items: flex-start; gap: 4px;}
.ctable__ride{width: 24%;}
.ctable__act{width: 170px;}
.ctable .price{flex-direction: column; align-items: flex-start; gap: 2px;}}
/* ===== PORT BASE (added at port: the design doc styled its own canvas body) ===== */
html{scroll-behavior:smooth;scroll-padding-top:16px}
body{margin:0;background:var(--surface);color:var(--ink);font-family:var(--f-text);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
[id]{scroll-margin-top:16px}
/* ===== GYG availability widget (replaces the designer's hatched placeholder) ===== */
.gyg{border-radius:28px;background:var(--card);border:1.5px solid var(--line);padding:14px;min-height:190px;display:flex;flex-direction:column;gap:10px}
.gyg--tile{min-height:420px}
.gyg>[data-gyg-widget]{flex:1;min-height:160px}
.gyg__fallback{font-size:12.5px;color:var(--ink-3);text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 40%,transparent);text-underline-offset:3px}
.review__quote p{margin:0;font-size:15.5px;line-height:1.6}
/* ===== DESIGNER_PASS: owner edits that survive a rebuild go below ===== */
/* ===== OWNER PASS 28.09: widget room, hero height, fixed sticky + corner "up", footer ===== */
.gyg{display:block;min-height:0}
.gyg>[data-gyg-widget]{min-height:340px}
.gyg--tile>[data-gyg-widget]{min-height:430px}
.gyg__fallback{display:block;margin-top:8px}
.gyg:has(iframe) .gyg__fallback{display:none}
.hero-home__stage{max-width:1440px;margin-inline:auto}
.hero-home__photo{height:100%}
@container (min-width:900px){
 .hero-home__media{height:clamp(560px,70vh,640px);min-height:0}
 .hero-page__media{min-height:clamp(420px,58vh,540px)}
}
.sticky-bar{position:fixed;left:8px;right:8px;bottom:8px;margin:0 auto;z-index:25;max-width:760px}
.to-top{position:fixed;top:auto;right:20px;bottom:calc(var(--sticky-h,0px) + 20px);z-index:30;opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}
.to-top.is-visible{opacity:1;visibility:visible}
.foot{background:#0E1A23;color:#B8C6CE;padding:56px 0 calc(var(--sticky-h,0px) + 96px);font-size:14px;line-height:1.6}
.foot__in{max-width:1200px;margin:0 auto;padding:0 24px;display:grid;gap:40px}
.foot__k{margin:0 0 14px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff}
.foot__pills{display:flex;flex-wrap:wrap;gap:10px}
.foot__pills a{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border:1px solid rgba(255,255,255,.2);border-radius:999px;color:#DDE6EB;text-decoration:none;font-size:13px}
.foot__pills a:hover{border-color:#fff;color:#fff}
.foot__grid{display:grid;gap:32px;grid-template-columns:minmax(0,1fr)}
.foot__brand .brand{color:#fff;text-decoration:none}
.foot__brand .brand__holbox,.foot__brand .brand__snork{color:#fff}
.foot__brand .brand__rule{background:#fff}
.foot__brand .sign__snorkel{stroke:#fff}.foot__brand .sign__lens{stroke:#fff}
.foot__brand p{margin:14px 0 10px;max-width:340px}
.foot__brand a.mail{color:#fff;font:600 15px/1.4 var(--f-text);letter-spacing:0;text-decoration:underline;text-underline-offset:3px;word-break:break-all}
.foot__col ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.foot__col a{color:#B8C6CE;text-decoration:none}.foot__col a:hover{color:#fff;text-decoration:underline}
.foot__legal{border-top:1px solid rgba(255,255,255,.12);padding-top:24px;font-size:12.5px;color:#8FA1AC;display:grid;gap:10px}
.foot__legal a{color:#DDE6EB}
@container (min-width:900px){.foot__grid{grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr))}}
/* ===== OWNER PASS 28.09 (2): navigation — two dropdowns + CTA, grouped drawer, menu button right ===== */
.menu-btn{margin-left:auto}
.drawer{max-height:calc(100vh - 90px);overflow:auto}
.drawer a{gap:12px}
.drawer a small{font-weight:500;color:var(--ink-3);font-size:13px;white-space:nowrap}
.drawer__k{margin:10px 14px 4px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.drawer__k:first-child{margin-top:4px}
.nav-dd{position:relative}
.nav-dd>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;user-select:none}
.nav-dd>summary::-webkit-details-marker{display:none}
.nav-dd>summary::after{content:"";width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .15s}
.nav-dd[open]>summary{background:var(--card)}
.nav-dd[open]>summary::after{transform:translateY(1px) rotate(225deg)}
.nav-dd__panel{position:absolute;top:calc(100% + 8px);right:0;min-width:320px;background:var(--card);border-radius:20px;padding:8px;box-shadow:0 24px 50px -20px rgba(19,32,43,.45);z-index:40;display:grid;gap:2px}
.nav-dd__panel a{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:44px;padding:0 12px;border-radius:12px;text-decoration:none;color:var(--ink);font-size:15px}
.nav-dd__panel a:hover,.nav-dd__panel a:focus-visible{background:var(--surface)}
.nav-dd__panel small{color:var(--ink-3);font-size:13px;font-weight:500;white-space:nowrap}
.nav-dd__all{border-top:1px solid var(--line);border-radius:0 0 12px 12px!important;margin-top:4px}
.site-nav{align-items:center}
.site-nav .nav-link{padding:10px 12px;border-radius:12px}
.site-nav .nav-link:hover,.nav-dd>summary:hover{background:var(--card)}
.site-nav .nav-cta{margin-left:6px;padding:10px 18px;border-radius:999px;background:var(--ink);color:#fff}
.site-nav .nav-cta:hover{opacity:.9}
@container (min-width:900px){.site-nav{gap:4px}}

/* ===== OWNER PASS 28.09 (3): centred desktop nav, CTA at the right ===== */
.nav-cta{display:none}
@container (min-width:900px){
 .site-header{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:20px;max-width:1280px;margin-inline:auto;box-sizing:border-box}
 .site-header>.brand{justify-self:start}
 .site-nav{margin:0;justify-self:center;gap:2px}
 .site-header>.nav-cta{display:inline-flex;justify-self:end;align-items:center;min-height:44px;padding:0 20px;border-radius:999px;background:var(--ink);color:#fff;font-weight:700;font-size:14px;text-decoration:none;white-space:nowrap}
 .site-header>.nav-cta:hover{opacity:.9}
 .nav-dd__panel{right:auto;left:50%;transform:translateX(-50%)}
}