/* ==========================================================================
   Metadata 2.0 — marketing page
   Converted from the "Metadata app website redesign" Claude Design project.
   The source was a design-canvas component (x-dc / sc-if / {{ }} bindings) with
   every rule inline and no media queries at all; this is the same visual design
   expressed as classes, with a fluid type scale and breakpoints added so it
   holds up below desktop width.
   Props baked to their defaults: accent #0A84FF, "Black titanium" bezel.
   Scoped under .metadata-v2-page. Loaded after smudge.css / menu.css / dark.css.
   ========================================================================== */

/* ---------- tokens ---------- */
.metadata-v2-page {
    --mv-bg:      #000000;
    --mv-text:    #f5f5f7;
    --mv-dim:     #d2d2d7;
    --mv-muted:   #a1a1a6;
    --mv-faint:   #86868b;
    --mv-fainter: #6e6e73;
    --mv-accent:  #0A84FF;
    --mv-surface: #0d0d0f;
    --mv-line:    rgba(255, 255, 255, .08);
    /* flat, not a gradient — the earlier diagonal sheen read as soft/washed-out
       against the page's pure black. A solid graphite reads as a bolder, more
       deliberate case colour, closer to Apple's own Space Black finish. */
    --mv-bezel:   #2c2c2e;

    --mv-max:  1180px;
    --mv-pad:  clamp(20px, 4vw, 24px);
    --mv-sect: clamp(72px, 11vw, 120px);

    --mv-ui: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* ---------- resets that neutralise smudge.css globals ---------- */
/* smudge.css sets `img { width:100%; max-width:100% }` — without height:auto
   every image with a height attribute distorts. Logged twice as P1 in design-qa.md. */
.metadata-v2-page .mv-main img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

.metadata-v2-page *,
.metadata-v2-page *::before,
.metadata-v2-page *::after { box-sizing: border-box; }

/* the shared hamburger is 24px + 2x10px padding = 44px ONLY under content-box */
.metadata-v2-page #menu_menu_item,
.metadata-v2-page .menu_close { box-sizing: content-box; }

body.metadata-v2-page {
    background: var(--mv-bg);
    color: var(--mv-text);
    font-family: var(--mv-ui);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-wrap: pretty;
}

.metadata-v2-page .mv-main {
    margin-top: 50px;              /* clears the 50px fixed menu bar */
    overflow-x: clip;
    overflow-y: visible;
    background: var(--mv-bg);
}

.metadata-v2-page .mv-main p { margin: 0; font-size: clamp(15px, 1.1vw + 11px, 17px); line-height: 1.55; }
.metadata-v2-page .mv-main h1,
.metadata-v2-page .mv-main h2,
.metadata-v2-page .mv-main h3 { margin: 0; font-weight: 600; color: #fff; }
.metadata-v2-page .mv-main h2 {
    font-size: clamp(32px, 4.6vw, 62px);
    line-height: 1.05;
    letter-spacing: -.035em;
    text-wrap: balance;
}
.metadata-v2-page .mv-main h3 {
    font-size: clamp(17px, 1vw + 13px, 19px);
    line-height: 1.3;
    letter-spacing: -.01em;
}
.metadata-v2-page .mv-main ul,
.metadata-v2-page .mv-main dl { list-style: none; margin: 0; padding: 0; }

.metadata-v2-page .mv-wrap {
    width: min(100% - (var(--mv-pad) * 2), var(--mv-max));
    margin-inline: auto;
}
.metadata-v2-page .mv-center { text-align: center; }
.metadata-v2-page .mv-narrow { max-width: 780px; }

.metadata-v2-page .mv-visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.metadata-v2-page .mv-kicker {
    font-size: 15px !important;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--mv-accent);
    margin: 0 0 14px !important;
}
/* shield-and-padlock mark above the Privacy section's kicker. Sized in a
   glass-tinted circle so it reads as a small badge rather than a bare icon,
   matching the weight of the download button's circled arrow elsewhere. */
.metadata-v2-page .mv-privacy-icon {
    display: block;
    width: 36px;
    height: 36px;
    margin: 0 auto 20px;
    padding: 12px;
    box-sizing: content-box;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03));
    border: 1px solid var(--mv-line);
    color: var(--mv-text);
}
.metadata-v2-page .mv-lede {
    margin: 24px auto 0 !important;
    max-width: 640px;
    font-size: clamp(16px, 1.2vw + 12px, 20px) !important;
    line-height: 1.5;
    color: var(--mv-muted);
}
.metadata-v2-page .mv-center .mv-lede { margin-inline: auto !important; }

