* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    color: #1d1d1f;
    background: #ffffff;
    font-size: 1.0625rem;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.container {
    max-width: 980px;
    margin: 0 auto;
    padding: 0 40px;
}

header {
    padding: 0 0 6px 0;
    text-align: center;
}

.hero-copy {
    max-width: 780px;
}

.brand-lockup {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 14px;
}

.brand-icon {
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
}

.brand-name {
    color: #424245;
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1;
}

.eyebrow {
    color: #86868b;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.hero-headline {
    color: #1d1d1f;
    font-size: 3rem;
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.05;
    max-width: 22ch;
    margin: 0 auto 12px;
    text-wrap: balance;
}

.tagline {
    font-size: 1.3125rem;
    color: #424245;
    margin-bottom: 0;
    font-weight: 400;
    letter-spacing: 0.011em;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.nav-link {
    color: #424245;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    padding: 5px 10px;
    border-radius: 5px;
    transition: all 0.2s ease;
}

.nav-link:hover {
    background-color: #f5f5f7;
    color: var(--accent);
}

.nav-link.active {
    color: var(--accent);
    font-weight: 600;
}

.hero-section {
    padding: 0;
    margin: 28px 0;
    text-align: center;
}

.hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.hero-visual {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.video-placeholder {
    width: 100%;
    background: #f5f5f7;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* width, not just max-width: with srcset the intrinsic width is the sizes
   value, which would no longer fill the column on its own. */
.hero-image {
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.hero-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.store-badge {
    display: inline-block;
    line-height: 0;
}

.store-badge-image {
    width: 250px;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 0;
}

.hero-meta {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 0;
    margin: 0;
    color: #6e6e73;
    font-size: 0.8125rem;
    line-height: 1.4;
}

.hero-meta li {
    position: relative;
    padding-right: 14px;
}

.hero-meta li:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #b8b8bf;
    transform: translateY(-50%);
}

.hero-meta li:last-child {
    padding-right: 0;
}

.feature-highlight {
    background: none;
    padding: 20px 0;
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.feature-highlight h3 {
    color: #1d1d1f;
    margin-bottom: 20px;
    font-size: 1.3125rem;
    font-weight: 600;
    letter-spacing: -0.003em;
    line-height: 1.125;
}

.feature-highlight p {
    color: #424245;
    font-size: 1.0625rem;
    line-height: 1.5;
    font-weight: 400;
    letter-spacing: 0.012em;
}

.page-section {
    margin: 0;
}

.command-key-highlight {
    color: var(--accent);
    font-weight: 600;
}

.section-separator {
    display: flex;
    align-items: center;
    margin: 48px 0 28px 0;
    gap: 40px;
}

.separator-line {
    flex: 1;
    min-width: 16px;
    height: 1px;
    background: #d2d2d7;
}

/* One line when it fits; a long title wraps on a narrow screen instead of
   making the page wider than the screen. */
.separator-title {
    color: #1d1d1f;
    font-size: 1.875rem;
    font-weight: 600;
    letter-spacing: -0.003em;
    text-align: center;
    text-wrap: balance;
    margin: 0;
}

.features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    margin: 40px 0;
}

.feature {
    background: none;
    padding: 0;
    transition: all 0.3s ease;
}

.feature h3 {
    color: #1d1d1f;
    margin-bottom: 16px;
    font-size: 1.3125rem;
    font-weight: 600;
    letter-spacing: -0.003em;
    line-height: 1.167;
}

.feature-wide {
    grid-column: 1 / -1;
}

.feature-content {
    border-left: 2px solid #e6e6eb9a;
    padding-left: 20px;
    margin-left: 2px;
}

.feature-content > * + * {
    margin-top: 16px;
}

.feature p {
    color: #424245;
    font-size: 1.0625rem;
    line-height: 1.4706;
    font-weight: 400;
    letter-spacing: 0.012em;
}

.feature-list {
    margin: 0;
    padding-left: 20px;
    color: #424245;
}

.feature-list li {
    margin: 8px 0;
    font-size: 1.0625rem;
    line-height: 1.5;
}

.testimonials-grid .feature-content {
    border-left: 0;
    padding-left: 0;
    margin-left: 0;
}

.testimonial-quote {
    margin: 0;
}

.testimonial-quote::before {
    content: "\201C";
    display: block;
    color: #2f7cff;
    font-size: 3.4375rem;
    font-weight: 700;
    line-height: 0.72;
    margin-bottom: 10px;
    letter-spacing: -0.03em;
}

.feature-media {
    margin: 0;
}

.comparison-visual {
    margin: 0;
}

.comparison-visual .full-width-img {
    margin-top: 0;
}

.feature-wide .feature-content {
    border-left: 2px solid #e6e6eb9a;
    padding-left: 20px;
    margin-left: 2px;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 28px;
    align-items: start;
}

.feature-wide .feature-content > * + * {
    margin-top: 0;
}

.feature-wide .full-width-img {
    margin-top: 0;
}

.full-width-img {
    width: 100%;
    border-radius: 6px;
    margin-top: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.no-shadow-img {
    box-shadow: none;
}

.dock-annotated-figure {
    position: relative;
    margin: 20px 0 0;
}

.dock-annotated-figure .full-width-img {
    display: block;
    margin-top: 0;
}

.dock-annotation-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.dock-note {
    position: absolute;
    margin: 0;
    max-width: 42%;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(24, 24, 28, 0.72);
    color: #f5f5f7;
    font-size: 0.8125rem;
    line-height: 1.35;
    letter-spacing: 0.01em;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
}

.dock-note-primary {
    top: 4%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

.dock-note-secondary {
    top: 57%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

.dock-note-status {
    right: 12%;
    bottom: 40.5%;
    max-width: 17%;
}

.dock-note-status2 {
    right: 3%;
    bottom: 3.5%;
    max-width: 38%;
}

/* Spatial Dock EX screenshot: the window bar sits above the docks, so every
   label moves down onto an empty part of the overlay. */
.has-window-bar .dock-note-windows {
    top: 9%;
    left: 67%;
    transform: translateX(-50%);
    text-align: center;
}

.has-window-bar .dock-note-primary {
    top: 66%;
    left: 44.7%;
}

.has-window-bar .dock-note-secondary {
    top: 77.5%;
}

.has-window-bar .dock-note-status {
    top: 64%;
    right: 6%;
    bottom: auto;
    max-width: 20%;
}

.dock-annotation-mobile {
    display: none;
    margin: 16px auto 0;
    max-width: 780px;
    padding: 14px 16px;
    border: 1px solid #e6e6eb;
    border-radius: 12px;
    background: #fafafc;
}

.dock-annotation-mobile p {
    margin: 0;
    color: #424245;
    font-size: 1rem;
    line-height: 1.45;
}

.dock-annotation-mobile p + p {
    margin-top: 8px;
}

em {
    color: #1b1916;
    background-color: #ffcc0088;
    padding: 1px 6px;
    font-style: normal;
    font-weight: 600;
}
.closing-card {
    align-items: center;
}
 
.closing-copy h2,
.closing-copy h3 {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: #1d1d1f;
    margin-bottom: 12px;
    line-height: 1.15;
}
 
.closing-copy p {
    color: #424245;
    font-size: 1.0625rem;
    line-height: 1.5;
}
 
.closing-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
 
.closing-note {
    font-size: 0.8125rem;
    color: #86868b;
    text-align: center;
}

.faq-list {
    margin: 0 0 40px 0;
    border-top: 0;
}
 
.faq-item {
    list-style: none;
}

.faq-item + .faq-item {
    border-top: 1px dashed #d9dbe3;
}
 
.faq-item summary {
    display: block;
    position: relative;
    padding: 20px 40px 20px 0;
    font-size: 1.1875rem;
    font-weight: 600;
    color: #1d1d1f;
    cursor: pointer;
    letter-spacing: -0.003em;
    line-height: 1.2;
    list-style: none;
    user-select: none;
}
 
.faq-item summary::-webkit-details-marker {
    display: none;
}
 
.faq-item summary::after {
    content: '+';
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    font-size: 1.375rem;
    font-weight: 300;
    color: #86868b;
    transition: transform 0.2s ease, color 0.2s ease;
    line-height: 1;
}
 
.faq-item[open] summary::after {
    content: '−';
    color: var(--accent);
}
 
.faq-item summary:hover {
    color: var(--accent);
}
 
.faq-body {
    padding: 0 0 24px 0;
    max-width: 680px;
}
 
.faq-body p {
    color: #424245;
    font-size: 1.0625rem;
    line-height: 1.5;
    font-weight: 400;
}

.faq-body > * + * {
    margin-top: 14px;
}

.faq-body ul {
    margin: 0;
    padding-left: 20px;
    color: #424245;
}

.faq-body li {
    margin: 8px 0;
    font-size: 1.0625rem;
    line-height: 1.5;
}
 
.faq-body a {
    color: var(--accent);
    text-decoration: none;
}
 
.faq-body a:hover {
    text-decoration: underline;
}
 
footer {
    text-align: center;
    padding: 60px 0 40px 0;
    color: #424245;
    font-size: 0.9375rem;
    border-top: 1px solid #d2d2d7;
    margin-top: 80px;
}

footer p {
    margin-bottom: 8px;
}

footer small {
    color: #424245;
}

footer a {
    color: var(--accent);
    text-decoration: none;
    transition: opacity 0.2s ease;
}

footer a:hover {
    opacity: 0.8;
}

.utility-page .hero-section {
    margin: 28px 0 16px;
}

.utility-page .hero-content {
    gap: 14px;
}

.utility-page .hero-headline {
    font-size: clamp(2.25rem, 5vw, 2.75rem);
    max-width: 16ch;
    margin-bottom: 10px;
}

.utility-page .tagline {
    max-width: 640px;
}

.utility-page footer {
    margin-top: 60px;
}

.contact-container,
.privacy-container {
    max-width: 860px;
    margin: 0 auto;
    text-align: center;
    padding: 8px 0 0;
}

.contact-placeholder,
.privacy-box {
    background: #fafafc;
    border: 1px solid #e6e6eb;
    border-radius: 14px;
    padding: 26px;
    margin: 0;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.contact-heading {
    color: #1d1d1f;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 16px;
}

.contact-placeholder iframe {
    border: 0;
    border-radius: 10px;
}

.privacy-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    text-align: left;
}

.privacy-heading {
    color: #1d1d1f;
    font-size: 1.3125rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.privacy-grid p {
    color: #424245;
    font-size: 1.0625rem;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .container {
        padding: 0 20px;
    }

    /* Long section titles wrap here; keep their lines together. */
    .separator-title {
        line-height: 1.25;
    }

    header {
        padding: 0 0 4px 0;
    }

    .brand-lockup {
        gap: 8px;
        margin-bottom: 12px;
    }

    .utility-page .hero-headline {
        font-size: 2.25rem;
        max-width: 14ch;
    }

    .utility-page .tagline {
        font-size: 1.125rem;
    }

    .contact-placeholder,
    .privacy-box {
        padding: 20px;
    }

    .privacy-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .hero-headline {
        font-size: 2.5rem;
    }

    .brand-icon {
        width: 24px;
        height: 24px;
    }

    .brand-name {
        font-size: 1.0625rem;
    }

    .eyebrow {
        font-size: 0.75rem;
        margin-bottom: 12px;
    }

    .tagline {
        font-size: 1.1875rem;
    }

    .hero-content {
        gap: 22px;
    }

    .feature-highlight h3 {
        font-size: 1.25rem;
    }

    .feature-highlight p {
        font-size: 1.0625rem;
    }

    .hero-visual {
        gap: 20px;
    }

    .feature-wide .feature-content {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .faq-item summary {
        font-size: 1.1875rem;
    }

    .testimonial-quote::before {
        margin-bottom: 8px;
    }

    .dock-note {
        max-width: 58%;
        padding: 6px 10px;
        font-size: 0.75rem;
    }

    .dock-note-primary {
        top: 10%;
    }

    .dock-note-secondary {
        top: 55%;
    }

    .dock-note-status {
        right: 2%;
        bottom: 6%;
        max-width: 50%;
    }

}

@media (max-width: 700px) {
    .dock-annotation-layer {
        display: none;
    }

    .dock-annotation-mobile {
        display: block;
    }
}

/* For mobile phones */
@media (max-width: 480px) {

    .section-separator {
        margin: 36px 0 24px 0;
        gap: 20px;
    }

    .separator-title {
        font-size: 1.5rem;
    }

    .hero-headline {
        font-size: 2.125rem;
        max-width: 13ch;
        margin-bottom: 10px;
    }

    .utility-page .hero-headline {
        font-size: 2rem;
        max-width: 14ch;
    }

    .contact-placeholder,
    .privacy-box {
        padding: 16px;
    }

    .brand-name {
        font-size: 1rem;
    }

    .tagline {
        font-size: 1.125rem;
    }

    .eyebrow {
        font-size: 0.6875rem;
    }

    .hero-meta {
        justify-content: center;
        row-gap: 6px;
        column-gap: 8px;
    }

    .hero-meta li {
        padding-right: 0;
    }

    .hero-meta li::after {
        content: none;
    }

    .features {
        grid-template-columns: 1fr;
        gap: 30px;
        margin: 30px 0;
    }

    .feature h3 {
        font-size: 1.1875rem;
    }

    .feature p {
        font-size: 1.0625rem;
    }

    .closing-card {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 20px;
    }

    .closing-copy h2,
    .closing-copy h3 {
        font-size: 1.375rem;
    }

    .closing-copy p {
        font-size: 1.0625rem;
    }

    .closing-cta {
        align-items: flex-start;
    }

    .closing-note {
        text-align: left;
    }

    .faq-list {
        margin: 30px 0;
        gap: 10px;
    }

    .faq-item {
        padding: 14px 16px;
    }

    .faq-item summary {
        font-size: 1.125rem;
    }

    .faq-body li,
    .faq-body p {
        font-size: 1rem;
    }

    .privacy-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    footer {
        padding: 40px 0 30px 0;
        margin-top: 60px;
    }
}


.container {
    max-width: 980px;
    width: 100%;
}

/* Keyboard layout */

.info {
    text-align: center;
    color: #424245;
    font-size: 1.0625rem;
    margin-top: 20px;
}


/* ============================================================
   v2 — Multi-edition site
   Overview / Spatial Dock (Mac App Store) / Spatial Dock EX / Compare
   Some rules above are overridden further down (.hero-section, .features,
   .feature-highlight, .brand-name), so search the whole file before
   changing one.
   ============================================================ */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Site header & navigation ---------- */

.site-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
    flex-wrap: wrap;
    padding: 22px 0 0;
    margin-bottom: 26px;
}

.site-topbar .brand-lockup {
    margin-bottom: 0;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-wrap: wrap;
}

.site-nav .nav-link {
    position: relative;
    font-size: 0.9375rem;
    padding: 7px 11px;
    border-radius: 6px;
    white-space: nowrap;
}

/* The current page is marked by a rule under its label, sized to the text */
.site-nav .nav-link.active::after {
    content: "";
    position: absolute;
    left: 11px;
    right: 11px;
    bottom: 1px;
    height: 2px;
    border-radius: 1px;
    background: var(--accent);
}

.site-nav .nav-link.active {
    background: none;
}

/* ---------- Page intro (shared by the four main pages) ---------- */

.page-intro {
    text-align: center;
    max-width: 760px;
    margin: 0 auto;
}

.page-intro .hero-headline {
    margin-bottom: 16px;
}

/* ---------- Buttons ---------- */

.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: center;
    margin-top: 26px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 24px;
    height: 48px;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.btn-secondary {
    background: #ffffff;
    color: var(--accent);
    border-color: #cbdefa;
}

.btn-secondary:hover {
    background: #f4f8ff;
}

/* ---------- Callouts ---------- */

.callout {
    border: 1px solid #e6e6eb;
    border-left: 3px solid var(--accent);
    border-radius: 10px;
    background: #fbfbfd;
    padding: 18px 22px;
    margin: 28px auto;
    max-width: 780px;
    text-align: left;
}

.callout p {
    color: #424245;
    font-size: 1rem;
    line-height: 1.5;
}

.callout p + p {
    margin-top: 10px;
}

.callout strong {
    color: #1d1d1f;
}

.callout.accent-free {
    border-left-color: #f7743a;
}

.callout.accent-supporter {
    border-left-color: #9f4ff0;
}

.callout.accent-neutral {
    border-left-color: #c7c7cc;
}

/* ---------- Three-edition comparison table ---------- */

/* position: relative keeps the cells' absolutely positioned .sr-only labels
   inside the scroll box; otherwise they widen the whole page on phones. */
.compare-wrap {
    position: relative;
    margin: 30px 0 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.compare-table {
    width: 100%;
    min-width: 660px;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.compare-table th,
.compare-table td {
    padding: 12px 12px;
    border-bottom: 1px solid #ededf1;
    text-align: center;
    vertical-align: middle;
}

.compare-table thead th {
    border-bottom: 1px solid #d2d2d7;
    color: #1d1d1f;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3;
    padding-bottom: 14px;
    vertical-align: bottom;
}

.compare-table thead th span {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.compare-table thead .col-appstore span {
    color: var(--accent);
}

.compare-table thead .col-free span {
    color: #f7743a;
}

.compare-table thead .col-supporter span {
    color: #9f4ff0;
}

.compare-table thead th.col-feature {
    text-align: left;
    width: 40%;
}

/* The three edition columns share the remaining width equally */
.compare-table thead th.col-appstore,
.compare-table thead th.col-free,
.compare-table thead th.col-supporter {
    width: 20%;
}

.compare-table tbody th[scope="row"] {
    text-align: left;
    font-weight: 400;
    color: #1d1d1f;
    line-height: 1.4;
}

.compare-table tbody tr.group-row th {
    background: #fafafc;
    color: #86868b;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    text-align: left;
    padding-top: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid #ededf1;
}

.compare-table td.yes {
    color: #1d9f6b;
    font-weight: 700;
}

.compare-table td.no {
    color: #c7c7cc;
}

.compare-table td.info {
    color: #424245;
    font-size: 0.8125rem;
    text-align: center;
    margin: 0;
}

.compare-scroll-hint {
    display: none;
    font-size: 0.8125rem;
    color: #86868b;
    text-align: center;
    margin-top: 8px;
}

/* ---------- Responsive ---------- */

@media (max-width: 860px) {

    .compare-scroll-hint {
        display: block;
    }
}

@media (max-width: 700px) {
    .site-topbar {
        justify-content: center;
        gap: 12px;
        padding-top: 18px;
        margin-bottom: 20px;
    }

    .site-topbar .brand-lockup {
        justify-content: center;
        width: 100%;
    }

    .site-nav {
        justify-content: center;
        width: 100%;
    }

    .site-nav .nav-link {
        font-size: 0.875rem;
        padding: 6px 10px;
    }
}

@media (max-width: 480px) {
    .callout {
        padding: 16px 18px;
        margin: 22px 0;
    }

    .btn {
        width: 100%;
    }
}


/* ============================================================
   v3 — Overview components
   ============================================================ */

:root {
    --accent: #007aff;
}

.muted {
    color: #86868b;
}

.small {
    font-size: 0.9375rem;
    line-height: 1.5;
}

.hero-note {
    color: #86868b;
    font-size: 0.8125rem;
    line-height: 1.5;
    margin-top: 16px;
}

.prose {
    max-width: 720px;
    margin: 0 auto;
    text-align: left;
}

.prose > * + * {
    margin-top: 16px;
}

.prose p {
    color: #424245;
    font-size: 1.0625rem;
    line-height: 1.5;
}

.prose h3 {
    color: #1d1d1f;
    font-size: 1.3125rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.2;
    margin-top: 38px;
}

.prose h4 {
    color: #1d1d1f;
    font-size: 1.1875rem;
    font-weight: 600;
    line-height: 1.25;
}

.ticks {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
}

.ticks li {
    position: relative;
    color: #424245;
    font-size: 0.9375rem;
    line-height: 1.45;
    padding-left: 24px;
    margin: 9px 0;
}

.ticks li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 0;
    color: #1d9f6b;
    font-weight: 700;
    font-size: 0.875rem;
}

/* ---------- Activation sequence ---------- */

.sequence {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 14px;
    margin: 26px 0;
}

.sequence .step {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border-radius: 8px;
    background: #f5f5f7;
    padding: 8px 14px;
    color: #1d1d1f;
    font-size: 0.9375rem;
    font-weight: 500;
}

.sequence .sep {
    color: var(--accent);
    font-size: 1.125rem;
    font-weight: 600;
}

kbd {
    display: inline-block;
    min-width: 1.6em;
    padding: 1px 6px;
    border: 1px solid #d2d2d7;
    border-bottom-width: 2px;
    border-radius: 6px;
    background: #ffffff;
    color: #1d1d1f;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.92em;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
}

/* ---------- Reasons grid ---------- */

.reasons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 28px 36px;
    margin: 30px 0 0;
    text-align: left;
}

.reasons > div > h4 {
    color: #1d1d1f;
    font-size: 1.1875rem;
    font-weight: 600;
    line-height: 1.25;
    margin: 0 0 8px;
}

.reasons > div > p {
    color: #424245;
    font-size: 1rem;
    line-height: 1.5;
    margin: 0;
}

/* ---------- Screenshots with captions ---------- */

.shot {
    margin: 30px 0 0;
}

.shot img {
    width: 100%;
    display: block;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.shot figcaption {
    color: #86868b;
    font-size: 0.8125rem;
    line-height: 1.5;
    text-align: center;
    margin-top: 12px;
}

/* ---------- Editions: one card plus a two-tier panel ---------- */

.tier-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.tier {
    border: 1px solid #e6e6eb;
    border-radius: 11px;
    background: #ffffff;
    padding: 18px 18px 20px;
}

.tier h4 {
    color: #1d1d1f;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.25;
    margin: 0 0 6px;
}

.tier.is-free h4::after,
.tier.is-supporter h4::after {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-left: 8px;
    vertical-align: 0.12em;
}

.tier.is-free h4::after {
    background: #f7743a;
}

.tier.is-supporter h4::after {
    background: #9f4ff0;
}

.price {
    color: #86868b;
    font-size: 0.8125rem;
    line-height: 1.45;
    margin: 0;
}

.price strong {
    color: #424245;
    font-weight: 600;
}

/* ---------- Button variants ---------- */

.btn.link {
    background: none;
    border: 0;
    padding: 0;
    height: auto;
    color: var(--accent);
}

.btn.link:hover {
    text-decoration: underline;
}

.arrow {
    font-weight: 400;
}

/* ---------- Quotes ---------- */

.quotes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 26px 32px;
    margin: 30px 0 0;
}

.quotes figure {
    margin: 0;
}

.quotes blockquote {
    margin: 0;
    color: #424245;
    font-size: 1.0625rem;
    line-height: 1.47;
}

.quotes blockquote::before {
    content: "\201C";
    display: block;
    color: #2f7cff;
    font-size: 3.4375rem;
    font-weight: 700;
    line-height: 0.72;
    margin-bottom: 10px;
    letter-spacing: -0.03em;
}

.quotes figcaption {
    color: #86868b;
    font-size: 0.8125rem;
    margin-top: 10px;
}

.quotes figcaption a {
    color: #86868b;
}

/* ---------- Footer ---------- */

.footer-cols {
    display: grid;
    grid-template-columns: 1.6fr repeat(3, 1fr);
    gap: 30px;
    text-align: left;
    margin-bottom: 34px;
}

.footer-cols h5 {
    color: #1d1d1f;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 12px;
}

.footer-cols ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-cols li {
    margin: 8px 0;
    font-size: 0.9375rem;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #1d1d1f;
    font-size: 1.0625rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.footer-blurb {
    color: #86868b;
    font-size: 0.8125rem;
    line-height: 1.5;
    max-width: 26em;
    margin: 0;
}

.footer-fine {
    color: #86868b;
    font-size: 0.8125rem;
    line-height: 1.5;
    border-top: 1px solid #ececf1;
    padding-top: 22px;
}

@media (max-width: 860px) {

    .footer-cols {
        grid-template-columns: 1fr 1fr;
        gap: 26px;
    }
}

@media (max-width: 480px) {
    .prose p {
        font-size: 1.0625rem;
    }

    .sequence {
        gap: 8px;
    }

    .sequence .step {
        font-size: 0.9375rem;
        padding: 8px 14px;
    }

    .footer-cols {
        grid-template-columns: 1fr;
    }
}

/* Numbered steps */
.list-steps {
    counter-reset: step;
    list-style: none;
    margin: 0;
    padding: 0;
}

.list-steps li {
    counter-increment: step;
    position: relative;
    color: #424245;
    font-size: 1.0625rem;
    line-height: 1.5;
    padding-left: 40px;
    margin: 16px 0;
}

.list-steps li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: 0.1em;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #f0f4fb;
    color: var(--accent);
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 26px;
    text-align: center;
}

/* ---------- Button palette: neutral, so nothing outranks the badges ---------- */

.btn-secondary {
    background: #ffffff;
    color: #1d1d1f;
    border-color: #d2d2d7;
}

.btn-secondary:hover {
    background: #f5f5f7;
    border-color: #c4c4cc;
}

/* ---------- Features and reasons read as one column ---------- */

.features {
    grid-template-columns: minmax(0, 1fr);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    gap: 44px;
}

.reasons {
    grid-template-columns: minmax(0, 1fr);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    gap: 32px;
}

/* Side by side stays where the point IS the side-by-side:
   testimonials, the closing call to action, and direct comparisons. */
.features.testimonials-grid,
.features.closing-card {
    max-width: none;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
}

@media (max-width: 480px) {
}


/* ============================================================
   v5 — Spacing and button refinements
   ============================================================ */

.site-topbar {
    padding-top: 6px;
    margin-bottom: 22px;
}

.hero-section {
    margin-top: 12px;
}

/* One text measure across the page, so every block shares a left edge */
.feature-highlight,
.prose,
.page-section > .small {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}


/* ============================================================
   v7 — Call-to-action buttons
   A plain rounded rectangle at the page's own corner radius, sized to
   its label. Two of them carry equal weight, with the qualifying
   detail as a caption underneath rather than crammed inside.
   ============================================================ */

.cta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 16px 22px;
    margin-top: 30px;
}

/* As wide as its button, so a long label never runs into its neighbour. The
   note underneath keeps its own 30ch limit. */
.cta-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    height: 48px;
    padding: 0 24px;
    border: 1px solid #1d1d1f;
    border-radius: 10px;
    background: #1d1d1f;
    color: #ffffff;
    font-size: 1.0625rem;
    font-weight: 500;
    letter-spacing: -0.012em;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.cta-btn:hover {
    background: #000000;
    border-color: #000000;
}

.cta-btn.is-quiet {
    background: transparent;
    border-color: #c9c9d1;
    color: #1d1d1f;
}

.cta-btn.is-quiet:hover {
    background: #f5f5f7;
    border-color: #b4b4bd;
}

.cta-btn-icon {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    opacity: 0.85;
}

.cta-note {
    color: #86868b;
    font-size: 0.8125rem;
    line-height: 1.45;
    text-align: center;
    margin: 0;
    max-width: 30ch;
}

@media (max-width: 480px) {
    .cta-row {
        gap: 18px;
    }

    .cta-item {
        width: 100%;
        max-width: 320px;
    }

    /* Full width, so a label longer than the screen wraps instead of
       pushing the page sideways. */
    .cta-btn {
        width: 100%;
        height: auto;
        min-height: 48px;
        padding: 12px 20px;
        line-height: 1.25;
        text-align: center;
        white-space: normal;
    }
}


/* ============================================================
   v8 — Inline links in body copy
   Component links (.nav-link, .cta-btn, .btn, .read-more, .store-badge)
   carry their own styles; this covers every plain link in prose, which
   otherwise fell back to the browser default.
   ============================================================ */

header a:not([class]),
main a:not([class]) {
    color: var(--accent);
    text-decoration: none;
}

header a:not([class]):hover,
main a:not([class]):hover {
    text-decoration: underline;
}


/* ============================================================
   v9 — Product names in body copy
   A name should read as one unit: slightly darker and heavier than the
   surrounding prose, and never broken across a line. Deliberately quiet,
   so a paragraph with several mentions does not turn spotty.
   ============================================================ */

.product {
    white-space: nowrap;
    text-decoration: underline;
    text-decoration-color: #d2d2d7;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

/* The brand lockups hold the name unstyled, so keep it from breaking */
.brand-name,
.footer-brand {
    white-space: nowrap;
}

/* A caption that carries an argument, not just a label */
.caption-lead {
    max-width: 800px;
    margin: 16px auto 0;
    color: #424245;
    font-size: 1.0625rem;
    line-height: 1.5;
    text-align: center;
}

.caption-lead strong {
    color: #1d1d1f;
}

/* The activation sequence belongs to the screenshot above it, not floating
   midway between the two images */
.hero-visual .sequence {
    margin-top: -8px;
    margin-bottom: 6px;
}


/* ============================================================
   v10 — Supporter badge
   Marks any feature that needs a Supporter license. Used everywhere
   such a feature is named, so the reader learns one signal.
   ============================================================ */

.badge-supporter {
    display: inline-block;
    vertical-align: 0.1em;
    margin-left: 7px;
    padding: 2px 8px;
    border: 1px solid #e6d4fb;
    border-radius: 5px;
    background: #f8f2ff;
    color: #7d33d6;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.5;
    text-transform: uppercase;
    white-space: nowrap;
}

h3 .badge-supporter,
h4 .badge-supporter {
    vertical-align: 0.18em;
}


/* ============================================================
   v11 — Edition summary rows
   A term-and-definition list: who it is, then what you get, one line each.
   ============================================================ */

.edition-summary {
    max-width: 800px;
    margin: 30px auto 0;
}

.edition-summary > div {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 4px 28px;
    padding: 16px 0;
    border-top: 1px solid #ededf1;
}

.edition-summary > div:last-child {
    border-bottom: 1px solid #ededf1;
}

.edition-summary dt {
    color: #1d1d1f;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.45;
}

.edition-summary dt a {
    color: #1d1d1f;
    text-decoration: none;
}

.edition-summary dt a:hover {
    color: var(--accent);
}

.edition-summary dd {
    color: #424245;
    font-size: 0.9375rem;
    line-height: 1.5;
    margin: 0;
}

@media (max-width: 600px) {
    .edition-summary > div {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
    }
}

/* The active item is marked by colour and the underline, not by weight:
   bolding it changed the label's width and shifted the menu between pages. */
.site-nav .nav-link.active {
    font-weight: 500;
}

/* Utility pages were keeping the old 28px top margin, so the menu sat lower
   there than on the product pages. */
.utility-page .hero-section {
    margin: 12px 0 16px;
}

/* ---------- Help pages: copyable Terminal blocks ---------- */
.code-block {
    position: relative;
    margin: 14px 0 0;
}

.code-block pre {
    background: #1d1d1f;
    color: #f5f5f7;
    padding: 16px 20px;
    border-radius: 10px;
    overflow-x: auto;
    font-family: "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
    font-size: 0.8125rem;
    line-height: 1.5;
    text-align: left;
    margin: 0;
}

.copy-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: #a0a0a8;
    cursor: pointer;
    padding: 5px 8px;
    line-height: 1;
}

.copy-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #f5f5f7;
}

.copy-btn.copied {
    color: #34c759;
    border-color: rgba(52, 199, 89, 0.4);
}

.copy-btn svg {
    display: block;
}

/* Help hub: each card title is a link to the page it describes. */
.reasons > div > h4 a {
    color: inherit;
    text-decoration: none;
}

.reasons > div > h4 a:hover {
    color: var(--accent);
}

/* Screenshots inside a prose column (Getting started). */
.prose .shot {
    margin: 22px 0 8px;
}

/* Plain bulleted lists inside a prose column: the global reset strips their
   padding, which pushed the bullets outside the column. */
.prose ul:not([class]) {
    padding-left: 22px;
    color: #424245;
    font-size: 1.0625rem;
    line-height: 1.5;
}

.prose ul:not([class]) li + li {
    margin-top: 6px;
}

/* Download button at the end of the main-site menu. */
.site-nav .nav-link.nav-cta {
    margin-left: 8px;
    background: #1d1d1f;
    color: #ffffff;
}

.site-nav .nav-link.nav-cta:hover {
    background: #3a3a3c;
    color: #ffffff;
}

/* Below 700px the menu no longer fits beside the logo; leave the download
   button to the page itself. */
@media (max-width: 700px) {
    .site-nav .nav-link.nav-cta {
        display: none;
    }
}

/* Two screenshots side by side, stacked on narrow screens. Each image's width
   grows with its --shot-ratio (width / height of the file), so both come out
   the same height even when their shapes differ. */
.shot-pair {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-top: 22px;
}

.shot-pair img {
    flex: var(--shot-ratio, 1) 1 0;
    min-width: 0;
}

@media (max-width: 700px) {
    .shot-pair {
        flex-direction: column;
    }

    .shot-pair img {
        flex: none;
    }
}

/* Screenshots that open full size on click (assets/image-zoom.js). */
.is-zoomable {
    cursor: zoom-in;
    transition: box-shadow 0.15s ease;
}

.is-zoomable:hover {
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.16);
}

.is-zoomable:focus-visible {
    outline: 3px solid var(--accent, #007aff);
    outline-offset: 3px;
}

.zoom-open {
    overflow: hidden;
}

.zoom-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.82);
    cursor: zoom-out;
    animation: zoom-fade 0.18s ease-out;
}

.zoom-overlay[hidden] {
    display: none;
}

.zoom-overlay img {
    max-width: calc(100vw - 48px);
    max-height: calc(100vh - 48px);
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    animation: zoom-in 0.18s ease-out;
}

.zoom-close {
    position: fixed;
    top: 14px;
    right: 14px;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
}

.zoom-close:hover {
    background: rgba(255, 255, 255, 0.28);
}

@keyframes zoom-in {
    from {
        opacity: 0;
        transform: scale(0.96);
    }
}

@keyframes zoom-fade {
    from {
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .zoom-overlay,
    .zoom-overlay img {
        animation: none;
    }
}

/* ============================================================
   Two product sites
   /spatialdockEX/ (body.site-ex): Spatial Dock EX, the main product. Plum,
   from the EX app icon.
   /spatialdock/ (body.site-appstore): Spatial Dock on the Mac App Store.
   Neutral, like the App Store app icon, with Apple blue links.
   The header, accent and icon change together, so moving from one site to
   the other reads as moving to a different product.
   ============================================================ */

a.brand-lockup {
    text-decoration: none;
}

.brand-tag {
    display: inline-block;
    margin-left: 2px;
    padding: 3px 8px;
    border: 1px solid #d2d2d7;
    border-radius: 999px;
    color: #6e6e73;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}

body.site-ex {
    --accent: #8a2f8c;
    --ex-plum: #4e194f;
    border-top: 4px solid var(--ex-plum);
}

body.site-ex .brand-name {
    color: var(--ex-plum);
}

body.site-ex .eyebrow {
    color: var(--accent);
}

body.site-ex .cta-btn:not(.is-quiet),
body.site-ex .site-nav .nav-link.nav-cta {
    background: var(--ex-plum);
    border-color: var(--ex-plum);
    color: #ffffff;
}

body.site-ex .cta-btn:not(.is-quiet):hover,
body.site-ex .site-nav .nav-link.nav-cta:hover {
    background: #3a1140;
    border-color: #3a1140;
}

body.site-ex .btn-secondary {
    border-color: #e3cfe4;
}

body.site-ex .nav-link:hover {
    background-color: #f7f0f7;
}

/* ---------- Showcase: one feature per row, text beside its screenshot ----------
   Replaces .feature-wide for features that have a paragraph, a list and an
   image: .feature-wide is a two-column grid made for exactly two children, so a
   third one wrapped under the text and left a hole beside it. Rows alternate
   sides with .is-reversed, and stack on narrow screens. */
.showcase {
    display: grid;
    gap: 64px;
    margin-top: 40px;
    text-align: left;
}

.showcase-item {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 40px;
    align-items: center;
}

.showcase-item.is-reversed {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}

.showcase-item.is-reversed .showcase-text {
    order: 2;
}

.showcase-text h3 {
    color: #1d1d1f;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.2;
    margin: 0 0 12px;
}

.showcase-text p {
    color: #424245;
    font-size: 1.0625rem;
    line-height: 1.5;
    margin: 0;
}

.showcase-text p + p,
.showcase-text p + .feature-list {
    margin-top: 12px;
}

.showcase-media img {
    display: block;
    width: 100%;
    margin: 0;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

@media (max-width: 820px) {
    .showcase {
        gap: 48px;
    }

    .showcase-item,
    .showcase-item.is-reversed {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .showcase-item.is-reversed .showcase-text {
        order: 0;
    }
}

/* A short note under a button that should not wrap to the button's width. */
.cta-note.is-single-line {
    max-width: none;
    white-space: nowrap;
}

/* EX home hero: room between the menu and the eyebrow. */
.overview-page .page-intro > .eyebrow {
    margin-top: 32px;
}

/* Breathing room between a paragraph block and the screenshot that follows it. */
.prose + .comparison-visual {
    margin-top: 40px;
}

/* "How you use it": short explanations under the screenshot, each named after
   one of the screenshot's labels. Four cards go two by two. */
.how-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
    margin-top: 36px;
    text-align: left;
}

.how-cards.is-four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.how-cards h3 {
    color: #1d1d1f;
    font-size: 1.1875rem;
    font-weight: 600;
    line-height: 1.25;
    margin: 0 0 8px;
}

.how-cards p {
    color: #424245;
    font-size: 1rem;
    line-height: 1.5;
    margin: 0;
}

.sequence + .dock-annotated-figure {
    margin-top: 32px;
}

@media (max-width: 760px) {
    .how-cards,
    .how-cards.is-four {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
    }
}

/* Opening sentence of a prose block: the point, before the explanation. */
.prose p.lead {
    color: #1d1d1f;
    font-size: 1.3125rem;
    font-weight: 500;
    line-height: 1.4;
}

/* A side note inside a showcase row (e.g. a permission requirement). */
.showcase-text p.small.muted {
    color: #86868b;
    font-size: 0.9375rem;
}