/* ===========================================================================
   Meetowt — the public site, second layer. 24 September 2026.

   the owner: "change the landing page, and more animation that goes when scrolling
   down, be creative, make it bold, and at the footer add something like this"
   — a screenshot of a big dark footer, a logo on the left and columns of plain
   links under bold headings. And, the same night, "modernise the full meetowt
   app … each button with curves and not pointy … from sign up or sign in".

   LOADED AFTER styles.css ON EVERY PAGE, AND THAT ORDER IS THE WHOLE DESIGN.
   styles.css keeps its rules and the reasons written beside them — the
   contrast measurements, the phone widths, the pay switch that needs no
   script — and this file changes shape, depth and colour on top: round
   buttons and cards, a floating top bar, the big footer, and the movement.
   Delete the <link> and each page is exactly what it was.

   THE ACCENT IS NOT CHANGED HERE. The site's oxide (#a83a17) was measured
   against paper and paper-deep for every small line of text that uses it
   (see styles.css); the brighter hues below are for LARGE type, gradients and
   decoration only, and every one of them sits beside words.
   =========================================================================== */

:root {
  --raised: #ffffff;
  --surface: #faf7f0;
  --night: #110f0c;
  --night-2: #1a1814;
  --on-night: #f4f1ea;
  --on-night-soft: #c7c0b0;
  --on-night-faint: #9a9384;

  /* The app's section hues, so the site teaches the colours a person will
     find each part by inside. Decoration and large type only. */
  --hue-mail: #0369a1;
  --hue-chat: #6d28d9;
  --hue-meet: #be123c;
  --hue-plan: #047857;
  --hue-work: #8a5406;
  --hue-accent: #c2410c;
  --weak-mail: #dceaf5;
  --weak-chat: #e8e0fb;
  --weak-meet: #fadfe5;
  --weak-plan: #d8efe6;
  --weak-work: #f5e7cf;
  --weak-accent: #fbe3d6;

  /* The brand's one gradient: oxide through crimson to violet — the three
     loudest hues in the product, in the order the sidebar lists them. */
  --grad: linear-gradient(100deg, #c2410c 0%, #e11d48 48%, #7c3aed 100%);
  --grad-soft: linear-gradient(100deg, #fdba8c 0%, #fb7f92 50%, #c4b5fd 100%);

  --r-sm: 0.75rem;
  --r: 1.25rem;
  --r-lg: 1.75rem;
  --r-xl: 2.25rem;
  --float: 0 2px 6px rgba(60, 40, 15, 0.06), 0 26px 56px -24px rgba(60, 40, 15, 0.38);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* The drafting grid gives way to clean paper; each section brings its own
   ground now, and the hero its own light. */
body {
  background-image: none;
  background-color: var(--paper);
  /* CLIP, NOT HIDDEN. The tilted band and the glows are wider than the page
     on purpose, and without this the whole page scrolled sideways by the
     width of a tilt. `hidden` would stop it too — and would make the body a
     scroll container, which silently turns off every `position: sticky` on
     the page. `clip` cuts the overflow without becoming one. */
  overflow-x: clip;
}
/* And on the root as well: Safari on an iPhone has long let a finger pan
   sideways past an overflow that only the body clips. */
html {
  overflow-x: clip;
}

::selection {
  background: #fdba8c;
  color: var(--ink);
}

/* ── Buttons: pills ───────────────────────────────────────────────────── */

.btn {
  border-radius: 999px !important;
  gap: 0.55rem;
  transition:
    transform 0.25s var(--ease-out),
    box-shadow 0.25s var(--ease-out),
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}
.btn--solid {
  background: linear-gradient(180deg, #c2410c, #9a3412);
  border-color: #9a3412;
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 1px 2px rgba(0, 0, 0, 0.12),
    0 12px 26px -12px rgba(194, 65, 12, 0.75);
}
.btn--solid:hover {
  background: linear-gradient(180deg, #b43c0b, #86300f);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 2px 4px rgba(0, 0, 0, 0.12),
    0 18px 34px -14px rgba(194, 65, 12, 0.85);
}
.btn--ghost {
  background: var(--raised);
  border-color: var(--rule);
  box-shadow: var(--lift-1);
}
.btn--ghost:hover {
  background: var(--raised);
  color: var(--ink);
  border-color: var(--ink);
  transform: translateY(-2px);
}
.btn:active {
  transform: translateY(0) scale(0.98);
}
.btn .arrow {
  display: inline-block;
  transition: transform 0.25s var(--ease-out);
}
.btn:hover .arrow {
  transform: translateX(3px);
}

/* ── The top bar: a floating pill ─────────────────────────────────────── */

/* STILL OPAQUE — see the note on .topbar in styles.css, which is right: a
   translucent bar over paper is invisible as a layer. The PILL is solid and
   carries the shadow; only the margin around it is clear, which is what lets
   it float. */
.topbar {
  background: transparent;
  border-bottom: 0;
  box-shadow: none;
  padding: 0.7rem 0 0;
  pointer-events: none;
}
.topbar__inner {
  pointer-events: auto;
  height: 3.6rem;
  padding: 0 0.55rem 0 1.1rem;
  background: #fbf8f1;
  border: 1px solid rgba(22, 20, 15, 0.09);
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(22, 20, 15, 0.05), 0 12px 30px -18px rgba(22, 20, 15, 0.35);
  transition: box-shadow 0.3s ease;
}
.is-scrolled .topbar__inner {
  box-shadow: 0 1px 2px rgba(22, 20, 15, 0.06), 0 18px 40px -18px rgba(22, 20, 15, 0.45);
}
.wordmark__mark {
  width: 1.75rem;
  height: 1.75rem;
  /* The app's brand tile: the mark in white on the gradient, one image. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23c2410c'/%3E%3Cstop offset='0.55' stop-color='%23be123c'/%3E%3Cstop offset='1' stop-color='%236d28d9'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='200' height='200' rx='49' fill='url(%23g)'/%3E%3Cg transform='translate(34.0 34.0) scale(0.66)'%3E%3Cpath d='M124 148 H144 A24 24 0 0 0 168 124 V76 A24 24 0 0 0 144 52 H56 A24 24 0 0 0 32 76 V124 A24 24 0 0 0 56 148' fill='none' stroke='%23ffffff' stroke-width='30' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='125' cy='92' r='21' fill='%23ffffff'/%3E%3C/g%3E%3C/svg%3E");
}
.topbar nav {
  gap: 0.35rem;
}
.topbar nav a {
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  font-weight: 500;
  /* "Get started" on two lines inside a pill reads as a broken button. */
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.topbar nav a:hover {
  background: rgba(22, 20, 15, 0.06);
}
.nav-cta {
  border-bottom: 0 !important;
  padding: 0.6rem 1.15rem !important;
  color: #fff !important;
  font-weight: 600 !important;
  background: linear-gradient(180deg, #c2410c, #9a3412);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 8px 18px -10px rgba(194, 65, 12, 0.8);
}
.nav-cta:hover {
  background: linear-gradient(180deg, #b43c0b, #86300f) !important;
}

/* A thin line of the brand gradient across the top, as long as the reader
   has come: how far down a long page they are, at a glance. Drawn by
   site.js; absent without it, which is correct — there is nothing to show. */
.progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 60;
  background: var(--grad);
  transform-origin: 0 50%;
  transform: scaleX(var(--read, 0));
  pointer-events: none;
}

@media (max-width: 34rem) {
  .topbar__inner {
    padding-left: 0.9rem;
  }
  .topbar nav {
    gap: 0.15rem;
  }
  .topbar nav a {
    padding: 0.45rem 0.6rem;
  }
  .nav-cta {
    padding: 0.55rem 0.95rem !important;
  }
}

/* THE TOP BAR, NARROWEST LAST. Sign in and Get started must fit on every
   screen — a returning customer must always be able to get in (see
   styles.css) — and everything else steps aside in order. MEASURED in
   Chromium on 26 September 2026 at every width from 320px to 1280px, on
   every page that carries the bar, not guessed:

   - The in-page jump links go first, at 64rem and below. With every link
     showing, the homepage's bar needs 961px.
   - For people goes next, at 40rem and below. With Jobs, Sign in and Get
     started it needs 560px at the wider paddings.
   - Jobs goes last, at 29rem and below. With Sign in and Get started it
     needs 427px. The board stays one tap away: the link under the hero's
     buttons, the Hiring band, and the footer.
   - At 25rem and below the spacing tightens, and below 360px the wordmark
     keeps its tile and lets its word go.

   THE OLD RULES LEFT HOLES, all on the live site, and each is the failure
   styles.css says must never happen: "no way into the product at all".
   The jump links hid only below 34rem, so from 545px to 845px they pushed
   Sign in and Get started off the right edge — at 545px both were entirely
   off the screen, for anybody on a phone held sideways or a small tablet.
   Jobs hid below 25.5rem, measured at 375px only, so from 409px to 426px it
   clipped Get started by up to 15px, and a Pixel is 412px wide. And the
   wordmark, Sign in and Get started alone needed 372px, so every 360px
   Android phone had Get started clipped by 12px.

   Each section a jump link points to is reached by scrolling, and every link
   here is in the footer of every page. */
@media (max-width: 64rem) {
  .topbar nav a.nav-jump {
    display: none;
  }
}
@media (max-width: 40rem) {
  .topbar nav a.nav-people {
    display: none;
  }
}
@media (max-width: 29rem) {
  .topbar nav a.nav-jobs {
    display: none;
  }
}
@media (max-width: 25rem) {
  .topbar__inner {
    padding-left: 0.6rem;
    gap: 0.6rem;
  }
  .topbar .wordmark {
    gap: 0.45rem;
  }
  .topbar nav a {
    padding: 0.45rem 0.45rem;
  }
  .nav-cta {
    padding: 0.55rem 0.75rem !important;
  }
}
/* The word is clipped rather than set to font-size 0: a browser with a
   minimum font size (Chrome's default in some languages) would bring a
   zero-size word back at 12px and push Get started off again. The text is
   still there for a screen reader. */
@media (max-width: 22.4375rem) {
  .topbar .wordmark {
    width: 1.75rem;
    overflow: hidden;
  }
  .topbar .wordmark__mark {
    flex-shrink: 0;
  }
}

/* ── Sections and cards everywhere: rounder, softer ───────────────────── */

.section {
  border-top: 0;
}
.plate,
.tier,
.sums,
.addon-band,
.coming,
.qa,
.cmp__wrap,
.legal-box {
  border-radius: var(--r-lg) !important;
}
.tier--pick {
  box-shadow: var(--float) !important;
}
.pay__choice {
  border-radius: 999px !important;
  overflow: hidden;
}
.pay__opt {
  border-radius: 999px;
}
.specs li {
  border-radius: var(--r);
}

/* ── Reveal on scroll ─────────────────────────────────────────────────── */

/* ONLY WHEN THE SCRIPT HAS SAID IT IS RUNNING, and only for somebody who has
   not asked for less motion. site.js puts `js-motion` on <html> after its
   observer exists, and marks everything already on screen as arrived before
   the first paint — so nothing a visitor can see is ever held back waiting
   for a script, and a page whose script failed reads exactly as written. */
.js-motion [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.9s var(--ease-out),
    transform 0.9s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.js-motion [data-reveal="left"] {
  transform: translateX(-36px);
}
.js-motion [data-reveal="right"] {
  transform: translateX(36px);
}
.js-motion [data-reveal="zoom"] {
  transform: scale(0.94);
}
.js-motion [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* ── The footer ───────────────────────────────────────────────────────── */

/* THE END OF THE PAGE LOOKS LIKE THE END. Near-black whatever the page above
   it, a brand block on the left and five columns of plain links under bold
   headings — the arrangement the owner sent a picture of — and the name itself,
   very large, as the last thing on every page. Every link goes to a page or
   a section that exists; a footer is where dead links go to hide. */
.site-foot {
  position: relative;
  overflow: hidden;
  background: var(--night);
  color: var(--on-night);
  padding: clamp(3.5rem, 7vw, 5.5rem) 0 0;
  isolation: isolate;
}
.site-foot::before {
  /* A low glow of the brand's hues behind the columns — light on a surface,
     not a picture. */
  content: "";
  position: absolute;
  inset: auto -10% -35% -10%;
  height: 75%;
  z-index: -1;
  background:
    radial-gradient(40% 60% at 20% 70%, rgba(194, 65, 12, 0.35), transparent 70%),
    radial-gradient(40% 60% at 55% 85%, rgba(225, 29, 72, 0.28), transparent 70%),
    radial-gradient(40% 60% at 85% 70%, rgba(124, 58, 237, 0.3), transparent 70%);
  filter: blur(40px);
}
.site-foot a {
  color: var(--on-night-soft);
  text-decoration: none;
  transition: color 0.2s ease;
}
.site-foot a:hover {
  color: #fff;
}
.site-foot a:focus-visible {
  outline: 2px solid #fdba8c;
  outline-offset: 3px;
  border-radius: 6px;
}
.site-foot__top {
  display: grid;
  grid-template-columns: minmax(15rem, 1.2fr) repeat(5, minmax(0, 1fr));
  gap: 2.5rem 2rem;
}
.site-foot__brand p {
  color: var(--on-night-soft);
  font-size: 0.95rem;
  max-width: 19rem;
  margin: 1rem 0 1.5rem;
}
.site-foot__brand .wordmark {
  color: #fff;
  font-size: 1.35rem;
}
.site-foot__brand .wordmark__mark {
  width: 2.1rem;
  height: 2.1rem;
}
.site-foot__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.site-foot__cta a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 1.2rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.92rem;
}
.site-foot__cta .go {
  color: #fff;
  background: linear-gradient(180deg, #c2410c, #9a3412);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 10px 24px -12px rgba(194, 65, 12, 0.9);
}
.site-foot__cta .go:hover {
  color: #fff;
  filter: brightness(1.08);
}
.site-foot__cta .in {
  color: var(--on-night);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}
.site-foot__cta .in:hover {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}
.site-foot h2 {
  font-family: var(--body);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0;
  color: #fff;
  margin: 0 0 1rem;
}
.site-foot ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}
.site-foot li a {
  font-size: 0.94rem;
  /* A thumb's worth of height without spreading the list out: the link grows,
     the row does not. */
  display: inline-block;
  padding: 0.15rem 0;
}
.site-foot__rule {
  margin: clamp(2.5rem, 5vw, 4rem) 0 1.5rem;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.site-foot__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
  color: var(--on-night-faint);
  font-size: 0.86rem;
}
.site-foot__bottom p {
  margin: 0;
}
/* LINKEDIN AS ITS LOGO, beside the line on the right (Mina, 12 October 2026: "put linkedin as a logo here"). */
.site-foot__right {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
}
.site-foot__social {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.6rem;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  transition: background-color 0.25s, transform 0.25s;
}
.site-foot__social svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: currentColor;
}
.site-foot__social:hover,
.site-foot__social:focus-visible {
  background: #0a66c2;
  transform: translateY(-2px);
}
/* THE NAME, AS BIG AS THE PAGE IS WIDE — the last thing on every page, cut
   off by the edge of the screen on purpose. Decoration: the real name is in
   the brand block above, so this one is hidden from a screen reader. */
.site-foot__giant {
  margin: 1.2rem 0 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(5rem, 19vw, 17rem);
  line-height: 0.78;
  letter-spacing: -0.06em;
  text-align: center;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.02));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  user-select: none;
  white-space: nowrap;
  transform: translateY(0.12em);
}

@media (max-width: 62rem) {
  .site-foot__top {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .site-foot__brand {
    grid-column: 1 / -1;
  }
}
@media (max-width: 34rem) {
  .site-foot__top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.2rem 1.25rem;
  }
  .site-foot li a {
    padding: 0.35rem 0;
  }
}

/* The old footer, where a page still has one, keeps working. */
.foot {
  background: var(--night);
  color: var(--on-night-soft);
  border-top: 0;
}
.foot a {
  color: var(--on-night-soft);
}

/* ── Forms: the sign-up, the sign-in finder and the "Ask us" boxes ────── */

/* ROUND CORNERS ONLY, AND !important BECAUSE OF ORDER, NOT OF WEIGHT.
   signup.css loads AFTER this file on the three form pages, so a plain rule
   here loses to its `border-radius: 2px` at equal specificity. Everything
   else those rules say — the 3:1 edge, the inset that says "this is a
   recess" — is measured and kept as it is. */
.field input[type="text"],
.field input[type="email"],
.field input[type="number"],
.field textarea,
.suffixed,
.ask input,
.ask textarea {
  border-radius: 0.9rem !important;
}
.suffixed input {
  border-radius: 0 !important;
}
.choice {
  border-radius: 1.1rem !important;
}
.choice:has(input:checked) {
  border-color: var(--accent) !important;
  background: #fbf1ea !important;
  box-shadow: 0 0 0 4px rgba(194, 65, 12, 0.1), var(--lift-1) !important;
}
.addon,
.invites,
.form-error,
.dnsrec,
.how__aside {
  border-radius: 1.1rem !important;
}
.btn--file {
  border-radius: 999px !important;
}

/* ── Two doors: Get started and Sign in (26 September 2026) ──────────────
   the owner, with a screenshot of /start.html: "imagine somebody who signs up as a
   normal user, not a company, and wants to sign in daily — how could he do
   it?" He could not. Sign in asked only for a WORKSPACE NAME, which somebody
   with no company does not have, so a personal profile had no door on this
   site at all. Both pages now ask the same question the same way — your
   company, or just you — on the same two cards.

   ON /start.html THE WHOLE CARD IS THE TARGET: the button's ::after is
   stretched over the card, so a tap anywhere on it lands, while the link's
   accessible name stays the button's few words instead of the whole card read
   aloud. ON /signin.html THE COMPANY CARD HOLDS A FORM, so nothing is stretched
   there — a card that is one link cannot also hold an input.

   One column on a phone, company first: most people signing in on a working
   morning work somewhere. The person's card is still on the first screen of
   an iPhone, because the sign-in cards carry no picture. */
.choose {
  position: relative;
  isolation: isolate;
  padding: clamp(2.2rem, 6vw, 4.5rem) 0 clamp(3.5rem, 8vw, 6rem);
}
/* Two soft lights behind the heading, one in each door's hue. */
.choose::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 34rem;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(36rem 20rem at 12% 8%, rgba(4, 120, 87, 0.11), transparent 70%),
    radial-gradient(36rem 20rem at 88% 4%, rgba(194, 65, 12, 0.12), transparent 70%);
}
.choose__head {
  max-width: 44rem;
  margin-bottom: clamp(1.8rem, 4vw, 2.8rem);
}
.choose__kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 1rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.choose__kicker::before {
  content: "";
  width: 1.6rem;
  height: 2px;
  border-radius: 2px;
  background: var(--grad);
}
.choose__title {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.choose__grad {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* The gradient's clip cuts descenders off in Safari without room below. */
  padding-bottom: 0.08em;
}
.choose__lede {
  margin: 1.1rem 0 0;
  max-width: 38rem;
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  color: var(--ink-soft);
}
.choose__note {
  margin: clamp(1.6rem, 3vw, 2.2rem) 0 0;
  color: var(--ink-soft);
}
.choose__note a {
  color: var(--accent);
  font-weight: 600;
  text-underline-offset: 3px;
}

.doors {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  max-width: 64rem;
}
@media (min-width: 46rem) {
  .doors {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
  }
}
/* On /signin.html the company card holds a form and the person's card holds a
   button, so stretching them to one height left a hole in the middle of the
   second. Each is as tall as what it holds. */
.doors--top {
  align-items: start;
}
.door {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(22, 20, 15, 0.08);
  border-radius: var(--r-lg);
  background: var(--raised);
  box-shadow: var(--lift-1);
  transition:
    transform 0.3s var(--ease-out),
    box-shadow 0.3s var(--ease-out);
}
.door--company {
  background: linear-gradient(165deg, var(--weak-plan), var(--raised) 58%);
}
.door--person {
  background: linear-gradient(165deg, var(--weak-accent), var(--raised) 58%);
}
.door__pic {
  margin: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--paper-deep);
}
.door__pic img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: 50% 40%;
  animation: door-drift 16s ease-in-out infinite alternate;
}
/* The second picture drifts out of step with the first. */
.door--person .door__pic img {
  transform-origin: 62% 30%;
  animation-delay: -8s;
}
@keyframes door-drift {
  from { transform: scale(1.03); }
  to { transform: scale(1.12) translate3d(-1.5%, -1%, 0); }
}
.door__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.95rem;
  padding: clamp(1.35rem, 3vw, 2rem);
}
.door__head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.door__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 0.95rem;
  background: var(--raised);
  color: var(--hue-plan);
  box-shadow: inset 0 0 0 1.5px rgba(4, 120, 87, 0.24), var(--lift-1);
}
.door--person .door__icon {
  color: var(--hue-accent);
  box-shadow: inset 0 0 0 1.5px rgba(194, 65, 12, 0.24), var(--lift-1);
}
.door__icon svg {
  width: 1.45rem;
  height: 1.45rem;
}
.door__tag {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.door__title {
  margin: 0.15rem 0 0;
  font-family: var(--display);
  font-size: clamp(1.3rem, 2.2vw, 1.65rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.door__text {
  margin: 0;
  max-width: 34rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.door__list {
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--ink-soft);
}
.door__list li {
  position: relative;
  margin-bottom: 0.45rem;
  padding-left: 1.35rem;
  line-height: 1.5;
}
.door__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.58em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--grad);
}
.door__price {
  margin: 0;
  font-weight: 700;
  color: var(--ink);
}
.door__go {
  margin-top: auto;
}
.door__small {
  margin: 0;
  font-size: 0.92rem;
  color: var(--ink-soft);
}
.door__small a {
  color: var(--accent);
  font-weight: 600;
  text-underline-offset: 3px;
}

/* The whole card is the button (on /start.html). */
.door--link:hover {
  transform: translateY(-4px);
  box-shadow: var(--float);
}
.door--link .door__go {
  position: static;
}
.door--link .door__go::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-lg);
}
/* The card lifts, not the button inside it: a transformed button would become
   the box its own ::after is measured against, and the target would shrink to
   the button under the pointer. */