.metadata-v2-page .mv-textlink { color: var(--mv-accent); text-decoration: none; font-size: 17px; }
.metadata-v2-page .mv-textlink:hover { color: #7ab8ff; }

.metadata-v2-page a:focus-visible,
.metadata-v2-page button:focus-visible {
    outline: 2px solid var(--mv-accent);
    outline-offset: 4px;
    border-radius: 8px;
}

/* ---------- buttons ---------- */
.metadata-v2-page .mv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    /* tightened from the design's original 15px/32px — the icon and its gap add
       26px of content, so the original padding left the button over-inflated */
    padding: 12px 22px;
    border-radius: 999px;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -.01em;
    text-decoration: none;
    text-align: center;
    transition: transform .22s cubic-bezier(.2, .7, .2, 1),
                box-shadow .22s ease,
                filter .22s ease;
}
/* 18px against 18px text — sits level with the cap height without towering */
.metadata-v2-page .mv-btn-icon { flex: 0 0 auto; width: 18px; height: 18px; }
/* only the arrow moves — the circle stays put, so the arrow reads as dropping
   into it. Slight overshoot on the curve gives it a bit of spring. */
.metadata-v2-page .mv-btn-icon path {
    transition: transform .3s cubic-bezier(.34, 1.4, .5, 1);
}

/* Both labels sit in the markup and are swapped by `display`, deliberately
   rather than by an aria-label: `display: none` drops the hidden one from the
   accessibility tree, so the button's accessible name always equals the text
   actually on screen. An aria-label of the long name over the short visible
   label would break WCAG 2.5.3 Label in Name for voice control, since
   "Download on the App Store" does not contain "Download App". */
.metadata-v2-page .mv-btn-label-short { display: none; }

.metadata-v2-page .mv-btn--primary {
    background: var(--mv-accent);
    color: #fff;
    box-shadow: 0 2px 10px rgba(10, 132, 255, .26);
}
.metadata-v2-page .mv-btn--primary:hover {
    color: #fff;
    filter: brightness(1.08);
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(10, 132, 255, .42);
}
.metadata-v2-page .mv-btn:hover .mv-btn-icon path { transform: translateY(1.6px); }

/* press state — settles back down and compresses slightly */
.metadata-v2-page .mv-btn--primary:active {
    transform: translateY(0) scale(.985);
    box-shadow: 0 3px 12px rgba(10, 132, 255, .3);
    transition-duration: .08s;
}

/* ---------- device frames ---------- */
.metadata-v2-page .mv-device {
    margin: 0;
    padding: var(--pad, 10px);
    border-radius: var(--r, 52px);
    background: var(--mv-bezel);
    box-shadow: 0 50px 110px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(255, 255, 255, .1);
    flex: 0 0 auto;
}
.metadata-v2-page .mv-device img { border-radius: calc(var(--r, 52px) - var(--pad, 10px) - 1px); background: #000; }
/* Real iPhone case corner radius runs about 14-15% of device width — the
   original 17-18% here rounded off too aggressively and read as a generic
   "app icon" squircle rather than an actual phone. */
.metadata-v2-page .mv-device--xs { width: min(244px, 100%); --pad: 8px;  --r: min(36px, 14.75%); box-shadow: 0 30px 70px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.1); }
.metadata-v2-page .mv-device--sm { width: 258px; --pad: 9px;  --r: 38px; box-shadow: 0 40px 90px rgba(0,0,0,.75), inset 0 0 0 1px rgba(255,255,255,.1); }
.metadata-v2-page .mv-device--md { width: 300px; --pad: 10px; --r: 44px; }
.metadata-v2-page .mv-device--lg { width: 312px; --pad: 10px; --r: 45px; }

