/* Base styles, lifted from the <helmet> blocks of the Claude Design export.
   Page layout still lives in inline style attributes on the markup itself --
   that is how the design was authored, and this pass did not touch it. */

*,
*::before,
*::after { box-sizing: border-box; }

/* The design is a fixed light palette -- it does not adapt to the OS. Saying so
   keeps the browser from theming what it controls: without this the <select>
   popup on /contact/ renders dark in dark mode while its <option> elements carry
   an inline `color: #0E1113`, which is dark text on a dark list. It also opts out
   of Chrome's Auto Dark Theme on Android, which force-inverts pages that stay
   silent. */
:root { color-scheme: light; }

html { scroll-behavior: smooth; }

/* The cream lives on .page, so without this the canvas behind it is the browser
   default -- black in dark mode -- and shows through on overscroll. */
html,
body { background: #F7F4EF; }

body { margin: 0; }

a { color: #0B5C54; text-decoration: none; }
a:hover { color: #0E1113; }

/* the legal pages underline on hover; the marketing pages do not */
body.legal a:hover { text-decoration: underline; }

input::placeholder,
textarea::placeholder { color: rgba(247, 244, 239, 0.35); }

/* the wrapper every page shared in the export */
.page {
  font-family: 'Manrope', sans-serif;
  background: #F7F4EF;
  color: #0E1113;
  overflow-x: hidden;
}

/* ADDED in the unbundle, not present in the export ---------------------- */

/* keyboard users need a way past the nav */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: #0E1113;
  color: #F7F4EF;
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 14px;
  padding: 12px 20px;
  border-radius: 0 0 12px 0;
}
.skip-link:focus {
  left: 0;
  color: #F7F4EF;
}

/* The layout lives in inline style attributes, and an inline `display: flex`
   outranks the user agent's [hidden] rule -- so hidden elements would still
   show. Needed by the footer's terms disclosure. */
[hidden] { display: none !important; }

/* the export set scroll-behavior: smooth unconditionally */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* anchor links land under the sticky nav */
:target { scroll-margin-top: 100px; }

/* App download buttons with no destination yet.
   The design's padding, radius and type are kept from the original inline style;
   the palette comes from here, chosen by what the button sits on. Two contexts:
   the teal band on the home page, and the dark hero photo and card on /drive/.
   Driven by site.links in pages.json -- give a link a URL and it goes back to
   being an ordinary button. */
.soon {
  display: inline-flex;
  position: relative;
}
.soon__btn {
  cursor: not-allowed;
  user-select: none;
  background: rgba(6, 32, 28, 0.22);
  /* 0.62 measured 3.26:1 against the pill, which is not readable; 0.85 gives
     5.28:1 while the pill stays a soft 1.53:1 against the teal band, so it
     still reads as inactive rather than as a live button */
  color: rgba(6, 32, 28, 0.85);
}
/* Out of flow on purpose. In flow it added its own height above the button,
   which pushed the pill up inside the bottom-aligned card on /drive/ and left
   it sitting higher than the live button in the card beside it. */
.soon__note {
  position: absolute;
  top: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  pointer-events: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(6, 32, 28, 0.8);
}
/* On dark the first pass was far too faint to read; these land around 5:1
   against their backgrounds while still reading as inactive. */
.soon--on-dark .soon__btn {
  background: rgba(247, 244, 239, 0.20);
  color: rgba(247, 244, 239, 0.78);
}
.soon--on-dark .soon__note {
  color: rgba(247, 244, 239, 0.82);
}