/* One committed world: a lit showroom whose wall colour follows the product on stage. */
:root {
  --bg: #e4e5e2;
  --stage: #e4e5e2;
  --ink: #17181a;
  --soft: #55585c;
  --teal: #0e6e72;
  --dot: #7a2330; /* the full stop in the logo: oxblood on light walls, rose on dark */
  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1rem/1.4 var(--font); font-stretch: 110%; transition: background-color .6s ease; }
a { color: inherit; }
button { font: inherit; color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
::selection { background: var(--ink); color: var(--stage); }
img { max-width: 100%; display: block; }

.top { position: fixed; left: 0; right: 0; top: 0; z-index: 20; display: flex; justify-content: space-between; align-items: center; padding: max(14px, env(safe-area-inset-top, 0px)) 20px 0; pointer-events: none; }
.top > * { pointer-events: auto; }
.brand { text-decoration: none; min-height: 44px; display: flex; align-items: center; }
.brand svg { height: 25px; width: auto; overflow: visible; }
.brand .word { fill: currentColor; }
.brand .dot, .sign .dot { fill: var(--dot); transition: fill .6s ease; transform-box: fill-box; transform-origin: 50% 100%; }

/* logo motion: the letters press in like type on paper, then the full stop drops into place */
@media (prefers-reduced-motion: no-preference) {
  .brand .word { animation: press .7s cubic-bezier(.2, .7, .2, 1) .15s both; transform-box: fill-box; transform-origin: 50% 60%; }
  .brand .dot { animation: drop .6s cubic-bezier(.3, 1.5, .5, 1) .7s both; }
  .brand:hover .dot, .brand:focus-visible .dot { animation: hop .6s cubic-bezier(.3, 1.3, .5, 1); }
  .sign .c { transform-box: fill-box; transform-origin: 50% 60%; }
  .sign.wait .c, .sign.wait .dot { opacity: 0; } /* set by app.js until the outro is in view */
  .sign.in .c { animation: press .8s cubic-bezier(.2, .7, .2, 1) both; }
  .sign.in .dot { animation: drop .6s cubic-bezier(.3, 1.5, .5, 1) .55s both; }
}
@keyframes press { from { opacity: 0; transform: scale(1.06); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes drop { 0% { opacity: 0; transform: translateY(-420%); } 55% { opacity: 1; transform: translateY(0) scale(1.35, .65); } 80% { transform: translateY(-25%) scale(.92, 1.08); } 100% { opacity: 1; transform: none; } }
@keyframes hop { 40% { transform: translateY(-160%) scale(.9, 1.1); } 70% { transform: translateY(0) scale(1.3, .7); } }
.dots { display: flex; gap: 6px; }
.dots a { width: 44px; height: 44px; display: grid; place-items: center; }
.dots a::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--ink); transition: background .3s, transform .3s; }
.dots a.on::before { background: var(--ink); transform: scale(1.25); }

/* intro */
.intro { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: 80px 20px; position: relative; }
.intro h1 { margin: 0; font: 300 clamp(2.4rem, 7vw, 6.4rem)/0.95 var(--font); font-stretch: 125%; letter-spacing: -0.025em; text-transform: uppercase; max-width: 15ch; text-wrap: balance; }
.intro h1 b { font-weight: 800; color: var(--teal); }
.intro .strip { display: flex; gap: 10px; justify-content: center; margin-top: 36px; }
.intro .strip img { width: 58px; height: 120px; object-fit: cover; object-position: top; border-radius: 12px; border: 3px solid var(--ink); animation: bob 4s ease-in-out infinite; }
.intro .strip img:nth-child(2) { animation-delay: -.8s; } .intro .strip img:nth-child(3) { animation-delay: -1.6s; } .intro .strip img:nth-child(4) { animation-delay: -2.4s; }
@keyframes bob { 50% { transform: translateY(-10px) rotate(-2deg); } }
.scroll { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); display: grid; justify-items: center; gap: 10px; font: 600 0.68rem/1 var(--font); font-stretch: 125%; letter-spacing: 0.3em; text-transform: uppercase; }
.scroll span { width: 1px; height: 44px; background: rgb(23 24 26 / .2); position: relative; overflow: hidden; }
.scroll span::after { content: ""; position: absolute; left: 0; right: 0; top: -40%; height: 40%; background: var(--ink); animation: drip 1.8s cubic-bezier(.6,0,.2,1) infinite; }
@keyframes drip { to { top: 100%; } }

