/* ─────────────────────────────────────────────────────────────────────────
   Atlas AI — design tokens (v2, Claude Design handoff)

   Shared CSS custom properties for every code component. Imported once per
   component so each bundle is self-contained in Webflow. Values mirror the
   `:root` block in index-base.html — keep them in sync; do not add new colors
   to the palette (see CLAUDE.md § "Things NOT to do").
   ───────────────────────────────────────────────────────────────────────── */
:host {
  /* Paper (backgrounds) */
  --paper:      #F4EFE5;
  --paper-alt:  #EBE4D4;
  --paper-deep: #DDD3BC;
  --paper-86:   rgba(245, 239, 229, 0.86);
  --paper-74:   rgba(245, 239, 229, 0.74);
  --paper-55:   rgba(245, 239, 229, 0.55);
  --paper-22:   rgba(245, 239, 229, 0.22);
  --paper-10:   rgba(245, 239, 229, 0.10);

  /* Ink (text) */
  --ink:    #1A1612;
  --ink-85: rgba(26, 22, 18, 0.86);
  --ink-70: rgba(26, 22, 18, 0.72);
  --ink-50: rgba(26, 22, 18, 0.5);
  --ink-30: rgba(26, 22, 18, 0.3);
  --ink-20: rgba(26, 22, 18, 0.18);
  --ink-14: rgba(26, 22, 18, 0.14);
  --ink-08: rgba(26, 22, 18, 0.08);

  /* Ochre (accent) */
  --ochre:       #8C6A3D;
  --ochre-light: #D9B98A;
  --ochre-soft:  rgba(140, 106, 61, 0.14);
  --gold:        #B89968;

  /* Type */
  --serif: "Source Serif 4", "Source Serif Pro", Georgia, serif;
  --sans:  "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Layout */
  --wrap-max:        1312px;
  --wrap-wide-max:   1440px;
  --wrap-narrow-max: 920px;
  --pad-x:           64px;
}

@media (max-width: 900px) {
  :host {
    --pad-x: 24px;
  }
}

/* Shared call-to-action. These rules only apply when the CTA styles itself
   (variant path) — host sections that pass their own `className` keep owning
   every visual property, so Nav / Hero / Subscribe / Product are untouched.
   `wf-` prefixed, self-contained, tokens via var().

   The look is composed from five independent axes, so a class list reads
   shell + size + case, plus the accent when it is asked for:
   `wf-cta wf-cta--solid wf-cta--regular wf-cta--sentence wf-cta--accent`.
   The arrow is markup rather than a class (see Cta.tsx). */

/* In Webflow a standalone Cta is its own custom element with a shadow root.
   Give the host a sensible box so it behaves like the control inside it —
   otherwise it lays out as an inline box and ignores the flex parent's
   alignment. No-op in the local React render, where there is no shadow root. */
:host {
  display: inline-flex;
  max-width: 100%;
}

