/* ============================================================
   Bard — marketing site styles.

   Everything here reads from `colors_and_type.css`, which `build.sh`
   copies in from `design-system/project/` at build time. No hex values
   below, no font stacks, no spacing magic numbers — if a value is worth
   naming it already has a name in the token file, and if it doesn't, the
   token file is where it should be added. That is the whole point of
   sharing tokens rather than components.

   The design system's hard rules apply here as they do in the app: flat
   backgrounds only (no gradients), no emoji, no illustration or stock
   photography, one brand pink reserved for the primary CTA, sentence case
   throughout. A marketing page is allowed a larger type scale than the
   app — copy read on a laptop at desk distance, not a phone at arm's
   length — but the scale below still steps off the app's 24px title
   rather than inventing a parallel system.

   Two widths, not one (changed 2026-08-14). `--site-measure` is the prose
   measure and still governs every *paragraph*; `--site-wide` is the page
   frame that lets a screenshot sit beside its claim. The earlier version
   applied the prose measure to the whole document, which is correct for an
   essay and wrong for a product page — it left ~60% of a laptop viewport
   empty and reduced the features to an FAQ.

   Device screenshots are framed with a border and a radius only. A drawn
   iPhone body would be illustration, which the design system rules out, and
   a photograph of a phone would be marketing photography, which it also
   rules out. Chrome is allowed; pictures of hardware are not.

   BEM-flavored class names (`bard-site__<part>`) mirror the app's
   `bard__<component>__<part>` convention. The `-site` suffix keeps the
   two namespaces from colliding if this CSS is ever loaded next to the
   design system's own component specimens.
   ============================================================ */

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

body {
  margin: 0;
}

/* ---------- Marketing type scale ----------
   Extends the app's 11/13/15/18/24 upward for headline sizes the app has
   no use for. Fluid via clamp() so the hero doesn't need a breakpoint to
   stop overflowing a phone — the min values are the honest mobile sizes,
   the max values are the desktop ones. */
:root {
  --fs-site-hero: clamp(32px, 5vw, 52px);
  --fs-site-section: clamp(22px, 3vw, 30px);
  --fs-site-lede: clamp(17px, 2vw, 20px);

  /* The measure for prose. Text set much wider than this stops being
     scannable regardless of how much room the viewport has, so it still
     caps every paragraph — it just no longer caps the page. */
  --site-measure: 34rem;
  --site-gutter: var(--space-xl);

  /* The page frame. Wide enough for a 300px screenshot beside a full
     measure of prose, with the gutters added back on top so text aligns
     to the same rail in every section. */
  --site-wide: calc(64rem + var(--site-gutter) * 2);

  /* Rendered width of a phone screenshot in a band. The source images are
     552px wide (a 1206px iPhone 17 Pro capture, halved for retina), so
     this displays them at roughly 2x density. */
  --site-shot: 300px;
}

.bard-site {
  background: var(--bg-primary);
  color: var(--fg-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  /* Bard is a dark-first product on every surface it has. The page
     declares that so form controls and scrollbars follow, and so a
     light-mode browser doesn't flash white before the CSS lands. */
  color-scheme: dark;
  -webkit-font-smoothing: antialiased;
}

/* Shared page rail. Every full-bleed section puts its content in one of
   these so nothing drifts a few pixels off the column above it. */
.bard-site__masthead-inner,
.bard-site__hero,
.bard-site__band,
.bard-site__trio,
.bard-site__pricing-inner,
.bard-site__footer-inner {
  max-width: var(--site-wide);
  margin-inline: auto;
  padding-inline: var(--site-gutter);
}

/* ---------- Masthead ---------- */

.bard-site__masthead {
  border-bottom: 1px solid var(--border);
}

.bard-site__masthead-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  padding-block: var(--space-lg);
}

.bard-site__wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--fg-primary);
  font-size: var(--fs-heading);
  font-weight: var(--fw-bold);
  text-decoration: none;
}

.bard-site__mark {
  display: block;
  /* The quill is the only image in the page chrome, matching the app rule
     that reserves imagery for podcast artwork and app screenshots. */
  height: 28px;
  width: auto;
}

.bard-site__masthead-link {
  color: var(--fg-secondary);
  font-size: var(--fs-body);
  text-decoration: none;
}

.bard-site__masthead-link:hover {
  color: var(--fg-primary);
}

/* ---------- Hero ----------
   Single column until there is genuinely room for two. The breakpoint is
   the point at which the prose measure and a screenshot stop fighting,
   not a device width. */

.bard-site__hero {
  display: grid;
  gap: var(--space-xxl);
  padding-block: calc(var(--space-xxl) * 2) var(--space-xxl);
}

