/* The main page tells three stories; the complete feature reference stays expandable. */
:root { --container: 1260px; --section: clamp(56px, 6vw, 88px); --font: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { background: #0b1119; }
.scroll-progress { display: none; }
.site-header { box-shadow: none; }
.hero { padding: 76px 0 68px; background: none; }
.hero__grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; gap: 48px; }
.hero h1 { font-size: clamp(38px, 4vw, 56px); line-height: 1.08; letter-spacing: -.035em; text-shadow: none; text-wrap: balance; }
.hero h1 span:last-child { color: #b8c6d8; }
.hero__lead { font-size: 19px; line-height: 1.55; max-width: 470px; margin-top: 26px; }
.hero__actions { gap: 26px; margin-top: 30px; }
.hero__learn { display: inline-flex; align-items: center; gap: 14px; min-height: 48px; color: #b8c6d8; font-size: 15px; }
.hero__learn:hover { color: #fff; }
.hero__trust { flex-wrap: wrap; gap: 10px 20px; color: #a5b0be; }
.button { transition: background-color .18s, border-color .18s, box-shadow .18s; }
.button:hover { transform: none; }
.button--primary { color: #fff; background: #0869cb; box-shadow: none; }
.button--primary:hover { background: #0665c6; }
.button--primary::after { display: none; }
.hero__visual .mac-tray, .hero__visual.is-onscreen .mac-tray { animation: none; min-height: 570px; background: #121c2a; box-shadow: 0 22px 64px #0004; border-radius: 20px; }
.hero__visual .mac-tray .tray-popover { top: 72px; right: 18px; width: calc(58% - 24px); margin: 0; background: #17222f; backdrop-filter: none; }
.hero__visual .tray-popover { min-height: 460px; }
.hero__visual .open-with-card { display: none; }
.tray-popover__header small { display: none; }
.hero__visual .tray-popover__header strong { font-size: 19px; }
.capabilities, .workspaces, .pricing, .faq { background: transparent; }
.capabilities { border-top: 1px solid var(--line); }
.section-intro { gap: 48px; margin-bottom: 32px; }
.section-intro h2, .pricing__intro h2, .faq__intro h2 { font-size: clamp(30px, 3.2vw, 42px); line-height: 1.12; letter-spacing: -.035em; }
.section-intro p { font-size: 17px; line-height: 1.6; }
.capability-grid--essentials { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 32px 48px; }
.capability-grid--essentials > .capability-card { grid-column: auto; display: block; padding: 12px 0 0; border: 0; border-radius: 0; box-shadow: none; background: none; transform: none; }
.capability-grid--essentials > .capability-card::before { display: none; }
.capability-grid--essentials .capability-card__icon { margin-bottom: 20px; }
.capability-card__icon { background: #0869cb; }
.brand__mark, .workspace-button.is-active, .workspace-button.is-active .workspace-icon, .restore-button, .tray-tabs button.is-active { box-shadow: none; }
.restore-button, .workspace-button.is-active .workspace-icon, .tray-tabs button.is-active { background: #0869cb; }
.capability-card:hover, .capability-card:hover .capability-card__icon { transform: none; }
.capability-card::after, .plan::after { display: none; }
.workspace-nav__label, .workspace-stage__header > div > span { color: #a8b2bf; }
.js .capability-grid--essentials .shot-menu--apps span, .js .capability-grid--essentials .shot-shelf figure { opacity: 1; transform: none; animation: none; }
.capability-grid--essentials h3 { font-size: 23px; }
.capability-grid--essentials p { font-size: 16px; line-height: 1.6; }
.capability-grid--essentials ul { font-size: 14px; }
.capability-grid--essentials .capability-shot { margin-top: 24px; }
.capability-grid--essentials .player-preview { width: 100%; max-width: 430px; height: auto; margin: 20px 0 0; padding: 0; border: 0; }
.capability-grid--essentials #music-player { padding: 12px 0 0; }
.capability-grid--essentials .scroll-demo { max-width: 430px; grid-template-columns: minmax(0, 1fr) 62px; gap: 12px; margin-top: 20px; }
.capability-grid--essentials .scroll-demo__viewport { height: 116px; }
.capability-grid--essentials .scroll-demo__strip { height: 132px; }
.capability-grid--essentials > .capability-card > div { min-width: 0; }
.capability-grid--essentials .capability-card__icon { flex-shrink: 0; }
.clipboard-actions { display: flex; flex-wrap: wrap; gap: 0 24px; margin-top: 14px; }
.clipboard-actions a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: #94c9ff; font-size: 14px; text-decoration: underline; text-decoration-color: #94c9ff66; text-underline-offset: 4px; }
.clipboard-actions a:hover { color: #fff; text-decoration-color: currentColor; }
.clipboard-actions a > span:last-child { flex-shrink: 0; }
.tool-index { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; margin-top: 44px; }
.tool-index a { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 60px; padding: 12px 0; border-bottom: 1px solid var(--line); color: #b8c6d8; font-size: 15px; }
.tool-index a:hover { color: #fff; }
.tool-index a > span:last-child { flex-shrink: 0; color: #81baf2; }
.store-availability { margin-top: 28px; }
.store-availability .capability-card { display: block; padding: 24px 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.store-availability .capability-card__icon { display: none; }
.store-availability .capability-card > div { display: grid; grid-template-columns: 1fr auto; gap: 8px 40px; align-items: center; }
.store-availability h3 { font-size: 18px; }
.store-availability p { max-width: 64ch; font-size: 14px; }
.store-availability .capability-store__button { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
.more-tools { border-block: 1px solid var(--line); margin-top: 36px; }
.more-tools > summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 0; cursor: pointer; color: #c7d2df; font-size: 17px; font-weight: 600; list-style: none; }
.more-tools > summary::-webkit-details-marker { display: none; }
.more-tools > summary:hover { color: #fff; }
.more-tools > summary { transition: color .18s ease; }
.more-tools > summary:focus-visible { outline: 2px solid #8bc4ff; outline-offset: 4px; border-radius: 4px; }
.more-tools .reveal { opacity: 1; transform: none; transition: none; }
.disclosure-mark { font-size: 26px; line-height: 1; font-weight: 400; transition: transform .2s ease; }
.more-tools[open] > summary .disclosure-mark { transform: rotate(45deg); }
.more-tools__lead { max-width: 660px; color: #a7b2c1; margin: 0 0 28px; }
.more-tools > .capability-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 32px; }
.more-tools > .capability-grid > .capability-card { grid-column: auto; }
.more-tools .capability-footer { grid-template-columns: minmax(0, 1fr); }
.more-tools .capability-footer p { max-width: 75ch; }
.more-tools .capability-card { box-shadow: none; background: #111c28; scroll-margin-top: 96px; }
.workspaces { padding-top: 30px; }
.product-window { max-width: 1040px; margin: 28px auto 0; box-shadow: 0 22px 64px #0004; }
.product-window__body { min-height: 450px; }
.desktop { min-height: 380px; }
.workspace-details { margin-top: 24px; border-bottom: 0; }
.workspace-details .workflow { margin-top: 8px; padding: 16px 0 32px; }
.workspace-details .feature-details { padding-bottom: 32px; }
.automation-details { margin: 0 auto; border: 0; }
.automation-details > summary { border-block: 1px solid var(--line); }
.automation-details .automation { margin-top: 8px; padding: 32px; border: 0; border-radius: 12px; }
.automation-details .automation__intro { max-width: 660px; }
.automation-details .automation__intro h2 { font-size: clamp(26px, 3vw, 36px); line-height: 1.18; }
.automation-details .section-label { display: none; }
.automation-details .automation-demo { margin-top: 28px; }
.automation-details .trigger-panel { min-width: 0; }
.automation-details .trigger-panel button { grid-template-columns: 20px minmax(0, 1fr) 12px; }
.automation-details .trigger-panel button b { overflow-wrap: anywhere; padding-block: 10px; }
.pricing__intro { text-align: left; }
.pricing-grid { margin-top: 32px; max-width: none; align-items: stretch; border: 1px solid var(--line); border-radius: 16px; overflow: clip; }
.plan, .plan--featured { min-height: 0; padding: 32px; background: none; box-shadow: none; }
.plan header > strong { font-size: 28px; }
.plan header > p { color: #a8b2bf; }
.plan header > div, .plan header > .license-options { min-height: 144px; margin-top: 16px; padding-bottom: 20px; }
.plan header > div:not(.license-options) { align-items: center; }
.plan header > .license-options > span { padding: 0; border: 0; background: none; border-radius: 0; }
.plan header > .license-options > span:not(.license-option--deal) { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: baseline; gap: 8px 12px; }
.plan header > .license-options > .license-option--deal { display: grid; grid-template-columns: max-content max-content; justify-content: start; gap: 8px 12px; background: none; }
.plan header > .license-options > .license-option--deal b { grid-column: 2; grid-row: 1; justify-self: start; }
.plan header > .license-options > .license-option--deal em { grid-column: 1 / -1; grid-row: 2; }
.plan header > .license-options > .license-option--deal i { color: #b1bdcb; font-size: 24px; letter-spacing: -.03em; }
.plan header > .license-options > span b { font-size: 36px; color: #f1f5fa; }
.plan header > .license-options > span em { font-size: 13px; color: #a8b2bf; opacity: 1; }
.plan li, .pro-feature-groups span { color: #b1bdcb; }
.plan .plan-summary { min-height: 156px; margin: 24px 0 12px; gap: 12px; }
.plan-details { margin-bottom: 24px; }
.plan-details > summary { cursor: pointer; color: #94c9ff; padding: 10px 0; font-size: 14px; }
.plan-details ul { margin: 16px 0; }
.plan__activation { display: block; margin-top: auto; color: #a8b2bf; text-align: start; font-size: 12px; }
.pricing-download { display: flex; justify-content: center; margin-top: 24px; }
.pricing-download .button { width: min(100%, 380px); }
.vpn-bonus { max-width: none; border-radius: 12px; background: #121f2e; box-shadow: none; }
.vpn-bonus__icon { background: #203b59; box-shadow: none; }
.pricing-note { color: #a8b2bf; font-size: 13px; }
.faq__grid { gap: 64px; grid-template-columns: .7fr 1.3fr; }
.accordion-item { background: transparent; }
.accordion-item > button { padding: 22px 0; }
.accordion-item.is-open .accordion-content > p { padding: 0 32px 24px 0; }
.faq__intro p { margin-top: 18px; }
.site-footer nav a, .footer__brand p { color: #a5b0be; }
:focus-visible { outline-color: #8bc4ff; }
::selection { background: #285481; color: #fff; }
@media (max-width: 1000px) {
    .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    .hero__visual { width: 100%; max-width: 700px; justify-self: center; }
    .hero__lead { font-size: 17px; }
    .hero__trust { display: grid; }
    .hero__visual .mac-tray .tray-popover { padding: 12px; }
    .section-intro { grid-template-columns: 1fr; gap: 18px; }
    .tool-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .more-tools > .capability-grid { grid-template-columns: minmax(0, 1fr); }
    .automation-details .trigger-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; gap: 8px; }
    .automation-details .trigger-panel button { min-width: 0; width: 100%; }
    .automation-details .trigger-panel button b { white-space: normal; text-align: start; }
}
@media (max-width: 700px) {
    .hero { padding: 40px 0; }
    .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .hero h1 { font-size: clamp(32px, 8.5vw, 44px); }
    .hero__lead { margin-top: 20px; }
    .hero__actions { align-items: center; flex-direction: row; flex-wrap: wrap; gap: 12px 24px; }
    .hero__actions .button { width: auto; padding-inline: 18px; }
    .hero__trust { gap: 8px; margin-top: 22px; }
    .hero__visual .mac-tray, .hero__visual.is-onscreen .mac-tray { min-height: 675px; }
    .hero__visual .mac-tray .tray-popover { top: 190px; right: 12px; width: calc(100% - 24px); }
    .tray-tabs button { white-space: normal; min-height: 42px; }
    .capability-grid--essentials { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    .capability-grid--essentials .capability-card, .capability-grid--essentials #music-player { padding: 0; }
    .more-tools > summary { font-size: 16px; padding-block: 20px; }
    .tool-index { gap: 0 24px; }
    .tool-index a { font-size: 14px; }
    .store-availability .capability-card > div { grid-template-columns: 1fr; gap: 12px; }
    .store-availability .capability-store__button { grid-column: auto; grid-row: auto; justify-self: start; }
    .automation-details .automation { padding: 24px 16px; }
    .product-window__body { min-height: 0; }
    .workspace-stage__header { padding: 18px 12px; gap: 12px; }
    .workspace-stage__header h2 { font-size: 18px; }
    .restore-button { padding: 10px; font-size: 12px; }
    .desktop { min-height: 300px; }
    .plan, .plan--featured { padding: 26px 22px; min-height: 0; }
    .plan + .plan { border-top: 1px solid var(--line); }
    .plan header > div, .plan header > .license-options { min-height: 110px; }
    .plan .plan-summary { min-height: 0; }
    .faq__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
@media (prefers-reduced-motion: reduce) {
    .disclosure-mark { transition: none; }
    .js .hero h1 span { animation: none; opacity: 1; transform: none; }
    .scroll-demo__strip span { min-height: 100%; }
    .js .capability-shot--split .shot-menu--apps span, .js .capability-shot--shelf .shot-shelf figure { opacity: 1; transform: none; }
    .js .more-tools .shelf-panel__files span, .js .more-tools .editor-step { opacity: 1; transform: none; }
}