/*
 * Immiscible: Window. The public site's system.
 *
 * Paper and deep cobalt, one coral accent (#F0563A), Timeless Sans
 * throughout and Timeless Serif italic for the voice. Monospace is for
 * real code only: commands, receipt IDs and signatures. Status reads by
 * shape as well as colour.
 *
 * Colours and faces come from brand.config.json (/brand.css); the tokens
 * below name how this stylesheet uses them. Light only: the site has no
 * dark theme, and the docs keep their own.
 *
 * One section rhythm (--w-sec) and one heading scale (.sec-h, .sh h2,
 * .close h2) for every public page.
 */

:root {
  /* the round 8 tokens (ix-tokens.css), named as this stylesheet uses them */
  --w-paper: var(--paper);
  --w-paper-2: var(--paper-2);
  --w-card: var(--white);
  --w-ink: var(--ink);
  --w-ink-2: var(--text-soft);
  --w-mut: var(--text-muted);
  --w-faint: var(--text-muted);
  --w-line: var(--line);
  --w-line-2: var(--line-strong);
  --w-hair: var(--line);
  --w-cobalt: var(--cloth); /* the cobalt of the mark and the cloth */
  --w-cobalt-2: #26397E;
  --w-cobalt-ink: var(--cobalt); /* links and focus */
  --w-on: #F2F4F7;
  --w-on-mut: #A0A6B4;
  --w-coral: var(--coral);
  --w-err: #B3361A;
  --w-sans: "Timeless Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --w-serif: "Timeless Serif", ui-serif, Georgia, "Times New Roman", serif;
  --w-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --w-g: clamp(20px, 4vw, 56px);
  --w-sec: clamp(80px, 8vw, 120px);
  --w-h2: clamp(34px, 3.6vw, 54px);
  --w-head: 80px;
  --w-r: 10px;
  --w-r-card: 14px;
  --w-textile: url("/assets/textile-cobalt.webp");
  --w-textile-pale: url("/assets/textile-pale.webp");
  /* motion: one curve; quick for the hand, slow for things that arrive */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --t-hover: 200ms;
  --hover-intent: 80ms;
  --t-ui: 180ms;
  --t-arrive: 900ms;
  color-scheme: light;
}
@media (max-width: 759px) { :root { --w-head: 60px; } }

.wx *, .wx *::before, .wx *::after { box-sizing: border-box; }
html:has(body.wx) { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--w-head) + 16px); }
@media (prefers-reduced-motion: no-preference) { html:has(body.wx) { scroll-behavior: smooth; } }
body.wx { margin: 0; background: var(--w-paper); color: var(--w-ink); font: 400 16px/1.55 var(--w-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: clip; font-kerning: normal; }
.wx main { display: block; }
.wx :focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; }
.wx .skip { font-size: 15px; position: absolute; left: -9999px; top: 8px; z-index: 300; background: var(--w-card); color: var(--w-ink); padding: 10px 14px; border-radius: var(--w-r); }
.wx .skip:focus { left: 12px; }
.wx .sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wx .mono { font-family: var(--w-mono); font-size: 13px; letter-spacing: 0; }
.w-wrap { max-width: 1320px; margin-inline: auto; padding-inline: var(--w-g); }
/* a quiet label: sentence case, the same face as everything else */
.w-label { margin: 0; font: 500 13px/1.35 var(--w-sans); letter-spacing: 0; color: var(--w-ink); }

/* ------------------------------------------------------------ brand */

