/* ==========================================================================
   Fi.Art website styling
   Mirrors the app's Material 3 light theme (ColorScheme.fromSeed(Colors.blue)
   with pure white surfaces) and the Inter typeface used on macOS/web.
   ========================================================================== */

/* Inter, the same variable font the app bundles for macOS/web */
@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/Inter-Variable.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Material 3 light scheme derived from seed Colors.blue, same as the app */
  --primary: #0061a4;
  --on-primary: #ffffff;
  --primary-container: #d1e4ff;
  --on-primary-container: #001d36;
  --secondary: #535f70;
  --secondary-container: #d7e3f7;
  --on-secondary-container: #101c2b;
  --surface: #ffffff;
  --on-surface: #1a1c1e;
  --on-surface-variant: #43474e;
  --outline-variant: #c3c7cf;
  --scrim-soft: rgba(0, 0, 0, 0.06);

  /* Shape: matches AppStyles (cards/sheets use an 8px radius) */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-pill: 999px;

  /* Spacing: matches AppStyles.sectionSpacing / controlSpacing */
  --gap-xs: 4px;
  --gap-sm: 8px;
  --gap-md: 16px;
  --gap-lg: 24px;
  --gap-xl: 40px;

  --max-width: 1100px; /* AppStyles.wideLayoutBreakpoint */
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--on-surface);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--primary); }

.wrap {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gap-lg);
}

/* ---------------------------------------------------------------- app bar */

.appbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--outline-variant);
}

.appbar__inner {
  display: flex;
  align-items: center;
  gap: var(--gap-md);
  height: 64px;
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  font-weight: 600;
  font-size: 1.125rem;
  letter-spacing: -0.01em;
  color: var(--on-surface);
  text-decoration: none;
}

.brand img {
  width: 36px;
  height: 36px;
  border-radius: 8px;
}

.appbar nav {
  display: flex;
  align-items: center;
  gap: var(--gap-xs);
  margin-left: auto;
}

.appbar nav a {
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--on-surface-variant);
  text-decoration: none;
}

.appbar nav a:hover {
  background: var(--secondary-container);
  color: var(--on-secondary-container);
}

/* The generic `.appbar nav a` rule above is more specific than `.btn--filled`,
   so without these two overrides the CTA in the app bar would render dark grey
   text on the blue fill, which is unreadable. Keep them adjacent to the rule they fix. */
.appbar nav a.btn--filled,
.appbar nav a.btn--filled:hover {
  color: var(--on-primary);
  background: var(--primary);
}

/* ----------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-sm);
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.15s ease, background 0.15s ease;
}

.btn--filled {
  background: var(--primary);
  color: var(--on-primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}

.btn--filled:hover { filter: brightness(1.1); }

.btn--tonal {
  background: var(--secondary-container);
  color: var(--on-secondary-container);
}

.btn--tonal:hover { filter: brightness(0.97); }

.btn--outlined {
  background: transparent;
  color: var(--primary);
  border-color: var(--outline-variant);
}

.btn--outlined:hover { background: var(--primary-container); }

.btn--small {
  padding: 8px 16px;
  font-size: 0.85rem;
}

/* -------------------------------------------------------------------- hero */

.hero {
  padding: var(--gap-xl) 0 var(--gap-lg);
  background:
    radial-gradient(circle at 12% 0%, var(--primary-container) 0%, transparent 46%),
    radial-gradient(circle at 88% 8%, var(--secondary-container) 0%, transparent 42%);
}

/* Two columns from tablet width up: copy on the left, a phone capture on the
   right so the first viewport already shows the product. */
.hero__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-xl);
}

.hero__copy { flex: 1 1 520px; min-width: 0; }

/* Logo lockup: a large app icon next to the wordmark and the FiART expansion. */
.hero__lockup {
  display: flex;
  align-items: center;
  gap: var(--gap-md);
  margin-bottom: var(--gap-md);
}

