/* ============================================================
   LUMIO HDR STUDIO — Main Stylesheet
   Digital Arts ApS

   Shared by index.html, /privacy/ and /support/. The three pages
   must use the same tokens, or the legal pages drift away from
   the front page without anyone noticing.

   Fonts: the system stack. On macOS and iOS -apple-system IS
   SF Pro, with no external dependency to fail.
   ============================================================ */

/* ── TOKENS ──────────────────────────────────────────────── */
:root{
  --color-bg:          #000;
  --color-bg-elevated: #1d1d1f;
  --color-bg-showcase: #141414;

  --color-border:      rgba(255,255,255,.10);
  --color-border-dim:  rgba(255,255,255,.06);
  --color-hairline:    rgba(255,255,255,.08);  /* dividers, grid gaps, footer rule */

  --color-text-primary:   #f5f5f7;
  --color-text-secondary: #86868b;
  --color-text-tertiary:  #6e6e73;


  --color-accent:  #5ac8d8;
  --color-action:  #0071e3;

  --font-display: "SF Pro Display", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-text:    "SF Pro Text",    -apple-system, "Helvetica Neue", Arial, sans-serif;

  --space-section:    100px;
  --space-section-lg: 120px;

  --radius-md: 12px;
  --radius-xl: 28px;
  --radius-pill: 980px;

  --max-width: 1260px;
  --nav-max-width: 980px;
  --nav-height: 52px;
  --nav-padding: 22px;

  /* The showcase video and its caption have to be exactly the same width.
     Three caps at once, smallest wins: the viewport, a hard 1680px, and
     the width an 82%-of-viewport-height 16:9 frame implies. The last is
     the one that matters on a large display, where a full width frame
     would be taller than the screen. */
  --video-w: min(100%, 1680px, calc(82svh * 16 / 9));
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; scroll-behavior:smooth; }
body{
  background:var(--color-bg); color:var(--color-text-primary);
  font-family:var(--font-text); font-size:17px; line-height:1.47; overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ cursor:pointer; background:none; border:none; color:inherit; font:inherit; }
:focus-visible{ outline:2px solid var(--color-action); outline-offset:3px; border-radius:4px; }

/* ── TYPE ────────────────────────────────────────────────── */
.t-hero{ font-family:var(--font-display); font-size:80px; font-weight:600;
  line-height:1.05; letter-spacing:-.015em; color:var(--color-text-primary); }
.t-headline{ font-family:var(--font-display); font-size:48px; font-weight:600;
  line-height:1.0834; letter-spacing:-.003em; color:var(--color-text-primary); }
.t-eyebrow{ font-family:var(--font-display); font-size:28px; font-weight:600;
  line-height:1.1429; letter-spacing:.007em; color:var(--color-text-primary); }
.t-body-large{ font-family:var(--font-display); font-size:21px; font-weight:600;
  line-height:1.19; letter-spacing:.011em; color:var(--color-text-secondary); }
.t-body{ font-family:var(--font-text); font-size:17px; font-weight:400;
  line-height:1.6; letter-spacing:-.022em; color:var(--color-text-secondary); }
.t-caption{ font-family:var(--font-text); font-size:12px; font-weight:400;
  letter-spacing:-.01em; color:var(--color-text-tertiary); }

.wrap{ width:87.5%; max-width:var(--max-width); margin-inline:auto; }

hr.divider{ border:none; border-top:1px solid var(--color-hairline); }

/* ── REVEAL ──────────────────────────────────────────────── */
.reveal{ opacity:0; transform:translateY(20px);
  transition:opacity .7s cubic-bezier(.25,.1,.25,1), transform .7s cubic-bezier(.25,.1,.25,1); }
.reveal.in{ opacity:1; transform:none; }
.d1{ transition-delay:.08s; } .d2{ transition-delay:.16s; } .d3{ transition-delay:.24s; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; } html{ scroll-behavior:auto; }
}

