/* Homepage composition. Shared navigation, pricing, care and invoice studio keep their own owners. */
.site--home .site-header__bar { height: 76px; }
.site--home :where(#clients, #invoice-styles, #pricing) { scroll-margin-top: 92px; }
.home-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 100px); align-items: end; padding-block: 70px 36px; }
.home-hero h1 { font-family: var(--font-display); font-weight: var(--font-display-weight); font-size: clamp(56px, 6vw, 84px); line-height: 1.02; letter-spacing: -.055em; }
.home-hero .kicker { margin-bottom: 23px; font-size: var(--fs-xs); letter-spacing: .075em; }
.home-hero__pitch { padding-bottom: 9px; }
.home-hero .lead { font-size: var(--fs-lead); line-height: 1.7; max-width: 29em; text-wrap: pretty; }
.home-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; margin-top: 27px; }
.home-actions .btn { min-height: 50px; }
.home-watch { display: inline-flex; align-items: center; gap: var(--icon-gap-md); font-size: var(--fs-sm); font-weight: 600; text-decoration: none; }
.home-watch .bg-icon { color: var(--gold-deep); }
.home-hero__note { margin-top: 15px; font-size: var(--fs-xs); color: var(--caption); }

/* ---------- while you sleep: one night down the band -- a starry sky over the heading, a sunrise behind the hills at
   its foot and their morning mist running into the page below -- the dashboard's window lit against it and the night's
   feed on paper ---------- */
.away { position: relative; overflow: clip; margin-top: 0; padding-top: clamp(116px, 11.4vw, 166px); background: linear-gradient(180deg, var(--bg-panel) 0 3px, var(--night-zenith) 3px, var(--night-high) 32%, var(--night-low) 55%, var(--night-dusk) 70%, var(--night-rose) 82%, var(--night-coral) 92%, var(--night-dawn) 100%); color: var(--inv-muted); }
/* clip, not hidden: a hidden box is a scroll container, and the sunrise's view timeline must see the page scroll */
.away__sky { position: absolute; inset: 0; overflow: clip; pointer-events: none; }
.away__sky *, .away__sky ::before, .away__sky ::after { position: absolute; }
.away__sky ::before, .away__sky ::after { content: ""; }

/* three star fields tiled at sizes that never line up -- dust, stars, bright stars with a halo, a few warm or cool --
   fading out toward the dawn */
.away__stars { --dim: color-mix(in srgb, var(--night-star) 50%, transparent); --halo: color-mix(in srgb, var(--night-star) 22%, transparent); inset: 0 0 auto; height: 72%; -webkit-mask-image: linear-gradient(180deg, black 45%, transparent); mask-image: linear-gradient(180deg, black 45%, transparent);
  background-image: radial-gradient(circle at 12px 18px, var(--dim) .7px, transparent 1.3px), radial-gradient(circle at 61px 92px, var(--dim) .9px, transparent 1.5px), radial-gradient(circle at 118px 37px, var(--dim) .7px, transparent 1.3px), radial-gradient(circle at 171px 128px, var(--dim) .9px, transparent 1.5px), radial-gradient(circle at 203px 64px, var(--dim) .7px, transparent 1.3px), radial-gradient(circle at 88px 141px, var(--dim) .6px, transparent 1.2px), radial-gradient(circle at 149px 8px, var(--dim) .8px, transparent 1.4px), radial-gradient(circle at 36px 121px, var(--dim) .6px, transparent 1.2px);
  background-size: 233px 157px; }
.away__stars::before, .away__stars::after { inset: 0; }
.away__stars::before { background-image: radial-gradient(circle at 40px 52px, var(--night-star) 1px, transparent 1.7px), radial-gradient(circle at 156px 190px, var(--night-star-cool) 1px, transparent 1.7px), radial-gradient(circle at 233px 31px, var(--night-star) 1.2px, transparent 1.9px), radial-gradient(circle at 318px 140px, var(--night-star) 1px, transparent 1.7px), radial-gradient(circle at 395px 248px, var(--night-star) .9px, transparent 1.6px), radial-gradient(circle at 97px 262px, var(--night-star-warm) 1.1px, transparent 1.8px), radial-gradient(circle at 270px 92px, var(--night-star) .8px, transparent 1.5px), radial-gradient(circle at 365px 12px, var(--night-star-cool) .9px, transparent 1.6px), radial-gradient(circle at 18px 170px, var(--night-star) .8px, transparent 1.5px);
  background-size: 419px 283px; }
.away__stars::after { background-image: radial-gradient(circle at 120px 80px, var(--night-star) 1.4px, var(--halo) 2.2px, transparent 6px), radial-gradient(circle at 530px 40px, var(--night-star-cool) 1.6px, var(--halo) 2.4px, transparent 7px), radial-gradient(circle at 690px 300px, var(--night-star) 1.3px, var(--halo) 2.1px, transparent 6px), radial-gradient(circle at 300px 360px, var(--night-star) 1.4px, var(--halo) 2.2px, transparent 6px), radial-gradient(circle at 760px 170px, var(--night-star-warm) 1.5px, var(--halo) 2.3px, transparent 7px), radial-gradient(circle at 420px 210px, var(--night-star-warm) 1.3px, var(--halo) 2.1px, transparent 6px);
  background-size: 797px 431px; }

/* the Milky Way: a soft diagonal glow across the top, faintly rose at its heart, thick with dust where it is brightest */
.away__milky { top: -10%; left: -15%; width: 130%; height: 62%; transform: rotate(-13deg); background: radial-gradient(ellipse 15% 6% at 51% 51%, color-mix(in srgb, var(--night-rose) 22%, transparent), transparent 72%), radial-gradient(ellipse 46% 19% at 50% 50%, color-mix(in srgb, var(--night-milky) 15%, transparent), transparent 72%), radial-gradient(ellipse 22% 9% at 37% 53%, color-mix(in srgb, var(--night-star-warm) 9%, transparent), transparent 72%), radial-gradient(ellipse 18% 8% at 64% 47%, color-mix(in srgb, var(--night-milky) 12%, transparent), transparent 72%); }
.away__milky::after { inset: 0; opacity: .55; background-image: radial-gradient(circle at 9px 14px, var(--night-star) .6px, transparent 1.1px), radial-gradient(circle at 44px 37px, var(--night-star) .7px, transparent 1.2px), radial-gradient(circle at 23px 49px, var(--night-star) .5px, transparent 1px), radial-gradient(circle at 61px 6px, var(--night-star) .6px, transparent 1.1px); background-size: 71px 53px; -webkit-mask-image: radial-gradient(ellipse 44% 16% at 50% 50%, black, transparent); mask-image: radial-gradient(ellipse 44% 16% at 50% 50%, black, transparent); }

