/* ============================================================
   go.fico.work — the link-in-bio page.

   Self-contained, like site.css and for the same reason: it is
   served to a different host, from a different layout, with a
   browser floor two steps below the member app's. It shares
   site.css's tokens by repeating them, not by importing them.

   The design is the marketing site's, not the standalone page
   this replaces: the room's palette (terracotta / navy / sage /
   cream), Fraunces over Nunito, the "co" device, and the woven
   wave band. A visitor arriving here from Instagram and then
   tapping through to ficoworking.com should not feel they
   changed companies.

   The one thing carried over from the old page is the shape:
   avatar, name, one line of what this is, a stack of links.
   That is what a link-in-bio page is for.
   ============================================================ */

/* Self-hosted, same subsets the marketing site uses. No
   fonts.googleapis.com: it was render-blocking, cost two extra
   connections, and would have needed a CSP widening. */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fraunces-600-latin-0d8f5528.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fraunces-600-latin-ext-403ba3b5.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fraunces-600-italic-latin-387e982c.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fraunces-600-italic-latin-ext-714271ef.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("/assets/nunito-latin-a6de09cc.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("/assets/nunito-latin-ext-6e74a3a2.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* The room's palette, matching site.css value for value. Hex
   rather than oklch: the floor here goes down to Safari 12. */
:root {
  --terracotta: #b0472a;
  --terracotta-deep: #8f3620;
  --terracotta-lift: #e8895f;
  --navy: #0e3a56;
  --navy-deep: #092838;
  --sage: #8fa98c;
  --sage-pale: #c3d2bd;
  --cream: #fffaf2;
  --sand: #e8dccb;
  --ink: #2a2622;
  --ink-soft: #685e54;

  --display: "Fraunces", Georgia, serif;
  --body: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --edge: min(7vw, 2.5rem);
  --column: 26rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

/* Navy ground. The site's hero is navy-scrimmed photography and
   its footer is navy; this page is one screen, so it takes the
   register directly rather than staging a transition into it.
   Cream would have made it a marketing page with no content. */
body {
  margin: 0;
  min-height: 100svh;
  /* --navy, not --navy-deep: this is the same ground the marketing site's
     community band uses, and that band is where the site puts its own social
     links. Same surface, same chips. */
  background: var(--navy);
  color: var(--cream);
  font-family: var(--body);
  font-weight: 325;
  line-height: 1.65;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -.025em;
  margin: 0;
  font-variation-settings: "opsz" 100;
  text-wrap: balance;
}

::selection { background: var(--terracotta); color: var(--cream); }

/* The "co" device, exactly as the site sets it: the motto's
   first two words share the FICO prefix, so it is marked
   wherever it appears. "events" has no prefix and carries the
   device on the whole word instead. */
.co {
  color: var(--terracotta-lift);
  font-style: italic;
  font-variation-settings: "opsz" 144;
}

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

.page {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Inline padding is on .column instead, so the closing weave and the footer
     can reach both edges. */
  padding: clamp(3rem, 9vh, 5rem) 0 0;
}

.column {
  padding-inline: var(--edge);
}

.column {
  width: 100%;
  max-width: var(--column);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ---------- identity ---------- */

.logo {
  width: 148px;
  height: auto;
}

/* The motto, stacked the way the site's hero stacks it. This is
   the h1: it says what FICO is, which is the job of the one
   heading on a page whose body is a list of links. */
.motto {
  margin-top: 1.75rem;
  font-size: clamp(2rem, 1.5rem + 4vw, 2.9rem);
  text-align: center;
  letter-spacing: -.03em;
}
.motto span { display: block; }
.motto .events {
  color: var(--terracotta-lift);
  font-style: italic;
  font-variation-settings: "opsz" 144;
}

.lede {
  margin: 1.1rem 0 0;
  text-align: center;
  font-size: .95rem;
  line-height: 1.55;
  color: rgba(255, 250, 242, .72);
  text-wrap: pretty;
}

/* ---------- links ---------- */

.links {
  width: 100%;
  margin: clamp(1.75rem, 5vh, 2.5rem) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .7rem;
}

/* The marketing site's own `.chip` — what it uses for its social links on
   the community band. Sentence case at weight 500, not the uppercase
   letter-spaced treatment its *buttons* get: these are links, and the site
   is careful about the difference. Copied value for value from site.css so
   the two surfaces are visibly the same component. */
.link {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .7rem 1.15rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 250, 242, .3);
  color: var(--cream);
  text-decoration: none;
  font-size: .88rem;
  font-weight: 500;
  transition: background .25s, border-color .25s, transform .2s;
}
.link:hover {
  background: rgba(255, 250, 242, .12);
  border-color: transparent;
  transform: translateY(-2px);
}
.link:active { transform: translateY(0); transition-duration: .08s; }

.link:focus-visible,
.footer a:focus-visible {
  outline: 3px solid var(--terracotta-lift);
  outline-offset: 3px;
  border-radius: 999px;
}

/* Bare, at the size and stroke the site's chips use — no disc behind them.
   The disc was carried over from the page this replaces; the site draws its
   chip icons directly on the ground, and that is quieter. */
.link svg,
.link img {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  transition: transform .25s cubic-bezier(.2, .8, .3, 1);
}
/* The brand marks are full-colour tiles with their own square corners, so
   they get the same rounding their app icons have — otherwise Instagram's
   gradient sits as a hard square among round-ended strokes. */
.link img { border-radius: 5px; }
.link:hover svg,
.link:hover img { transform: scale(1.1); }

/* ---------- the woven bands ---------- */

/* The marketing site's signature motif — three waves rolling in like the
   shore break at Las Canteras — bracketing the page top and bottom.
   Full-bleed, so the column reads as sitting inside them.

   Still, deliberately. An earlier pass had the crests drifting sideways on a
   loop; on a page that barely scrolls, the band is on screen the whole visit
   and constant motion in the periphery is wearing rather than alive. The site
   draws these still, and so does this. */
.weave-band { width: 100vw; overflow: hidden; line-height: 0; }

/* No background here: Kit::Weave sets its own, naming whichever ground ends
   up visually on top (which `flip` swaps). A colour set here would fight it
   and show as a hairline along one edge. */
.weave-band svg { display: block; width: 100%; }

/* The bottom band and the footer under it are pushed to the bottom of the
   viewport together: this auto margin is the only one in the column, so it
   absorbs all the free space. On a short screen the pair sits below the
   links; on a tall one it sits on the bottom edge, either way with the band
   immediately above the footer rather than adrift. */
.weave-foot { margin-top: auto; padding-top: clamp(2rem, 7vh, 3.5rem); }

/* ---------- the app block ---------- */

/* The page's primary action, and the only place terracotta appears. It used
   to be a "Book your desk" pill pointing at the web app, which meant the
   loudest thing on the page sent people to a browser — the opposite of what
   this page is for. */
.app-cta {
  width: 100%;
  margin-top: clamp(1.75rem, 5vh, 2.5rem);
  padding: 1.15rem 1.15rem 1rem;
  border-radius: 1.25rem;
  background: rgba(176, 71, 42, .14);
  border: 1px solid rgba(232, 137, 95, .38);
  text-align: center;
  /* Clips the sweep below to the block's own corners. */
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* A light crossing the block every few seconds — the one moving thing on the
   page that points at something rather than decorating. The gap between
   passes is long enough that it reads as a highlight catching, not a loading
   bar. */
.app-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    100deg,
    transparent 35%,
    rgba(255, 255, 255, .13) 50%,
    transparent 65%
  );
  transform: translateX(-100%);
  animation: sweep 6s cubic-bezier(.4, 0, .2, 1) 2s infinite;
}
@keyframes sweep {
  0%        { transform: translateX(-100%); }
  22%, 100% { transform: translateX(100%); }
}

.app-cta-label {
  margin: 0 0 .8rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--cream);
}

