/* Landing gailuh.com (IRA-2091). Mobile-first; two columns in the hero from 900 px.
   Single light theme on purpose: it is the brand's look (tokens from the app's tokens.css). */
@font-face {
  font-family: "Outfit"; src: url("/assets/landing/outfit.woff") format("woff");
  font-weight: 100 900; font-display: swap;
}
:root {
  --sage: #7A8B6F; --sage-dark: #5F6E55; --sage-soft: #D8E0D2;
  --terracota: #C86B4E; --terracota-dark: #A0553D; --pink: #DDB4A8; --pink-soft: #F6E7E1;
  --bg: #FAF6F2; --card: #FFFFFF; --border: #E3D4C6; --cream: #F3EADF;
  --text: #2B2822; --muted: #6E655C;
  --font: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* Apple bezels: iPhone 18 Pro Max (1470×3000, screen 1320×2868 at 75,66);
     Apple Watch Series 11 46 mm (560×880, screen 416×496 at 72,192). */
  --pw: 240px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 1.0625rem; line-height: 1.55; }
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--terracota-dark); outline-offset: 3px; border-radius: 4px; }
h1, h2 { font-weight: 500; letter-spacing: -.02em; text-wrap: balance; margin: 0; }
.accent { color: var(--sage-dark); }
.wrap { max-width: 1180px; margin: 0 auto; padding-inline: 16px; }

.top { display: flex; justify-content: flex-end; align-items: center; padding-block: 12px; }
.lang { font-size: 0.9375rem; font-weight: 500; text-decoration: none; padding: 10px 4px; }
.lang:hover { text-decoration: underline; }