.hero__logo {
  flex: 0 0 auto;
  width: clamp(76px, 9vw, 112px);
  height: clamp(76px, 9vw, 112px);
  border-radius: 22%;
  box-shadow: 0 10px 26px rgba(0, 32, 64, 0.18);
}

.hero__lockup-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-xs);
  min-width: 0;
}

.hero__wordmark {
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}

.hero__lockup .eyebrow { margin-bottom: 0; }

.hero__shot {
  flex: 0 1 300px;
  margin: 0;
  text-align: center;
}

.hero__shot img {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  margin: 0 auto;
  border: 1px solid var(--outline-variant);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: 0 16px 40px rgba(0, 32, 64, 0.18);
}

.hero__shot figcaption {
  margin-top: var(--gap-sm);
  font-size: 0.82rem;
  color: var(--on-surface-variant);
}

.eyebrow {
  display: inline-block;
  padding: 5px 10px;
  margin-bottom: var(--gap-md);
  border-radius: var(--radius-pill);
  background: var(--primary-container);
  color: var(--on-secondary-container);
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  /* Deliberately NOT uppercase: the first accent letter is "Fi" (F A R T being
     an unfortunate acronym), and an uppercase transform renders that as
     "FInancial", which reads as a typo. Sentence case keeps "Fi" legible. */
  text-transform: none;
}

/* Each word is wrapped so a chip never gets separated from its own word when
   the eyebrow wraps to a second line at phone widths. */
.eyebrow > span {
  display: inline-block;
  white-space: nowrap;
}

/* The letters that spell out "Fi.Art" inside the full expansion. Tonal rather
   than chipped: the accents carry primary blue plus weight 800, so they read as
   the brand name without boxing each letter. */
.eyebrow b {
  color: var(--primary);
  font-weight: 800;
}

.hero h1 {
  margin: 0 0 var(--gap-sm);
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 700;
}

.hero .lede {
  max-width: 68ch;
  margin: 0 0 var(--gap-md);
  font-size: clamp(1.02rem, 1.6vw, 1.18rem);
  color: var(--on-surface-variant);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sm);
  margin-top: var(--gap-lg);
}

.hero__note {
  margin-top: var(--gap-md);
  font-size: 0.85rem;
  color: var(--on-surface-variant);
}

/* ------------------------------------------------------------- pill strip */

.pills {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0;
  padding: var(--gap-lg) 0;
  border-bottom: 1px solid var(--outline-variant);
}

/* Each chip is a quiet icon + label pair rather than a coloured badge, so the
   strip reads as a spec list. Icons are stroked Material-Symbols-style glyphs
   drawn inline as SVG, the same visual language as the app's own icon set. */
.pill {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px var(--gap-md) 12px 0;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--on-surface);
}

.pill svg {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  stroke: var(--primary);
  stroke-width: 1.6;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------------------------------------------------------------- sections */

section.block {
  padding: var(--gap-xl) 0;
  border-bottom: 1px solid var(--outline-variant);
}

section.block:last-of-type { border-bottom: none; }

.block__head {
  max-width: 78ch;
  margin-bottom: var(--gap-lg);
}

.block__head h2 {
  margin: 0 0 var(--gap-sm);
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: -0.02em;
  font-weight: 700;
}

.block__head p {
  margin: 0;
  color: var(--on-surface-variant);
}

h3.sub {
  margin: var(--gap-lg) 0 var(--gap-sm);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.prose {
  max-width: 78ch;
  color: var(--on-surface-variant);
}

.prose p { margin: 0 0 var(--gap-sm); }

.fineprint {
  max-width: 78ch;
  margin-top: var(--gap-md);
  padding: 12px var(--gap-md);
  border-left: 3px solid var(--primary-container);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: #f7f9fc;
  font-size: 0.88rem;
  color: var(--on-surface-variant);
}

/* ------------------------------------------------------------ feature grid */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--gap-md);
  margin: var(--gap-md) 0 0;
  padding: 0;
  list-style: none;
}