@media (min-width: 60rem) {
  .bard-site__hero {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: calc(var(--space-xxl) * 2);
  }
}

.bard-site__hero-copy {
  max-width: var(--site-measure);
}

/* The genre line. Muted and small on purpose — it is a signpost for people
   scanning for their tribe, not a second headline competing with the
   first. Sentence case, per the design system; never ALL CAPS. */
.bard-site__eyebrow {
  margin: 0 0 var(--space-md);
  color: var(--fg-muted);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
}

.bard-site__hero-title {
  margin: 0;
  font-size: var(--fs-site-hero);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  /* Inter's default tracking is loose at display sizes; the app never hits
     these so the token file has no opinion on it. */
  letter-spacing: -0.02em;
  /* Even out the ragged edge rather than hand-placing a <br>. A forced
     break can't be right at every width, and a headline broken mid-thought
     reads as a bug. Browsers without `balance` just wrap normally, which
     is the same result minus the tidiness. */
  text-wrap: balance;
}

.bard-site__hero-sub {
  margin: var(--space-xl) 0 0;
  color: var(--fg-secondary);
  font-size: var(--fs-site-lede);
  line-height: var(--lh-snug);
}

.bard-site__cta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-lg);
  margin-top: var(--space-xxl);
}

/* The only pink on the page, and both instances are the same action —
   "join the beta", once in the hero and once where the beta is explained.
   Brand pink is reserved for the primary action in the app, and a landing
   page offering two *different* primary actions is offering none. */
.bard-site__cta {
  display: inline-block;
  padding: var(--space-md) var(--space-xl);
  border-radius: var(--radius-pill);
  background: var(--brand);
  color: var(--fg-on-brand);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  /* Press feedback is opacity only, per the design system — no scale, no
     color shift, no shadow. */
  transition: opacity 120ms ease;
}

.bard-site__cta:hover {
  opacity: 0.8;
}

.bard-site__cta:active {
  opacity: 0.7;
}

.bard-site__cta-note {
  color: var(--fg-muted);
  font-size: var(--fs-caption);
}

.bard-site__hero-shot {
  display: flex;
  justify-content: center;
}

/* ---------- Device frame ----------
   A border and a radius, nothing else. The radius matches the app's own
   full-player artwork radius rather than imitating a hardware corner.

   The frames show the *top* of each screen rather than the whole capture,
   for two reasons. A full 1206x2622 phone screen rendered at a readable
   width is ~650px tall, which left each feature band that tall with a
   single paragraph floating in the middle of it. And the interesting part
   of every one of these screens — the hero artwork, the recommendation
   card, the transport controls — is in the top two thirds; the bottom is
   the mini-player, which repeats on every screen anyway.

   `object-position: top` with a capped height is what does the cropping,
   so the source PNGs stay untouched full captures and the crop stays a
   presentation decision we can change without recapturing. */

.bard-site__device {
  margin: 0;
  width: var(--site-shot);
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  /* The screenshot's own navy runs to the frame edge; clipping keeps the
     corners honest without painting a second background behind it. */
  overflow: hidden;
  background: var(--bg-primary);
}

.bard-site__device img {
  display: block;
  width: 100%;
  height: auto;
}

/* Cropped variants. No fade at the cut line — a gradient mask is exactly
   what the design system's flat-background rule forbids, and a hard edge
   inside a rounded frame reads as a screen continuing past the frame,
   which is what is actually happening. */
.bard-site__device--crop img {
  height: 480px;
  object-fit: cover;
  object-position: top;
}

.bard-site__device--band img {
  height: 430px;
  object-fit: cover;
  object-position: top;
}

/* Anchored to the bottom instead. The full player is the one screen whose
   evidence is at the *bottom*: the copy beside it claims Bard always knows
   what the next episode is, and the next-up row naming it is the last thing
   on the screen. Cropping this one from the top would show four hundred
   pixels of cover art and quietly drop the proof. */
.bard-site__device--bottom img {
  object-position: bottom;
}

/* ---------- Feature bands ----------
   Dividers do the spacing job, not gaps — the app's vertical rhythm rule,
   which is why these are bordered rows rather than floating cards. */

.bard-site__band {
  display: grid;
  gap: var(--space-xxl);
  align-items: center;
  padding-block: calc(var(--space-xxl) * 1.5);
  border-top: 1px solid var(--border);
}

