/* Lemonpunch — Website styles */

:root{
  --ink:#000000;
  --lemon:#F4E51A;
  --paper:#FAFAF7;
  --bone:#EEEAE0;
  --rule:rgba(0,0,0,0.12);
  --muted:rgba(0,0,0,0.55);
  --sans:'Manrope',-apple-system,system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--paper);color:var(--ink);font-family:var(--sans);overflow-x:hidden;cursor:none;-webkit-tap-highlight-color:transparent;}
/* Strip the default focus ring for mouse users only — keyboard users still
   get a visible ring via :focus-visible for accessibility. */
*:focus:not(:focus-visible){outline:none;}
*:focus-visible{outline:2px solid var(--lemon);outline-offset:3px;border-radius:2px;}
button{font-family:inherit;-webkit-tap-highlight-color:transparent;}

/* selection */
::selection{background:var(--lemon);color:var(--ink);}

/* cursor */
.cursor{
  position:fixed;left:0;top:0;
  width:14px;height:14px;border-radius:50%;
  background:var(--lemon);
  pointer-events:none;
  z-index:1000;
  mix-blend-mode:normal;
  transform:translate(-50%,-50%);
  transition:opacity 0.25s ease,
             width 0.25s cubic-bezier(0.2,0.9,0.3,1.4),
             height 0.25s cubic-bezier(0.2,0.9,0.3,1.4),
             background 0.2s;
  will-change:transform;
}
.cursor.hover{width:42px;height:42px;background:var(--lemon);}
.cursor.invert{background:var(--paper);}
/* Flight states use plain compositing — never mix-blend-mode (yellow under
   difference blending tints blue over light backgrounds). */
.cursor.flying{mix-blend-mode:normal !important;}

/* page chrome — fixed top bar */
.chrome{
  position:fixed;top:0;left:0;right:0;
  display:flex;justify-content:space-between;align-items:center;
  padding:22px 32px;z-index:50;
  pointer-events:none;
}
.chrome > *{pointer-events:auto;}
.chrome.dark{color:var(--paper);}
.chrome .right{
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:0.08em;text-transform:uppercase;
  display:flex;align-items:center;gap:0;
}
.chrome .right a{
  color:inherit;text-decoration:none;
  padding:6px 10px;border-radius:999px;
  transition:color 0.2s, background 0.2s;
}
.chrome .right a:hover{color:var(--ink);background:var(--lemon);}
.chrome.dark .right a:hover{color:var(--ink);background:var(--lemon);}
.chrome .right .sep{color:rgba(0,0,0,0.25);}
.chrome.dark .right .sep{color:rgba(250,250,247,0.3);}
.chrome .left{
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:0.08em;text-transform:uppercase;
}
.chrome .left .live-dot{
  display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--lemon);margin-right:8px;
  animation:pulse 2s ease-in-out infinite;
  transform:translateY(-1px);
}
@keyframes pulse{
  0%,100%{opacity:1;transform:translateY(-1px) scale(1);}
  50%{opacity:0.4;transform:translateY(-1px) scale(0.85);}
}

/* ——————— HERO ——————— */
.hero{
  height:100vh;min-height:600px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  position:relative;
  background:var(--paper);
}
.hero-mark{
  font-family:var(--sans);
  font-weight:500;letter-spacing:-0.05em;line-height:0.9;
  font-size:clamp(56px, 11vw, 160px);
  display:flex;align-items:baseline;
}
.hero-mark .word{
  display:inline-block;
  opacity:0;
  transform:translateY(20px);
  animation:fadeUp 1s cubic-bezier(0.2,0.7,0.2,1) 0.2s forwards;
}
.hero-mark .punch-dot{
  display:inline-block;
  width:0.32em;height:0.32em;border-radius:50%;
  background:var(--lemon);
  margin-left:0.06em;
  transform:translate(80px, -0.08em) scale(0.4);
  opacity:0;
  transform-origin:center center;
  will-change:transform,opacity;
}
/* ENTER: first-load entrance — slow, dramatic punch-in after the wordmark
   has faded up. Only used on initial render before any squeeze has happened. */
