/* Localis landing — enhancements on top of the approved design.
   style.css stays identical to docs/design/landing/css/style.css (plus the self-hosted font block);
   every deliberate deviation lives in this file, loaded after it.
   Requested 2026-09-15: numbered pillar cards, section-based navigation offsets,
   entrance and scroll-reveal motion, scroll-to-top button, app description and tab cross-fade. */

:root {
  --orange-text: #BF4000;                        /* orange for small text on cream (4.7:1) */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Anchor targets: keep section titles clear of the sticky header where the section padding is small */
main section[id] { scroll-margin-top: max(0px, calc(var(--header-h) + 16px - clamp(64px, 8vw, 112px))); }
.site-footer[id] { scroll-margin-top: calc(var(--header-h) - 48px); }

main { overflow-x: clip; }

/* Section eyebrow */
.eyebrow {
  margin: 0 0 0.75rem; max-width: none;
  font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--orange-text);
}

/* Three ways: numbered cards (photo · 01 · title · description) */
.pillar h3::before { content: none; }
.pillar-body { padding: 1.75rem 1.75rem 2.25rem; }
@media (min-width: 1000px) { .pillar-body { padding: 2.25rem 2.25rem 2.75rem; } }
.pillar-number {
  display: block; margin-bottom: 1.1rem;
  font-size: clamp(3rem, 4.6vw, 4rem); font-weight: 800; line-height: 0.9; letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums; color: var(--orange);
}
.pillar h3 { font-size: clamp(1.375rem, 1.9vw, 1.625rem); margin-bottom: 0.75rem; }
.pillar p { margin: 0; font-size: 1.0625rem; line-height: 1.6; color: var(--text-2); }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .pillar { transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out); }
  .pillar img { transition: transform 0.8s var(--ease-out); }
  .pillar:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(29, 70, 52, 0.12); }
  .pillar:hover img { transform: scale(1.05); }
}

/* Entrance on load: hero copy line by line, then the phones */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy.fade-up, .hero-visual.fade-up { animation: none; }
  .hero-copy > * { animation: rise-in 0.9s var(--ease-out) both; }
  .hero-copy > :nth-child(2) { animation-delay: 0.1s; }
  .hero-copy > :nth-child(3) { animation-delay: 0.2s; }
  .hero-copy > :nth-child(4) { animation-delay: 0.3s; }
  .hero .phone-ask { animation: phone-rise 1.1s var(--ease-out) 0.2s both; }
  .hero .phone-explore { animation: phone-slide 1.2s var(--ease-out) 0.45s both; }
}
@keyframes rise-in { from { opacity: 0; transform: translate3d(0, 24px, 0); } to { opacity: 1; transform: none; } }
@keyframes phone-rise { from { opacity: 0; transform: translate3d(0, 56px, 0) rotate(-2deg); } to { opacity: 1; transform: none; } }
@keyframes phone-slide { from { opacity: 0; transform: translate3d(64px, 32px, 0) scale(0.9) rotate(3deg); } to { opacity: 1; transform: scale(0.96); } }

/* The app: plain description instead of the bold promise line */
.app-desc {
  margin: 1.5rem 0 0; max-width: 46em;
  font-size: 1.125rem; font-weight: 400; line-height: 1.65;
}
.section-moss .app-desc { color: rgba(241, 243, 232, 0.85); }
@media (max-width: 599px) { .app-desc { font-size: 1rem; } }

/* The app: tabs and phone screens cross-fade. Inactive panels stay rendered but invisible,
   so the new screen fades in over the old one (no blank frame, no image flash). */
@media (prefers-reduced-motion: no-preference) {
  .app-tab { transition: background-color 0.35s var(--ease-out), border-color 0.35s var(--ease-out); }
  .app-tab-desc { transition: color 0.35s var(--ease-out); }
  .phone-demo .app-panel[hidden] {
    display: block; z-index: 1; opacity: 0; visibility: hidden; transform: scale(1.04);
    transition: opacity 0.5s ease 0.15s, transform 0s linear 0.65s, visibility 0s linear 0.65s;
  }
  .phone-demo .app-panel:not([hidden]) {
    z-index: 2; opacity: 1; visibility: visible; transform: none;
    transition: opacity 0.6s var(--ease-out), transform 0.9s var(--ease-out), visibility 0s;
  }
}

