.landing-sections {
    --bg:            #050505;
    --card-border:   rgba(255, 255, 255, 0.08);
    --text:          rgba(255, 255, 255, 0.94);
    --text-muted:    rgba(255, 255, 255, 0.66);
    --text-dim:      rgba(255, 255, 255, 0.50);
    --orange:        #FE8515;
    --orange-amber:  #E29E3A;
    --radius:        16px;
    --radius-lg:     24px;
    --section-max:   1200px;
    --font-stack:    "Montserrat Medium", "Montserrat", -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-label:    "Plus Jakarta Sans", "Montserrat", sans-serif;

    background: var(--bg);
    color: var(--text);
    font-family: var(--font-stack);
    line-height: 1.5;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.landing-sections *,
.landing-sections *::before,
.landing-sections *::after {
    box-sizing: border-box;
}

.landing-sections .landing-section {
    width: 100%;
    max-width: var(--section-max);
    margin: 0 auto;
    padding: 56px 32px;
    position: relative;
}

.landing-sections h2,
.landing-sections h3,
.landing-sections p {
    margin: 0;
    padding: 0;
    color: inherit;
    font-family: "Montserrat SemiBold", "Montserrat", sans-serif;
}
.landing-sections p { font-family: var(--font-stack); }

.landing-sections .updates-block {
    padding-top: 96px;
    padding-bottom: 64px;
}

.landing-sections .whats-new {
    display: block;
    text-align: center;
    font-family: var(--font-label);
    font-weight: 800;
    font-size: 14px;
    line-height: 21px;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--orange);
    margin-bottom: 18px;
}

.landing-sections .section-headline {
    text-align: center;
    font-family: "Montserrat SemiBold", "Montserrat", sans-serif;
    font-weight: 600;
    font-size: clamp(28px, 4vw, 40px);
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--text);
    margin: 0 auto 40px;
    max-width: 800px;
}

.landing-sections .updates-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 16px;
    max-width: 1100px;
    margin: 0 auto;
}