/* two stars that catch the eye, with fine rays */
.away__glints { --ray: color-mix(in srgb, var(--night-star) 50%, transparent); inset: 0 0 auto; height: 700px; }
.away__glints::before, .away__glints::after { width: 22px; aspect-ratio: 1; translate: -50% -50%; background: radial-gradient(circle, var(--night-star) 0 1.3px, color-mix(in srgb, var(--night-star) 30%, transparent) 2.2px, transparent 5px), linear-gradient(90deg, transparent, var(--ray), transparent) 50% 50% / 100% 1px no-repeat, linear-gradient(transparent, var(--ray), transparent) 50% 50% / 1px 100% no-repeat; }
.away__glints::before { top: 46%; left: 9%; }
.away__glints::after { top: 12%; left: 66%; width: 16px; }

/* the moon: a crescent shaded toward its edge, its seas faint on the lit face and a soft terminator; earthshine barely
   lighting the dark side, a halo with no edge, and a thin cloud drifting across */
.away__moon, .away__wisps { --moon: clamp(52px, 5.4vw, 80px); top: clamp(84px, 9.8vw, 142px); right: max(var(--site-gutter, 24px), calc(50% - 600px)); width: var(--moon); aspect-ratio: 1; }
.away__moon { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--night-moon) 38%, transparent)); }
.away__moon::before { inset: 0; border-radius: var(--r-pill);
  background: radial-gradient(circle at 22% 60%, color-mix(in srgb, var(--night-mare) 58%, transparent) 0 8%, transparent 14%), radial-gradient(circle at 14% 42%, color-mix(in srgb, var(--night-mare) 46%, transparent) 0 6%, transparent 11%), radial-gradient(circle at 36% 80%, color-mix(in srgb, var(--night-mare) 44%, transparent) 0 7%, transparent 12%), radial-gradient(circle at 26% 26%, color-mix(in srgb, var(--night-mare) 30%, transparent) 0 4%, transparent 8%), radial-gradient(circle at 28% 66%, var(--night-moon) 30%, var(--night-moon-shade));
  -webkit-mask-image: radial-gradient(ellipse 44% 44% at 64% 36%, transparent 90%, black 104%); mask-image: radial-gradient(ellipse 44% 44% at 64% 36%, transparent 90%, black 104%); }
/* earthshine and halo in one soft gradient, so the dark side never draws a rim (the disc is the inner 24%) */
.away__moon::after { inset: -160%; z-index: -1; background: radial-gradient(circle closest-side, color-mix(in srgb, var(--night-earthshine) 11%, transparent) 0 16%, color-mix(in srgb, var(--night-moon) 9%, transparent) 26%, color-mix(in srgb, var(--night-moon) 4%, transparent) 46%, transparent); }
.away__wisps::before, .away__wisps::after { border-radius: var(--r-pill); background: radial-gradient(ellipse closest-side, color-mix(in srgb, var(--night-cloud) 70%, transparent), transparent); }
.away__wisps::before { left: -110%; top: 58%; width: 260%; height: 16%; }
.away__wisps::after { left: -40%; top: 80%; width: 180%; height: 10%; opacity: .7; }

/* now and then, a shooting star */
.away__meteors { inset: 0 0 auto; height: 50%; }
.away__meteors::before { top: 14%; left: 72%; width: clamp(60px, 7vw, 110px); height: 1px; background: linear-gradient(90deg, var(--night-star), transparent); opacity: 0; }

/* the band opens under the evening: three slow waves in one rhythm, the page's white darkening to lavender and deep
   indigo, then the night -- the mirror of the hills and morning mist at its foot */
