/* Image Lantern website: the page.
   Its theme (the custom properties base.css reads), the hero, a chapter for each of the app's six pages in a color
   of its own, the numbers, pricing and questions. */

/* the type, served from the site: Instrument Sans (under the SIL Open Font License, in assets/fonts), in two parts:
   the Latin letters, and the accented ones, fetched only for a page that uses them */
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-stretch: 75% 100%; font-display: swap; src: url(../fonts/instrument-sans-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-stretch: 75% 100%; font-display: swap; src: url(../fonts/instrument-sans-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --bg: #000000;
  --ink: #f1f2f0;
  --dim: #979ca3;
  --mute: #666b73;
  --line: rgba(255, 255, 255, .1);
  --panel: #0d0e11;
  --btn-bg: #f1f2f0; --btn-ink: #000000; --btn-glow: 0 0 16px -2px rgba(40, 190, 235, .8); --btn-line: rgba(255, 255, 255, .42);
  --nav-bg: rgba(0, 0, 0, .65);
  /* the page's vertical rhythm: between one section's last line and the next one's title; between chapters; and
     from content to the edge of a band (pricing), and inside it */
  --gap-section: clamp(100px, 12vw, 180px); --gap-chapter: clamp(70px, 9vw, 130px); --gap-band: clamp(70px, 8.5vw, 124px);
  /* the app icon's colours, for the band of light over "card to client." */
  --icon-teal: #23c6b2; --icon-aqua: #26d7cf; --icon-sky: #5ad4e6; --icon-mist: #90e6ea; --icon-sun: #fff7d3;
  --display: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --body: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  /* one type scale for the page (the hero and the price keep their own fitted sizes) */
  --t-title: clamp(36px, 4.6vw, 72px);   /* every section's title, and each chapter's name */
  --t-sub: clamp(24px, 2.4vw, 36px);     /* a pane's name, and the line under a chapter's name */
  --t-lead: clamp(19px, 1.6vw, 23px);    /* questions and small headings */
  --t-body: clamp(16.5px, 1.25vw, 18px); /* reading text */
  --t-small: 15px;                       /* lists, captions, descriptions, buttons */
  --t-tiny: 13px;                        /* notes, tags, fine print */
  --q-font: 500 var(--t-lead) var(--display);
}
html { scrollbar-color: #2a2d33 #000000; }
body { font-weight: 400; font-size: var(--t-body); line-height: 1.55; }
::selection { background: #f1f2f0; color: #000000; }
sup { font-size: .58em; line-height: 0; }
sup a { color: inherit; opacity: .8; }
.nav__brand { font-weight: 600; letter-spacing: -.015em; }
.nav__end { font-weight: 400; }
.btn { font-weight: 500; }

.display { font: 600 clamp(42px, 6vw, 98px)/1.02 var(--display); letter-spacing: -.022em; text-wrap: balance; }
.h2 { font: 600 var(--t-title)/1.04 var(--display); letter-spacing: -.022em; text-wrap: balance; }
.lede { font-size: var(--t-lead); line-height: 1.5; color: #c9cdd2; text-wrap: pretty; }
.body { font-size: var(--t-body); color: var(--dim); max-width: 31em; text-wrap: pretty; }
.facts { border-top: 1px solid var(--line); font-size: var(--t-small); color: var(--dim); }
.facts li { position: relative; padding: 11px 0 11px 20px; border-bottom: 1px solid var(--line); }
.facts li::before { content: ""; position: absolute; left: 2px; top: 1.22em; width: 6px; height: 6px; border-radius: 50%; background: var(--a, var(--ink)); }
.facts kbd { background: rgba(255, 255, 255, .09); }

/* a page's mark: its glyph in a ring of its own color, the way the app draws a step */
.disc { display: grid; place-items: center; width: clamp(40px, 4vw, 64px); height: clamp(40px, 4vw, 64px); flex: none; border-radius: 50%; background: rgba(0, 0, 0, .55); box-shadow: inset 0 0 0 1.5px var(--a); }
.disc svg { width: 52%; height: 52%; fill: none; stroke: var(--a); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.disc svg.fill { fill: var(--a); stroke: none; }

/* ── the shoot, then the app, then the Mac ─────────
   The page opens on a wall of photographs that becomes the app's contact sheet; the camera then pulls back to
   the whole window, then to the display it sits on, then the name. Without the opening (a phone, or reduced
   motion) the hero is simply its last frame. */
.hero { position: relative; }
.hero__stage { --mw: clamp(120px, min(90vw, 620px, var(--fit, 90vw)), 620px); --icon: clamp(40px, min(max(4.8vw, 52px), 7.6svh), 84px); position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100svh; padding: var(--top, calc(var(--nav) + 14px)) var(--pad) var(--bottom, 24px); }
/* always one screen with the trial button on it (main.js sizes the display to fit): on a short screen the icon and the
   name give way, since the nav carries both, and on a phone on its side the display goes too */
.hero__stage.is-tight :is(.hero__icon, .hero__name) { display: none; }
.hero__stage.is-tight .hero__copy .display { margin-top: 0; }
.hero__stage.is-bare .mon { display: none; }
.hero__copy, .hero__foot { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero__copy { margin-bottom: clamp(18px, 5.2svh, 68px); }
.hero__foot { margin-top: clamp(18px, 5.2svh, 68px); }
.hero__icon { width: var(--icon); height: auto; }
.hero__name { margin-top: 14px; font-weight: 600; font-size: clamp(19px, 1.5vw, 23px); letter-spacing: -.015em; }
.hero__copy .display { margin-top: 8px; font-size: clamp(34px, min(3.9vw, 6.6svh), 72px); }
.hero__foot .lede { max-width: 36em; font-size: clamp(17px, min(max(1.6vw, 18px), 2.8svh), 25px); letter-spacing: -.018em; color: #e8eaec; }
.lede > span { display: block; text-wrap: balance; }  /* a sentence to a line, here and under "Less AI." */
/* the four verbs, each in the colours of the page that does it: Ingest, Contact Sheet, Photo Details, Delivery */
.lede strong { font-weight: 600; color: var(--ink); }  /* emphasis in a lede: bold, and a step brighter than the line around it */
.lede__verb { font-weight: inherit; --grad: linear-gradient(90deg, var(--a), var(--b)); }
.hero__cta { margin-top: clamp(16px, 4svh, 48px); margin-bottom: 0; }  /* the note hangs into the room below (main.js) */
/* "card to client." catches a band of light in the app icon's colours as the hero lands; it passes left to right and
   leaves the words white (main.js) */
.hero__copy .hl { white-space: nowrap; --grad: linear-gradient(90deg, var(--ink) 25%, var(--icon-teal) 37%, var(--icon-aqua) 46%, var(--icon-sky) 55%, var(--icon-mist) 63%, var(--icon-sun) 69%, var(--ink) 75%); background-size: 400% 100%; background-position: 0 0; }

/* the display: black glass in a thin graphite rim with near-square corners, on a wide neck and a flat foot */
.mon { position: relative; isolation: isolate; flex: none; width: var(--mw); }
/* the backlight: one teal-leaning blue light from the screen, breathing, swelling a little and easing back every 8 s.
   Opacity and scale only, on a layer of its own: the compositor runs it. Paused when the hero is out of view; still
   for reduced motion. */
.mon__glow { position: absolute; inset: -38% -50% -20%; z-index: -1; pointer-events: none; }
.mon__glow span { position: absolute; inset: 0; background: url(../images/hero-glow.png) center / 100% 100% no-repeat; animation: glow-breathe 8s ease-in-out infinite; }
@keyframes glow-breathe { 50% { opacity: .8; transform: scale(1.05); } }
.hero.is-away .mon__glow span { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .mon__glow span { animation: none; } }
.mon__rig { position: relative; transform-origin: 0 0; }
.mon__body { position: relative; z-index: 1; padding: max(1.5px, calc(var(--mw) * .0022)); border-radius: calc(var(--mw) * .0068); background: linear-gradient(172deg, #8a8e95, #51545a 12%, #3a3c41 55%, #4a4d52); box-shadow: 0 0 0 1px rgba(0, 0, 0, .55); }
.mon__bezel { padding: max(5px, calc(var(--mw) * .0175)); border-radius: calc(var(--mw) * .0048); background: #030304; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .035); }
.mon__screen { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 1px; background: #000; }
/* the stand sits behind the display, its neck tucked under the display's bottom edge */
.mon__stand { position: relative; display: block; width: 100%; height: auto; margin-top: -1.2%; }

/* the app window, laid out in points (1 px here is 1 pt in the app) at a 27-inch display's 2560 x 1440, and scaled to the screen */
.win { position: absolute; left: 0; top: 0; width: 2560px; height: 1440px; transform-origin: 0 0; transform: scale(var(--k, .25)); }
.win__chrome { position: absolute; left: 0; top: 0; width: 2560px; height: 1440px; max-width: none; }

/* the contact sheet, to the app's own metrics: 12 pt margins, 10 and 12 pt gaps, square cards with a 3 pt
   inset, and a 36 pt label zone for the stars and the file name */
.sheet { position: absolute; left: 421px; top: 136px; width: 1720px; height: 1238px; overflow: hidden; background: #1e1e1e; font: 400 10px/13px -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; color: #a3a3a3; letter-spacing: 0; }
.cells { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 12px 10px; align-content: start; padding: 12px; }
.sheet li { display: grid; grid-template-rows: auto 36px; min-width: 0; }
.card { display: grid; place-items: center; aspect-ratio: 1; padding: 3px; border-radius: 6px; background: rgba(255, 255, 255, .049); }
/* the photographs, in a layer of their own above the cards: placed by transform, so the opening can lay them
   out as a bare wall first and carry each into its card */
.photos { position: absolute; inset: 0; pointer-events: none; }
.ph { position: absolute; left: 0; top: 0; width: var(--tw); height: var(--th); overflow: hidden; transform-origin: 0 0; }
.ph img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
/* the black behind the bare wall of pictures at the start of the opening */
.sheet__dark { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; }
/* the flash as each picture lands: a white layer over it, fading out */
.ph i { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
/* without the opening the pictures arrive one by one (hero.js, fill()), each fading in with a flash: two transitions,
   which the browser runs on a layer of its own for each picture. They fade by the opacity() filter, not the opacity
   property: after a tap, Safari on iOS watches for a
   moment to see whether something on the page is becoming visible (its test for a menu that opens on hover), and if so
   takes the tap for a hover and drops the click. A picture going from opacity 0 to 1 every 30 ms, with a transition on
   it, is just that, and no tap landed while the pictures came in. The filter draws the same, and isn't watched */
.sheet.is-filling .ph { transition: filter .12s ease-out; }
.sheet.is-filling .ph i { opacity: 1; transition: filter .6s cubic-bezier(.33, 1, .68, 1); }
.sheet.is-filling .ph:not(.is-in) { filter: opacity(0); transition: none; }
.sheet.is-filling .ph:not(.is-in) i { filter: opacity(.85); transition: none; }
.sheet.is-filling .ph.is-in i { filter: opacity(0); }
.sheet li.is-sel .card { box-shadow: 0 0 0 1.5px #3478f9, inset 0 0 0 1.5px #3478f9; }
.stars { position: relative; justify-self: center; width: 84px; height: 12px; margin-top: 5.5px; }
/* the star strips are pictures, not masks, so a moving camera does not have to rebuild them every frame */
.stars::before, .stars::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; background: var(--m) 0 0 / 84px 12px no-repeat; }
.stars::before { --m: url(data:image/png;base64,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); right: 0; }
.stars::after { --m: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKgAAAAYCAYAAABugbbBAAAD8UlEQVR42u3bzWtdRRjH8e9vzrnJfW3ajVWjFt+gbxJotdIqfYGCFSuCXRVBcaH+B0JXJSvBf0BEELoqiAhSKIqFZmtdVGhaUyhKoa2tEtJ4k9xw75l5XOQkJmnTJPUaA2dmeQdmPufwzNznPHMOrKKZITPEOmnREz2xxbb+mxnODNml8is2XD1ihuwrkuiJnnXhsfOkAHa5csquVH7IJ/3/Ljh6CuPRCqJfEmY/b65R+utXnDbQck9p18Sfs31rncdET3E8btkZhkgMRGniKDX3CDWVqfi38961X5XRUyjP8gF6kCAwCO+DQWYQeDfvDWt+wdFTKI8A7CSOg4uC9WAewEMENjeeIfXDZKQYUMLINMCdyRH6SXgez9B9YHq4G2KGYyh6Cu0ZImiQkAJokMDg0ji74o9TV4kxywCoK2UsvKNDnACybi+6/EZFT/TkO+ilykv0uZdpchdZAjyKrDI3peNDUj1GO09oS4iO3UH6DDPhAFMLuI3JU2MjE+GCdrYurCYxn0uohyt7qLs9TEZPIT0NNjIeftQLrZ9khmO43E+PvqA/eY0xmwnb+Rt202bifPaZ34AUaMwrAoT8902CW/472vYRO6ZvALaaCwbE5fIT9OhzHk+ORE8BPTf997TtA3ZO35SBZpJYsJHqx5T4hDbg6eBIcmqCFpWkDAM8AgKehBI9QIcT2jr1ae6YG3vF+Uz0RM9Cz9xKcBLefqm8SUmnSLWJSfNomVKA4akpIbMxOvaetrXO5EXY8LA1t+iJnlmPy5Nck/BmpNrWOsNkspcsXKShBHvAk50RaCghCxeZTPbmg6cS/t8UhKMnemY9btFEmZ0n1UDzKrerB5gO56hKgL/P8J6qxHQ4x+3qAQ00r9p5Uql7T4nREz3pPZMcIpuJ4tGmXS43qTATy7o3+SBFTFlTr44288jvfgkjegrt0ZKlg+t9m5hoXydVgyxPabVgeJEiMmtS79miLeNj/8VZb/QU2+OWPP4c7+yjrgYZAfCUEb2IHkQZB3gyPHU1GO/sW/HR6epb9BTY45Yq3lMKh0kVMDr0KUX2O207Rps3MK6zUSmQkShQCoeX2pG78a8RPcX1uMU1LcCbIbz2E3DU1UvLTjOm3dre+kY7ps5y173IRPiSKr2Aw2t/Xmrw1sWLjp7oWZw/uJmjz95n7UbN7Frlll2pHZ/Xn8x/0dRGKm/ZtepvdrNmNrzhufljdCmfiZ6CexbiZt9Ice4o7XCWUe3S9snT+cDK61M+//gp0dbWt/yR7qZtX0Pn9QVjdKNFT/TcZ4vGRnqfnh/1D1gx/6yGS+Unu53MRE/0PLBcYCeXX11r9Slp9BTT8zcYtD6h+J1YjwAAAABJRU5ErkJggg==); width: calc(var(--r, 0) * 18px - 6px); }
.name { display: flex; align-items: center; justify-content: center; gap: 4px; height: 13px; margin-top: 4.5px; white-space: nowrap; }
.name i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--dot); }

/* with the opening: one screen tall, the camera's frame */
.zoom .hero__stage { --mw: clamp(120px, min(56vw, var(--fit, (100svh - 4.2vw - 456px) * 1.28)), 1240px); }
.hero__scrim { display: none; }
.zoom .hero__scrim { display: block; position: absolute; inset: 0 0 auto; z-index: 2; height: 170px; background: linear-gradient(rgba(0, 0, 0, .78), rgba(0, 0, 0, 0)); opacity: 0; pointer-events: none; }
.zoom .hero:not(.is-set) .hero__stage > * { visibility: hidden; animation: hero-show 0s 6s forwards; }
.zoom .hero.is-loading .hero__stage > * { animation: none; }
/* the loading screen, if the pictures are slow to come (hero.js): a faint, slow swirl of the backlight's colours
   that breathes and changes shape */
.hero__load { position: absolute; inset: 0 0 auto; z-index: 3; display: none; place-items: center; height: 100svh; opacity: 0; pointer-events: none; transition: opacity .6s; }
.zoom .hero__load { display: grid; }
.hero.is-loading .hero__load { opacity: .62; }
.hero__orb { position: relative; width: 92px; height: 92px; }
.hero__orb i { position: absolute; inset: 0; mix-blend-mode: screen; filter: blur(18px); }
.hero__orb i:nth-child(1) { background: conic-gradient(from 20deg, #3fb9e6, #2f6ccf, #5f5ad8, #23b8ad, #3fb9e6); border-radius: 46% 54% 58% 42% / 44% 48% 52% 56%; }
.hero__orb i:nth-child(2) { inset: 16%; background: conic-gradient(from 200deg, #4fb4dc, transparent 35%, #4a7fd6 62%, transparent 85%); border-radius: 58% 42% 40% 60% / 55% 60% 40% 45%; opacity: .7; }
.hero.is-loading .hero__orb i:nth-child(1) { animation: orb-turn 7s linear infinite, orb-breathe 2.6s ease-in-out infinite alternate, orb-shape 6s ease-in-out infinite alternate; }
.hero.is-loading .hero__orb i:nth-child(2) { animation: orb-turn 5s linear infinite reverse, orb-breathe 2.6s 1.3s ease-in-out infinite alternate; }
@keyframes orb-turn { to { rotate: 360deg; } }
@keyframes orb-breathe { from { scale: .92; opacity: .75; } to { scale: 1.04; opacity: 1; } }
@keyframes orb-shape { to { border-radius: 60% 40% 44% 56% / 38% 58% 42% 62%; } }
@keyframes hero-show { to { visibility: visible; } }

/* ── the stance ───────────────────────────────────────
   A statement and nothing else, on a band of its own in pricing's tone, between the hero and the six tools: the
   title, its second line in the five colors (.grad-price), then two short lines, of two sentences and of three, the
   first of them said at a chapter's size. On a phone the second line's sentences take a line each. The band starts
   where the hero's screen ends, so the room above it is the hero's own, under the trial note, and the six tools
   below bring as much. It is lit from below the way each of the six panes is, in all six tools' colors at once, in
   their order across the band: one still layer behind the words. */
.craft { position: relative; isolation: isolate; padding: var(--gap-band) 0; background: var(--panel); }
.craft::before { content: ""; position: absolute; inset: auto 0 0; height: 78%; z-index: -1; opacity: .62; pointer-events: none; background:
  radial-gradient(34% 100% at 6% 118%, color-mix(in srgb, #3d9bff 46%, transparent), transparent 72%),   /* Ingest */
  radial-gradient(34% 100% at 24% 118%, color-mix(in srgb, #ff9230 40%, transparent), transparent 72%),  /* Contact Sheet */
  radial-gradient(34% 100% at 42% 118%, color-mix(in srgb, #12c7b1 40%, transparent), transparent 72%),  /* Scenes */
  radial-gradient(34% 100% at 60% 118%, color-mix(in srgb, #db34f2 38%, transparent), transparent 72%),  /* Photo Details */
  radial-gradient(34% 100% at 78% 118%, color-mix(in srgb, #7c6cff 44%, transparent), transparent 72%),  /* Workflows */
  radial-gradient(34% 100% at 96% 118%, color-mix(in srgb, #30d158 38%, transparent), transparent 72%); }  /* Delivery */
.craft__say { margin-top: clamp(18px, 2vw, 28px); font: 600 var(--t-sub)/1.2 var(--display); letter-spacing: -.02em; text-wrap: balance; }  /* a sentence too long for a phone's line breaks evenly, never leaving its last word alone */
.craft__say span { display: inline-block; }  /* a sentence never splits: side by side where there's room, one under the other where there isn't */
.craft .lede { margin-top: clamp(8px, .8vw, 12px); }
.craft .lede > span > span { display: inline-block; }  /* its sentences never split either */

/* ── the six pages ───────────────────────────────────
   All six at once, a pane each, like the panes of a lantern: the page's name in its own colours, a line about it,
   and a picture of what it does, the pane lit faintly from below in its colour. A pane is a way to its chapter;
   pointed at, it brightens and its picture lifts. Three across, then two, then one. */
.six { padding: clamp(40px, 5.5vw, 90px) 0 calc(var(--gap-section) - var(--gap-chapter)); }  /* the hero already leaves room above it; the first chapter brings its own */
.six__title { margin-bottom: clamp(28px, 3.4vw, 50px); }
.six__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); }
.tile { --tp: clamp(20px, 2vw, 30px); position: relative; isolation: isolate; display: flex; flex-direction: column; padding: var(--tp); overflow: hidden; border-radius: 24px; background: #0c0d10; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); transition: background-color .3s; }
.tile::before { content: ""; position: absolute; left: -30%; right: -30%; bottom: -42%; height: 80%; z-index: -1; background: radial-gradient(closest-side, color-mix(in srgb, var(--b) 45%, transparent), transparent); opacity: .44; transition: opacity .45s; }
.tile:hover { background: #111216; }
.tile:hover::before { opacity: .7; }
.tile:focus-visible { outline-offset: -3px; }
.tile__more { display: none; }  /* a pane's points, condensed: shown on phones, where the panes stand in for the chapters */
.tile__cap { display: grid; gap: clamp(6px, .6vw, 10px); justify-items: start; }
.tile__cap b { font: 600 var(--t-sub)/1.08 var(--display); letter-spacing: -.022em; color: var(--ink); }
.tile__cap span { font-size: var(--t-small); line-height: 1.4; letter-spacing: -.01em; color: #c9cdd2; text-wrap: balance; }
/* the picture spans the pane at the same width as its words, and sits centred between the words and the foot of
   the pane, with as much room above it as below */
.tile__art { --room: clamp(10px, 1.6vw, 24px); position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--tp) + var(--room)) 0 var(--room); }
.tile__art svg { display: block; width: 100%; height: auto; overflow: visible; }
.tile__art > :is(svg, .ba) { transition: transform .7s var(--out); }
.tile:hover .tile__art > :is(svg, .ba) { transform: translateY(-5px) scale(1.02); }
/* what's in the pictures: the chips the chapters use, real frames from the shoot, and the keys that rate them */
.six__art.is-done { --p: 1; }
.six__art.is-done .ok { opacity: 1; }
.six__art .stars use { fill: rgba(255, 255, 255, .2); }
.six__art .stars use.on { fill: #ffd60a; }
.six__art .sel { fill: none; stroke: var(--b); stroke-width: 3; pointer-events: none; transition: transform .32s var(--out), opacity .25s; }
.six__art .stars use { transition: fill .15s; }  /* each star pops from its own centre (its inline transform-origin) */
/* Photo Details: the photograph as shot (left of the line) and in your look (right). The line follows the pointer
   (main.js sets --x, a share of the width) and only transforms move: the as-shot layer slides one way while its
   picture slides back the other, so the picture stays put and nothing is repainted. */
.ba { --x: 50%; position: relative; width: 100%; aspect-ratio: 4928 / 3280; overflow: hidden; border-radius: 14px; touch-action: pan-y; cursor: ew-resize; }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.ba__before { position: absolute; inset: 0; overflow: hidden; transform: translateX(calc(var(--x) - 100%)); }
.ba__before img { transform: translateX(calc(100% - var(--x))); }
.ba__line { position: absolute; inset: 0; transform: translateX(calc(var(--x) - 50%)); pointer-events: none; }
.ba__line::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: linear-gradient(rgba(255, 255, 255, .72), rgba(255, 255, 255, .72)) top / 100% calc(50% - 17px) no-repeat, linear-gradient(rgba(255, 255, 255, .72), rgba(255, 255, 255, .72)) bottom / 100% calc(50% - 17px) no-repeat; }  /* stops at the handle */
.ba__line i { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: rgba(0, 0, 0, .3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34'%3E%3Cpath d='M12.5 12 8 17l4.5 5M21.5 12l4.5 5-4.5 5' fill='none' stroke='%23fff' stroke-opacity='.9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }  /* a little glassy: the photograph shows through */
.ba__tag { position: absolute; left: 12px; bottom: 12px; padding: 5px 11px; border-radius: 999px; background: rgba(0, 0, 0, .55); font-size: var(--t-tiny); font-weight: 500; color: #ffffff; }
.ba__tag--r { left: auto; right: 12px; }
.ba__tag { transition: opacity .2s; }
.ba__tag.is-covered { opacity: 0; }  /* the line has crossed it: that side of the photograph is the other one now */
/* Workflows: a job from the contact sheet to two folders, drawn as the canvas draws it: each step a ring with its
   icon. Each lights up as the run reaches it */
.six__art .node { --ic: var(--a); }
.six__art .node.on { --ic: #ffffff; }
.six__art .pad > circle { fill: #1a1c20; stroke: #36373b; stroke-width: 2; transition: fill .4s, stroke .4s; }
.six__art .node.on .pad > circle { fill: color-mix(in srgb, var(--b) 30%, #1a1c20); stroke: color-mix(in srgb, var(--b) 70%, #ffffff); }
.six__art .node .ico { fill: none; stroke: var(--ic); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; transition: stroke .4s, fill .4s; }
.six__art .node .ico .fill { fill: var(--ic); stroke: none; }
.six__art .node > text { font: 500 24px var(--display); fill: var(--mute); text-anchor: middle; letter-spacing: -.01em; transition: fill .4s; }
.six__art .node.on > text { fill: var(--ink); }
.six__art .pad { transform-box: fill-box; transform-origin: center; }
/* ── a chapter for each page ──────────────────────── */
.chapter { padding: var(--gap-chapter) 0 0; }
.chapter__bar { position: relative; display: flex; align-items: center; gap: clamp(14px, 1.5vw, 24px); padding-bottom: clamp(18px, 1.8vw, 26px); font: 600 var(--t-title)/1.04 var(--display); letter-spacing: -.022em; }
.chapter__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: center; margin-top: clamp(30px, 4vw, 56px); }
.chapter__text { grid-column: 1 / span 5; display: grid; gap: 22px; }
.chapter__rule { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, var(--b), color-mix(in srgb, var(--b) 20%, transparent) 46%, transparent 78%); }
.chapter__text .h2 { font-size: var(--t-sub); line-height: 1.12; }  /* under the chapter's name, at half its size */
.moment { grid-column: 7 / -1; display: grid; place-items: center; min-height: clamp(280px, 30vw, 430px); padding: clamp(16px, 2vw, 28px); border-radius: 22px; background: radial-gradient(90% 70% at 50% 112%, color-mix(in srgb, var(--b) 20%, transparent), transparent 70%), var(--panel); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); overflow: hidden; }
/* a chapter's picture: the app itself, the page at work, with a line on what it shows */
.moment--shot { margin: 0; place-items: stretch; align-content: center; gap: 14px; }
.moment__shot { border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 18px 40px rgba(0, 0, 0, .45); }
.moment__shot .crop { width: 100%; }
.pieces { display: flex; gap: 16px; margin-top: clamp(26px, 3.4vw, 46px); }
.piece { flex: none; display: grid; gap: 14px; align-content: start; }
.piece__media { height: clamp(210px, 22vw, 310px); border-radius: 18px; overflow: hidden; background: var(--panel); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
.piece__media .crop { height: 100%; }
:is(.piece, .moment--shot) figcaption { width: 0; min-width: 100%; font-size: var(--t-small); line-height: 1.42; color: var(--dim); }
:is(.piece, .moment--shot) figcaption b { font-weight: 500; color: var(--ink); }
:is(.piece, .moment--shot) figcaption kbd { background: rgba(255, 255, 255, .09); }
.piece--wide { flex: 1 1 100%; }
.piece--wide .piece__media { height: auto; }
.piece--wide .crop { height: auto; width: 100%; }

/* the pieces of the panes' pictures: chips and wires */
.chip rect { fill: #1a1c20; stroke: #313336; }  /* a solid edge (the same as white at 10% on the fill), so a wire running under it never shows through */
.chip text { font: 500 21px var(--display); fill: var(--ink); letter-spacing: -.01em; }
.chip .sub { font-weight: 400; font-size: 16.5px; fill: var(--dim); letter-spacing: 0; }
.chip .ok { fill: #30d158; opacity: 0; }
.chip .ok text { font-size: 15.5px; font-weight: 500; letter-spacing: 0; }
.chip .ok .tick { fill: none; stroke: #0c0d10; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.chip .bar { fill: rgba(255, 255, 255, .12); stroke: none; }
.chip .bar.fill { fill: #30d158; transform-box: fill-box; transform-origin: left center; transform: scaleX(var(--p, 0)); }
/* each wire starts and ends under the shapes it joins, so its dots slide out from behind one and into the next */
.wires path { stroke: var(--a); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 3 11; animation: flow 1s linear infinite; }
.wires .alt { stroke: #c4b5ff; }
@keyframes flow { to { stroke-dashoffset: -14; } }
.six__art .wires path { animation-play-state: paused; }  /* in the six panes, the wires flow only under the pointer */
:is(.tile:hover, .tile.is-live) .six__art .wires path { animation-play-state: running; }  /* is-live: the pane in the middle of a touch screen */

/* Scenes: the day on a ruler, a track of scenes for each camera, and one scrubber. The card under it shows the frame
   shot nearest its moment, with the scene and the time (main.js moves it) */
.scrub { display: block; width: 100%; height: auto; overflow: visible; }
.tile .scrub { touch-action: pan-y; cursor: ew-resize; }
.scrub .hours text { font: 500 16px var(--display); fill: var(--mute); text-anchor: middle; letter-spacing: 0; }
.scrub .hours path { fill: none; stroke: rgba(255, 255, 255, .16); stroke-width: 1.5; }
.scrub .track { fill: rgba(255, 255, 255, .04); }
.scrub .scene { fill: var(--c); fill-opacity: .28; stroke: var(--c); stroke-width: 1.5; transition: fill-opacity .2s; }
.scrub .scene.is-here { fill-opacity: .7; }
.scrub .head path { fill: none; stroke: var(--a); stroke-width: 2.5; }
.scrub .head circle { fill: var(--a); }
.scrub .card .bg { fill: #1a1c20; stroke: #313336; stroke-width: 1.5; }
.scrub .card image { opacity: 0; }
.scrub .card image.on { opacity: 1; }
.scrub .name { font: 500 19px var(--display); fill: var(--ink); letter-spacing: -.01em; }
.scrub .time { font: 400 17px var(--display); fill: var(--dim); text-anchor: end; letter-spacing: 0; font-variant-numeric: tabular-nums; }

/* ── measured ─────────────────────────────────────── */
.speed { padding: var(--gap-section) 0 0; }
.speed .body { margin-top: 24px; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 24px; margin-top: clamp(40px, 5vw, 70px); }
.stats > div { padding-top: 18px; border-top: 1px solid var(--line); }
.stats dd { font: 600 var(--t-title)/1 var(--display); letter-spacing: -.03em; white-space: nowrap; }
.stats dd i { font-style: normal; font-weight: 300; font-size: .4em; letter-spacing: 0; margin-left: .18em; color: var(--dim); }
.stats dt { margin-top: 10px; font-size: var(--t-small); color: var(--dim); max-width: 16em; }
.stats > div:nth-child(1) dd { color: #8be9f7; } .stats > div:nth-child(2) dd { color: #ffd27a; } .stats > div:nth-child(3) dd { color: #ffb0c0; } .stats > div:nth-child(4) dd { color: #a8f5d4; }

/* ── files ────────────────────────────────────────── */
.files { padding: var(--gap-section) 0 0; }
.files__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; margin-top: clamp(36px, 4.6vw, 64px); }
.files__grid article { padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .34); }
.files__grid h3 { font-weight: 500; font-size: var(--t-lead); line-height: 1.2; letter-spacing: -.015em; margin-bottom: 10px; }
.files__grid p { font-size: var(--t-body); color: var(--dim); }

/* ── pricing ────────────────────────────────────────
   The band's title over the whole of it, as every section has one. Under it, side by side: the price on the left (the
   founders special, the price, the full price after it) and, from the questions' left edge, what's included and the two
   buttons */
.pricing { margin-top: var(--gap-band); padding: var(--gap-band) 0; background: var(--panel); }
.pricing__title { margin-bottom: clamp(44px, 5vw, 72px); }
.pricing__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
.pricing__price { grid-column: 1 / span 6; display: grid; justify-items: start; }
.pricing__details { grid-column: 7 / -1; display: grid; gap: 30px; }
.pricing__num { font: 400 clamp(96px, 12.5vw, 200px)/.78 var(--display); letter-spacing: -.05em; margin: -.01em 0 0 -.04em; }  /* the largest thing in the band, in the typeface's lightest weight */
.grad-price { --grad: linear-gradient(100deg, #8be9f7 0, #ffd27a 30%, #ffb0c0 55%, #c4b5ff 78%, #a8f5d4 100%); }  /* the five colors in one line, for the words that carry a promise: "More craft.", "No subscriptions." and, on the Download page, "$179 once." (named for the price, which wore it first) */
.pricing__num sup { font-size: .3em; vertical-align: top; position: relative; top: .52em; margin-right: .06em; letter-spacing: 0; }
/* the two buttons side by side under the list, from its left edge, the same width each, the free trial first and filled, and the trial's note under the
   pair from the same edge, as the list above it reads; where two will not fit at their full labels (a phone), one under
   the other */
.pricing__side { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; width: min(100%, 460px); }
.pricing__side .cta__note { grid-column: 1 / -1; position: static; translate: none; width: auto; margin-top: 2px; text-align: left; }

/* the founders special, said where the price is, the way a product page says an offer: a short line in color over the
   price, and the full price in gray right under it, on the home page and on the Download page alike. Never in the
   list: it is part of the price. The five colors, as everywhere a line carries a promise */
.offer { font: 600 var(--t-lead)/1.2 var(--display); letter-spacing: -.012em; }
.pricing__price .offer { margin-bottom: clamp(12px, 1.3vw, 20px); }
.pricing__price .offer-after { margin-top: clamp(14px, 1.5vw, 22px); }
.offer-after { font-size: var(--t-lead); line-height: 1.35; color: var(--dim); }
.offer-after b { font-weight: inherit; color: var(--ink); }  /* the full price stands out by its brightness alone */

/* ── questions, notes ─────────────────────────────── */
.faq { padding: var(--gap-band) 0 clamp(60px, 7vw, 100px); }
.faq__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; }
.faq__grid .h2 { grid-column: 1 / span 5; }
.faq__list { grid-column: 7 / -1; }
details p { font-size: var(--t-body); }
.notes { padding: 0 0 clamp(40px, 4.5vw, 64px); font-size: var(--t-tiny); line-height: 1.5; color: var(--mute); }
.notes h2 { font-weight: 500; font-size: var(--t-tiny); color: var(--dim); margin-bottom: 8px; }
.notes ol { padding-left: 18px; list-style: decimal; display: grid; gap: 4px; max-width: 70em; }
.notes li:target { color: var(--ink); }
.foot { border-top: 1px solid var(--line); }

@media (max-width: 1000px) {
  .six__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chapter__grid, .faq__grid { display: block; }
  .pricing__grid { display: block; }  /* the price, then what's included and the buttons, one under the other */
  .pricing__details { margin-top: 40px; }
  .moment, .faq__list { margin-top: 30px; }
  .pieces { overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--pad)); padding-inline: var(--pad); }
  .pieces::-webkit-scrollbar { display: none; }
  .piece--wide { flex: none; width: 150vw; }
  .stats { grid-template-columns: 1fr 1fr; row-gap: 30px; }
  .files__grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .six__grid { grid-template-columns: 1fr; }
  .tile__more { display: block; margin-top: 18px; }
  .tile__more li:last-child { border-bottom: 0; padding-bottom: 0; }
  .chapter { display: none; }  /* the six panes are it on a phone */
  .craft .lede > span > span { display: block; }  /* on a phone the second line is three: a sentence to a line */
}