.hero-mark .punch-dot.enter{
  animation:punchIn 1.3s cubic-bezier(0.2,0.9,0.3,1.4) 1.0s forwards;
}

/* LEMON SQUEEZE: triggered when the user first scrolls. The wordmark's dot
   compresses like fruit being pressed (squash horizontally), holds the
   pressure for a beat, then "squirts" upward into a teardrop and vanishes —
   handing off to the cursor element which launches from the same point. */
.hero-mark .punch-dot.squeeze{
  animation:lemonSqueeze 520ms cubic-bezier(0.5,0,0.6,1) forwards;
}

/* RETURN: quick reappear after the cursor has flown home. No 1s delay,
   just a snappy scale-up with a tiny overshoot so the dot lands with
   energy. Used every cycle after the first squeeze. */
.hero-mark .punch-dot.return{
  animation:punchReturn 520ms cubic-bezier(0.2,0.9,0.3,1.4) forwards;
}
@keyframes punchReturn{
  0%   {opacity:0; transform:translate(0,-0.08em) scale(0.3);}
  55%  {opacity:1; transform:translate(0,-0.08em) scale(1.18);}
  100% {opacity:1; transform:translate(0,-0.08em) scale(1);}
}
@keyframes lemonSqueeze{
  0%   { transform:translate(0,-0.08em) scale(1,1);     border-radius:50%; }
  18%  { transform:translate(0,0)       scale(1.45,0.55); border-radius:50%; }
  35%  { transform:translate(0,0.02em)  scale(1.6,0.42); border-radius:50%; }
  50%  { transform:translate(0,-0.04em) scale(0.95,1.25); border-radius:50% 50% 35% 35%; }
  68%  { transform:translate(0,-0.7em)  scale(0.55,1.9); border-radius:55% 55% 30% 30%; }
  88%  { transform:translate(0,-1.4em)  scale(0.35,0.9); border-radius:50%; opacity:0.7; }
  100% { transform:translate(0,-1.8em)  scale(0,0);     border-radius:50%; opacity:0; }
}
@keyframes fadeUp{
  to{opacity:1;transform:translateY(0);}
}
@keyframes punchIn{
  0%   {opacity:0;transform:translate(80px,-0.08em) scale(0.4);}
  35%  {opacity:1;transform:translate(0,-0.08em) scale(1.6);}
  55%  {opacity:1;transform:translate(0,-0.08em) scale(0.85);}
  70%  {opacity:1;transform:translate(0,-0.08em) scale(1.08);}
  85%,100%{opacity:1;transform:translate(0,-0.08em) scale(1);}
}

.hero-tag{
  margin-top:32px;
  font-family:var(--mono);font-size:13px;font-weight:500;
  letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);
  opacity:0;
  animation:fadeUp 0.8s ease 1.8s forwards;
}
.hero-tag .sep{margin:0 10px;color:rgba(0,0,0,0.25);}

.hero-headline{
  margin:36px 0 0;
  font-weight:800;letter-spacing:-0.04em;line-height:1;
  font-size:clamp(28px, 3.6vw, 54px);
  color:var(--ink);
  opacity:0;
  animation:fadeUp 0.9s cubic-bezier(0.2,0.7,0.2,1) 1.7s forwards;
}
.hero-subhead{
  margin:18px auto 0;max-width:560px;
  font-size:clamp(15px, 1.2vw, 18px);
  line-height:1.55;letter-spacing:-0.005em;
  color:rgba(0,0,0,0.6);
  text-align:center;
  opacity:0;
  animation:fadeUp 0.9s cubic-bezier(0.2,0.7,0.2,1) 1.95s forwards;
}