.door--link .door__go,
.door--link .door__go:hover {
  transform: none;
}
/* The ring goes round the card the whole card is. Only where :has() exists —
   without it, taking the button's own ring away would leave no ring at all. */
@supports selector(:has(a)) {
  .door--link:has(.door__go:focus-visible) {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
  }
  .door--link .door__go:focus-visible {
    outline: none;
  }
}

/* The workspace form inside the company card (on /signin.html). */
.door form,
.door #stuck {
  width: 100%;
}
.door .field {
  margin-bottom: 0.9rem;
}
.door .fineprint {
  margin: 0;
}
.door__actions {
  display: flex;
}

@media (max-width: 45.99rem) {
  .door__pic {
    aspect-ratio: 16 / 8;
  }
  /* The title already says it; on a phone this line would push the second
     card below the first screen, where somebody with only a profile would
     never know their door is there. */
  .door__intro {
    display: none;
  }
  .door__go,
  .door__actions .btn {
    width: 100%;
  }
}

/* The switch at the top of both pages, drawn on a phone only — see site.js. */
.door-switch {
  display: none;
}
@media (max-width: 45.99rem) {
  .door-switch:not([hidden]) {
    display: flex;
    gap: 0.3rem;
    margin: 0 0 1rem;
    padding: 0.3rem;
    border: 1px solid rgba(22, 20, 15, 0.08);
    border-radius: 999px;
    background: var(--raised);
    box-shadow: var(--lift-1);
  }
  .door-switch__btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 2.9rem;
    padding: 0 0.9rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    font: inherit;
    font-weight: 700;
    color: var(--ink-soft);
    cursor: pointer;
    transition:
      background-color 0.2s ease,
      color 0.2s ease;
  }
  .door-switch__btn svg {
    width: 1.1rem;
    height: 1.1rem;
  }
  .door-switch__btn[aria-pressed="true"] {
    background: var(--ink);
    color: var(--paper);
  }
  .doors[data-switched] > .door.is-off {
    display: none;
  }
}