.away__dusk { inset: 0 0 auto; height: clamp(70px, 8.6vw, 124px); }
.away__dusk::before, .away__dusk > *, .away__dusk::after { inset: -1px 0 auto; -webkit-mask: var(--wave) 0 0 / 100% 100% no-repeat; mask: var(--wave) 0 0 / 100% 100% no-repeat; }
.away__dusk::before { height: calc(clamp(70px, 8.6vw, 124px) + 1px); background: var(--night-bank-3); --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 124' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V73.9C1420.0 71.1 1360.0 62.4 1320.0 56.8C1280.0 51.1 1240.0 44.3 1200.0 40.0C1160.0 35.7 1120.0 31.8 1080.0 30.8C1040.0 29.8 1000.0 31.1 960.0 34.0C920.0 36.9 880.0 42.6 840.0 48.1C800.0 53.5 760.0 60.8 720.0 66.5C680.0 72.2 640.0 78.0 600.0 82.3C560.0 86.5 520.0 89.7 480.0 92.1C440.0 94.5 400.0 95.8 360.0 96.6C320.0 97.5 280.0 97.8 240.0 97.2C200.0 96.7 160.0 95.6 120.0 93.1C80.0 90.6 20.0 84.0 0.0 82.2Z'/%3E%3C/svg%3E"); }
.away__dusk > * { height: calc(clamp(46px, 5.6vw, 80px) + 1px); background: var(--night-bank-2); --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V58.5C1420.0 56.9 1360.0 52.6 1320.0 48.9C1280.0 45.1 1240.0 40.1 1200.0 36.0C1160.0 31.9 1120.0 27.2 1080.0 24.4C1040.0 21.6 1000.0 19.5 960.0 19.1C920.0 18.8 880.0 20.1 840.0 22.1C800.0 24.1 760.0 27.8 720.0 31.0C680.0 34.3 640.0 38.5 600.0 41.8C560.0 45.1 520.0 48.4 480.0 51.1C440.0 53.7 400.0 56.0 360.0 57.9C320.0 59.9 280.0 61.6 240.0 62.8C200.0 64.0 160.0 65.0 120.0 65.0C80.0 65.0 20.0 63.1 0.0 62.7Z'/%3E%3C/svg%3E"); }
.away__dusk::after { height: calc(clamp(24px, 3vw, 44px) + 1px); background: linear-gradient(180deg, var(--bg-panel) 50%, var(--night-bank-1)); --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 44' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V36.6C1420.0 36.1 1360.0 35.2 1320.0 33.6C1280.0 32.1 1240.0 29.6 1200.0 27.2C1160.0 24.8 1120.0 21.6 1080.0 19.2C1040.0 16.8 1000.0 14.2 960.0 12.7C920.0 11.2 880.0 10.3 840.0 10.2C800.0 10.0 760.0 10.9 720.0 11.9C680.0 13.0 640.0 14.8 600.0 16.5C560.0 18.1 520.0 20.1 480.0 21.8C440.0 23.5 400.0 25.3 360.0 26.9C320.0 28.5 280.0 30.1 240.0 31.6C200.0 33.0 160.0 34.6 120.0 35.6C80.0 36.6 20.0 37.2 0.0 37.6Z'/%3E%3C/svg%3E"); }

/* sunrise at the band's foot: the horizon warms from coral to gold around the sun, thin clouds lit from below, the sun
   coming up behind the far ridge in soft rays and catching its crest, the nearer ridge in the morning mist, the nearest
   the page itself */
.away__dawn { --sun-x: 28%; isolation: isolate; inset: auto 0 0; height: clamp(240px, 30vw, 420px); background: radial-gradient(ellipse 20% 34% at var(--sun-x) 100%, color-mix(in srgb, var(--night-sun-core) 26%, transparent), transparent 72%), radial-gradient(ellipse 62% 78% at var(--sun-x) 100%, color-mix(in srgb, var(--night-gold) 42%, transparent), color-mix(in srgb, var(--night-coral) 22%, transparent) 46%, transparent 76%), linear-gradient(180deg, transparent 45%, color-mix(in srgb, var(--night-dawn) 30%, transparent)); }
.away__dawn::before, .away__ridge, .away__dawn::after { inset: auto 0 0; -webkit-mask: var(--ridge) 0 0 / 100% 100% no-repeat; mask: var(--ridge) 0 0 / 100% 100% no-repeat; }
.away__dawn::before { height: clamp(48px, 6vw, 88px); background: radial-gradient(ellipse 20% 110% at var(--sun-x) 10%, color-mix(in srgb, var(--night-gold) 62%, transparent), transparent), linear-gradient(180deg, var(--night-ridge-far-lit), var(--night-ridge-far) 60%); --ridge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 120V64C110 46 210 30 340 44S560 86 720 70 960 22 1100 36 1330 78 1440 58V120Z'/%3E%3C/svg%3E"); }
.away__ridge { height: clamp(34px, 4.2vw, 62px); background: linear-gradient(180deg, var(--night-ridge-mid), var(--night-mist)); --ridge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 62' preserveAspectRatio='none'%3E%3Cpath d='M0 62V36C140 24 260 20 400 30S640 56 820 46 1100 16 1260 22 1400 38 1440 36V62Z'/%3E%3C/svg%3E"); }
.away__dawn::after { bottom: -1px; height: clamp(22px, 2.8vw, 40px); background: var(--bg-panel); --ridge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V26C200 14 380 10 560 20S900 38 1080 30 1340 12 1440 18V40Z'/%3E%3C/svg%3E"); }
.away__sun { z-index: -1; left: var(--sun-x); bottom: clamp(20px, 2.6vw, 38px); width: clamp(46px, 4.6vw, 70px); aspect-ratio: 1; translate: -50% 45%; border-radius: var(--r-pill); background: radial-gradient(circle closest-side, color-mix(in srgb, var(--night-sun-core) 85%, transparent) 0 42%, color-mix(in srgb, var(--night-sun) 70%, transparent) 70%, transparent); box-shadow: 0 0 26px 8px color-mix(in srgb, var(--night-sun) 22%, transparent), 0 0 90px 40px color-mix(in srgb, var(--night-gold) 14%, transparent); }
/* its light: a few soft beams of uneven width fanning up from it, breathing rather than turning */
.away__sun::before { --ray: color-mix(in srgb, var(--night-sun) 11%, transparent); --ray-faint: color-mix(in srgb, var(--night-sun) 6%, transparent); inset: -320%; border-radius: var(--r-pill); background: conic-gradient(from -90deg, transparent 0deg, var(--ray-faint) 12deg, transparent 24deg 36deg, var(--ray) 47deg, transparent 62deg 70deg, var(--ray-faint) 80deg, transparent 92deg, var(--ray) 106deg, transparent 124deg 132deg, var(--ray-faint) 144deg, transparent 158deg, var(--ray-faint) 166deg, transparent 176deg); filter: blur(5px); -webkit-mask-image: radial-gradient(closest-side, black 6%, transparent 70%); mask-image: radial-gradient(closest-side, black 6%, transparent 70%); }
/* a few thin clouds, each a lilac body with a peach underside where the sun lights it from below */
.away__clouds { z-index: -1; inset: auto 0 clamp(30px, 4vw, 60px); height: clamp(130px, 16vw, 230px); background: radial-gradient(ellipse 8% 5% at 42% 54%, color-mix(in srgb, var(--night-cloud-far) 30%, transparent), transparent), radial-gradient(ellipse 16% 7% at 36% 60%, color-mix(in srgb, var(--night-cloud-lit) 36%, transparent), transparent), radial-gradient(ellipse 10% 4% at 30% 64%, color-mix(in srgb, var(--night-cloud-lit) 55%, transparent), transparent), radial-gradient(ellipse 12% 6% at 15% 74%, color-mix(in srgb, var(--night-cloud-lit) 38%, transparent), transparent), radial-gradient(ellipse 7% 3% at 19% 78%, color-mix(in srgb, var(--night-cloud-lit) 52%, transparent), transparent), radial-gradient(ellipse 20% 6% at 8% 38%, color-mix(in srgb, var(--night-cloud-far) 24%, transparent), transparent), radial-gradient(ellipse 15% 6% at 70% 46%, color-mix(in srgb, var(--night-cloud-far) 30%, transparent), transparent), radial-gradient(ellipse 9% 3% at 73% 50%, color-mix(in srgb, var(--night-cloud-lit) 30%, transparent), transparent), radial-gradient(ellipse 10% 4% at 90% 68%, color-mix(in srgb, var(--night-cloud-far) 26%, transparent), transparent); }

@media (prefers-reduced-motion: no-preference) {
  .away__stars::before { animation: away-twinkle 5s ease-in-out infinite alternate; }
  .away__stars::after { animation: away-twinkle 8s ease-in-out -3s infinite alternate; }
  .away__glints::before { animation: away-glint 6s ease-in-out infinite alternate; }
  .away__glints::after { animation: away-glint 9s ease-in-out -4s infinite alternate; }
  .away__meteors::before { animation: away-meteor 17s ease-out 5s infinite; }
  .away__wisps::before { animation: away-drift 46s ease-in-out infinite alternate; }
  .away__wisps::after { animation: away-drift 34s ease-in-out -12s infinite alternate-reverse; }
  .away__sun::before { animation: away-breathe 9s ease-in-out infinite alternate; }
}
/* scroll down the band and the night passes: the sun's rim comes up over the ridge as the horizon rises up the screen */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .away__dawn { view-timeline: --away-dawn block; }
    .away__sun { animation: away-sunrise linear both; animation-timeline: --away-dawn; animation-range: entry 0% cover 50%; }
  }
}
@keyframes away-twinkle { to { opacity: .55; } }
@keyframes away-glint { from { opacity: .55; scale: .75; } }
@keyframes away-meteor { 0% { opacity: 0; transform: rotate(-26deg) translateX(0); } 1.5% { opacity: .8; } 5%, 100% { opacity: 0; transform: rotate(-26deg) translateX(-200px); } }
@keyframes away-sunrise { from { translate: -50% 110%; } }
@keyframes away-drift { to { translate: 22% 0; } }
@keyframes away-breathe { from { opacity: .55; } }
.away__copy { position: relative; max-width: 760px; text-align: center; }
.away__copy h2 { font-family: var(--font-display); font-weight: var(--font-display-weight); margin-top: 12px; font-size: var(--fs-d2); line-height: 1.02; }
.away__copy .lead { max-width: 36em; margin: 16px auto 0; }
.away__stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 0; align-items: end; margin-top: clamp(32px, 4vw, 48px); padding-bottom: clamp(64px, 6vw, 88px); }
.away__window { position: relative; margin: 0; overflow: hidden; border-radius: var(--r-xl); background: var(--bg-panel); box-shadow: var(--shadow-card); }
.away__chrome { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-bottom: 1px solid var(--line); background: var(--paper); }
.away__chrome i { width: 9px; height: 9px; border-radius: var(--r-pill); background: var(--sand-200); }
.away__chrome span { margin-inline: auto; padding: 2px 14px; border-radius: var(--r-sm); background: var(--bg-panel); box-shadow: var(--shadow-card); font-size: var(--fs-xs); color: var(--caption); }
/* the top of the dashboard: greeting, totals and the outstanding invoices */
.away__screen { position: relative; display: block; overflow: hidden; }
.away__screen img { display: block; width: 100%; height: auto; }

.away__feed { position: relative;  margin: 0 0 clamp(24px, 4vw, 56px) -48px; padding: 18px; border-radius: var(--r-xl); background: var(--bg-panel); box-shadow: var(--shadow-card); }
.away__feed-head { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px 12px; border-bottom: 1px solid var(--line); }
.away__feed-head b { font-weight: 600; color: var(--ink); }
.away__live { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 600; color: var(--paid-fg); }
.away__live::before { content: ""; width: 7px; height: 7px; border-radius: var(--r-pill); background: currentColor; box-shadow: var(--shadow-card);  }
.away__feed ol { display: grid; gap: 2px; margin: 8px 0 0; padding: 0; list-style: none; }
.away__feed li { display: grid; grid-template-columns: 32px 1fr; gap: 10px; align-items: center; padding: 8px 4px; border-radius: var(--r-lg);  }
.away__feed b { display: block; font-size: var(--fs-sm); font-weight: 600; line-height: 1.35; color: var(--ink); }
.away__feed small { display: block; font-size: var(--fs-xs); color: var(--caption); }
.away__feed time { font-family: var(--font-sans); }
.away__icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-lg); background: var(--sent-bg); color: var(--sent-fg); }
.away__feed [data-kind="paid"] .away__icon { background: var(--paid-bg); color: var(--paid-fg); }
.away__feed [data-kind="late"] .away__icon { background: var(--overdue-bg); color: var(--overdue-fg); }
.away__feed-foot { display: flex; justify-content: space-between; align-items: baseline; margin: 8px 0 0; padding: 12px 4px 2px; border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--caption); }
.away__feed-foot b { font-size: var(--fs-sm); font-weight: 600; color: var(--paid-fg); }
/* As the feed comes into view (js/outer/home.js), the night's events arrive one after another, then the total */
@media (prefers-reduced-motion: no-preference) {
  .away__live::before { animation: away-pulse 2.4s ease-in-out infinite; }
  .away__feed[data-arrive="waiting"] :is(li, .away__feed-foot) { opacity: 0; }
  .away__feed[data-arrive="on"] :is(li, .away__feed-foot) { animation: away-arrive .5s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 260ms); }
}
@keyframes away-pulse { 50% { opacity: .35; } }
@keyframes away-arrive { from { opacity: 0; transform: translateY(8px); } }
.away .kicker { color: var(--inv-soft); }
.away h2 { color: var(--inv-strong); }
.away .accent { color: var(--site-accent-inv, var(--hl)); }
.away .lead { max-width: 30em; color: var(--inv-muted); }
/* The window the whole width of the wrap, so the app reads (a 1440 x 900 capture at about 0.8x); the night's feed laid
   over its lower corner, its top just under the dashboard's tiles (54% down the 16:10 screen), hanging below the window
   into the band's foot. It stays in the flow, pulled up over the window, so the band grows with it. */
