/* Hallmark · genre: modern-minimal · tone: clean agency-world · anchor: UpHex blue/teal · macrostructure: Split Studio · theme: UpHex locked · enrichment: approved transparent Uppie stills · nav: N9 edge-aligned · footer: Ft1 mast-headed · pre-emit critique: P5 H5 E5 S5 R5 V5 · contrast: pass (46–50) · slop: pass (1–69) · mobile: pass (36, 59, 61–69) */
html, body[data-brand="uppie-world"] { overflow-x: clip; }
body[data-brand="uppie-world"] { background: var(--uppie-canvas); color: var(--uppie-ink); }
[data-brand="uppie-world"] .uppie-shell { width: min(100% - 2.5rem, 86rem); margin-inline: auto; }
/* Section seams. A seam arc is the INCOMING section's own background doming up
   into the section above it: the arc's lower edge sits inside its own section,
   so the two merge with no visible line. One curve per seam — the old treatment
   paired an arc on each side into a lens, with mismatched offsets and half of it
   cut off by the section's own overflow: clip. Only seams where the background
   actually changes get one; canvas-to-canvas seams need no transition. */
[data-brand="uppie-world"] { --uppie-arc-h: 5.5rem; --uppie-arc-bleed: -8%; --uppie-arc-rise: 3.75rem; }
[data-brand="uppie-world"] .uppie-arc { position: relative; }
[data-brand="uppie-world"] .uppie-arc::before { position: absolute; right: var(--uppie-arc-bleed); left: var(--uppie-arc-bleed); top: calc(var(--uppie-arc-rise) * -1); height: var(--uppie-arc-h); border-radius: 50% 50% 0 0; content: ""; pointer-events: none; }
[data-brand="uppie-world"] .uppie-section { position: relative; padding-block: clamp(5rem, 9vw, 9rem); }
[data-brand="uppie-world"] .uppie-eyebrow,
[data-brand="uppie-world"] .uppie-hero-eyebrow { color: var(--uppie-teal); font-family: var(--uppie-font-body); font-size: .72rem; font-weight: 700; letter-spacing: .16em; line-height: 1.2; text-transform: uppercase; }
[data-brand="uppie-world"] .uppie-heading { max-width: 15ch; margin-top: 1.15rem; color: var(--uppie-ink); font-family: var(--uppie-font-display); font-size: clamp(2.6rem, 5vw, 4.75rem); font-weight: 600; letter-spacing: -.04em; line-height: .98; text-wrap: balance; }
[data-brand="uppie-world"] :is(.uppie-heading, .uppie-hero-title, .uppie-jess-outcome h2, .uppie-final h2) { min-width: 0; overflow-wrap: anywhere; }
[data-brand="uppie-world"] .uppie-body { max-width: 38rem; margin-top: 1.5rem; color: var(--uppie-ink-soft); font-size: clamp(1rem, 1.4vw, 1.15rem); line-height: 1.65; }
[data-brand="uppie-world"] .uppie-link-button,
[data-brand="uppie-world"] .uppie-text-link,
[data-brand="uppie-world"] .uppie-dark-link { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3rem; margin-top: 2rem; border-radius: var(--uppie-radius-control); font-size: .92rem; font-weight: 650; transition: border-color var(--uppie-duration-short) var(--uppie-ease-out), color var(--uppie-duration-short) var(--uppie-ease-out), background-color var(--uppie-duration-short) var(--uppie-ease-out), transform var(--uppie-duration-micro) var(--uppie-ease-out); }
[data-brand="uppie-world"] .uppie-link-button { padding-inline: 1.1rem; border: var(--uppie-rule-hair) solid var(--uppie-rule-strong); background: var(--uppie-surface); color: var(--uppie-ink); }
[data-brand="uppie-world"] .uppie-text-link { justify-content: flex-start; color: var(--uppie-blue); }
[data-brand="uppie-world"] :is(.uppie-link-button, .uppie-text-link, .uppie-dark-link) .material-symbols-outlined { font-size: 1.15rem; transition: transform var(--uppie-duration-short) var(--uppie-ease-out); }
[data-brand="uppie-world"] :is(.uppie-link-button, .uppie-text-link, .uppie-dark-link):focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
[data-brand="uppie-world"] :is(.uppie-link-button, .uppie-text-link, .uppie-dark-link):active { transform: translateY(1px); }
[data-brand="uppie-world"] :is(button, input, a)[disabled],
[data-brand="uppie-world"] :is(button, input, a)[aria-disabled="true"] { cursor: not-allowed; opacity: .55; pointer-events: none; }
[data-brand="uppie-world"] :is(.uppie-link-button, .uppie-text-link, .uppie-dark-link, .uppie-hero-button, .uppie-final-button, .uppie-footer a) { white-space: nowrap; }

