/*
  Shared behaviour layer for the marketing site.
  Loaded after each page's inline <style>, so it can refine what is there.

  This file deliberately does NOT restate the design system. The palette, the
  type scale, the radius ladder and the component styles already live in each
  page and already follow it. What was missing was behaviour: a way to
  navigate on a phone, a visible focus ring, and motion that knows when to
  stop. That is what this adds.
*/

/* ------------------------------------------------------------------ a11y */

/* Skip link. The nav is six links before the content on every page, and a
   keyboard or screen-reader user should not have to walk them each time. */
.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 200;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  padding: 10px 16px;
  border-radius: var(--radius-btn);
  transition: top .16s ease;
}
.skip:focus { top: 12px; }

/* A visible focus ring, on the keyboard path only.
   Several interactive elements here are <a> with no border, so the browser
   default was easy to lose against the page. :focus-visible rather than
   :focus so a mouse click does not leave a ring behind. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[popovertarget]:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ----------------------------------------------------------- mobile nav */

/*
  The six nav links were `display:none` below 820px with nothing in their
  place, so on a phone the only way to reach Features, Pricing, FAQ, Import,
  How it helps or Contact was the footer — or guessing the URL. On a product
  sold mainly to phones in India, that is the whole navigation missing.

  Built on the popover API: no JavaScript, and the platform handles focus
  trapping, Escape to close, and light dismiss. Everything degrades to a
  plain visible menu if popover is ever unsupported, which is why the closed
  state is expressed through :popover-open rather than a blanket hide.
*/
.nav-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}
.nav-burger svg { width: 20px; height: 20px; }
.nav-burger:hover { border-color: var(--brand); color: var(--brand); }

#site-menu {
  border: none;
  padding: 0;
  margin: 0;
  inset: auto 0 0 0;
  width: 100%;
  max-width: none;
  background: var(--surface);
  border-top-left-radius: var(--radius-panel);
  border-top-right-radius: var(--radius-panel);
  box-shadow: 0 -18px 48px rgba(2, 6, 24, .18);
  /* A sheet from the bottom, not a drop-down from the top: on a phone the
     thumb is at the bottom of the screen, and the header is not. */
  animation: sheet-in .2s ease both;
}
#site-menu::backdrop {
  background: rgba(2, 6, 24, .45);
}
@keyframes sheet-in {
  from { transform: translateY(12px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.site-menu-inner {
  padding: 10px 20px calc(22px + env(safe-area-inset-bottom));
  display: grid;
  gap: 2px;
}
/* The grabber. Purely a signal that this sheet is dismissible. */
.site-menu-inner::before {
  content: "";
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: var(--line);
  margin: 0 auto 14px;
}
.site-menu-inner a {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: var(--ink);
  padding: 14px 6px;
  border-radius: 10px;
}
.site-menu-inner a:hover { background: var(--brand-50); color: var(--brand); }
.site-menu-inner hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 10px 0;
}
.site-menu-inner .btn { width: 100%; margin-top: 2px; }

@media (max-width: 820px) {
  .nav-burger { display: inline-flex; }
}
@media (min-width: 821px) {
  /* Never let the sheet appear on desktop, even if it is opened by a deep
     link or by resizing while it is open. */
  #site-menu { display: none; }
}

/* ------------------------------------------------- floating WhatsApp button */

/*
  The FAB sat on top of the content. On a 375px screen it covered the right
  edge of the hero card and the last word of any line it landed on. Smaller
  on phones, clear of the home indicator, and the page now ends with enough
  room that it never rests on top of a final line.
*/
.wa {
  z-index: 60;
  bottom: calc(18px + env(safe-area-inset-bottom));
  right: 18px;
}
@media (max-width: 620px) {
  .wa { width: 48px; height: 48px; }
  .wa svg { width: 24px; height: 24px; }
  body { padding-bottom: 76px; }
}

/* --------------------------------------------------------------- motion */

/*
  Scroll-driven reveal, done entirely in CSS — no observer, no JS, and it
  cannot leave content stranded invisible if a script fails to run.

  Double-guarded: @supports so browsers without scroll timelines simply show
  everything, and prefers-reduced-motion so the people who asked for stillness
  get it. Both matter — an animation that ignores the second one is an
  accessibility fault, not a flourish.
*/
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .card,
    .section-head,
    .pill,
    details {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 40%;
    }
    @keyframes rise {
      from { opacity: 0; transform: translateY(14px); }
      to   { opacity: 1; transform: translateY(0); }
    }
  }
}