.wf-cta {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  margin: 0;
  border: none;
  background: none;
  color: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* Every CTA gets a visible keyboard focus ring. `currentColor` keeps it legible
   on paper and ink backgrounds alike, and the offset lifts it clear of fills
   and underlines. */
.wf-cta:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

/* ─── Sizes ───────────────────────────────────────────────────────
   Two steps, calibrated to the scales already in the design: Regular matches
   the nav bar's compact control (10/18 padding, 36px box) and the nav link's
   14px type; Large matches the hero's page-level CTA (.wf-hero-cta — 15/26
   padding) and its 12px underline sibling.

   Size owns the box and the type scale; font family, casing and tracking belong
   to the case classes below, so a Regular Solid borrows the nav's proportions
   without being committed to its typography.

   Height: Large clears 44px (the WCAG 2.5.5 AAA target). Regular is the nav's
   36px control, which clears the 24px AA minimum (2.5.8) but not 44px — that is
   the cost of matching the nav bar, so prefer Large wherever there is room.
   The Link variant is exempt: it is an inline text link, and a minimum box would
   stretch every row of a footer column (see the variant below). */
.wf-cta--regular:not(.wf-cta--link) {
  min-height: 36px;
}
.wf-cta--large:not(.wf-cta--link) {
  min-height: 44px;
}

/* Gap between the text and the arrow. Tight at Regular so a compact button reads
   like the plain "Talk to us →" it replaces, roomier at Large. It sits on the
   label, which is the row holding both (see the Arrow section). */
.wf-cta--regular .wf-cta-label {
  gap: 6px;
}
.wf-cta--large .wf-cta-label {
  gap: 10px;
}

/* ─── Case — mono caps or plain sans ─────────────────────────────
   The `uppercase` flag picks one of these two, and one is always applied, so no
   variant sets a font family or a casing of its own. Tracking travels with the
   casing: caps need the 1.5px the brand's buttons carry, sentence case wants
   almost none. Both are two classes deep so they win over the variant blocks
   below regardless of source order.

   `text-transform: none` rather than `unset` — text-transform inherits, and
   `unset` on an inherited property means `inherit`, which would let a host
   section's uppercase leak in through the shadow boundary. */
.wf-cta.wf-cta--uppercase {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 1.5px;
}
.wf-cta.wf-cta--sentence {
  font-family: var(--sans);
  text-transform: none;
  letter-spacing: 0.2px;
}

/* ─── Solid — ink-filled button ───────────────────────────────── */
.wf-cta--solid {
  background: var(--ink);
  color: var(--paper);
  font-size: 13px;
  transition: opacity 160ms ease;
}
.wf-cta--solid:hover {
  opacity: 0.88;
}
.wf-cta--solid.wf-cta--regular {
  padding: 10px 18px;
}
.wf-cta--solid.wf-cta--large {
  padding: 15px 26px;
}

/* ─── Outline — quieter framed sibling ───────────────────────── */
/* Padding is one pixel under Solid's at each size so the 1px border lands the
   outer box on the same height. */
.wf-cta--outline {
  border: 1px solid currentColor;
  font-size: 13px;
  transition: color 160ms ease, border-color 160ms ease;
}
.wf-cta--outline:hover {
  color: var(--ochre);
  border-color: var(--ochre);
}
.wf-cta--outline.wf-cta--regular {
  padding: 9px 17px;
}
.wf-cta--outline.wf-cta--large {
  padding: 14px 24px;
}

/* ─── Underline — text with a rule under it ────────────────────── */
/* The rule is drawn on the label, which holds the arrow as well, so it runs
   under text and arrow together. */
.wf-cta--underline .wf-cta-label {
  padding-bottom: 3px;
  border-bottom: 1px solid currentColor;
}
/* With an arrow, leave 4px of rule past it: transforms don't resize the box, so
   without the runway the hover slide would carry the arrowhead out beyond the
   end of its own underline. */
.wf-cta--underline .wf-cta-label:has(.wf-cta-arrow) {
  padding-right: 4px;
}
/* Large is the hero's secondary CTA (12px); Regular steps down one. This is the
   smallest type in the set — don't take Regular below 11px. */
.wf-cta--underline.wf-cta--regular {
  font-size: 11px;
}
.wf-cta--underline.wf-cta--large {
  font-size: 12px;
}

/* ─── Link — plain text link ──────────────────────────────────── */
/* Replaces the former Nav Link / Footer Link components: 14px, no underline,
   fade on hover. It has no minimum box (see the size block) because it is an
   inline text link, sized by its own line box, so a stacked column of them keeps
   the tight 10px rhythm the footer is built on. The tap target is therefore the
   text — keep the surrounding gaps generous in whatever lays these out.

   Color comes from `.wf-cta`'s `inherit`, like every variant except Solid: the
   section owns it, and slotted islands inherit through the flattened tree. That
   is what lets one variant serve both the ink links in the nav bar and footer
   and the paper links in a dark band (.wf-desc-links--dark, .wf-product--dark).
   A section that hosts these must therefore set a `color` — see `.wf-nav`. */
.wf-cta--link {
  transition: opacity 160ms ease;
}
.wf-cta--link:hover {
  opacity: 0.62;
}
.wf-cta--link.wf-cta--regular {
  font-size: 14px;
}
.wf-cta--link.wf-cta--large {
  font-size: 17px;
}

/* ─── Accent color ────────────────────────────────────────────── */
/* The `Accent` color pins the CTA to ochre instead of letting it inherit the
   section's color. Two classes deep so it wins over `.wf-cta`'s `color: inherit`
   regardless of source order, like the case classes above.

   Only `color` is set: the Outline's frame and the Underline's rule are drawn in
   `currentColor`, so they take the accent along with the label. */
.wf-cta.wf-cta--accent {
  color: var(--ochre);
  /* Replaces the variant's own transition, being a class deeper. An accent CTA
     can't animate color on hover — it is already ochre — so every variant fades
     instead, which is the feedback Solid and Link already use. */
  transition: opacity 160ms ease;
}
.wf-cta--accent:hover {
  opacity: 0.78;
}

/* Solid is the one variant whose label sits on a fill rather than on the section
   background, so the accent moves to the fill and the label stays paper. Ochre
   text on the ink fill would read at ~3.6:1 — under the 4.5:1 AA minimum at this
   13px scale — where paper on ochre reaches ~4.3:1. Neither clears AA for body
   text; treat Solid + Accent as a large-text/UI treatment (WCAG 1.4.3 allows
   3:1 there) and prefer Outline or Underline where the label must be read. */
.wf-cta--solid.wf-cta--accent {
  background: var(--ochre);
  color: var(--paper);
}

/* ─── Label and arrow ─────────────────────────────────────────── */
/* The label is the row that holds the text and the arrow (drawn only when the
   `arrow` flag is set, on any variant). Keeping the arrow inside it — rather
   than beside it as a second flex item of the control — means the arrow is
   centered against the text rather than against the full 36/44px box, and that a
   rule drawn under the label runs under the arrow too. It slides on hover: the
   one bit of motion in the component. */
.wf-cta-label {
  display: inline-flex;
  align-items: center;
}
.wf-cta-arrow {
  transition: transform 160ms ease;
}
.wf-cta:hover .wf-cta-arrow {
  transform: translateX(4px);
}

/* ─── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  /* `.wf-cta.wf-cta--accent` is listed explicitly: the accent rule above is a
     class deeper than `.wf-cta`, so a single-class reset wouldn't reach it. */
  .wf-cta,
  .wf-cta.wf-cta--accent,
  .wf-cta .wf-cta-label,
  .wf-cta .wf-cta-arrow {
    transition: none;
  }
  .wf-cta:hover .wf-cta-arrow {
    transform: none;
  }
}