/* Shared homepage navigation */
header .uppie-nav { padding: .875rem 7vw; }
.uppie-nav .uppie-nav-logo { width: auto; height: 2.5rem; }
.uppie-nav .uppie-nav-menu-button .material-symbols-outlined { font-size: 2rem; }
.uppie-nav .uppie-nav-login:focus-visible { outline: 2px solid var(--uppie-ink); outline-offset: 2px; }
.uppie-nav .uppie-nav-login:active { transform: translateY(1px); }

/* Hero */
.uppie-hero { position: relative; overflow: clip; background: var(--uppie-canvas); padding: 1.125rem 0 3.5rem; }
.uppie-hero-shell { display: grid; grid-template-columns: minmax(0, 1fr); width: min(100%, 96rem); margin-inline: auto; padding-inline: 7vw; }
.uppie-hero-copy { position: relative; z-index: 2; min-width: 0; }
.uppie-hero-title { max-width: 14ch; margin-top: .95rem; color: var(--uppie-ink); font-family: var(--uppie-font-display); font-size: clamp(2.8rem, 12vw, 5.25rem); font-weight: 600; letter-spacing: -.045em; line-height: .95; text-wrap: balance; }
.uppie-hero-emphasis { position: relative; display: inline-block; white-space: nowrap; }
.uppie-hero-emphasis::after,
.uppie-final > .uppie-shell > h2 span::after { position: absolute; right: .05em; bottom: -.08em; left: .03em; height: .1em; border-radius: 50%; background: var(--uppie-teal); content: ""; clip-path: polygon(0 42%, 20% 16%, 57% 0, 100% 28%, 98% 73%, 63% 56%, 29% 72%, 2% 100%); transform: rotate(-1deg); transform-origin: left center; }
.uppie-hero-lede { max-width: 37rem; margin-top: 1.5rem; color: var(--uppie-ink-soft); font-size: clamp(1rem, 4vw, 1.125rem); line-height: 1.6; }
.uppie-hero-form, .uppie-final-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: .55rem; margin-top: 1.75rem; }
.uppie-hero-form { max-width: 40rem; }
.uppie-hero-form > div, .uppie-final-form > div { min-width: 0; }
.uppie-hero-field, .uppie-hero-button, .uppie-final-field, .uppie-final-button { min-height: 3.45rem; border-radius: var(--uppie-radius-control); }
.uppie-hero-field, .uppie-final-field { outline: 2px solid transparent; outline-offset: 1px; padding-inline: 1rem; font-size: 1rem; }
.uppie-hero-field:focus, .uppie-final-field:focus { border-color: var(--uppie-blue); box-shadow: none; outline-color: var(--uppie-blue); }
.uppie-hero-button, .uppie-final-button { padding-inline: 1.25rem; transition: background-color var(--uppie-duration-short) var(--uppie-ease-out), transform var(--uppie-duration-micro) var(--uppie-ease-out); }
.uppie-hero-button:focus-visible, .uppie-final-button:focus-visible { outline: 2px solid var(--uppie-ink); outline-offset: 2px; }
.uppie-hero-button:active, .uppie-final-button:active { transform: translateY(1px); }
.uppie-hero-note, .uppie-final-note { min-height: 1lh; margin-top: .65rem; color: var(--uppie-ink-soft); font-size: .78rem; line-height: 1.45; }
.uppie-hero-proof { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 40rem; margin-top: 2rem; }
.uppie-hero-proof-item { display: flex; min-width: 0; flex-direction: column-reverse; padding: 1rem .7rem .35rem; border-left: var(--uppie-rule-hair) solid var(--uppie-rule); }
.uppie-hero-proof-item:first-child { padding-left: 0; border-left: 0; }
.uppie-hero-proof-label { margin-top: .3rem; color: var(--uppie-ink-soft); font-size: .72rem; line-height: 1.2; }
.uppie-hero-proof-value { color: var(--uppie-ink); font-size: clamp(1.05rem, 5vw, 1.8rem); font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: -.035em; line-height: 1; }
.uppie-hero-world { position: relative; z-index: 1; width: calc(100% + 14vw); margin: 1.75rem -7vw -1rem; overflow: clip; }
.uppie-hero-world picture, .uppie-hero-world-image { display: block; width: 100%; height: auto; }

