/* The public site: one screen built around the petal ring from the Direction 2 film. The ring
   fills the window behind everything (landing-layout.js draws it). The text sits centred in its
   dark core: the company line as the headline, one sentence and one button to the waitlist, all in
   white. An announcement bar, a slim header and a
   footer sit over the ring's dark outer blades. Loaded after home.css, whose tokens, faces and
   metal pill it reuses. Phones (upright or turned), tablets and very wide screens each get their
   own sizes below; a window too short even for those scrolls rather than clips. */

/* The technical voice for the company line, the actions and the announcement: Space Mono, a
   geometric mono with its own character. */
@font-face {
  font-family: "Avartha Mono";
  src: url("/assets/shared/fonts/space-mono-normal-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

.lp-page {
  --lp-mono: "Avartha Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --lp-pad: clamp(20px, 4vw, 56px);
  /* The headline: 5.4vw from 1280 px up, easing to a larger share on tablets (54 px at 768). */
  --lp-title: clamp(40px, min(max(5.4vw, 2.99vw + 30.8px), 8.6svh), 132px);
  --lp-lede: clamp(17px, 0.5vw + 11.8px, 28px);
  /* Chrome and labels grow with the window past a laptop, on through very large screens: 15 px at
     1440 to 21 px at 3700 for the bar and the navigation, 16 px to 22 px for the company line and
     the actions. */
  --lp-ui: clamp(15px, 0.268vw + 11.14px, 21px);
  --lp-label: clamp(16px, 0.268vw + 12.14px, 22px);
  --lp-dim: rgb(248 245 231 / .7);
  --lp-quiet: rgb(248 245 231 / .5);
  --lp-ring: max(min(43vw, 78svh), min(41svh, 110vw));
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  min-height: 100svh;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
.lp-page :is(p, h1) { max-width: none; margin: 0; }
.lp-page a { border-bottom: 0; box-shadow: none; -webkit-tap-highlight-color: transparent; }

/* ---------- The ring ----------
   A black stage under the page. The canvas fades in with the film's close; until the script runs
   it is empty. Without WebGL the stage shows a still of the last frame, centred and sized as the
   live ring would be. Gradients at the top and bottom keep the header and footer readable. */
.lp-stage { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: #000; pointer-events: none; }
.lp-ring { display: block; width: 100%; height: 100%; }
.lp-stage::before {
  content: ""; position: absolute; inset: 0; opacity: 0;
  background: url("/assets/shared/landing/ring-still.jpg") 50% 50% / calc(var(--lp-ring) * 3) auto no-repeat #000;
  animation: lp-fade .8s ease 1.5s both;
}
.lp-stage.is-live::before { display: none; }
.lp-stage.is-still::before { animation: none; opacity: 1; }
.lp-stage::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgb(0 0 0 / .85), rgb(0 0 0 / .62) 96px, rgb(0 0 0 / 0) 180px) top / 100% 180px no-repeat,
    linear-gradient(0deg, rgb(0 0 0 / .85), rgb(0 0 0 / .6) 70px, rgb(0 0 0 / 0) 150px) bottom / 100% 150px no-repeat;
}

/* ---------- Announcement ----------
   A flat champagne strip across the top, as prominent as Fireworks' news bar: the news in the
   mono, then "Read the Blog" and an arrow. The whole strip is the link. */
.lp-news { position: relative; z-index: 1; background: var(--memo-deco-mid); color: #0b0a09; }
.lp-news a { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: clamp(52px, 1.07vw + 36.6px, 76px); padding: 6px var(--lp-pad); color: inherit; font: 400 var(--lp-ui)/1.3 var(--lp-mono); text-align: center; text-decoration: none; }
.lp-news .lp-arrow { width: 1.2em; height: 1.2em; }
/* The mono face sets ³ alone in a full-width cell; draw it in against the τ, as in τ³-Voice. */
.lp-news-sup { margin-inline: -.2em -.12em; }
.lp-news-cta { display: inline-flex; align-items: center; gap: 14px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; }
.lp-news-cta::before { content: ""; width: 1px; height: 1.1em; background: rgb(11 10 9 / .35); }
.lp-news a:hover .lp-arrow { transform: translateX(3px); }
.lp-news a:focus-visible { outline: 2px solid #0b0a09; outline-offset: -4px; }

/* ---------- Header ---------- */
.lp-top { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(16px, 2.6svh, 30px) var(--lp-pad) 0; }
.lp-brand { display: inline-flex; align-items: center; min-height: 44px; padding: 4px 0; }
.lp-brand img { display: block; width: clamp(150px, 4.46vw + 85.7px, 250px); height: auto; filter: drop-shadow(0 1px 10px rgb(0 0 0 / .6)); }
.lp-top nav { display: flex; align-items: center; gap: 0 clamp(20px, 2.4vw, 40px); }
.lp-top nav a, .lp-foot a { display: inline-flex; align-items: center; min-height: 44px; color: var(--lp-dim); font-size: 14px; text-decoration: none; transition: color .2s; }
.lp-top nav a { min-height: 48px; color: rgb(248 245 231 / .86); font: 400 var(--lp-ui)/1 var(--lp-mono); letter-spacing: .06em; text-transform: uppercase; }
.lp-top nav a:hover, .lp-foot a:hover { color: var(--home-fg); }

/* ---------- Hero ----------
   Centred in the ring's core, as the film centres its lockup. */
.lp { display: grid; place-items: center; padding: clamp(16px, 3svh, 40px) var(--lp-pad); }
.lp-hero { display: flex; flex-direction: column; align-items: center; max-width: max(1080px, 13.2 * var(--lp-title)); text-align: center; text-shadow: 0 0 28px rgb(0 0 0 / .55); }
/* One line on wider screens; on phones it breaks after "Realtime". */
.lp-title { margin-top: 0 !important; color: #fff; font: 400 var(--lp-title)/1.06 var(--home-serif); letter-spacing: -.015em; }
@media (min-width: 761px) { .lp-title { white-space: nowrap; } }
.lp-lede { max-width: 34em !important; margin-top: clamp(18px, 3svh, 32px) !important; color: #fff; font-size: var(--lp-lede); line-height: 1.5; text-wrap: balance; }
.lp-nb { white-space: nowrap; } /* kept whole: hyphenated words, and each half of the headline on phones */
/* On wider screens the sentence breaks only before its last clause. */
@media (min-width: 761px) { .lp-keep { white-space: nowrap; } }
.lp-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 36px; margin-top: clamp(28px, 5.2svh, 56px); text-shadow: none; }
/* The button: the sign-in's semibold sans in sentence case, on a pill with a soft glow and a fine
   highlight along its top edge. 60 px tall at 1440 px, growing with very wide screens; phones get
   their own smaller size below. */
.lp-page .lp-cta {
  display: inline-flex; align-items: center; gap: .7em; min-height: clamp(56px, 0.9vw + 47px, 80px); padding: 0 1.6em 0 1.85em;
  font: 600 var(--lp-label)/1 var(--sans); letter-spacing: .01em; text-decoration: none;
  box-shadow: 0 0 22px rgb(217 203 168 / .18), inset 0 1px 0 rgb(255 255 255 / .55);
}
.lp-page .lp-cta .lp-arrow { width: 1.05em; height: 1.05em; }
.lp-arrow { flex: none; width: 1.15em; height: 1.15em; transition: transform .25s cubic-bezier(.2, .7, .2, 1); }
.lp-cta:hover .lp-arrow { transform: translateX(3px); }

/* ---------- Footer ----------
   The social marks at the far left, the company and the trust center at the far right, all in
   capitals in the mono. The marks are each drawn to a tight box and sized to read as equals. */
.lp-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 32px; padding: 0 var(--lp-pad) clamp(8px, 1.6svh, 18px); color: rgb(248 245 231 / .6); font: 400 clamp(12px, 0.179vw + 10.4px, 17px)/1.3 var(--lp-mono); letter-spacing: .06em; text-transform: uppercase; }
.lp-foot a { font: inherit; color: rgb(248 245 231 / .78); }
.lp-social { display: flex; align-items: center; gap: 4px; margin-left: -12px; }
.lp-social a { justify-content: center; width: 44px; height: 44px; color: rgb(248 245 231 / .82); transition: color .2s, transform .2s; }
.lp-social a:hover { color: #fff; transform: translateY(-1px); }
.lp-mark { display: block; width: auto; }
.lp-mark.is-x { height: 1.2em; }
.lp-mark.is-in { height: 1.12em; }
.lp-mark.is-mail { height: 1.02em; }
.lp-mark.is-shield { height: 1.2em; margin-right: .55em; }
.lp-foot-end { display: flex; align-items: center; gap: 0 clamp(20px, 2.6vw, 40px); }
.lp-page :is(.lp-brand, .lp-top a, .lp-foot a):focus-visible { outline: 2px solid var(--memo-deco-mid); outline-offset: 3px; border-radius: 4px; }

/* ---------- Motion ----------
   The text arrives with the dark core, early and unhurried: the headline, the sentence and the action
   rise slowly in turn, and the header and footer follow within the first second. The memo's sheen
   crosses the button every 6 s. Reduced motion shows everything at once over the still ring. */
@keyframes lp-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes lp-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .lp-title { animation: lp-rise 2.4s cubic-bezier(.25, .6, .3, 1) .5s both; }
  .lp-lede { animation: lp-rise 2.2s cubic-bezier(.25, .6, .3, 1) .75s both; }
  .lp-actions { animation: lp-rise 2.2s cubic-bezier(.25, .6, .3, 1) .95s both; }
  .lp-news, .lp-top, .lp-foot { animation: lp-fade 1.6s ease 1.1s both; }
  .lp-page .lp-cta { animation: home-button-sheen 6s cubic-bezier(.45, 0, .2, 1) 3.4s infinite; }
}

/* ---------- Narrower screens ---------- */
@media (max-width: 1000px) {
  .lp-news-cta { display: none; }
}
@media (max-width: 760px) {
  /* On phones the sizes follow the width: the headline's longer line ("AI Agent Factory", 6.4 em)
     always fits, from 37 px on a 320 px phone to 54 px on the largest. */
  .lp-page { --lp-pad: 22px; --lp-title: clamp(34px, 11.6vw, 54px); --lp-lede: clamp(16px, 4.2vw, 19px); }
  .lp-top { gap: 12px; }
  .lp-top nav { gap: 0 22px; }
  .lp-brand img { width: 112px; }
  .lp-top nav a { min-height: 44px; font-size: 14px; letter-spacing: .04em; }

  /* The company line is for laptops and larger; a phone's footer is one row, the socials at the left
     and the trust center at the right. */
  .lp-copy { display: none; }
  .lp-news a { gap: 10px; min-height: 48px; padding-block: 4px; font-size: 14px; }
  .lp-page .lp-cta { min-height: 44px; padding: 0 1.5em 0 1.75em; font-size: 12px; letter-spacing: .12em; }   /* the header pill's height */
}
@media (max-width: 380px) {
  .lp-page { --lp-pad: 18px; }
  .lp-top nav { gap: 0 18px; }
  .lp-foot { gap: 0 14px; font-size: 11px; letter-spacing: .04em; }
  .lp-brand img { width: 92px; }
  .lp-top nav a { font-size: 12px; letter-spacing: .02em; }
  .lp-news a { gap: 8px; font-size: 13px; }
}

/* Upright phones: no shades across the top and bottom. On a tall screen they read as dark bars over
   the petals, so the header's and footer's groups each sit on a soft round shadow of their own
   instead (the lockup, the links, the socials and the trust center). */
@media (max-width: 760px) and (orientation: portrait) {
  .lp-stage::after { content: none; }
  .lp-brand, .lp-top nav, .lp-social, .lp-foot-end { position: relative; }
  .lp-brand::before, .lp-top nav::before, .lp-social::before, .lp-foot-end::before {
    content: ""; position: absolute; inset: -18px -14px; z-index: -1; pointer-events: none;
    background: radial-gradient(closest-side, rgb(0 0 0 / .78), rgb(0 0 0 / .5) 55%, rgb(0 0 0 / 0));
  }
  .lp-social::before, .lp-foot-end::before { bottom: -8px; }   /* within the footer's padding, so the page never scrolls */
  .lp-top nav a, .lp-foot { text-shadow: 0 0 2px rgb(0 0 0 / .9), 0 0 10px rgb(0 0 0 / .8); }
  .lp-foot { color: rgb(248 245 231 / .8); }
  .lp-foot a, .lp-social a { color: rgb(248 245 231 / .9); }
}

/* ---------- Phones turned on their side ----------
   About 320–480 px of height: the bar, header, text and footer tighten so the page still fits one
   screen, the headline stays on one line and the sentence widens to one or two lines. */
@media (orientation: landscape) and (max-height: 500px) {
  .lp-page { --lp-pad: 24px; --lp-title: clamp(28px, 9.4svh, 42px); --lp-lede: 15px; }
  .lp-news a { min-height: 44px; padding-block: 2px; font-size: 13px; }
  .lp-top { padding-top: 2px; }
  .lp-brand img { width: 104px; }
  .lp-top nav a { font-size: 13px; }
  .lp { padding-block: 4px; }
  .lp-title { white-space: nowrap; }
  .lp-lede { max-width: 46em !important; margin-top: 8px !important; line-height: 1.4; }
  .lp-actions { margin-top: 14px; }
  .lp-page .lp-cta { min-height: 44px; font-size: 12px; }
  .lp-foot { padding-bottom: 2px; }
  .lp-copy { display: none; }
  .lp-stage::after {
    background:
      linear-gradient(180deg, rgb(0 0 0 / .8), rgb(0 0 0 / 0) 110px) top / 100% 110px no-repeat,
      linear-gradient(0deg, rgb(0 0 0 / .85), rgb(0 0 0 / 0) 90px) bottom / 100% 90px no-repeat;
  }
}