/* The signed-out landing page.
 *
 * The design is ~/Code/lab-landing-template/index.html, which is Tailwind v4
 * compiled in the browser. This app has no Tailwind build and no 400 KB script
 * budget, so the same design is written out here by hand. The colour tokens and
 * the radii are the template's, unchanged.
 *
 * Light only, on purpose. The palette is cream and orange, and inverting it is
 * a redesign, not a media query. Nothing else in the app links this file.
 */

:root {
  --canvas: #ffffff;
  --surface: #f7f4ef;
  --hairline: rgb(0 0 0 / 0.1);
  --ink: #000000;
  --muted: #656463;
  --flame: #ff4f00;
  --ember: #c93400;

  --radius-panel: 1rem;
  --radius-card: 0.75rem;

  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0' intercept='0.09'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font: 1rem/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Every section is a padded band around one 768px column. */
.wrap { max-width: 48rem; margin: 0 auto; padding: 0 1.5rem; }
section { padding: 3rem 0; }
.hero { padding: 4rem 0 3rem; }

@media (min-width: 40rem) {
  section { padding: 4rem 0; }
  .hero { padding: 5rem 0 4rem; }
}

/* Type */

h1 {
  margin: 0;
  max-width: 30ch;
  font-size: 2.25rem;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

h2 {
  margin: 0;
  max-width: 40ch;
  font-size: 1.5rem;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

h2.big { max-width: 24ch; font-size: 1.875rem; }

h3 { margin: 0; font-size: 1.25rem; line-height: 1.4; font-weight: 600; }

@media (min-width: 40rem) {
  h1 { font-size: 3rem; }
  h2 { font-size: 1.875rem; }
  h2.big { font-size: 2.5rem; }
}

p { margin: 0; text-wrap: pretty; }

.lede {
  margin-top: 1.25rem;
  max-width: 48ch;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--muted);
}

.eyebrow { color: var(--muted); }
.note { margin-top: 1.25rem; color: var(--muted); }

/* Not a footnote in the footer. Somebody has to read this before they hand
   over a nemlig password, so it sits under the hero in full ink. */
.disclaimer { margin-top: 0.75rem; font-size: 0.9375rem; }
.note a, a.link { color: var(--ember); text-decoration: underline; text-underline-offset: 2px; }

/* Buttons. One filled button on the page, in the hero. */

.actions { margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }

.button {
  display: inline-block;
  padding: 0.625rem 1rem;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  background: var(--ink);
  color: #ffffff;
  font: inherit;
  font-weight: 500;
  text-decoration: none;
}

.button:hover { background: rgb(0 0 0 / 0.85); }
.button:focus-visible { outline: 2px solid var(--flame); outline-offset: 2px; }

.button.quiet { background: var(--canvas); color: var(--ink); border-color: var(--hairline); }
.button.quiet:hover { background: var(--surface); }
.button.quiet:focus-visible { outline-color: var(--ink); }

/* Header and footer */

.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-top: 1.25rem; padding-bottom: 1.25rem; }
.top .brand { color: var(--ink); font-size: 1.125rem; font-weight: 600; letter-spacing: -0.02em; text-decoration: none; }
.top nav { display: flex; gap: 1.5rem; }
.top nav a { color: var(--muted); text-decoration: none; }
.top nav a:hover { color: var(--ink); }

.bottom { color: var(--muted); }
.bottom .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; padding-top: 2rem; padding-bottom: 2rem; }
.bottom ul { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.bottom a { color: var(--muted); text-decoration: none; }
.bottom a:hover { color: var(--ink); }

/* The hero drawing: a chat, not a screenshot. Static — no element in here
   responds to anything, and the panel is aria-hidden. */

.chat { margin-top: 3rem; }

.chat-window {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-panel);
  background: var(--surface);
  overflow: hidden;
}

.chat-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--hairline);
}

/* Claude's dot. A ring, so it reads as a mark and not as a bullet. */
.chat-bar .mark {
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 999px;
  background: var(--flame);
  box-shadow: inset 0 0 0 0.1875rem var(--surface), 0 0 0 1px var(--hairline);
}

.chat-title { font-size: 0.8125rem; font-weight: 500; color: var(--muted); }

.chat-body { padding: 1.25rem 1rem; display: grid; gap: 1.25rem; }