.scroll-cue{
  position:absolute;bottom:42px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-family:var(--mono);font-size:10px;font-weight:500;
  letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);
  opacity:0;
  animation:fadeUp 0.8s ease 2.2s forwards;
}
.scroll-cue .line{
  width:1px;height:36px;background:currentColor;
  animation:scrollPulse 2.4s ease-in-out infinite;
  transform-origin:top;
}
@keyframes scrollPulse{
  0%,100%{transform:scaleY(0.35);opacity:0.4;}
  50%{transform:scaleY(1);opacity:1;}
}

/* ——————— BIG TYPE SCROLL MOMENT ——————— */
.big-type-section{
  height:130vh;
  position:relative;
  background:var(--paper);
}
.big-type-sticky{
  position:sticky;top:0;
  height:100vh;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.big-type{
  font-family:var(--sans);font-weight:800;
  letter-spacing:-0.06em;line-height:0.85;
  font-size:clamp(48px, 9vw, 180px);
  text-align:center;
  color:var(--ink);
  white-space:nowrap;
  transform-origin:center center;
  will-change:transform,opacity;
}
.big-type .word{display:inline-block;}
.big-type .dot{
  display:inline-block;width:0.32em;height:0.32em;
  border-radius:50%;background:var(--lemon);
  margin-left:0.04em;transform:translateY(-0.05em);
}
.big-type-meta{
  position:absolute;bottom:48px;left:32px;
  font-family:var(--mono);font-size:11px;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--muted);
}

/* ——————— STUDIO ——————— */
.studio{
  padding:96px 32px 140px;
  background:var(--paper);
  position:relative;
}
.section-eyebrow{
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);
  display:flex;align-items:center;gap:10px;
}
.section-eyebrow::before{
  content:"";display:inline-block;width:8px;height:8px;
  border-radius:50%;background:var(--lemon);
}
.studio-grid{
  max-width:1280px;margin:0 auto;
  display:flex;flex-direction:column;align-items:flex-start;gap:32px;
}
.studio-headline{
  font-weight:800;letter-spacing:-0.045em;line-height:1.08;
  font-size:clamp(44px, 8vw, 112px);
  margin:18px 0 0;
}
/* Small vertical padding on the highlighted em prevents the descenders of
   the previous line (the comma in "Hi, we're") from kissing the top edge
   of the yellow background on the next line. Combined with the looser
   line-height above, the two lines breathe properly. */
.studio-headline em{
  font-style:normal;
  background:var(--lemon);
  padding:0.04em 0.08em;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}

.studio-body{
  font-size:clamp(17px,1.4vw,21px);
  line-height:1.55;letter-spacing:-0.01em;
  color:rgba(0,0,0,0.78);
  max-width:60ch;
  margin-top:16px;
}
.studio-body p + p{margin-top:16px;}

.principles-header{
  max-width:1280px;
  margin:120px auto 32px;
}
.principles{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px;
  max-width:1280px;margin:0 auto;
}
.principle{
  border-top:1px solid var(--ink);
  padding:24px 0 0;
}
.principle .num{
  font-family:var(--mono);font-size:11px;letter-spacing:0.1em;
  color:var(--muted);
}
.principle h3{
  font-size:36px;font-weight:800;letter-spacing:-0.03em;
  margin:8px 0 12px;
}
.principle p{
  font-size:15px;line-height:1.55;color:rgba(0,0,0,0.7);
  margin:0;letter-spacing:-0.005em;
}

/* ——————— DAY ONE ——————— */
.day-one{
  background:var(--ink);color:var(--paper);
  padding:160px 32px 180px;
  position:relative;
  overflow:hidden;
}
.day-one .section-eyebrow{color:rgba(250,250,247,0.55);}
.day-one .section-eyebrow::before{background:var(--lemon);}

.day-one-inner{max-width:1280px;margin:0 auto;}
.day-one-stamp{
  display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;
  margin:32px 0 0;
}
.day-one-stamp .day{
  font-weight:800;letter-spacing:-0.05em;line-height:0.9;
  font-size:clamp(96px, 18vw, 280px);
  color:var(--paper);
}
.day-one-stamp .day-num{color:var(--lemon);}