/* A card should feel liftable. Transform only, so it never reflows. */
.card {
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
@media (hover: hover) {
  .card:hover {
    transform: translateY(-3px);
    border-color: #cbd5e1;
    box-shadow: 0 12px 28px rgba(2, 6, 24, .07);
  }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
}

/* ---------------------------------------------------------- phone rhythm */

/* The hero ran to nearly two full screens before the first real content:
   88px of padding, a 7-line lede and stacked buttons. Tightened on phones
   only — the desktop composition is fine as it is. */
@media (max-width: 620px) {
  .hero { padding: 48px 0 40px; }
  .hero .lede { margin-top: 16px; }
  .hero-cta { margin-top: 26px; gap: 10px; }
  .hero-cta .btn { width: 100%; }
  section { padding: 56px 0; }
  .section-head { margin-bottom: 34px; }
}

/* ------------------------------------------------------- input groups */

/*
  A dialling code welded to the number field, so the two read as one control
  rather than two that happen to be adjacent.

  The code is a <select> rather than free text in the same box: a number typed
  with the country code, without it, or with a 0 in front of it are three
  different strings for one phone, and asking the browser to guess is how you
  end up unable to ring anyone back. India is the default because that is
  where the customers are.
*/
.input-group {
  display: flex;
  align-items: stretch;
}
.input-group > select {
  /* A fixed width, not auto. A select sized to its content takes the width of
     its WIDEST option — "+966 · Saudi Arabia" — which left 34px for the number
     itself. Native selects truncate the closed label, and the dialling code is
     at the front where it survives. */
  flex: 0 0 132px;
  width: 132px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  /* One border between them, not two. */
  margin-right: -1px;
  position: relative;
  z-index: 1;
}
.input-group > input {
  flex: 1 1 auto;
  min-width: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
/* Whichever half has focus comes forward, so the shared edge belongs to it. */
.input-group > :focus {
  position: relative;
  z-index: 2;
}
@media (max-width: 420px) {
  .input-group > select { flex-basis: 116px; width: 116px; }
}

/* ------------------------------------------------------------ page width */

/*
  The Gully page shell, translated from the design system's Tailwind tokens
  into the custom properties this site already uses.

  1440px is the standard desktop design width, so a Figma frame and the built
  page agree on where the edge sits. This site was on 1120px, which is not
  wrong on its own — it just disagreed with every other Gully site, and that
  costs more than the 320px.

  Gutters step 16 / 24 / 32px so a phone gets breathing room without
  surrendering a quarter of a small screen.
*/
:root {
  --container-shell: 1440px;
  /* In `ch`, not pixels: a fixed pixel column only lands correctly at one
     font size. CSS `ch` is the width of "0" — wider than the average
     lowercase letter — so 62ch comes out around 75 real characters. Do not
     "correct" it to 75ch. */
  --container-reading: min(720px, 62ch);
}

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

/*
  The reading measure, and it is not optional. These pages set 15.5px body
  copy in a 760px column, which is about 95 characters a line — past the
  point where the eye reliably finds the start of the next one. This is the
  exact case the design system records from GullyFuture's legal pages.

  Grids, tables and card rows may use the full shell; sentences may not.
*/
.legal {
  max-width: var(--container-reading);
}