/* ── NAV ─────────────────────────────────────────────────── */
.nav{
  position:fixed; inset:0 0 auto; height:var(--nav-height); z-index:9900;
  background:transparent; border-bottom:1px solid transparent;
  transition:background .3s cubic-bezier(.25,.1,.25,1), border-color .3s cubic-bezier(.25,.1,.25,1);
}
.nav.scrolled{
  background:rgba(28,28,30,.85);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-color:rgba(255,255,255,.09);
}
.nav__inner{
  height:100%; display:flex; align-items:center; justify-content:space-between;
  max-width:var(--nav-max-width); box-sizing:content-box; margin:0 auto; padding:0 var(--nav-padding);
}
.nav__name{ font-family:var(--font-display); font-size:21px; font-weight:600; letter-spacing:.231px; }
.nav__cta{
  display:inline-block; box-sizing:content-box; background:var(--color-action); color:#fff;
  font-family:var(--font-text); font-size:12px; font-weight:400; letter-spacing:-.12px;
  text-align:center; padding:3px 10px; line-height:16px; min-width:23px; margin-top:-1px;
  border:1px solid transparent; border-radius:var(--radius-pill); white-space:nowrap; transition:filter .2s;
}
.nav__cta:hover{ filter:brightness(1.12); }

/* ── HERO ────────────────────────────────────────────────── */
.hero{
  min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:calc(var(--nav-height) + 80px) 22px 80px; background:var(--color-bg);
}
/* 4846px was the old image's native width. The new screenshot is
   4472px, but neither number belongs here: a hero screenshot is
   never drawn anywhere near that wide. 1400px is a design cap. */
.hero__screenshot{ width:100%; max-width:1400px; margin:0 auto 40px; padding:0 22px; }
/* No border, no radius, no shadow. The screenshot brings its own
   window shadow, and the frame was being drawn around the shadow's
   bounding box rather than the window edge, roughly 112px out in
   the black. */
.hero__screenshot img{
  width:100%; height:auto;
}
/* The squircle is baked into the PNG, so there is nothing left for CSS
   to do. border-radius, border, box-shadow and background all drew a
   rectangle around a shape that is no longer rectangular. If the thin
   light edge is wanted back, it has to be baked into the file too:
   CSS cannot trace an outline along a shape it does not know about. */
.hero__icon{ width:54px; height:54px; display:block; margin:0 auto; }
.hero__eyebrow{ margin-top:24px; margin-bottom:11px; }
.hero__subhead{ max-width:560px; margin:14px auto 40px; }
.hero__badge{ display:flex; justify-content:center; }

.btn-appstore{ display:inline-block; transition:opacity .2s; }
.btn-appstore:hover{ opacity:.82; }
.btn-appstore img{ display:block; height:54px; width:auto; }

/* ══ SHOWCASE ══ */
.showcase{ background:var(--color-bg-showcase); padding:48px 0 150px; }

.sc-seg-wrap{ display:flex; justify-content:center; margin-bottom:14px; }
.sc-seg-pill{
  display:flex; background:rgba(255,255,255,.07);
  border-radius:var(--radius-pill); padding:3px; gap:2px;
}
.sc-seg{
  font-family:var(--font-text); font-size:13px; font-weight:500; letter-spacing:-.01em;
  color:rgba(255,255,255,.45); padding:5px 18px; border-radius:var(--radius-pill);
  transition:background .2s, color .2s; -webkit-font-smoothing:antialiased;
}
.sc-seg--active{ background:rgba(255,255,255,.14); color:var(--color-text-primary); }
.sc-seg:hover:not(.sc-seg--active){ color:rgba(255,255,255,.7); }

.sc-stage{
  position:relative;
  width:var(--video-w);
  margin-inline:auto;
  aspect-ratio:16/9;
  overflow:hidden;
  background:var(--color-bg);
}
.sc-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.sc-video--sdr{ z-index:1; opacity:1; }
.sc-video--hdr{ z-index:2; opacity:0; }

.sc-placeholder{
  position:absolute; inset:0; z-index:5; background:#0a0a0a;
  display:flex; align-items:center; justify-content:center; transition:opacity .5s;
}
.sc-placeholder.hidden{ opacity:0; pointer-events:none; }
.sc-placeholder__inner{ opacity:.5; }
/* A ring, not a play triangle. A triangle says "click me", and there is
   nothing to click while the pair is buffering. */
