/* Mobile and tablet layout. Desktop composition remains in landing.css. */
@media (max-width: 980px) {
    :root {
        --page-gutter: clamp(20px, 4.8vw, 32px);
        --section-gap: clamp(56px, 9vw, 80px);
        scroll-padding-top: 88px;
    }
    body.mobile-nav-open { overflow: hidden; }
    main, main > section, .section-shell, .hero-copy, .experience-steps,
    .exchange-copy, .pricing-copy, .pricing-options, .faq-intro, .faq-list { min-width: 0; }
    .section-shell, .nav-wrap { width: 100%; padding-inline: var(--page-gutter); }
    .section-space, .experience { padding-block: var(--section-gap); }
    .eyebrow { font-size: 10px; line-height: 1.7; letter-spacing: .07em; }

    /* The full menu also applies to tablets where the desktop links cannot fit. */
    .site-header { min-height: 72px; background: var(--dark); border-bottom: 1px solid #35413a; isolation: isolate; }
    .nav-wrap { min-height: 72px; position: relative; display: flex; flex-wrap: nowrap; gap: 16px; }
    .brand { font-size: 22px; gap: 9px; }
    .brand-mark { width: 34px; height: 34px; font-size: 26px; }
    .js .menu-toggle { display: flex; flex: 0 0 46px; width: 46px; height: 46px; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: transparent; border: 1px solid #536058; color: var(--paper); cursor: pointer; }
    .menu-toggle > span { width: 18px; height: 1px; background: currentColor; transition: transform 240ms ease; }
    .menu-toggle[aria-expanded="true"] { border-color: var(--lime); color: var(--lime); }
    .menu-toggle[aria-expanded="true"] > span:first-child { transform: translateY(3.5px) rotate(45deg); }
    .menu-toggle[aria-expanded="true"] > span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
    .nav-links, .nav-links.is-open, .js .nav-links:not(.is-open) {
        display: flex; flex-direction: column; align-items: stretch; gap: 0;
        position: fixed; inset: 72px 0 0; height: calc(100dvh - 72px); width: auto; max-height: none;
        margin: 0; padding: 28px var(--page-gutter) max(28px, env(safe-area-inset-bottom));
        overflow-y: auto; overscroll-behavior: contain; background: var(--dark); color: var(--paper);
        border: 0; box-shadow: none; counter-reset: nav-section;
        opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-12px);
        transition: opacity 240ms ease, transform 280ms cubic-bezier(.22, 1, .36, 1), visibility 280ms;
    }
    .nav-links.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
    .nav-mobile-note { display: block; flex-shrink: 0; margin: 0 0 22px; font: 10px/1.8 Menlo, ui-monospace, monospace; letter-spacing: .07em; text-transform: uppercase; color: var(--light-muted); }
    .nav-links > a { display: flex; align-items: center; flex-shrink: 0; border-radius: 0; }
    .nav-links > a[href^="#"] { counter-increment: nav-section; min-height: 64px; padding: 16px 0; gap: 20px; border: 0; border-top: 1px solid #35413a; font-size: clamp(20px, 4vw, 28px); line-height: 1.3; letter-spacing: -.04em; }
    .nav-links > a[href^="#"]::before { content: counter(nav-section, decimal-leading-zero); color: var(--light-muted); font: 10px/1.5 Menlo, ui-monospace, monospace; letter-spacing: 0; }
    .nav-links > .nav-trial, .nav-links > .nav-signin { display: flex; justify-content: space-between; gap: 20px; min-height: 54px; padding: 16px 18px; font-size: 14px; }
    .nav-links > .nav-trial { margin-top: 28px; border: 1px solid var(--lime); background: var(--lime); color: var(--ink); }
    .nav-links > .nav-trial:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); }
    .nav-links > .nav-signin { margin-top: 12px; border: 1px solid #536058; background: transparent; color: var(--paper); }
    .nav-links > .nav-signin:hover { background: #142018; border-color: var(--lime); }
    .nav-links > .nav-signin .icon { color: var(--lime); }
    .nav-mobile-footer { margin: 22px 0 0; text-transform: none; letter-spacing: 0; }
    .site-header :focus-visible { outline-color: var(--lime); }
    .no-js .nav-links { position: static; flex-basis: 100%; height: auto; opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
    .no-js .nav-wrap { flex-wrap: wrap; padding-top: 18px; }

    /* Give the illustration its own space so it never sits behind the copy. */
    .hero { display: flex; flex-direction: column; align-items: stretch; min-height: 0; padding: 44px 0 0; }
    .hero-inner { order: 0; min-height: 0; padding-top: 0; }
    .hero-copy { width: 100%; max-width: 620px; }
    .hero h1 { max-width: none; font-size: clamp(42px, 10.8vw, 76px); line-height: 1.04; letter-spacing: -.06em; margin: 22px 0; }
    .hero .eyebrow { max-width: none; font-size: 10px; line-height: 1.7; }
    .hero-lede { max-width: 40ch; color: #dbe4eb; font-size: 16px; line-height: 1.7; }
    .hero-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; max-width: 480px; gap: 12px; margin-top: 28px; }
    .hero-actions .button { min-width: 0; width: 100%; min-height: 54px; padding: 15px 16px; font-size: 14px; gap: 12px; }
    .hero-actions .icon { width: 20px; height: 20px; flex-shrink: 0; }
    .hero-background { position: relative; inset: auto; order: 1; height: clamp(230px, 42vw, 330px); width: 100%; margin-top: 28px; }
    .hero-background::after { background: linear-gradient(180deg, #030d16, transparent 25%, transparent 80%, #030d16); }
    .hero-atmosphere { inset: 0; }
    .hero-grid { inset: 0; background-size: 80px 80px; opacity: .55; }
    .hero-composition { top: 50%; left: 50%; width: clamp(280px, 65vw, 410px); opacity: 1; transform: translate(-50%, -50%); }
    .hero-motion-toggle { bottom: 16px; right: var(--page-gutter); width: 44px; height: 44px; }
    .capability-strip > .section-shell { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; padding-block: 16px; gap: 8px; overflow: visible; font-size: 9px; line-height: 1.6; }
    .capability-strip span { white-space: normal; }

    .feature-grid, .experience-grid, .exchange, .audiences, .nfc-teaser, .pricing, .faq, .closing { grid-template-columns: minmax(0, 1fr); }
    .section-heading { margin-bottom: 28px; }
    .section-heading h2, .experience h2, .exchange h2, .nfc-copy h2, .pricing h2, .faq h2 { font-size: clamp(34px, 7.8vw, 52px); line-height: 1.12; letter-spacing: -.05em; }
    .section-heading h2 br { display: none; }
    .section-heading h2 span { display: block; margin-top: 8px; }
    .feature-card { min-height: 0; padding: 28px; border-right: 0; border-bottom: 1px solid var(--ink); }
    .feature-card:last-child { border-bottom: 0; }
    .feature-top { margin-bottom: 28px; }
    .feature-card h3 { max-width: none; font-size: 32px; line-height: 1.15; margin-bottom: 18px; }
    .feature-card > p { max-width: 44ch; font-size: 15px; line-height: 1.75; }
    .experience-grid, .exchange, .nfc-teaser, .pricing, .faq { gap: 32px; }
    .experience-copy > p:not(.eyebrow), .exchange-copy > p:not(.eyebrow), .nfc-copy > p:not(.eyebrow), .pricing-copy > p:not(.eyebrow) { max-width: 44ch; margin-block: 22px; font-size: 16px; line-height: 1.75; }
    .text-link { display: inline-flex; min-height: 44px; align-items: center; font-size: 14px; }
    .experience-steps > article { grid-template-columns: 24px minmax(0, 1fr); gap: 12px; padding: 22px 18px; }
    .experience-steps h3 { font-size: 20px; line-height: 1.4; }
    .experience-steps p { font-size: 14px; line-height: 1.7; }
    .profile-link-sample { min-width: 0; padding: 24px 18px; }
    .profile-link-heading { align-items: flex-start; gap: 12px; font-size: 10px; line-height: 1.6; }
    .profile-link-heading .icon { flex-shrink: 0; }
    .profile-link-sample code { display: block; font-size: clamp(16px, 4.5vw, 24px); line-height: 1.5; overflow-wrap: anywhere; margin-block: 16px 10px; }
    .profile-link-sample small { font-size: 10px; line-height: 1.7; }
    .exchange-copy { order: -1; }
    .plain-list > li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; padding-block: 16px; font-size: 14px; line-height: 1.65; }
    .exchange-visual { min-width: 0; padding: 22px 16px; }
    .exchange-visual-head { font-size: 10px; padding-bottom: 16px; }
    .exchange-diagram { height: clamp(310px, 76vw, 380px); max-width: 480px; }
    .exchange-note { width: 82%; height: auto; min-height: 112px; padding: 14px; }
    .exchange-note-body { gap: 10px; margin-top: 12px; }
    .exchange-note-body .note-initial { flex-shrink: 0; width: 30px; height: 30px; font-size: 16px; }
    .exchange-note-body strong { min-width: 0; font-size: 14px; line-height: 1.45; }
    .exchange-note-top small { font-size: 9px; }
    .exchange-data-lines { margin: 12px 0 0 40px; }
    .exchange-flow-labels > span { top: 46%; max-width: 74px; font-size: 8px; }

    .audiences { padding-inline: 0; }
    .audience-panel { min-height: 0; padding: 48px var(--page-gutter); }
    .audience-panel h2 { max-width: none; font-size: clamp(42px, 9.8vw, 60px); line-height: 1.08; }
    .audience-panel > p:not(.eyebrow) { max-width: 44ch; margin-block: 24px; font-size: 16px; line-height: 1.75; }
    .audience-panel .panel-link { width: 100%; min-height: 58px; margin-top: 12px; padding-top: 18px; gap: 16px; font-size: 14px; line-height: 1.6; }
    .team-demo { width: 100%; margin-block: 28px; }
    .team-demo > div { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; padding-block: 16px; }
    .team-demo > div > span:first-child { width: 36px; height: 36px; }
    .team-demo p { font-size: 14px; overflow-wrap: anywhere; }
    .team-demo p > small { font-size: 11px; line-height: 1.6; }
    .nfc-teaser { margin-top: 0; padding: var(--section-gap) var(--page-gutter); }
    .nfc-concept { justify-self: center; width: min(100%, 400px); padding: 16px 14px 0; }
    .nfc-card { padding: 22px; transform: perspective(900px) rotateX(4deg) rotateY(-6deg) rotateZ(-4deg); }
    .nfc-card-bottom > span { font-size: 22px; }
    .nfc-card-bottom small { font-size: 8px; letter-spacing: .06em; }
    .nfc-concept figcaption { margin-top: 28px; font-size: 11px; line-height: 1.6; }
    .coming-soon-label { max-width: 100%; white-space: normal; font-size: 10px; line-height: 1.6; }

    .pricing h2 { margin-block: 20px; }
    .pricing-steps { margin-top: 28px; }
    .pricing-steps > div { padding-block: 18px; }
    .pricing-steps dd { font-size: 14px; line-height: 1.75; }
    .pricing-card { padding: 26px 22px; }
    .pricing-card-top { gap: 14px; }
    .pricing-card h3 { font-size: 17px; }
    .pricing-trial { font-size: 10px; padding: 8px 10px; }
    .pricing-price { margin-top: 28px; font-size: clamp(64px, 16vw, 88px); }
    .pricing-features { margin-block: 24px; }
    .pricing-features li { font-size: 14px; padding-block: 14px; }
    .pricing .pricing-cta { min-height: 56px; padding: 16px 14px; font-size: 13px; gap: 12px; }
    .pricing-cta .icon { flex-shrink: 0; }
    .pricing-note { font-size: 12px; line-height: 1.8; }
    .pricing-enterprise { flex-wrap: wrap; gap: 16px; padding-block: 22px; }
    .faq-intro > p:last-child { margin-top: 18px; font-size: 15px; line-height: 1.7; }
    .faq-list summary { min-height: 68px; padding: 18px 14px; gap: 16px; font-size: 15px; line-height: 1.6; }
    .faq-list summary > span { flex-shrink: 0; }
    .faq-list details > p { max-width: none; padding: 0 38px 22px 14px; font-size: 14px; line-height: 1.8; }
    .closing { padding-inline: 0; }
    .closing > div { padding: 44px var(--page-gutter); }
    .closing h2 { font-size: clamp(36px, 8.5vw, 54px); line-height: 1.12; }
    .closing > a { min-height: 112px; padding: 26px var(--page-gutter); border-left: 0; border-top: 1px solid var(--ink); font-size: 34px; line-height: 1.15; gap: 20px; }
    .closing > a .icon { flex-shrink: 0; width: 36px; height: 36px; }
    .site-footer { margin-top: 0; padding-block: 40px max(24px, env(safe-area-inset-bottom)); }
    .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding-bottom: 28px; }
    .footer-top > p { grid-column: 1 / -1; font-size: 26px; }
    .footer-top nav, .footer-links { min-width: 0; border-top: 1px solid #35413a; padding-top: 12px; gap: 2px; }
    .footer-top a { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; }
    .footer-wordmark { min-width: 0; font-size: clamp(40px, 12.5vw, 100px); padding-block: 24px 30px; gap: 12px; line-height: 1.2; }
    .footer-wordmark > span { flex-shrink: 0; }
    .footer-bottom { flex-wrap: wrap; gap: 8px 20px; padding-top: 20px; font-size: 10px; line-height: 1.7; }
}
@media (max-width: 480px) {
    .hero-actions { grid-template-columns: minmax(0, 1fr); }
    .feature-card { padding: 26px 22px; }
    .pricing-card-top { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 359px) {
    :root { --page-gutter: 18px; }
    .hero h1 { font-size: 40px; }
    .exchange-note { width: 88%; padding: 12px; }
    .exchange-note-body strong { font-size: 12px; }
    .nfc-card { padding: 18px; }
    .nfc-card-bottom > span { font-size: 20px; }
    .pricing-card { padding-inline: 18px; }
    .footer-wordmark { font-size: 38px; }
}