/* Campaign proof */
.uppie-proof { background: var(--uppie-canvas); padding-block: clamp(6rem, 10vw, 9rem); }
.uppie-proof-grid { position: relative; z-index: 1; display: grid; grid-template-areas: "copy" "receipts" "actions"; gap: 2rem; }
.uppie-proof-copy { grid-area: copy; min-width: 0; }
.uppie-proof .uppie-heading { max-width: none; }
.uppie-proof-title-line { display: block; }
.uppie-proof .uppie-body { max-width: 34rem; }
.uppie-proof-actions { grid-area: actions; }
.uppie-proof-actions .uppie-link-button { width: 100%; margin-top: 0; }
.uppie-disclaimer { margin-top: 1rem; color: var(--uppie-muted); font-size: .72rem; line-height: 1.45; text-align: center; }
.uppie-receipts { grid-area: receipts; min-width: 0; }
.uppie-receipt-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
.uppie-receipt-card { min-width: 0; padding: .75rem; border: var(--uppie-rule-hair) solid var(--uppie-rule-strong); border-radius: var(--uppie-radius-panel); background: var(--uppie-surface); }
.uppie-receipt-creative { aspect-ratio: 4.65 / 1; overflow: hidden; border-radius: calc(var(--uppie-radius-panel) - .35rem); background: var(--uppie-gray-world-soft); }
.uppie-receipt-creative img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
.uppie-receipt-content { padding: .6rem .25rem .25rem; }
.uppie-receipt-card h3 { color: var(--uppie-ink); font-family: var(--uppie-font-display); font-size: clamp(1.25rem, 5vw, 1.5rem); font-weight: 600; letter-spacing: -.025em; line-height: 1.1; }
.uppie-receipt-cpl { display: flex; align-items: baseline; gap: .6rem; color: var(--uppie-teal-deep); font-variant-numeric: tabular-nums; line-height: .88; }
.uppie-receipt-cpl-value { font-family: var(--uppie-font-display); font-size: clamp(3.25rem, 14vw, 4rem); font-weight: 600; letter-spacing: -.045em; }
.uppie-receipt-cpl-unit { font-family: var(--uppie-font-body); font-size: clamp(1.35rem, 6vw, 2rem); font-weight: 700; letter-spacing: -.04em; }
.uppie-receipt-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: .7rem; padding-top: .75rem; border-top: var(--uppie-rule-hair) solid var(--uppie-rule-strong); }
.uppie-receipt-metrics div { display: flex; min-width: 0; flex-direction: column-reverse; padding-inline: 1rem; border-inline-start: var(--uppie-rule-hair) solid var(--uppie-rule-strong); }
.uppie-receipt-metrics div:first-child { padding-inline-start: 0; border-inline-start: 0; }
.uppie-receipt-metrics dt { margin-top: .2rem; color: var(--uppie-muted); font-size: clamp(.85rem, 3.5vw, 1rem); line-height: 1.2; text-transform: lowercase; }
.uppie-receipt-metrics dd { color: var(--uppie-ink); font-size: clamp(1.25rem, 5vw, 1.6rem); font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: -.035em; line-height: 1; }
.uppie-comparison { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(1rem, 4vw, 1.5rem); margin-top: 1.25rem; padding: 1.25rem; border-radius: var(--uppie-radius-panel); background: var(--uppie-teal-soft); color: var(--uppie-ink); }
.uppie-comparison-icon { display: grid; width: 3.25rem; height: 3.25rem; place-items: center; border-radius: 50%; background: var(--uppie-surface); color: var(--uppie-teal); }
.uppie-comparison-icon svg { width: 1.55rem; height: 1.55rem; fill: currentColor; }
.uppie-comparison p { min-width: 0; padding-inline-start: clamp(1rem, 4vw, 1.5rem); border-inline-start: var(--uppie-rule-hair) solid var(--uppie-rule-strong); font-family: var(--uppie-font-display); font-size: clamp(1rem, 4vw, 1.35rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.uppie-comparison strong { color: var(--uppie-ink); font-weight: 700; }

@media (min-width: 40rem) {
  .uppie-receipt-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .uppie-receipt-creative { aspect-ratio: 5 / 3; }
  .uppie-receipt-card h3 { min-height: 2.2em; }
}

/* Scale system */
.uppie-scale { background: var(--uppie-canvas); text-align: center; }
.uppie-scale-copy { display: flex; flex-direction: column; align-items: center; }
.uppie-scale-copy .uppie-heading { max-width: 19ch; }
.uppie-scale-copy .uppie-body { max-width: 48rem; }
.uppie-scale-world { margin: clamp(3rem, 6vw, 5rem) auto 0; }
.uppie-scale-world picture, .uppie-scale-world img { display: block; width: 100%; height: auto; }
.uppie-scale-labels { display: grid; gap: .8rem; margin-top: 1.5rem; text-align: left; }
.uppie-scale-labels li { display: flex; align-items: baseline; gap: .7rem; padding-top: .9rem; border-top: var(--uppie-rule-hair) solid var(--uppie-rule-strong); color: var(--uppie-ink); font-size: .72rem; font-weight: 700; letter-spacing: .06em; line-height: 1.35; text-transform: uppercase; }
.uppie-scale-labels span { color: var(--uppie-teal); font-variant-numeric: tabular-nums; }

/* Highlevel product */
.uppie-highlevel { background: var(--uppie-surface); }
.uppie-highlevel-grid { display: grid; gap: clamp(3rem, 8vw, 8rem); }
.uppie-highlevel-copy { align-self: center; }
.uppie-product-demo { position: relative; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.15fr); gap: .8rem; padding: clamp(1rem, 3vw, 2rem); border: var(--uppie-rule-hair) solid var(--uppie-rule); border-radius: var(--uppie-radius-world); background: var(--uppie-blue-wash); }
.uppie-product-panel { min-width: 0; padding: clamp(1rem, 2vw, 1.5rem); border: var(--uppie-rule-hair) solid var(--uppie-rule); border-radius: var(--uppie-radius-panel); background: var(--uppie-surface); box-shadow: 0 .5rem 1.5rem var(--uppie-shadow); }
.uppie-product-label { color: var(--uppie-muted); font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.uppie-product-panel h3 { margin-top: .5rem; font-size: clamp(.95rem, 2vw, 1.25rem); font-weight: 700; }
.uppie-product-panel-agency ul { display: grid; gap: .75rem; margin-top: 1.5rem; }
.uppie-product-panel-agency li { display: flex; align-items: center; gap: .45rem; color: var(--uppie-ink-soft); font-size: .78rem; }
.uppie-product-panel-agency .material-symbols-outlined { color: var(--uppie-teal); font-size: 1rem; }
.uppie-product-client-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.uppie-status { padding: .3rem .5rem; border-radius: 999px; background: var(--uppie-teal-soft); color: var(--uppie-teal-deep); font-size: .58rem; font-weight: 700; }
.uppie-selected-campaign { display: flex; align-items: center; gap: .65rem; margin-top: 1.25rem; padding: .7rem; border: var(--uppie-rule-hair) solid var(--uppie-rule); border-radius: .65rem; }
.uppie-selected-campaign > .material-symbols-outlined { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: .5rem; background: var(--uppie-blue-soft); color: var(--uppie-blue); font-size: 1rem; }
.uppie-selected-campaign div { min-width: 0; }
.uppie-selected-campaign small, .uppie-selected-campaign strong { display: block; }
.uppie-selected-campaign small { color: var(--uppie-muted); font-size: .55rem; }
.uppie-selected-campaign strong { margin-top: .12rem; overflow: hidden; font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.uppie-product-panel-client ol { display: grid; gap: .55rem; margin-top: 1rem; }
.uppie-product-panel-client ol li { display: flex; align-items: center; gap: .55rem; color: var(--uppie-ink-soft); font-size: .7rem; }
.uppie-product-panel-client ol span { display: grid; width: 1.25rem; height: 1.25rem; flex: 0 0 auto; place-items: center; border-radius: 50%; background: var(--uppie-blue); color: var(--uppie-white); font-size: .55rem; font-weight: 700; }
.uppie-launch-modes { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: .5rem; padding-top: .25rem; }
.uppie-launch-modes span { color: var(--uppie-ink-soft); font-size: clamp(.5rem, 1.3vw, .64rem); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.uppie-handoff { margin-top: clamp(3rem, 6vw, 5rem); padding-top: 1.5rem; border-top: var(--uppie-rule-hair) solid var(--uppie-rule-strong); }
.uppie-handoff ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.uppie-handoff li { position: relative; color: var(--uppie-ink); font-size: clamp(.64rem, 1.3vw, .78rem); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.uppie-handoff li:not(:last-child)::after { position: absolute; top: 50%; right: -1rem; color: var(--uppie-blue); content: "→"; transform: translateY(-50%); }
.uppie-handoff > p { max-width: 60rem; margin-top: 1.5rem; color: var(--uppie-ink-soft); font-size: .82rem; line-height: 1.55; }

/* Agency service model */
.uppie-business { padding-block: clamp(5rem, 7vw, 7rem); background: var(--uppie-canvas); }
.uppie-highlevel::before { background: var(--uppie-surface); }
.uppie-business::before { background: var(--uppie-canvas); }
.uppie-business .uppie-shell { position: relative; z-index: 1; }
.uppie-business-heading { display: grid; gap: 1.25rem; }
.uppie-business-heading .uppie-heading { max-width: 22ch; }
.uppie-business-heading .uppie-body { max-width: 62rem; margin-top: 0; }
.uppie-business-heading .uppie-text-link { margin-top: .75rem; }
.uppie-models { position: relative; display: grid; gap: 0; margin-top: clamp(3.5rem, 6vw, 6rem); padding-left: 3.5rem; }
.uppie-models::before { position: absolute; top: .35rem; bottom: .5rem; left: 1rem; width: .18rem; border-radius: 999px; background: linear-gradient(to bottom, var(--uppie-teal), var(--uppie-blue)); content: ""; }
.uppie-model { position: relative; padding: 0 0 1.75rem; border-bottom: var(--uppie-rule-hair) solid var(--uppie-rule); }
.uppie-model + .uppie-model { padding-top: 1.75rem; }
.uppie-model:last-child { padding-bottom: 0; border-bottom: 0; }
.uppie-model::before { position: absolute; top: .1rem; left: -3.05rem; width: .9rem; height: .9rem; border: .16rem solid var(--uppie-canvas); border-radius: 50%; background: var(--uppie-teal); box-shadow: 0 0 0 .06rem var(--uppie-teal); content: ""; }
.uppie-model + .uppie-model::before { top: 1.85rem; background: var(--uppie-blue); box-shadow: 0 0 0 .06rem var(--uppie-blue); }
.uppie-model h3 { color: var(--uppie-teal); font-family: var(--uppie-font-body); font-size: clamp(.95rem, 2.8vw, 1.15rem); font-weight: 700; letter-spacing: .14em; line-height: 1.2; text-transform: uppercase; }
.uppie-model:nth-child(n+2) h3 { color: var(--uppie-blue); }
.uppie-model p { max-width: 25rem; margin-top: .75rem; color: var(--uppie-ink-soft); font-size: clamp(1rem, 3.8vw, 1.15rem); line-height: 1.5; }
.uppie-model small { display: block; margin-top: 1rem; color: var(--uppie-muted); font-size: .7rem; font-weight: 700; letter-spacing: .14em; line-height: 1.4; text-transform: uppercase; }
.uppie-model-line { position: relative; display: none; height: 4.5rem; margin-top: .5rem; }
.uppie-model-line::before { position: absolute; top: 50%; right: 1%; left: 1%; height: .18rem; border-radius: 999px; background: linear-gradient(to right, var(--uppie-teal), var(--uppie-blue)); content: ""; transform: rotate(-2.75deg); transform-origin: center; }
.uppie-foundation { display: flex; flex-direction: column; align-items: center; gap: .35rem; margin-top: 2rem; padding: 1.15rem 1.25rem; border: var(--uppie-rule-hair) solid var(--uppie-teal); border-radius: var(--uppie-radius-panel); background: var(--uppie-teal-soft); text-align: center; }
.uppie-foundation strong { color: var(--uppie-teal-deep); font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; }
.uppie-foundation span { color: var(--uppie-ink-soft); font-size: .9rem; }

/* Jess proof */
.uppie-jess { background: var(--uppie-navy); color: var(--uppie-white); }
.uppie-jess::before { background: var(--uppie-navy); }
.uppie-jess .uppie-shell { position: relative; z-index: 1; }
.uppie-jess .uppie-eyebrow { color: var(--uppie-aqua); }
.uppie-jess-grid { display: grid; gap: clamp(3rem, 8vw, 8rem); margin-top: 2rem; }
.uppie-quote blockquote { max-width: 14ch; font-family: var(--uppie-font-display); font-size: clamp(2.5rem, 5vw, 4.8rem); font-weight: 500; letter-spacing: -.04em; line-height: .98; text-wrap: balance; }
.uppie-quote figcaption { margin-top: 2rem; font-size: .9rem; font-weight: 700; }
.uppie-quote figcaption span { display: block; margin-top: .25rem; color: var(--uppie-dark-muted); font-size: .75rem; font-weight: 500; }
.uppie-dark-link { justify-content: flex-start; color: var(--uppie-aqua); }
.uppie-ledger { overflow: hidden; border: var(--uppie-rule-hair) solid var(--uppie-dark-rule); border-radius: var(--uppie-radius-panel); background: var(--uppie-navy-raised); }
.uppie-ledger div { display: grid; grid-template-columns: 5rem 1fr; gap: 1rem; padding: 1.15rem; border-top: var(--uppie-rule-hair) solid var(--uppie-dark-rule); }
.uppie-ledger div:first-child { border-top: 0; }
.uppie-ledger dt { color: var(--uppie-dark-muted); font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.uppie-ledger dd { font-size: .88rem; font-weight: 650; }
.uppie-ledger-result { background: var(--uppie-dark-accent); }
.uppie-ledger-result dd { color: var(--uppie-aqua); }
.uppie-jess-outcome h2 { max-width: 12ch; margin-top: 2rem; font-family: var(--uppie-font-display); font-size: clamp(2.35rem, 4vw, 4rem); font-weight: 600; letter-spacing: -.035em; line-height: 1; text-wrap: balance; }
.uppie-jess-outcome > p { max-width: 34rem; margin-top: 1.25rem; color: var(--uppie-dark-muted); font-size: .95rem; line-height: 1.65; }
.uppie-dark-disclaimer { margin-top: 3rem; color: var(--uppie-dark-muted); font-size: .7rem; }

/* Final CTA and quiet brand footer */
.uppie-final { position: relative; padding-top: clamp(6rem, 7vw, 7rem); background: var(--uppie-canvas); }
.uppie-final::before { background: var(--uppie-canvas); }
.uppie-final > .uppie-shell > h2 { max-width: 100%; margin-top: 1.25rem; color: var(--uppie-ink); font-family: var(--uppie-font-display); font-size: clamp(3rem, 6vw, 6.25rem); font-weight: 600; letter-spacing: -.05em; line-height: .92; text-wrap: balance; }
.uppie-final > .uppie-shell > h2 span { position: relative; display: inline-block; white-space: nowrap; }
.uppie-final-grid { display: grid; gap: 2rem; margin-top: clamp(2.5rem, 5vw, 4.5rem); }
.uppie-final-grid > p { max-width: 33rem; color: var(--uppie-ink-soft); font-size: clamp(1rem, 1.6vw, 1.2rem); line-height: 1.65; }
.uppie-final-form { margin-top: 0; }
.uppie-footer { margin-top: clamp(6rem, 10vw, 9rem); border-top: var(--uppie-rule-hair) solid var(--uppie-rule-strong); }
.uppie-footer-inner { display: grid; gap: 2.5rem; padding-block: 3rem 4.5rem; }
.uppie-footer-brand img { display: block; width: auto; height: 2.5rem; }
.uppie-footer-brand p { max-width: 34rem; margin-top: 1rem; color: var(--uppie-ink-soft); font-size: .9rem; line-height: 1.5; }
.uppie-footer-directory { display: flex; flex-direction: column; align-items: flex-start; gap: 2rem; }
.uppie-footer nav { display: flex; flex-wrap: wrap; gap: .8rem 1.25rem; }
.uppie-footer a { color: var(--uppie-ink-soft); font-size: .8rem; font-weight: 500; transition: color var(--uppie-duration-short) var(--uppie-ease-out); }
.uppie-footer a:focus-visible { outline: 2px solid var(--uppie-blue); outline-offset: 3px; }
.uppie-footer-directory > span { color: var(--uppie-muted); font-size: .75rem; }

@media (min-width: 640px) {
  .uppie-hero-form, .uppie-final-form { grid-template-columns: minmax(0, 1fr) auto; }
  .uppie-hero-button, .uppie-final-button { min-width: 14.75rem; }
  .uppie-scale-labels, .uppie-models { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 960px) {
  /* Desktop display type: the 5-6vw scale overpowered the layout on wide
     screens. Reduced ~20% here only — the base clamps below 960px are the
     mobile sizes and are deliberately untouched. */
  [data-brand="uppie-world"] .uppie-heading { font-size: clamp(2.6rem, 4vw, 3.9rem); }
  .uppie-quote blockquote { font-size: clamp(2.5rem, 4vw, 3.9rem); }
  .uppie-final > .uppie-shell > h2 { font-size: clamp(3rem, 4.75vw, 5rem); }
  header .uppie-nav { padding-inline: 4.75vw; }
  .uppie-nav > div > div:last-child { flex: 1; margin-left: clamp(5rem, 7.75vw, 7.75rem); }
  .uppie-nav .uppie-nav-login { min-width: 6.5rem; min-height: 2.5rem; justify-content: center; margin-left: auto; padding-inline: .875rem; border: var(--uppie-rule-hair) solid var(--uppie-rule); border-radius: var(--uppie-radius-control); background: var(--uppie-surface); box-shadow: 0 .125rem .5rem var(--uppie-shadow); color: var(--uppie-ink); }
  .uppie-nav a { white-space: nowrap; }
  .uppie-hero { min-height: clamp(48rem, 53.5vw, 53rem); margin-top: 0; padding: 0; }
  .uppie-hero-shell { display: block; width: 100%; max-width: none; height: 100%; padding-inline: clamp(4.75rem, 5.5vw, 6.75rem); }
  .uppie-hero-copy { width: min(41vw, 38rem); padding-top: clamp(3.25rem, 4vw, 4rem); }
  .uppie-hero-title { max-width: none; margin-top: 1.25rem; font-size: clamp(3.25rem, 3.9vw, 4.5rem); }
  .uppie-hero-lede { max-width: 31rem; margin-top: 2rem; }
  .uppie-hero-form { width: min(41vw, 38rem); margin-top: 1.75rem; }
  .uppie-hero-note, .uppie-hero-proof { width: min(41vw, 38rem); }
  .uppie-hero-proof { margin-top: 2rem; }
  /* v4 art is a hard cutout: the island carries its own edge in alpha, so it is
     sized to sit beside the copy column rather than bleeding under it. */
  .uppie-hero-world { position: absolute; z-index: 0; top: clamp(1rem, 1.6vw, 1.75rem); right: clamp(-4rem, calc(50vw - 47rem), 0rem); bottom: auto; left: auto; width: min(61vw, 64rem); height: auto; margin: 0; pointer-events: none; }
  .uppie-hero-world picture { display: block; width: 100%; height: auto; }
  .uppie-hero-world-image { position: static; display: block; width: 100%; max-width: none; height: auto; }
  .uppie-proof { padding-block: clamp(8rem, 10vw, 12rem) clamp(7rem, 7vw, 9rem); }
  [data-brand="uppie-world"] .uppie-proof-grid { width: min(100% - 9.5vw, 110rem); }
  .uppie-proof-grid { grid-template-areas: "copy receipts" "actions receipts"; grid-template-columns: minmax(22rem, .72fr) minmax(0, 1.28fr); grid-template-rows: auto 1fr; column-gap: clamp(3rem, 4.75vw, 5.75rem); row-gap: 0; align-items: start; }
  .uppie-proof-copy { padding-top: 3.1rem; }
  .uppie-proof .uppie-heading { max-width: none; margin-top: 3rem; font-size: clamp(2.5rem, 3.2vw, 3.5rem); line-height: 1.03; text-wrap: wrap; }
  .uppie-proof .uppie-body { max-width: 34rem; margin-top: 2.5rem; }
  .uppie-proof-actions { align-self: start; }
  .uppie-proof-actions .uppie-link-button { width: auto; min-width: 24rem; min-height: 5.25rem; margin-top: 2.75rem; padding-inline: 2rem; border-color: var(--uppie-blue); color: var(--uppie-blue-deep); font-size: 1.1rem; }
  .uppie-disclaimer { max-width: 31rem; margin-top: 2rem; font-size: .9rem; text-align: start; }
  .uppie-receipts { padding-top: .65rem; }
  .uppie-receipt-cards { gap: clamp(1.1rem, 1.8vw, 2rem); }
  .uppie-receipt-card { display: flex; min-height: 36rem; flex-direction: column; padding: clamp(.75rem, .9vw, 1rem); }
  .uppie-receipt-content { display: flex; flex: 1; flex-direction: column; padding: 1.5rem .65rem .6rem; }
  .uppie-receipt-card h3 { min-height: 0; font-size: clamp(1.25rem, 1.4vw, 1.5rem); white-space: nowrap; }
  .uppie-receipt-cpl { margin-top: 1.5rem; padding-block: 1.35rem 1.65rem; border-block: var(--uppie-rule-hair) solid var(--uppie-rule-strong); }
  .uppie-receipt-cpl-value { font-size: clamp(2.75rem, 3vw, 3.4rem); }
  .uppie-receipt-cpl-unit { font-size: clamp(1.4rem, 1.75vw, 2rem); }
  .uppie-receipt-metrics { margin-top: auto; padding-top: 1.65rem; border-top: 0; }
  .uppie-receipt-metrics div { padding-inline: clamp(1rem, 2vw, 2.5rem); }
  .uppie-receipt-metrics dt { margin-top: .45rem; font-size: clamp(.85rem, .9vw, 1rem); }
  .uppie-receipt-metrics dd { font-size: clamp(1.25rem, 1.35vw, 1.6rem); }
  .uppie-comparison { min-height: 9.5rem; margin-top: 1.75rem; padding: 1.5rem clamp(2rem, 4vw, 5rem); }
  .uppie-comparison-icon { width: 4.75rem; height: 4.75rem; }
  .uppie-comparison-icon svg { width: 2.15rem; height: 2.15rem; }
  .uppie-comparison p { font-size: clamp(1.1rem, 1.2vw, 1.35rem); }
  .uppie-highlevel-grid { grid-template-columns: minmax(0, .78fr) minmax(32rem, 1.22fr); align-items: center; }
  .uppie-final-grid, .uppie-jess-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .uppie-models { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-left: 0; }
  .uppie-models::before, .uppie-model::before { display: none; }
  .uppie-model { min-width: 0; padding: 0 3rem 0 0; border: 0; }
  .uppie-model + .uppie-model { padding: 0 3rem; border-left: var(--uppie-rule-hair) solid var(--uppie-rule-strong); }
  .uppie-model:last-child { padding-right: 0; }
  .uppie-model p { min-height: 3.2em; }
  .uppie-model-line { display: block; }
  .uppie-model-line i { position: absolute; z-index: 1; width: .9rem; height: .9rem; border: .18rem solid var(--uppie-canvas); border-radius: 50%; background: var(--uppie-teal); }
  .uppie-model-line i:nth-child(1) { top: calc(61% - .45rem); left: .5%; }
  .uppie-model-line i:nth-child(2) { top: calc(50% - .45rem); left: 49.5%; background: var(--uppie-blue); }
  .uppie-model-line i:nth-child(3) { top: calc(39% - .45rem); right: .5%; background: var(--uppie-blue); }
  .uppie-foundation { flex-direction: row; justify-content: center; gap: 2rem; }
  .uppie-final-grid { gap: 6rem; }
  .uppie-final-form { align-self: start; }
  .uppie-footer-inner { grid-template-columns: minmax(0, 1fr) minmax(32rem, .9fr); align-items: start; padding-block: 4rem; }
  .uppie-footer-directory { align-items: flex-end; }
  .uppie-footer-directory nav { justify-content: flex-end; }
}

@media (min-width: 960px) and (max-width: 1365.98px) {
  .uppie-hero-copy { padding-top: clamp(3.25rem, 4vw, 4rem); }
  .uppie-hero-lede { margin-top: min(2.5rem, 2.93vw); }
  .uppie-hero-form { margin-top: min(2.5rem, 2.93vw); }
  .uppie-hero-proof { margin-top: min(2.75rem, 3.22vw); }
}

@media (min-width: 960px) and (hover: hover) {
  .uppie-nav .uppie-nav-login:hover { border-color: var(--uppie-blue); background: var(--uppie-canvas); color: var(--uppie-ink); }
}

@media (min-width: 1280px) {
  header .uppie-nav { padding-block: 1.375rem; }
  .uppie-nav .uppie-nav-logo { height: 3.125rem; }
  .uppie-nav .uppie-nav-login { min-width: 6.75rem; min-height: 3rem; padding-inline: 1.25rem; }
}

@media (min-width: 90rem) {
  .uppie-proof-title-line { white-space: nowrap; }
}

@media (max-width: 639.98px) {
  .uppie-product-demo { grid-template-columns: 1fr; }
  .uppie-launch-modes { grid-column: auto; }
  .uppie-handoff ol { grid-template-columns: 1fr; gap: 1rem; }
  .uppie-handoff li { padding-bottom: 1rem; border-bottom: var(--uppie-rule-hair) solid var(--uppie-rule); }
  .uppie-handoff li:not(:last-child)::after { top: auto; right: auto; bottom: -.4rem; left: 50%; transform: rotate(90deg) translateY(50%); }
}

@media (hover: hover) {
  [data-brand="uppie-world"] .uppie-link-button:hover { border-color: var(--uppie-blue); color: var(--uppie-blue-deep); transform: translateY(-1px); }
  [data-brand="uppie-world"] :is(.uppie-link-button, .uppie-text-link, .uppie-dark-link):hover .material-symbols-outlined { transform: translateX(.2rem); }
  [data-brand="uppie-world"] .uppie-footer a:hover { color: var(--uppie-blue); }
}

@media (max-width: 360px) {
  .uppie-final > .uppie-shell > h2 span { display: inline; white-space: normal; }
  .uppie-final > .uppie-shell > h2 span::after { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .uppie-hero-copy { animation: uppie-hero-copy-in var(--uppie-duration-scene) var(--uppie-ease-out) both; }
  .uppie-hero-world-image { animation: uppie-hero-world-in var(--uppie-duration-scene) var(--uppie-ease-out) 100ms both; }
}
@keyframes uppie-hero-copy-in { from { opacity: 0; transform: translateY(.75rem); } to { opacity: 1; transform: translateY(0); } }
@keyframes uppie-hero-world-in { from { opacity: 0; transform: translateX(1rem); } to { opacity: 1; transform: translateX(0); } }