/* scene scaffold */
.scene { height: 320vh; position: relative; }
.pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.giant { position: absolute; left: 0; top: 50%; white-space: nowrap; font: 800 clamp(7rem, 24vw, 22rem)/0.8 var(--font); font-stretch: 125%; letter-spacing: -0.04em; text-transform: uppercase;
         color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--ink) 18%, transparent); transform: translate3d(var(--gx, 0), -50%, 0); pointer-events: none; will-change: transform; }
.stage { position: absolute; inset: 0; display: grid; place-items: center; }
.copy { position: absolute; left: 20px; bottom: max(24px, env(safe-area-inset-bottom, 0px)); display: grid; gap: 10px; max-width: min(86vw, 460px); }
.js .copy { opacity: var(--co, 0); transform: translateY(calc((1 - var(--co, 0)) * 14px)); }
.copy h2 { margin: 0; font: 800 clamp(1.8rem, 4vw, 3rem)/0.95 var(--font); font-stretch: 125%; letter-spacing: -0.02em; text-transform: uppercase; }
.copy p { margin: 0; font-size: 1.1rem; color: var(--soft); }
.copy a { justify-self: start; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--ink); text-decoration: none;
          font: 700 0.76rem/1 var(--font); font-stretch: 125%; letter-spacing: 0.16em; text-transform: uppercase; background: color-mix(in srgb, var(--stage) 70%, var(--ink) 6%); white-space: nowrap; }
.copy a:hover { background: var(--ink); color: var(--stage); }
.copy a svg { width: 12px; height: 12px; }