/* Scroll reveal (main.js adds these classes only to elements that start below the fold) */
.reveal-pending { opacity: 0; transform: translate3d(0, 40px, 0); }
.reveal-pending[data-reveal="zoom"] { transform: translate3d(0, 24px, 0) scale(0.94); }
.reveal-pending[data-reveal="right"] { transform: translate3d(48px, 0, 0); }
.reveal-pending[data-reveal="left"] { transform: translate3d(-48px, 0, 0); }
@media (max-width: 899px) {
  .reveal-pending[data-reveal="right"], .reveal-pending[data-reveal="left"] { transform: translate3d(0, 40px, 0); }
}
.reveal-run {
  transition: opacity 0.9s var(--ease-out), transform 1s var(--ease-out) !important;
  transition-delay: var(--reveal-delay, 0ms) !important;
  will-change: opacity, transform;
}
@media (prefers-reduced-motion: reduce) {
  .reveal-pending { opacity: 1; transform: none; }
}

/* Hero: app store buttons + Google Play QR, then the Pencil Group line in italics below them */
.store-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 1.75rem; margin-top: 1.75rem; }
/* Official store badges, never recoloured or reshaped. The Google Play artwork carries its own clear space,
   so it is shown taller than the Apple badge to make both read at the same size. */
.store-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; }
.store-badge { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.store-badge img { width: auto; display: block; }
.store-badge-play img { height: 62px; margin-inline-start: -10px; }   /* the PNG's own padding */
.store-badge-apple img { height: 40px; }
a.store-badge { transition: transform 0.25s var(--ease-out), opacity 0.25s ease; }
a.store-badge:hover { transform: translateY(-2px); }
a.store-badge:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; border-radius: 8px; }
.store-badge.is-soon { cursor: default; }
.store-badge.is-soon img { opacity: 0.85; }
.store-soon-tag {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-2); white-space: nowrap;
}