.landing-sections .update-card {
    border-radius: var(--radius);
    padding: 24px;
    color: #fff;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 16px;
    min-height: 180px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.landing-sections .update-card-1 { grid-column: 1; grid-row: 1 / 3; }
.landing-sections .update-card-2 { grid-column: 2; grid-row: 1; }
.landing-sections .update-card-3 { grid-column: 3; grid-row: 1; }
.landing-sections .update-card-4 { grid-column: 4; grid-row: 1; }
.landing-sections .update-card-5 { grid-column: 2 / 4; grid-row: 2; }
.landing-sections .update-card-6 { grid-column: 4; grid-row: 2; }

/* Card 6 (5x) sits alone on the bottom row, no peer to top-align with —
   center its icon+text group vertically for a balanced look. */
.landing-sections .update-card-6 { justify-content: center; }

.landing-sections .is-claude {
    background:
        radial-gradient(circle 200px at 78% 38%, rgba(255, 90, 1, 0.85) 0%, transparent 100%),
        radial-gradient(circle 300px at 28% 32%, rgba(255, 121, 4, 0.65) 0%, transparent 100%),
        radial-gradient(circle 280px at 65% 95%, rgba(255, 121, 4, 0.55) 0%, transparent 100%),
        linear-gradient(170deg, #FFECDE 0%, #FFB270 35%, #FF8830 70%, #FF6010 100%);
    border-radius: 12px;
    align-items: center;
    text-align: center;
    justify-content: center;
    gap: 14px;
}
.landing-sections .is-claude .update-card-title {
    font-family: "Montserrat Bold", "Montserrat", sans-serif;
    font-weight: 800;
    font-size: 24px;
    line-height: 1.15;
    margin: 0;
}
.landing-sections .is-responsive {
    background:
        radial-gradient(ellipse 90% 70% at 50% 100%, rgba(14, 82, 46, 0.7) 0%, transparent 75%),
        linear-gradient(160deg, #1A8359 0%, #147951 55%, #0E5A3A 100%);
    border-radius: 12px;
}
.landing-sections .is-markdown   { background: linear-gradient(160deg, #4A2A8C 0%, #2D175A 100%); }
.landing-sections .is-terminal {
    background:
        radial-gradient(circle 200px at 78% 38%, rgba(255, 90, 1, 0.85) 0%, transparent 100%),
        radial-gradient(circle 300px at 28% 32%, rgba(255, 121, 4, 0.65) 0%, transparent 100%),
        radial-gradient(circle 280px at 65% 95%, rgba(255, 121, 4, 0.55) 0%, transparent 100%),
        linear-gradient(170deg, #FFECDE 0%, #FFB270 35%, #FF8830 70%, #FF6010 100%);
    border-radius: 12px;
}
.landing-sections .is-design {
    background:
        radial-gradient(ellipse 50% 90% at 78% 50%, rgba(0, 109, 234, 0.45) 0%, transparent 70%),
        radial-gradient(circle 500px at 25% 35%, rgba(9, 41, 152, 0.65) 0%, transparent 65%),
        radial-gradient(circle 700px at 60% 60%, rgba(1, 91, 214, 0.55) 0%, transparent 70%),
        linear-gradient(125deg, #1A3FA8 0%, #015BD6 55%, #1976D2 100%);
    border-radius: 12px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    gap: 20px;
    padding: 22px 28px;
}
.landing-sections .is-design .update-card-title {
    font-family: "Montserrat SemiBold", "Montserrat", sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 1.2;
    margin: 0 0 6px;
}
.landing-sections .is-design .update-card-desc {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.92);
    margin: 0;
}
.landing-sections .is-fast {
    background:
        radial-gradient(ellipse 90% 70% at 50% 100%, rgba(14, 82, 46, 0.7) 0%, transparent 75%),
        linear-gradient(160deg, #1A8359 0%, #147951 55%, #0E5A3A 100%);
    border-radius: 12px;
}

.landing-sections .update-card-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.landing-sections .update-card-icon img,
.landing-sections .update-card-icon svg {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    display: block;
}
/* Hero icons (Claude burst, Design Mode pen) — intentionally large */
.landing-sections .update-card-1 .update-card-icon { width: 130px; height: 130px; }
.landing-sections .update-card-5 .update-card-icon {
    width: 170px;
    height: auto;
    flex-shrink: 0;
    /* Pin the icon to the card's top-right corner — overrides the card's
       28px/22px padding so the pen nib (top-right of the SVG art) ends up
       flush against the card's edge instead of inset by the padding box.
       Card already has `overflow: hidden` + 12px border-radius so the icon
       still respects the rounded corner. */
    position: absolute;
    top: 0;
    right: 0;
    align-self: auto;
}
.landing-sections .is-design { position: relative; }

/* Peer icons (Responsive, Markdown, Terminal, 5x) — uniform 56px height,
   auto width so each glyph keeps its natural aspect ratio while reading
   as the same visual weight across the row. */
.landing-sections .update-card-2 .update-card-icon,
.landing-sections .update-card-3 .update-card-icon,
.landing-sections .update-card-4 .update-card-icon,
.landing-sections .update-card-6 .update-card-icon {
    width: auto;
    height: 56px;
    align-self: flex-start;
}
/* Force the inner <img> to fill the container height — the base
   .update-card-icon img rule uses max-height/auto, which keeps icons
   smaller than their box (e.g. 5x is naturally 66x43, would only render
   43px tall and look smaller than its peers). */
.landing-sections .update-card-2 .update-card-icon img,
.landing-sections .update-card-3 .update-card-icon img,
.landing-sections .update-card-4 .update-card-icon img,
.landing-sections .update-card-6 .update-card-icon img {
    height: 100%;
    width: auto;
    max-height: none;
    max-width: none;
}

.landing-sections .update-card-title {
    font-family: "Montserrat SemiBold", "Montserrat", sans-serif;
    font-weight: 700;
    font-size: 19px;
    line-height: 1.25;
    margin: 0 0 6px;
    color: #fff;
}
.landing-sections .update-card-desc {
    font-size: 13px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.82);
    margin: 0 0 4px;
}
.landing-sections .update-card-desc strong { font-weight: 700; color: #fff; }

.landing-sections .claude-block {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 64px;
    align-items: center;
}

.landing-sections .claude-text h2,
.landing-sections .edit-text h2,
.landing-sections .language-text h2 {
    font-family: "Montserrat SemiBold", "Montserrat", sans-serif;
    font-weight: 600;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: #fff;
    margin: 0 0 24px;
}
.landing-sections .claude-text p,
.landing-sections .edit-text p,
.landing-sections .language-text p {
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0 0 32px;
    max-width: 480px;
}

.landing-sections .pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    background: #fff;
    color: #111;
    border-radius: 14px;
    font-family: var(--font-stack);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    border: 1px solid rgba(0, 0, 0, 0.12);
    transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}
.landing-sections .pill-btn:hover {
    transform: translateY(-1px);
    color: #111;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
.landing-sections .arrow-icon {
    display: inline-block;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: contain;
            mask-size: contain;
}
.landing-sections .arrow-right {
    -webkit-mask-image: url('../assets/images/icon-arrow-right.svg');
            mask-image: url('../assets/images/icon-arrow-right.svg');
}
.landing-sections .arrow-up-right {
    -webkit-mask-image: url('../assets/images/icon-arrow-up-right.svg');
            mask-image: url('../assets/images/icon-arrow-up-right.svg');
}
.landing-sections .pill-btn-orange {
    background: var(--orange);
    color: #fff;
    border-color: transparent;
}
.landing-sections .pill-btn-orange:hover { color: #fff; background: #E37810; }

.landing-sections .markdown-image {
    background: #fff;
    border-radius: var(--radius);
    aspect-ratio: 720 / 537;
}
.landing-sections .markdown-image img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: var(--radius);
    object-fit: cover;
    object-position: 0% 50%;
}
/* Claude-image uses the same standardized aspect ratio as edit-image so
   both panels share the same visual footprint. Dark bg since the AI
   poster is a dark-themed editor screenshot. */
.landing-sections .claude-image {
    background: #1a1a1a;
    border-radius: var(--radius);
    aspect-ratio: 720 / 537;
}
.landing-sections .claude-image img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: var(--radius);
    object-fit: fill;
}
.landing-sections .claude-image video {
    object-fit: contain;
    background: #1a1a1a;
}
/* Edit-image is locked to the same aspect ratio as md-editor.png (720×537)
   so both image panels share the same visual footprint. Content that
   doesn't fill the box is letter-boxed against a white background. */
.landing-sections .edit-image {
    background: #fff;
    border-radius: var(--radius);
    aspect-ratio: 720 / 537;
}
.landing-sections .edit-image img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: var(--radius);
    object-fit: contain;
}
.landing-sections .edit-image video {
    object-fit: contain;
    background: #fff;
}
/* Hover-to-play video overlays. The IMAGE stays in normal flow at all
   times and drives the wrapper height — this prevents the layout-shift
   flicker that would occur if swapping between elements with different
   aspect ratios. The video sits absolutely on top and fades in on hover. */
.landing-sections .claude-image,
.landing-sections .edit-image,
.landing-sections .markdown-image,
.landing-sections .photos-image {
    position: relative;
    overflow: hidden;
    min-width: 0; /* prevent grid blowout from intrinsic image size */
}
.landing-sections .claude-image video,
.landing-sections .edit-image video,
.landing-sections .markdown-image video,
.landing-sections .photos-image video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--radius);
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.landing-sections .markdown-image video {
    object-position: 10% 50%;
}
.landing-sections .claude-image video {
    object-fit: fill;
}
.landing-sections .claude-image video.is-active,
.landing-sections .edit-image video.is-active,
.landing-sections .markdown-image video.is-active,
.landing-sections .photos-image video.is-active {
    opacity: 1;
    pointer-events: auto;
}

.landing-sections .edit-block {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 64px;
    align-items: center;
}
.landing-sections .edit-text h2 em {
    font-family: "Caveat", "Brush Script MT", cursive;
    font-style: normal;
    color: var(--orange);
    font-weight: 700;
    font-size: 1.2em;
    line-height: 1;
    letter-spacing: 0;
    display: inline-block;
    padding-top: 4px;
}

.landing-sections .pro-section-header {
    text-align: center;
    padding: 0;
}
.landing-sections .pro-section-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-label);
    font-weight: 800;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    color: transparent;
    -webkit-text-fill-color: transparent;
    background: linear-gradient(45deg, rgb(255, 140, 66), orange, rgb(255, 204, 112), gold) text;
    -webkit-background-clip: text;
    background-clip: text;
}
.landing-sections .pro-section-label .fa-feather {
    font-size: 16px;
}

.landing-sections .eyebrow-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 20px;
    color: var(--orange);
    font-family: var(--font-label);
    font-weight: 800;
    font-size: 13px;
    line-height: 1;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.landing-sections .eyebrow-icon {
    display: inline-block;
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    background-color: currentColor;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: contain;
            mask-size: contain;
}
.landing-sections .eyebrow-icon-design {
    -webkit-mask-image: url('../assets/images/icon-design-pen.svg');
            mask-image: url('../assets/images/icon-design-pen.svg');
}
.landing-sections .eyebrow-icon-markdown {
    /* icon-markdown.svg has a wider 100x60 aspect — bump width so the M↓ logo
       doesn't shrink inside a 14×14 square via mask-size: contain. */
    width: 22px;
    height: 14px;
    -webkit-mask-image: url('../assets/images/icon-markdown.svg');
            mask-image: url('../assets/images/icon-markdown.svg');
}
.landing-sections .eyebrow-icon-claude {
    /* Override base .eyebrow-icon mask + currentColor — this variant is a colored chip */
    -webkit-mask-image: none;
            mask-image: none;
    width: 18px;
    height: 18px;
    background-color: #D97757; /* Claude brand orange */
    border-radius: 5px;
    position: relative;
}
.landing-sections .eyebrow-icon-claude::before {
    content: '';
    position: absolute;
    inset: 3px;
    background-color: #fff;
    -webkit-mask-image: url('../assets/images/icon-claude-burst.svg');
            mask-image: url('../assets/images/icon-claude-burst.svg');
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: contain;
            mask-size: contain;
}
.landing-sections .pro-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    max-width: 480px;
}
.landing-sections .pro-badge {
    background: linear-gradient(90deg, #FAAA47 0%, #FA1801 100%);
    color: #fff !important;
    font-weight: 700;
    font-size: 12px;
    padding: 4px 12px;
    border-radius: 7px;
    letter-spacing: 0.01em;
    text-decoration: none;
    display: inline-block;
    line-height: 1.25;
    border: none;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 2px 6px rgba(0, 0, 0, 0.28);
}
.landing-sections .pro-badge:hover,
.landing-sections .pro-badge:focus {
    color: #fff !important;
    text-decoration: none;
}
.landing-sections .pro-note {
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.45;
    flex: 1;
    min-width: 220px;
}
.landing-sections .pro-note-link {
    text-decoration: none;
    transition: color 0.15s ease;
}
.landing-sections .pro-note-link:hover,
.landing-sections .pro-note-link:focus {
    color: var(--text);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.landing-sections .language-block {
    display: grid;
    /* Image/video side is wider than the text side — the markdown demo
       video is 16:9 (1920x1080) so it renders quite short for a given
       width. A 1fr / 1.4fr split gives it more horizontal room so it
       reads at a comfortable size next to the taller text panel
       (heading + description + 4 feature tiles + pro row). */
    grid-template-columns: 1fr 1.4fr;
    gap: 64px;
    align-items: center;
}
.landing-sections .language-text h2 em {
    font-style: italic;
    font-weight: 600;
}

/* Allow the hero-gradient-text helper from styles.css to apply inside
   landing-section h2s. The selector in styles.css is scoped to
   .banner-section .brand-text h1, so we re-declare the gradient locally. */
.landing-sections .language-text h2 .hero-gradient-text {
    background: linear-gradient(90deg, #ff8c42 0%, #ffa500 35%, #ffcc70 70%, #ffd700 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.015em;
    padding-bottom: 0.08em;
    display: inline-block;
}

.landing-sections .feature-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 0 0 28px;
    max-width: 480px;
}
.landing-sections .feature-tile {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    padding: 14px 16px;
    font-family: var(--font-stack);
    font-size: 13px;
    line-height: 1.3;
    color: var(--text);
    min-height: 56px;
}
.landing-sections .feature-tile-icon {
    flex-shrink: 0;
    display: inline-block;
    width: 18px;
    height: 18px;
    background-color: var(--orange);
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: contain;
            mask-size: contain;
}
.landing-sections .feature-tile-icon-image {
    -webkit-mask-image: url('../assets/images/icon-image.svg');
            mask-image: url('../assets/images/icon-image.svg');
}
.landing-sections .feature-tile-icon-table {
    -webkit-mask-image: url('../assets/images/icon-table.svg');
            mask-image: url('../assets/images/icon-table.svg');
}
.landing-sections .feature-tile-icon-book {
    -webkit-mask-image: url('../assets/images/icon-book.svg');
            mask-image: url('../assets/images/icon-book.svg');
}
.landing-sections .feature-tile-icon-pdf {
    -webkit-mask-image: url('../assets/images/icon-pdf.svg');
            mask-image: url('../assets/images/icon-pdf.svg');
}
.landing-sections .feature-tile-icon-print {
    -webkit-mask-image: url('../assets/images/icon-print.svg');
            mask-image: url('../assets/images/icon-print.svg');
}

.landing-sections .photos-wrap { padding-top: 40px; padding-bottom: 40px; }
.landing-sections .photos-block {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 40px;
    align-items: center;
    background: #1a1a1a;
    border-radius: var(--radius);
    padding: 40px 0 40px 48px;
    border: 1px solid var(--card-border);
    overflow: hidden;
}
.landing-sections .photos-text h2 {
    font-family: "Montserrat SemiBold", "Montserrat", sans-serif;
    font-weight: 600;
    font-size: clamp(28px, 3.2vw, 36px);
    line-height: 1.2;
    color: #fff;
    margin: 0 0 20px;
}
.landing-sections .photos-text p {
    font-size: 15px;
    line-height: 1.55;
    color: var(--text-muted);
    margin: 0 0 28px;
    max-width: 460px;
}
.landing-sections .photos-list {
    list-style: none;
    padding: 0;
    margin: 0 0 32px;
}
.landing-sections .photos-list li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 10px;
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.5;
}
.landing-sections .photos-list li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 0.6em;
    width: 5px;
    height: 5px;
    background: var(--text-muted);
    border-radius: 50%;
}
.landing-sections .photos-cta {
    display: inline-flex;
    align-items: center;
    padding: 12px 28px;
    font-size: 15px;
    font-weight: 600;
    font-family: var(--font-stack);
    text-decoration: none;
    border-radius: 8px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}
.landing-sections .photos-cta:hover {
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(250, 24, 1, 0.3);
}
.landing-sections .photos-note {
    display: block;
    margin-top: 12px;
    font-size: 13px;
    color: var(--text-muted);
}
.landing-sections .photos-image {
    overflow: hidden;
    border-radius: 0;
    align-self: stretch;
}
.landing-sections .photos-image img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 0;
    object-fit: cover;
    object-position: left center;
}