@media (min-width: 60rem) {
  .bard-site__band {
    grid-template-columns: 1fr auto;
    gap: calc(var(--space-xxl) * 2);
  }

  /* Alternate which side the screenshot sits on. Source order stays
     copy-then-image so the reading order is right for screen readers and
     for the single-column layout; only the painted order flips.

     The column template has to flip with it. `order` alone moves the
     elements but not the track sizes, so the image landed in the `1fr`
     track (floating in the middle of a wide column) while the prose was
     squeezed into the shrink-to-fit one. */
  .bard-site__band--reverse {
    grid-template-columns: auto 1fr;
  }

  .bard-site__band--reverse .bard-site__band-copy {
    order: 2;
  }

  .bard-site__band--reverse .bard-site__device--band {
    order: 1;
  }
}

.bard-site__band-copy {
  max-width: var(--site-measure);
}

.bard-site__band-title {
  margin: 0;
  font-size: var(--fs-site-section);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
}

.bard-site__band-body {
  margin: var(--space-lg) 0 0;
  color: var(--fg-secondary);
  font-size: var(--fs-site-lede);
  line-height: var(--lh-snug);
}

.bard-site__device--band {
  justify-self: center;
}

/* ---------- Trio ----------
   The claims with no screenshot worth showing. Three columns where there
   is room, stacked where there isn't. */

.bard-site__trio {
  display: grid;
  gap: var(--space-xxl);
  padding-block: calc(var(--space-xxl) * 1.5);
  border-top: 1px solid var(--border);
}

@media (min-width: 48rem) {
  .bard-site__trio {
    grid-template-columns: repeat(3, 1fr);
  }
}

.bard-site__trio-item {
  max-width: var(--site-measure);
}

.bard-site__trio-title {
  margin: 0;
  font-size: var(--fs-heading);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
}

.bard-site__trio-body {
  margin: var(--space-md) 0 0;
  color: var(--fg-secondary);
  line-height: var(--lh-normal);
}

/* ---------- Pricing ----------
   Two cards, and the paid one is *not* pink. Brand pink means "the primary
   action" everywhere else in the product; spending it on a price card
   would make the page's actual CTA compete with a paragraph. The paid tier
   is distinguished by elevation, which is how the app distinguishes
   everything else. */

.bard-site__pricing {
  border-top: 1px solid var(--border);
}

.bard-site__pricing-inner {
  padding-block: calc(var(--space-xxl) * 1.5);
}

.bard-site__section-title {
  margin: 0 0 var(--space-xl);
  font-size: var(--fs-site-section);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
}

.bard-site__tiers {
  display: grid;
  gap: var(--space-lg);
}

@media (min-width: 48rem) {
  .bard-site__tiers {
    grid-template-columns: repeat(2, 1fr);
  }
}

.bard-site__tier {
  padding: var(--space-xl);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
}

/* Elevation, not colour — the app's own "this one is raised" signal. */
.bard-site__tier--paid {
  background: var(--bg-elevated);
}

.bard-site__tier-name {
  margin: 0;
  font-size: var(--fs-heading);
  font-weight: var(--fw-semibold);
}

.bard-site__tier-body {
  margin: var(--space-md) 0 0;
  color: var(--fg-secondary);
  line-height: var(--lh-normal);
}

.bard-site__pricing-note {
  margin: var(--space-lg) 0 0;
  color: var(--fg-muted);
  font-size: var(--fs-caption);
  max-width: var(--site-measure);
}

/* ---------- Beta ----------
   The one raised surface that isn't a price card, using the app's card
   tone rather than a shadow. Elevation in Bard is a lightness step, not a
   drop shadow. */

.bard-site__beta {
  max-width: calc(var(--site-measure) + var(--site-gutter) * 2);
  margin: var(--space-xxl) auto calc(var(--space-xxl) * 2);
  padding: var(--space-xl);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
}

.bard-site__beta-title {
  margin: 0;
  font-size: var(--fs-site-section);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
}

.bard-site__beta-body {
  margin: var(--space-md) 0 var(--space-xl);
  color: var(--fg-secondary);
}

/* ---------- Footer ---------- */

.bard-site__footer {
  border-top: 1px solid var(--border);
  color: var(--fg-muted);
  font-size: var(--fs-caption);
}

.bard-site__footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  padding-block: var(--space-xl);
}

.bard-site__footer-line {
  margin: 0;
}

.bard-site__footer-nav {
  display: flex;
  gap: var(--space-lg);
}

.bard-site__footer-link {
  color: var(--fg-muted);
  text-decoration: none;
}

.bard-site__footer-link:hover {
  color: var(--fg-primary);
}

/* Keyboard focus has to stay visible: the CTA's hover state is opacity
   only, which is invisible to anyone tabbing. */
.bard-site a:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* The CTA transition is decoration; honour a stated preference against it. */
@media (prefers-reduced-motion: reduce) {
  .bard-site__cta {
    transition: none;
  }
}