/* Cozy Digital landing. Shared brand tokens remain in tokens.css.
   Photograph warmth lives in the media; interface colours use only Cozy tokens. */

* { box-sizing: border-box; }
html { scroll-behavior: auto; scroll-padding-top: 100px; }
body { margin: 0; color: var(--ink); background: var(--bg); font-family: var(--font); -webkit-font-smoothing: antialiased; }
body:has(dialog[open]), body.inspirations-open { overflow: hidden; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { color: inherit; cursor: pointer; }
img, video { display: block; max-width: 100%; }
button, input, select, textarea { border-radius: 0; }
button:disabled { cursor: wait; opacity: .6; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid var(--cyan); outline-offset: 5px; }
[hidden] { display: none !important; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 500; }
em { font-family: var(--font-serif); font-weight: 400; }
::selection { background: var(--indigo); color: var(--bg); }
.wrap { width: min(1320px, calc(100% - 112px)); margin-inline: auto; }
.chapter { scroll-margin-top: 96px; position: relative; }
.chapter:focus { outline: none; }
.section-pad { padding-block: clamp(90px, 10vw, 148px); }
.skip-link { position: fixed; top: 12px; left: 16px; z-index: 100; transform: translateY(-160%); padding: 14px 20px; background: var(--cyan); color: var(--bg); border-radius: 6px; }
.skip-link:focus { transform: translateY(0); }

.site-header { position: absolute; inset: 0 0 auto; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 36px; min-height: 92px; padding: 20px 42px; }
.brand-link { flex: 0 0 auto; display: inline-flex; align-items: center; }
.brand-link img { width: 190px; height: 36px; object-fit: contain; }
.header-links { display: flex; align-items: center; gap: 30px; margin-left: auto; font-size: 13px; font-weight: 500; }
.header-links a { padding-block: 12px; color: var(--ink); transition: color .2s; }
.header-links a:hover { color: var(--cyan); }
.button, .btn { display: inline-flex; align-items: center; justify-content: center; gap: 16px; min-height: 54px; padding: 16px 24px; border: 1px solid transparent; border-radius: 999px; font-size: 14px; line-height: 1.2; font-weight: 600; white-space: nowrap; text-align: center; transition: background .2s, color .2s, border-color .2s, transform .2s; }
.button:hover, .btn:hover { transform: translateY(-2px); }
.button:active, .btn:active { transform: translateY(0); }
.button-primary, .btn-solid { background: var(--cyan); color: var(--on-accent); }
.button-primary:hover, .btn-solid:hover { background: var(--cyan-deep); }
.button-secondary, .btn-ghost { color: var(--ink); background: rgb(8 9 11 / .38); border-color: var(--line-2); }
.button-secondary:hover, .btn-ghost:hover { border-color: var(--cyan); background: var(--panel); }
.button-header { min-height: 44px; padding: 12px 18px; background: var(--ink); color: var(--on-accent); font-size: 12px; }
.button-header:hover { background: var(--cyan); }
.button-wide { width: 100%; }
.button-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.text-link { display: inline-flex; align-items: center; gap: 22px; font-size: 14px; font-weight: 500; padding-bottom: 6px; border-bottom: 1px solid var(--line-2); }
.text-link:hover { color: var(--cyan); border-color: var(--cyan); }
.play-symbol { font-size: 21px; line-height: .8; }

/* A real CSS cylinder: the glyph positions are measured by landing-motion.js. */
.hero { height: 165svh; min-height: 100svh; background: var(--bg); }
.hero-sticky { position: sticky; top: 0; height: 100svh; min-height: 680px; overflow: hidden; isolation: isolate; display: grid; align-items: center; }
.hero-scene { --mug-x: 88%; --mug-y: 60%; position: absolute !important; inset: 0; border-radius: 0 !important; transform-origin: var(--mug-x) var(--mug-y); transform: translate3d(calc((50% - var(--mug-x)) * var(--scene-pan, 0)), calc((50% - var(--mug-y)) * var(--scene-pan, 0)), 0) scale(var(--scene-scale, 1)); opacity: var(--scene-opacity, 1); will-change: transform, opacity; }
.hero-scene .video-poster, .hero-scene .video-poster img, .hero-scene video { width: 100%; height: 100%; object-fit: cover; }
.hero-scene .video-poster img, .hero-scene video { object-position: 64% 50%; }
.hero-shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgb(8 9 11 / .82) 0%, rgb(8 9 11 / .67) 30%, rgb(8 9 11 / .12) 66%, rgb(8 9 11 / .09) 100%), linear-gradient(180deg, rgb(8 9 11 / .4), transparent 24%, transparent 56%, rgb(8 9 11 / .35) 80%, var(--bg)); }
.steam-wash { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: calc(var(--hero-exit, 0) * .56); background: radial-gradient(ellipse at 60% 64%, rgb(237 240 237 / .24), rgb(103 232 249 / .035) 46%, transparent 72%); }
.hero-orbit { position: absolute; left: 75%; top: 42%; z-index: 3; width: 74vmin; height: 74vmin; perspective: 5400px; transform: translate(-50%, -50%); pointer-events: none; }
.hero-ring { --ring-radius: 37vmin; position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateX(18deg) rotateY(var(--ring-rotation, 60deg)); font-family: var(--font-brand); font-weight: 700; font-size: clamp(22px, 7vmin, 76px); color: var(--ink); }
.hero-orbit { opacity: var(--ring-opacity, 1); }
.hero-ring:not(:has(.ring-letter)) { display: flex; align-items: center; justify-content: center; font-size: clamp(26px, 5vw, 64px); white-space: nowrap; transform: none; }
.ring-letter { position: absolute; left: 50%; top: 50%; display: block; white-space: pre; line-height: 1.2; opacity: var(--letter-opacity, 1); transform: translate(-50%, -50%) rotateY(var(--letter-angle)) translateZ(var(--ring-radius)) translateY(var(--letter-y, 0px)); clip-path: inset(0 0 var(--letter-clip, 0%) 0); backface-visibility: visible; text-shadow: 0 2px 20px rgb(8 9 11 / .25); }
.ring-letter:nth-child(15n + 14) { color: var(--cyan); }
.hero-copy { position: relative; z-index: 4; padding-top: 60px; opacity: var(--copy-opacity, 1); transform: translateY(var(--copy-y, 0px)); will-change: transform, opacity; }
.chapter-label { display: flex; align-items: center; gap: 14px; color: var(--muted); font-size: 12px; font-weight: 500; line-height: 1.5; margin-bottom: 25px; }
.chapter-label > span { color: var(--cyan); font-size: 11px; letter-spacing: .04em; }
.hero-title { max-width: 650px; font-size: clamp(66px, 6.1vw, 88px); line-height: 1.04; letter-spacing: -.06em; padding-bottom: .07em; text-wrap: balance; }
.hero-title em { letter-spacing: -.025em; line-height: 1.1; }
.hero-description { max-width: 415px; margin-top: 26px; font-size: 16px; line-height: 1.65; color: var(--ink); }
.hero-price { margin-top: 19px; font-size: 12px; line-height: 1.6; color: var(--muted); }
.motion-toggle { position: absolute; right: 42px; bottom: 44px; z-index: 5; display: flex; align-items: center; gap: 9px; border: 1px solid var(--line-2); border-radius: 999px; padding: 10px 14px; background: rgb(8 9 11 / .65); font-size: 11px; color: var(--ink); }
.motion-icon { display: inline-block; width: 12px; text-align: center; }