.msg .who {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  margin-bottom: 0.375rem;
}

.msg .bubble { border-radius: 1rem; padding: 0.75rem 1rem; line-height: 1.55; }

/* The person, right and dark. The assistant, left and cream. */
.msg.me { display: flex; flex-direction: column; align-items: flex-end; }
.msg.me .who { margin-right: 0.25rem; }
.msg.me .bubble {
  max-width: 34ch;
  border-bottom-right-radius: 0.375rem;
  background: var(--ink);
  color: var(--canvas);
}

.msg.them .bubble {
  max-width: 46ch;
  border-bottom-left-radius: 0.375rem;
  background: var(--canvas);
}

.msg.them .bubble > p + p { margin-top: 0.75rem; }

/* The basket the assistant built, as a card inside its message. */
.basket {
  margin: 0.75rem 0;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--hairline);
  border-radius: 0.625rem;
}

.basket-head {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
}

.basket ul { list-style: none; margin: 0.5rem 0 0; padding: 0; }

.basket li {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.25rem 0;
  font-size: 0.9375rem;
}

.basket .qty { color: var(--muted); font-variant-numeric: tabular-nums; }
.basket .amt { min-width: 4.5rem; text-align: right; font-variant-numeric: tabular-nums; }
.basket .more .item { color: var(--muted); }

.basket-total {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--hairline);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* The composer. It does nothing; it tells you where you would type. */
.chat-input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 1rem 1rem;
  padding: 0.625rem 0.625rem 0.625rem 1rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--canvas);
  color: var(--muted);
}

.chat-input .send {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--canvas);
  flex: none;
}

.chat-input .send svg { width: 0.875rem; height: 0.875rem; }

@media (min-width: 40rem) {
  .chat-body { padding: 1.5rem; }
  .chat-input { margin: 0 1.5rem 1.5rem; }
}

/* The story */

.prose { margin-top: 1.5rem; max-width: 56ch; font-size: 1.125rem; line-height: 1.6; color: var(--muted); }
.prose p + p { margin-top: 1.25rem; }

/* Three boxed steps */

.steps { margin: 2rem 0 0; padding: 0; display: grid; gap: 1rem; list-style: none; }
.steps li { padding: 1.5rem; border-radius: var(--radius-card); background: var(--surface); }
.steps h3 { margin-top: 0.25rem; }
.steps p { margin-top: 0.75rem; max-width: 56ch; font-size: 1.125rem; line-height: 1.6; color: var(--muted); }

@media (min-width: 40rem) { .steps li { padding: 2rem; } }

/* The features carry no boxes. Three boxed steps followed by six boxed
   features would turn the page into cards. */

.features { margin: 2rem 0 0; display: grid; gap: 1.75rem; }
.features .icon { width: 1.5rem; height: 1.5rem; display: block; margin-bottom: 0.625rem; }
.features dt { font-weight: 600; }
.features dd { margin: 0.25rem 0 0; color: var(--muted); text-wrap: pretty; }

@media (min-width: 40rem) {
  .features { grid-template-columns: 1fr 1fr; column-gap: 1.5rem; }
}

/* The closing box, and the only decoration on the page. */

.cta-wrap { max-width: 54rem; margin: 0 auto; }

.cta {
  padding: 3.5rem 1.5rem 2rem;
  background-color: var(--surface);
  background-image:
    var(--noise),
    radial-gradient(140% 68% at 50% 100%,
      var(--flame) 0%, #ff8b4c 16%, #ffab77 30%, #ffcaa4 44%, #ffe4cd 60%, var(--surface) 82%);
}

.cta h2 { margin-top: 0.5rem; max-width: 35ch; }
.cta .eyebrow, .cta .lede { color: rgb(0 0 0 / 0.7); }
.cta .button.quiet { border-color: transparent; }

@media (min-width: 40rem) {
  .cta h2 { font-size: 2.25rem; }
}

/* 54rem is the width at which the column can give up 3rem on each side without
   the box running off the screen. Under it there is nowhere to go, so the box
   spans the whole width and the text still lines up. */
@media (min-width: 54rem) {
  .cta-wrap { padding: 0 1.5rem; }
  .cta { padding: 5rem 3rem 3rem; border-radius: var(--radius-panel); }
}