@media (min-width: 981px) {
  .away .away__stage { display: block; container-type: inline-size; }
  .away .away__feed { width: 340px; margin: calc(100cqi * .625 * -.56) 0 0 auto; }
}
.away .away__window { box-shadow: 0 40px 90px rgba(0, 0, 0, .42), 0 0 0 1px rgba(255, 255, 255, .07); }
.away .away__feed { box-shadow: 0 24px 60px rgba(0, 0, 0, .38); }
/* on a phone, the app on a phone, its top: the money card and what needs you */
@media (max-width: 600px) { .away .away__screen img { max-height: 480px; object-fit: cover; object-position: top; } }
@media (max-width: 980px) {
  .away__stage { grid-template-columns: minmax(0, 1fr); }
  .away__feed { margin: -40px 16px 0; }
}



.home-section { padding-block: 104px; }
.home-section__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: end; margin-bottom: 38px; }
.home-section__head h2, .home-details h2 { font-family: var(--font-display); font-weight: var(--font-display-weight); font-size: clamp(40px, 4.6vw, 62px); line-height: 1.06; }
.home-section__head .kicker { margin-bottom: 16px; }
.home-section__head .lead { font-size: var(--fs-md); line-height: 1.7; }
.home-text-link { display: inline-flex; align-items: center; gap: var(--icon-gap-md); font-size: var(--fs-sm); font-weight: 600; padding-bottom: 5px; margin-top: 19px; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--sand-300); }
.home-text-link:hover { color: var(--site-kicker, var(--gold-deep)); border-color: var(--site-accent, var(--gold)); }
/* three short notes under a section's picture (clients, time) */
.home-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; margin-top: 32px; }
.home-notes > div { padding-top: 18px; border-top: 1px solid var(--line); }
.home-notes h3 { font-size: var(--fs-md); line-height: 1.4; letter-spacing: -.015em; }
.home-notes p { margin-top: 8px; font-size: var(--fs-sm); line-height: 1.65; color: var(--text-muted); }
.site--home .istyles { border-bottom: 0; }
/* the night's morning mist runs straight into it */
.site--home .away + .istyles { border-top: 0; }
.home-details { padding-block: 90px 82px; }
.home-details h2 { font-size: clamp(38px, 4vw, 54px); margin-top: 16px; }
/* six cards, each an icon, a line and a sentence, the whole card the link */
.home-details__head { display: flex; align-items: end; justify-content: space-between; gap: 32px; }
.home-details__head .home-text-link { margin: 0 0 6px; flex: none; }
.home-details__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 44px 0 0; padding: 0; list-style: none; }
.home-detail { position: relative; display: grid; align-content: start; gap: 8px; height: 100%; padding: 28px 28px 30px; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--bg-panel); color: inherit; text-decoration: none; transition: border-color .2s, box-shadow .2s, transform .2s; }
.home-detail:hover { border-color: color-mix(in srgb, var(--m) 35%, var(--line)); box-shadow: var(--shadow-card); transform: translateY(-2px); }
.home-detail:focus-visible { outline: 2px solid var(--m); outline-offset: 3px; }
.home-detail__icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 12px; border-radius: var(--r-lg); background: color-mix(in srgb, var(--m) 10%, transparent); color: var(--m); }
.home-detail h3 { font-size: var(--fs-md); font-weight: 600; line-height: 1.35; letter-spacing: -.015em; color: var(--ink); }
.home-detail p { font-size: var(--fs-sm); line-height: 1.6; color: var(--text-muted); }
.home-detail > .bg-icon:last-child { position: absolute; top: 30px; right: 26px; color: var(--m); opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .2s; }
.home-detail:is(:hover, :focus-visible) > .bg-icon:last-child { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .home-detail, .home-detail > .bg-icon:last-child { transition: none; } .home-detail:hover { transform: none; } }
@media (max-width: 980px) { .home-details__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .home-details__head { display: block; }
  .home-details__head .home-text-link { margin-top: 18px; }
  .home-details__grid { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 30px; }
  .home-detail { grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; row-gap: 4px; padding: 20px; }
  .home-detail__icon { grid-row: span 2; margin: 0; }
  .home-detail > .bg-icon:last-child { display: none; }
}
.home-pricing { padding-block: 92px; }
.home-pricing__head { margin-bottom: 42px; text-align: center; }
.home-pricing__head h2 { font-family: var(--font-display); font-weight: var(--font-display-weight); margin-top: 17px; font-size: clamp(38px, 4.2vw, 56px); line-height: 1.07; }
.home-pricing__head > p:last-child { margin-top: 22px; color: var(--text-muted); }
.home-pricing__more { text-align: center; margin-top: 28px; font-size: var(--fs-sm); color: var(--caption); }
.home-pricing__more a { display: inline-flex; align-items: center; gap: var(--icon-gap-md); text-underline-offset: 4px; }
.site--home .closing { max-width: none; padding: 88px var(--site-gutter) 80px; background: var(--sand-50); border-top: 1px solid var(--line); }
.site--home .closing h2 { font-family: var(--font-display); font-weight: var(--font-display-weight); margin-top: 17px; font-size: clamp(46px, 5.4vw, 76px); line-height: 1.03; }
.site--home .closing .lead { margin-top: 24px; }
.site--home .closing > .btn { margin-top: 28px; }
.closing__assurances { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px 28px; list-style: none; padding: 0; margin: 26px 0 0; font-size: var(--fs-xs); color: var(--caption); }

