/* YooNee! marketing site v2 -- vanilla CSS, no external requests */

:root{
  --ink:#111111;
  --white:#FFFFFF;
  --secondary:#6E6E73;
  --secondary-dark:#A1A1A6;
  --band:#F5F5F7;
  --dark:#0B0B0C;
  --dark-rule:#2A2A2C;
  --rule:#E5E5EA;

  --orange:#F26522;        /* brand orange (content.md) */
  --zone-a:#F26322;        /* zone A orange (zone identity sheet) */
  --zone-b:#D2D5DD;
  --zone-c:#FFCC6C;
  --zone-d:#B3D1C2;
  --zone-b-legible:#9AA0AB;
  --zone-c-legible:#E0B04A;
  --zone-d-legible:#6FAE93;

  --frame-border:rgba(17,17,17,.14);
  --frame-border-dark:rgba(255,255,255,.30);

  --font-display:'Prompt', 'Noto Sans Thai', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:'Prompt', 'Noto Sans Thai', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --container:1120px;

  --fs-h2-highlights: clamp(2rem, 1.5rem + 2.2vw, 3.5rem);
  --fs-h2-chapter: clamp(2rem, 1.4rem + 3vw, 3.5rem);
  --fs-h2: clamp(1.875rem, 1.4rem + 2.2vw, 3.25rem);
  --fs-lead: clamp(1.15rem, 1.05rem + 0.6vw, 1.375rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-eyebrow: 0.9375rem;

  --space-section: 72px;
  --space-chapter: 88px;

  --hero-big: clamp(84px, calc(84px + (100vw - 390px) * 0.0854), 160px);
  --hero-small: clamp(42px, calc(42px + (100vw - 390px) * 0.0427), 80px);
}
@media (min-width:860px){
  :root{ --space-section: 128px; --space-chapter: 168px; --fs-body: 1.125rem; --fs-small: 1rem; --fs-eyebrow: 1rem; }
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:400;
  font-size:var(--fs-body);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
  word-break:break-word;
}
/* horizontal clip lives on <main> (not html/body): html/body ancestors with any
   non-visible overflow break position:sticky on the header in Safari/WebKit.
   main sits as a sibling of the header, so it clips the hero's bleeding dot
   pattern without touching the header's scrolling ancestor chain. */
main{ overflow-x:hidden; }

img{ max-width:100%; display:block; }
a{ color:inherit; }
ul{ margin:0; padding:0; list-style:none; }
p{ margin:0; overflow-wrap:break-word; word-break:break-word; }
h1,h2,h3,h4{ margin:0; font-family:var(--font-display); font-weight:800; color:var(--ink); overflow-wrap:break-word; word-break:break-word; text-wrap:balance; }
button{ font-family:inherit; }

.visually-hidden{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0;
  clip:rect(0 0 0 0); clip-path:inset(50%); overflow:hidden; white-space:nowrap;
}

/* keeps a compound Thai word (or a short label) from breaking mid-word --
   Chrome's Thai line-breaker is dictionary-based and has no spaces to work with */
.nowrap{ white-space:nowrap; overflow-wrap:normal; word-break:keep-all; }

:focus-visible{ outline:2px solid var(--orange); outline-offset:3px; border-radius:4px; }

.wrap{ max-width:var(--container); margin-inline:auto; padding-inline:24px; }
@media (min-width:640px){ .wrap{ padding-inline:32px; } }

.section{ padding-block:var(--space-section); }
.section-rule{ width:36px; height:2px; background:var(--orange); margin-bottom:20px; border:0; }

.eyebrow{
  font-family:var(--font-body); font-weight:600; font-size:var(--fs-eyebrow);
  color:var(--secondary); letter-spacing:.02em; margin:0 0 14px;
}

/* ---------- skip link ---------- */
.skip-link{
  position:absolute; left:12px; top:-60px; z-index:1000;
  background:var(--dark); color:var(--white); padding:12px 18px;
  border-radius:8px; font-weight:600; font-size:var(--fs-small);
  transition:top .2s ease;
}
.skip-link:focus{ top:12px; }
@media (prefers-reduced-motion: reduce){ .skip-link{ transition:none; } }

/* ---------- header: two sticky rows, Apple local-nav style ---------- */
.site-header{ position:sticky; top:0; z-index:100; }
.header-main{
  background:rgba(255,255,255,.9); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--rule);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:10px; }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; min-height:44px; }