.card {
  padding: var(--gap-md);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: 0 1px 2px var(--scrim-soft);
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.card:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.card__title {
  display: block;
  margin-bottom: 4px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--on-surface);
}

.card__text {
  font-size: 0.92rem;
  color: var(--on-surface-variant);
}

/* --------------------------------------------------------- inline showcase */

/* A visual break between the card grids: one desktop capture paired with the
   matching phone capture, using the PNGs in site/assets/screenshots.
   Add `showcase--flip` to put the phone on the left for visual rhythm.

   Height is the shared dimension: both captures are rendered at exactly
   `--shot-h` and their width follows from their own aspect ratio, so the
   desktop and phone screenshots line up at the top and at the bottom while
   neither one is distorted. The clamp keeps the widest pair (a 16:10 desktop
   capture next to a tall phone capture) inside the content column at every
   viewport width above the stacking breakpoint. */
.showcase {
  --shot-h: clamp(280px, calc((100vw - 140px) / 2.1), 460px);

  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--gap-lg);
  margin: var(--gap-lg) 0 0;
  padding: var(--gap-lg);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, #f7f9fc, #eef3fa);
}

.showcase--flip { flex-direction: row-reverse; }

/* Three captures in one band (desktop overview + split phone column + a second
   desktop capture). The shared height has to shrink so the three widths plus
   two gaps still fit the content column:

     width sum = 0.808 * h (desktop-trips, 683x845)
               + 0.380 * h (split phone column, see --split-ratio-sum)
               + 1.373 * h (desktop-trips-worldmap, 1159x844)
               = about 2.56 * h

   The divisor below therefore replaces the 2.1 of the two-capture band, and the
   subtracted 150px covers the wrap padding, the band padding and both gaps.

   The lower bound stays under the height the formula yields right above the
   720px stacking breakpoint (about 220px), so the row never hits the floor and
   wraps while it is still supposed to be a single row. */
.showcase--trio { --shot-h: clamp(210px, calc((100vw - 150px) / 2.6), 365px); }

/* `width: min-content` makes each figure exactly as wide as its capture: for a
   replaced element with a fixed height and `width: auto` the min-content width
   is the aspect-ratio width, while the caption only contributes its longest
   word. Without this the caption's max-content width becomes the flex base
   size, which is wider than the row and makes the pair wrap onto two lines. */
.showcase__wide,
.showcase__phone {
  flex: 0 0 auto;
  width: min-content;
  margin: 0;
}

.showcase img {
  display: block;
  width: auto;
  height: var(--shot-h);
  background: var(--surface);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-sm);
  box-shadow: 0 10px 28px rgba(0, 32, 64, 0.14);
}

.showcase__phone img { border-radius: 20px; }

/* ------------------------------------------------- split phone capture pair */

/* Two crops taken from two different phone screens, stacked in one column with
   plain whitespace between them, so a reader sees two separate details instead
   of one continuous screenshot.

   Both crops are rendered at the same width, and that width is derived from
   `--shot-h` so the whole column (crop + whitespace + crop) is exactly as tall
   as the desktop captures next to it. With `box-sizing: border-box` a crop at
   width `w` is `(w - 2px) * ratio + 2px` tall, so:

     w = (shot-h - whitespace - 4px) / (h1/w1 + h2/w2) + 2px

   `--split-ratio-sum` is that sum of height/width ratios. Update it when the
   crops are replaced: mobile-trips-sharedproposed.png is 1170x1296 (1.1077)
   and mobile-trips-sharedtransactionsettings.png is 1170x1780 (1.5214). */
.showcase__phone--split {
  --split-gap-h: 12px;
  --split-ratio-sum: 2.62906;
  --split-w: calc(
    (var(--shot-h) - var(--split-gap-h) - 4px) / var(--split-ratio-sum) + 2px
  );
}

.splitshot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--split-gap-h);
  width: var(--split-w);
}