@media (min-width:1440px) { .home-hero { padding-top:86px; } .home-hero h1 { font-size:88px; } }
@media (max-width:1000px) { .home-section__head { gap:44px; } }
@media (max-width:860px) { .home-hero, .home-section__head { grid-template-columns:minmax(0,1fr); gap:28px; } .home-hero { padding-top:52px; } .home-hero .lead { max-width:35em; } .home-hero h1 { font-size:70px; } }
@media (max-width:700px) {
  .site--home .site-header__bar { height:68px; }
  .home-hero { padding-block:39px 28px; gap:24px; }
  .home-hero h1 { font-size:60px; }
  .home-hero .kicker { margin-bottom:20px; }
  .home-hero__pitch { padding:0; }
  .home-hero .lead { font-size:16px; }
  .home-actions { gap:20px; margin-top:23px; }
  .home-section { padding-block:64px; }
  .home-section__head { gap:23px; margin-bottom:27px; }
  .home-section__head h2, .home-details h2 { font-size:42px; }
  .home-section__head .lead { font-size:16px; }
  .home-notes { grid-template-columns:minmax(0,1fr); gap:22px; margin-top:26px; }
  .home-details { padding-block:58px; }
  .home-pricing { padding-block:60px; }
  .home-pricing__head h2 { font-size:40px; }
  .site--home .closing { padding-block:58px; }
  .site--home .closing h2 { font-size:58px; }
}
@media (max-width:370px) { .home-hero h1 { font-size:48px; } .home-actions { gap:13px; } .home-actions .btn { padding-inline:18px; } }