/* ── /signin.html: two big buttons, then one question ──────────────────────
   the owner, 27 September 2026: "2 big buttons, one for companies and another for
   individuals". Each is the whole card — a link, not a form — so it is one
   press whatever the screen; the company's leads to the workspace-name step
   below it, the person's straight to their sign-in. Both fit on the first
   screen of a phone, which the two old cards did not. */
.pick {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  max-width: 60rem;
}
@media (min-width: 46rem) {
  .pick {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
  }
}
.pick__btn {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.15rem;
  min-height: 10rem;
  padding: clamp(1.35rem, 3vw, 2rem);
  border: 1px solid rgba(22, 20, 15, 0.08);
  border-radius: var(--r-lg);
  background: var(--raised);
  box-shadow: var(--lift-1);
  color: var(--ink);
  text-decoration: none;
  transition:
    transform 0.3s var(--ease-out),
    box-shadow 0.3s var(--ease-out),
    border-color 0.2s ease;
}
.pick__btn--company {
  background: linear-gradient(160deg, var(--weak-plan), var(--raised) 64%);
}
.pick__btn--person {
  background: linear-gradient(160deg, var(--weak-accent), var(--raised) 64%);
}
.pick__btn:hover {
  transform: translateY(-4px);
  box-shadow: var(--float);
  border-color: rgba(22, 20, 15, 0.14);
}
.pick__btn:active {
  transform: translateY(-1px) scale(0.99);
}
.pick__btn:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
.pick__icon {
  display: grid;
  place-items: center;
  width: 3.7rem;
  height: 3.7rem;
  border-radius: 1.2rem;
  background: var(--raised);
  color: var(--hue-plan);
  box-shadow: inset 0 0 0 1.5px rgba(4, 120, 87, 0.24), var(--lift-1);
}
.pick__btn--person .pick__icon {
  color: var(--hue-accent);
  box-shadow: inset 0 0 0 1.5px rgba(194, 65, 12, 0.24), var(--lift-1);
}
.pick__icon svg {
  width: 1.8rem;
  height: 1.8rem;
}
.pick__words {
  display: grid;
  gap: 0.3rem;
  min-width: 0;
}
.pick__tag {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.pick__title {
  font-family: var(--display);
  font-size: clamp(1.45rem, 2.6vw, 1.95rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
}
.pick__text {
  line-height: 1.5;
  color: var(--ink-soft);
}
.pick__arrow {
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 999px;
  font-size: 1.25rem;
  color: #fff;
  transition: transform 0.25s var(--ease-out);
}
.pick__btn--company .pick__arrow {
  background: linear-gradient(180deg, #05966a, #047857);
  box-shadow: 0 10px 22px -12px rgba(4, 120, 87, 0.8);
}
.pick__btn--person .pick__arrow {
  background: linear-gradient(180deg, #c2410c, #9a3412);
  box-shadow: 0 10px 22px -12px rgba(194, 65, 12, 0.8);
}
.pick__btn:hover .pick__arrow {
  transform: translateX(4px);
}
.pick__small {
  margin: 1.1rem 0 0;
  color: var(--ink-soft);
}
.pick__small a {
  color: var(--accent);
  font-weight: 600;
  text-underline-offset: 3px;
}
/* The workspace-name step: one card, the width of what it asks. */
.step-wrap {
  max-width: 36rem;
}
.step__back {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.75rem;
  margin: -0.35rem 0 0 -0.35rem;
  padding: 0 0.9rem;
  border: 1px solid rgba(22, 20, 15, 0.1);
  border-radius: 999px;
  background: var(--raised);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
}
.step__back:hover {
  color: var(--ink);
  border-color: var(--ink);
}
.step__back:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
/* THE hidden ATTRIBUTE MUST WIN. These are display:grid and display:flex
   above, and an author rule beats the browser's own [hidden] — so without
   this the script would "hide" a step that stayed on the screen. */
.pick[hidden],
.pick__small[hidden],
.door.step[hidden],
.step__back[hidden] {
  display: none;
}
@media (max-width: 45.99rem) {
  .pick__btn {
    min-height: 7.5rem;
    gap: 0.95rem;
  }
  .pick__icon {
    width: 3.1rem;
    height: 3.1rem;
    border-radius: 1rem;
  }
  .pick__icon svg {
    width: 1.5rem;
    height: 1.5rem;
  }
  .pick__arrow {
    width: 2.5rem;
    height: 2.5rem;
  }
  .pick__text {
    font-size: 0.95rem;
  }
  /* On the step the intro stays: it is the only card on the screen now. */
  .step .door__intro {
    display: block;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pick__btn,
  .pick__btn:hover,
  .pick__arrow,
  .pick__btn:hover .pick__arrow {
    transition: none;
    transform: none;
  }
  .door,
  .door--link:hover {
    transition: none;
    transform: none;
  }
  .door__pic img {
    animation: none;
    transform: none;
  }
  .door-switch__btn {
    transition: none;
  }
}

/* ── "New", for three days after a feature goes live (site.js removes it) ── */
.new {
  display: inline-block;
  margin-right: 0.35rem;
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.72em;
  font-weight: 600;
  letter-spacing: 0.02em;
  vertical-align: 0.12em;
}