/* Base styles */
* {
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    color: var(--dark-1a1a2e);
    margin: 0;
    padding: 0;
    background-color: var(--light-page-bg);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 24px;
}

/* Hero Section */
/* The platform cards rise into the bottom of this band, so it never reads as
   an empty bar. The overlap is the container's negative margin below. */
.hero {
    position: relative;
    background:
        radial-gradient(50% 80% at 50% 0%, rgba(120, 150, 220, 0.16), transparent 70%),
        linear-gradient(160deg, var(--hero-gradient-start) 0%, var(--hero-gradient-end) 100%);
    color: var(--white);
    padding: 148px 20px 160px;
    text-align: center;
}

.hero-content {
    max-width: 600px;
    margin: 0 auto;
}

.hero h1 {
    font-size: var(--text-6xl);
    margin: 0 0 12px 0;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.hero p {
    font-size: var(--text-lg);
    margin: 0;
    color: var(--white);
}

.hero + .container {
    position: relative;
    margin-top: -120px;
    padding-top: 0;
}

/* Platform Grid */
.platform-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 60px;
}

.platform-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: 40px 32px;
    box-shadow: var(--elevation-md);
    border: 1px solid var(--gray-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.platform-icon {
    width: 72px;
    height: 72px;
    margin-bottom: 24px;
    color: var(--black);
}

.platform-icon svg {
    width: 100%;
    height: 100%;
}

.platform-info {
    flex: 1;
    margin-bottom: 24px;
}

.platform-info h2 {
    margin: 0 0 8px 0;
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--gray-800);
}

.platform-desc {
    margin: 0;
    color: var(--black);
    font-size: var(--text-sm);
}

.version-details {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
}

.version-tag {
    background: var(--blue-50);
    color: var(--blue-700);
    padding: 4px 12px;
    border-radius: var(--radius-xl);
    font-size: var(--text-xs);
    font-weight: 600;
}

.platform-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.platform-actions .btn {
    width: 100%;
    border-radius: var(--radius-sm);
    padding-left: 16px;
    padding-right: 16px;
}

.platform-actions .btn.disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

.btn-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-right: 8px;
}

/* Positioned absolutely (inside the card's bottom padding) so the download
   buttons stay vertically aligned with the buttons in the other cards.
   Both cards that carry a help link need this: .install-help-link is absolute,
   so without a positioned ancestor it escapes the card and anchors to the page. */
.platform-macos .platform-actions,
.platform-linux .platform-actions {
    position: relative;
}

.install-help-link {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    background: none;
    border: none;
    padding: 0;
    color: var(--primary-blue);
    font-size: var(--text-xs);
    cursor: pointer;
}

.install-help-link:hover {
    text-decoration: underline;
}

/* Linux installation instructions modal */
.install-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.install-modal.active {
    opacity: 1;
    pointer-events: auto;
}

.install-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
}

.install-modal-content {
    position: relative;
    width: 92%;
    max-width: 520px;
    max-height: 85vh;
    overflow-y: auto;
    background: var(--white);
    border: 1px solid var(--gray-border);
    border-radius: var(--radius-lg);
    padding: 32px;
    box-shadow: var(--elevation-lg);
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

.install-modal.active .install-modal-content {
    transform: scale(1);
}

.install-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    color: var(--black);
    font-size: var(--text-xl);
    line-height: 1;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.install-modal-close:hover {
    opacity: 1;
}

.install-modal-content h2 {
    margin: 0 0 16px 0;
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--gray-800);
}

.install-modal-steps {
    margin: 0 0 16px 0;
    padding-left: 20px;
    color: var(--black);
    font-size: var(--text-sm);
    line-height: 1.6;
    text-align: left;
}

.install-modal-steps li {
    margin-bottom: 8px;
}

.install-modal-alt,
.install-modal-note {
    margin: 0 0 12px 0;
    color: var(--black);
    font-size: var(--text-xs);
    line-height: 1.6;
    text-align: left;
}

.install-modal-note {
    margin-bottom: 0;
    opacity: 0.85;
}

.install-modal-note a {
    color: var(--primary-blue);
}

.install-modal-content code {
    background: var(--blue-50);
    color: var(--blue-700);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    /* anywhere lets the long filename wrap inside the modal; clone makes the
       padding/background apply per wrapped line so the last char isn't clipped. */
    overflow-wrap: anywhere;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* SmartScreen walkthrough styles moved to resources/styles/smartscreen-guide.css
   (shared with the paid landing pages). */

/* Requirements Section */
/* Product shot beside a short reassurance, shown between the download buttons
   and the requirements. Colours come from the same tokens the rest of this page
   uses, so it follows the theme rather than pinning its own values. */
.preview-section {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: 32px;
    box-shadow: var(--elevation-md);
    border: 1px solid var(--gray-border);
    margin-bottom: 40px;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 40px;
    align-items: center;
}

.preview-image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    border: 1px solid var(--gray-border);
}