.app-cta-note {
  margin: .85rem 0 0;
  font-size: .78rem;
  line-height: 1.45;
  color: rgba(255, 250, 242, .62);
}

/* ---------- store badges ---------- */

/* Side by side, sharing the row's width. Below 340px they stack rather than
   squeeze the wordmarks. */
.stores {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
  width: 100%;
}
@media (max-width: 340px) {
  .stores { grid-template-columns: 1fr; }
}

/* The same pill as a chip, so the row reads as one set — but carrying a
   two-line lockup instead of a single label. */
/* Solid cream, not the chips' outline: inside the terracotta block these are
   the buttons, and an outlined badge on a tinted ground reads as disabled. */
.store {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .6rem .8rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--cream);
  color: var(--navy-deep);
  text-decoration: none;
  transition: background .25s, transform .2s;
}
.store:hover {
  background: #fff;
  transform: translateY(-2px);
}
.store:active { transform: translateY(0); transition-duration: .08s; }
.store:focus-visible {
  outline: 3px solid var(--terracotta-lift);
  outline-offset: 3px;
}

.store svg,
.store img {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
}
/* No rounding here, unlike the chips: Apple ships its mark as a rounded tile
   and Google ships a bare glyph, so a radius would clip Apple's own corners
   and do nothing for Google's triangle. The asymmetry is the vendors', not
   ours. */

