/* ==========================================================================
   Collsta website — Footer

   Compact and quiet. The Final CTA does the closing; this only signs the page
   and points at the legal pages. No mega-footer, no columns of headings, no
   social row (there are no confirmed Collsta profiles to link, and inventing
   URLs would be worse than omitting them), no hand-drawn store badges.

   ---------------------------------------------------------------------------
   THE LEGAL LINKS DO NOT RESOLVE YET.

   legal/terms-of-use.html, legal/privacy-policy.html, legal/cookie-policy.html,
   legal/account-deletion.html and contact.html are the intended routes, put
   here so the pages have a home. They 404 until those files exist. The copy
   for at least the cookie policy already exists as plain text next to
   index.html; it needs converting to a page before launch.
   ---------------------------------------------------------------------------

   Seam: the footer's own background STARTS at exactly the page colour the
   Final CTA ends on and only then deepens, over 160px, inside its own box. So
   there is no colour step at the boundary and no layer whose edge sits on it —
   the mistake that produced the visible cut at the hero → Save anything
   junction, fixed the same way it was fixed there.
   ========================================================================== */

.ft{
  /* The hover colour sits on --surface-soft, where plain --purple measures
     4.43:1 behind a 13.5px link — just under AA. Same nudge toward navy as
     section 7 uses for the same reason: 5.16:1. */
  --ft-purple:#5C55D3;

  position:relative;
  background:linear-gradient(to bottom,
    var(--surface-page) 0,
    var(--surface-soft) 160px);
  padding-block:clamp(44px,5vw,72px) clamp(28px,3vw,40px);
}
@supports (color:color-mix(in oklab,red,blue)){
  .ft{--ft-purple:color-mix(in oklab,var(--purple) 90%,var(--navy))}
}

.ft__inner{
  display:grid;
  /* brand | links | stores — the three things worth having, on one row. */
  grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr) minmax(0,auto);
  align-items:start;
  gap:clamp(20px,3vw,48px);
}

/* ---- Brand ---- */
.ft__brand{display:flex;flex-direction:column;gap:11px;min-width:0}
.ft__logo{align-self:flex-start;border-radius:var(--radius-md)}
.ft__line{
  font-size:var(--fs-small);
  color:var(--text-meta);
  line-height:1.5;
  max-width:30ch;
}

/* ---- Legal / contact ---- */
.ft__nav{min-width:0}
ul.ft__links{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;
  gap:6px clamp(14px,1.8vw,28px);
}
.ft__link{
  display:inline-flex;align-items:center;
  /* Vertical padding is the touch target, not decoration: 8px either side of
     a 22px line box clears the 44px minimum without spacing the row out. */
  padding:11px 0;
  font-size:13.5px;
  color:var(--text-body);
  border-radius:6px;
  transition:color var(--dur-mid) var(--ease-out);
}
.ft__link:hover{color:var(--ft-purple)}
/* :focus-visible from base.css already draws the ring; this only stops the
   ring hugging the text too tightly on a link with no horizontal padding. */
.ft__link:focus-visible{outline-offset:3px}

/* ---- Store badge slot ---- */
.ft__stores{
  display:flex;
  align-items:center;
  /* A min-height so the row keeps its shape on the day the note is swapped
     for two real badges, and does not jump when they load. */
  min-height:40px;
}
.ft__stores-note{
  font-size:12px;
  color:var(--text-meta);
  white-space:nowrap;
}

/* ---- The badges themselves ----
   Apple's and Google's own artwork, used unmodified — neither company permits
   a redrawn badge, so nothing here restyles the images: no filters, no border
   radius, no recolouring. The rules below only size and space them. */
ul.ft-badges{
  list-style:none;margin:0;padding:0;
  display:flex;align-items:center;
  /* Apple asks for clear space of at least 10% of the badge height around it;
     at a 40px badge that is 4px, so 10px between them is comfortably clear. */
  gap:10px;
}
.ft-badge{
  display:block;
  width:auto;
  height:var(--ft-badge-h,40px);
}
/* Google's asset carries roughly an eighth of its own height as built-in
   padding, so matching the two on raw height renders the Play badge visibly
   smaller than Apple's. Scaling it up by that padding makes the two read as
   the same size — which is also what both guidelines ask for when the badges
   appear together. */
.ft-badge--play{height:calc(var(--ft-badge-h,40px) * 1.18)}

@media (max-width:640px){
  .ft__stores{--ft-badge-h:44px}
  ul.ft-badges{flex-wrap:wrap}
}

/* ---- Copyright ---- */
.ft__legal{
  grid-column:1 / -1;
  margin-top:clamp(18px,2.4vw,34px);
  padding-top:clamp(16px,2vw,24px);
  /* A hairline that fades out at both ends rather than a full-width rule —
     a hard line across the page would reintroduce exactly the kind of edge
     this section is trying not to have. */
  border-top:1px solid transparent;
  border-image:linear-gradient(to right,
    rgba(184,171,242,0) 0%,
    rgba(184,171,242,.5) 22%,
    rgba(184,171,242,.5) 78%,
    rgba(184,171,242,0) 100%) 1;
  font-size:12.5px;
  color:var(--text-meta);
}

/* ==========================================================================
   Breakpoints
   ========================================================================== */
@media (max-width:900px){
  .ft__inner{
    grid-template-columns:minmax(0,1fr) minmax(0,auto);
    gap:22px clamp(16px,3vw,32px);
  }
  .ft__stores{grid-column:1 / -1}
}

/* One column, one link per row. Two or three columns of legal links on a
   phone is the classic footer mistake: the targets get narrow and the labels
   wrap mid-phrase. */
@media (max-width:640px){
  .ft__inner{grid-template-columns:minmax(0,1fr);gap:20px}
  ul.ft__links{
    flex-direction:column;
    gap:0;
  }
  .ft__link{
    padding:13px 0;
    width:100%;
    font-size:14.5px;
  }
  .ft__stores{grid-column:auto}
  .ft__legal{margin-top:6px}
}