/* ==========================================================================
   HERO
   ========================================================================== */
/* Full-bleed cropped band up top (fills the width, like the very first hero),
   with the title block stacked below it in normal flow — never overlaid on
   top of the image, so overlap with the figure is structurally impossible. */
.metadata-v2-page .mv-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 0 clamp(28px, 4vh, 44px);
    overflow: hidden;
    text-align: center;
    background: var(--mv-bg);
}
.metadata-v2-page .mv-hero-band {
    position: relative;
    /* The figure is shown uncropped, so its height is purely a function of its
       width — which makes the WIDTH cap the real height control.
       Phones simply fill the viewport edge-to-edge; the desktop caps live in
       the min-width query below. */
    /* A single fluid formula avoids the visible jump that used to happen at
       600px when sizing switched abruptly from 100vw to a vh-based cap. */
    width: min(100%, 600px); /* fallback for browsers without svh units */
    width: min(100%, 600px, calc(82svh * 1.0839));
    aspect-ratio: 2559 / 2361;
    margin-inline: auto;
    overflow: hidden;
}
.metadata-v2-page .mv-hero-band img.mv-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100% !important;
    height: 100% !important;
    /* contain, not cover — the band's aspect-ratio already matches the source
       exactly, so this only guards against sub-pixel rounding clipping the
       character's hat or elbows */
    object-fit: contain;
    /* The artwork's own black is rgb(2,2,2)-(4,4,4), not the page's pure black,
       so once the figure stopped being full-bleed its edges showed as a faint
       lighter rectangle. Feathering the four edges hides the seam. The top fade
       is the shallowest of the four because the beanie starts at ~4% of the
       image height and must not be touched. */
    -webkit-mask-image:
        linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%),
        linear-gradient(to bottom, transparent 0, #000 2.5%, #000 97%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%),
        linear-gradient(to bottom, transparent 0, #000 2.5%, #000 97%, transparent 100%);
    mask-composite: intersect;
}
.metadata-v2-page .mv-hero-band-fade {
    position: absolute;
    inset: 0;
    z-index: 1;
    /* starts low: the figure now ends in black cloud, so this only needs to
       melt the final edge into the page rather than dim the camera and hands */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 82%, var(--mv-bg) 100%);
    pointer-events: none;
}
/* The hero itself has no horizontal padding so the image band can run
   edge-to-edge, so the text blocks carry their own gutters. Without this the
   copy touches the viewport edges once it is narrower than its max-width. */
.metadata-v2-page .mv-hero-top,
.metadata-v2-page .mv-hero-bottom {
    width: 100%;
    padding-inline: clamp(24px, 6vw, 40px);
}
.metadata-v2-page .mv-hero-top {
    max-width: 780px;
    margin-top: clamp(28px, 4.5vh, 48px);
}

.metadata-v2-page .mv-hero h1 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .26em;
    font-size: clamp(46px, 8.4vw, 60px);
    line-height: .96;
    font-weight: 700;
    letter-spacing: -.045em;
}
/* sized in em so the icon always tracks the fluid headline */
.metadata-v2-page .mv-hero h1 .mv-title-icon {
    flex: 0 0 auto;
    width: .84em;
    height: .84em;
    border-radius: .2em;
}
.metadata-v2-page .mv-hero-sub {
    margin: 22px auto 0 !important;
    /* 620px let this set as 594px + 176px on a wide screen — a full line and a
       stub. The sentence's only sensible two-line split is after "viewer", and
       470px is the widest box that forces it, giving 341px + 429px.
       Chosen over leaving it at 620px and relying on text-wrap: balance alone,
       so the balanced split also holds in browsers without balance support.
       Binds only above ~518px viewport; narrower screens are already below this
       and are unaffected. */
    max-width: 470px;
    /* the body sets text-wrap: pretty, which only guards against a one-word
       orphan — it would not have rebalanced these two lines. balance keeps the
       split optimal if this copy is ever reworded. */
    text-wrap: balance;
    font-size: clamp(17px, 1.5vw + 12px, 20px) !important;
    line-height: 1.45;
    color: var(--mv-dim);
}