.preview-copy h2 {
    margin: 0 0 14px 0;
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--gray-800);
}

.preview-copy p {
    margin: 0;
    font-size: var(--text-sm);
    line-height: 1.65;
    color: var(--gray-600);
}

@media (max-width: 900px) {
    .preview-section {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 24px;
    }
}

.requirements-section {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: 48px;
    box-shadow: var(--elevation-md);
    border: 1px solid var(--gray-border);
    margin-bottom: 40px;
}

.requirements-section h2 {
    text-align: center;
    margin: 0 0 40px 0;
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--gray-800);
}

.requirements-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.requirement-card {
    padding: 24px;
    background: var(--gray-50);
    border-radius: var(--radius-md);
    border: 1px solid var(--gray-200);
}

.requirement-card h3 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 16px 0;
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--gray-800);
}

.req-icon {
    width: 24px;
    height: 24px;
    color: var(--black);
}

.requirement-card ul {
    margin: 0;
    padding-left: 20px;
    list-style: disc;
}

.requirement-card li {
    color: var(--black);
    font-size: var(--text-xs);
    margin-bottom: 8px;
    line-height: 1.5;
}

.requirement-card li:last-child {
    margin-bottom: 0;
}

/* Additional Section */
.additional-section {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.additional-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 32px;
    box-shadow: var(--elevation-md);
    border: 1px solid var(--gray-border);
    display: flex;
    gap: 24px;
}

.additional-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: var(--blue-50);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-blue);
}

.additional-icon svg {
    width: 24px;
    height: 24px;
}

.additional-content h3 {
    margin: 0 0 8px 0;
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--gray-800);
}

.additional-content p {
    margin: 0 0 16px 0;
    color: var(--black);
    font-size: var(--text-sm);
    line-height: 1.5;
}

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--primary-blue);
    text-decoration: none;
    font-weight: 500;
    font-size: var(--text-sm);
    transition: gap 0.2s ease;
}

.link-arrow:hover {
    gap: 10px;
    text-decoration: underline;
}

.link-arrow svg {
    width: 16px;
    height: 16px;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .platform-grid {
        grid-template-columns: 1fr;
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }

    .requirements-grid {
        grid-template-columns: 1fr;
    }

    .additional-section {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .hero {
        padding: 120px 20px 130px;
    }

    .hero h1 {
        font-size: var(--text-4xl);
    }

    .hero p {
        font-size: var(--text-md);
    }

    .container {
        padding: 40px 16px;
    }

    .hero + .container {
        margin-top: -96px;
        padding-top: 0;
    }

    .platform-card {
        padding: 32px 24px;
    }

    .platform-icon {
        width: 56px;
        height: 56px;
    }

    .requirements-section {
        padding: 32px 24px;
    }

    .requirements-section h2 {
        font-size: var(--text-xl);
        margin-bottom: 32px;
    }

    .additional-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 24px;
    }
}

@media (max-width: 480px) {
    .hero h1 {
        font-size: var(--text-2xl);
    }

    .hero p {
        font-size: var(--text-sm);
    }

    .platform-info h2 {
        font-size: var(--text-lg);
    }

    .version-details {
        flex-direction: column;
        gap: 8px;
    }

    .requirement-card {
        padding: 20px;
    }

    .requirement-card h3 {
        font-size: var(--text-sm);
    }

    .requirement-card li {
        font-size: var(--text-xs);
    }
}

.store-badges {
    margin: 0 0 40px;
    text-align: center;
}

.store-badges-label {
    margin: 0 0 12px;
    font-size: var(--text-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--gray-500);
}

.store-badges-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.store-badges-row img {
    display: block;
    height: auto;
    opacity: .85;
    transition: opacity .15s ease;
}

.store-badges-row a:hover img,
.store-badges-row a:focus-visible img {
    opacity: 1;
}

.store-commands {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 20px;
  margin-top: 16px;
}

.store-command {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.store-command-label {
  font-size: var(--text-2xs);
  color: var(--gray-700);
}

.store-command-copy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 9px;
  border: 1px solid var(--gray-border);
  border-radius: var(--radius-sm);
  background: var(--white);
  cursor: pointer;
  transition: border-color .15s ease;
}

.store-command-copy:hover,
.store-command-copy:focus-visible {
  border-color: var(--primary-blue);
}

.store-command-copy code {
  font-size: var(--text-2xs);
  color: var(--gray-900);
  white-space: nowrap;
}

.store-command-feedback {
  display: flex;
  flex-shrink: 0;
  opacity: 0;
  color: var(--emerald-600);
  transition: opacity .15s ease;
}

.store-command-copy.copied .store-command-feedback {
  opacity: 1;
}