.sc-spin{
  display:block; width:34px; height:34px; border-radius:50%;
  border:2px solid rgba(255,255,255,.18);
  border-top-color:rgba(255,255,255,.75);
  animation:sc-spin 0.9s linear infinite;
}
@keyframes sc-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .sc-spin{ animation:none; } }

.sc-caption-row{
  width:var(--video-w);
  margin:12px auto 0; padding:0 var(--nav-padding);
  display:flex; align-items:baseline; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.sc-caption-left{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.sc-title{ font-family:var(--font-text); font-size:14px; font-weight:600;
  letter-spacing:-.01em; color:var(--color-text-primary); }
.sc-use{ font-family:var(--font-text); font-size:13px; letter-spacing:-.01em; color:var(--color-text-tertiary); }
.sc-credit{ font-family:var(--font-text); font-size:12px; font-weight:400;
  letter-spacing:-.12px; color:var(--color-text-tertiary); text-align:right; }
.sc-credit a{ color:var(--color-text-tertiary); text-decoration:underline; text-underline-offset:2px; }
.sc-credit a:hover{ color:var(--color-text-secondary); }

/* ── Floating dot capsule — position:fixed, driven by initPill()
   PILL_H (56) = 24 + 8 + 24 from .sc-dots-pill padding.
   Do not change one without the other. ── */
.sc-dots-wrap{
  position:fixed; left:0; right:0;
  display:flex; justify-content:center;
  pointer-events:none; z-index:200;
  bottom:32px;
}
.sc-dots-pill{
  display:flex; align-items:center; gap:0;
  background:rgba(42,42,45,.72);
  backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
  border:none; border-radius:var(--radius-pill);
  padding:24px 16px; pointer-events:auto;
}
.sc-dot{
  height:8px; width:8px; border-radius:10px;
  background:rgba(245,245,247,.3); border:none; padding:0; margin:0 8px;
  transition:width .3s cubic-bezier(.4,0,.2,1), background .2s;
  position:relative; overflow:hidden; flex-shrink:0;
}
.sc-dot:hover:not(.sc-dot--active){ background:rgba(245,245,247,.5); }
.sc-dot--active{ width:48px; background:rgba(245,245,247,.2); }
.sc-dot--active::after{
  content:''; position:absolute; inset:0 auto 0 0;
  width:var(--progress,0%); background:rgba(245,245,247,.85);
  border-radius:10px; transition:width .1s linear;
}

/* ── STATEMENT ───────────────────────────────────────────── */
.statement{ padding:var(--space-section) 0; text-align:center; }
.statement__headline{ margin:0 auto 20px; max-width:15ch; }
.statement__body{ max-width:640px; margin:0 auto; }

/* ── CONTROLS ────────────────────────────────────────────── */
.controls{ padding:var(--space-section) 0; background:var(--color-bg-elevated); }
.controls__inner{ display:grid; grid-template-columns:1fr .78fr; gap:72px; align-items:center; }
.controls__intro{ max-width:44ch; margin-top:18px; }
.ctl-list{ list-style:none; margin-top:34px; display:flex; flex-direction:column; }
.ctl-list li{ padding:15px 0; border-top:1px solid var(--color-border-dim); }
.ctl-list li:last-child{ border-bottom:1px solid var(--color-border-dim); }
.ctl-name{ font-family:var(--font-display); font-size:15px; font-weight:600; color:var(--color-text-primary); }
.ctl-desc{ font-size:15px; font-weight:400; color:var(--color-text-secondary); line-height:1.5; margin-top:3px; }
.controls__shot{
  border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--color-border);
  box-shadow:0 30px 70px rgba(0,0,0,.55); aspect-ratio:4/5;
}
.controls__shot img{ width:100%; height:100%; object-fit:cover; object-position:right center; }

/* ── MODES — image band above the four items ─────────────── */
.modes{ padding:var(--space-section) 0; }
.modes__head{ text-align:center; margin-bottom:48px; }
.modes__shot{

  /* ╔══════════════════════════════════════════════════════════╗
     ║  THE NUMBERS TO TUNE. Everything else can stay.           ║
     ╚══════════════════════════════════════════════════════════╝ */

  /* 1. WHERE THE ZOOM STARTS AND ENDS, as a scale on the image.
        1   = the image at its natural size in the band
        1.1 = starts already slightly in, so the band opens tighter
        The gap between the two is the movement: a small gap is a
        subtle push, a large one is a proper zoom. Above about 2.4
        you are upscaling and the text inside the control breaks up. */
  --zoom-start: 1.1;
  --zoom-end: 1.55;

  /* 2. WHAT IT ZOOMS TOWARD, measured down from the top of the band.
        Smaller = higher up. Whatever sits at this point stays put
        while everything else grows away from it, so it should be on
        or near the segmented control. The higher --zoom-end is, the
        less forgiving this gets: at low zoom it can be off by a lot
        without anyone noticing. */
  --zoom-origin-y: 40%;

  /* 3. WHERE IN THE SCROLL THE MOVEMENT BEGINS, as the band crosses
        the screen. Not to be confused with --zoom-start above, which
        is a scale rather than a position.
        0%   = the moment the band's top edge appears at the bottom
        50%  = the band is centred on screen
        100% = the band has left past the top */
  --zoom-from: 25%;

  /* 4. WHERE IT FINISHES, on the same scale as --zoom-from.
        Below 50% the zoom is done before the band reaches the middle
        of the screen. Above 50% it is still growing while the band
        travels up and out, which is a slower, longer feel. */
  --zoom-to: 60%;

  /* 5. THE SIZE THE IMAGE IS DRAWN AT, and it does not change with the
        window. The band crops the sides instead of shrinking the
        picture, so the zoom looks identical at every width. Keep
        --band-h at a quarter of --band-w while the asset is a 4:1
        crop, or the framing shifts and --zoom-origin-y drifts off
        the control. */
  --band-w: 1260px;
  --band-h: 315px;

  /* 6. THE SHAPE OF THE MOVEMENT between --zoom-from and --zoom-to.
        On a scroll driven animation this is not eased over time, it
        eases over scroll distance: it decides how much of the zoom
        is spent early versus late in the range.
          linear                        even all the way, stops dead
          ease-out                      mild slow down at the end
          cubic-bezier(.22,1,.36,1)     current, a long soft tail
          cubic-bezier(.16,1,.3,1)      an even longer tail
        Avoid any curve whose second Y value goes above 1. That
        overshoots past --zoom-end and then settles back, which
        reads as a wobble when you scrub it by scrolling. */
  --zoom-ease: cubic-bezier(.22, 1, .36, 1);

  /* ── below here is structure, not taste ── */

  border-radius:var(--radius-md); overflow:hidden;
  height:var(--band-h);               /* fixed, so narrowing crops the sides */
  margin-bottom:2px;
  isolation:isolate;
  position:relative;

  /* overflow:hidden above makes this box a scroll container. Not one
     anyone can scroll, but formally one. An anonymous view() timeline
     on the child resolves against the child's NEAREST scroll container,
     which would be this box. It never scrolls, so the animation sits at
     frame zero forever. Naming the timeline here and referencing it by
     name from the child fixes it: the name is defined by this element's
     progress through the document, which is what we wanted. */
  view-timeline-name:--modes-band;
}

/* The image is drawn at --band-w regardless of the window, centred on
   the band. When the window narrows the band gets narrower but the
   picture does not, so the sides are cropped and the segmented control
   stays the same size on screen. That is why there is a single --zoom-end
   rather than one per breakpoint, and why --zoom-origin-y only ever has
   to be measured once. */

.modes__shot img{
  position:absolute;
  top:0;
  left:50%;
  margin-left:calc(var(--band-w) / -2);   /* centre the fixed size picture */
  width:var(--band-w);
  height:var(--band-h);
  max-width:none;                          /* the global img rule would cap this */
  object-fit:cover; object-position:center top;
  transform-origin:50% var(--zoom-origin-y);
  /* The resting state. With animation-fill-mode: both the keyframe's
     from value already holds before the scroll range begins, so this
     is not what you see in a supporting browser. It matters in Firefox,
     which gets no animation at all and would otherwise sit at scale 1
     and show a wider crop than intended. */
  transform:scale(var(--zoom-start));
  will-change:transform;
}

/* ── Scroll driven zoom on the segmented control ──────────────
   The band is too wide for the control to be legible at page
   width, so it magnifies as the section comes up.

   The @supports guard is NOT optional. A browser that does not
   know animation-timeline drops that one line and is left with
   `animation: modes-zoom both`, a plain time based
   animation that fires on page load. The image would jump to
   full zoom before anyone scrolled. Firefox is still that
   browser as of mid 2026, so it stays unzoomed instead.
   ── */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .modes__shot img{
      /* The shorthand resets animation-timing-function to its initial
         value, so the easing has to be declared AFTER it, not inside
         it. Swapping these two lines silently kills the easing. */
      animation:modes-zoom both;
      animation-timing-function:var(--zoom-ease);
      animation-timeline:--modes-band;
      animation-range:cover var(--zoom-from) cover var(--zoom-to);
    }
  }
}
@keyframes modes-zoom{
  from{ transform:scale(var(--zoom-start)); }
  to  { transform:scale(var(--zoom-end)); }
}
.modes__row{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--color-hairline);
  border-radius:var(--radius-md); overflow:hidden;
}
.mode{ background:var(--color-bg-elevated); padding:28px 24px; }
.mode b{ display:block; font-family:var(--font-display); font-size:16px; font-weight:600; margin-bottom:8px; }
.mode span{ font-size:14px; font-weight:400; color:var(--color-text-secondary); line-height:1.5; }

