/* jameskosloff.com, the public site and the plain pages.
   Every space, size, radius and font size comes from system.css, which loads first.
   Phone is the base; the iPad (744px) and desktop (1024px) rules sit at the end. */

.skip { position: absolute; left: -999px; top: var(--s2); z-index: 60; padding: var(--s2) var(--s4); border-radius: var(--r-sm); background: var(--ink); color: var(--bg); }
.skip:focus { left: var(--s3); }
.arrow { width: var(--i-sm); height: var(--i-sm); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--spring); }
a:hover .arrow, button:hover .arrow { transform: translateX(3px); }

/* Type roles */
.name { font-size: var(--t-display); line-height: 1; font-weight: 600; letter-spacing: var(--tr-display); }
.h2 { font-size: var(--t-h2); line-height: 1.1; font-weight: 600; letter-spacing: var(--tr-head); }
.h2 .soft { display: block; color: var(--muted); }
.h3 { font-size: var(--t-3); line-height: 1.2; font-weight: 600; letter-spacing: var(--tr-title); }
.lead { font-size: var(--t-3); letter-spacing: var(--tr-title); line-height: 1.4; color: var(--soft); text-wrap: pretty; }
.sub { font-size: var(--t-sub); letter-spacing: var(--tr-body); color: var(--muted); }
.fine, .clock { font-size: var(--t-foot); letter-spacing: var(--tr-small); color: var(--muted); }
.center { text-align: center; }
.dots { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); color: var(--muted); font-size: var(--t-foot); letter-spacing: var(--tr-small); }
.dots span + span::before { content: ""; display: inline-block; width: 3px; height: 3px; margin-right: var(--s2); border-radius: 50%; background: currentColor; vertical-align: middle; opacity: .7; }
.badge { display: inline-block; padding: 0 var(--s2); border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-ink); font-size: var(--t-cap); line-height: var(--s5); font-weight: 600; letter-spacing: 0; }
.more { display: inline-flex; align-items: center; gap: var(--s1); min-height: var(--h-md); font-size: var(--t-sub); letter-spacing: var(--tr-body); color: var(--soft); text-decoration: none; transition: color .2s; }
.more:hover { color: var(--ink); }

/* Chips on top of a film */
.chip { position: absolute; z-index: 2; padding: var(--s1) var(--s3); border-radius: var(--r-pill); font-size: var(--t-foot); letter-spacing: var(--tr-small); font-weight: 500; font-variant-numeric: tabular-nums; color: #fff; background: rgba(0, 0, 0, .55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: .5px solid var(--line-2); }
.chip-tl { top: var(--s3); left: var(--s3); }
.chip-tr { top: var(--s3); right: var(--s3); }

/* Segmented control with a sliding thumb (site.js moves it). The thumb is 2px in, so its radius is 2px less. */
.seg { position: relative; display: inline-flex; padding: 2px; border-radius: var(--r-sm); background: var(--raise); isolation: isolate; }
.seg-thumb { position: absolute; z-index: -1; top: 2px; bottom: 2px; left: 0; border-radius: calc(var(--r-sm) - 2px); background: var(--thumb); box-shadow: 0 3px 8px rgba(0, 0, 0, .35); transition: transform .45s var(--spring), width .45s var(--spring); }
.seg button { min-height: var(--h-sm); padding: 0 var(--s4); border: 0; border-radius: calc(var(--r-sm) - 2px); background: none; color: var(--muted); font-size: var(--t-sub); letter-spacing: var(--tr-body); font-weight: 500; transition: color .25s; }
.seg button[aria-checked="true"] { color: var(--ink); }
.seg:not(.ready) button[aria-checked="true"] { background: var(--thumb); }

/* Bar: lines up with the page, compacts by 8px on scroll, the tab pill follows the section you're in. */
.bar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: var(--s4); height: var(--bar); padding-left: max(var(--gl), calc((100% - var(--content)) / 2)); padding-right: max(var(--gr), calc((100% - var(--content)) / 2)); transition: height .4s var(--ease), background .3s, box-shadow .3s; }
.bar.solid { height: calc(var(--bar) - var(--s2)); background: var(--glass); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); box-shadow: 0 .5px 0 var(--line); }
.mark { display: inline-flex; align-items: center; min-height: var(--h-md); margin-right: auto; padding-right: var(--s3); font-size: var(--t-1); font-weight: 300; line-height: 1; letter-spacing: -0.09em; text-decoration: none; transition: opacity .2s; }
.mark:hover { opacity: .7; }
.tabs { position: relative; display: none; padding: var(--s1); border-radius: var(--r-pill); background: var(--wash); border: .5px solid var(--line); }
.tabs a { position: relative; z-index: 1; display: inline-flex; align-items: center; min-height: var(--h-sm); padding: 0 var(--s4); border-radius: var(--r-pill); font-size: var(--t-sub); letter-spacing: var(--tr-body); color: var(--muted); text-decoration: none; transition: color .25s; }
.tabs a:hover, .tabs a.on { color: var(--ink); }
.tabs-pill { position: absolute; top: var(--s1); bottom: var(--s1); left: 0; width: 0; border-radius: var(--r-pill); background: var(--wash-2); opacity: 0; transition: transform .5s var(--spring), width .5s var(--spring), opacity .3s; }
.tabs:hover .tabs-pill { opacity: 1; }