/* devices */
.phone { position: relative; width: clamp(150px, min(22vw, calc((100svh - 230px) / 2.1)), 290px); aspect-ratio: 390 / 820; border-radius: 42px; background: #101112; padding: 10px;
         box-shadow: 0 40px 80px -30px rgb(0 0 0 / .5), 0 0 0 1.5px #2a2b2e inset; will-change: transform; z-index: 3; }
.phone::before { content: ""; position: absolute; left: 50%; top: 18px; width: 30%; height: 22px; border-radius: 12px; background: #101112; transform: translateX(-50%); z-index: 2; }
.phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 33px; }
.laptop { position: relative; width: clamp(260px, min(46vw, calc((100svh - 240px) * 1.5)), 680px); will-change: transform; z-index: 3; }
.laptop .lid { background: #101112; border-radius: 16px 16px 4px 4px; padding: 12px; box-shadow: 0 40px 80px -30px rgb(0 0 0 / .5); }
.laptop .lid img { aspect-ratio: 16 / 10; width: 100%; height: auto; object-fit: cover; object-position: top; border-radius: 4px; }
.laptop .base { height: 14px; margin: 0 -6%; background: linear-gradient(#cfd0d2, #9fa1a4); border-radius: 0 0 14px 14px; }

.prop { position: absolute; left: 0; top: 0; will-change: transform, opacity; }
.lock.prop { opacity: 0; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 30; background: #fff; color: #17181a; padding: 10px 14px; border-radius: 8px; }
.skip:focus { left: 8px; }
.rest a { text-decoration: none; }
.rest a:hover { text-decoration: underline; text-underline-offset: 3px; }
.mail a { min-height: 54px; display: flex; align-items: center; padding: 0 24px; border-radius: 999px; border: 1.5px solid var(--ink); font: 600 1.1rem/1 var(--font); text-decoration: none; background: rgb(255 255 255 / .4); }
.mail a:hover { background: #fff; }

/* 1 · Duitful: coins into the phone, then a lock */
.coin::after { content: ""; width: 62%; height: 62%; border-radius: 50%; border: 2px solid rgb(92 67 15 / .45); }
.coin { width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f7e3a6, #c99a3a 60%, #8f6a1f); display: grid; place-items: center;
        font: 800 0.72rem/1 var(--font); color: #5c430f; box-shadow: inset 0 -3px 0 rgb(0 0 0 / .18); z-index: 4; }
.lock { width: 96px; z-index: 5; color: var(--ink); }

/* 3 · SukaSamaSuka: three-way swap */
.swapmap { position: absolute; right: 5vw; top: 50%; width: clamp(240px, 30vw, 420px); aspect-ratio: 1; transform: translateY(-50%); z-index: 4; }
.swapmap svg { width: 100%; height: 100%; overflow: visible; }
.pinlab { font: 700 13px/1 var(--font); font-stretch: 110%; fill: #eef3ff; }
.pinsub { font: 500 10px/1 var(--font); fill: #9fb2d8; letter-spacing: .1em; }


/* 5 · Chairside: clinics orbit */
.clinic { z-index: 4; width: 150px; padding: 12px 14px; border-radius: 14px; background: #fffaf0; box-shadow: 0 16px 30px -14px rgb(0 0 0 / .35); display: grid; gap: 4px; }
.clinic b { font: 800 0.9rem/1 var(--font); font-stretch: 115%; }
.clinic span { font: 500 0.78rem/1.2 var(--font); color: #5e5a50; font-variant-numeric: tabular-nums; }
.clinic i { height: 4px; border-radius: 2px; background: var(--c); width: 60%; }

/* 6 · Faderunner: bots in a Docker cloud; entry waits for a confirmed stop-loss */
.ops { position: relative; z-index: 3; width: min(92vw, 1120px); display: flex; align-items: center; gap: 34px; will-change: transform; }
.xchg { flex: none; display: grid; gap: 4px; padding: 14px 16px; border-radius: 14px; background: #1c1a12; border: 1.5px solid #ffb547; color: #ffd9a0; position: relative; }
.xchg b { font: 800 1rem/1 var(--font); font-stretch: 115%; }
.xchg small { font: 500 0.78rem/1 var(--font); color: #c9a36a; }
.xchg::after { content: ""; position: absolute; left: 100%; top: 50%; width: 34px; height: 2px; background: repeating-linear-gradient(90deg, #ffb547 0 6px, transparent 6px 10px); animation: feed .6s linear infinite; }
@keyframes feed { to { background-position: 10px 0; } }
.cloud { flex: 1; min-width: 0; position: relative; border: 1.5px dashed rgb(233 239 233 / .28); border-radius: 28px; padding: 46px 22px 40px; display: grid; gap: 40px; background: rgb(255 255 255 / .02); }
.cloud-label { position: absolute; left: 22px; top: 14px; display: inline-flex; align-items: center; gap: 8px; font: 700 0.72rem/1 var(--font); font-stretch: 125%; letter-spacing: 0.18em; text-transform: uppercase; color: #9fb0a8; }
.cloud-label svg { width: 20px; height: 14px; }
.lane { list-style: none; margin: 0; padding: 0; display: flex; gap: 26px; }
.lane .node { flex: 1; position: relative; min-height: 58px; display: grid; align-content: center; gap: 4px; padding: 10px 12px; border-radius: 14px; background: #161d1a; border: 1.5px solid #2a3531;
  font: 700 0.86rem/1.1 var(--font); font-stretch: 105%; color: #7f8f88; transition: border-color .35s, color .35s, box-shadow .35s, background-color .35s; }
.lane .node + .node::before { content: ""; position: absolute; right: 100%; top: 50%; width: 26px; height: 2px; background: #2a3531; }
.lane .node.on { color: #e9efe9; border-color: #3ddc84; background: #13241b; box-shadow: 0 0 26px -8px #3ddc84; }
.lane .node.on + .node::before { background: #3ddc84; }
.lane .node.on:not(:last-child)::after { content: ""; position: absolute; left: calc(100% + 2px); top: calc(50% - 3px); width: 6px; height: 6px; border-radius: 50%; background: #3ddc84; animation: packet 1.1s linear infinite; }
@keyframes packet { from { transform: translateX(0); opacity: 1; } to { transform: translateX(18px); opacity: 0; } }
.node em { font: 600 0.68rem/1.2 var(--font); font-style: normal; color: #3ddc84; opacity: 0; transform: translateY(4px); transition: opacity .35s, transform .35s; }
.node.stop.on em { opacity: 1; transform: none; }
.node.stop { border-color: #5a2a26; }
.node.stop.on { border-color: #3ddc84; }
.lane.paper .node { border-style: dashed; min-height: 44px; color: #66736d; }
.lane.paper .node.on { color: #ffd9a0; border-color: #ffb547; background: #1f1c12; box-shadow: none; }
.lane.paper .node.on + .node::before { background: #ffb547; }
.lane.paper .node.on:not(:last-child)::after { background: #ffb547; }
.lane.paper { width: 60%; }
.lane-label { position: absolute; left: 22px; bottom: 12px; font: 600 0.72rem/1 var(--font); font-stretch: 115%; color: #b99a63; }
@media (max-width: 760px), (max-height: 520px) {
  .ops { flex-direction: column; align-items: stretch; gap: 22px; width: min(92vw, 520px); }
  .xchg { justify-self: center; align-self: center; grid-auto-flow: column; align-items: baseline; gap: 10px; padding: 10px 14px; }
  .xchg::after { left: 50%; top: 100%; width: 2px; height: 22px; background: repeating-linear-gradient(180deg, #ffb547 0 6px, transparent 6px 10px); animation: feedv .6s linear infinite; }
  @keyframes feedv { to { background-position: 0 10px; } }
  .cloud { padding: 38px 12px 34px; gap: 18px; }
  .lane { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .lane.paper { width: auto; }
  .lane .node { min-height: 52px; padding: 8px; font-size: 0.76rem; }
  .lane .node + .node::before, .lane .node.on:not(:last-child)::after { display: none; }
  .node em { font-size: 0.62rem; }
  .lane-label { bottom: 10px; left: 14px; }
  .cloud-label { left: 14px; top: 12px; }
}
@media (max-height: 520px) and (min-width: 600px) {
  .ops { width: 60vw; gap: 10px; }
  .xchg { padding: 6px 12px; }
  .cloud { padding: 30px 10px 26px; gap: 10px; }
  .lane .node { min-height: 38px; padding: 5px 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .xchg::after, .lane .node.on:not(:last-child)::after { animation: none; }
}
/* Faderunner dashboard (illustrative), scaled like a screenshot with container units */
.stage > .ops, .stage > .dash-lap { grid-area: 1 / 1; }
.dash-lap { width: clamp(300px, min(54vw, calc((100svh - 330px) * 1.55)), 860px); margin-bottom: 7vh; opacity: 0; }
.dash-lap .lid { background: #050706; }
.dash { container-type: inline-size; aspect-ratio: 16 / 10; background: #0b0f0d; border-radius: 4px; color: #d8e2dc; overflow: hidden;
  display: grid; grid-template-columns: 22fr 50fr 28fr; grid-template-rows: auto 1fr auto; gap: 1.6cqw; padding: 2cqw; font-family: var(--font); }
.d-top { grid-column: 1 / -1; display: flex; align-items: center; gap: 1.4cqw; font-size: 1.6cqw; }
.d-top b { font-size: 2cqw; font-weight: 800; font-stretch: 115%; }
.d-live { padding: .4cqw 1cqw; border-radius: 99px; background: #13241b; color: #3ddc84; font-weight: 700; }
.d-demo { margin-left: auto; color: #b99a63; font-weight: 600; }
.d-bots { list-style: none; margin: 0; padding: 1.4cqw; border-radius: 1.2cqw; background: #121916; display: grid; align-content: start; gap: 1.2cqw; font-size: 1.45cqw; font-weight: 600; }
.d-bots li { display: flex; align-items: center; gap: .9cqw; color: #9fb0a8; }
.d-bots i { width: 1cqw; height: 1cqw; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 1cqw #3ddc84; flex: none; }
.d-bots li.paper i { background: #ffb547; box-shadow: 0 0 1cqw #ffb547; }
.d-chart { position: relative; border-radius: 1.2cqw; background: #121916; padding: 1.4cqw; }
.d-chart svg { width: 100%; height: 100%; display: block; overflow: visible; }
.d-grid { stroke: #1f2a25; stroke-width: 1; fill: none; }
.d-line { fill: none; stroke: #3ddc84; stroke-width: 2.5; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: var(--draw, 0); vector-effect: non-scaling-stroke; }
.d-stop { stroke: #ff5a4e; stroke-width: 2; stroke-dasharray: 6 5; fill: none; vector-effect: non-scaling-stroke; }
.d-entry { fill: #ffb547; }
.d-stoplab, .d-entrylab { position: absolute; font-size: 1.3cqw; font-weight: 700; }
.d-stoplab { left: 1.6cqw; bottom: 1.2cqw; color: #ff8a80; }
.d-entrylab { left: 63%; bottom: 7cqw; color: #ffb547; }
.d-pos { border-radius: 1.2cqw; background: #121916; padding: 1.4cqw; display: grid; align-content: start; gap: 1.1cqw; font-size: 1.4cqw; }
.d-pos h4 { margin: 0; font-size: 1.4cqw; color: #7f8f88; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.d-pos p { margin: 0; display: grid; grid-template-columns: 1fr auto auto; gap: .8cqw; align-items: center; }
.d-pos span { color: #9fb0a8; }
.d-pos em { font-style: normal; font-weight: 700; color: #3ddc84; }
.d-pos em.wait { color: #7f8f88; }
.d-pos em.paper { color: #ffb547; }
.d-log { grid-column: 1 / -1; list-style: none; margin: 0; padding: 1.2cqw 1.4cqw; border-radius: 1.2cqw; background: #121916; display: grid; gap: .7cqw; font-size: 1.35cqw; }
.d-log li { display: flex; gap: 1.4cqw; opacity: var(--o, 1); transition: opacity .3s; }
.d-log time { color: #5f6f68; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .dash-lap { width: 94vw; margin: 4vh 0 0; }
}
@media (max-height: 520px) and (min-width: 600px) {
  .dash-lap { width: 58vw; margin: 0; }
}

/* 7 · homelab: services orbit one Caddy origin inside a Tailscale ring */
.orrery { width: min(70vh, 70svh, 90vw, 720px); margin-bottom: 8vh; height: auto; overflow: visible; z-index: 3; will-change: transform; }
.orrery .stars circle { fill: #c9cfff; }
.orrery .orbit { fill: none; stroke: #2a2f4a; stroke-width: 1; opacity: var(--o, 0); }
.orrery .ts-ring { fill: none; stroke: #7c8cff; stroke-width: 2; stroke-dasharray: .012 .008; stroke-dashoffset: 0; opacity: var(--o, 0); }
.orrery .ts-lab { font: 700 12px/1 var(--font); font-stretch: 115%; letter-spacing: .14em; text-transform: uppercase; fill: #9aa6ff; opacity: var(--o, 0); }
.orrery .core { fill: #ffd27a; }
.orrery .core-lab { font: 800 15px/1 var(--font); font-stretch: 115%; fill: #2a1c05; }
.orrery .core-sub { font: 600 8.5px/1 var(--font); fill: #5a3f0e; }
.orrery .planet circle { stroke: rgb(255 255 255 / .25); stroke-width: 1; }
.orrery .planet text { font: 700 12px/1 var(--font); font-stretch: 110%; fill: #e8eaf4; paint-order: stroke; stroke: #0c0e18; stroke-width: 4px; stroke-linejoin: round; }
.orrery .you circle { fill: #151a33; stroke: #7c8cff; stroke-width: 1.5; }
.orrery .you path { fill: none; stroke: #c9cfff; stroke-width: 1.5; }
.orrery .you text { font: 700 11px/1 var(--font); fill: #c9cfff; }
.orrery .you, .orrery .you-link { opacity: var(--o, 0); }
.orrery .you-link { stroke: #7c8cff; stroke-width: 1.5; stroke-dasharray: 4 5; }
@media (max-width: 760px) { .orrery { width: 96vw; margin: 2vh 0 0; } .orrery .planet text { font-size: 14px; } }
@media (max-height: 520px) and (min-width: 600px) { .orrery { width: calc(100svh - 90px); margin: 40px 0 0; } }

.private { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1.5px dashed currentColor;
           font: 600 0.9rem/1.2 var(--font); font-stretch: 110%; opacity: .85; }

/* iPhone Duo: a book-style foldable. Closed it shows the app; open, the landing page sits beside it. */
.duo { position: relative; z-index: 3; width: clamp(300px, min(46vw, calc((100svh - 250px) * 1.2)), 700px); aspect-ratio: 1.2; perspective: 1800px; will-change: transform; }
.leaf { position: absolute; top: 0; bottom: 0; width: 50%; background: linear-gradient(180deg, #2a2d33, #16181c); padding: 9px; box-shadow: 0 40px 80px -30px rgb(0 0 0 / .5), inset 0 0 0 1.5px #3a3e45; }
.leaf.left { left: 0; padding: 0; background: none; box-shadow: none; transform-origin: 100% 50%; transform-style: preserve-3d; z-index: 2; }
.face { position: absolute; inset: 0; background: linear-gradient(180deg, #2a2d33, #16181c); padding: 9px; box-shadow: inset 0 0 0 1.5px #3a3e45; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.face.front { border-radius: 40px 0 0 40px; padding-right: 0; }
/* The outer display: a complete phone front, seen while the Duo is closed */
.face.back { transform: rotateY(180deg); border-radius: 40px; box-shadow: 0 30px 60px -28px rgb(0 0 0 / .5), inset 0 0 0 1.5px #3a3e45; }
.face.back .glass { border-radius: 31px; }
.face.back .glass::before { content: ""; position: absolute; left: 50%; top: 10px; width: 26%; height: 18px; border-radius: 10px; background: #0b0c0e; transform: translateX(-50%); z-index: 2; }
.leaf.right { right: 0; --r: 40px; border-radius: calc(var(--r) * (1 - var(--open, 1))) var(--r) var(--r) calc(var(--r) * (1 - var(--open, 1))); padding-left: 0; }
.glass { position: relative; width: 100%; height: 100%; overflow: hidden; background: #0b0c0e; }
.face.front .glass { border-radius: 31px 0 0 31px; }
.leaf.right .glass { --g: 31px; border-radius: calc(var(--g) * (1 - var(--open, 1))) var(--g) var(--g) calc(var(--g) * (1 - var(--open, 1))); }
.glass img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.glass.screens .scr { opacity: 0; transition: opacity .45s ease; }
/* Open, the inner screen is one display: each half shows its side of the same wide, responsive layout. */
.glass.l img, .glass.r img { width: 200%; max-width: none; object-position: top; }
.glass.r img { left: auto; right: 0; }
.glass.screens .scr.on { opacity: 1; }
.hinge { position: absolute; left: calc(50% - 1px); top: 9px; bottom: 9px; width: 3px; z-index: 3; background: linear-gradient(90deg, rgb(0 0 0 / .28), rgb(255 255 255 / .22), rgb(0 0 0 / .18)); opacity: calc(1 - var(--open, 1)); pointer-events: none; } /* the fold shows only while it bends; open, it is one seamless screen */
.no-shot.glass::after { content: attr(data-label); position: absolute; inset: 0; display: grid; place-items: center; padding: 14px; text-align: center; color: #e9e6e0; font: 700 0.85rem/1.3 var(--font); }
@media (max-width: 760px) { .duo { width: 92vw; margin-top: 2vh; } .leaf, .face { padding: 6px; } .leaf.left { padding: 0; } .face.front { border-radius: 28px 0 0 28px; } .face.back { border-radius: 28px; } .face.back .glass { border-radius: 22px; } .leaf.right { --r: 28px; } .face.front .glass { border-radius: 22px 0 0 22px; } .leaf.right .glass { --g: 22px; } .hinge { top: 6px; bottom: 6px; } }
@media (max-height: 520px) and (min-width: 600px) { .duo { width: min(58vw, calc((100svh - 50px) * 1.2)); } .leaf, .face { padding: 6px; } .leaf.left { padding: 0; } }

/* Laptop with the landing page behind; the iPhone Duo with the app in front */
.stage > .laptop.landing, .stage > .duo { grid-area: 1 / 1; }
.laptop.landing { width: clamp(300px, min(46vw, calc((100svh - 240px) * 1.5)), 700px); translate: -12vw -5vh; z-index: 2; }
.laptop.landing .lid img { aspect-ratio: 16 / 10; }
.stage > .duo { width: clamp(240px, min(32vw, calc((100svh - 330px) * 1.2)), 480px); translate: 16vw 8vh; }
@media (max-width: 760px) {
  .laptop.landing { width: 84vw; translate: -5vw 0; margin-top: 2vh; }
  .stage > .duo { width: 70vw; translate: 11vw 20vh; margin-top: 0; }
}
@media (max-height: 520px) and (min-width: 600px) {
  .laptop.landing { width: 34vw; translate: -8vw -4vh; }
  .stage > .duo { width: min(26vw, calc((100svh - 150px) * 1.2)); translate: 12vw 8vh; }
}

/* Keyboard focus always reveals the scene copy it lands in. */
.js .copy:focus-within { opacity: 1; transform: none; }

/* A screenshot that fails to load becomes a labelled screen, not a broken image. */
.no-shot img { display: none; }
.phone.no-shot::after, .lid.no-shot::after { content: attr(data-label); position: absolute; inset: 10px; display: grid; place-items: center; padding: 18px; text-align: center;
  background: linear-gradient(160deg, #2b2d31, #141518); color: #e9e6e0; font: 700 0.95rem/1.3 var(--font); font-stretch: 110%; }
.phone.no-shot::after { border-radius: 33px; }
.lid { position: relative; }
.lid.no-shot { aspect-ratio: 16 / 10.4; }
.lid.no-shot::after { inset: 12px; border-radius: 4px; }
.strip img.no-shot { visibility: hidden; }

/* outro */
.outro { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: 90px 20px 60px; }
.outro > div { display: grid; gap: 28px; justify-items: center; }
.sign { width: clamp(84px, 11vw, 132px); height: auto; overflow: visible; margin-bottom: -8px; }
.sign .c { fill: var(--ink); }
.outro h2 { margin: 0; font: 300 clamp(2.2rem, 6vw, 5rem)/0.95 var(--font); font-stretch: 125%; letter-spacing: -0.02em; text-transform: uppercase; }
.outro h2 b { font-weight: 800; }
.rest { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.rest li { font: 600 0.72rem/1 var(--font); font-stretch: 125%; letter-spacing: 0.18em; text-transform: uppercase; padding: 12px 16px; border-radius: 999px; border: 1.5px solid rgb(23 24 26 / .3); }
.mail { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.mail button { min-height: 54px; padding: 0 24px; border-radius: 999px; border: 0; background: var(--ink); color: var(--stage); cursor: pointer; font: 700 0.8rem/1 var(--font); font-stretch: 125%; letter-spacing: 0.2em; text-transform: uppercase; }
.mail button:hover { background: var(--teal); }
.foot { font: 500 0.82rem/1.5 var(--font); font-stretch: 110%; color: var(--soft); max-width: 44ch; }

@media (max-width: 760px) {
  .dots { gap: 0; }
  .dots a { width: 34px; }
  .top { padding-inline: 12px 8px; }
  .giant { top: 22%; }
  .stage { place-items: start center; padding-top: 12vh; }
  .phone { width: min(46vw, 220px, calc((100svh - 300px) / 2.1)); min-width: 130px; border-radius: 30px; padding: 7px; }
  .phone img { border-radius: 24px; }
  .phone::before { top: 12px; height: 16px; }
  .laptop { width: min(88vw, calc((100svh - 300px) * 1.5)); margin-top: 6vh; }
  .swapmap { right: 50%; top: auto; bottom: 25vh; width: 54vw; transform: translateX(50%); }
  .copy { right: 20px; }
  .copy p { font-size: 1rem; }
  .clinic { width: 128px; }
}
@media (prefers-reduced-motion: reduce) {
  .intro .strip img, .scroll span::after { animation: none; }
}

/* Short landscape screens (phones on their side): stage on the right, copy on the left. */
@media (max-height: 520px) and (min-width: 600px) {
  .stage { left: 34vw; }
  .phone { width: calc((100svh - 90px) / 2.1); min-width: 0; border-radius: 26px; padding: 6px; }
  .phone img, .phone.no-shot::after { border-radius: 21px; }
  .phone::before { top: 10px; height: 14px; }
  .laptop { width: 30vw; }
  .swapmap { width: 22vw; right: 2vw; }
  .clinic { width: 120px; padding: 8px 10px; }
  .copy { max-width: 31vw; bottom: 16px; gap: 6px; }
  .copy h2 { font-size: 1.5rem; }
  .copy p { font-size: 0.92rem; }
  .giant { font-size: 34vh; }
  .intro .strip img { width: 40px; height: 84px; }
  .phone img { height: 100%; }
}

@media (forced-colors: active) {
  .giant { display: none; }
}