/* FirstLast — layout and components. Tokens (colour, type, spacing) come from theme.json.
   One bold moment (the hero's address bar over a three.js scene); everything else quiet. */

:root {
  --fl-ink: var(--wp--preset--color--ink, #202124);
  --fl-grey: var(--wp--preset--color--grey, #5F6368);
  --fl-line: var(--wp--preset--color--line, #DADCE0);
  --fl-mist: var(--wp--preset--color--mist, #F8F9FA);
  --fl-blue: var(--wp--preset--color--blue, #1A73E8);
  --fl-yellow: var(--wp--preset--color--yellow, #FBBC04);
  --fl-coral: var(--wp--preset--color--coral, #EA4335);
  --fl-green: var(--wp--preset--color--green, #34A853);
  --fl-section: var(--wp--preset--spacing--60, 8rem);
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
:where(a, button, input, summary):focus-visible { outline: 3px solid var(--fl-blue); outline-offset: 3px; border-radius: 8px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Header */
.fl-header { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.86); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); border-bottom: 1px solid rgba(218,220,224,.6); }
.fl-header__bar { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 1.1rem; }
.fl-header__logo img { display: block; height: 38px; width: auto; }
.fl-header__nav { display: flex; gap: clamp(1rem, 3vw, 2.25rem); }
.fl-header__nav a { color: var(--fl-ink); text-decoration: none; font-size: 1rem; }
.fl-header__nav a:hover { color: var(--fl-blue); }
@media (max-width: 640px) { .fl-header__nav a:not(:last-child) { display: none; } .fl-header__logo img { height: 32px; } }

/* Hero */
/* WordPress puts its block gap between the header and <main>; the hero should start right under the header. */
.wp-site-blocks > main { margin-block-start: 0; }
/* The hero fills the first screen below the header. Three rows (1fr / auto / 1fr) put the address
   bar exactly in the middle: headline and lead sit on top of it, the live preview hangs below. */
.fl-hero { position: relative; overflow: hidden; display: grid; min-height: calc(100svh - 63px); padding-block: clamp(1.5rem, 4vh, 3rem); text-align: center; isolation: isolate; }
.fl-hero .fl-hero__inner { display: grid; grid-template-rows: 1fr auto 1fr; width: 100%; max-width: 1040px; margin: 0 auto; }
.fl-hero__top { align-self: end; padding-bottom: clamp(1.5rem, 4.5vh, 3.25rem); }
.fl-hero .fl-find { grid-row: 2 / span 2; display: grid; grid-template-rows: subgrid; width: 100%; max-width: 820px; margin: 0 auto; }
.fl-find__after { align-self: start; }
.fl-hero .fl-hero__scene { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; margin: 0; z-index: -1; opacity: 0; transition: opacity 1.2s ease; }
.fl-hero__scene.is-ready { opacity: 1; }
.fl-hero__title { margin: 0; font-size: clamp(2.75rem, 1.2rem + 5.2vw, 6.25rem); font-weight: 500; letter-spacing: -0.045em; line-height: 1; text-wrap: balance; }
.fl-hero__title, .fl-hero__lead, .fl-find__preview, .fl-find__result { text-shadow: 0 0 18px #fff, 0 0 8px #fff; }
.fl-hero__lead { margin: clamp(1rem, 2.4vh, 1.75rem) auto 0; max-width: 34ch; color: var(--fl-grey); font-size: var(--wp--preset--font-size--lead); line-height: 1.45; }

/* The address bar */
.fl-find__bar { display: flex; align-items: center; gap: .9rem; padding: .55rem .55rem .55rem 1.5rem; background: #fff; border: 2px solid var(--fl-line); border-radius: 999px; box-shadow: 0 24px 60px -28px rgba(26,115,232,.35); transition: border-color .2s ease, box-shadow .2s ease; }
.fl-find__bar:focus-within { border-color: var(--fl-blue); box-shadow: 0 24px 70px -24px rgba(26,115,232,.5); }
.fl-find__globe { flex: none; width: 34px; height: 34px; color: var(--fl-yellow); }
.fl-find__field { flex: 1; min-width: 0; }
.fl-find__field input { width: 100%; border: 0; outline: 0; background: transparent; font: inherit; font-size: clamp(1.25rem, 1rem + 1.2vw, 1.875rem); font-weight: 500; color: var(--fl-ink); padding: .7rem 0; }
.fl-find__field input::placeholder { color: #9AA0A6; font-weight: 400; }
.fl-find__field input:focus-visible { outline: none; }
.fl-find__go { flex: none; border: 0; border-radius: 999px; background: var(--fl-blue); color: #fff; font: inherit; font-weight: 500; font-size: 1.125rem; padding: 1rem 1.6rem; cursor: pointer; transition: background .15s ease; }
.fl-find__go:hover { background: #1765CC; }
.fl-find__preview { margin: clamp(.75rem, 2vh, 1.5rem) 0 0; font-size: clamp(1.5rem, 1rem + 2.2vw, 2.75rem); letter-spacing: -0.03em; color: var(--fl-ink); min-height: 1.2em; overflow-wrap: anywhere; }
.fl-find__preview b { font-weight: 700; }
.fl-find__preview span { font-weight: 300; color: var(--fl-grey); }
.fl-find__preview.is-placeholder { color: #BDC1C6; }
.fl-find__preview.is-placeholder span { color: #BDC1C6; }
.fl-find__result { margin: 1rem auto 0; max-width: 46ch; min-height: 1.6em; color: var(--fl-grey); font-size: 1.125rem; }
.fl-find__result a { font-weight: 500; }
@media (max-width: 640px) {
  .fl-find__bar { flex-wrap: wrap; border-radius: 28px; padding: .75rem; gap: .5rem; }
  .fl-find__globe { margin-left: .5rem; width: 28px; height: 28px; }
  .fl-find__go { width: 100%; }
}

/* Sections share one vertical rhythm */
.fl-people, .fl-steps, .fl-available, .fl-trust, .fl-faq { padding-block: var(--fl-section); }
.fl-people h2, .fl-steps h2, .fl-available h2, .fl-trust h2, .fl-faq h2 { margin: 0 0 clamp(2.5rem, 2rem + 3vw, 4.5rem); max-width: 20ch; }
.fl-people h2 { margin-inline: auto; text-wrap: balance; }
/* Wide sections: the heading spans the same width as the content below it, so their left edges line up. */
.fl-steps h2, .fl-available h2 { max-width: 1180px; margin-inline: auto; }

/* Portraits */
.fl-people__grid { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.5rem, 1rem + 3vw, 4rem); max-width: 1180px; }
.fl-person { text-align: center; }
.fl-person img, .fl-person svg { display: block; width: 100%; max-width: 240px; height: auto; margin: 0 auto 1.25rem; }
.fl-person span { color: var(--fl-grey); font-size: 1.125rem; }
/* Heading words in solid logo colours (deeper shades, readable on white) with a matching underline.
   blink.js holds the underlines back (.is-waiting) until the heading scrolls into view, then they
   draw in one after another. Without JS, or with reduced motion, they are simply there. */
.fl-mark { --c: var(--fl-blue); color: var(--c); background: linear-gradient(var(--c), var(--c)) 0 100% / 100% .09em no-repeat; padding-bottom: .04em; transition: background-size .55s cubic-bezier(.3, .7, .3, 1); }
.fl-mark--red { --c: #D93025; }
.fl-mark--blue { --c: #1A73E8; transition-delay: .35s; }
.fl-mark--green { --c: #188038; transition-delay: .7s; }
.is-waiting .fl-mark { background-size: 0 .09em; }
.fl-people__cta { margin: clamp(2.5rem, 2rem + 3vw, 4.5rem) 0 0; text-align: center; }
.fl-button { display: inline-block; border-radius: 999px; background: var(--fl-blue); color: #fff; font-weight: 500; font-size: 1.125rem; padding: 1rem 1.9rem; text-decoration: none; transition: background .15s ease; }
.fl-button:hover, .fl-button:focus-visible { background: #1765CC; color: #fff; }
.fl-find { scroll-margin-top: 8rem; }
@media (max-width: 780px) { .fl-people__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Steps — a real sequence, so numbered */
.fl-steps { background: var(--fl-mist); }
.fl-steps__list { list-style: none; counter-reset: step; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 1rem + 4vw, 5rem); max-width: 1180px; }
.fl-steps__list li { counter-increment: step; }
.fl-steps__list li::before { content: counter(step); display: grid; place-items: center; width: 3.25rem; height: 3.25rem; margin-bottom: 1.75rem; border-radius: 50%; font-weight: 600; font-size: 1.25rem; color: #fff; background: var(--fl-blue); }
.fl-steps__list li:nth-child(2)::before { background: var(--fl-yellow); color: var(--fl-ink); }
.fl-steps__list li:nth-child(3)::before { background: var(--fl-coral); }
.fl-steps__list h3 { margin: 0 0 .75rem; font-size: 1.625rem; font-weight: 500; }
.fl-steps__list p { margin: 0; color: var(--fl-grey); max-width: 32ch; }
@media (max-width: 860px) { .fl-steps__list { grid-template-columns: 1fr; } }

/* Names — little address bars */
.fl-names { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 1rem; max-width: 1180px; }
.fl-name a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.25rem 1.1rem 1.6rem; border: 2px solid var(--fl-line); border-radius: 999px; color: var(--fl-ink); text-decoration: none; transition: border-color .15s ease; }
.fl-name a:hover { border-color: var(--fl-blue); text-decoration: none; }
.fl-name__domain { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.fl-name__meta { flex: none; color: var(--fl-grey); }
.fl-name.is-pending .fl-name__domain { color: var(--fl-grey); }
.fl-empty { color: var(--fl-grey); font-size: var(--wp--preset--font-size--lead); }
.fl-available .fl-empty { max-width: 1180px; margin-inline: auto; }
.fl-available .fl-empty p { max-width: 46ch; margin: 0; }

/* Trust */
.fl-trust { text-align: left; }
.fl-trust__art { display: flex; margin-bottom: 2.5rem; }
.fl-trust__art img, .fl-trust__art svg { width: 120px; height: 120px; border-radius: 50%; }
.fl-trust__art > :nth-child(2) { margin-left: -28px; }
.fl-trust p { max-width: var(--wp--style--global--content-size, 720px); }
.fl-trust p:not(.has-lead-font-size) { color: var(--fl-grey); }

/* Questions */
.fl-faq .wp-block-details { border-top: 1px solid var(--fl-line); padding-block: 1.6rem; margin: 0; }
.fl-faq .wp-block-details:last-of-type { border-bottom: 1px solid var(--fl-line); }
.fl-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1.5rem; font-size: 1.375rem; font-weight: 500; letter-spacing: -0.015em; }
.fl-faq summary::-webkit-details-marker { display: none; }
.fl-faq summary::after { content: ""; flex: none; width: 1.1rem; height: 1.1rem; margin-top: .35rem; background: linear-gradient(var(--fl-blue), var(--fl-blue)) center/100% 2.5px no-repeat, linear-gradient(var(--fl-blue), var(--fl-blue)) center/2.5px 100% no-repeat; transition: transform .2s ease; }
.fl-faq details[open] summary::after { transform: rotate(45deg); }
.fl-faq details p { margin: 1rem 0 0; color: var(--fl-grey); max-width: 60ch; }

/* Plain pages (terms, privacy, how it works, contact) */
.fl-page { padding-block: clamp(4rem, 3rem + 5vw, 8rem) var(--fl-section); }
.fl-page__title { font-size: var(--wp--preset--font-size--title) !important; margin-bottom: 2.5rem; }
.fl-page h2 { font-size: 1.75rem; margin-top: 3rem; }
.fl-page p, .fl-page li { color: #3C4043; }

/* Footer */
.fl-footer { background: var(--fl-mist); border-top: 1px solid var(--fl-line); padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem); }
.fl-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2.5rem; align-items: start; }
.fl-footer__grid img { display: block; width: min(300px, 100%); height: auto; }
.fl-footer__grid nav, .fl-footer__grid > div:last-child { display: flex; flex-direction: column; gap: .7rem; }
.fl-footer__grid a { color: var(--fl-ink); text-decoration: none; }
.fl-footer__grid a:hover { color: var(--fl-blue); }
.fl-footer__small { margin: 1.25rem 0 0; color: var(--fl-grey); font-size: 1rem; line-height: 1.6; }
.fl-footer__small a { color: inherit; }
@media (max-width: 780px) { .fl-footer__grid { grid-template-columns: 1fr; } }

/* Portrait blink (blink.js inlines the SVG and toggles .is-blinking) */
.fl-eye { transform-box: fill-box; transform-origin: center; transition: transform 90ms ease; }
.is-blinking .fl-eye { transform: scaleY(.12); }

/* Dark mode: follows the system setting (prefers-color-scheme). Google's dark-surface palette:
   the theme.json presets are swapped here, so everything built on them follows; the few literal
   colours above get their dark twins below. Accents are the lighter tints, readable on #202124.
   html:root outranks the :root block WordPress prints for the presets, wherever it lands. */
@media (prefers-color-scheme: dark) {
  html:root {
    color-scheme: dark;
    --wp--preset--color--paper: #202124;
    --wp--preset--color--mist: #292A2D;
    --wp--preset--color--line: #3C4043;
    --wp--preset--color--grey: #9AA0A6;
    --wp--preset--color--ink: #E8EAED;
    --wp--preset--color--blue: #8AB4F8;
    --wp--preset--color--yellow: #FDD663;
    --wp--preset--color--coral: #F28B82;
    --wp--preset--color--green: #81C995;
    --fl-surface: #303134;
  }
  .fl-header { background: rgba(32,33,36,.86); border-bottom-color: rgba(95,99,104,.5); }
  .fl-hero__title, .fl-hero__lead, .fl-find__preview, .fl-find__result { text-shadow: 0 0 18px #202124, 0 0 8px #202124; }
  .fl-find__bar { background: var(--fl-surface); border-color: #5F6368; box-shadow: 0 24px 60px -28px rgba(138,180,248,.25); }
  .fl-find__bar:focus-within { box-shadow: 0 24px 70px -24px rgba(138,180,248,.4); }
  .fl-find__field input::placeholder { color: #80868B; }
  .fl-find__preview.is-placeholder, .fl-find__preview.is-placeholder span { color: #5F6368; }
  /* Light-blue buttons take dark text, as in Google's dark theme. */
  .fl-find__go, .fl-button, .fl-button:hover, .fl-button:focus-visible { color: #202124; }
  .fl-find__go:hover, .fl-button:hover, .fl-button:focus-visible { background: #AECBFA; }
  .fl-mark--red { --c: #F28B82; }
  .fl-mark--blue { --c: #8AB4F8; }
  .fl-mark--green { --c: #81C995; }
  .fl-steps__list li::before { color: #202124; }
  .fl-page p, .fl-page li { color: #BDC1C6; }
}