.metadata-v2-page .mv-hero-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    margin-top: clamp(26px, 4vh, 40px);
}
.metadata-v2-page .mv-cta-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin: 0 !important;
}
.metadata-v2-page .mv-fineprint { margin: 0 !important; font-size: 13px !important; color: var(--mv-faint); }
/* Scoped to the hero only — the button in the final download section stays at
   the full 18px/12px-22px, since that one is the page's closing ask. Up here the
   button sits under the artwork and the title, so it reads better a step down.
   The icon is pulled to 17px to stay level with the 16px cap height. */
.metadata-v2-page .mv-hero .mv-btn { padding: 9px 17px; font-size: 16px; }
.metadata-v2-page .mv-hero .mv-btn-icon { width: 17px; height: 17px; }

/* ==========================================================================
   WHAT'S NEW
   ========================================================================== */
/* Tighter top gap than --mv-sect: this section follows the hero directly, and
   the full section rhythm here pushed its heading below the fold on tall
   screens — the hero should hand over to it, not hide it. */
.metadata-v2-page .mv-new { padding: clamp(52px, 5vw, 72px) 0 40px; }

.metadata-v2-page .mv-trio {
    max-width: var(--mv-max);
    margin: clamp(48px, 7vw, 76px) auto 0;
    padding-inline: var(--mv-pad);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: clamp(12px, 2.4vw, 28px);
}

/* Scale the three-phone composition continuously as its container narrows.
   This removes the old 760px jump from full-size phones straight to thumbnails. */
@media (max-width: 940px) {
    .metadata-v2-page .mv-trio .mv-device--sm {
        width: clamp(180px, 27vw, 258px);
        --pad: clamp(6px, .95vw, 9px);
        --r: calc(clamp(180px, 27vw, 258px) * .147);
    }
    .metadata-v2-page .mv-trio .mv-device--lg {
        width: clamp(216px, 33vw, 312px);
        --pad: clamp(7px, 1.05vw, 10px);
        --r: calc(clamp(216px, 33vw, 312px) * .144);
    }
}

.metadata-v2-page .mv-cards {
    display: grid;
    gap: 20px;
    margin-top: clamp(52px, 8vw, 84px);
}
.metadata-v2-page .mv-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.metadata-v2-page .mv-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.metadata-v2-page .mv-card {
    padding: 28px;
    border-radius: 22px;
    background: var(--mv-surface);
    border: 1px solid var(--mv-line);
}
.metadata-v2-page .mv-card h3 { margin-bottom: 8px; }
.metadata-v2-page .mv-card p { color: var(--mv-faint); font-size: 15px !important; }
.metadata-v2-page .mv-card--pro {
    padding: 32px;
    border-radius: 26px;
    background: rgba(255, 255, 255, .045);
    border-color: rgba(255, 255, 255, .1);
}
.metadata-v2-page .mv-card--pro h3 { font-size: clamp(18px, 1vw + 14px, 20px); margin-bottom: 10px; }
.metadata-v2-page .mv-card--pro p { font-size: 16px !important; }
.metadata-v2-page .mv-card-link { margin-top: 14px !important; }
.metadata-v2-page .mv-card-link .mv-textlink { font-size: 15px; }

/* ==========================================================================
   SPLIT SECTIONS
   ========================================================================== */
.metadata-v2-page .mv-split { padding: var(--mv-sect) 0; }
.metadata-v2-page .mv-split--flip { padding-top: 20px; }
.metadata-v2-page .mv-split-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: clamp(40px, 6vw, 72px);
    align-items: center;
    justify-items: center;
}
.metadata-v2-page .mv-split--flip .mv-split-grid { grid-template-columns: .95fr 1.05fr; }
.metadata-v2-page .mv-split-copy { justify-self: stretch; }
.metadata-v2-page .mv-split-copy h2 { font-size: clamp(30px, 4vw, 54px); line-height: 1.06; }
.metadata-v2-page .mv-split-copy > p {
    margin-top: 22px !important;
    max-width: 460px;
    font-size: clamp(16px, 1.1vw + 12px, 19px) !important;
    line-height: 1.55;
    color: var(--mv-muted);
}