/* Phones: a menu button replaces the quote button in the bar. */
.menu-btn { display: none; position: relative; flex: none; width: var(--h-md); height: var(--h-md); padding: 0; border-radius: 50%; border: .5px solid var(--line-2); background: var(--wash); }
.menu-btn span { position: absolute; left: 50%; top: 50%; width: var(--s4); height: 1.5px; margin: -0.75px 0 0 calc(var(--s4) / -2); border-radius: 2px; background: var(--ink); transition: transform .45s var(--spring); }
.menu-btn span:first-child { transform: translateY(-3px); }
.menu-btn span:last-child { transform: translateY(3px); }
.menu-btn[aria-expanded="true"] span:first-child { transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] span:last-child { transform: rotate(-45deg); }
.menu { position: fixed; z-index: 29; inset: 0; display: grid; align-content: start; gap: var(--s8); overflow-y: auto; padding: calc(var(--bar) + var(--s4)) var(--gr) calc(var(--s8) + env(safe-area-inset-bottom, 0px)) var(--gl); background: rgba(20, 20, 22, .96); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); animation: fade .25s var(--ease); }
.menu-list { display: grid; }
.menu-list li { animation: rise .5s var(--ease) both; }
.menu-list li:nth-child(2) { animation-delay: 30ms; } .menu-list li:nth-child(3) { animation-delay: 60ms; } .menu-list li:nth-child(4) { animation-delay: 90ms; }
.menu-list li:nth-child(5) { animation-delay: 120ms; } .menu-list li:nth-child(6) { animation-delay: 150ms; } .menu-list li:nth-child(7) { animation-delay: 180ms; }
.menu-list a { display: flex; align-items: center; min-height: var(--s16); border-bottom: .5px solid var(--line); font-size: var(--t-2); letter-spacing: var(--tr-title); font-weight: 600; text-decoration: none; }
.menu-list a:active { color: var(--muted); }
@media (max-width: 743px) {
  .menu-btn { display: block; }
  .bar-quote { display: none; }
}

/* Entrance: each [data-in] rises out of a soft blur, one after another. */
.js [data-in] { opacity: 0; transform: translateY(14px); filter: blur(8px); }
.js .ready [data-in], .js.ready [data-in] { animation: rise .9s var(--ease) calc(var(--d, 0) * 90ms + 80ms) both; }

/* Sections: one --section apart, a title one --stack above its content. */
.block { padding-top: var(--section); }
.block-sm { padding-top: calc(var(--section) / 2); }
.center-title { text-align: center; margin-bottom: var(--stack); }
.center-title .soft { display: block; }
/* A quiet line under a title: a --s3 below it, one --stack above the content. */
.section-note { margin: calc(var(--s3) - var(--stack)) 0 var(--stack); text-align: center; font-size: var(--t-sub); letter-spacing: var(--tr-body); color: var(--muted); }
.head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s3) var(--s5); margin-bottom: var(--stack); }

/* Cards: the spotlight follows the pointer. */
.card { overflow: hidden; }
.spot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s; background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .07), transparent 60%); }
.spot:hover::after { opacity: 1; }
.spot { transition: transform .5s var(--spring), border-color .3s; }
.spot:hover { border-color: var(--line-3); }
.tilt { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0); transition: transform .6s var(--spring), border-color .3s; }
.tilt.tilting { transition: transform .12s linear, border-color .3s; }
.pill.mag { transition: transform .5s var(--spring), background .25s var(--ease), border-color .25s, box-shadow .3s; }