.pill { display: inline-block; background: var(--cream); color: var(--text); border-radius: 999px; padding: 6px 14px; font-size: 0.9375rem; font-weight: 500; }
.btn { display: inline-flex; align-items: center; min-height: 48px; padding: 12px 24px; border-radius: 999px;
  background: var(--sage-dark); color: #fff; text-decoration: none; font-weight: 600; font-size: 1.0625rem; }
.btn:hover { background: #4E5B46; }
.btn.light { background: var(--card); color: var(--sage-dark); }
.btn.light:hover { background: var(--cream); }
.date b { color: var(--terracota-dark); font-weight: 600; }

/* Hero */
.hero { display: grid; gap: 36px; padding-block: 8px 56px; }
.hero-copy { min-width: 0; }
.hero h1 { font-size: clamp(2.25rem, 1.35rem + 4.75vw, 3.875rem); line-height: 1.05; margin: 16px 0 14px; }
.hero .sub { font-size: 1.125rem; color: var(--muted); margin: 0 0 26px; max-width: 36ch; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.cta-row .date { font-size: 1.0625rem; }
.hero-visual { margin: 0; position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.hero-visual .phone { width: min(74%, 320px); position: relative; z-index: 1; }
.shapes { position: absolute; inset: 0 0 64px; pointer-events: none; }
.shapes i { position: absolute; border-radius: 50%; }
.shapes i:nth-child(1) { width: 78%; aspect-ratio: 1; background: var(--sage-soft); left: 50%; top: 18%; transform: translateX(-50%); }
.shapes i:nth-child(2) { width: 34%; aspect-ratio: 1; background: var(--pink); opacity: .55; right: 2%; top: 4%; }
.shapes i:nth-child(3) { width: 22%; aspect-ratio: 1; background: var(--pink-soft); left: 4%; bottom: 6%; }

/* Devices: Apple's bezel on top, untouched; the capture shows through its transparent screen hole. */
.device { position: relative; }
.device .screen { position: absolute; overflow: hidden; background: #fff; z-index: 0; } /* own stacking context: nothing inside can rise above the bezel */
.device::after { content: ""; position: absolute; inset: 0; background: center / 100% 100% no-repeat; pointer-events: none; z-index: 3; }
.phone { aspect-ratio: 1470 / 3000; }
/* Round the capture to just inside the bezel's screen hole: a square corner pokes out past the
   device's rounded outline (hole corner ≈ 200 px of 1320 on the iPhone, ≈ 124 of 416 on the Watch). */
.phone .screen { top: 2.2%; left: 5.102%; width: 89.796%; aspect-ratio: 1320 / 2868; border-radius: 14.4% / 6.6%; }
.phone::after { background-image: url("/assets/landing/marco-iphone.webp"); }
.watch { aspect-ratio: 560 / 880; }
.watch .screen { top: 21.818%; left: 12.857%; width: 74.286%; height: 56.364%; background: #000; border-radius: 27.6% / 23.2%; }
.watch::after { background-image: url("/assets/landing/marco-watch.webp"); }
.screen img { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Hero animation: shots stacked; «Enfoque» transition (the new screen settles from slightly large and blurred). */
.anim { position: absolute; inset: 0; }
.anim .shot { opacity: 0; transform: scale(1.14); filter: blur(10px);
  transition: opacity .4s ease-out, transform .55s cubic-bezier(.2,.85,.25,1), filter .45s ease-out; }
.anim .shot.on { opacity: 1; transform: none; filter: none; z-index: 2; }
.anim .shot.prev { opacity: 1; transform: scale(.94); filter: blur(4px); transition-duration: .3s; z-index: 1; }
/* The tap is a clean cut: the app never shows the old and new state at once. */
.anim.cut .shot { transition: none; transform: none; filter: none; }
.tap { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; }
.tap circle { opacity: 0; transform-origin: 170px 565px; }
.tap.go circle { animation: ripple .6s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes ripple { from { opacity: .55; transform: scale(.2); } to { opacity: 0; transform: scale(1.4); } }

.caption-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; min-height: 44px; position: relative; z-index: 1; }
.caption-row .step { transition: opacity .25s; }
.caption-row .step.swap { opacity: 0; }
.pp { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border); background: var(--card); color: var(--text); cursor: pointer; display: grid; place-items: center; flex: none; }
.pp svg { width: 16px; height: 16px; fill: currentColor; }
.dots { display: flex; gap: 6px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--border); transition: background .3s; }
.dots i.on { background: var(--sage-dark); }

/* Strip */
.strip { background: var(--card); padding-block: 52px 56px; }
.strip h2, .story h2 { font-size: clamp(1.875rem, 1.125rem + 3.5vw, 2.625rem); }
.strip h2 { text-align: center; margin-bottom: 28px; }
.shots { display: flex; align-items: center; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 8px 16px 20px; margin-inline: -16px; scrollbar-width: none; }
.shots::-webkit-scrollbar { display: none; }
.shot-fig { margin: 0; flex: 0 0 var(--pw); scroll-snap-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.shot-fig .phone { width: 100%; }
/* Watch at the same real-world scale as the iPhone (Apple: keep relative scale); never below 200 px tall. */
.watch-fig { flex-basis: calc(var(--pw) * .54); }
.watch-fig .watch { width: 100%; min-height: 200px; }
.strip .pro { text-align: center; color: var(--muted); font-size: 0.9375rem; margin: 12px 0 0; }

/* Story */
.story { background: var(--pink-soft); padding-block: 56px; }
.story-grid { display: grid; gap: 20px; }
.story-text { max-width: 60ch; }
.story-text p { margin: 0 0 14px; font-size: 1.125rem; }
.story .signature { font-size: 1.625rem; color: var(--terracota-dark); font-weight: 500; margin-top: 8px; }

/* Closing */
.closing { background: var(--sage-dark); color: #fff; text-align: center; padding-block: 64px; }
.closing h2 { font-size: clamp(1.875rem, 1.125rem + 3.75vw, 2.875rem); margin: 22px 0 10px; }
.closing .accent { color: var(--sage-soft); }
.closing .date { margin: 0 0 24px; }
.closing .date b { color: #fff; }

/* Lockup: logo above, GAILUH in Outfit below, the logo always centred on the word (Re, 13-14 Oct).
   The left padding mirrors the trailing letter-spacing so the word's ink is what gets centred. */
.lockup { display: inline-flex; flex-direction: column; align-items: center; gap: 10px; }
.lockup span { font-weight: 400; letter-spacing: .32em; padding-left: .32em; }
.lockup.big img { width: 88px; height: 88px; }
.lockup.big span { font-size: 1.375rem; }
.lockup.small { gap: 6px; }
.lockup.small img { width: 44px; height: 44px; }
.lockup.small span { font-size: 0.875rem; }
.lockup.hero-lockup { display: flex; width: fit-content; gap: 8px; margin-bottom: 20px; }
.lockup.hero-lockup img { width: 64px; height: 64px; }
.lockup.hero-lockup span { font-size: 1.125rem; }

/* Footer */
.site-footer { padding-block: 40px 48px; font-size: 0.9375rem; color: var(--muted); }
.site-footer p { margin: 14px 0 0; }
.site-footer .legal { font-size: 0.8125rem; }
.site-footer a { color: var(--text); }

@media (min-width: 900px) {
  .wrap { padding-inline: 48px; }
  .top { padding-block: 24px; }
  .hero { grid-template-columns: 1.05fr 1fr; align-items: center; gap: 48px; padding-block: 16px 88px; }
  .hero .sub { font-size: 1.25rem; }
  .hero-visual .phone { width: min(70%, 330px); }
  .strip { padding-block: 80px 88px; }
  .story { padding-block: 88px; }
  .story-grid { grid-template-columns: 1fr 1.6fr; gap: 48px; align-items: start; }
  .closing { padding-block: 96px; }
}
/* The five devices fit side by side at real scale (watch ≥ 200 px tall) only from here; below, the strip scrolls. */
@media (min-width: 1280px) {
  .strip .wrap { max-width: 1280px; }
  .shots { overflow: visible; justify-content: center; margin: 0; padding: 8px 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .anim .shot, .caption-row .step, .dots i { transition: none; }
}