/* ── SPECS ───────────────────────────────────────────────── */
/* The dense block sits on the lifted background. It also puts a colour
   change between modes and display, so the run of black sections is
   broken without either neighbour having to change. */
.specs{ padding:var(--space-section) 0; background:var(--color-bg-elevated); }
.specs__title{ margin-bottom:48px; text-align:center; }
.spec-table{ width:100%; border-collapse:collapse; }
.spec-table th, .spec-table td{
  text-align:left; vertical-align:top; padding:18px 0;
  border-top:1px solid var(--color-border-dim); font-weight:400;
}
.spec-table tr:last-child th, .spec-table tr:last-child td{ border-bottom:1px solid var(--color-border-dim); }
.spec-table th{
  width:190px; padding-right:32px; font-family:var(--font-display);
  font-size:15px; font-weight:600; color:var(--color-text-primary);
}
.spec-table td{ font-size:15px; font-weight:400; color:var(--color-text-secondary); line-height:1.6; }
/* A secondary note inside a spec row. Own line, one step down in size
   and one step down in the text hierarchy, so it reads as a footnote
   to the row rather than part of the specification itself. */
.spec-note{
  display:block;
  margin-top:7px;
  font-size:12px;
  /* --color-text-tertiary (#6e6e73) lands at 3.3:1 against the lifted
     background, which is below the 4.5:1 floor for small text. One step
     up to secondary clears it. The note still reads as a note, because
     it is 12px and on its own line. */
  color:var(--color-text-secondary);
  line-height:1.5;
}

