@scope (#main) to (#top) {
@font-face { font-family: "Dari Figma Nyght"; src: url("fonts/block-03/NyghtSerif-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Dari Figma DariBundledInter"; src: url("fonts/block-03/Inter-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Dari Figma DariBundledInter"; src: url("fonts/block-03/Inter-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
#modes[data-modes-render="figma"] { padding: 0; min-height: 752px; background: #31000d; }
#modes[data-modes-render="figma"] > .modes-background,
#modes[data-modes-render="figma"] > .section-heading,
#modes[data-modes-render="figma"] > .mode-bridge,
#modes[data-modes-render="figma"] > .modes-end-rule { display: none; }
.modes-figma[hidden] { display: none; }
.modes-figma { position: relative; min-height: 752px; font-family: "Dari Figma DariBundledInter", sans-serif; color: #ebdcc8; -webkit-font-smoothing: antialiased; }
.figma-background { position: absolute; inset: 0; width: 100%; height: 760px; object-fit: fill; pointer-events: none; }
.figma-tint { position: absolute; inset: 0; background: linear-gradient(180deg, #ffce8b26, #31000d00 24%, #31000d40 47%, #25000c55); pointer-events: none; }
.figma-introduction { position: relative; height: 252px; padding-top: 38px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
#modes .figma-label { margin: 0; color: #b77b2e; font-size: 12px; font-weight: 500; line-height: 15px; text-transform: uppercase; letter-spacing: 0; }
.figma-heading-ornament { display: block; flex: 0 0 auto; }
#modes .figma-introduction h2 { margin: 0; width: min(740px, 96%); color: #39101a; font-family: "Dari Figma Nyght", serif; font-size: 48px; font-weight: 400; line-height: 44px; letter-spacing: 0; }
#modes .figma-subtitle { margin: 0; width: min(660px, 96%); color: #39101a; font-size: 16px; line-height: 24px; letter-spacing: 0; }
.figma-comparison { position: relative; height: 380px; padding-top: 36px; display: grid; grid-template-columns: 18.6012% 24.5536% 16.2946% 24.5536% 1fr; }
.figma-mode-deeper { grid-column: 2; }
.figma-mode-forward { grid-column: 4; }
.figma-divider { position: absolute; width: 1.4px; height: 395px; left: calc(50% - 1px); top: -14px; background: linear-gradient(180deg, #e8c58400, #fbe6ad 12%, #e2b867 50%, #c99b4900); }
.figma-divider-ornament { position: absolute; left: calc(50% - 8px); top: 136px; }
.figma-mode { min-width: 0; }
#modes .figma-mode-label { margin: 0; color: #d8aa58; font-size: 11.5px; font-weight: 500; line-height: 14px; letter-spacing: 0; text-transform: uppercase; }
.figma-mode-heading { height: 106px; padding-top: 9px; }
.figma-mode-forward .figma-mode-heading { height: 78px; }
#modes .figma-mode h3 { margin: 0; color: #fff0d7; font-family: "Dari Figma Nyght", serif; font-size: 41px; font-weight: 400; line-height: 41px; letter-spacing: 0; }
#modes .figma-mode-description { margin: 0; color: #ebdcc8; font-size: 14.5px; font-weight: 400; line-height: 25px; }
.figma-benefits { padding-top: 32px; }
.figma-mode-forward .figma-benefits { padding-top: 40px; }
#modes .figma-benefits-label { display: flex; align-items: center; gap: 14px; margin: 0 0 11px; color: #d8aa58; font-size: 11.5px; font-weight: 500; line-height: 14px; text-transform: uppercase; letter-spacing: 0; }
.figma-benefits-label span { width: 49px; height: .6px; background: #d8aa58; opacity: .7; }
.figma-benefits ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
#modes .figma-benefits li { display: flex; align-items: center; gap: 10px; margin: 0; color: #ebdcc8; font-size: 13.5px; line-height: 18px; }
.figma-benefits li img { flex: 0 0 auto; }
.figma-closing { position: relative; height: 120px; padding-top: 36px; display: flex; justify-content: center; align-items: flex-start; gap: 28px; }
#modes .figma-closing p { margin: 0; color: #d8aa58; font-size: 10px; line-height: 14px; font-weight: 500; text-transform: uppercase; letter-spacing: 0; }
.figma-closing > span { width: 63px; height: .7px; margin-top: 7px; background: #d8aa58; opacity: .7; }
.modes-background-picker button { width: auto; min-width: 80px; padding: 0 10px; }
/* Preserve the original 1344px coordinate system on larger desktop frames. */
@media (min-width: 1376px) {
  .figma-comparison { width: 1344px; margin-inline: auto; grid-template-columns: 250px 330px 219px 330px 215px; }
}
@media (max-width: 1100px) and (min-width: 901px) {
  .figma-comparison { grid-template-columns: 35% 35%; column-gap: 14%; padding-left: 8%; height: auto; min-height: 430px; }
  .figma-mode-deeper, .figma-mode-forward { grid-column: auto; }
  .figma-mode-description br { display: none; }
}
@media (max-width: 900px) {
  .figma-background { height: 1000px; object-fit: fill; mask-image: linear-gradient(#000 85%, transparent); }
  .figma-introduction { height: auto; min-height: 290px; padding: 38px 20px 0; }
  #modes .figma-introduction h2 { font-size: 38px; line-height: 39px; width: 100%; }
  #modes .figma-subtitle { font-size: 15px; }
  .figma-introduction br, .figma-mode-description br { display: none; }
  .figma-comparison { height: auto; display: grid; grid-template-columns: 1fr; gap: 44px; padding: 40px 26px 0; }
  .figma-mode-deeper, .figma-mode-forward { grid-column: auto; }
  .figma-divider, .figma-divider-ornament { display: none; }
  .figma-mode + .figma-mode { border-top: 1px solid #d8aa5844; padding-top: 32px; }
  .figma-mode-heading, .figma-mode-forward .figma-mode-heading { height: auto; padding: 9px 0 25px; }
  #modes .figma-mode h3 { font-size: 34px; line-height: 36px; }
  .figma-closing { height: auto; padding: 48px 20px; gap: 14px; }
  #modes .figma-closing p { max-width: 230px; text-align: center; }
  .figma-closing > span { width: 25px; flex: 0 0 auto; }
  .modes-background-picker { bottom: 10px; }
}

}

@scope (#footer) {
@font-face { font-family: "Dari Figma Nyght"; src: url("fonts/block-03/NyghtSerif-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Dari Figma DariBundledInter"; src: url("fonts/block-03/Inter-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Dari Figma DariBundledInter"; src: url("fonts/block-03/Inter-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
#modes[data-modes-render="figma"] { padding: 0; min-height: 752px; background: #31000d; }
#modes[data-modes-render="figma"] > .modes-background,
#modes[data-modes-render="figma"] > .section-heading,
#modes[data-modes-render="figma"] > .mode-bridge,
#modes[data-modes-render="figma"] > .modes-end-rule { display: none; }
.modes-figma[hidden] { display: none; }
.modes-figma { position: relative; min-height: 752px; font-family: "Dari Figma DariBundledInter", sans-serif; color: #ebdcc8; -webkit-font-smoothing: antialiased; }
.figma-background { position: absolute; inset: 0; width: 100%; height: 760px; object-fit: fill; pointer-events: none; }
.figma-tint { position: absolute; inset: 0; background: linear-gradient(180deg, #ffce8b26, #31000d00 24%, #31000d40 47%, #25000c55); pointer-events: none; }
.figma-introduction { position: relative; height: 252px; padding-top: 38px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
#modes .figma-label { margin: 0; color: #b77b2e; font-size: 12px; font-weight: 500; line-height: 15px; text-transform: uppercase; letter-spacing: 0; }
.figma-heading-ornament { display: block; flex: 0 0 auto; }
#modes .figma-introduction h2 { margin: 0; width: min(740px, 96%); color: #39101a; font-family: "Dari Figma Nyght", serif; font-size: 48px; font-weight: 400; line-height: 44px; letter-spacing: 0; }
#modes .figma-subtitle { margin: 0; width: min(660px, 96%); color: #39101a; font-size: 16px; line-height: 24px; letter-spacing: 0; }
.figma-comparison { position: relative; height: 380px; padding-top: 36px; display: grid; grid-template-columns: 18.6012% 24.5536% 16.2946% 24.5536% 1fr; }
.figma-mode-deeper { grid-column: 2; }
.figma-mode-forward { grid-column: 4; }
.figma-divider { position: absolute; width: 1.4px; height: 395px; left: calc(50% - 1px); top: -14px; background: linear-gradient(180deg, #e8c58400, #fbe6ad 12%, #e2b867 50%, #c99b4900); }
.figma-divider-ornament { position: absolute; left: calc(50% - 8px); top: 136px; }
.figma-mode { min-width: 0; }
#modes .figma-mode-label { margin: 0; color: #d8aa58; font-size: 11.5px; font-weight: 500; line-height: 14px; letter-spacing: 0; text-transform: uppercase; }
.figma-mode-heading { height: 106px; padding-top: 9px; }
.figma-mode-forward .figma-mode-heading { height: 78px; }
#modes .figma-mode h3 { margin: 0; color: #fff0d7; font-family: "Dari Figma Nyght", serif; font-size: 41px; font-weight: 400; line-height: 41px; letter-spacing: 0; }
#modes .figma-mode-description { margin: 0; color: #ebdcc8; font-size: 14.5px; font-weight: 400; line-height: 25px; }
.figma-benefits { padding-top: 32px; }
.figma-mode-forward .figma-benefits { padding-top: 40px; }
#modes .figma-benefits-label { display: flex; align-items: center; gap: 14px; margin: 0 0 11px; color: #d8aa58; font-size: 11.5px; font-weight: 500; line-height: 14px; text-transform: uppercase; letter-spacing: 0; }
.figma-benefits-label span { width: 49px; height: .6px; background: #d8aa58; opacity: .7; }
.figma-benefits ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
#modes .figma-benefits li { display: flex; align-items: center; gap: 10px; margin: 0; color: #ebdcc8; font-size: 13.5px; line-height: 18px; }
.figma-benefits li img { flex: 0 0 auto; }
.figma-closing { position: relative; height: 120px; padding-top: 36px; display: flex; justify-content: center; align-items: flex-start; gap: 28px; }
#modes .figma-closing p { margin: 0; color: #d8aa58; font-size: 10px; line-height: 14px; font-weight: 500; text-transform: uppercase; letter-spacing: 0; }
.figma-closing > span { width: 63px; height: .7px; margin-top: 7px; background: #d8aa58; opacity: .7; }
.modes-background-picker button { width: auto; min-width: 80px; padding: 0 10px; }
/* Preserve the original 1344px coordinate system on larger desktop frames. */
@media (min-width: 1376px) {
  .figma-comparison { width: 1344px; margin-inline: auto; grid-template-columns: 250px 330px 219px 330px 215px; }
}
@media (max-width: 1100px) and (min-width: 901px) {
  .figma-comparison { grid-template-columns: 35% 35%; column-gap: 14%; padding-left: 8%; height: auto; min-height: 430px; }
  .figma-mode-deeper, .figma-mode-forward { grid-column: auto; }
  .figma-mode-description br { display: none; }
}
@media (max-width: 900px) {
  .figma-background { height: 1000px; object-fit: fill; mask-image: linear-gradient(#000 85%, transparent); }
  .figma-introduction { height: auto; min-height: 290px; padding: 38px 20px 0; }
  #modes .figma-introduction h2 { font-size: 38px; line-height: 39px; width: 100%; }
  #modes .figma-subtitle { font-size: 15px; }
  .figma-introduction br, .figma-mode-description br { display: none; }
  .figma-comparison { height: auto; display: grid; grid-template-columns: 1fr; gap: 44px; padding: 40px 26px 0; }
  .figma-mode-deeper, .figma-mode-forward { grid-column: auto; }
  .figma-divider, .figma-divider-ornament { display: none; }
  .figma-mode + .figma-mode { border-top: 1px solid #d8aa5844; padding-top: 32px; }
  .figma-mode-heading, .figma-mode-forward .figma-mode-heading { height: auto; padding: 9px 0 25px; }
  #modes .figma-mode h3 { font-size: 34px; line-height: 36px; }
  .figma-closing { height: auto; padding: 48px 20px; gap: 14px; }
  #modes .figma-closing p { max-width: 230px; text-align: center; }
  .figma-closing > span { width: 25px; flex: 0 0 auto; }
  .modes-background-picker { bottom: 10px; }
}

}