.metadata-v2-page .mv-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 30px !important;
}
.metadata-v2-page .mv-pills li {
    padding: 9px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .09);
    font-size: 14px;
    color: var(--mv-dim);
}

.metadata-v2-page .mv-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 34px !important;
    max-width: 460px;
}
.metadata-v2-page .mv-stats > div {
    padding: 18px;
    border-radius: 18px;
    background: var(--mv-surface);
    border: 1px solid var(--mv-line);
}
.metadata-v2-page .mv-stats dt {
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--mv-fainter);
    margin-bottom: 6px;
}
.metadata-v2-page .mv-stats dd { margin: 0; font-size: 17px; font-weight: 600; color: #fff; }

/* ==========================================================================
   IMPORT PANEL
   ========================================================================== */
.metadata-v2-page .mv-import { padding: 0 0 var(--mv-sect); }
.metadata-v2-page .mv-panel {
    padding: clamp(36px, 5vw, 64px) clamp(24px, 4vw, 56px);
    border-radius: 34px;
    background: linear-gradient(180deg, #101013 0%, #0a0a0c 100%);
    border: 1px solid var(--mv-line);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(28px, 3.6vw, 44px);
    align-items: start;
}
.metadata-v2-page .mv-panel h2 { font-size: clamp(26px, 3vw, 40px); line-height: 1.1; letter-spacing: -.03em; }
.metadata-v2-page .mv-panel .mv-lede { margin: 18px 0 0 !important; font-size: clamp(16px, 1vw + 12px, 18px) !important; }
.metadata-v2-page .mv-panel h3 { margin-bottom: 8px; }
.metadata-v2-page .mv-panel h3 + p { color: var(--mv-faint); font-size: 16px !important; }
.metadata-v2-page .mv-panel h3 + p:not(:last-child) { margin-bottom: 26px !important; }

/* ==========================================================================
   METADATA PRO
   ========================================================================== */
.metadata-v2-page .mv-pro {
    position: relative;
    padding: clamp(84px, 12vw, 130px) 0;
    background: linear-gradient(180deg, #000 0%, #05080f 22%, #05080f 78%, #000 100%);
    overflow: hidden;
}
.metadata-v2-page .mv-pro-glow {
    position: absolute;
    top: -160px;
    left: 50%;
    transform: translateX(-50%);
    width: min(900px, 130vw);
    height: 500px;
    background: radial-gradient(closest-side, rgba(10, 132, 255, .28), rgba(10, 132, 255, 0));
    pointer-events: none;
}
.metadata-v2-page .mv-pro > .mv-wrap { position: relative; }

.metadata-v2-page .mv-tag {
    display: inline-block;
    padding: 7px 16px;
    border-radius: 999px;
    background: rgba(10, 132, 255, .16);
    border: 1px solid rgba(10, 132, 255, .4);
    margin: 0 0 22px !important;
    font-size: 13px !important;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #7ab8ff;
}

.metadata-v2-page .mv-pro-duo {
    margin-top: clamp(52px, 8vw, 78px);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    align-items: stretch;
}
.metadata-v2-page .mv-pro-card {
    padding: clamp(28px, 3vw, 40px) clamp(24px, 3vw, 36px) 0;
    border-radius: 30px;
    background: rgba(255, 255, 255, .045);
    border: 1px solid rgba(255, 255, 255, .1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.metadata-v2-page .mv-pro-card h3 { font-size: clamp(21px, 1.8vw + 14px, 27px); letter-spacing: -.02em; }
.metadata-v2-page .mv-pro-card > p {
    margin-top: 14px !important;
    font-size: clamp(16px, 1vw + 12px, 17px) !important;
    color: var(--mv-muted);
}
/* the phone deliberately bleeds out of the bottom of the card */
.metadata-v2-page .mv-pro-card .mv-device { margin: 34px auto -70px; }
.metadata-v2-page .mv-pro .mv-cards { margin-top: 28px; }

/* ==========================================================================
   PRIVACY
   ========================================================================== */
.metadata-v2-page .mv-privacy { padding: var(--mv-sect) 0; }
.metadata-v2-page .mv-privacy h2 { font-size: clamp(30px, 4.2vw, 52px); line-height: 1.07; }
.metadata-v2-page .mv-privacy .mv-lede { max-width: 560px; font-size: clamp(16px, 1.1vw + 12px, 19px) !important; }
.metadata-v2-page .mv-privacy .mv-textlink { display: inline-block; margin-top: 22px; }

/* ==========================================================================
   DOWNLOAD CTA
   ========================================================================== */
.metadata-v2-page .mv-cta { padding: 0 0 clamp(84px, 12vw, 130px); }
.metadata-v2-page .mv-cta-panel {
    padding: clamp(52px, 7vw, 84px) clamp(24px, 4vw, 40px);
    border-radius: 34px;
    background: radial-gradient(120% 140% at 50% 0%, #15151a 0%, #08080a 60%);
    border: 1px solid var(--mv-line);
    text-align: center;
}
.metadata-v2-page .mv-cta-icon {
    width: clamp(84px, 9vw, 108px) !important;
    border-radius: 25px;
    margin: 0 auto 28px;
    box-shadow: 0 24px 50px rgba(0, 0, 0, .7);
}
.metadata-v2-page .mv-cta-panel h2 { font-size: clamp(30px, 4vw, 50px); line-height: 1.08; }
.metadata-v2-page .mv-cta-panel > p {
    margin: 20px auto 34px !important;
    max-width: 480px;
    font-size: clamp(16px, 1.1vw + 12px, 19px) !important;
    color: var(--mv-muted);
}

/* ---------- shared footer sits on the page's own black ---------- */
.metadata-v2-page .footer { background: var(--mv-bg); border-top: 1px solid var(--mv-line); padding-top: 40px; }

/* ==========================================================================
   Scroll reveal
   ========================================================================== */
.metadata-v2-page .mv-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .8s cubic-bezier(.22, .7, .2, 1), transform .8s cubic-bezier(.22, .7, .2, 1);
}
.metadata-v2-page .mv-reveal.mv-visible { opacity: 1; transform: none; }
.metadata-v2-page .mv-cards .mv-reveal,
.metadata-v2-page .mv-pro-duo .mv-reveal { transition-delay: calc(var(--i, 0) * 60ms); }

/* ==========================================================================
   Responsive — the source design had no media queries at all
   ========================================================================== */
@media (max-width: 1080px) {
    .metadata-v2-page .mv-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
    .metadata-v2-page .mv-cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .metadata-v2-page .mv-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .metadata-v2-page .mv-panel > :first-child { grid-column: 1 / -1; }
}

@media (max-width: 840px) {
    .metadata-v2-page .mv-split-grid,
    .metadata-v2-page .mv-split--flip .mv-split-grid { grid-template-columns: minmax(0, 1fr); }
    /* keep the screenshot under the copy on both split sections */
    .metadata-v2-page .mv-split--flip .mv-split-copy { order: -1; }
    .metadata-v2-page .mv-split-copy { text-align: center; }
    .metadata-v2-page .mv-split-copy > p { margin-inline: auto !important; }
    .metadata-v2-page .mv-pills { justify-content: center; }
    .metadata-v2-page .mv-stats { margin-inline: auto !important; }
}

@media (max-width: 760px) {
    .metadata-v2-page .mv-pro-duo { grid-template-columns: minmax(0, 1fr); }
    .metadata-v2-page .mv-device--md { width: min(68vw, 280px); --r: calc(min(68vw, 280px) * 0.15714); }
    .metadata-v2-page .mv-panel { grid-template-columns: minmax(0, 1fr); }
    /* full-width tap target for the closing download CTA only — the hero
       button sits inline with its subtitle and should hug its own content */
    .metadata-v2-page .mv-cta .mv-btn { width: 100%; max-width: 340px; }
    .metadata-v2-page .mv-pro-card .mv-device { margin-bottom: -50px; }
}

/* On phones the three screenshots form a compact layered fan. The centre phone
   stays large and fully visible while the supporting phones overlap behind it,
   preserving the original three-device idea without tiny panels or scrolling. */
@media (max-width: 700px) {
    .metadata-v2-page .mv-trio {
        position: relative;
        justify-content: center;
        align-items: flex-start;
        gap: 0;
        padding-inline: var(--mv-pad);
        padding-bottom: 12px;
        overflow: visible;
    }

    .metadata-v2-page .mv-trio .mv-device--sm {
        position: relative;
        z-index: 1;
        width: min(40vw, 190px);
        --pad: 6px;
        --r: calc(min(40vw, 190px) * .147);
        opacity: .82;
    }
    .metadata-v2-page .mv-trio .mv-device--lg {
        position: relative;
        z-index: 2;
        width: min(62vw, 244px);
        --pad: 8px;
        --r: calc(min(62vw, 244px) * .144);
    }
    .metadata-v2-page .mv-trio .mv-device:first-child {
        margin-right: clamp(-104px, -27.25vw, -80px);
        transform: translateY(28px) rotate(-4deg);
        transform-origin: 100% 45%;
    }
    .metadata-v2-page .mv-trio .mv-device:last-child {
        margin-left: clamp(-104px, -27.25vw, -80px);
        transform: translateY(28px) rotate(4deg);
        transform-origin: 0 45%;
    }

}

@media (max-width: 620px) {
    .metadata-v2-page .mv-cards--3,
    .metadata-v2-page .mv-cards--4 { grid-template-columns: minmax(0, 1fr); }
    .metadata-v2-page .mv-stats { grid-template-columns: minmax(0, 1fr); }
    .metadata-v2-page {
        --mv-sect: clamp(60px, 16vw, 76px);
    }
    .metadata-v2-page .mv-pro { padding-block: clamp(72px, 18vw, 92px); }
    .metadata-v2-page .mv-privacy { padding-block: clamp(64px, 16vw, 80px); }
    .metadata-v2-page .mv-cta { padding-bottom: clamp(72px, 18vw, 92px); }
}

/* Shorten the button label rather than let it wrap onto two lines.
   Thresholds measured off the live buttons, not estimated — each button's
   intrinsic width with the long label was read from an unconstrained clone:
   - Closing CTA: 291px intrinsic. It sits inside .mv-cta-panel (24px padding)
     inside .mv-wrap (20px padding), so its space is viewport - 90. It wraps
     below 381px. This is the binding case.
   - Hero button: 258px intrinsic against the hero's 24px gutters, so
     viewport - 48. It wraps below 306px.
   The breakpoint sits at 400px rather than 381px to leave ~19px (6.5%) of
   margin: these widths were measured in SF Pro, and a non-Apple platform
   falling back to Roboto or Segoe sets the same string a few percent wider,
   which would wrap at a threshold tuned exactly to Apple metrics. Erring
   toward the short label is the safe direction — a short label never looks
   broken, a wrapped one does. Phones at 402px and above keep the long label. */
@media (max-width: 400px) {
    .metadata-v2-page .mv-btn-label-full { display: none; }
    .metadata-v2-page .mv-btn-label-short { display: inline; }
}

@media (max-width: 380px) {
    .metadata-v2-page .mv-card { padding: 22px; }
    .metadata-v2-page .mv-pills li { padding: 8px 13px; font-size: 13px; }
    /* The button font/padding trim that used to live here is gone: it existed
       only to stop the long label wrapping at 320px, which the label swap above
       now handles properly. Buttons keep full size on small phones as a result,
       which is the better tap target. */
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .metadata-v2-page *,
    .metadata-v2-page *::before,
    .metadata-v2-page *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
    .metadata-v2-page .mv-reveal { opacity: 1; transform: none; }
    /* transition:none stops the tween but not the transform itself, so the
       button would still jump on hover — hold it to a colour-only change */
    .metadata-v2-page .mv-btn--primary:hover,
    .metadata-v2-page .mv-btn--primary:active { transform: none; }
    .metadata-v2-page .mv-btn:hover .mv-btn-icon path { transform: none; }
}