/* The crops size by width here, height follows the aspect ratio. */
.showcase__phone--split .splitshot img {
  width: var(--split-w);
  height: auto;
}

.showcase figcaption {
  margin-top: var(--gap-sm);
  font-size: 0.85rem;
  color: var(--on-surface-variant);
}

.showcase figcaption strong {
  display: block;
  color: var(--on-surface);
  font-size: 0.92rem;
}

/* ----------------------------------------------------------- screenshot zoom */

/* Every screenshot on the page is clickable and opens in the lightbox below.
   The affordance is the zoom cursor plus a slight lift on hover. */
.hero__shot img,
.showcase img {
  cursor: zoom-in;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.hero__shot img:hover,
.showcase img:hover,
.hero__shot img:focus-visible,
.showcase img:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 18px 42px rgba(0, 32, 64, 0.26);
}

.hero__shot img:focus-visible,
.showcase img:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
}

/* ------------------------------------------------------------------ lightbox */

/* Injected once by the script at the bottom of index.html. Hidden with
   `display: none` through the [hidden] attribute, then faded in by adding
   `.lightbox--open` on the next frame. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap-md);
  padding: 56px var(--gap-lg) var(--gap-lg);
  background: rgba(10, 16, 24, 0.86);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.18s ease;
}

.lightbox[hidden] { display: none; }

.lightbox--open { opacity: 1; }

/* The image itself: never upscaled past its own pixels, never larger than the
   viewport, so a tall phone capture and a wide desktop capture both fit. */
.lightbox__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-sm);
  max-width: 100%;
  min-height: 0;
  margin: 0;
}

.lightbox__img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 140px);
  width: auto;
  height: auto;
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  object-fit: contain;
}

.lightbox__caption {
  max-width: 70ch;
  color: #eef3fa;
  font-size: 0.9rem;
  text-align: center;
}

.lightbox__caption strong {
  display: block;
  color: #ffffff;
  font-size: 0.98rem;
}

/* Round tonal controls, matching the app's icon buttons. */
.lightbox__btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  font-family: inherit;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

.lightbox__btn:hover { background: rgba(255, 255, 255, 0.28); }

.lightbox__btn:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 2px;
}

.lightbox__btn--close {
  top: var(--gap-md);
  right: var(--gap-md);
  font-size: 1.5rem;
}

.lightbox__btn--prev {
  top: 50%;
  left: var(--gap-md);
  transform: translateY(-50%);
}

.lightbox__btn--next {
  top: 50%;
  right: var(--gap-md);
  transform: translateY(-50%);
}

.lightbox__btn--prev:hover,
.lightbox__btn--next:hover { transform: translateY(-50%) scale(1.06); }

/* Prevents the page behind the overlay from scrolling while it is open. */
body.lightbox-locked { overflow: hidden; }

/* --------------------------------------------------------------- demo band */

.demo {
  padding: var(--gap-xl) 0;
  background: linear-gradient(135deg, var(--primary-container), var(--secondary-container));
}

.demo__card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-lg);
  padding: var(--gap-lg);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 8px 28px rgba(0, 32, 64, 0.12);
}

.demo__text { flex: 1 1 340px; }

.demo__text h2 {
  margin: 0 0 var(--gap-sm);
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  letter-spacing: -0.02em;
}

.demo__text p {
  margin: 0;
  color: var(--on-surface-variant);
}

.demo__actions {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
}

/* ------------------------------------------------------------------ footer */

footer.site {
  padding: var(--gap-lg) 0 var(--gap-xl);
  color: var(--on-surface-variant);
  font-size: 0.88rem;
}

footer.site .links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-md);
  margin-bottom: var(--gap-sm);
}

/* ----------------------------------------------------------- back-to-top */

.totop {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 30;
  width: 44px;
  height: 44px;
  display: none;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-md);
  background: var(--primary);
  color: var(--on-primary);
  font-size: 1.1rem;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.totop.show { display: flex; }

