/* Product stories and edition comparison, scoped to the Syatr page. */
:where(.syatr-shell) .product-stories{ padding: 90px 0 100px; background: inherit; }
:where(.syatr-shell) .story-list{ display: grid; gap: 80px; }
:where(.syatr-shell) .story-row{ position: relative; display: grid; grid-template-columns: 1fr 1fr; min-width: 0; }
:where(.syatr-shell) .story-anchor{ position: absolute; top: 0; left: 0; }
/* 固定 16:9，并在双栏图文中居中，避免被长文案撑高。 */
:where(.syatr-shell) .story-media
{
    position: relative;
    align-self: center;
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
    margin: 0;
    overflow: hidden;
    background: #080809;
}

:where(.syatr-shell) .story-media img
{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

:where(.syatr-shell) .story-media figcaption{ position: absolute; bottom: 20px; left: 24px; color: #e9dfcf; font-size: 9px; letter-spacing: .12em; text-shadow: 0 1px 8px #000; }
:where(.syatr-shell) .story-media::after{ content: ""; position: absolute; inset: 65% 0 0; background: linear-gradient(transparent, #0007); pointer-events: none; }
:where(.syatr-shell) .story-media figcaption{ z-index: 1; }
:where(.syatr-shell) .story-copy{ padding: 56px 54px; background: inherit; color: #f4f4f2; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
:where(.syatr-shell) .story-copy .eyebrow{ color: #ff4b5d; font-size: 10px; letter-spacing: .13em; margin-bottom: 22px; }
:where(.syatr-shell) .story-copy h2{ font-size: clamp(28px, 2.6vw, 39px); line-height: 1.35; font-weight: 600; letter-spacing: -.035em; }
:where(.syatr-shell) .story-copy > p:not(.eyebrow){ color: #cececf; font-size: 15px; line-height: 1.95; margin-top: 23px; }
:where(.syatr-shell) .story-copy .story-link{ display: inline-flex; align-items: center; gap: 24px; margin-top: 31px; border-bottom: 1px solid #ffffff55; padding-bottom: 7px; font-size: 12px; font-weight: 600; }
:where(.syatr-shell) .story-link:hover{ color: #ff4b5d; border-color: #ff4b5d; }
:where(.syatr-shell) .story-link span{ color: var(--red); font-size: 19px; line-height: 1; }
:where(.syatr-shell) .story-row.reverse .story-media{ grid-column: 2; grid-row: 1; }
:where(.syatr-shell) .story-row.reverse .story-copy{ grid-column: 1; grid-row: 1; }
:where(.syatr-shell) .story-topics{ display: grid; gap: 16px; margin-top: 24px; }
:where(.syatr-shell) .story-topic h3{ font-size: 12px; font-weight: 650; }
:where(.syatr-shell) .story-topic p{ margin-top: 5px; color: #cececf; font-size: 13px; line-height: 1.8; }
:where(.syatr-shell) .story-anchor,:where(.syatr-shell) .story-topic,:where(.syatr-shell) .inline-requirements{ scroll-margin-top: calc(var(--anchor-offset, 70px) + 30px); }
:where(.syatr-shell) .inline-requirements{ width: 100%; margin-top: 22px; border-top: 1px solid #ffffff26; padding-top: 14px; font-size: 12px; }
:where(.syatr-shell) .inline-requirements summary{ cursor: pointer; font-weight: 600; }
:where(.syatr-shell) .inline-requirements p{ color: #cececf; line-height: 1.8; padding-top: 12px; }
:where(.syatr-shell) .comparison-section{ padding: 0 0 85px; }
:where(.syatr-shell) .edition-comparison{ border-top: 1px solid #ffffff32; border-bottom: 1px solid #ffffff32; }
:where(.syatr-shell) .edition-comparison > summary{ cursor: pointer; list-style: none; padding: 32px 0; }
:where(.syatr-shell) .edition-comparison > summary::-webkit-details-marker,:where(.syatr-shell) .feature-menu > summary::-webkit-details-marker{ display: none; }
:where(.syatr-shell) .comparison-heading{ display: flex; align-items: center; justify-content: space-between; gap: 25px; font-size: 30px; font-weight: 550; line-height: 1.5; }
:where(.syatr-shell) .comparison-kicker{ display: block; font-size: 9px; font-weight: 400; color: #a7a7ad; letter-spacing: .17em; margin-bottom: 10px; }
:where(.syatr-shell) .comparison-toggle{ display: inline-flex; align-items: center; gap: 24px; flex-shrink: 0; font-size: 11px; font-weight: 400; color: #cececf; }
:where(.syatr-shell) .comparison-toggle i{ width: 38px; height: 38px; border: 1px solid #ffffff3d; position: relative; }
:where(.syatr-shell) .comparison-toggle i::before,:where(.syatr-shell) .comparison-toggle i::after{ content: ""; position: absolute; background: #f4f4f2; top: 50%; left: 50%; width: 14px; height: 1px; transform: translate(-50%, -50%); }
:where(.syatr-shell) .comparison-toggle i::after{ transform: translate(-50%, -50%) rotate(90deg); }
:where(.syatr-shell) .edition-comparison[open] .comparison-toggle i::after{ display: none; }
:where(.syatr-shell) .comparison-hide,:where(.syatr-shell) .edition-comparison[open] .comparison-show{ display: none; }
:where(.syatr-shell) .edition-comparison[open] .comparison-hide{ display: inline; }
:where(.syatr-shell) .comparison-intro{ display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; color: #a7a7ad; font-size: 12px; line-height: 1.8; padding: 0 0 26px; }
:where(.syatr-shell) .comparison-table-scroll{ overflow: auto; overscroll-behavior-x: contain; isolation: isolate; border: 1px solid #ffffff20; margin-bottom: 25px; }
:where(.syatr-shell) .comparison-table{ width: 100%; min-width: 930px; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 13px; line-height: 1.85; }
:where(.syatr-shell) .comparison-table caption{ position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
:where(.syatr-shell) .comparison-table th,:where(.syatr-shell) .comparison-table td{ padding: 23px 22px; border-right: 1px solid #ffffff15; border-bottom: 1px solid #ffffff15; vertical-align: top; text-align: left; }
:where(.syatr-shell) .comparison-table tr > :last-child{ border-right: 0; }
:where(.syatr-shell) .comparison-table tbody tr:last-child > *{ border-bottom: 0; }
:where(.syatr-shell) .comparison-table thead th{ background: #272527; color: #f4f4f2; padding-block: 24px; font-size: 17px; line-height: 1.7; }
:where(.syatr-shell) .comparison-table thead th small{ display: block; font-size: 10px; color: #a7a7ad; font-weight: 400; letter-spacing: .08em; }
:where(.syatr-shell) .comparison-table tr > :first-child{ position: sticky; left: 0; width: 20%; z-index: 2; background: #171719; color: #e6e6e8; font-weight: 500; }
:where(.syatr-shell) .comparison-table thead tr > :first-child{ background: #272527; }
:where(.syatr-shell) .comparison-table td{ color: #cececf; background: #101012; }
:where(.syatr-shell) .comparison-table tbody tr:nth-child(even) > *{ background: #1a191c; }
:where(.syatr-shell) .comparison-table tr > :nth-child(2){ background: #211317; }
:where(.syatr-shell) .comparison-table tbody tr:nth-child(even) > :nth-child(2){ background: #25161a; }
:where(.syatr-shell) .comparison-table .comparison-check{ color: #f4f4f2; font-size: 19px; }
:where(.syatr-shell) .feature-menu{ position: relative; flex-shrink: 0; }
:where(.syatr-shell) .feature-menu > summary{ list-style: none; cursor: pointer; height: 70px; display: flex; align-items: center; gap: 7px; color: #aba7a1; font-size: 11px; position: relative; }
:where(.syatr-shell) .feature-menu > summary svg{ width: 13px; height: 13px; }
:where(.syatr-shell) .feature-menu[open] > summary,:where(.syatr-shell) .feature-menu > summary:hover,:where(.syatr-shell) .feature-menu > summary[aria-current]{ color: #f7efe2; }
:where(.syatr-shell) .feature-menu > summary[aria-current]::after{ content: ""; position: absolute; inset: auto 0 0; height: 2px; background: var(--red); }
:where(.syatr-shell) .feature-menu-panel{ position: absolute; left: -22px; top: 100%; width: 240px; padding: 14px 22px; background: #19191b; border: 1px solid #ffffff25; box-shadow: 0 18px 40px #0008; }
:where(.syatr-shell) .section-links .feature-menu-panel a{ display: block; height: auto; padding: 11px 0; font-size: 12px; border-bottom: 1px solid #ffffff10; }
:where(.syatr-shell) .section-links .feature-menu-panel a:last-child{ border: 0; }
:where(.syatr-shell) .section-links .feature-menu-panel a::after{ display: none; }
:where(.syatr-shell) .section-links .feature-menu-panel a:hover{ color: #f37983; }
:where(.syatr-shell) .edition-comparison > summary:focus-visible,:where(.syatr-shell) .feature-menu > summary:focus-visible{ outline: 2px solid #f5e8d0; outline-offset: 5px; }
:where(.syatr-shell) .inline-requirements summary:focus-visible,:where(.syatr-shell) .story-link:focus-visible{ outline: 2px solid #ff4b5d; outline-offset: 5px; }
:where(.syatr-shell) .comparison-table-scroll:focus-visible{ outline: 2px solid #f5e8d0; outline-offset: 3px; }
@media (max-width: 1050px){:where(.syatr-shell) .story-copy{ padding: 38px 34px; }
:where(.syatr-shell) .story-copy > p:not(.eyebrow){ font-size: 14px; }
:where(.syatr-shell) .section-links{ gap: 23px; }
}
@media (max-width: 800px){:where(.syatr-shell) .product-stories{ padding: 60px 0; }
:where(.syatr-shell) .story-list{ gap: 45px; }
:where(.syatr-shell) .story-copy{ padding: 32px 28px; }
:where(.syatr-shell) .story-copy h2{ font-size: 27px; }
:where(.syatr-shell) .section-links{ gap: 17px; }
:where(.syatr-shell) .feature-menu > summary{ height: 63px; font-size: 10px; }
:where(.syatr-shell) .comparison-section{ padding-bottom: 60px; }
:where(.syatr-shell) .comparison-heading{ font-size: 26px; }
}
@media (max-width: 680px){:where(.syatr-shell) .story-row{ grid-template-columns: 1fr; }
:where(.syatr-shell) .story-row.reverse .story-media,:where(.syatr-shell) .story-row.reverse .story-copy{ grid-column: auto; grid-row: auto; }
:where(.syatr-shell) .story-copy{ padding: 36px 30px 40px; }
:where(.syatr-shell) .story-copy h2{ font-size: 30px; }
:where(.syatr-shell) .story-copy > p:not(.eyebrow){ font-size: 14px; }
:where(.syatr-shell) .story-copy .story-link{ margin-top: 25px; }
:where(.syatr-shell) .comparison-heading{ font-size: 23px; }
:where(.syatr-shell) .comparison-toggle{ gap: 12px; }
:where(.syatr-shell) .comparison-toggle .comparison-show,:where(.syatr-shell) .comparison-toggle .comparison-hide{ display: none; }
:where(.syatr-shell) .comparison-intro{ flex-direction: column; gap: 8px; }
:where(.syatr-shell) .comparison-table{ min-width: 800px; font-size: 12px; }
:where(.syatr-shell) .comparison-table th,:where(.syatr-shell) .comparison-table td{ padding: 19px 16px; }
:where(.syatr-shell) .comparison-table tr > :first-child{ width: 136px; }
}
@media (max-width: 580px){:where(.syatr-shell) .section-links{ gap: 12px; }
:where(.syatr-shell) .section-links > a{ white-space: nowrap; }
:where(.syatr-shell) .feature-menu > summary{ height: 43px; }
:where(.syatr-shell) .feature-menu > summary[aria-current]::after{ bottom: 3px; }
:where(.syatr-shell) .feature-menu-panel{ left: -90px; width: 225px; }
:where(.syatr-shell) .product-stories{ padding: 44px 0 50px; }
:where(.syatr-shell) .story-list{ gap: 32px; }
:where(.syatr-shell) .comparison-section{ padding-bottom: 45px; }
:where(.syatr-shell) .edition-comparison > summary{ padding-block: 27px; }
:where(.syatr-shell) .comparison-kicker{ font-size: 8px; letter-spacing: .09em; }
:where(.syatr-shell) .comparison-toggle i{ width: 33px; height: 33px; }
}
@media (max-width: 360px){:where(.syatr-shell) .section-links{ gap: 8px; }
:where(.syatr-shell) .story-copy{ padding: 30px 24px 34px; }
:where(.syatr-shell) .story-copy h2{ font-size: 27px; }
:where(.syatr-shell) .comparison-heading{ font-size: 21px; gap: 15px; }
}