.w-brand { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.w-mark { display: inline-flex; flex: none; }
.w-mark svg { width: 22px; height: 22px; display: block; }
.w-word { font: 600 20px/1 var(--w-sans); letter-spacing: -0.045em; transform: translateY(-1px); }

/* ---------------------------------------------------------- buttons */

.w-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: var(--w-r); border: 1px solid var(--w-cobalt); background: var(--w-cobalt); color: #FFFFFF; font: 500 15px/1 var(--w-sans); letter-spacing: -0.005em; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color 350ms var(--ease), border-color 350ms var(--ease), color 350ms var(--ease); }
.w-btn:hover { background: var(--w-cobalt-2); border-color: var(--w-cobalt-2); }
.w-btn-ghost { background: transparent; color: var(--w-ink); border-color: var(--w-line-2); }
.w-btn-ghost:hover { background: transparent; border-color: var(--w-ink); }
.w-btn-light { background: var(--w-on); border-color: var(--w-on); color: var(--w-ink); }
.w-btn-light:hover { background: #FFFFFF; border-color: #FFFFFF; }
.w-btn-line { background: transparent; color: var(--w-on); border-color: rgba(238, 243, 255, 0.36); }
.w-btn-line:hover { background: rgba(238, 243, 255, 0.06); border-color: rgba(238, 243, 255, 0.7); }
.w-btn-sm { height: 36px; padding: 0 14px; font-size: 13px; border-radius: 8px; }

/* Link buttons keep their own colour wherever a page sets a { color: inherit }. */
.wx a.w-btn { color: #FFFFFF; }
.wx a.w-btn-ghost { color: var(--w-ink); }
.wx a.w-btn-light { color: var(--w-ink); }
.wx a.w-btn-line { color: var(--w-on); }

/* the primary button (Every's measured form): 48px, square, an ink fill with a sky label, and the arrow in a 40px sky cell inset 4px */
.w-cta { display: inline-flex; align-items: stretch; height: 48px; padding: 4px; border-radius: 0; background: var(--ink); color: var(--sky); text-decoration: none; transition: translate 350ms var(--ease), box-shadow 350ms var(--ease); }
.wx a.w-cta { color: var(--sky); }
.w-cta > span { position: relative; display: flex; align-items: center; padding: 0 22px 0 14px; min-width: 164px; font: 500 16px/1 var(--w-sans); letter-spacing: -0.005em; white-space: nowrap; overflow: clip; }
/* the label rolls up and its twin rolls in; the arrow leaves and another arrives (200ms, 80ms intent, hover devices only) */
.w-cta span span, .w-nav a span { position: relative; display: block; }
.w-cta span span::after, .w-nav a span::after { content: attr(data-label) / ""; position: absolute; left: 0; top: 100%; white-space: nowrap; }
.w-cta span span::after { top: calc(100% + 18px); }
.w-nav a { display: inline-block; overflow: clip; vertical-align: top; }
.w-cta i { position: relative; overflow: clip; flex: none; width: 40px; display: grid; place-items: center; place-content: center; background: var(--sky); color: var(--ink); border-radius: 0; }
.w-cta i svg { grid-area: 1 / 1; width: 16px; height: 16px; }
.w-cta i svg + svg { translate: -40px 0; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .w-cta span span, .w-nav a span, .w-cta i svg { transition: translate var(--t-hover) var(--ease); }
  .w-cta:is(:hover, :focus-visible) span span { translate: 0 calc(-100% - 18px); transition-delay: var(--hover-intent); }
  .w-nav a:is(:hover, :focus-visible) span { translate: 0 -100%; transition-delay: var(--hover-intent); }
  .w-cta:is(:hover, :focus-visible) i svg { transition-delay: var(--hover-intent); }
  .w-cta:is(:hover, :focus-visible) i svg:first-child { translate: 40px 0; }
  .w-cta:is(:hover, :focus-visible) i svg + svg { translate: 0 0; }
}
.w-cta:hover { translate: 0 -1px; box-shadow: var(--sh-1); }
.w-cta:active { translate: 0 0; }
/* on ink or cloth the button inverts: white, an ink label, an ink cell with a sky arrow */
.w-cta-light, .wx a.w-cta-light { background: var(--white); color: var(--ink); }
.w-cta-light i { background: var(--ink); color: var(--sky); }
.w-cta-light:hover { box-shadow: var(--sh-on-dark); }
/* the second button on paper (Free, Business and Enterprise on /pricing): white with a line */
.w-cta-line, .wx a.w-cta-line { background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.w-cta-line i { background: var(--sky); color: var(--ink); }
.w-cta-line:hover { box-shadow: inset 0 0 0 1px var(--ink), var(--sh-1); }
.w-cta-hero { height: 52px; }
.w-cta-hero > span { font-size: 17px; min-width: 176px; }
.w-cta-hero i { width: 44px; }
.w-cta-sm { height: 40px; padding: 3px; }
.w-cta-sm > span { min-width: 0; padding: 0 14px 0 12px; font-size: 14px; }
.w-cta-sm i { width: 34px; }
.w-cta-nav { height: 44px; padding: 4px; }
.w-cta-nav > span { min-width: 0; padding: 0 16px 0 12px; font-size: 15px; }
.w-cta-nav i { width: 36px; }
@media (prefers-reduced-motion: reduce) { .w-cta, .w-cta svg { transition: none; } .w-cta:hover, .w-cta:hover svg { translate: none; } }

/* ----------------------------------------------------------- header */

.w-head { position: sticky; top: 0; z-index: 60; color: var(--w-ink); background: var(--paper); border-bottom: 1px solid var(--line); transition: background-color 160ms ease-out, border-color 160ms ease-out, color 160ms ease-out; }
/* Over a cloth hero the bar is transparent with paper links; past 80px of scroll it is solid paper (ix-site.js). No blur, ever. */
.w-head.tone-cloth:not(.lifted):not(.open) { background: transparent; border-bottom-color: transparent; color: #F2F4F7; }
.w-head.tone-cloth:not(.lifted):not(.open) :is(.w-nav a, .w-signin) { color: rgba(238, 241, 246, .82); }
.w-head.tone-cloth:not(.lifted):not(.open) :is(.w-nav a:hover, .w-signin:hover) { color: #FFFFFF; }
.w-head.tone-cloth:not(.lifted):not(.open) .w-mark svg { color: #F7F8FA; }
.w-head.tone-cloth:not(.lifted):not(.open) .w-cta { background: #FFFFFF; color: var(--w-ink); box-shadow: 0 0 0 1px rgba(255, 255, 255, .4); }
.w-head.tone-cloth:not(.lifted):not(.open) .w-cta i { background: var(--w-ink); color: #F2F4F7; }
/* Over Every's black (the home page) the bar is the same black with one hairline, and stays so; the mark turns paper and coral so it reads. */
.w-head.tone-dark:not(.open) { background: var(--eb-0); border-bottom-color: var(--eb-hair); color: var(--eb-on); }
.w-head.tone-dark:not(.open) :is(.w-nav a, .w-signin, .w-menu) { color: var(--eb-on-2); }
.w-head.tone-dark:not(.open) :is(.w-nav a:hover, .w-signin:hover) { color: var(--eb-on); }
.w-head.tone-dark:not(.open) .w-mark svg { color: var(--eb-on); }
.w-head.tone-dark:not(.open) .w-cta { background: var(--sky); color: var(--ink); box-shadow: none; }
.w-head.tone-dark:not(.open) .w-cta i { background: var(--ink); color: var(--sky); }
.w-head.tone-dark:not(.open) :focus-visible { outline-color: var(--sky); }
.w-head .w-nav a, .w-head .w-signin, .w-head .w-mark svg { transition: color 160ms ease-out; }
.w-head .w-wrap { max-width: calc(1312px + 2 * var(--w-g)); }
.w-head-in { height: var(--w-head); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
.w-head .w-brand { justify-self: start; }
.w-head .w-mark svg { width: 24px; height: 24px; color: #0B0D15; }
.w-nav { display: flex; align-items: center; gap: 32px; }
.w-nav a { color: var(--w-ink-2); text-decoration: none; font-size: 15px; transition: color 350ms var(--ease); white-space: nowrap; }
.w-nav a:hover, .w-nav a[aria-current] { color: var(--w-ink); }
.w-nav a[aria-current] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; text-decoration-color: var(--cobalt); }
.w-nav .w-nav-start, .w-nav .w-nav-signin, .w-nav .w-nav-founder { display: none; }
.w-head-act { justify-self: end; display: flex; align-items: center; gap: 24px; }
.w-signin { color: var(--w-ink-2); text-decoration: none; font-size: 15px; white-space: nowrap; transition: color 350ms var(--ease); }
.w-signin:hover { color: var(--w-ink); }
.w-menu { display: none; width: 44px; height: 44px; margin-right: -10px; border: 0; background: none; color: inherit; cursor: pointer; position: relative; }
.w-menu:focus { outline: none; }
.w-menu:focus-visible { outline: 2px solid var(--cobalt); outline-offset: -2px; }
.w-menu span { position: absolute; left: 13px; right: 13px; height: 1.5px; background: currentColor; transition: transform 350ms var(--ease), top 350ms var(--ease); }
.w-menu span:first-child { top: 18px; } .w-menu span:last-child { top: 25px; }
.w-head.open .w-menu span:first-child { top: 21.5px; transform: rotate(45deg); }
.w-head.open .w-menu span:last-child { top: 21.5px; transform: rotate(-45deg); }
.w-head :focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; }
@media (max-width: 1023px) {
  .w-head-in { grid-template-columns: 1fr auto; }
  .w-menu { display: block; }
  .w-nav { display: none; }
  .w-head.open .w-nav { display: flex; position: fixed; left: 0; right: 0; top: var(--w-head); bottom: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--w-g) calc(24px + env(safe-area-inset-bottom)); background: var(--paper); color: var(--w-ink); overflow-y: auto; border-top: 1px solid var(--w-line); }
  .w-head.open .w-nav a span::after { content: none; }
  .w-head.open .w-nav a { font: 400 34px/1.1 var(--w-serif); letter-spacing: -0.02em; padding: 16px 0; border-bottom: 1px solid var(--w-line); color: var(--w-ink); }
  .w-head.open .w-nav a[aria-current] { text-decoration: none; }
  .w-head.open .w-nav .w-nav-founder { display: block; }
  .w-head-act .w-founder { display: none; }
  .w-head.open .w-nav .w-nav-signin, .w-head.open .w-nav .w-nav-start { display: flex; justify-content: center; align-items: center; height: 52px; padding: 0; border-radius: 0; font: 500 16px/1 var(--w-sans); letter-spacing: 0; }
  .w-head.open .w-nav .w-nav-signin { margin-top: auto; border: 1px solid var(--w-line-2); }
  .w-head.open .w-nav .w-nav-start { margin-top: 10px; border: 1px solid var(--w-ink); background: var(--w-ink); color: var(--sky); }
  .w-head.open .w-head-act .w-cta { display: none; }
  .wx .w-head.open { background: var(--paper); }
  html.nav-open { overflow: hidden; }
}
@media (max-width: 1023px) and (prefers-reduced-motion: no-preference) {
  .w-head.open .w-nav { animation: w-sheet 350ms var(--ease) both; }
}
@keyframes w-sheet { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 759px) {
  .w-head-act { gap: 8px; }
  .w-head-act .w-signin { display: none; }
  .w-head .w-wrap { padding-inline: 20px; }
}

/* ----------------------------------------------------------- footer: the big mark, the columns, a small delight */

.w-foot { position: relative; background: var(--ink); color: rgba(242, 244, 247, 0.6); padding: 104px 0 40px; font-size: 15px; overflow: hidden; }
.w-foot::before { content: none; }
.w-foot > * { position: relative; }
.w-foot .w-wrap { max-width: calc(1312px + 2 * var(--w-g)); }
.w-foot-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 56px 32px; }
/* a gentle drift, kept for the error page's mark (ix-site.css) */
@keyframes w-drift { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
.w-foot-grid { margin-top: 56px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.w-foot-col { display: grid; gap: 2px; align-content: start; }
.w-foot-col .w-label { margin: 0 0 14px; font: 500 13px/1 var(--w-sans); color: #A0A6B4; }
.w-foot-col a { justify-self: start; text-decoration: none; padding: 6px 0; color: rgba(238, 241, 246, 0.78); transition: color 350ms var(--ease); }
.w-foot-col a:hover { color: #FFFFFF; }
.w-foot :focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; }
.w-foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 32px; margin-top: 96px; padding-top: 24px; border-top: 1px solid var(--ink-line); max-width: 1312px; margin-inline: auto; font-size: 13px; color: var(--eb-on-3); }
.w-foot-base p { margin: 0; text-wrap: pretty; }
.w-foot-legal { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.w-foot-legal a { color: rgba(238, 241, 246, 0.7); text-decoration: none; transition: color var(--t-ui) var(--ease); }
.w-foot-legal a:hover { color: #F2F4F7; text-decoration: underline; text-underline-offset: .22em; }
.w-foot-socials { display: inline-flex; gap: 16px; align-items: center; margin-left: 8px; }
.w-foot-legal .w-foot-social { display: inline-flex; align-items: center; min-height: 24px; }
.w-foot-legal .w-foot-social:hover { text-decoration: none; }
.w-foot-base .w-foot-note { flex-basis: 100%; }
@media (max-width: 899px) {
  .w-foot { padding: 72px 0 32px; }
  .w-foot-in { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .w-foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
  .w-foot-col a { display: flex; align-items: center; min-height: 44px; padding: 0; }
  .w-foot-base { margin-top: 56px; }
}

.kv { display: grid; grid-template-columns: 136px minmax(0, 1fr); margin: 0; border-top: 1px solid var(--w-hair); font-size: 15px; }
.kv dt, .kv dd { margin: 0; padding: 11px 0; border-bottom: 1px solid var(--w-hair); line-height: 1.45; }
.kv dt { color: var(--w-mut); padding-right: 12px; }
.kv dd { overflow-wrap: break-word; }

/* ======================================================= sign in, up */

.wa-page .wa { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); min-height: 100vh; min-height: 100svh; }
.wa-art { position: relative; display: flex; flex-direction: column; justify-content: flex-start; gap: 40px; padding: 0 var(--w-g) clamp(36px, 4vw, 56px); background: var(--w-cobalt) var(--w-textile) 0 0 / 320px 320px; color: var(--w-on); overflow: hidden; }
.wa-art .w-brand { min-height: var(--w-head); align-self: flex-start; }
.wa-say { margin: 0; max-width: 14em; font: 400 52px/1.04 var(--w-serif); letter-spacing: -0.03em; text-wrap: balance; }
/* the line and the sample are one composition, centred in the panel below the mark */
.wa-comp { display: grid; gap: clamp(28px, 3.2vw, 44px); margin-block: auto; padding-bottom: var(--w-head); }
.wa-sample { width: min(380px, 100%); background: var(--w-card); color: var(--w-ink); border-radius: var(--w-r-card); box-shadow: 0 30px 60px -32px rgba(4, 10, 40, 0.7); overflow: hidden; font-size: 13px; }
.wa-sample-h { display: flex; justify-content: space-between; align-items: center; margin: 0; padding: 14px 18px 12px; border-bottom: 1px solid var(--w-hair); }
.wa-sample-h b { font-weight: 500; }
.wa-sample-h span { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; background: #EEF1F8; color: var(--w-ink-2); font: 500 12.5px/1 var(--w-sans); }
.wa-sample-row { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 12px; padding: 14px 18px 16px; background: #F5F7FD; box-shadow: inset 2px 0 0 var(--w-cobalt); }
.wa-sample-row i { width: 8px; height: 8px; margin-top: 6px; border: 1.5px solid var(--w-cobalt); }
.wa-sample-row p { margin: 0; }
.wa-sample-row .m { margin-top: 3px; font-size: 13px; color: var(--w-mut); }
.wa-sample-row .b { display: flex; gap: 8px; margin-top: 12px; }
.wa-sample-row .b span { padding: 7px 12px; border-radius: 8px; border: 1px solid #E1E4EC; background: var(--w-card); font-size: 13px; font-weight: 500; }
.wa-sample-row .b .y { background: var(--w-cobalt); border-color: var(--w-cobalt); color: #FFFFFF; }
.wa-main { display: grid; place-items: start center; padding: clamp(96px, 15vh, 152px) clamp(20px, 4vw, 64px) 64px; }
.wa-card { width: 100%; max-width: 384px; }
.wa-card h1 { margin: 0; font: 400 28px/1.1 var(--w-serif); letter-spacing: -0.025em; text-wrap: balance; }
.wa-card .wa-sub { margin: 10px 0 28px; color: var(--w-mut); font-size: 15px; }
.wa-card .wa-sub:empty { margin-bottom: 24px; }
.wa-card .wa-sub strong { font-weight: 500; color: var(--w-ink); }
/* Hosted regions: where the workspace's data will live, one line above the form. */
.wa-card .auth-region { margin: -16px 0 24px; color: var(--w-mut); font-size: 14px; }
.wa-card .auth-region a { color: var(--w-ink); }
.wa-card .auth-providers { display: grid; gap: 10px; }
.wa-card .btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 46px; padding: 0 16px; border: 1px solid var(--w-line-2); border-radius: var(--w-r); background: var(--w-card); color: var(--w-ink); font: 500 15px/1 var(--w-sans); text-decoration: none; cursor: pointer; transition: border-color 350ms var(--ease), background-color 350ms var(--ease); }
.wa-card .btn:hover { border-color: var(--w-ink); }
.wa-card .btn svg { width: 18px; height: 18px; flex: none; }
.wa-card .btn-ink { background: var(--w-cobalt); border-color: var(--w-cobalt); color: #FFFFFF; }
.wa-card .btn-ink:hover { background: var(--w-cobalt-2); border-color: var(--w-cobalt-2); }
.wa-card .btn[disabled]:not([aria-busy="true"]) { opacity: 0.6; }
.wa-card .btn[aria-busy="true"] { cursor: progress; }
/* Sign-in buttons, to each provider's published rules (pages/auth.js has the sources). Only the
   providers' own logo files, at their sizes; light theme here, dark values ready for a dark page. */
.btn-gsi, .btn-msft { display: flex; align-items: center; justify-content: center; width: 100%; padding: 0 12px; border: 1px solid; text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn-gsi img, .btn-msft img, .wa-card .btn-gsi img, .wa-card .btn-msft img { flex: none; display: block; margin: 0; max-width: none; border-radius: 0; background: none; }
.btn-gsi { --gsi-fill: #FFFFFF; --gsi-stroke: #747775; --gsi-text: #1F1F1F; gap: 10px; height: 40px; border-radius: 4px; border-color: var(--gsi-stroke); background: var(--gsi-fill); color: var(--gsi-text); font: 500 14px/20px Roboto, "Roboto Medium", Arial, sans-serif; letter-spacing: 0.25px; }
.btn-msft { --ms-fill: #FFFFFF; --ms-border: #8C8C8C; --ms-text: #5E5E5E; gap: 12px; height: 41px; border-radius: 0; border-color: var(--ms-border); background: var(--ms-fill); color: var(--ms-text); font: 600 15px/1 "Segoe UI", "Segoe UI Semibold", system-ui, sans-serif; }
.btn-gsi:hover, .btn-msft:hover { background-image: linear-gradient(rgba(128, 128, 128, 0.08), rgba(128, 128, 128, 0.08)); }
.btn-gsi:focus-visible, .btn-msft:focus-visible { outline: 2px solid var(--w-cobalt-ink); outline-offset: 2px; }
[data-theme="dark"] .btn-gsi { --gsi-fill: #131314; --gsi-stroke: #8E918F; --gsi-text: #E3E3E3; }
[data-theme="dark"] .btn-msft { --ms-fill: #2F2F2F; --ms-border: #2F2F2F; --ms-text: #FFFFFF; }
.wa-card .auth-or { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; margin: 22px 0; color: var(--w-mut); font-size: 13px; }
.wa-card .auth-or::before, .wa-card .auth-or::after { content: ""; border-top: 1px solid var(--w-line); }
.wa-card .form { display: grid; gap: 16px; margin: 0; }
.wa-card .form label { display: grid; gap: 7px; font-size: 13px; font-weight: 500; color: var(--w-ink-2); }
.wa-card .form input, .wa-card .form select { width: 100%; height: 46px; padding: 0 14px; border: 1px solid var(--w-line-2); border-radius: var(--w-r); background: var(--w-card); color: var(--w-ink); font: 400 16px/1.2 var(--w-sans); transition: border-color 350ms var(--ease), box-shadow 350ms var(--ease); }
.wa-card .form input::placeholder { color: #9AA1B4; }
.wa-card .form input:focus { outline: none; border-color: var(--w-cobalt-ink); box-shadow: 0 0 0 3px rgba(30, 47, 110, 0.18); }
.wa-card .form .btn-block { margin-top: 4px; }
.wa-card .form .btn-block + .btn-block { margin-top: -6px; }
.wa-card .form-msg { margin: 0; min-height: 0; font-size: 13px; color: var(--w-cobalt-ink); }
.wa-card .form-msg:empty { display: none; }
.wa-card .form-msg.err { color: var(--w-err); }
.wa-card .auth-passwordless { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 18px 0 0; }
.wa-card .auth-passwordless .btn[hidden] { display: none; }
.wa-card .wa-textlink { padding: 4px 0; border: 0; background: none; color: var(--w-cobalt); font: 500 14px/1.4 var(--w-sans); cursor: pointer; text-decoration: none; }
.wa-card .wa-textlink:hover { text-decoration: underline; text-underline-offset: 3px; }
.wa-card .wa-textlink[hidden] { display: none; }
.wa-card .fine { margin: 18px 0 0; font-size: 13px; line-height: 1.5; color: var(--w-mut); }
.wa-card .form .fine { margin-top: 0; }
.wa-card .fine a, .wa-sw a { color: inherit; text-underline-offset: 3px; text-decoration-color: var(--w-line-2); }
.wa-card .alt { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 10px 0 0; font-size: 13px; }
.wa-card .alt a { color: var(--w-cobalt-ink); text-decoration: none; }
.wa-card .alt a:hover { text-decoration: underline; text-underline-offset: 3px; }
.wa-sw { display: grid; gap: 8px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--w-line); font-size: 13px; color: var(--w-mut); }
.wa-sw p { margin: 0; }
.wa-sw a { color: var(--w-ink); }
.wa-card .recovery-codes { margin: 0; padding: 14px 16px; border: 1px solid var(--w-line-2); border-radius: var(--w-r); background: var(--w-card); font: 400 14px/1.7 var(--w-mono); }
.wa-card img { display: block; margin: 4px auto; border-radius: 8px; background: #FFFFFF; }
.wa-card .wa-note { margin: -8px 0 16px; padding: 12px 14px; border: 1px solid var(--w-line-2); border-radius: var(--w-r); background: var(--w-card); font-size: 15px; color: var(--w-ink-2); }
.wa-card .wa-note + .form { margin-top: 20px; }
.wa-card .wa-resend { display: grid; gap: 8px; margin: 0; }
.wa-card .wa-resend .btn[hidden] { display: none; }
@media (max-width: 899px) {
  .wa-page .wa { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .wa-art { gap: 8px; padding: 0 var(--w-g) 26px; }
  .wa-comp { margin-block: 0; padding-bottom: 0; }
  .wa-say { font-size: 24px; max-width: 18em; }
  .wa-sample { display: none; }
  .wa-main { place-items: start center; padding: 36px var(--w-g) 56px; }
}

/* ======================================================= sign up and sign in: ink and cloth (art direction 3.3) */

.wl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100vh; min-height: 100svh; }
.wl-main { position: relative; display: grid; place-items: center; padding: 136px 56px 136px; background: var(--ink); color: #F2F4F7; }
.wl-main > .w-brand { position: absolute; top: 40px; left: 40px; color: #F2F4F7; }
.wl-main > .w-brand .w-mark svg { width: 28px; height: 28px; color: #F7F8FA; }
.wl-card { width: 100%; max-width: 420px; }
.wl .wa-card h1 { font: 400 56px/1 var(--w-serif); letter-spacing: -0.025em; color: #F2F4F7; }
.wl .wa-card .wa-sub { margin: 18px 0 36px; font-size: 15px; color: rgba(238, 241, 246, .72); }
.wl .wa-card .wa-sub:empty { display: none; }
.wl .wa-card .auth-providers { gap: 12px; }
.wl .wa-card .btn-gsi, .wl .wa-card .btn-msft { height: 52px; border-radius: 4px; }
.wl .wa-card .auth-or { margin: 24px 0; color: rgba(238, 241, 246, .6); }
.wl .wa-card .auth-or::before, .wl .wa-card .auth-or::after { border-top-color: var(--ink-line); }
.wl .wa-card .form { gap: 18px; }
.wl .wa-card .form label { color: rgba(238, 241, 246, .8); font-size: 15px; font-weight: 400; }
.wl .wa-card .form input { height: 52px; border-radius: 0; border-color: var(--ink-line); background: var(--ink-raised); color: #F2F4F7; font-size: 17px; }
.wl .wa-card .form input::placeholder { color: rgba(238, 241, 246, .4); }
.wl .wa-card .form input:focus { border-color: var(--sky); box-shadow: 0 0 0 3px rgba(172, 216, 246, .22); }
.wl .wa-card .btn-ink { height: 52px; border-radius: 0; background: var(--sky); border-color: var(--sky); color: var(--ink); font-size: 17px; }
.wl .wa-card .btn-ink:hover { background: #FFFFFF; border-color: #FFFFFF; }
.wl .wa-card .form-msg { color: var(--sky); font-size: 15px; }
.wl .wa-card .form-msg.err { color: #FFB4A3; }
.wl .wa-card .fine, .wl .wa-sw { color: rgba(238, 241, 246, .6); }
.wl .wa-card .fine a, .wl .wa-sw a, .wl .wa-card .alt a { color: #F2F4F7; text-decoration-color: rgba(238, 241, 246, .4); }
.wl .wa-card .wa-textlink { color: var(--sky); font-size: 15px; }
.wl .wa-sw { border-top-color: var(--ink-line); font-size: 15px; }
.wl .wl-step { display: grid; gap: 18px; }
.js .wl .wl-step.closed { display: none; }

.wl-art { position: relative; display: grid; place-items: center; padding: 96px 56px; background: var(--cloth) url("/assets/textile-cobalt.webp") 0 0 / 600px 600px; color: #F2F4F7; overflow: hidden; }
.wl-art.mx { background: var(--pattern-sky); color: #F2F4F7; }
.wl-comp { display: grid; justify-items: center; gap: 36px; width: 100%; }
.wl .wa-live { width: 560px; max-width: 100%; }
.wl .wa-live .sk { border: 0; box-shadow: var(--sh-3); }
.wl .wa-live .slack-head .demo-tag { margin-left: auto; }
.wl .wa-live .slack-log { padding-bottom: 14px; }
.wl .wa-live .slack-confirm { border-radius: 10px; }
.wl .wa-signed { margin-top: 12px; }
.wl .wa-rec { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; padding: 12px 16px; border-radius: 8px; background: #FFFFFF; color: var(--ink); font: 400 13px/1.45 var(--w-sans); box-shadow: 0 12px 28px rgba(4, 8, 24, .3); }
.wl .wa-rec[hidden] { display: none; }
.wl .wa-rec [data-verify-out] { color: var(--text-muted); }
.wl-art .wa-say { max-width: 22em; margin: 0; font: 400 17px/1.5 var(--w-sans); color: rgba(238, 241, 246, .86); text-align: center; text-wrap: balance; letter-spacing: 0; }

@media (max-width: 1100px) {
  .wl .wa-live { width: min(560px, 100%); }
}
@media (max-width: 899px) {
  .wl { grid-template-columns: minmax(0, 1fr); }
  .wl-art { order: -1; height: 240px; padding: 72px 20px 0; place-items: start center; }
  .wl-comp { gap: 0; }
  .wl-art .wa-say { display: none; }
  .wl .wa-live { width: 100%; max-width: 420px; }
  .wl { position: relative; }
  .wl-main { position: static; place-items: start center; padding: 40px 20px 56px; }
  .wl-main > .w-brand { top: 20px; left: 20px; z-index: 3; color: #F2F4F7; }
  .wl .wa-card h1 { font-size: 40px; }
}

/* consent: choosing which agent an application may act as */
.wa-card .consent-agents { margin: 4px 0 0; padding: 0; border: 0; display: grid; gap: 10px; }
.wa-card .consent-agents legend { padding: 0; margin: 0 0 12px; font-size: 13px; font-weight: 500; color: var(--w-ink-2); }
.wa-card .consent-agent { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 4px 12px; align-items: start; padding: 14px 16px; border: 1px solid var(--w-line-2); border-radius: var(--w-r); background: var(--w-card); font-weight: 400; cursor: pointer; }
.wa-card .consent-agent:has(input:checked) { border-color: var(--w-cobalt); box-shadow: 0 0 0 1px var(--w-cobalt); }
.wa-card .consent-agent input { width: 16px; height: 16px; margin: 3px 0 0; accent-color: var(--w-cobalt); }
.wa-card .consent-agent > .fine { grid-column: 2; margin: 0; }
.wa-card .consent-none { margin: 0; padding: 14px 16px; border: 1px dashed var(--w-line-2); border-radius: var(--w-r); color: var(--w-ink-2); font-size: 15px; }
.wa-card .consent-ws { font-weight: 400; color: var(--w-mut); }
.wa-card .consent-acts { display: grid; gap: 10px; }
@media (max-width: 599px) {
  .wa-card .consent-agent:not(:has(input:checked)) > .fine { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
  .wa-card .consent-acts { position: sticky; bottom: 0; z-index: 5; margin: 0 calc(var(--w-g) * -1); padding: 12px var(--w-g) calc(12px + env(safe-area-inset-bottom)); background: var(--w-paper); border-top: 1px solid var(--w-line); }
}

/* the phone sizes come last, so they win over the rules above */
@media (max-width: 759px) {
  .w-word { font-size: 18px; }
}


/* sign-up and sign-in (premium critique): the brand button, a readable caption, and the card whole under the form on a phone */
.wl .wa-card .wl-go { display: flex; width: 100%; height: 52px; border: 0; cursor: pointer; font: inherit; }
.wl .wa-card .wl-go > span { flex: 1; min-width: 0; font-size: 17px; }
.wl .wa-card .wl-go:disabled { cursor: progress; translate: none; }
.wl .wl-art.mx .wa-say { font-size: 15px; color: rgba(238, 241, 246, .9); }
@media (max-width: 899px) {
  .wl-art { order: 1; height: auto; padding: 56px 20px 72px; place-items: center; }
  .wl-comp { gap: 24px; }
  .wl-art .wa-say { display: block; }
  .wl-main { padding-top: 96px; }
}

/* the footer line carries the @mention chip, as Every's does */

/* ======================================================= one calm card (unsubscribe, the setup links) */
.pc-page { background: var(--paper); }
.pc { min-height: 100vh; min-height: 100svh; display: grid; justify-items: center; align-content: start; gap: 32px; padding: clamp(48px, 10vh, 120px) 16px 64px; }
.pc-mark svg { display: block; width: 28px; height: 28px; color: #0B0D15; }
.pc-card { box-sizing: border-box; width: min(440px, 100%); padding: 40px; background: var(--white); border: 1px solid var(--line); box-shadow: var(--sh-1); color: var(--ink); font-size: 16px; line-height: 1.55; }
.pc-card h1, .pc-card .ob-doc-t { margin: 0; font: 400 32px/1.08 var(--w-serif); letter-spacing: -0.02em; text-wrap: balance; }
.pc-card .wa-sub, .pc-card .ob-doc-lead { margin: 14px 0 0; color: var(--text-soft); }
.pc-card p { margin: 14px 0 0; }
.pc-card a { color: var(--cobalt); }
.pc-card .form { margin-top: 28px; }
.pc-card .btn, .pc-card .btn-ink { display: flex; align-items: center; justify-content: center; width: 100%; height: 48px; margin-top: 24px; border: 1px solid var(--line-strong); border-radius: 0; background: var(--white); color: var(--ink); font: 500 16px/1 var(--w-sans); cursor: pointer; }
.pc-card .btn-ink { background: var(--ink); border-color: var(--ink); color: var(--sky); }
.pc-card .alt { font-size: 15px; }
/* the agent setup link is a longer document: the same card, wider */
.ob-handoff .pc-card { width: min(680px, 100%); }
.ob-handoff .ob-doc { margin: 0; padding: 0; }
.ob-handoff .ob-doc-k { margin: 0 0 10px; font-size: 14px; color: var(--text-muted); }
.ob-handoff .ob-doc-h { margin: 32px 0 8px; font: 500 17px/1.3 var(--w-sans); }
.ob-handoff .ob-doc-list { padding-left: 1.2em; }
.ob-handoff .ob-doc-list li { margin-bottom: 8px; }
.ob-handoff .ob-note { padding: 12px 14px; background: var(--sky-pale); font-size: 15px; }
.ob-handoff .ob-note.err { background: var(--paper-2); box-shadow: inset 3px 0 0 var(--coral); }
.ob-handoff .ob-fine { font-size: 13px; color: var(--text-muted); }
.ob-handoff pre { overflow-x: auto; padding: 14px 16px; background: var(--ink); color: #F2F4F7; font: 400 13px/1.6 var(--w-mono); }
.ob-handoff .ob-key, .ob-handoff .ob-collect, .ob-handoff .ob-tech { margin-top: 24px; }
.ob-handoff summary { cursor: pointer; font-weight: 500; }
.ob-handoff input, .ob-handoff select { width: 100%; height: 48px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 0; font: 400 16px/1.2 var(--w-sans); box-sizing: border-box; }
@media (max-width: 520px) { .pc-card { padding: 28px 20px; } }

/* ------------------------------------------------------------ sign-up on the chosen direction (founder, 7 Oct 2026):
   Every's split, the sky half carrying the live approval at the top of the first three steps of its record */
.wl-art.mx { background: var(--sky); color: var(--ink); isolation: isolate; align-content: center; gap: 44px; padding-top: 72px; padding-bottom: 150px; }
.wl-art .eb-say-big { margin: 0; max-width: 11em; font: 400 38px/1.06 var(--serif); letter-spacing: -.025em; color: var(--ink); text-align: center; text-wrap: balance; }
/* the approval and its three steps share one cell, so each sheet is exactly the window's size */
.wl .eb-up { display: grid; gap: 0; justify-items: stretch; width: min(560px, 100%); position: relative; translate: 20px 0; --dx: 26px; --dy: 54px; }
.wl .eb-up > * { grid-area: 1 / 1; }
.wl .eb-up .wa-live { position: relative; z-index: 9; width: 100%; }
.wl .eb-up .eb-sheet { position: relative; z-index: calc(var(--i) + 1); --to: translate(calc(var(--back) * var(--dx) * -1), calc(var(--back) * var(--dy))); }
.wl .wa-live .sk { border: 0; border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 1px var(--line), var(--sh-3); }
.wl .sk .sb-yes { background: var(--ink); color: var(--white); box-shadow: none; border-color: var(--ink); }
.wl .eb-foot { display: flex; flex-direction: row; align-items: flex-end; justify-content: flex-start; gap: 14px; padding-bottom: 16px;
  box-shadow: inset 0 1px 0 var(--lip), 0 2px 4px rgba(14, 16, 25, .18), 0 30px 50px -20px rgba(14, 26, 70, .55); }
.wl .eb-foot.eb-s1 { --bg: var(--ink); }
.wl .eb-foot.eb-s2 { --bg: #161B2B; }
.wl .eb-foot.eb-s3 { --bg: var(--cloth); --nb: #2A3D84; }
.wl .eb-foot .eb-l { padding-bottom: 4px; }
.wl .eb-foot .eb-k { margin: 0; font-size: 22px; }
.wl .eb-foot .eb-d { margin: 0 0 3px; font-size: 13px; }
@media (max-width: 899px) {
  .wl .eb-up { translate: none; --dx: 14px; --dy: 40px; }
  .wl-art .eb-say-big { font-size: 32px; }
}

/* A form's button while its request runs (site.js submitting): full colour, its label says what is happening
   ("Signing in…") and the arrow stays still. One calm state: no pulse, no spinner, no opacity change (round 5 judges). */
.btn[aria-busy="true"] { position: relative; cursor: progress; }
.w-cta[aria-busy="true"], .w-cta[aria-busy="true"]:disabled { cursor: progress; opacity: 1; }

/* ------------------------------------------------------------ round 9 judges: sign-up and sign-in */
/* The sky half holds one Slack card, centred, with nothing under it running off the edge. */
.wl-art.mx { padding-top: 96px; padding-bottom: 96px; }
.wl .wl-solo { display: grid; justify-items: center; width: min(560px, 100%); }
.wl .wl-solo .wa-live { width: 100%; }
/* the site's own sky primary button */
.wl .wa-card .w-cta-light { background: var(--sky); color: var(--ink); }
.wl .wa-card .w-cta-light i { background: var(--ink); color: var(--sky); }

/* round 9 judges: a button's label takes the spare width, so its arrow cell sits flush right at any width */
.w-cta > span { flex: 1 1 auto; }

/* ------------------------------------------------------------ round 3 judges: sign-up and sign-in are the home page's family */
/* The right half stands on the hero's ink, not sky: the line, the first three steps of the record the request has reached
   (it is held, so Decided and Signed come only when someone decides), then the Slack card itself. */
.wl-art.mx { background: var(--eb-0); color: var(--eb-on); gap: 32px; }
.wl-art .eb-say-big { color: var(--eb-on); }
.wl .wl-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: min(560px, 100%); margin: 0; padding: 0; list-style: none; }
.wl .wl-steps li { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 4px 8px; padding: 12px 14px; border-radius: 8px; background: var(--eb-1); box-shadow: inset 0 0 0 1px var(--eb-hair); }
.wl .wl-steps li:last-child { box-shadow: inset 3px 0 0 var(--sky), inset 0 0 0 1px var(--eb-hair); }
.wl .wl-steps .n { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 3px; background: var(--eb-3, #2A3142); color: var(--eb-on-2); font: 600 11px/1 var(--sans); }
.wl .wl-steps li:last-child .n { background: var(--sky); color: var(--ink); }
.wl .wl-steps b { font: 400 20px/1.1 var(--serif); color: var(--eb-on); }
.wl .wl-steps time { font-size: 12px; color: var(--eb-on-2); font-variant-numeric: tabular-nums; }
.wl .wl-steps small { grid-column: 1 / -1; font-size: 13px; line-height: 1.35; color: var(--eb-on-2); }
.wl .wa-live .sk { box-shadow: 0 0 0 1px rgba(247, 248, 250, .08), 0 24px 60px rgba(0, 0, 0, .45); }
@media (max-width: 640px) {
  .wl .wl-steps { grid-template-columns: 1fr; }
  .wl .wl-steps li { padding: 10px 12px; }
}
/* the sign-up line breaks as three even lines, never a lone word */
.wl .wa-card h1 { max-width: none; text-wrap: balance; }
@media (min-width: 1025px) { .wl-page .wa-card h1 { font-size: 48px; line-height: 1.04; } }
/* sign-in: one row of alternatives at one size; Forgot your password? at the right of the password label */
.wl .wa-card .auth-passwordless { gap: 6px 24px; }
.wl .wa-card .auth-passwordless .wa-textlink { font-size: 15px; font-weight: 500; }
.wa-card .wa-pw .wa-lab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.wa-card .wa-forgot { font-size: 15px; color: var(--sky); text-decoration: none; }
.wa-card .wa-forgot:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------ round 4 judges: sign-up and sign-in as one composed screen */
/* One viewport at 1440x900: no step chips on the proof side, the line and the Slack card centred together, the
   form on the same optical line. On a phone the proof folds to one line under the form, so sign-up stays one task. */
.wl-art .wl-steps { display: none; }
@media (min-width: 761px) {
  .wl { height: 100vh; height: 100svh; min-height: 640px; }
  .wl-main { padding: 84px 56px 32px; overflow-y: auto; }
  .wl-art { padding: 48px 56px; align-content: center; gap: 28px; }
  .wl-art .eb-say-big { margin: 0; }
  .wl .wa-live { max-height: 70vh; }
  .wl .wa-card h1 { font-size: 48px; }
  .wl .wa-card .wa-sub { margin: 14px 0 24px; }
  .wl .wa-card .auth-or { margin: 16px 0; }
  .wl .wa-card .form { gap: 14px; }
}
@media (max-width: 760px) {
  .wl-art { padding: 28px 16px 36px; }
  .wl-art .wl-comp { display: none; }
  .wl-art .eb-say-big { margin: 0; font-size: 26px; }
}
/* round 6 judges: on a phone the line keeps its proof, the compact approval card beneath it, never a heading alone */
@media (max-width: 760px) {
  .wl-art { gap: 20px; }
  .wl-art .wl-comp { display: block; width: 100%; max-width: 358px; margin: 0 auto; }
  .wl-art .wl-comp * { max-width: 100%; }
}

/* ------------------------------------------------------------ round 7 judges: one bold colour block, one form line */
/* Every's split screen: the right half is a full-bleed block of the cobalt the home proof band uses, the line and the
   card centred on it. Sign-up and sign-in start their forms at the same height. */
.wl-art.mx { background: var(--eb-cobalt); }
@media (min-width: 761px) {
  .wl-main { place-items: start center; padding-top: max(96px, calc(50vh - 300px)); }
  .wl .wa-card .wa-sub { margin-top: 18px; }
}

/* Footer, round 9 judges: a plain statement, a tagline that wraps the same on every page, and about 120px less height. */
.w-foot { padding-top: 64px; }
.w-foot-base { margin-top: 56px; }

/* /login on a phone (round 11 judges): the three other ways in stack as full-width secondary buttons, 44px tall */
@media (max-width: 480px) {
  .wa-card .auth-passwordless { display: grid; gap: 8px; }
  .wa-card .auth-passwordless .wa-textlink:not([hidden]) { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; box-sizing: border-box; border: 1px solid color-mix(in srgb, currentColor 35%, transparent); border-radius: 8px; text-decoration: none; font-size: 15px; font-weight: 500; }
}

/* ---- the footer, after Attio's (founder, 8 Oct 2026: the giant mark read as crass). The small wordmark and one
   quiet line top left, compact columns with muted headings and tight rows, and one plain line at the foot. */
.w-foot { padding: 72px 0 32px; font-size: 14px; }
.w-foot-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 40px 32px; align-items: start; }
.w-foot .w-foot-brand, .w-foot .w-foot-brand .w-word { color: #F2F4F7; }
.w-foot-brand .w-mark svg { width: 20px; height: 20px; color: #F7F8FA; }
.w-foot-brand .w-word { font-size: 18px; }
.w-foot-line { margin: 14px 0 0; max-width: 22em; font-size: 13.5px; line-height: 1.5; color: rgba(238, 241, 246, 0.5); }
.w-foot-socials { display: flex; gap: 14px; margin: 20px 0 0; }
.w-foot-social { display: inline-flex; align-items: center; justify-content: center; color: rgba(238, 241, 246, 0.55); transition: color 160ms ease-out; }
.w-foot-social:hover { color: #F2F4F7; }
.w-foot-grid { margin-top: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.w-foot-col { gap: 0; }
.w-foot-col .w-label { margin: 0 0 10px; font: 400 13.5px/1.2 var(--w-sans); color: rgba(238, 241, 246, 0.45); }
.w-foot-col a { padding: 4px 0; font-size: 14px; color: rgba(238, 241, 246, 0.82); }
.w-foot-base { margin-top: 64px; padding-top: 20px; align-items: center; font-size: 13px; color: rgba(238, 241, 246, 0.5); }
.w-foot-legal { gap: 6px 20px; }
.w-foot-legal a { color: rgba(238, 241, 246, 0.5); }
@media (max-width: 759px) {
  .w-foot { padding: 56px 0 28px; }
  .w-foot-in { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .w-foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .w-foot-col a { display: flex; align-items: center; min-height: 40px; padding: 0; }
  .w-foot-base { margin-top: 40px; flex-direction: column; align-items: flex-start; }
}
@media (max-width: 359px) { .w-foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* the footer, founder 8 Oct 2026 (evening): one body-size line under the wordmark with the @mention chip, and the
   bottom row keeps only llms.txt and the social icons (Legal and Status sit in the Company column) */
.w-foot .w-foot-line { margin: 16px 0 0; max-width: 25em; font-size: 15px; line-height: 1.55; color: rgba(238, 241, 246, 0.62); text-wrap: pretty; }
.w-foot .w-foot-line .at { font-size: 14px; }
.w-foot-legal { align-items: center; }
.w-foot-legal .w-foot-socials { display: inline-flex; gap: 14px; margin: 0; }

/* the footer's one crafted object (founder, 8 Oct 2026, 15:30, image 172: "it gives fal.ai"): the large paper and
   coral mark floats on the left on Every-black, the @Immiscible line sits under it, and the columns stay calm and
   compact on the right, level with the top of the mark */
.w-foot { padding: 96px 0 32px; }
.w-foot-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 48px 64px; }
.w-foot .w-foot-brand { display: inline-block; border-radius: 2px; }
.w-foot-mark { display: block; width: clamp(150px, 17vw, 236px); aspect-ratio: 1; }
.w-foot-mark svg { display: block; width: 100%; height: 100%; overflow: visible; }
.w-foot-mark .bk, .w-foot-mark .fr { transition: transform 900ms var(--ease); }
.w-foot-brand:hover .w-foot-mark .fr, .w-foot-brand:focus-visible .w-foot-mark .fr { transform: translate(1.2px, 1.2px); }
.w-foot-brand:hover .w-foot-mark .bk, .w-foot-brand:focus-visible .w-foot-mark .bk { transform: translate(-0.8px, -0.8px); }
.w-foot-brand:focus-visible { outline: 2px solid var(--sky); outline-offset: 10px; }
@media (prefers-reduced-motion: no-preference) {
  .w-foot-mark svg { animation: w-foot-float 9s ease-in-out infinite; }
}
@keyframes w-foot-float { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -8px; rotate: -0.8deg; } }
.w-foot .w-foot-line { margin-top: 40px; max-width: 24em; }
.w-foot-grid { padding-top: 6px; }
.w-foot-base { margin-top: 72px; }
@media (max-width: 759px) {
  .w-foot { padding: 64px 0 28px; }
  .w-foot-in { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .w-foot-mark { width: 132px; }
  .w-foot .w-foot-line { margin-top: 28px; }
  .w-foot-grid { padding-top: 0; }
}
@media (prefers-reduced-motion: reduce) { .w-foot-mark .bk, .w-foot-mark .fr { transition: none; } }
/* the @mention chip in the footer line, on every page that carries the footer (the docs load no mx.css) */
.w-foot .at { background: #ACD8F6; border-radius: 4px; padding: 0 4px 2px; font-weight: 500; color: #0B0D15; white-space: nowrap; }

/* sign-up and sign-in: the right half on Every-black with home's dot field behind the request (founder, 8 Oct 2026, evening) */
.wl-art.wa-df { background: #0B0D15; isolation: isolate; }
.wa-df .wa-field { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.wa-df .wa-field canvas { display: block; width: 100%; height: 100%; }