/* ── DISPLAY — the pre purchase argument, given real weight ── */
/* Black, NOT --color-bg-elevated. The pricing gradient below starts at
   --color-bg-elevated, so if this section used the same value there
   would be no edge between them and the gradient would appear to begin
   up here and run all the way past the buy card. The weight of this
   section comes from type size and air, not from its background. */
.display{ background:var(--color-bg); padding:var(--space-section-lg) 0; }
.display__headline{ max-width:17ch; margin-bottom:36px; }
/* The section headline says why the section exists, this says what it
   is about. Sized well below the headline so the two do not stutter.
   If a second concern is ever added, it slots in as another of these. */
.display__sub{
  font-family:var(--font-display); font-size:23px; font-weight:600;
  letter-spacing:-.015em; color:var(--color-text-primary);
  margin-bottom:24px;
}
.display__grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
.display__grid p{
  font-size:18px; font-weight:400; line-height:1.62;
  letter-spacing:-.01em; color:var(--color-text-secondary);
}
.display__grid p + p{ margin-top:18px; }
.display__grid strong{ font-weight:600; color:var(--color-text-primary); }
.display__close{ font-size:16px; color:var(--color-text-tertiary); }

/* ── QUESTIONS — small, quiet, and able to grow ──────────────
   A stack rather than a grid: it looks right at three items and it
   will still look right at twelve. */