.store-copy { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }

/* The qualifying line both vendors require above the wordmark. Small and
   quiet: it is a legal necessity, not information anyone reads. */
.store-eyebrow {
  font-size: .55rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: rgba(42, 38, 34, .6);
  /* One line, always: wrapped, the qualifier pushes the wordmark down and
     the two badges stop sharing a baseline. */
  white-space: nowrap;
}

.store-wordmark {
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: -.01em;
  white-space: nowrap;
}

/* ---------- footer ---------- */

.footer {
  width: 100vw;
  /* No margin-top:auto here — .weave-foot already carries it. Two auto
     margins in one flex column means only the first absorbs the free space,
     which is what left the weave floating mid-page on a short viewport
     instead of the pair sitting on the bottom together. */
  padding: 1.75rem var(--edge) 2rem;
  /* A step darker than the body, the way the site's footer sits below its
     navy band. A hairline would do less work at this size. */
  background: var(--navy-deep);
  text-align: center;
  font-size: .74rem;
  line-height: 1.7;
  color: rgba(255, 250, 242, .55);
}
.footer-brand {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -.02em;
  color: var(--cream);
  margin-bottom: .3rem;
}
.footer-address { display: block; font-style: normal; }
.footer a { text-decoration: none; border-bottom: 1px solid rgba(255, 250, 242, .25); }
.footer a:hover { color: var(--cream); border-bottom-color: currentColor; }

/* ---------- entrance ---------- */

/* One quiet rise, staggered down the page. The old page had a
   drifting-blob, floating-spore, scanning-line arrangement; this
   system doesn't do that, and the restraint is the point. */
.rise {
  opacity: 0;
  transform: translateY(14px) scale(.985);
  animation: rise .75s cubic-bezier(.16, 1, .3, 1) forwards;
}
@keyframes rise {
  to { opacity: 1; transform: none; }
}

/* ---------- skip link ---------- */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  background: var(--cream);
  color: var(--navy-deep);
  padding: .7rem 1.1rem;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 600;
  text-decoration: none;
}
.skip:focus { left: var(--edge); top: .75rem; }

/* Everything that moves here is decoration on top of a page that
   reads fine still. */
@media (prefers-reduced-motion: reduce) {
  .rise { animation: none; opacity: 1; transform: none; }
  .link { transition: none; }
  .link:hover, .link:active { transform: none; }
  .link svg, .link img { transition: none; }
  .link:hover svg, .link:hover img { transform: none; }
  /* Removed outright rather than paused: a stalled highlight sitting across
     the block looks like a rendering fault. The weave needs no rule — it does
     not move. */
  .app-cta::after { display: none; }
}