.chapter-heading { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: 80px; align-items: end; margin-bottom: 64px; }
.section-title { font-size: clamp(48px, 5.15vw, 74px); line-height: 1.05; letter-spacing: -.055em; padding-bottom: .06em; text-wrap: balance; }
.section-title em { letter-spacing: -.02em; line-height: 1.12; }
.section-description { max-width: 360px; padding-bottom: 10px; color: var(--muted); font-size: 15px; line-height: 1.75; }
[data-reveal], [data-r] { opacity: var(--reveal-opacity, 1); transform: translateY(var(--reveal-y, 0px)); }
.media-frame { position: relative; overflow: hidden; background: var(--panel); border-radius: 14px; isolation: isolate; }
.media-frame > .video-poster, .media-frame > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.media-frame > picture.video-poster img { width: 100%; height: 100%; object-fit: cover; }
.media-frame > video { z-index: 1; opacity: 0; transition: opacity .45s; }
.media-frame.is-playing > video, .media-frame > video[data-playing="true"] { opacity: 1; }
.video-poster { z-index: 0; }

.how { margin-top: -1px; padding-top: 96px; background: var(--bg); }
.motion-ready .how { margin-top: calc(-1 * var(--hero-window, 100svh)); z-index: 2; opacity: var(--how-opacity, 0); pointer-events: var(--how-interaction, none); }
.process-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 44px; row-gap: 56px; }
.process-send { grid-column: span 5; }
.process-make { grid-column: span 7; margin-top: 74px; }
.process-send .process-media { aspect-ratio: 5 / 4; }
.process-make .process-media { aspect-ratio: 16 / 10; }
.process-media img, .process-media video { object-position: center; }
.step-copy { display: flex; gap: 20px; margin-top: 26px; }
.step-number { color: var(--cyan); font-size: 11px; font-weight: 500; line-height: 2.8; }
.step-copy h3, .process-post h3 { font-size: 32px; letter-spacing: -.035em; line-height: 1.2; }
.step-copy p, .process-post p { color: var(--muted); font-size: 14px; line-height: 1.75; max-width: 400px; margin-top: 12px; }
.process-post { position: relative; grid-column: 1 / -1; display: grid; grid-template-columns: 25px .8fr 1.4fr 1fr 56px; align-items: center; gap: 24px; padding: 32px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.process-post p { margin: 0; }
.process-post .text-link { justify-self: center; white-space: nowrap; }
.process-brand { width: 48px; height: 48px; }
.human-note { display: flex; gap: 12px; align-items: center; margin-top: 34px; font-size: 12px; color: var(--muted); }
.human-note img { flex: 0 0 20px; }

.reel { background: var(--bg-2); }
.reel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 26px; }
.reel-item { min-width: 0; }
.reel-feature { grid-column: span 2; }
.reel-feature .media-frame { aspect-ratio: 16 / 9; }
.reel-tall .media-frame { aspect-ratio: auto; height: calc(100% - 38px); min-height: 260px; }
.reel-item .media-frame { aspect-ratio: 16 / 10; border-radius: 10px; }
.reel-item.reel-tall .media-frame { width: 100%; aspect-ratio: auto; }
.reel-item.reel-feature .media-frame { aspect-ratio: 16 / 9; }
.reel-wide { grid-column: span 1; }
.reel-item figcaption { display: flex; gap: 10px; justify-content: space-between; padding-top: 16px; font-size: 12px; line-height: 1.5; }
.reel-item figcaption span:last-child { color: var(--muted); font-size: 10px; }
.reel-footer { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 50px; }
.reel-footer p { font-family: var(--font-serif); font-style: italic; font-size: 30px; }
.reel-more { grid-column: 1 / -1; }
.reel-more > summary { cursor: pointer; width: fit-content; padding: 12px 0; color: var(--muted); font-size: 13px; }
.more-reel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 26px; padding-top: 24px; }