.landing-sections .community-block { padding-bottom: 96px; }

.landing-sections .section-eyebrow {
    display: block;
    text-align: center;
    color: var(--orange);
    font-family: "Montserrat SemiBold", "Montserrat", sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.04em;
    margin-bottom: 14px;
}
.landing-sections .community-subtitle {
    text-align: center;
    font-size: 15px;
    color: var(--text-muted);
    max-width: 640px;
    margin: -36px auto 36px;
    line-height: 1.6;
}

.landing-sections .preview-tabs {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 36px;
    flex-wrap: wrap;
}
.landing-sections .preview-tab {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--card-border);
    color: var(--text-muted);
    border-radius: 10px;
    padding: 10px 22px;
    font-family: var(--font-label);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.landing-sections .preview-tab:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}
.landing-sections .preview-tab.is-active {
    background: #2a2a2a;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.2);
}

.landing-sections .live-demo {
    width: 100%;
    max-width: 880px;
    margin: 0 auto 56px;
}
.landing-sections .live-demo img,
.landing-sections .live-demo video {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-lg);
}
.landing-sections .live-demo.hover-to-play {
    position: relative;
}
.landing-sections .live-demo.hover-to-play img {
    display: block;
}
.landing-sections .live-demo.hover-to-play video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    pointer-events: none;
}
.landing-sections .live-demo.hover-to-play:hover img {
    opacity: 0;
}
.landing-sections .live-demo.hover-to-play:hover video {
    opacity: 1;
    pointer-events: auto;
}

