body.fangates-page { background: #050A0C; }
.fangates-page main { position: relative; isolation: isolate; }

.fangates-opening-hero { --fangates-artwork-height: max(600px, 100svh); --fangates-artwork-shade: var(--hero-image-shade); position: relative; margin-top: calc(-1 * var(--header-rendered-height, 84px)); padding-top: var(--header-rendered-height, 84px); }
.fangates-opening-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: var(--fangates-artwork-height); z-index: -1; pointer-events: none; opacity: var(--hero-image-opacity, .7); background: var(--fangates-artwork-shade), url('../assets/imgs/fangate/17_350.webp?v=20261016') center 35% / cover no-repeat; }
.fangates-hero .fangates-hero-caption { margin-top: 18px; font-size: max(calc(24 * var(--layout-unit)), 1rem); line-height: 1.3; }
.fangates-hero .landing-intro { margin-top: var(--section-spacing); }
.fangates-advantages-section, .fangates-comparison, .fangates-speed, .fangates-accessories { margin-top: var(--section-spacing); }
.fangates-comparison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fangates-comparison > article { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 0; min-width: 0; }
.fangates-comparison > article:first-child { padding-right: calc(32 * var(--layout-unit)); }
.fangates-comparison > article + article { border-left: var(--separator-width) solid #777; padding-left: calc(32 * var(--layout-unit)); }
.fangates-comparison h2 { font-size: max(calc(36 * var(--layout-unit)), 1.5rem); font-weight: 600; line-height: 1.2; }
.fangates-comparison article:first-child > h2, .fangates-comparison article:first-child > p { text-align: right; }
.fangates-comparison p, .fangates-speed > p, .fangates-accessories > p { margin-top: var(--space-related); font-size: max(calc(20 * var(--layout-unit)), 1rem); line-height: 1.5; }
.fangates-page figure { margin: 0; }
.fangates-diagrams { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(24 * var(--layout-unit)); margin-top: calc(48 * var(--layout-unit)); }
.fangates-diagrams figure { min-width: 0; }
.fangates-diagrams img { display: block; width: var(--diagram-width, 100%); margin-inline: auto; height: clamp(180px, 16vw, 300px); object-fit: contain; }
.diagram-trad1 { --diagram-width: 94%; }
.diagram-trad2 { --diagram-width: 100%; }
.diagram-fangate1 { --diagram-width: 94%; }
.diagram-fangate2 { --diagram-width: 98%; }
.fangates-page figcaption { margin-top: var(--space-related); font-size: max(calc(18 * var(--layout-unit)), 1rem); line-height: 1.5; }
.fangates-duration { display: flex; align-items: center; gap: calc(16 * var(--layout-unit)); margin-top: var(--space-related); font-size: max(calc(28 * var(--layout-unit)), 1.125rem); font-weight: 100; }
.fangates-duration::before { content: ''; flex: 1; height: var(--separator-width); background: #777; }
.fangates-opening { margin-top: calc(24 * var(--layout-unit)); }
.fangates-accessory-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: calc(80 * var(--layout-unit)); margin-top: calc(48 * var(--layout-unit)); }
.fangates-accessory-grid > article { display: grid; grid-template-rows: subgrid; grid-row: span 5; row-gap: 0; min-width: 0; }
.fangates-accessory-grid h3 { font-size: max(calc(28 * var(--layout-unit)), 1.25rem); font-weight: 400; line-height: 1.2; }
.fangates-accessory-image { display: flex; align-items: center; justify-content: center; height: clamp(240px, 28vw, 480px); margin-block: var(--space-related); }
.fangates-accessory-image img { display: block; width: var(--accessory-width); max-width: var(--accessory-max); height: 100%; object-fit: contain; }
.fangates-accessory-grid article:first-child { --accessory-width: 88%; --accessory-max: 520px; }
.fangates-accessory-grid article:nth-child(2) { --accessory-width: 100%; --accessory-max: 640px; }
.fangates-accessory-grid p, .fangates-accessory-grid ul { font-size: max(calc(20 * var(--layout-unit)), 1rem); line-height: 1.5; }
.fangates-accessory-grid p + p { margin-top: var(--space-related); }
.fangates-accessory-grid ul { margin-top: var(--space-related); padding-left: 1.2em; }
.fangates-page .landing-process .process-steps { margin-top: calc(48 * var(--layout-unit)); }
@media (min-width: 761px) and (max-width: 1024px) {
  .fangates-comparison { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .fangates-comparison > article { display: block; }
  .fangates-comparison > article:first-child { padding-right: 0; }
  .fangates-comparison > article + article { border-left: 0; padding-left: 0; border-top: var(--separator-width) solid #777; padding-top: 40px; }
  .fangates-comparison article:first-child > h2, .fangates-comparison article:first-child > p { text-align: left; }
  .fangates-diagrams { margin-top: 32px; gap: 24px; }
  .fangates-diagrams img { height: 240px; }
  .fangates-advantages { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .fangates-advantages > .editorial-list { grid-column: 1; grid-row: 2; }
  .fangates-advantages > .media-list-image { grid-column: 1; grid-row: 1; }
}
@media (max-width: 760px) {
  .fangates-opening-hero { --fangates-artwork-height: max(540px, min(720px, 85svh)); --fangates-artwork-shade: var(--hero-image-shade); }
  .fangates-hero .fangates-hero-caption { margin-top: 14px; font-size: 1rem; }
  .fangates-comparison { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .fangates-comparison > article { display: block; }
  .fangates-comparison > article:first-child { padding-right: 0; }
  .fangates-comparison > article + article { border-left: 0; padding-left: 0; border-top: var(--separator-width) solid #777; padding-top: 32px; }
  .fangates-comparison article:first-child > h2, .fangates-comparison article:first-child > p { text-align: left; }
  .fangates-diagrams { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 24px; }
  .fangates-diagrams img { height: auto; max-height: 260px; aspect-ratio: 4 / 3; }
  .fangates-duration { gap: 16px; margin-top: var(--space-related); font-size: 1.375rem; }
  .fangates-opening { margin-top: 24px; }
  .fangates-accessory-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; margin-top: 32px; }
  .fangates-accessory-grid > article { display: block; }
  .fangates-accessory-grid h3 { font-size: 1.375rem; line-height: 1.3; }
  .fangates-accessory-image { height: auto; aspect-ratio: 4 / 3; max-height: 360px; margin-block: var(--space-related); }
  .fangates-accessory-image img { max-width: 100%; }
  .fangates-accessory-grid p + p { margin-top: var(--space-related); }
  .fangates-accessory-grid li + li { margin-top: 8px; }
  .fangates-page .services-faq { padding-inline: 0; }
  .fangates-page .services-faq summary { align-items: center; min-height: 56px; gap: 16px; font-size: 1.125rem; line-height: 1.4; }
  .fangates-page .services-faq .toggle-icon { flex-shrink: 0; }
  .fangates-page .services-faq .faq-answer { padding-bottom: 24px; }
  .fangates-page .landing-process .process-steps { margin-top: 35px; }
}