.agent { background: var(--bg); }
.agent-scene { aspect-ratio: 16 / 8.8; margin-top: 8px; border-radius: 16px; }
.agent-scene img, .agent-scene video { object-position: center; }
.agent-scene-shade { position: absolute; inset: 0; z-index: 2; background: linear-gradient(90deg, rgb(8 9 11 / .73), rgb(8 9 11 / .15) 66%, transparent), linear-gradient(0deg, rgb(8 9 11 / .48), transparent 80%); }
.agent-scene-copy { position: absolute; z-index: 3; left: 6%; bottom: 12%; max-width: 55%; }
.agent-scene-copy > img { position: static; width: 40px; height: 40px; margin-bottom: 26px; }
.agent-scene-copy h3 { font-size: clamp(38px, 4.3vw, 62px); line-height: 1.03; letter-spacing: -.04em; margin-bottom: 30px; }
.agent-scene-copy h3 em { line-height: 1.13; }
.agent-details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 52px; margin-top: 44px; }
.agent-details p { display: grid; grid-template-columns: 24px 1fr; column-gap: 12px; row-gap: 12px; font-size: 14px; line-height: 1.65; }
.agent-details strong { font-weight: 500; }
.agent-details p > span:last-child { grid-column: 2; color: var(--muted); font-size: 13px; }
.detail-index { color: var(--cyan); font-size: 10px; padding-top: 3px; }