/* =========================================================================
   RESPONSIVE: mobile first priority.
   Most visitors arrive on a phone, so the breakpoints below do real layout
   work rather than just hiding things.
   ========================================================================= */

/* Tablet / small laptop */
@media (max-width: 900px) {
  html { scroll-padding-top: 72px; }

  .demo__card { padding: var(--gap-md); }
  .demo__actions { width: 100%; }
  .demo__actions .btn { width: 100%; }
}

/* Phones */
@media (max-width: 720px) {
  body { font-size: 15.5px; }

  .wrap { padding: 0 var(--gap-md); }

  /* App bar: the section links collapse into a horizontally scrollable rail
     so every section stays reachable with one thumb, and the CTA stays put. */
  .appbar__inner {
    flex-wrap: wrap;
    height: auto;
    padding: 10px 0;
    gap: var(--gap-sm);
  }

  .appbar nav {
    order: 3;
    width: 100%;
    margin-left: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }

  .appbar nav::-webkit-scrollbar { display: none; }

  .appbar nav a {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* The CTA leaves the scrolling rail and sits next to the brand. */
  .appbar nav a.btn--filled {
    position: absolute;
    top: 10px;
    right: var(--gap-md);
  }

  .appbar__inner { position: relative; }

  .hero { padding: var(--gap-lg) 0; }

  /* Single column: copy first, then the phone capture. */
  .hero__inner { gap: var(--gap-lg); }

  .hero__shot { flex: 1 1 100%; }

  .showcase {
    padding: var(--gap-md);
    gap: var(--gap-md);
  }

  /* Reverse-row flipping only helps on wide layouts. */
  .showcase--flip { flex-direction: row; }

  .showcase__wide,
  .showcase__phone {
    flex: 1 1 100%;
    width: auto;
  }

  /* Stacked: height matching is pointless here, so the captures go back to
     filling the column width and keeping their own height. */
  .showcase img {
    width: 100%;
    height: auto;
  }

  .showcase__phone img { max-width: 240px; margin: 0 auto; }

  /* The split pair keeps its shared width, now derived from the column. */
  .showcase__phone--split { --split-w: min(240px, 100%); }

  .splitshot { margin: 0 auto; }

  .showcase__phone--split .splitshot img {
    width: var(--split-w);
    max-width: 100%;
    height: auto;
    margin: 0;
  }

  /* Full-width, thumb-sized CTAs. */
  .hero__actions .btn,
  #closing .hero__actions .btn,
  #contact .hero__actions .btn {
    width: 100%;
    padding: 14px 22px;
  }

  .pills {
    grid-template-columns: 1fr;
    padding: var(--gap-md) 0;
  }

  section.block { padding: var(--gap-lg) 0; }

  .block__head { margin-bottom: var(--gap-md); }

  /* One card per row: two columns at phone width makes the text unreadable. */
  .grid { grid-template-columns: 1fr; }

  .totop {
    right: 12px;
    bottom: 12px;
  }
}

/* Lightbox on small screens: the navigation buttons move to the bottom so they
   never cover the image, which already uses the full width there. */
@media (max-width: 720px) {
  .lightbox {
    padding: 56px var(--gap-sm) 72px;
    gap: var(--gap-sm);
  }

  .lightbox__img { max-height: calc(100vh - 180px); }

  .lightbox__btn--prev,
  .lightbox__btn--next {
    top: auto;
    bottom: var(--gap-md);
    transform: none;
  }

  .lightbox__btn--prev { left: 25%; }
  .lightbox__btn--next { right: 25%; }

  .lightbox__btn--prev:hover,
  .lightbox__btn--next:hover { transform: scale(1.06); }
}

/* Very narrow phones (iPhone SE class) */
@media (max-width: 380px) {
  .brand { font-size: 1rem; }
  .appbar nav a.btn--filled { padding: 7px 12px; font-size: 0.8rem; }
}

/* Users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .card { transition: none; }
  .card:hover { transform: none; }
}