.day-one-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:80px;
  margin-top:80px;
  align-items:start;
}
.day-one-headline{
  font-weight:800;letter-spacing:-0.045em;line-height:1;
  font-size:clamp(40px,5vw,76px);
  margin:0;
}
.day-one-headline em{
  font-style:normal;
  background:var(--lemon);color:var(--ink);
  padding:0 0.06em;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}

.day-one-body{
  font-size:clamp(17px,1.4vw,21px);
  line-height:1.55;letter-spacing:-0.01em;
  color:rgba(250,250,247,0.78);
  max-width:560px;
}
.day-one-body p + p{margin-top:16px;}

.counter-row{
  margin-top:64px;
  display:flex;gap:48px;flex-wrap:wrap;
  border-top:1px solid rgba(250,250,247,0.18);
  padding-top:24px;
}
.counter-cell{
  display:flex;flex-direction:column;gap:4px;
}
.counter-cell .label{
  font-family:var(--mono);font-size:10.5px;letter-spacing:0.1em;
  text-transform:uppercase;color:rgba(250,250,247,0.55);
}
.counter-cell .val{
  font-family:var(--mono);font-size:18px;font-weight:500;
  color:var(--paper);font-variant-numeric:tabular-nums;
}

/* ——————— WHERE THE WORK LIVES ——————— */
.work-lives{
  background:var(--lemon);
  padding:160px 32px 180px;
  position:relative;
  overflow:hidden;
}
.work-lives .section-eyebrow{color:rgba(0,0,0,0.6);}
.work-lives .section-eyebrow::before{background:var(--ink);}

.work-lives-inner{max-width:1280px;margin:0 auto;}
.work-lives-headline{
  font-weight:800;letter-spacing:-0.045em;line-height:0.95;
  font-size:clamp(48px,7vw,120px);
  margin:24px 0 80px;
  max-width:14ch;
}

.platforms{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
}
.platform{
  background:var(--ink);
  border-radius:0;
  padding:32px 28px 28px;
  display:flex;flex-direction:column;gap:24px;
  color:var(--paper);
  transition:transform 0.4s cubic-bezier(0.2,0.7,0.2,1), background 0.3s;
  cursor:none;
  text-decoration:none;
  min-height:340px;
  position:relative;
  overflow:hidden;
}
.platform:hover{
  transform:translateY(-6px);
}

.platform .pl-top{
  display:flex;justify-content:space-between;align-items:flex-start;
}
.platform .pl-name{
  font-size:22px;font-weight:800;letter-spacing:-0.025em;
}
.platform .pl-handle{
  font-family:var(--mono);font-size:11px;
  color:rgba(250,250,247,0.55);
  letter-spacing:0.06em;
  margin-top:4px;
}
.platform .pl-avatar{
  width:48px;height:48px;border-radius:50%;
  background:var(--lemon);
  display:flex;align-items:center;justify-content:center;
  font-weight:800;letter-spacing:-0.07em;color:var(--ink);font-size:22px;
  flex:0 0 auto;
}
.platform .pl-desc{
  font-size:15px;line-height:1.5;
  color:rgba(250,250,247,0.78);
  letter-spacing:-0.005em;
  margin-top:auto;
}
.platform .pl-cta{
  margin-top:18px;
  display:flex;align-items:center;justify-content:space-between;
  font-family:var(--mono);font-size:11px;letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--lemon);
  padding-top:16px;
  border-top:1px solid rgba(250,250,247,0.18);
}
.platform .pl-cta .arrow{transition:transform 0.3s;}
.platform:hover .pl-cta .arrow{transform:translateX(6px);}

/* ——————— CONTACT ——————— */
.contact{
  background:var(--paper);
  padding:200px 32px 120px;
  text-align:center;
}
.contact .section-eyebrow{justify-content:center;}
.contact-link{
  display:inline-block;
  margin-top:36px;
  font-family:var(--sans);font-weight:800;
  letter-spacing:-0.045em;line-height:1;
  font-size:clamp(36px,6vw,88px);
  color:var(--ink);text-decoration:none;
  position:relative;
  transition:color 0.3s;
}
.contact-link:hover{color:var(--ink);}
.contact-link .at{display:inline-block;transition:transform 0.4s cubic-bezier(0.2,0.9,0.3,1.4);transform-origin:center;}
.contact-link:hover .at{transform:rotate(-12deg) scale(1.1);color:var(--lemon);}