.pricing { background: var(--bg-2); }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.plan { display: flex; position: relative; flex-direction: column; align-items: flex-start; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 42px 30px 30px; }
.plan.featured { border-color: var(--cyan); background: var(--panel-2); }
.plan.featured::before { content: ""; position: absolute; left: 30px; right: 30px; top: 0; height: 2px; background: var(--grad); }
.tag { display: inline-flex; color: var(--cyan); font-size: 10px; line-height: 1; position: absolute; top: 18px; right: 22px; }
.plan h3 { font-size: 26px; letter-spacing: -.035em; }
.price { display: flex; align-items: baseline; gap: 8px; margin-top: 24px; font-size: 13px; }
.price b { font-family: var(--font-display); font-weight: 500; font-size: 62px; letter-spacing: -.055em; line-height: 1.1; }
.price > span { color: var(--muted); }
.plan > p { margin-top: 18px; font-size: 13px; line-height: 1.7; color: var(--muted); min-height: 68px; }
.plan ul { list-style: none; margin: 28px 0 30px; padding: 0; width: 100%; }
.plan li { display: flex; align-items: baseline; gap: 12px; font-size: 12px; line-height: 1.65; margin-top: 12px; }
.plan li::before { content: "✓"; color: var(--cyan); font-size: 12px; flex: 0 0 12px; }
.plan .btn { width: 100%; margin-top: auto; font-size: 13px; min-height: 50px; padding-inline: 14px; }
/* The dark ghost tint suits buttons over photos, not the light plan cards. */
.plan .btn-ghost { background: var(--panel); border-color: var(--line-2); }
.plan .btn-ghost:hover { background: var(--panel); border-color: var(--cyan); }
.packs { margin-top: 30px; color: var(--muted); font-size: 12px; line-height: 1.8; text-align: center; }
.pricing-loading { font-size: 15px; color: var(--muted); padding-block: 50px; }
.plan .plan-topup { margin-top: auto; margin-bottom: 20px; font-size: 13px; color: var(--muted); }
.packs .credit-terms { display: block; margin-top: 16px; }
.packs > a { display: inline-block; margin-top: 16px; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.checkout-status { margin: 28px auto 0; max-width: 60ch; font-size: 14px; line-height: 1.7; text-align: center; color: var(--ink); }
.checkout-status a { color: inherit; text-decoration: underline; text-underline-offset: 4px; }

.start { padding-bottom: 110px; background: var(--bg); }
.start-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 64px; align-items: stretch; }
.start-photo { min-height: 610px; }
.start-photo > img, .start-photo > video { object-position: 58% center; }
.start-photo-shade { position: absolute; z-index: 2; inset: 0; background: linear-gradient(0deg, rgb(8 9 11 / .92), transparent 66%); }
.start-photo > p { position: absolute; z-index: 3; left: 36px; right: 36px; bottom: 40px; font-family: var(--font-display); font-size: 42px; line-height: 1.08; letter-spacing: -.035em; }
.start-photo > p em { line-height: 1.15; }
.lead { min-width: 0; }
.lead label { display: block; position: relative; color: var(--ink); font-size: 12px; font-weight: 500; line-height: 1.5; margin-bottom: 19px; }
.form-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.lead input:not([type=file]), .lead select, .lead textarea { width: 100%; display: block; margin-top: 9px; border: 1px solid var(--line); border-radius: 8px; min-height: 48px; padding: 13px 14px; color: var(--ink); background: var(--panel); font-size: 13px; font-weight: 400; line-height: 1.5; transition: border-color .2s; }
.lead textarea { resize: vertical; min-height: 100px; }
.lead input::placeholder, .lead textarea::placeholder { color: var(--muted); opacity: 1; }
.lead input:hover, .lead select:hover, .lead textarea:hover { border-color: var(--line-2); }
.lead input:focus, .lead select:focus, .lead textarea:focus { border-color: var(--cyan); }
.optional { display: inline-block; color: var(--muted); font-size: 10px; font-weight: 400; margin-left: 5px; }
.honeypot { position: absolute !important; width: 1px !important; height: 1px !important; clip-path: inset(50%); overflow: hidden; white-space: nowrap; padding: 0 !important; margin: 0 !important; opacity: 0; pointer-events: none; }
.dropzone { position: relative; padding: 24px 16px 20px; border: 1px dashed var(--line-2); border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 15px; background: var(--bg-2); margin-bottom: 20px; }
.dropzone.over, .dropzone:focus-within { border-color: var(--cyan); background: var(--panel); }
.dropzone > input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; z-index: 2; cursor: pointer; }
.dropzone p { pointer-events: none; }
.dropzone p strong, .dropzone p span { display: block; }
.dropzone p strong { font-size: 12px; font-weight: 500; margin-bottom: 6px; }
.dropzone p span { color: var(--muted); font-size: 10px; line-height: 1.6; }
.upload-symbol { font-size: 24px; color: var(--cyan); }
.picked { position: relative; z-index: 3; display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0; width: 100%; }
.picked:empty { display: none; }
.picked li { background: var(--panel-2); padding: 7px 10px; border-radius: 6px; font-size: 10px; word-break: break-word; }
.picked li.ok { color: var(--cyan); }
.picked li.bad { text-decoration: underline; color: var(--violet); }
.form-note { color: var(--muted); text-align: center; font-size: 10px; margin-top: 13px; }
.form-msg { font-size: 12px; line-height: 1.7; margin-top: 15px; }
.form-msg:empty { display: none; }
.form-msg.ok, .form-msg.bad { padding: 13px 15px; background: var(--panel); border-left: 2px solid var(--cyan); }
.form-msg.bad { border-color: var(--violet); }