.brand-icon{ width:26px; height:26px; border-radius:22%; flex:none; }
.brand-word{ font-family:var(--font-display); font-weight:800; font-size:1.1rem; color:var(--ink); white-space:nowrap; }
.brand-mark{ color:var(--orange); }

.lang-toggle{ display:flex; align-items:center; gap:6px; }
.lang-btn{
  position:relative;
  background:none; border:1px solid var(--rule); border-radius:8px; cursor:pointer;
  font-weight:600; font-size:var(--fs-small); color:var(--secondary);
  min-width:44px; min-height:36px; padding:0 10px;
}
.lang-btn::before{
  /* invisible hit area: keeps the 36px visual height, >=44px tap target */
  content:""; position:absolute; left:0; right:0; top:-4px; bottom:-4px;
}
.lang-btn[aria-pressed="true"]{ color:var(--ink); border-color:var(--ink); background:var(--band); }
.lang-sep{ color:var(--rule); }

.header-nav{
  background:rgba(255,255,255,.82); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--rule);
}
.site-nav{
  display:flex; gap:22px; overflow-x:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; padding-block:2px;
}
.site-nav::-webkit-scrollbar{ display:none; }
.site-nav a{
  text-decoration:none; font-weight:600; font-size:var(--fs-small); color:var(--secondary);
  min-height:44px; display:inline-flex; align-items:center; white-space:nowrap;
  border-bottom:2px solid transparent; flex:none;
}
.site-nav a:hover, .site-nav a:focus-visible{ color:var(--ink); border-bottom-color:var(--orange); }

/* ---------- reveal motion ---------- */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
.reveal.is-visible{ opacity:1; transform:none; }
.reveal--hero-phone{ opacity:0; transform:translateY(24px); transition:opacity .6s ease .1s, transform .6s ease .1s; }
.reveal--hero-phone.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal--hero-phone{ opacity:1; transform:none; transition:none; }
}
.gallery-card:nth-child(1){ transition-delay:0ms; }
.gallery-card:nth-child(2){ transition-delay:60ms; }
.gallery-card:nth-child(3){ transition-delay:120ms; }
.gallery-card:nth-child(4){ transition-delay:180ms; }
.gallery-card:nth-child(5){ transition-delay:240ms; }
.gallery-card:nth-child(6){ transition-delay:300ms; }
.gallery-card:nth-child(7){ transition-delay:360ms; }
.hero-inner .reveal:nth-child(1){ transition-delay:0ms; }
.hero-inner .reveal:nth-child(2){ transition-delay:80ms; }
.hero-inner .reveal:nth-child(3){ transition-delay:160ms; }
.hero-inner .reveal:nth-child(4){ transition-delay:220ms; }

/* ---------- device frame ---------- */
.device-frame{
  position:relative; border-radius:36px; overflow:hidden;
  border:1px solid var(--frame-border);
  box-shadow:0 18px 30px rgba(0,0,0,.10);
  background:var(--band);
}
.device-frame img{ display:block; width:100%; height:auto; }
.device-frame--on-dark{ border-color:var(--frame-border-dark); box-shadow:0 18px 30px rgba(0,0,0,.35); }