/* Tiles carousel wrapper — full-viewport breakout for Apple-style bleed */
.landing-sections .community-tiles-wrapper {
    position: relative;
    max-width: none;
    margin: 0 calc(-50vw + 50%);
}
.landing-sections .community-arrow {
    position: absolute;
    top: var(--arrow-top, 131px);
    transform: translateY(-50%);
    z-index: 2;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(30,30,30,0.8);
    color: #fff;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background 0.2s, opacity 0.3s;
    display: flex !important;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.landing-sections .community-arrow:hover {
    background: rgba(60,60,60,0.9);
}
.landing-sections .community-arrow.is-arrow-hidden {
    opacity: 0;
    pointer-events: none;
}
.landing-sections .community-arrow-left {
    left: max(4px, calc((100vw - 880px) / 2));
}
.landing-sections .community-arrow-right {
    right: clamp(4px, 3vw, 40px);
}

.landing-sections .community-tiles {
    --carousel-inset: max(32px, calc((100vw - 880px) / 2));
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    padding: 0 clamp(20px, 3vw, 40px) 8px var(--carousel-inset);
    scroll-padding-left: var(--carousel-inset);
    scrollbar-width: none;          /* hide scrollbar — arrows replace it */
}
.landing-sections .community-tiles::-webkit-scrollbar {
    display: none;                  /* hide scrollbar — arrows replace it */
}
.landing-sections .community-tile {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease;
    flex: 0 0 275px;
    scroll-snap-align: start;
}
.landing-sections .community-tile:hover {
    text-decoration: none;
    color: inherit;
}
.landing-sections .community-tile-image {
    width: 100%;
    height: 275px;
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 16px;
    line-height: 0;
}
.landing-sections .community-tile-image img {
    width: 100%;
    height: auto;
    display: block;
}
/* Gradient placeholders — square card images capped at 275px */
.landing-sections .community-tile-gradient {
    aspect-ratio: 1 / 1;
    position: relative;
}
/* Screenshot on gradient cards — half card width, offset, clipped by overflow */
.landing-sections .community-tile-gradient img {
    position: absolute;
    top: 10%;
    left: 10%;
    width: 150%;
    height: auto;
    max-width: none;
    display: block;
    border-radius: 8px;
    box-shadow: -2px 2px 16px rgba(0,0,0,0.3);
}
.landing-sections .gradient-intel {
    background: url('../assets/images/gradient-intel.svg') center/cover no-repeat;
}
.landing-sections .gradient-search {
    background: url('../assets/images/gradient-search.svg') center/cover no-repeat;
}
.landing-sections .gradient-search img { width: 120%; }
.landing-sections .gradient-git {
    background: url('../assets/images/gradient-git.svg') center/cover no-repeat;
}
.landing-sections .gradient-git img { width: 120%; }
.landing-sections .gradient-terminal {
    background: url('../assets/images/gradient-terminal.svg') center/cover no-repeat;
}
.landing-sections .gradient-extensions {
    background: url('../assets/images/gradient-extensions.svg') center/cover no-repeat;
}
.landing-sections .community-tile h3 {
    font-family: "Montserrat SemiBold", "Montserrat", sans-serif;
    font-size: 19px;
    font-weight: 700;
    margin: 0 0 8px;
    color: #fff;
}
.landing-sections .community-tile p {
    font-size: 15px;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0 0 12px;
}
.landing-sections .community-tile-learn {
    font-size: 15px;
    color: #fff;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 4px;
    display: inline-block;
}

/* Story text — now lives inside .illustration (white bg) */
.illustration .story-pill {
    display: inline-block;
    background: #fff;
    border: 1px solid rgba(226, 158, 58, 0.71);
    color: var(--orange-amber);
    font-family: "Plus Jakarta Sans", "Montserrat", sans-serif;
    font-weight: 500;
    font-size: 14px;
    padding: 8px 18px;
    border-radius: 999px;
    margin-bottom: 40px;
}

.illustration .story-quote {
    font-family: "Montserrat SemiBold", "Montserrat", sans-serif;
    font-weight: 600;
    font-size: clamp(24px, 3vw, 40px);
    line-height: 1.3;
    max-width: 880px;
    margin: 0 auto 18px;
    color: #1a1a1a;
}
.illustration .story-subtitle {
    max-width: 720px;
    margin: 0 auto 20px;
    color: #555;
    font-size: 16px;
    line-height: 1.6;
}

.illustration .story-link {
    display: inline-block;
    margin-bottom: 20px;
    color: var(--orange-amber);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.2s;
}

.illustration .story-link:hover {
    opacity: 0.8;
    text-decoration: underline;
}

@media (max-width: 1199px) {
    /* No padding override here — let the base 56px apply.
       (Previous value of 80px was a leftover from when the base was 80px.) */
    .landing-sections .claude-block,
    .landing-sections .edit-block,
    .landing-sections .language-block { gap: 56px; }
}

@media (max-width: 991px) {
    .landing-sections .landing-section { padding: 48px 32px; }

    .landing-sections .claude-block,
    .landing-sections .edit-block,
    .landing-sections .language-block {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: left;
    }
    .landing-sections .edit-block .edit-text { order: 1; }
    .landing-sections .edit-block .edit-image { order: 2; }

    /* When the grid collapses to single column, cap the image/video panels
       so they don't stretch to full container width (which makes them
       ungodly large). Centre them below the text. */
    .landing-sections .claude-image,
    .landing-sections .edit-image,
    .landing-sections .markdown-image {
        max-width: 520px;
        margin: 0 auto;
        width: 100%;
    }

    /* The photos-block intentionally stays side-by-side (2-col) at tablet
       widths — its text panel is short enough that collapsing makes the
       image card disproportionately tall. Only tighten gap + padding here. */
    .landing-sections .photos-block {
        gap: 24px;
        padding: 36px 0 36px 28px;
    }

    .landing-sections .community-tile { flex: 0 0 275px; }
    .landing-sections .community-tiles { padding-left: max(32px, calc((100vw - 880px) / 2)); padding-right: 32px; }
    .landing-sections .community-arrow-left  { left: 4px; }
    .landing-sections .community-arrow-right { right: 4px; }

    /* Updates grid keeps its desktop 4-col layout down to 575px (handled below).
       Tighten gaps/padding so the cards still fit comfortably on tablet widths. */
    .landing-sections .updates-grid { gap: 12px; }
    .landing-sections .update-card { padding: 18px; min-height: 160px; gap: 14px; }
    .landing-sections .update-card-1 .update-card-icon { width: 120px; height: 120px; }
    .landing-sections .update-card-5 .update-card-icon { width: 130px; }
    .landing-sections .update-card-2 .update-card-icon,
    .landing-sections .update-card-3 .update-card-icon,
    .landing-sections .update-card-4 .update-card-icon,
    .landing-sections .update-card-6 .update-card-icon { height: 48px; }
    .landing-sections .is-claude .update-card-title { font-size: 20px; }
    .landing-sections .update-card-title { font-size: 16px; }
    .landing-sections .update-card-desc { font-size: 12px; }
    .landing-sections .is-design { padding: 20px; }
    .landing-sections .is-design .update-card-title { font-size: 18px; }
    .landing-sections .is-design .update-card-desc { font-size: 13px; }
}

@media (max-width: 767px) {
    .landing-sections .landing-section { padding: 40px 20px; }
    .landing-sections .claude-text p,
    .landing-sections .edit-text p,
    .landing-sections .language-text p { max-width: 100%; }
    .landing-sections .community-tile { flex: 0 0 275px; }
    .landing-sections .community-tiles { padding-left: 20px; padding-right: 20px; }
    .landing-sections .community-arrow-left  { left: 4px; }
    .landing-sections .community-arrow-right { right: 4px; }
    .landing-sections .photos-block {
        padding: 28px 0 28px 20px;
        gap: 24px;
    }
    .landing-sections .preview-tab { padding: 8px 16px; font-size: 11px; }
}

@media (max-width: 575px) {
    .landing-sections .landing-section { padding: 32px 16px; }
    .landing-sections .feature-tiles { grid-template-columns: 1fr; }
    /* Only collapse the photos-block to single column at true mobile widths.
       Above this it stays side-by-side (see the .photos-block override in
       the 991px breakpoint above). */
    .landing-sections .photos-block {
        grid-template-columns: 1fr;
        gap: 24px;
        text-align: left;
        padding: 28px 20px;
    }
    .landing-sections .photos-image {
        border-radius: var(--radius);
    }
    .landing-sections .photos-image img {
        border-radius: var(--radius);
        height: auto;
        object-fit: initial;
    }
    .landing-sections .updates-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 10px;
    }
    .landing-sections .update-card-1,
    .landing-sections .update-card-2,
    .landing-sections .update-card-3,
    .landing-sections .update-card-4,
    .landing-sections .update-card-5,
    .landing-sections .update-card-6 { grid-column: 1; grid-row: auto; }
    .landing-sections .section-headline { margin-bottom: 36px; }

    /* Compact row-style cards on phones — icon on the left, text on the
       right. Uniform min-height so cards read as a tidy stack regardless
       of description length. */
    .landing-sections .update-card {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        text-align: left;
        gap: 14px;
        padding: 14px 16px;
        min-height: 88px;
    }
    /* Override the Claude card's centered/stacked layout for mobile */
    .landing-sections .is-claude {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        text-align: left;
    }
    .landing-sections .is-claude .update-card-title { font-size: 16px; margin: 0 0 6px; }
    .landing-sections .is-claude .update-card-title br { display: none; }
    /* Design card on mobile: pack icon+text tight to the left (override the
       desktop space-between which would leave a huge gap on narrow cards). */
    .landing-sections .is-design { padding: 14px 16px; justify-content: flex-start; }
    /* HTML order is text-div first then icon-div — `order: -1` on the icon
       puts it visually FIRST (left) at this row-stack breakpoint, so the
       Design card matches the left-icon layout of all the other peer cards.
       Also reset the absolute positioning from the desktop rule so the icon
       sits back in normal flex flow next to the text. */
    .landing-sections .is-design .update-card-icon {
        order: -1;
        position: static;
        top: auto;
        right: auto;
    }

    /* Uniform compact icon SLOT for every card — 56px wide × 44px tall
       gives enough room for the widest natural aspect (responsive devices,
       2.1:1) without making narrower icons feel cramped. */
    .landing-sections .update-card-icon,
    .landing-sections .update-card-1 .update-card-icon,
    .landing-sections .update-card-2 .update-card-icon,
    .landing-sections .update-card-3 .update-card-icon,
    .landing-sections .update-card-4 .update-card-icon,
    .landing-sections .update-card-5 .update-card-icon,
    .landing-sections .update-card-6 .update-card-icon {
        width: 56px;
        height: 44px;
        flex-shrink: 0;
        align-self: center;
    }
    /* Force ALL peer icons (including the cards that earlier rules
       set max-width:none on) to stay inside the slot. object-fit: contain
       scales each glyph to fit while preserving aspect ratio. */
    .landing-sections .update-card-icon img,
    .landing-sections .update-card-1 .update-card-icon img,
    .landing-sections .update-card-2 .update-card-icon img,
    .landing-sections .update-card-3 .update-card-icon img,
    .landing-sections .update-card-4 .update-card-icon img,
    .landing-sections .update-card-5 .update-card-icon img,
    .landing-sections .update-card-6 .update-card-icon img {
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        object-fit: contain;
        object-position: center;
    }

    /* Tighten body text so long descriptions (like Claude's) don't
       balloon to 4 lines on a 360px viewport. */
    .landing-sections .update-card-title { font-size: 15px; line-height: 1.2; }
    .landing-sections .update-card-desc  { font-size: 12px; line-height: 1.35; }
    .landing-sections .is-design .update-card-title { font-size: 15px; }
    .landing-sections .is-design .update-card-desc  { font-size: 12px; }
}