.contact-meta{
  margin-top:60px;
  font-family:var(--mono);font-size:12px;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--muted);
}
.contact-meta .sep{margin:0 12px;opacity:0.4;}

/* ——————— FOOTER ——————— */
.footer{
  background:var(--paper);
  border-top:1px solid var(--rule);
  padding:32px;
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--mono);font-size:11px;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--muted);
}
.footer .dot-tiny{
  display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--lemon);margin:0 8px;transform:translateY(-1px);
}
/* Year rendered in sans (Manrope) instead of mono so the 0 in 2026 reads as
   an oval, not pinched like an 8. Slightly tracked-out so digits don't crowd. */
.footer .year-num{
  font-family:var(--sans);
  letter-spacing:0.04em;
  font-weight:500;
  font-variant-numeric:tabular-nums;
}

/* ——————— Return button ——————— */
.return-btn,
.return-btn:focus:not(:focus-visible),
.return-btn:focus:hover,
.return-btn:active{
  outline:none;
  -webkit-tap-highlight-color:transparent;
  accent-color:var(--ink);
  user-select:none;
}
/* Keyboard focus ring — visible only when navigating by Tab. */
.return-btn:focus-visible{
  outline:2px solid var(--lemon);
  outline-offset:3px;
}
.return-btn{
  position:fixed;
  bottom:120px;right:32px;
  z-index:60;
  display:inline-flex;align-items:center;gap:10px;
  padding:12px 18px 12px 14px;
  background:var(--ink);color:var(--paper);
  border:0;border-radius:999px;
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:0.08em;text-transform:uppercase;
  cursor:none;
  -webkit-appearance:none;
  appearance:none;
  opacity:0;transform:translateY(16px) scale(0.92);
  transition:opacity 0.5s cubic-bezier(0.2,0.7,0.2,1),
             transform 0.5s cubic-bezier(0.2,0.9,0.3,1.4),
             background 0.25s, color 0.25s;
  pointer-events:none;
  box-shadow:0 10px 30px -12px rgba(0,0,0,0.4);
}
.return-btn.show{
  opacity:1;transform:translateY(0) scale(1);
  pointer-events:auto;
}
.return-btn .rb-inner{
  display:inline-flex;align-items:center;gap:10px;
}
.return-btn.show .rb-inner{
  animation:returnBob 2.4s ease-in-out 0.6s infinite;
}
.return-btn:hover .rb-inner, .return-btn:active .rb-inner{
  animation:none;
}
/* Hover state — kill any browser focus tint with !important */
.return-btn:hover,
.return-btn:hover:focus,
.return-btn:hover:focus-visible{
  background:var(--lemon) !important;
  color:var(--ink) !important;
}
.return-btn:hover .rb-dot{background:var(--ink);}
.return-btn .rb-dot{
  display:inline-block;width:10px;height:10px;border-radius:50%;
  background:var(--lemon);
  transition:background 0.25s, transform 0.25s;
}
.return-btn:hover .rb-dot{transform:scale(1.15);}
.return-btn .rb-arrow{
  font-size:13px;line-height:1;letter-spacing:0;
  transition:transform 0.3s cubic-bezier(0.2,0.9,0.3,1.4);
}
.return-btn:hover .rb-arrow{transform:translate(2px,-2px);}
.return-btn:active,
.return-btn:active:hover,
.return-btn:active:focus{
  transform:translateY(0) scale(0.97);
  background:var(--lemon) !important;
  color:var(--ink) !important;
}

@keyframes returnBob{
  0%, 100% { transform:translateY(0); }
  50%      { transform:translateY(-6px); }
}