.qa{
  background:var(--color-bg); padding:84px 0;
  /* It now sits after pricing, whose gradient fades to transparent over
     the same black. Without a rule there is no visible boundary at all. */
  border-top:1px solid var(--color-border-dim);
}
.qa__inner{ max-width:820px; margin-inline:auto; }
.qa__head{ display:flex; align-items:baseline; justify-content:space-between; gap:24px; margin-bottom:10px; }
.qa__title{
  font-family:var(--font-display); font-size:24px; font-weight:600;
  letter-spacing:-.015em; color:var(--color-text-primary);
}
.qa__more{ font-size:14px; color:var(--color-text-secondary); white-space:nowrap; transition:color .15s; }
.qa__more:hover{ color:var(--color-text-primary); }

.qa__item{ border-top:1px solid var(--color-border-dim); }
.qa__item:last-child{ border-bottom:1px solid var(--color-border-dim); }
.qa__q{
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:24px;
  padding:18px 0; text-align:left; cursor:pointer; list-style:none;
  font-family:var(--font-display); font-size:16px; font-weight:600;
  letter-spacing:-.015em; color:var(--color-text-primary);
}
.qa__q::-webkit-details-marker{ display:none; }
.qa__mark{ flex-shrink:0; width:12px; height:12px; position:relative; opacity:.45; transition:opacity .2s; }
.qa__mark::before,.qa__mark::after{
  content:''; position:absolute; background:currentColor; border-radius:1px;
  transition:transform .28s cubic-bezier(.4,0,.2,1);
}
.qa__mark::before{ inset:5.5px 0 auto 0; height:1.5px; }
.qa__mark::after{  inset:0 auto 0 5.5px; width:1.5px; }
.qa__item[open] .qa__mark::after{ transform:scaleY(0); }
.qa__item[open] .qa__mark{ opacity:.85; }
.qa__a{
  padding:0 0 20px; max-width:66ch;
  font-size:15px; font-weight:400; line-height:1.62; color:var(--color-text-secondary);
}

/* ── PRICING ─────────────────────────────────────────────── */
.pricing{ position:relative; padding:var(--space-section-lg) 0; text-align:center; overflow:hidden;
  background:var(--color-bg); }
.pricing__gradient{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, var(--color-bg-elevated) 0%, rgba(29,29,31,.6) 40%, transparent 100%);
}
.pricing__inner{ position:relative; z-index:1; }
.pricing__headline{ margin-bottom:48px; }
.pricing__card{
  max-width:470px; margin:0 auto;
  background:rgba(29,29,31,.8); border:1px solid var(--color-border);
  border-radius:var(--radius-xl); padding:48px 40px;
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
}
.pricing__amount{
  font-family:var(--font-display); font-size:72px; font-weight:700;
  letter-spacing:-.04em; line-height:1; color:var(--color-text-primary);
}
.pricing__sub{ margin-top:10px; font-size:14px; color:var(--color-text-tertiary); }
/* The list is left aligned, but the block itself is centered in the card:
   fit-content shrinks it to its widest item, auto margins do the rest. */
.pricing__list{
  list-style:none; display:flex; flex-direction:column; gap:12px;
  text-align:left; margin:34px auto 36px;
  width:fit-content; max-width:100%;
}
.pricing__list li{
  display:flex; align-items:baseline; gap:10px;
  font-size:15px; font-weight:400; letter-spacing:-.01em; line-height:1.5;
  color:var(--color-text-secondary);
}
.pricing__list li::before{ content:'✓'; color:var(--color-action); font-weight:600; flex-shrink:0; }
.pricing__badge-wrap{ display:flex; justify-content:center; margin-bottom:16px; }
.pricing__sysreq{ color:var(--color-text-tertiary); }