/* ---- the hero (docs/BRAND_REFRESH.md "Front page") ---- */

/* The ledger behind the hero: --hero-texture (outer/site.css) draws its grid. */
.home-hero { position: relative; isolation: isolate; }
.home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--hero-texture);
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 30% 45%, #000 20%, transparent 78%);
  mask-image: radial-gradient(ellipse 70% 80% at 30% 45%, #000 20%, transparent 78%);
}

/* The staged hero: the job in a line, centered, one way in and one fact under it; then the job's three chapters as one
   path over its parts (the rail), the app's own screens of the shown part in a window (.hs, fragments/home-stage.html)
   and what that part does as the window's caption. Close enough together that a 1280x720 laptop sees the app. */
.home-hero.is-staged { display: block; padding-block: 30px 48px; text-align: center; }
.home-hero.is-staged .kicker { margin-bottom: 12px; text-wrap: balance; }
/* one line where it fits, so the product shows sooner; two on narrower screens */
.home-hero.is-staged :where(h1) { font-size: clamp(50px, 5.8vw, 84px); line-height: 1; letter-spacing: -.045em; text-wrap: balance; }
.home-hero__br { display: none; }
.home-hero.is-staged .home-hero__pitch { padding: 0; }
.home-hero.is-staged .lead { max-width: 44em; margin: 16px auto 0; text-wrap: balance; }
/* the lead names the chapters in the rail's colors (data-m), so its words and the path below read as one */
.home-hero__ch { font-weight: 600; color: var(--m); }
.home-hero.is-staged .home-actions { justify-content: center; gap: 28px; margin-top: 22px; }
.home-hero.is-staged .home-actions .btn--primary { padding-inline: 26px; box-shadow: 0 1px 1px rgba(var(--shadow-rgb), .08), 0 10px 24px -12px color-mix(in srgb, var(--site-accent) 70%, transparent); }
.home-hero__fact { margin-top: 12px; font-size: var(--fs-sm); color: var(--caption); }
/* The season's line ("to paid before the pie.", 8.44em) on one row, centered, and the character beside "From hello",
   flush with the line's end (seasonal-touches.css places it by these measures). */
.home-hero.is-staged [data-seasonal-stage] { --seasonal-line: 8.44; }
.home-hero.is-staged [data-seasonal-stage] .home-hero__br { display: inline; }
.home-hero.is-staged [data-seasonal-stage] > * { --seasonal-type: min(calc(100cqi / (var(--seasonal-line) + .14)), 96px); }
.home-hero.is-staged [data-seasonal-stage] .seasonal-trigger[data-seasonal-placement="hero"] {
  right: max(0px, calc(50% - var(--seasonal-type) * var(--seasonal-line) / 2));
}

/* The window: the screens are captures of the app at 1280 CSS pixels, shown at about 0.9x in the wrap, so the app's
   own type stays readable; on a phone, the app on a phone. */
.hs { position: relative; max-width: 1160px; margin: 22px auto 0; }
.hs-window {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--bg-panel);
  box-shadow: 0 1px 2px rgba(var(--shadow-rgb), .06), 0 30px 60px -30px rgba(var(--shadow-rgb), .35), 0 70px 120px -60px rgba(var(--shadow-rgb), .3);
}
.hs-chrome { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 40px; padding-inline: 16px; border-bottom: 1px solid var(--line); background: var(--sand-50); }
.hs-chrome::before { content: ""; justify-self: start; width: 8px; height: 8px; border-radius: 50%; background: var(--sand-300); box-shadow: 14px 0 var(--sand-300), 28px 0 var(--sand-300); }
.hs-url { min-width: 0; padding: 3px 18px; border-radius: var(--r-pill); background: var(--bg-panel); box-shadow: inset 0 0 0 1px var(--line); font-size: 12px; color: var(--caption); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-pause { justify-self: end; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--caption); cursor: pointer; }
.hs-pause:hover { background: var(--bg-panel); color: var(--ink); }
.hs-pause:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 1px; }
.hs-pause .hs-i-play, .hs-pause[aria-pressed="true"] .hs-i-pause { display: none; }
.hs-pause[aria-pressed="true"] .hs-i-play { display: block; }
/* Stacked in one cell: the screen coming in fades in over the one going (.is-leaving, js/outer/home.js). */
.hs-screens { display: grid; aspect-ratio: 1280 / 800; background: var(--bg-app); }
.hs-screens > picture { grid-area: 1 / 1; min-width: 0; }
.hs-screens > picture:not(.is-leaving) { z-index: 1; }
.hs-screens > picture:not([hidden]):not(.is-leaving) { animation: hs-in .55s var(--ease-out); }
.hs-screens img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
@keyframes hs-in { from { opacity: 0; } }

/* The rail: the job's three chapters as one path, each stretch over its own parts; the shown part's chapter is solid,
   the ones behind it half, the ones ahead faint (the rail's data-ch, js/outer/home.js). */