.site-footer { border-top: 1px solid var(--line); padding-top: 40px; padding-bottom: 140px; display: flex; justify-content: space-between; align-items: flex-start; gap: 35px; }
.site-footer > p { font-family: var(--font-serif); font-style: italic; font-size: 24px; padding-top: 3px; }
.site-footer > div { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; padding-top: 3px; font-size: 11px; color: var(--muted); }
.site-footer > div a:hover { color: var(--cyan); }

.chapter-nav { position: fixed; z-index: 40; left: 50%; bottom: max(25px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: 264px; }
.chapter-toggle { width: 100%; display: grid; grid-template-columns: 25px 22px 1fr 18px; align-items: center; gap: 10px; border: 1px solid var(--line-2); border-radius: 999px; padding: 15px 19px; background: rgb(20 22 25 / .93); box-shadow: 0 8px 32px rgb(8 9 11 / .4); backdrop-filter: blur(18px); min-height: 56px; text-align: left; }
#chapter-number { color: var(--muted); font-size: 10px; }
#chapter-name { font-size: 12px; font-weight: 500; }
.menu-symbol { position: relative; display: block; width: 14px; height: 14px; }
.menu-symbol i { position: absolute; top: 6px; left: 0; display: block; width: 14px; height: 1px; background: var(--ink); transition: transform .2s; }
.menu-symbol i:last-child { transform: rotate(90deg); }
.chapter-toggle[aria-expanded=true] .menu-symbol i:last-child { transform: rotate(0); }
.chapter-menu { position: absolute; left: 0; right: 0; bottom: 68px; padding: 8px; margin: 0; list-style: none; background: rgb(20 22 25 / .97); border: 1px solid var(--line-2); border-radius: 17px; box-shadow: 0 18px 60px rgb(8 9 11 / .65); backdrop-filter: blur(22px); }
.chapter-menu a { display: grid; grid-template-columns: 25px 1fr 15px; gap: 10px; align-items: center; border-radius: 10px; padding: 15px 13px; font-size: 12px; }
.chapter-menu a > span:first-child { color: var(--muted); font-size: 10px; }
.chapter-menu a > span:last-child { color: var(--dim); }
.chapter-menu a:hover, .chapter-menu a:focus-visible { background: var(--panel-2); color: var(--cyan); }
.chapter-menu a[aria-current] { background: var(--panel-2); }
.chapter-menu a[aria-current] > span:first-child, .chapter-menu a[aria-current] > span:last-child { color: var(--cyan); }
.noscript-note { width: min(800px, calc(100% - 48px)); margin: 0 auto 110px; font-size: 13px; line-height: 1.8; color: var(--muted); }
.noscript-note a { text-decoration: underline; }

/* Daylight surfaces frame the existing cinematic media. */
.hero,.site-header,.agent-scene { --ink:#f7f8f4; --muted:#d3ddd9; --cyan:#67e8f9; --cyan-deep:#b1f4ff; --on-accent:#102c34; --line-2:#ffffff70; color:var(--ink) }
.button,.btn { border-radius:5px }
.hero .button-secondary { background:#102c3470 }
.motion-toggle { color:#f7f8f4; border-color:#ffffff70; border-radius:5px }
.plan { background:transparent; border:0; border-top:2px solid var(--line); border-radius:0; padding-inline:24px }
.plan.featured { background:#e0f0e9; border-top-color:var(--cyan) }
.chapter-toggle,.chapter-menu { background:#fffefa; color:var(--ink); border-radius:6px; border-color:var(--line); box-shadow:0 8px 30px #17303914 }
.chapter-menu a { border-radius:3px }
.site-footer .brand-link { padding:10px 14px; background:#173039; border-radius:5px }
.inspiration-dialog { border-radius:8px }
.form input,.form select,.form textarea { color:var(--ink); background:#fffefa }

/* The optional inspiration constellation never changes the main reading order. */
.inspiration-trigger { padding: 0; background: none; border: 0; color: var(--muted); font-size: 11px; text-align: right; text-decoration: underline; text-underline-offset: 4px; }
.inspiration-trigger:hover { color: var(--cyan); }
.inspiration-dialog { max-width: min(1020px, calc(100vw - 48px)); width: 100%; max-height: calc(100svh - 48px); margin: auto; padding: 44px; color: var(--ink); background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 22px; overflow: auto; }
.inspiration-dialog::backdrop { background: rgb(8 9 11 / .88); backdrop-filter: blur(15px); }
.inspiration-head { position: relative; padding-right: 46px; margin-bottom: 34px; }
.inspiration-head h2 { font-size: 40px; line-height: 1.1; letter-spacing: -.045em; }
.inspiration-head > p { max-width: 500px; margin-top: 14px; color: var(--muted); font-size: 13px; line-height: 1.7; }
.inspiration-close { position: absolute; top: 0; right: 0; width: 38px; height: 38px; display: grid; place-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 50%; font-size: 23px; }
.inspiration-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 38px 30px; padding: 12px 0; }
.portrait-card { border: 0; background: none; padding: 0; min-width: 0; display: block; text-align: center; transform: translate(var(--portrait-x, 0px), var(--portrait-y, 0px)) rotate(var(--portrait-rotate, 0deg)); }
.portrait-card img { width: min(160px, 100%); height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 1px solid var(--line-2); margin-inline: auto; background: var(--panel); }
.portrait-card:nth-child(even) img { border-color: var(--indigo); }
.portrait-card strong { display: block; font-family: var(--font-display); font-weight: 500; font-size: 18px; letter-spacing: -.025em; margin-top: 16px; line-height: 1.3; }
.portrait-card span { display: block; color: var(--muted); font-size: 11px; margin-top: 5px; line-height: 1.5; }
.portrait-card:hover img, .portrait-card:focus-visible img { border-color: var(--cyan); }
.inspiration-note { font-size: 10px; color: var(--muted); line-height: 1.6; margin-top: 32px; text-align: center; }

@media (min-width: 1600px) {
  .hero-orbit { left: 73%; }
  .hero-copy { padding-top: 30px; }
}
@media (max-width: 1199px) {
  .wrap { width: calc(100% - 72px); }
  .site-header { padding-inline: 28px; gap: 20px; }
  .brand-link img { width: 168px; height: 32px; }
  .header-links { gap: 20px; font-size: 12px; }
  .hero-title { font-size: 72px; max-width: 530px; }
  .hero-description { max-width: 375px; font-size: 15px; }
  .hero-orbit { left: 78%; }
  .chapter-heading { gap: 48px; }
  .section-title { font-size: 58px; }
  .process-grid { column-gap: 28px; }
  .process-post { grid-template-columns: 20px .8fr 1.5fr; }
  .process-post .text-link { grid-column: 2 / 4; justify-self: start; }
  .process-brand { position: absolute; right: 0; bottom: 28px; width: 36px; height: 36px; }
  .agent-details { gap: 28px; }
  .plan { padding: 40px 24px 24px; }
  .start-grid { gap: 36px; }
  .site-footer > p { font-size: 22px; }
}
@media (max-width: 940px) {
  .header-links { display: none; }
  .hero-title { font-size: 66px; max-width: 500px; }
  .hero-orbit { top: 32%; left: 79%; }
  .hero-copy { padding-top: 140px; }
  .chapter-heading { grid-template-columns: 1.2fr .8fr; gap: 35px; }
  .section-title { font-size: 50px; }
  .section-description { font-size: 13px; line-height: 1.7; }
  .plan { padding-inline: 18px; }
  .plan h3 { font-size: 24px; }
  .price b { font-size: 51px; }
  .plan li { font-size: 11px; gap: 8px; }
  .plan > p { min-height: 88px; }
  .reel-item figcaption { flex-direction: column; gap: 4px; }
  .agent-details { gap: 18px; }
  .agent-scene { aspect-ratio: 16 / 10; }
  .agent-scene-copy h3 { font-size: 44px; }
  .start-grid { grid-template-columns: .8fr 1.2fr; gap: 26px; }
  .form-pair { grid-template-columns: 1fr; gap: 0; }
  .start-photo > p { font-size: 34px; left: 24px; right: 24px; bottom: 30px; }
  .site-footer { flex-wrap: wrap; }
  .site-footer > p { display: none; }
}
@media (max-width: 767px) {
  html { scroll-padding-top: 38px; }
  .wrap { width: calc(100% - 40px); }
  .chapter { scroll-margin-top: 38px; }
  .section-pad { padding-block: 78px; }
  .site-header { min-height: 74px; padding: 19px 20px; gap: 16px; }
  .brand-link img { width: 151px; height: 29px; }
  /* Scoped so the later phone .button rule cannot re-widen it past the screen edge. */
  .site-header .button-header { font-size: 10px; min-height: 36px; padding: 10px 13px; gap: 8px; }
  .site-header .button-header span { display: none; }
  .hero { height: 145svh; }
  .hero-sticky { height: 100svh; min-height: 740px; align-items: end; }
  .hero-scene { --mug-x: 82%; --mug-y: 35%; background: var(--bg); }
  .hero-scene.media-frame .video-poster img, .hero-scene.media-frame > video { object-fit: contain; object-position: center top; }
  .hero-shade { background: linear-gradient(180deg, rgb(8 9 11 / .3), rgb(8 9 11 / .02) 26%, rgb(8 9 11 / .34) 44%, rgb(8 9 11 / .82) 59%, rgb(8 9 11 / .94) 88%, var(--bg)); }
  .hero-orbit { left: 50%; top: 26%; width: 74vmin; height: 74vmin; }
  .hero-ring { font-size: 7.3vmin; }
  .hero-copy { padding-top: 0; padding-bottom: 143px; }
  .hero-copy .chapter-label { margin-bottom: 17px; font-size: 11px; }
  .hero-title { max-width: 390px; font-size: clamp(48px, 12vw, 66px); line-height: 1.05; letter-spacing: -.06em; }
  .hero-description { font-size: 13px; line-height: 1.7; max-width: 340px; margin-top: 18px; }
  .button-row { margin-top: 24px; gap: 9px; }
  .button, .btn { min-height: 48px; padding: 14px 17px; font-size: 11px; gap: 10px; }
  .button-row .button:first-child { flex: 1.1; }
  .button-row .button:last-child { flex: 1; }
  .hero-price { margin-top: 15px; font-size: 10px; }
  .motion-toggle { bottom: 105px; right: 20px; padding: 7px 11px; font-size: 9px; }
  .chapter-heading { grid-template-columns: 1fr; gap: 20px; margin-bottom: 36px; }
  .chapter-label { margin-bottom: 18px; font-size: 11px; gap: 11px; }
  .section-title { font-size: clamp(40px, 11.1vw, 58px); line-height: 1.06; letter-spacing: -.05em; }
  .section-description { max-width: 340px; font-size: 13px; line-height: 1.7; padding: 0; }
  .how { padding-top: 70px; }
  .process-grid { grid-template-columns: 1fr; row-gap: 38px; }
  .process-send, .process-make, .process-post { grid-column: 1; }
  .process-make { margin-top: 0; }
  .process-send .process-media, .process-make .process-media { aspect-ratio: 4 / 3; }
  .media-frame { border-radius: 10px; }
  .step-copy { gap: 16px; margin-top: 20px; }
  .step-copy h3, .process-post h3 { font-size: 28px; }
  .step-copy p, .process-post p { font-size: 13px; line-height: 1.7; margin-top: 8px; }
  .process-post { grid-template-columns: 18px 1fr; gap: 10px 16px; padding-block: 26px; }
  .process-post p { grid-column: 2; margin-top: 0; max-width: 280px; padding-right: 15px; }
  .process-post .text-link { grid-column: 2; margin-top: 9px; font-size: 12px; justify-self: start; }
  .process-brand { right: 0; bottom: 29px; width: 28px; height: 28px; }
  .human-note { font-size: 10px; margin-top: 27px; }
  .reel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 27px 14px; }
  .reel-feature, .reel-wide { grid-column: 1 / -1; }
  .reel-item.reel-tall .media-frame { height: auto; min-height: 0; aspect-ratio: 4 / 5; }
  .reel-item .media-frame { aspect-ratio: 4 / 5; border-radius: 8px; }
  .reel-feature .media-frame, .reel-wide .media-frame { aspect-ratio: 16 / 10 !important; }
  .reel-item figcaption { font-size: 11px; gap: 3px; padding-top: 12px; }
  .reel-item figcaption span:last-child { font-size: 9px; }
  .reel-item:nth-child(4) { grid-column: 1 / -1; }
  .reel-item:nth-child(4) .media-frame { aspect-ratio: 16 / 9; }
  .reel-footer { margin-top: 32px; align-items: flex-start; flex-direction: column; gap: 15px; }
  .reel-footer p { font-size: 28px; }
  .reel-footer .text-link { font-size: 12px; }
  .more-reel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 14px; }
  .agent-scene { width: 100%; min-height: 440px; aspect-ratio: 4 / 5; border-radius: 12px; }
  .agent-scene > .video-poster, .agent-scene > video { object-fit: contain; object-position: center top; }
  .agent-scene-shade { background: linear-gradient(0deg, rgb(8 9 11 / .87), rgb(8 9 11 / .22) 65%, transparent); }
  .agent-scene-copy { left: 24px; bottom: 32px; max-width: 90%; }
  .agent-scene-copy > img { width: 30px; height: 30px; margin-bottom: 20px; }
  .agent-scene-copy h3 { font-size: 40px; margin-bottom: 22px; }
  .agent-details { grid-template-columns: 1fr; gap: 25px; margin-top: 30px; }
  .agent-details p { grid-template-columns: 22px 1fr; row-gap: 6px; font-size: 14px; }
  .agent-details p > span:last-child { font-size: 12px; }
  .plans { grid-template-columns: 1fr; gap: 20px; }
  .plan { padding: 35px 27px 27px; }
  .plan h3 { font-size: 28px; }
  .price { margin-top: 20px; }
  .price b { font-size: 58px; }
  .plan > p { min-height: 0; font-size: 13px; margin-top: 16px; }
  .plan ul { margin-block: 22px 27px; }
  .plan li { font-size: 12px; }
  .plan .btn { min-height: 48px; }
  .packs { font-size: 11px; text-align: left; line-height: 1.8; margin-top: 24px; }
  .start-grid { grid-template-columns: 1fr; gap: 36px; }
  .start-photo { aspect-ratio: 4 / 3; min-height: 0; }
  .start-photo > img, .start-photo > video { object-position: 58% 45%; }
  .start-photo > p { font-size: 32px; bottom: 25px; left: 24px; }
  .form-pair { grid-template-columns: 1fr; }
  .lead label { font-size: 12px; margin-bottom: 17px; }
  .lead input:not([type=file]), .lead select, .lead textarea { font-size: 16px; min-height: 50px; padding-inline: 13px; }
  .dropzone { padding: 23px 12px; gap: 10px; }
  .dropzone p strong { font-size: 12px; }
  .dropzone p span { font-size: 9px; }
  .form-note { font-size: 10px; }
  .site-footer { padding-top: 32px; padding-bottom: 125px; gap: 28px; }
  .site-footer > div { width: 100%; flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 14px; font-size: 10px; }
  .inspiration-trigger { font-size: 10px; }
  .chapter-nav { bottom: max(20px, env(safe-area-inset-bottom)); width: 248px; }
  .chapter-toggle { padding: 14px 18px; min-height: 54px; }
  .chapter-menu { max-height: calc(100svh - 150px); overflow-y: auto; }
  .chapter-menu a { padding-block: 14px; }
  .inspiration-dialog { max-width: calc(100vw - 24px); max-height: calc(100svh - 24px); padding: 25px 20px; border-radius: 17px; }
  .inspiration-head { margin-bottom: 22px; padding-right: 37px; }
  .inspiration-head h2 { font-size: 30px; }
  .inspiration-head > p { font-size: 12px; }
  .inspiration-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  .portrait-card img { width: 116px; }
  .portrait-card strong { font-size: 15px; margin-top: 12px; }
  .portrait-card span { font-size: 9px; }
}
@media (max-width: 374px) {
  .wrap { width: calc(100% - 32px); }
  .site-header { padding-inline: 16px; }
  .site-header .brand-link { flex-shrink: 1; min-width: 0; }
  .brand-link img { width: 136px; max-width: 100%; }
  .site-header .button-header { font-size: 9px; padding-inline: 10px; }
  .hero-title { font-size: 44px; }
  .hero-description { font-size: 12px; }
  .button-row .button { padding-inline: 12px; font-size: 10px; }
}
@media (min-width: 768px) and (max-height: 760px) {
  .hero-sticky { min-height: 580px; }
  .hero-copy { padding-top: 70px; }
  .hero-title { font-size: 66px; }
  .hero-orbit { top: 37%; }
  .hero-description { margin-top: 17px; }
  .button-row { margin-top: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scene { transform: none !important; will-change: auto; }
  .hero-copy, [data-reveal] { transform: none !important; will-change: auto; }
  .media-frame > video { opacity: 0 !important; }
  .portrait-card { transform: none !important; }
  .button, .btn, .media-frame > video, .menu-symbol i { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .chapter-toggle, .chapter-menu { background: var(--panel); backdrop-filter: none; }
}

.client-login { color: var(--ink); font-size: 13px; padding: 12px 8px; white-space: nowrap; }
@media (max-width: 767px) { .client-login { margin-left: auto; } .site-header { gap: 8px; } }