/* 1. Hero: half a section above and below. */
.hero { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: var(--s8); padding-top: calc(var(--section) / 2); }
.hero-copy { display: grid; gap: var(--s3); justify-items: start; min-width: 0; }
.avatar { width: var(--s20); height: var(--s20); margin-bottom: var(--s1); border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 35%, #46464b, #232326); border: .5px solid var(--line-2); }
.avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; transform: scale(1.25) translateY(8%); backface-visibility: hidden; }
.js.ready .avatar { animation: pop .8s var(--spring) .05s both; }
@keyframes pop { from { opacity: 0; transform: scale(.6); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }
.hero-line { font-size: var(--t-lead); line-height: 1.2; font-weight: 500; letter-spacing: var(--tr-head); max-width: 22ch; text-wrap: balance; }
.hero-sub { font-size: var(--t-body); letter-spacing: var(--tr-body); color: var(--muted); max-width: 32rem; text-wrap: pretty; }
/* A pitch link's hello, under the line. */
.hello { padding: var(--s1) var(--s3); border-radius: var(--r-pill); background: var(--wash); border: .5px solid var(--line-2); font-size: var(--t-sub); letter-spacing: var(--tr-body); color: var(--soft); }
/* Proof under the buttons: three numbers, each over its label, a hairline between. */
.proof { display: flex; margin-top: var(--s3); }
.proof li { display: grid; gap: var(--s1); padding: 0 var(--s5); }
.proof li:first-child { padding-left: 0; }
.proof li + li { border-left: .5px solid var(--line-2); }
.proof b { font-size: var(--t-2); line-height: 1.1; letter-spacing: var(--tr-title); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.proof span { font-size: var(--t-foot); letter-spacing: var(--tr-small); color: var(--muted); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s3); }
/* The memoji beside the name on bigger screens; its body fades out instead of a hard cut. */
.hero-me { display: none; height: auto; filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .7)); -webkit-mask-image: linear-gradient(to bottom, #000 68%, transparent 96%); mask-image: linear-gradient(to bottom, #000 68%, transparent 96%); }
.js.ready .hero-me { animation: rise .9s var(--ease) .2s both, float 6s ease-in-out 1.2s infinite; }
@keyframes float { 50% { transform: translateY(-6px); } }

/* The easter egg: the memoji is a secret link to /why. A speech bubble near the hand
   shows on hover or focus, and peeks out once after a few seconds (site.js adds .peek). */
.secret { position: relative; display: block; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.secret-avatar { justify-self: start; }
.secret-me { display: none; }
.avatar { display: block; }
.bubble { position: absolute; z-index: 2; top: var(--s3); left: calc(100% + var(--s3)); padding: var(--s2) var(--s3); border-radius: var(--r-md) var(--r-md) var(--r-md) var(--s1); background: var(--ink); color: var(--on-ink); font-size: var(--t-sub); letter-spacing: var(--tr-body); font-weight: 600; white-space: nowrap; opacity: 0; transform: translateY(var(--s2)) scale(.85); transform-origin: left bottom; pointer-events: none; transition: opacity .3s var(--ease), transform .5s var(--spring); }
.secret:hover .bubble, .secret:focus-visible .bubble, .secret.peek .bubble { opacity: 1; transform: none; }
.secret:focus-visible { outline: none; }
.secret:hover .hero-me, .secret:hover .avatar { filter: drop-shadow(0 0 24px rgba(255, 90, 31, .35)); }
.secret:active .avatar { transform: scale(.94); }

/* The ad engine's frame (site.js draws into .film). Sizes here are the film's own. */
.film { position: relative; overflow: hidden; background: #111112; color: #f5f5f7; container-type: size; isolation: isolate; width: 100%; }
.film[data-ratio="16x9"] { aspect-ratio: 16 / 9; }
.film[data-ratio="16x10"] { aspect-ratio: 16 / 10; }
.film[data-ratio="9x16"] { aspect-ratio: 9 / 16; }
.beat { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 6cqh 9cqw; opacity: 0; }
.beat .w { display: inline-block; will-change: transform, opacity; }
.beat-text { font-weight: 700; letter-spacing: -0.045em; line-height: 1; font-size: min(8cqw, 15cqh); text-wrap: balance; }
.beat-text .hl { position: relative; z-index: 0; color: #050505; }
.beat-text .hl::before { content: ""; position: absolute; z-index: -1; left: -.06em; right: -.06em; top: .08em; bottom: .02em; background: var(--brand, #ff5a1f); transform-origin: left; transform: scaleX(var(--sweep, 0)); }
.beat-card { background: var(--brand, #ff5a1f); color: #050505; align-items: center; text-align: center; }
.beat-card .beat-text { font-size: min(13cqw, 26cqh); }
.beat-small { font-size: min(2.6cqw, 5cqh); font-weight: 600; margin-top: 3cqh; opacity: .7; }
.beat-dark { background: #000; }
.beat-shapes { flex-direction: row; align-items: flex-end; justify-content: center; gap: 4cqw; }
.beat-shapes i { display: block; border: max(2px, .5cqw) solid currentColor; border-radius: 1.4cqw; }
.beat-shapes i:nth-child(1) { width: 11cqw; aspect-ratio: 9 / 16; }
.beat-shapes i:nth-child(2) { width: 16cqw; aspect-ratio: 1; }
.beat-shapes i:nth-child(3) { width: 26cqw; aspect-ratio: 16 / 9; }
.beat-end { align-items: flex-start; justify-content: flex-end; }
.beat-end .beat-text { font-size: min(7cqw, 14cqh); }
.beat-end .dot { display: inline-block; width: .3em; height: .3em; border-radius: 50%; background: var(--brand, #ff5a1f); margin-left: .06em; }
.film[data-shape="9x16"] .beat { padding: 10cqw; }
.film[data-shape="9x16"] .beat-text { font-size: min(15cqw, 11cqh); }
.film[data-shape="9x16"] .beat-card .beat-text { font-size: min(22cqw, 16cqh); }
.film[data-shape="9x16"] .beat-end .beat-text { font-size: min(13cqw, 9cqh); }
.film[data-shape="9x16"] .beat-small { font-size: min(5cqw, 3.6cqh); }
.film[data-shape="9x16"] .beat-shapes i:nth-child(1) { width: 18cqw; }
.film[data-shape="9x16"] .beat-shapes i:nth-child(2) { width: 26cqw; }
.film[data-shape="9x16"] .beat-shapes i:nth-child(3) { width: 40cqw; }
/* Three editing styles. Serious: lighter type, an underline, a dark card in the brand colour.
   Bold: the default above. Fun: heavy type, a tilted sticker highlight, colour behind the dark beats. */
.film[data-tone="serious"] .beat-text { font-weight: 600; letter-spacing: -0.03em; }
.film[data-tone="serious"] .beat-text .hl { color: inherit; }
.film[data-tone="serious"] .beat-text .hl::before { top: auto; bottom: -.06em; height: .07em; }
.film[data-tone="serious"] .beat-card { background: #0c0c0d; color: var(--brand, #ff5a1f); }
.film[data-tone="fun"] .beat-text { font-weight: 800; letter-spacing: -0.04em; }
.film[data-tone="fun"] .beat-text .hl::before { left: -.12em; right: -.12em; border-radius: .22em; transform: rotate(-3deg) scaleX(var(--sweep, 0)); }
.film[data-tone="fun"] .beat-dark { background: color-mix(in srgb, var(--brand, #ff5a1f) 24%, #000); }
.film[data-tone="fun"] .beat-card .beat-text { transform: rotate(-4deg); }

/* 2. The featured flyover. Never taller than the screen under the bar. Phones: the caption sits under it. */
.feature { position: relative; max-width: min(100%, calc((100svh - var(--bar) - var(--s16)) * 1.25)); margin-inline: auto; border-radius: var(--r-lg); overflow: hidden; border: .5px solid var(--line-2); background: var(--card); transform-origin: 50% 0; will-change: transform; box-shadow: 0 40px 120px -40px rgba(255, 90, 31, .18); }
.feature-video { display: block; width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; background: #f5f7f8; cursor: pointer; }
.feature-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: var(--s4) var(--pad); background: var(--card); }
.feature-title { font-size: var(--t-body); font-weight: 600; letter-spacing: var(--tr-title); }
.feature-buttons { display: flex; gap: var(--s2); flex: none; }
.play { flex: none; width: var(--h-lg); height: var(--h-lg); border-radius: 50%; display: grid; place-items: center; padding: 0; background: var(--raise); border: .5px solid var(--line-2); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transition: transform .35s var(--spring), background .2s; }
.play:hover { background: rgba(44, 44, 46, .85); transform: scale(1.06); }
.play:active { transform: scale(.92); }
.play svg { width: var(--i-md); height: var(--i-md); fill: #fff; }
.play svg path[class^="i-o"] { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; }
.play .i-play, .play .i-on, .play[aria-pressed="true"] .i-off { display: none; }
.play[aria-pressed="true"] .i-on { display: block; }
.paused .play .i-play { display: block; margin-left: 2px; }
.paused .play .i-pause { display: none; }
.feature-line { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255, 255, 255, .12); }
.feature-line span { display: block; height: 100%; width: 0; background: #fff; }

/* 2. Offer: two lengths. The film sits 12px in, so it takes the card's curve minus 12. */
.lanes { display: grid; gap: var(--gap); }
.lane { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--s4); align-items: center; padding: var(--s3); }
/* The preview is a real ad, muted and looping. Phones: a 9:16 thumbnail. iPad up: a 16:10 frame. Each video fills its own shape and sits inside the other. */
.lane-film { position: relative; isolation: isolate; aspect-ratio: 9 / 16; border-radius: calc(var(--r-lg) - var(--s3)); overflow: hidden; border: .5px solid var(--line-2); background: #000; }
/* Where a video doesn't fill its frame, a soft blurred copy of its own frame fills the bars. */
.lane-film::before { content: ""; position: absolute; inset: -10%; z-index: -1; background: center / cover no-repeat; filter: blur(24px) brightness(.55) saturate(1.2); }
.lane-film[data-shape="9x16"]::before { background-image: url(../media/lanes/short.jpg); }
.lane-film[data-shape="16x9"]::before { background-image: url(../media/lanes/long.jpg); }
.lane-film video { width: 100%; height: 100%; object-fit: cover; }
.lane-film[data-shape="16x9"] video { object-fit: contain; }
.lane-copy { display: grid; gap: var(--s1); justify-items: start; }
.lane-price { margin-top: var(--s2); font-size: var(--t-1); line-height: 1.1; font-weight: 600; letter-spacing: var(--tr-head); font-variant-numeric: tabular-nums; }
.lane-price .from { font-size: var(--t-foot); font-weight: 400; letter-spacing: 0; color: var(--muted); }
.lane-price span:last-child { display: inline-block; min-width: 4ch; }
.shapes { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s2); margin-top: var(--s6); color: var(--muted); font-size: var(--t-sub); letter-spacing: var(--tr-body); }
.shapes i { display: inline-block; border: 1.5px solid var(--soft); border-radius: 4px; }
.shapes .s916 { width: 12px; height: 21px; }
.shapes .s11 { width: 18px; height: 18px; }
.shapes .s169 { width: 28px; height: 16px; }
.shapes span { margin-left: var(--s1); }

/* 3. Batch UGC: the copy beside six phones, one per feed, that swap every couple of seconds while they play.
   No text on the phones; a small app icon on each says which feed it is for.
   --w is the middle phone's width: 140 on phones and iPads, 200 on a desktop. The side
   phones are 80% of it, set 78% of it out from the middle, so they tuck 12% behind;
   the other three wait hidden behind the middle for their turn. */
.ugc { display: grid; gap: var(--stack); align-items: center; }
.ugc-copy { display: grid; gap: var(--s4); justify-items: start; }
.ugc-copy .h2 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.ugc-copy .checks { margin-block: var(--s2); }
.checks { display: grid; gap: var(--s3); color: var(--soft); }
.checks li { display: flex; align-items: center; gap: var(--s3); }
.checks li::before { content: ""; flex: none; width: var(--i-md); height: var(--i-md); border-radius: 50%; background: rgba(48, 209, 88, .14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='%2330d158' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.stage { --w: 140px; position: relative; display: grid; gap: var(--s4); margin: 0; isolation: isolate; }
/* Soft light behind the phones: a yellow lime glow and a green one, blurred wide and drifting slowly,
   the way a product shot is lit. Kept low so the phones stay the brightest thing. */
.stage::before, .stage::after { content: ""; position: absolute; z-index: -1; pointer-events: none; border-radius: 50%; filter: blur(56px); }
.stage::before { left: -4%; top: 0; width: 72%; height: 82%; background: radial-gradient(closest-side, rgba(214, 236, 92, .32), rgba(190, 226, 70, .11) 55%, transparent); animation: glow-a 14s ease-in-out infinite alternate; }
.stage::after { right: -4%; top: 14%; width: 68%; height: 78%; background: radial-gradient(closest-side, rgba(140, 214, 98, .28), rgba(100, 196, 110, .1) 55%, transparent); animation: glow-b 16s ease-in-out infinite alternate; }
@keyframes glow-a { to { transform: translate(12%, 8%) scale(1.1); } }
@keyframes glow-b { to { transform: translate(-14%, -6%) scale(1.08); } }
.stage-phones { position: relative; height: calc(var(--w) * 2.1333 + var(--s10)); }
.screen { position: absolute; top: var(--s4); left: 50%; width: var(--w); container-type: inline-size; cursor: pointer; transition: transform .7s var(--spring), filter .5s var(--ease), opacity .4s var(--ease); }
.screen[data-pos="center"] { z-index: 3; transform: translateX(-50%); }
.screen[data-pos="left"] { z-index: 1; transform: translateX(calc(-50% - var(--w) * .78)) translateY(var(--s6)) scale(.8); filter: brightness(.6) saturate(.85); }
.screen[data-pos="right"] { z-index: 1; transform: translateX(calc(-50% + var(--w) * .78)) translateY(var(--s6)) scale(.8); filter: brightness(.6) saturate(.85); }
.screen[data-pos="back"] { z-index: 0; transform: translateX(-50%) translateY(var(--s6)) scale(.6); opacity: 0; pointer-events: none; }
.screen:not([data-pos="center"]):hover { filter: brightness(.8); }
/* Each phone drifts on its own beat, so the three never move together. */
.float { position: relative; animation: bob 6s ease-in-out infinite; }
.screen[data-app="tiktok"] .float { animation-delay: -2s; }
.screen[data-app="shorts"] .float { animation-delay: -4s; }
.screen[data-app="facebook"] .float { animation-delay: -1s; }
.screen[data-app="linkedin"] .float { animation-delay: -3s; }
.screen[data-app="x"] .float { animation-delay: -5s; }
@keyframes bob { 50% { transform: translateY(-8px); } }
.wall-note { text-align: center; font-size: var(--t-foot); letter-spacing: var(--tr-small); color: var(--muted); }

/* The phone is a drawing, sized from its own width: a 3.6% frame, so the screen's curve is 3.6% less than the body's. */
.phone { position: relative; width: 100%; aspect-ratio: 9 / 19.2; border-radius: 17cqw; padding: 3.6cqw; background: linear-gradient(145deg, #3a3a3f, #18181b 40%, #2a2a2e); box-shadow: 0 0 0 1px #4a4a50, 0 24px 48px -16px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(255, 255, 255, .06); transition: box-shadow .4s var(--ease); }
.island { position: absolute; z-index: 4; top: 6cqw; left: 50%; width: 28cqw; height: 8cqw; margin-left: -14cqw; border-radius: var(--r-pill); background: #000; }
.feed { position: relative; width: 100%; height: 100%; border-radius: 13.4cqw; overflow: hidden; background: #000; isolation: isolate; }
.feed video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feed-bar { position: absolute; z-index: 3; left: 10cqw; right: 10cqw; bottom: 7cqw; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .3); overflow: hidden; }
.feed-bar::after { content: ""; position: absolute; inset: 0; background: #fff; transform-origin: left; transform: scaleX(var(--p, 0)); }
/* The app's own icon, tucked on the corner like a notification badge. */
.app-badge { position: absolute; z-index: 5; right: -6cqw; bottom: -5cqw; width: 20cqw; height: 20cqw; display: grid; place-items: center; border-radius: 28%; background: #000; box-shadow: 0 6px 16px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .12); overflow: hidden; }
.app-badge img { width: 62%; height: 62%; }
[data-app="reels"] .app-badge img, [data-app="linkedin"] .app-badge img { width: 100%; height: 100%; }
[data-app="facebook"] .app-badge { background: #fff; }
[data-app="facebook"] .app-badge img { width: 78%; height: 78%; }
[data-app="shorts"] .app-badge { background: #fff; }
.screen[data-pos="left"] .app-badge { right: auto; left: -6cqw; }

/* A 32px close button with a 44px hit area. */
.close::after { content: ""; position: absolute; inset: calc(var(--s3) / -2); }

/* 6. Steps: the line runs through the middle of the 40px numbers and fills as you scroll (site.js sets --p). */
.steps { position: relative; display: grid; gap: var(--s6); }
.steps::before, .steps::after { content: ""; position: absolute; left: calc(var(--s10) / 2 - 1px); top: calc(var(--s10) / 2); bottom: calc(var(--s10) / 2); width: 2px; border-radius: 2px; background: var(--raise); }
.steps::after { background: var(--ink); transform-origin: top; transform: scaleY(var(--p, 0)); }
.steps li { position: relative; z-index: 1; display: flex; gap: var(--s4); align-items: flex-start; }
.step-n { flex: none; width: var(--s10); height: var(--s10); border-radius: 50%; display: grid; place-items: center; background: var(--raise); border: .5px solid var(--line-2); font-size: var(--t-sub); letter-spacing: var(--tr-body); font-weight: 600; transition: background .4s, color .4s; }
.steps li.lit .step-n { background: var(--ink); color: var(--on-ink); animation: popn .6s var(--spring); }
@keyframes popn { 0% { transform: scale(.7); } 100% { transform: none; } }
.steps h3 { padding-top: var(--s2); font-size: var(--t-body); letter-spacing: var(--tr-body); font-weight: 600; }

/* Confidential: a quiet card under the steps, the lock in the same circle as the step numbers. */
.private { display: flex; align-items: center; gap: var(--s4); margin-top: var(--s10); }
.private-icon { flex: none; width: var(--s10); height: var(--s10); border-radius: 50%; display: grid; place-items: center; background: var(--raise); border: .5px solid var(--line-2); }
.private-icon svg { width: var(--i-md); height: var(--i-md); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.private h3 { font-size: var(--t-body); letter-spacing: var(--tr-body); font-weight: 600; }

/* 9. Prompts for the visitor's own AI: one card each, three across on a desktop. */
.prompts { display: grid; gap: var(--gap); }
.prompt { display: grid; grid-template-rows: auto auto 1fr auto; gap: var(--s2); }
.prompt h3 { font-size: var(--t-body); letter-spacing: var(--tr-body); font-weight: 600; }
.prompt details summary { display: inline-flex; align-items: center; min-height: var(--h-sm); font-size: var(--t-foot); letter-spacing: var(--tr-small); color: var(--muted); cursor: pointer; list-style: none; }
.prompt details summary::-webkit-details-marker { display: none; }
.prompt details summary:hover { color: var(--ink); }
.prompt details[open] summary { color: var(--soft); }
.prompt-text { padding: var(--s3); border-radius: var(--r-sm); background: var(--raise); font-size: var(--t-foot); letter-spacing: var(--tr-small); line-height: 1.5; color: var(--soft); }
.prompt-do { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s2); }
.ai-link { flex: none; display: grid; place-items: center; width: var(--h-md); height: var(--h-md); border-radius: 50%; background: var(--wash); border: .5px solid var(--line-2); transition: background .2s, transform .3s var(--spring); }
.ai-link:hover { background: rgba(255, 255, 255, .09); transform: translateY(-1px); }
.ai-link img { width: var(--i-md); height: var(--i-md); }
.copy-prompt svg { width: var(--i-sm); height: var(--i-sm); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Phones and iPads: one grouped list, a row per prompt with its three buttons, so it takes a third of the space. */
@media (max-width: 1023px) {
  .prompts { gap: 0; background: var(--card); border: .5px solid var(--line-2); border-radius: var(--r-lg); overflow: hidden; }
  .prompt { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: none; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); background: none; border: 0; border-radius: 0; }
  .prompt + .prompt { background: linear-gradient(var(--line-2), var(--line-2)) var(--s4) 0 / 100% 1px no-repeat; }
  .prompt .sub, .prompt details { display: none; }
  .prompt-do { margin: 0; }
  .copy-prompt { flex: none; width: var(--h-md); padding: 0; }
  .copy-prompt span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* 4. Work: finished pieces in cards like the offer's. The video sits 12px in, so it takes the card's curve minus 12. */
.work { display: grid; gap: var(--gap); }
/* One piece sits narrow and centred; from two pieces up they share the row. */
.work:has(> :only-child) { max-width: var(--narrow); margin-inline: auto; grid-template-columns: 1fr !important; }
.piece { display: grid; gap: var(--s4); align-content: start; padding: var(--s3) var(--s3) var(--pad); }
.piece-media { position: relative; aspect-ratio: 16 / 9; border-radius: calc(var(--r-lg) - var(--s3)); overflow: hidden; border: .5px solid var(--line-2); background: #000; }
.piece-media video { width: 100%; height: 100%; object-fit: cover; }
.piece-inset { position: absolute; right: var(--s3); bottom: var(--s3); width: 22% !important; height: auto !important; aspect-ratio: 9 / 16; border-radius: var(--r-xs); border: 1px solid rgba(255, 255, 255, .25); box-shadow: 0 12px 32px -8px rgba(0, 0, 0, .7); }
.piece-copy { display: grid; gap: var(--s1); padding-inline: calc(var(--pad) - var(--s3)); }

/* 7. Prices: four tiles, two across on phones and iPads, four on a desktop. */
.price-switch { display: flex; justify-content: center; margin-bottom: var(--stack); }
.price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.price-tile { display: grid; align-content: start; }
.pt-name { font-size: var(--t-body); letter-spacing: var(--tr-body); font-weight: 600; }
.pt-from { margin-top: var(--s4); font-size: var(--t-foot); letter-spacing: var(--tr-small); color: var(--muted); }
.pt-price { font-size: var(--t-1); line-height: 1.1; font-weight: 600; letter-spacing: var(--tr-head); font-variant-numeric: tabular-nums; }
.pt-word { font-size: var(--t-2); letter-spacing: var(--tr-title); }
.price-note { margin-top: var(--s6); }

/* 9. FAQ: a grouped list, separators inset to the text like iOS. */
.faq { max-width: var(--narrow); margin-inline: auto; background: var(--card); border-radius: var(--r-lg); border: .5px solid var(--line-2); overflow: hidden; }
.faq details + details { background: linear-gradient(var(--line-2), var(--line-2)) var(--pad) 0 / 100% 1px no-repeat; }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--s4); padding: var(--s4) var(--pad); font-weight: 500; transition: background .2s; }
.faq summary:hover { background: rgba(255, 255, 255, .03); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: var(--s2); height: var(--s2); border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); transition: transform .4s var(--spring); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { max-width: var(--measure); padding: 0 var(--pad) var(--pad); color: var(--muted); }
.faq details[open] p { animation: open .4s var(--ease); }
@keyframes open { from { opacity: 0; transform: translateY(-6px); } }

/* 10. Book: a small, quiet close. Phones: centred and stacked. iPad up: one row, the
   question and how to pay on the left, the two buttons on the right. */
.book { display: grid; justify-items: center; gap: var(--s4); text-align: center; }
.book-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); }
.pays { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s2) 0; font-size: var(--t-foot); letter-spacing: var(--tr-small); font-weight: 500; color: var(--muted); }
.pays li { display: inline-flex; align-items: center; gap: var(--s2); padding: 0 var(--s3); }
.pays li + li { border-left: .5px solid var(--line-2); }
.mc { width: 22px; height: 14px; }
.clock { margin-top: var(--s4); text-align: center; font-variant-numeric: tabular-nums; }

/* Footer: half a section below the last card. Phones stack it in one centred column. */
.foot { display: flex; flex-direction: column; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--s1); text-align: center; padding-top: calc(var(--section) / 2); padding-bottom: calc(var(--s12) + env(safe-area-inset-bottom, 0px)); font-size: var(--t-sub); letter-spacing: var(--tr-body); }
.foot-links { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0 var(--s6); color: var(--soft); }
.foot-links a { display: inline-flex; align-items: center; min-height: var(--h-md); text-decoration: none; transition: color .2s; }
.foot-links a:hover, .copy:hover { color: var(--ink); }
.copy { display: inline-flex; align-items: center; gap: var(--s2); min-height: var(--h-md); border: 0; background: none; padding: 0; color: inherit; }
.copy svg { width: var(--i-md); height: var(--i-md); fill: none; stroke: currentColor; stroke-width: 1.6; }


/* The sheet: from the bottom on phones, centred from the iPad up. */
.sheet-wrap { position: fixed; inset: 0; z-index: 50; display: grid; align-items: end; justify-items: center; background: rgba(0, 0, 0, .55); animation: fade .3s var(--ease); }
.sheet-wrap.closing { animation: fade .25s var(--ease) reverse forwards; }
.sheet { width: 100%; max-width: var(--w-sheet); max-height: 92svh; overflow-y: auto; padding: var(--s2) var(--s5) calc(var(--s6) + env(safe-area-inset-bottom, 0px)); border-radius: var(--r-xl) var(--r-xl) 0 0; background: var(--sheet); border: .5px solid var(--line-2); border-bottom: 0; animation: up .55s var(--spring); }
.closing .sheet { animation: down .3s var(--ease) forwards; }
@keyframes up { from { transform: translateY(60%); } }
@keyframes down { to { transform: translateY(100%); } }
.sheet-drag { touch-action: none; cursor: grab; padding-top: 2px; }
.grabber { display: block; width: 36px; height: 5px; margin: 0 auto var(--s3); border-radius: 3px; background: #48484a; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s4); }
.close { position: relative; width: var(--s8); height: var(--s8); border-radius: 50%; border: 0; background: var(--fill); display: grid; place-items: center; padding: 0; transition: transform .3s var(--spring); }
.close:active { transform: scale(.9); }
.close svg { width: 14px; height: 14px; fill: none; stroke: #aeaeb2; stroke-width: 2.4; stroke-linecap: round; }
.form { display: grid; gap: var(--s4); }
.form .fine a { padding-block: var(--s3); color: var(--ink); text-underline-offset: 3px; } /* inline padding: a 44px hit area, same line height */
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chips button { min-height: var(--h-md); padding: 0 var(--s4); border-radius: var(--r-pill); border: 0; background: var(--fill); font-size: var(--t-sub); letter-spacing: var(--tr-body); transition: background .2s, color .2s, transform .3s var(--spring); }
.chips button:active { transform: scale(.94); }
.chips button[aria-checked="true"] { background: var(--ink); color: var(--on-ink); }
.group { border-radius: var(--r-md); background: var(--fill); overflow: hidden; }
.group label { display: grid; grid-template-columns: var(--s20) minmax(0, 1fr); align-items: center; gap: var(--s2); min-height: var(--h-lg); padding: 0 var(--s4); }
.group label + label { background: linear-gradient(rgba(255, 255, 255, .12), rgba(255, 255, 255, .12)) var(--s4) 0 / 100% 1px no-repeat; }
.group label.tall { align-items: start; padding-top: var(--s3); }
.group input, .group textarea { min-width: 0; min-height: var(--h-lg); padding: 0; border: 0; background: none; outline: none; font-size: var(--t-body); letter-spacing: var(--tr-body); caret-color: var(--accent); }
.group label.tall span { line-height: 1.47; }
.group textarea { min-height: var(--s20); resize: none; padding-bottom: var(--s3); }
.group input::placeholder, .group textarea::placeholder { color: var(--faint); }
.group [aria-invalid="true"]::placeholder { color: var(--bad); }
.group.shake { animation: shake .4s var(--ease); }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.chosen { padding: var(--s3) var(--s4); border-radius: var(--r-sm); background: var(--fill); font-size: var(--t-sub); letter-spacing: var(--tr-body); }
.form-status:empty { display: none; }
.form-status { font-size: var(--t-sub); letter-spacing: var(--tr-body); }
.form-status.err { color: var(--bad); }
.sent { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); border-radius: var(--r-md); background: var(--fill); animation: pop .6s var(--spring); }
.sent img { flex: none; width: var(--s12); height: var(--s12); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Scroll reveal and words arriving one by one (site.js). */
.reveal { opacity: 0; transform: translateY(22px) scale(.985); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.wd { display: inline-block; opacity: 0; transform: translateY(.45em); filter: blur(6px); transition: opacity .7s var(--ease), transform .8s var(--spring), filter .7s var(--ease); transition-delay: calc(var(--i) * 45ms); }
.words-in .wd { opacity: 1; transform: none; filter: blur(0); }

/* Plain pages: privacy and 404. Narrow, like a letter. */
.doc { max-width: calc(var(--narrow) + var(--gl) + var(--gr)); display: grid; gap: var(--s4); padding-top: calc(var(--s8) + env(safe-area-inset-top, 0px)); padding-bottom: var(--section); }
.doc-back { margin-bottom: var(--s6); }
.doc h1 { font-size: var(--t-h1); line-height: 1.1; font-weight: 600; letter-spacing: var(--tr-head); }
.doc-date { margin-bottom: var(--s2); color: var(--muted); font-size: var(--t-sub); letter-spacing: var(--tr-body); }
.doc h2 { margin-top: var(--s6); font-size: var(--t-3); line-height: 1.2; font-weight: 600; letter-spacing: var(--tr-title); }
.doc p { max-width: var(--measure); color: var(--soft); }
.doc p a:not(.pill):not(.mark) { color: var(--ink); text-underline-offset: 3px; text-decoration-color: var(--line-2); }
.lost { min-height: 80svh; align-content: center; }
.lost .pill { margin-top: var(--s2); }

/* The secret Why James? page: a letter, with a memoji at each end. */
.why-me { width: var(--s20); height: auto; margin-bottom: var(--s2); animation: pop .8s var(--spring) both; }
.why-found { font-size: var(--t-foot); letter-spacing: var(--tr-small); color: var(--accent-ink); font-weight: 600; }
.why-lead { font-size: var(--t-lead); line-height: 1.2; font-weight: 500; letter-spacing: var(--tr-head); color: var(--ink) !important; text-wrap: balance; margin-bottom: var(--s4); }
.why-list { max-width: var(--measure); }
.why-list li { align-items: flex-start; }
.why-list li::before { margin-top: 2px; }
.why-sign { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s6); }
.why-sign img { width: var(--s16); height: auto; }
.why-sign p { font-size: var(--t-3) !important; letter-spacing: var(--tr-title); font-weight: 600; color: var(--ink) !important; }
.why-actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s4); }

/* Very small phones */
@media (max-width: 359px) {
  .proof li { padding: 0 var(--s3); }
  .pt-price { font-size: var(--t-2); letter-spacing: var(--tr-title); }
  .pt-word { font-size: var(--t-3); letter-spacing: var(--tr-title); }
}

/* ---------- iPad: 744px and up ---------- */
@media (min-width: 744px) {
  .tabs { display: flex; margin-left: auto; }
  .mark { margin-right: 0; }

  .secret-avatar { display: none; }
  .secret-me { display: block; cursor: pointer; }
  /* On the big memoji the bubble sits up and left, by the hand. */
  .secret-me .bubble { top: 6%; left: auto; right: 74%; border-radius: var(--r-md) var(--r-md) var(--s1) var(--r-md); transform-origin: right bottom; }
  .hero { grid-template-columns: minmax(0, 1fr) auto; }
  .hero-me { display: block; width: 176px; }

  /* The caption moves onto the film. */
  .feature-foot { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; align-items: flex-end; padding: var(--s16) var(--pad) var(--pad); background: linear-gradient(transparent, rgba(0, 0, 0, .35) 35%, rgba(0, 0, 0, .78)); pointer-events: none; }
  .feature-foot > * { pointer-events: auto; }
  .feature-title { font-size: var(--t-3); letter-spacing: var(--tr-title); margin-bottom: var(--s1); }
  .feature .play { background: rgba(28, 28, 30, .7); border-color: rgba(255, 255, 255, .18); }
  .chip-tl { top: var(--s4); left: var(--s4); }
  .chip-tr { top: var(--s4); right: var(--s4); }

  .lanes { grid-template-columns: 1fr 1fr; }
  .lane { grid-template-columns: 1fr; align-items: start; padding: var(--s3) var(--s3) var(--pad); }
  .lane-copy { padding-inline: calc(var(--pad) - var(--s3)); }
  .lane-film { aspect-ratio: 16 / 10; }
  .lane-film[data-shape="9x16"] video { object-fit: contain; }
  .lane-film[data-shape="16x9"] video { object-fit: cover; }

  .ugc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s8); }
  .work { grid-template-columns: 1fr 1fr; }
  .menu { display: none !important; }

  .steps { grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
  /* From the middle of the first number to the middle of the last. */
  .steps::before, .steps::after { left: calc(var(--s10) / 2); right: calc((100% - 2 * var(--gap)) / 3 - var(--s10) / 2); top: calc(var(--s10) / 2 - 1px); bottom: auto; width: auto; height: 2px; }
  .steps::after { transform-origin: left; transform: scaleX(var(--p, 0)); }
  .steps li { flex-direction: column; gap: var(--s4); }
  .steps h3 { padding-top: 0; }



  .book { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title actions" "pays actions"; justify-items: start; align-items: center; gap: var(--s2) var(--s6); text-align: left; }
  .book .h3 { grid-area: title; }
  .book-actions { grid-area: actions; }
  .pays { grid-area: pays; justify-content: flex-start; }
  .pays li:first-child { padding-left: 0; }
  .foot { flex-direction: row; justify-content: space-between; gap: var(--s5); text-align: left; }

  .sheet-wrap { align-items: center; }
  .sheet { padding: var(--s6); border-radius: var(--r-xl); border-bottom: .5px solid var(--line-2); }
  .sheet-drag { cursor: default; }
  .grabber { display: none; }
}

/* ---------- Desktop: 1024px and up ---------- */
@media (min-width: 1024px) {
  .hero-me { width: 208px; }
  /* The copy on the left, the phones on the right. */
  .ugc { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s10); }
  .stage { --w: 200px; }
  .price-grid { grid-template-columns: repeat(4, 1fr); }
  .prompts { grid-template-columns: repeat(3, 1fr); }
  .pt-price { font-size: var(--t-large); }
  .pt-word { font-size: var(--t-1); }
}

@media (prefers-reduced-motion: reduce) {
  .js [data-in] { opacity: 1; transform: none; filter: none; animation: none !important; }
  .avatar, .hero-me, .sheet, .sheet-wrap, .sent, .reveal { opacity: 1; transform: none; }
  .feature, .tilt { transform: none !important; }
  .wd { opacity: 1; transform: none; filter: none; transition: none; }
  .screen, .phone { transition: none; }
  .menu, .menu-list li { animation: none; }
  .float, .stage::before, .stage::after { animation: none; }
}