/* One grid for both rows: a column per part, never narrower than its tab, the chapters spanning theirs (subgrid). */
.hs-rail { display: grid; grid-template-columns: repeat(var(--n, 10), minmax(max-content, 1fr)); column-gap: var(--space-3); max-width: 1160px; margin: 30px auto 0; }
.hs-rail ol { margin: 0; padding: 0; list-style: none; }
.hs-rail > ol { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; }
.hs-rail .hs-chapters { margin-bottom: 6px; }
.hs-chapters li { position: relative; grid-column: span var(--win, 3); padding-bottom: 10px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .12em; text-align: center; text-transform: uppercase; white-space: nowrap; color: var(--m); }
.hs-chapters li:nth-child(2) { grid-column: span var(--do, 4); }
.hs-chapters li:last-child { grid-column: span var(--paid, 3); }
.hs-chapters li::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: 0; height: 3px; border-radius: 3px; background: color-mix(in srgb, var(--m) 18%, transparent); transition: background-color var(--duration-fast); }
.hs-rail[data-ch="2"] .hs-chapters li:nth-child(1)::after,
.hs-rail[data-ch="3"] .hs-chapters li:nth-child(-n+2)::after { background: color-mix(in srgb, var(--m) 50%, transparent); }
.hs-rail[data-ch="1"] .hs-chapters li:nth-child(1)::after,
.hs-rail[data-ch="2"] .hs-chapters li:nth-child(2)::after,
.hs-rail[data-ch="3"] .hs-chapters li:nth-child(3)::after { background: var(--m); }
/* Its parts are tabs, not buttons: nothing filled or outlined beside the one way in. The shown part is its word in ink
   over a line in its color, the line that runs out while the tour waits on it (its end moves the tour on). */
.hs-rail [role="tablist"] li { position: relative; isolation: isolate; animation: hs-part .5s var(--ease-out) both; }
.hs-rail button { position: relative; display: flex; justify-content: center; align-items: center; gap: var(--icon-gap-sm); width: 100%; padding: 8px 6px 12px; border: 0; background: none; font: inherit; color: var(--text-muted); cursor: pointer; }
.hs-icon { display: flex; color: var(--m); }
.hs-icon .bg-icon { transition: translate .18s var(--ease-out); }
.hs-rail b { font-size: var(--fs-sm); font-weight: 500; white-space: nowrap; }
.hs-rail [aria-selected="true"] b { font-weight: 600; color: var(--ink); }
.hs-rail button::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: 0; height: 2px; border-radius: 2px; background: var(--m); transform: scaleX(0); transform-origin: left center; }
.hs-rail [aria-selected="true"]::after { transform: scaleX(1); }
.hs-rail[data-touring] [aria-selected="true"]::after { animation: hs-dwell 6s linear both; }
.hs-rail[data-touring="paused"] [aria-selected="true"]::after { animation-play-state: paused; }
/* Pointing at a part previews it in its color: its line at half strength over a soft wash, the icon lifted. Never on a
   touch screen, which has no hover; the keyboard's focus shows the same and a ring. */
.hs-rail button::before { content: ""; position: absolute; inset: 0; z-index: -1; border-bottom: 2px solid color-mix(in srgb, var(--m) 50%, transparent); background: linear-gradient(to top, color-mix(in srgb, var(--m) 12%, transparent), transparent 75%); opacity: 0; transform: scaleX(.6); transition: opacity .18s var(--ease-out), transform .22s var(--ease-out); }
@media (hover: hover) {
  .hs-rail button:not([aria-selected="true"]):hover::before { opacity: 1; transform: none; }
  .hs-rail button:hover .hs-icon .bg-icon { translate: 0 -2px; }
  .hs-rail button:hover b { color: var(--ink); }
}
.hs-rail button:focus-visible { outline: 2px solid color-mix(in srgb, var(--m) 60%, transparent); outline-offset: -2px; border-radius: var(--r-sm); }
.hs-rail button:not([aria-selected="true"]):focus-visible::before { opacity: 1; transform: none; }
.hs-rail button:focus-visible b { color: var(--ink); }
.home-hero > .hs-says { max-width: 1160px; margin: 22px auto 0; }
.hs-says p { max-width: 46em; margin: 0 auto; font-size: var(--fs-body); line-height: 1.6; color: var(--text-muted); text-wrap: balance; }
.hs-says p:not([hidden]) { animation: hs-in .45s var(--ease-out); }
.hs-says b { font-weight: 600; color: var(--ink); }
.hs-says a { font-weight: 600; white-space: nowrap; color: var(--ink); text-underline-offset: 3px; }
@keyframes hs-part { from { opacity: 0; translate: 0 6px; } }
@keyframes hs-dwell { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  .hs-rail [role="tablist"] li, .hs-screens > picture, .hs-says p { animation: none !important; }
  .hs-rail button::before, .hs-icon .bg-icon { transition: none; }
}
/* Too narrow for every part in a row: they scroll sideways in one line, edge to edge, the shown one kept centered
   (js/outer/home.js); the path above keeps each chapter over its parts' share. */
@media (max-width: 1140px) {
  .hs-rail { display: block; margin-inline: calc(-1 * var(--site-gutter)); }
  .hs-rail .hs-chapters { grid-template-columns: repeat(var(--n, 10), minmax(0, 1fr)); gap: var(--space-3); margin: 0 var(--site-gutter) 6px; }
  .hs-rail [role="tablist"] { display: flex; gap: var(--space-1); overflow-x: auto; padding: 2px var(--site-gutter) 6px; scroll-padding-inline: var(--site-gutter); scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--site-gutter), #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(90deg, transparent 0, #000 var(--site-gutter), #000 calc(100% - 28px), transparent); }
  .hs-rail [role="tablist"]::-webkit-scrollbar { display: none; }
  .hs-rail [role="tablist"] li { flex: none; }
  /* centered while they fit, flush to the start once they scroll */
  .hs-rail [role="tablist"] li:first-child { margin-left: auto; }
  .hs-rail [role="tablist"] li:last-child { margin-right: auto; }
  .hs-rail button { padding-inline: 8px; }
}
@media (max-width: 980px) {
  .home-hero__br { display: inline; }
}
/* A phone: the app on a phone, its top two thirds; the path's chapters read from the left. */
@media (max-width: 600px) {
  .home-hero.is-staged { padding-bottom: 32px; }
  .home-hero.is-staged :where(h1) { font-size: 56px; }
  .home-hero.is-staged .lead { font-size: 16px; }
  .home-hero.is-staged .home-actions { gap: 20px; }
  .hs-rail { margin-top: 28px; }
  .hs-rail .hs-chapters { gap: 6px; margin-bottom: 6px; }
  .hs-chapters li { padding-bottom: 8px; font-size: 10px; letter-spacing: .1em; text-align: left; }
  .hs-chapters li::after { left: 0; right: 0; }
  .hs-rail b { font-size: 13px; }
  .hs { max-width: 400px; margin-top: 14px; }
  .hs-window { border-radius: 22px; }
  .hs-chrome { height: 34px; }
  .hs-screens { aspect-ratio: 390 / 620; }
  .home-hero > .hs-says { margin-top: 16px; text-align: left; }
  .hs-says p { font-size: var(--fs-sm); }
}
@media (max-width: 370px) { .home-hero.is-staged :where(h1) { font-size: 48px; } }