/* ─── Mobile ≤ 900px ─────────────────────────────────────────── */
/* The link lists (Description & Links, the Product CTA slot) sit at Large; step
   them down so they don't crowd a phone column. */
@media (max-width: 900px) {
  .wf-cta--link.wf-cta--large {
    font-size: 16px;
  }
}

/* Newsletter signup: copy + action on the left, illustration on the right.
   Paper-alt field so it separates from the post body above it. */

.wf-subscribe {
  box-sizing: border-box;
  padding: 88px 0;
  background: var(--paper-alt);
  border-top: 1px solid var(--ink-14);
  color: var(--ink);
}

.wf-subscribe-wrap {
  box-sizing: border-box;
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}

/* The text column keeps its own width cap so the heading doesn't run the full
   track on very wide viewports. */
.wf-subscribe-text {
  max-width: 520px;
}

.wf-subscribe-heading {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: -0.5px;
  color: var(--ink);
}

.wf-subscribe-cta {
  box-sizing: border-box;
  display: inline-block;
  margin-top: 32px;
  padding: 15px 26px;
  border: none;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 160ms ease;
}

.wf-subscribe-cta:hover {
  opacity: 0.88;
}

/* Ambient, not a focal image: held back so the heading stays the entry point. */
.wf-subscribe-figure {
  justify-self: end;
  width: 100%;
  max-width: 620px;
}

.wf-subscribe-img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0.8;
}

/* ─── Mobile ≤ 900px ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .wf-subscribe {
    padding: 64px 0;
  }
  .wf-subscribe-wrap {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .wf-subscribe-heading {
    font-size: 28px;
  }
  .wf-subscribe-figure {
    justify-self: start;
    max-width: 100%;
  }
}