/* ---------- zone decorative patterns ---------- */
.zone-pattern{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  width:100%; height:100%; /* bare inline <svg> has no viewBox, so it defaults to the
    UA 300x150 box and ignores inset:0 unless width/height are set explicitly --
    without this the pattern (and its mask, sized off this box) never covers the band */
  opacity:.11;
  -webkit-mask-image:radial-gradient(ellipse 620px 420px at 50% 0%, transparent 0%, transparent 42%, #000 78%);
  mask-image:radial-gradient(ellipse 620px 420px at 50% 0%, transparent 0%, transparent 42%, #000 78%);
}
.chapter-band--a .zone-pattern{ opacity:.08; }

/* ---------- hero ---------- */
.hero{ background:var(--white); padding-top:64px; padding-bottom:0; position:relative; overflow:visible; text-align:center; }
@media (min-width:860px){ .hero{ padding-top:88px; } }
.hero-dots{ position:absolute; inset:-6% -10% -6%; z-index:0; pointer-events:none; opacity:.85; }
.hero-dots circle{ fill:var(--zone-a); opacity:.10; }
.hero-inner{ max-width:640px; margin-inline:auto; position:relative; z-index:1; }
.hero-avail{ color:var(--secondary); font-size:var(--fs-small); font-weight:600; margin-bottom:22px; }

.hero-headline{ position:relative; display:inline-block; text-align:left; line-height:.95; }
.hero-word-big{
  display:block; font-family:var(--font-display); font-weight:800; color:var(--zone-a);
  font-size:var(--hero-big); letter-spacing:-.02em; line-height:.95; white-space:nowrap;
}
.hero-word-small{
  display:block; font-family:var(--font-display); font-weight:800; color:var(--ink);
  font-size:var(--hero-small); letter-spacing:-.02em; line-height:.95; white-space:nowrap;
  -webkit-text-stroke:6px var(--white); paint-order:stroke fill;
  text-shadow:0 0 8px var(--white), 3px 3px 0 var(--white), -3px -3px 0 var(--white), 3px -3px 0 var(--white), -3px 3px 0 var(--white);
}
/* v1: drop-cap stack -- big top-left, small tucked bottom-right overlapping ~15% */
.hero-headline--v1 .hero-word-small{
  position:absolute; right:6%; bottom:-8%; transform:translateY(15%);
}
.hero-headline--v1{ padding-bottom:calc(var(--hero-small) * .35); }

/* v2: slab -- big bleeds right past centre column, small sits right-anchored under it
   (shared right edge reads as "starting under the final letter") with a dotted rule */
.hero-headline--v2{ display:block; width:100%; text-align:right; }
.hero-headline--v2 .hero-word-big{ display:block; margin-right:-3%; }
.hero-headline--v2 .hero-word-small{
  display:block; text-align:right; margin-top:8px;
  -webkit-text-stroke:0; text-shadow:none;
  padding-bottom:10px;
  background-image:repeating-linear-gradient(to right, var(--zone-a) 0 7px, transparent 7px 14px);
  background-position:bottom right; background-size:55% 3px; background-repeat:repeat-x;
}

.hero-lead{
  font-family:var(--font-body); font-weight:400; font-size:var(--fs-lead); line-height:1.5;
  color:var(--ink); margin-top:26px; max-width:34ch; margin-inline:auto;
}
.store-row{ margin-top:30px; }
.store-badges{ display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; }
.store-badges img{ height:44px; width:auto; }
.store-soon{ color:var(--orange); font-weight:600; font-size:var(--fs-small); }

.hero-visual{ position:relative; margin-top:44px; display:flex; justify-content:center; }
.hero-phone-wrap{ position:relative; z-index:5; width:min(300px,72vw); margin-bottom:-40px; }
@media (min-width:640px){ .hero-phone-wrap{ width:340px; margin-bottom:-56px; } }
@media (min-width:1120px){ .hero-phone-wrap{ width:440px; margin-bottom:-80px; } }

/* ---------- clip (video placeholder) ---------- */
.clip{ position:relative; aspect-ratio:872/1894; border-radius:inherit; overflow:hidden; background:var(--band); }
/* chapter video cards carry both classes ("gallery-media clip"); .gallery-media
   below also sets aspect-ratio for plain screenshot cards (872/1916). Equal
   specificity would let source order decide the winner, so this compound
   selector pins video cards to the clips' true 872/1894 ratio regardless. */
.gallery-media.clip{ aspect-ratio:872/1894; }
.clip-video, .clip-poster-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
}
.clip-poster-img{ opacity:0; }
.clip--broken .clip-video{ display:none; }
.clip--broken .clip-poster-img{ opacity:1; }
.clip-toggle{
  position:absolute; right:10px; bottom:10px; z-index:2;
  width:40px; height:40px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(17,17,17,.55); color:var(--white); display:flex; align-items:center; justify-content:center;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.clip-toggle::before{
  /* invisible hit area: keeps the 40px visual circle, >=44px tap target */
  content:""; position:absolute; top:50%; left:50%; width:44px; height:44px;
  transform:translate(-50%,-50%);
}
.clip-toggle svg{ width:18px; height:18px; }
.clip-toggle .icon-play{ display:none; }
.clip-toggle[data-state="paused"] .icon-play{ display:block; }
.clip-toggle[data-state="paused"] .icon-pause{ display:none; }
.clip--broken .clip-toggle{ display:none; }
.clip-devlabel{ display:none; }
body.dev-mode .clip{ outline:2px solid var(--zone-a); outline-offset:-2px; }
body.dev-mode .clip-devlabel{
  display:block; position:absolute; inset:auto 0 0 0; z-index:3; text-align:center;
  background:rgba(242,101,34,.92); color:var(--white); font-size:11px; font-weight:600;
  padding:5px 6px; word-break:break-all; font-family:var(--font-body);
}

/* ---------- gallery (shared: highlights + chapter galleries) ---------- */
.gallery-wrap{ position:relative; margin-top:44px; }
.gallery-track{
  display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:8px;
  scroll-padding-left:24px;
}
.gallery-track::-webkit-scrollbar{ display:none; }
.gallery-card{
  flex:0 0 auto; width:76vw; max-width:340px; scroll-snap-align:start;
  border-radius:24px; background:var(--white); border:1px solid var(--rule);
  box-shadow:0 10px 26px rgba(0,0,0,.06); overflow:hidden;
  opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease;
  display:flex; flex-direction:column;
}
.gallery-card.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .gallery-card{ opacity:1; transform:none; transition:none; } }
@media (min-width:640px){ .gallery-card{ width:320px; } }
@media (min-width:1120px){ .gallery-card{ width:340px; } }

.gallery-media{
  position:relative; aspect-ratio:872/1916; background:var(--band);
  flex:1 1 auto; min-height:0; /* lets the media absorb any leftover row-stretch
    height instead of leaving blank card background below it (object-fit:cover
    on the video/img inside just crops a little more, never distorts) */
}
.gallery-media img{ width:100%; height:100%; object-fit:cover; }

.gallery-card-body{ padding:20px 22px 24px; }
.gallery-card-title{ font-family:var(--font-body); font-weight:700; font-size:1.05rem; color:var(--ink); }
.gallery-card-line{ margin-top:6px; color:var(--secondary); font-size:0.9375rem; line-height:1.5; }
@media (min-width:860px){ .gallery-card-line{ font-size:1rem; } }
/* highlights gallery one-liners read as a card subtitle (not a plain image
   caption elsewhere in this file), so they sit a step above the general floor */
.highlights-card .gallery-card-line{ font-size:1rem; }
@media (min-width:860px){ .highlights-card .gallery-card-line{ font-size:1.0625rem; } }

/* highlights cards: title+line in upper block, screenshot fills lower ~60% */
.highlights-card{ min-height:420px; }
.highlights-card .gallery-card-body{ flex:0 0 auto; }
.highlights-card .gallery-media{ flex:1 1 auto; aspect-ratio:auto; min-height:230px; }
.highlights-card .gallery-media img{ object-position:top center; }
.highlights-card .gallery-card-title{ font-size:1.55rem; line-height:1.2; }

/* chapter TEXT card */
.gallery-card--text{ justify-content:center; }
.gallery-card--text .gallery-card-body{ padding:40px 30px; }
.gallery-card--text .text-card-title{
  font-family:var(--font-body); font-weight:700; font-size:1.75rem; line-height:1.2;
  color:var(--ink); margin-bottom:14px;
}
.gallery-card--text p{ font-size:1.15rem; line-height:1.55; color:var(--ink); }

.gallery-paddles{ display:none; }
.gallery-wrap.has-overflow .gallery-paddles{
  display:flex; justify-content:flex-end; gap:10px; margin-top:16px;
}
.gallery-paddle{
  width:44px; height:44px; border-radius:50%; border:1px solid var(--rule);
  background:var(--white); color:var(--ink); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.gallery-paddle:disabled{ opacity:.35; cursor:default; }
.gallery-paddle svg{ width:18px; height:18px; }

/* ---------- highlights section ---------- */
.highlights h2{ font-size:var(--fs-h2-highlights); text-align:left; max-width:22ch; }

/* ---------- chapter bands ---------- */
.chapter-band{ position:relative; padding-block:var(--space-chapter); overflow:hidden; }
.chapter-band--b{ background:var(--zone-b); }
.chapter-band--c{ background:var(--zone-c); }
.chapter-band--d{ background:var(--zone-d); }
.chapter-band--a{ background:var(--zone-a); color:var(--white); }
.chapter-band--a .chapter-eyebrow{ color:#111; }
.chapter-band--a .chapter-title{ color:var(--white); }
.chapter-band--a .chapter-lead{ color:#111; }
.chapter-band--a .chapter-lead strong{ color:#111; }
.chapter-band--a .section-rule{ background:var(--white); }

.chapter-inner{ position:relative; z-index:1; }
.chapter-intro{ max-width:640px; margin-inline:auto; text-align:center; }
.chapter-eyebrow{ font-weight:600; font-size:var(--fs-eyebrow); color:var(--secondary); margin-bottom:14px; letter-spacing:.02em; white-space:nowrap; }
.chapter-title{ font-size:var(--fs-h2-chapter); line-height:1.08; letter-spacing:-.005em; }
.chapter-lead{ margin-top:20px; font-size:var(--fs-lead); line-height:1.55; color:var(--ink); }
.chapter-lead + .chapter-lead{ margin-top:14px; }

/* ---------- and-more grid ---------- */
.more h2{ font-size:var(--fs-h2); text-align:left; max-width:16ch; }
.more-grid{ margin-top:44px; display:grid; grid-template-columns:1fr; gap:32px; }
@media (min-width:640px){ .more-grid{ grid-template-columns:1fr 1fr; gap:36px 32px; } }
@media (min-width:960px){ .more-grid{ grid-template-columns:repeat(3,1fr); } }
.more-block{ padding-top:20px; border-top:1px solid var(--rule); }
.more-icon{ width:28px; height:28px; color:var(--ink); display:block; }
.more-block-title{ margin-top:16px; font-family:var(--font-body); font-weight:700; font-size:1.15rem; color:var(--ink); }
.more-block-body{ margin-top:8px; color:var(--secondary); font-size:var(--fs-small); line-height:1.55; }

/* ---------- how to use ---------- */
.howto{ background:var(--band); }
.howto h2{ font-size:var(--fs-h2); max-width:16ch; }
.howto-steps{ margin-top:48px; display:grid; grid-template-columns:1fr; gap:36px; }
@media (min-width:860px){ .howto-steps{ grid-template-columns:repeat(4,1fr); gap:24px; } }
.howto-step{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.howto-num{
  width:46px; height:46px; border-radius:13px; flex:none;
  clip-path:polygon(0 0, 76% 0, 100% 24%, 100% 100%, 0 100%);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:800; font-size:1.05rem; color:var(--white);
}
.howto-num--1{ background:var(--zone-a); }
.howto-num--2{ background:var(--zone-b-legible); }
.howto-num--3{ background:var(--zone-c-legible); }
.howto-num--4{ background:var(--zone-d-legible); }
.howto-text{ color:var(--ink); max-width:32ch; }
.howto-shot{ width:150px; max-width:100%; border-radius:20px; }
@media (min-width:860px){ .howto-shot{ width:100%; } }
.howto-note{
  margin-top:40px; padding:18px 22px; border:1px solid var(--rule); border-radius:12px;
  background:var(--white); color:var(--secondary); font-size:var(--fs-small); max-width:56ch;
}

/* ---------- origin + vision ---------- */
.ov-grid{ display:grid; grid-template-columns:1fr; gap:56px; }
@media (min-width:860px){ .ov-grid{ grid-template-columns:1fr 1fr; gap:64px; } }
.ov-block h2{ font-size:var(--fs-h2); max-width:16ch; }
.origin-display{ font-size:clamp(2rem,1.6rem + 2vw,3.75rem); line-height:1.1; letter-spacing:-.005em; margin-top:18px; color:var(--zone-a); font-family:var(--font-display); font-weight:800; }
.ov-body{ margin-top:22px; max-width:52ch; color:var(--ink); }

/* origin block: text + phone (device-frame), stacked (image below text) until
   960px, then a side-by-side row (text left, phone right). Own breakpoint --
   not the shared 860px ov-grid one -- because at 860-960px the outer ov-grid
   has already gone two-up, leaving too little width to also split the origin
   cell itself without cramming the paragraph. */
.ov-block--origin{ display:flex; flex-direction:column; gap:28px; }
.origin-media{ width:220px; max-width:60%; margin-inline:auto; flex:none; }
@media (min-width:960px){
  .ov-block--origin{ flex-direction:row; align-items:flex-start; gap:28px; }
  .origin-text{ flex:1 1 auto; min-width:0; }
  .origin-media{ width:160px; max-width:160px; margin-inline:0; }
}

/* ---------- partners ---------- */
.partners h2{ font-size:var(--fs-h2); max-width:18ch; }
/* below 1100px nine logos never fit one row at a legible size -- lay them out as a
   fixed 5-column grid so they always break 5+4, never 8 stranding a lone 9th */
.logo-row{
  margin-top:44px; display:grid; grid-template-columns:repeat(5,1fr);
  justify-items:center; align-items:center; gap:28px 5%;
}
.logo-row a{
  display:flex; align-items:center; justify-content:center;
  min-height:44px; width:100%;
}
.logo-row img{ height:auto; width:auto; max-height:34px; max-width:100%; object-fit:contain; }


@media (min-width:1100px){
  .logo-row{ display:flex; flex-wrap:nowrap; justify-content:flex-start; gap:28px; }
  .logo-row a{ width:auto; }
  .logo-row img{ max-height:38px; }
}

/* ---------- closing cta (the ONLY dark band on the page) ---------- */
.final-cta{ background:var(--dark); color:var(--white); text-align:center; }
.final-cta .section-rule{ margin-inline:auto; background:var(--orange); }
.final-cta h2{ font-size:var(--fs-h2); max-width:18ch; margin-inline:auto; color:var(--white); }
.final-cta .store-row{ margin-top:32px; }
.final-cta .store-quiet{ margin-top:16px; color:var(--secondary-dark); font-size:var(--fs-small); }

/* ---------- footer: Apple-style light grey ---------- */
.site-footer{ background:var(--band); color:var(--ink); padding-block:48px; border-top:1px solid var(--rule); }
.footer-inner{ display:flex; flex-direction:column; gap:28px; align-items:flex-start; }
@media (min-width:760px){
  .footer-inner{ flex-direction:row; align-items:center; justify-content:space-between; flex-wrap:wrap; }
}
.footer-brand-word{ font-family:var(--font-display); font-weight:800; font-size:1.1rem; color:var(--ink); }
.footer-dev{ margin-top:8px; color:var(--secondary); max-width:40ch; font-size:var(--fs-small); }
.footer-links{ display:flex; flex-wrap:wrap; gap:18px 24px; }
.footer-links a{
  text-decoration:none; color:var(--ink); font-weight:600; font-size:var(--fs-small);
  min-height:44px; display:inline-flex; align-items:center; border-bottom:1px solid transparent;
}
.footer-links a:hover{ border-bottom-color:var(--orange); }
.footer-meta{ display:flex; flex-direction:column; gap:14px; align-items:flex-start; }
@media (min-width:760px){ .footer-meta{ align-items:flex-end; } }
.footer-meta img{ height:24px; width:auto; }
.footer-copyright{ color:var(--secondary); font-size:var(--fs-small); }

.store-link{ display:inline-flex; transition:opacity .18s ease, transform .18s ease; }
.store-link:hover{ opacity:.85; transform:translateY(-1px); }
.store-dim{ opacity:.4; filter:grayscale(1); }