/* One client from both sides (fragments/home-sides.html): the studio's page for Fern & Field and Maya's own page with
   the studio, in one frame split by a seam that moves (js/outer/home.js). Both captures are the same 948 x 760 CSS
   pixels, shown a little wider than three quarters of the frame (the most a side can take), so neither runs out; at
   half each, each side ends at a natural edge of its page (the studio's after Client hub, Maya's after her main
   column). Below 900px the two are tabs; on a phone, the phone's captures. */
@property --split { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
.sides { margin: 0; }
.sides__frame {
  --split: 50%;
  position: relative;
  container-type: inline-size;
  display: grid;
  grid-template-columns: minmax(0, var(--split)) minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  background: var(--bg-panel);
  box-shadow: 0 1px 2px rgba(var(--shadow-rgb), .06), 0 30px 60px -30px rgba(var(--shadow-rgb), .35), 0 70px 120px -60px rgba(var(--shadow-rgb), .3);
}
.sides__frame.is-dragging { cursor: ew-resize; user-select: none; }
.sides__pane { min-width: 0; overflow: hidden; }
.sides__label { display: flex; align-items: center; gap: var(--icon-gap-md); height: 56px; margin: 0; padding: 0 var(--space-5); border-bottom: 1px solid var(--line); background: var(--sand-50); font-size: var(--fs-sm); white-space: nowrap; color: var(--caption); }
.sides__label b { font-weight: 600; color: var(--ink); }
.sides__label > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sides__label > span:last-child::before { content: "\00b7" / ""; margin-inline-end: var(--icon-gap-md); }
.sides__pane + .sides__pane .sides__label { padding-inline-start: calc(var(--space-5) + 6px); }
.sides__mark { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: var(--r-md); background: color-mix(in srgb, var(--m) 12%, transparent); color: var(--m); }
/* the page runs on below the frame: its foot fades into it */
.sides__shot { display: block; -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); }
.sides__shot img { display: block; width: max(78.5cqi, 760px); max-width: none; height: auto; }

/* The seam: a line the full height of the frame and a grip at its middle; the line, the grip and the space either side
   of it take the pointer, and the keyboard moves it (a WAI-ARIA window splitter). */
.sides__seam { position: absolute; z-index: 1; inset-block: 0; left: var(--split); display: grid; place-items: center; width: 44px; margin-left: -22px; cursor: ew-resize; touch-action: none; }
.sides__seam[hidden] { display: none; }
.sides__seam::before { content: ""; position: absolute; inset-block: 0; left: 50%; width: 2px; margin-left: -1px; background: var(--ink); }
.sides__grip { position: relative; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: var(--bg-panel); box-shadow: 0 0 0 4px var(--bg-panel), 0 12px 24px -8px rgba(var(--shadow-rgb), .55); transition: scale var(--duration-fast) var(--ease-out); }
.sides__grip .bg-icon + .bg-icon { margin-left: -2px; }
.sides__seam:hover .sides__grip, .is-dragging .sides__grip { scale: 1.08; }
.sides__seam:focus-visible { outline: none; }
.sides__seam:focus-visible .sides__grip { box-shadow: 0 0 0 4px var(--bg-panel), 0 0 0 7px var(--site-accent, var(--gold)); }
/* Once, the first time the frame comes into view, the seam leans each way to say it moves (js adds .is-hinting). */
.sides__frame.is-hinting { animation: sides-hint 1.4s var(--ease-out); }
@keyframes sides-hint { 0%, 100% { --split: 50%; } 38% { --split: 57%; } 72% { --split: 47%; } }

.sides figcaption { margin-top: var(--space-4); font-size: var(--fs-sm); line-height: 1.6; text-align: center; color: var(--caption); }

/* The tabs that take the seam's place below 900px. */
.sides__switch { display: flex; gap: var(--space-1); width: fit-content; max-width: 100%; margin: 0 auto var(--space-4); padding: var(--space-1); border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--bg-panel); }
.sides__switch[hidden] { display: none; }
.sides__switch button { display: inline-flex; align-items: center; gap: var(--icon-gap-sm); min-height: var(--tap-min); padding: 0 var(--space-4); border: 0; border-radius: var(--r-pill); background: transparent; font: inherit; font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; color: var(--text-muted); cursor: pointer; }
.sides__switch button:hover { color: var(--ink); }
.sides__switch [aria-selected="true"] { background: var(--ink); color: var(--bg-panel); }
.sides__switch button:focus-visible { outline: 2px solid var(--site-accent, var(--gold)); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .sides__frame.is-hinting { animation: none; }
  .sides__grip { transition: none; }
}
@media (max-width: 899px) {
  .sides__frame { grid-template-columns: minmax(0, 1fr); container-type: normal; }
  .sides__pane + .sides__pane { border-top: 1px solid var(--line); }
  .sides__shot img { width: 100%; }
  /* with script the tabs name each side, and the side picked fades in */
  .sides.is-live .sides__label { display: none; }
  .sides.is-live .sides__pane + .sides__pane { border-top: 0; }
  .sides.is-live .sides__pane:not([hidden]) { animation: hs-in .4s var(--ease-out); }
}
@media (max-width: 899px) and (prefers-reduced-motion: reduce) { .sides.is-live .sides__pane:not([hidden]) { animation: none; } }
@media (max-width: 600px) {
  .sides__switch { width: 100%; }
  .sides__switch button { flex: 1; justify-content: center; padding-inline: var(--space-2); }
}