/* ── FOOTER ──────────────────────────────────────────────── */
.footer{ padding:32px 0; border-top:1px solid var(--color-hairline); }
.footer__inner{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; }
.footer__brand{ display:flex; align-items:center; gap:8px; }
.footer__logo{ width:18px; height:18px; display:block; flex-shrink:0; }
.footer__name{ font-size:13px; font-weight:500; letter-spacing:-.01em; color:var(--color-text-secondary); }
.footer__right{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.footer__copy{ font-size:12px; letter-spacing:-.01em; color:var(--color-text-tertiary); }
/* All three footer links behave identically: they sit at tertiary, the
   same as the text around them, and brighten to primary on hover. No
   underline, so the brightening is the whole signal. Kept in one rule
   so they cannot drift apart again. */
.footer__company,
.footer__links a{
  font-size:12px; letter-spacing:-.01em;
  color:var(--color-text-tertiary);
  text-decoration:none;
  transition:color .15s;
}
.footer__company:hover,
.footer__links a:hover{ color:var(--color-text-primary); }
.footer__links{ display:flex; gap:20px; list-style:none; }

/* ── BREAKPOINTS ─────────────────────────────────────────── */
@media (max-width:1068px){
  .t-hero{ font-size:64px; letter-spacing:-.009em; line-height:1.0625; }
  .t-headline{ font-size:40px; }
  .t-eyebrow{ font-size:24px; letter-spacing:.009em; line-height:1.1667; }
  .t-body-large{ font-size:19px; letter-spacing:.012em; line-height:1.2105; }
  .btn-appstore img{ height:46px; }
  .display__headline{ max-width:20ch; }
}
@media (max-width:900px){
  .controls__inner{ grid-template-columns:1fr; gap:44px; }
  .controls__shot{ aspect-ratio:4/3; max-width:440px; }
  .modes__row{ grid-template-columns:1fr 1fr; }
  .display__grid{ grid-template-columns:1fr; gap:28px; }
  /* Deliberately nothing for .modes__shot here. Its height is fixed by
     --band-h and the image inside it is drawn at a fixed --band-w, so a
     narrower window crops the sides rather than shrinking the picture.
     Changing either here would move --zoom-origin-y off the control. */
}
@media (max-width:833px){
  .nav__name{ font-size:19px; letter-spacing:.209px; }
  .nav__inner{ padding:0 16px; }
}
@media (max-width:734px){
  .wrap{ width:100%; padding-inline:22px; }
  .t-hero{ font-size:40px; letter-spacing:0; line-height:1.1; }
  .t-headline{ font-size:32px; letter-spacing:0; }
  .t-eyebrow{ font-size:21px; letter-spacing:.011em; line-height:1.1905; }
  .t-body-large{ font-size:17px; font-family:var(--font-text); letter-spacing:-.022em; line-height:1.235; }
  .btn-appstore img{ height:36px; }
  .hero__screenshot{ padding:0 16px; }
  .qa__title{ font-size:21px; }
}
@media (max-width:640px){
  .modes__row{ grid-template-columns:1fr; }
  .spec-table th{ display:block; width:auto; padding-bottom:4px; border:none; }
  .spec-table td{ display:block; padding-top:0; border:none; }
  .spec-table tr{ display:block; border-top:1px solid var(--color-border-dim); padding:18px 0; }
  .spec-table tr:last-child{ border-bottom:1px solid var(--color-border-dim); }
  .sc-caption-row{ flex-direction:column; gap:4px; }
  .sc-credit{ text-align:left; }
  .qa__head{ flex-direction:column; gap:4px; }
  .qa__q{ font-size:15px; }
  .footer__inner{ flex-direction:column; align-items:flex-start; }
  .footer__right{ flex-direction:column; align-items:flex-start; gap:8px; }
  .pricing__card{ padding:36px 24px; }
  .pricing__amount{ font-size:56px; }
}