/* ——————— REDUCED MOTION ———————
   Respect prefers-reduced-motion. Disables infinite loops (live-dot pulse,
   return-btn bob, scroll-cue), short-circuits entrance animations so content
   appears instantly, and tames the custom cursor flight to a quick fade-in.
   The scroll-driven Big Type effect is intentionally left intact since it
   doesn't auto-play. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.05s !important;
    scroll-behavior:auto !important;
  }
  /* Custom cursor is hidden by React when reduced-motion is set — restore
     the OS cursor so users aren't left with nothing. */
  html, body, a, button, .platform, .contact-link, .return-btn{
    cursor:auto !important;
  }
  a, button, .platform, .contact-link, .return-btn{
    cursor:pointer !important;
  }
  .hero-mark .word, .hero-mark .punch-dot,
  .hero-headline, .hero-subhead, .scroll-cue,
  .hero-tag{
    opacity:1 !important;
    transform:none !important;
  }
  .scroll-cue .line, .chrome .live-dot, .return-btn.show .rb-inner{
    animation:none !important;
  }
}

/* ——————— RESPONSIVE ——————— */
@media (max-width: 880px){
  html,body{cursor:auto;}
  .cursor{display:none;}
  .return-btn{bottom:80px;right:16px;padding:10px 14px 10px 12px;font-size:10px;}
  .studio-grid, .day-one-grid{grid-template-columns:1fr;gap:48px;}
  .principles{grid-template-columns:1fr;gap:32px;}
  .platforms{grid-template-columns:1fr;}

  /* Chrome: fit all 4 socials on mobile with a slightly smaller font and
     tighter link padding. 9px mono is the readable floor on retina. */
  .chrome{padding:14px 12px;}
  .chrome .left, .chrome .right{font-size:9px;letter-spacing:0.02em;}
  .chrome .right a{padding:4px 5px;}

  /* Section side padding */
  .studio, .day-one, .work-lives, .contact{padding-left:20px;padding-right:20px;}

  /* Hero wordmark — tighten so "lemonpunch." doesn't bleed past the viewport */
  .hero-mark{font-size:clamp(40px, 13vw, 72px);}
  .hero-headline{font-size:clamp(26px, 7vw, 44px);}
  .hero-subhead{font-size:clamp(14px, 4vw, 18px);}

  /* Big Type — allow it to wrap onto multiple lines. On mobile the dramatic
     stack ("BRANDS / WITH / BITE.") reads better than a clipped single line. */
  .big-type{
    white-space:normal;
    font-size:clamp(56px, 17vw, 96px);
    line-height:0.95;
    padding:0 16px;
  }

  /* Day One stamp — "DAY 002." overflows at the 96px desktop min. Tuned
     to fit at 320px width (smallest practical phone) without breaking. */
  .day-one-stamp .day{font-size:clamp(60px, 18vw, 120px);}
  .day-one-headline{font-size:clamp(36px, 9vw, 60px);}

  /* Work lives headline already wraps via max-width:14ch, but tame the size */
  .work-lives-headline{font-size:clamp(42px, 11vw, 80px);}

  /* Studio headline — "Hi, we're Lemonpunch." */
  .studio-headline{font-size:clamp(40px, 10vw, 80px);}

  /* Contact email — the most aggressive overflow. Allow break-word so on
     320px phones it can wrap mid-string if absolutely needed. */
  .contact{padding-top:140px;padding-bottom:80px;}
  .contact-link{
    font-size:clamp(22px, 7vw, 44px);
    word-break:break-word;
    overflow-wrap:anywhere;
    max-width:100%;
  }

  /* Footer: stack vertically. The right-side credit ("Site v1.0 · Made by
     the two of us") is too long to share a row with the copyright on
     mobile, and would wrap mid-phrase to "MADE BY THE TWO / OF US".
     Smaller font + safe-area-inset-bottom keeps the last line visible
     above iOS Safari's floating address bar. */
  .footer{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
    padding:24px 20px;
    padding-bottom:calc(28px + env(safe-area-inset-bottom, 0px));
    font-size:10px;
  }
}