/* The same badges in the footer, smaller, on the dark background */
.footer-stores { margin-top: 1.25rem; gap: 0.4rem 0.75rem; }
.site-footer .store-badge-play img { height: 52px; }
.site-footer .store-badge-apple img { height: 34px; }
.site-footer .store-soon-tag { color: rgba(241, 243, 232, 0.7); }
.store-qr { display: none; }                                   /* pointless on the device you would scan with */
@media (min-width: 900px) {
  .store-qr { display: flex; align-items: center; gap: 0.7rem; }
  .store-qr-item { display: grid; justify-items: center; gap: 0.2rem; margin: 0; }
  .store-qr-item figcaption { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.02em; color: var(--text-2); }
  .store-qr img { width: 88px; height: 88px; border: 1px solid var(--line); border-radius: 10px; background: #fff; padding: 4px; }
  .store-qr-note { max-width: 9em; font-size: 0.8125rem; line-height: 1.35; color: var(--text-2); }
}
.hero-note { font-style: italic; margin-top: 1.5rem; }
@media (prefers-reduced-motion: no-preference) { .hero-copy > :nth-child(5) { animation-delay: 0.4s; } }

/* Menu: a bar under the item (faint on hover, orange for the section in view; main.js sets .is-active + aria-current) */
.site-nav ul a { position: relative; }
.site-nav ul a:hover { text-decoration: none; }
.site-nav ul a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px;
  background: currentColor; opacity: 0.35; transform: scaleX(0); transform-origin: left center;
  transition: transform 0.35s var(--ease-out), opacity 0.25s ease, background-color 0.25s ease;
}
.site-nav ul a:hover::after { transform: scaleX(1); }
.site-nav ul a.is-active { color: var(--moss); }
.site-nav ul a.is-active::after { transform: scaleX(1); opacity: 1; background: var(--orange); }
@media (max-width: 899px) {
  .site-nav ul a::after { left: calc(-1 * var(--gutter)); right: auto; top: 0.5rem; bottom: 0.5rem; width: 3px; height: auto; transform: scaleY(0); transform-origin: center; }
  .site-nav ul a:hover::after { transform: scaleY(0); }
  .site-nav ul a.is-active::after { transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) { .site-nav ul a::after { transition: none; } }

/* Footer: links without underline, regular weight (column titles stay bold); "A company of [Pencil logo]" */
.site-footer { font-weight: 400; }
.site-footer a:not(.btn) { text-decoration: none; transition: color 0.2s ease; }
.site-footer a:not(.btn):hover { color: rgba(241, 243, 232, 0.7); }
.pencil { gap: 0.6rem; }
.pencil:hover span { text-decoration: none; }
.pencil img { transform: translateY(-3px); transition: opacity 0.2s ease; }  /* align the wordmark with the text baseline */
.pencil:hover img { opacity: 0.8; }

/* Cookie notice: hidden in the markup, shown by analytics.js only while the visitor has not decided */
.cookie-banner {
  position: fixed; left: 20px; bottom: 20px; z-index: 50;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem;
  max-width: 34rem; padding: 1rem 1.15rem;
  background: var(--moss-deep); color: var(--cream);
  border-radius: 14px; box-shadow: 0 16px 40px rgba(17, 43, 33, 0.35);
  font-size: 0.9375rem; line-height: 1.5;
}
.cookie-banner[hidden] { display: none; }
.cookie-text { margin: 0; flex: 1 1 16rem; max-width: none; }
.cookie-text a { color: var(--cream); }
.cookie-actions { display: flex; gap: 0.5rem; margin-left: auto; }
.cookie-btn { padding: 0.5rem 1.1rem; font-size: 0.9375rem; }
.cookie-banner .btn-outline { border-color: var(--cream); color: var(--cream); }
.cookie-banner .btn-outline:hover { background: var(--cream); color: var(--moss-deep); }
.cookie-accept { background: var(--cream); color: var(--moss-deep); border: 1.5px solid var(--cream); }
.cookie-accept:hover { background: #fff; }
.cookie-settings {
  background: none; border: 0; padding: 0; font: inherit; color: inherit;
  text-decoration: underline; cursor: pointer;
}
.cookie-settings[hidden] { display: none; }
.dot-sep { margin: 0 0.35rem; opacity: 0.6; }
@media (max-width: 599px) {
  .cookie-banner { left: 12px; right: 12px; bottom: 12px; padding: 0.9rem 1rem; }
  .cookie-actions { width: 100%; margin-left: 0; }
  .cookie-btn { flex: 1; }
}

/* Scroll to top */
.to-top {
  position: fixed; right: 20px; bottom: 20px; z-index: 45;
  display: grid; place-items: center; width: 52px; height: 52px; padding: 0;
  border: 0; border-radius: 50%; background: var(--moss); color: var(--cream); cursor: pointer;
  box-shadow: 0 10px 28px rgba(17, 43, 33, 0.3);
  opacity: 0; visibility: hidden; transform: translate3d(0, 20px, 0) scale(0.8);
  transition: opacity 0.35s var(--ease-out), transform 0.45s var(--ease-out), visibility 0s linear 0.45s, background-color 0.2s ease;
}
.to-top[hidden] { display: none; }
.to-top.is-visible {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity 0.35s var(--ease-out), transform 0.55s var(--ease-spring), visibility 0s, background-color 0.2s ease;
}
.to-top:hover { background: var(--moss-deep); }
.to-top.is-visible:active { transform: scale(0.92); transition-duration: 0.1s; }
.to-top:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 50%; }
.to-top-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.to-top-track, .to-top-progress { fill: none; stroke-width: 3; }
.to-top-track { stroke: rgba(241, 243, 232, 0.2); }
.to-top-progress { stroke: var(--cream); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 0.15s linear; }
.to-top-icon { position: relative; width: 22px; height: 22px; transition: transform 0.3s var(--ease-out); }
@media (hover: hover) { .to-top:hover .to-top-icon { transform: translateY(-3px); } }
@media (min-width: 900px) { .to-top { right: 32px; bottom: 32px; width: 56px; height: 56px; } }
@media (max-width: 899px) { .site-footer { padding-bottom: 96px; } }
@media (prefers-reduced-motion: reduce) {
  .to-top, .to-top.is-visible { transform: none; transition: opacity 0.2s linear, visibility 0s linear 0.2s; }
  .to-top.is-visible { transition: opacity 0.2s linear, visibility 0s; }
}