/* ===========================================================
   Exclaim Robotics — page layer, loaded after styles.css
   Loaded *after* /styles.css, which supplies every token.

   This is the "comic plate" layer from the Claude Design
   project: square-cornered panels sharing one 960px sheet,
   hand-lettered headings, clean sans body. The Design screens
   carry it as inline styles on every element; here it's a
   handful of classes so the markup stays readable.

   Nothing in this file is used by the live one-pager, so
   it layers on top of the design system in styles.css.
   =========================================================== */

/* ---- draft ribbon ---------------------------------------- */
.ribbon {
  position: sticky;
  top: 0;
  z-index: 10;
  margin: 0;
  padding: .45rem 1rem;
  text-align: center;
  font-family: var(--font-hand);
  font-size: .95rem;
  letter-spacing: .02em;
  color: var(--ink);
  background: var(--wash-accent-strong);
  border-bottom: var(--stroke-w-thin) solid var(--stroke);
}

/* ---- page shell ------------------------------------------ */
.page {
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 2.5rem 1.25rem 4rem;
  display: flex;
  flex-direction: column;
  gap: var(--row-gap);
}
/* <main> is one flex item of .page, so the page's gap does nothing between the
   panels inside it — main has to carry the same column + gap itself. */
.page > main {
  display: flex;
  flex-direction: column;
  gap: var(--row-gap);
}
.site a { color: var(--link); }
.site a:hover { color: var(--accent-hover); }
.site p { text-wrap: pretty; }
.muted { color: var(--text-muted); }

/* ---- top bar + nav --------------------------------------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
/* NB: not .mark — that's the highlighter-swipe class in /styles.css */
.topbar .brand { display: flex; flex: none; }
.topbar .brand img { display: block; width: 36px; height: auto; }

.sitenav {
  display: flex;
  gap: 1.6rem;
  align-items: center;
  flex-wrap: wrap;
  margin-right: auto;
  font-family: var(--font-hand);
  font-size: var(--text-nav);
}
.sitenav a {
  position: relative;
  text-decoration: none;
  color: var(--ink);
}
/* the rule under each item: 2px/25% at rest, 3px/70% when hovered or current */
.sitenav a::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 2px;
  background: var(--stroke);
  opacity: .25;
  border-radius: 2px;
}
.sitenav a:hover::before,
.sitenav a[aria-current="page"]::before { height: 3px; opacity: .7; }

/* The signature gag: the label earns a bang on hover.
   The bang is absolutely positioned just past the label and only fades in, so
   it never enters layout — the word keeps its width, its underline keeps its
   length, and the items to the right of it don't scoot. It overhangs into the
   1.6rem nav gap, which has room to spare. */
.sitenav a::after {
  content: "!";
  position: absolute;
  top: 0;
  left: 100%;
  opacity: 0;
}
.sitenav a:hover::after { opacity: 1; }

/* ---- panels ---------------------------------------------- */
/* Square corners, ink rule, hard offset shadow. Never tilted — rhythm
   comes from panel width, not rotation. */
.panel {
  border: var(--stroke-w-plate) solid var(--stroke);
  background: var(--surface-card);
  box-shadow: var(--shadow);
  padding: 2.6rem 2.55rem;
}
.panel--hero  { padding: clamp(2.1rem, 5vw, 2.6rem) clamp(2.15rem, 5vw, 2.65rem); }
.panel--roomy { padding: 3rem 2.75rem; }
.panel--strip { padding: 2.4rem 2.55rem; }

.panel--plate  { background-image: var(--grid-plate); }
.panel--quiet  { background: var(--surface-quiet); }
.panel--accent { background: var(--surface-note); }
.panel--alt    { background: #f3f3f3; }
.panel--blue   { background: #daecf5; }   /* the one cool panel, from the Design screens */

/* ---- headings -------------------------------------------- */
.site h1, .site h2, .site h3 { font-weight: var(--weight-regular); }

.hand {
  font-family: var(--font-hand);
  line-height: 1.05;
  letter-spacing: var(--track-hero);
  margin: 0;
}

/* `balance` evens out a two- or three-line heading so it doesn't strand a
   two-word orphan. Only on .display: it works by SHORTENING lines, so applying
   it to long copy (the blue strips) just opens a gap down the right. */
.site .display { text-wrap: balance; }

/* The rule that keeps the hand font from taking over:
     .display  (Roboto Light) = structure — every h1 and h2 on the page
     .hand     (Patrick Hand) = voice — hero punchline, figure caption, nav,
                                buttons, the two asides, the easter-egg link
   Same split the hero h1 already used, applied to the whole site. Also stops
   the clean-sans wordmark reading as the odd element on its own page.
   Needs the `.site` scope to out-specify `.site h1, h2, h3 { font-weight: 400 }`. */
.site .display {
  font-family: var(--font-body);
  font-weight: var(--weight-light);
  line-height: 1.14;
  letter-spacing: -.02em;
  margin: 0;
}
.h-lg  { font-size: clamp(2rem, 5vw, 2.9rem); }
.h-md  { font-size: 2.4rem; }
.h-sm  { font-size: var(--text-h2); }
.h-xs  { font-size: 1.7rem; }

/* Hero h1: light Roboto sentence, hand-lettered punchline. */
.hero-h1 {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--weight-light);
  font-size: clamp(1.35rem, 3.6vw, 1.85rem);
  line-height: 1.22;
  letter-spacing: -.015em;
}
.hero-h1 .punch {
  font-family: var(--font-hand);
  font-weight: var(--weight-regular);
  font-size: clamp(1.6rem, 4.4vw, 2.3rem);
  letter-spacing: var(--track-hero);
}
/* Sized so the 43-character headline holds a single line at full page width.
   It still wraps below ~800px viewport, which is the honest responsive break
   rather than the mid-sentence one it was doing on desktop. */
.panel--hero .display { font-size: clamp(1.5rem, 4vw, 2.4rem); }

/* Hero: clean-sans statement, hand-lettered line under it. Mirrors how the
   wordmark itself is built — geometric sans beside a hand-drawn mark. */
.hero-tag {
  margin: .75rem 0 0;
  font-family: var(--font-hand);
  font-size: clamp(1.35rem, 3.4vw, 1.9rem);
  line-height: 1.15;
  letter-spacing: var(--track-hero);
}

.wordmark-img {
  display: block;
  width: 230px;
  max-width: 72%;
  height: auto;
  margin-bottom: 1.3rem;
}

/* ---- the big ink drawing + its caption box ---------------- */
.figure {
  margin: 0;
  position: relative;
  border: var(--stroke-w-plate) solid var(--stroke);
  background: var(--surface-card);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.figure img { display: block; width: 100%; height: auto; }
.figure-cap {
  position: absolute;
  top: 5%;
  left: 3.5%;
  /* fit-content so the white box wraps the text tightly — a fixed width left
     a band of empty box to the right of the shorter line */
  width: fit-content;
  max-width: min(74%, 620px);
  margin: 0;
  padding: clamp(.7rem, 2vw, 1.1rem) clamp(.8rem, 2.4vw, 1.3rem);
  background: var(--surface-card);
  border: var(--stroke-w-plate) solid var(--stroke);
  font-family: var(--font-hand);
  font-size: clamp(1.7rem, 5vw, 3rem);
  line-height: 1.06;
  letter-spacing: var(--track-hero);
}
/* It's a caption that is also this section's heading, so it's an h2 inside the
   figcaption. `font: inherit` hands it the box's type rather than the h2 default. */
.figure-cap h2 {
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
}

/* ---- layout helpers -------------------------------------- */
/* two panels side by side, stacking under 300px each */
/* no align-items:start — side-by-side panels match height regardless of copy */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--row-gap);
}
/* heading in one column, prose in the other */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: .6rem 2.4rem;
  align-items: start;
}
.split--wide { gap: 1rem 2.4rem; }
/* the four "beyond safety" points */
.points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  gap: var(--row-gap);
}
.point p { margin: 0; color: var(--text-muted); font-size: .95rem; }

/* the paragraph under the drawing — a shade larger than body copy so it reads
   as a standfirst rather than another block of prose */
/* No max-width: a measure cap here left ~100px of empty panel down the right.
   The type is scaled up instead, so it fills the box at a readable measure and
   reads as a standfirst rather than another paragraph of body copy. */
.standfirst {
  margin: 0;
  font-size: 1.3rem;
  line-height: 1.45;
}

/* must out-specify `.point p` above — both are one class + one type otherwise.
   Body font on purpose: these are sub-labels, not headings. The hand font was
   doing no work here and spending it in nine low-value places was what made the
   page read as "too much Patrick Hand" — and made the clean-sans wordmark look
   like the outlier. */
.point p.point-h {
  margin: 0 0 .25rem;
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: 1.02rem;
  line-height: 1.25;
  color: var(--text-body);
}

/* call-to-action panel: prose left, button right */
.cta-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.6rem;
  flex-wrap: wrap;
}
.cta-row p { margin: 0; flex: 1 1 320px; min-width: 0; max-width: 60ch; }
.cta-row .lead {
  font-family: var(--font-hand);
  font-size: clamp(1.4rem, 3.6vw, 1.9rem);
  line-height: 1.15;
}

.prose p { margin: 0 0 .9rem; color: var(--text-muted); }
.prose p:last-child { margin-bottom: 0; }

/* The join button escalates from one bang to three on hover. Same trick as the
   nav and contact bangs: out of flow, fading in, so the pill can't resize. The
   two extras fit inside the button's 1.5rem right padding. */
.btn .bang3 { position: relative; }
.btn .bang3 .bangs {
  position: absolute;
  top: 0;
  left: 100%;
  opacity: 0;
}
.btn:hover .bang3 .bangs { opacity: 1; }

/* ---- buttons: icon sits inside the pill ------------------- */
/* .btn itself comes from /styles.css — pill, 3px ink, hard shadow,
   1px nudge on hover, and the bang on .btn-label. */
.btn .ico {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- address + map pin ----------------------------------- */
/* The Material Symbols "location_on" pin, redrawn as a 2px ink stroke so it
   matches the mail/person icons and costs no icon-font request on the real
   pages. The place name carries the link text — an icon-only link would have
   nothing for a screen reader to read but an aria-label. */
/* ---- inline links: the hand-drawn squiggle ---------------- */
/* The wavy orange underline (--wavy-underline in styles.css) is the brand's
   inline-link cue. Applied here rather than reusing .ulink, which is tuned for
   1rem body copy and adds font-weight:600 — the hand font has a single weight
   and must never be faux-bolded.
   Everything is in `em`, so one rule covers the 1.8rem address strip and the
   1.05rem person links.
   Deliberately NOT applied to: .sitenav (has its own ink rule), .btn (pills),
   .brand (the logo), .saas-link (an easter egg; a squiggle would announce it). */
.geo,
.person-links a {
  text-decoration: none;
  background-image: var(--wavy-underline);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% .3em;
  padding-bottom: .26em;
}
/* tighter: the address strip runs line-height 1.15, so a deeper drop puts the
   squiggle into the ascenders of the line below */
.geo { padding-bottom: .1em; }
.pin {
  width: .92em;
  height: .92em;
  margin-left: .28em;
  vertical-align: -.1em;
  fill: none;
  stroke: currentColor;   /* so it turns accent with the text on hover */
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- team cards ------------------------------------------ */
/* no align-items:start — cards stretch so every tile in a row is the same
   height regardless of how long its credential line runs */
.people {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--row-gap);
}
.person-card {
  background: var(--surface-card);
  border: var(--stroke-w-plate) solid var(--stroke);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.person-card > img,
.person-card > .noface {
  width: 100%;
  /* height:auto is load-bearing — the width/height HTML attributes are
     presentational hints, so without it height="640" wins over aspect-ratio
     and the portrait renders 640px tall in a 300px column. */
  height: auto;
  aspect-ratio: 1 / 1;
  border-bottom: var(--stroke-w-plate) solid var(--stroke);
}
.person-card > img {
  display: block;
  object-fit: cover;
}
.person-card > .noface {
  background: var(--surface-card-alt);
  display: grid;
  place-items: center;
  font-family: var(--font-hand);
  font-size: 3.4rem;
  color: var(--ink-25);
}
.person-body {
  padding: 1.1rem 1.2rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  flex: 1;
}
.person-body h2 { margin: 0; }
/* Names in the body font: a real person's name in a joke font undercuts the
   credential line directly beneath it. Hand font stays for the page heading. */
.person-name {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: 1.15rem;
  line-height: 1.25;
  letter-spacing: -.01em;
}
.person-role { margin: 0; font-weight: var(--weight-medium); font-size: .95rem; }
.person-bio  { margin: 0; color: var(--text-muted); font-size: .9rem; }
.person-links {
  margin: auto 0 0;
  padding-top: .7rem;
  font-family: var(--font-hand);
  font-size: 1.05rem;
  display: flex;
  gap: .9rem;
}
.person-card.is-stealth h2 { color: var(--text-kicker); }

/* ---- careers: the Ashby embed ---------------------------- */
/* Ashby injects a cross-origin iframe into #ashby_embed, so the box is the only
   part of the board our stylesheets can touch — everything inside it is styled
   by /assets/ashby-embed.css, which Ashby loads via customCssUrl.
   The card lives on the wrapper rather than the iframe so it is drawn straight
   away, instead of popping in when the embed finishes loading. */
.jobs-box {
  background: var(--surface-card);
  border: var(--stroke-w-plate) solid var(--stroke);
  box-shadow: var(--shadow);
  padding: .55rem .7rem;
  min-height: 180px;
}
/* Height is left alone: Ashby sets it inline and keeps it in sync with the
   content over postMessage. */
#ashby_embed iframe {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
}

/* ---- careers: the no-JS job-board fallback ---------------- */
.board {
  border: var(--stroke-w-plate) solid var(--stroke);
  background: var(--surface-card);
  background-image: var(--grid-plate);
  box-shadow: var(--shadow);
  min-height: 420px;
  display: grid;
  place-items: center;
  padding: 2rem 1.5rem;
  text-align: center;
}
.board .label {
  margin: 0 0 .5rem;
  font-family: var(--font-hand);
  font-size: 1.6rem;
  line-height: 1.15;
  color: var(--text-kicker);
}
.board .note { margin: 0; color: var(--text-muted); font-size: .95rem; max-width: 44ch; }
/* the fallback's second note is the bare URL, on its own line as a signpost */
.board .note + .note { margin-top: .7rem; }

/* ---- investor row ---------------------------------------- */
/* Borderless on purpose — every other block on the page is a panel, so leaving
   this one unboxed reads as an aside rather than a claim being made. */
.backers {
  display: flex;
  align-items: center;
  gap: 1.4rem 3.2rem;
  flex-wrap: wrap;
  padding-top: 1rem;
}
.backers-label {
  margin: 0;
  font-family: var(--font-hand);
  font-size: 1.05rem;
  color: var(--text-kicker);
}
/* text-decoration:none — an <a> wrapping an <img> still draws its underline,
   which showed up as a rule running between the two logos */
.backers a { text-decoration: none; display: block; }
.backers img { display: block; width: auto; opacity: .8; }
.backers a:hover img { opacity: 1; }
/* Optically matched rather than height-matched. Founderful's wordmark has a
   much larger cap-height relative to its box, so equal heights made it read
   as the bigger logo. */
.backers .l-founderful { height: 17px; }
.backers .l-playfair   { height: 27px; }

@media (max-width: 480px) {
  .backers { gap: 1rem 2rem; }
  .backers .l-founderful { height: 15px; }
  .backers .l-playfair   { height: 23px; }
}

/* ---- footer ---------------------------------------------- */
.foot {
  margin: 0;
  padding-top: .4rem;
  font-size: var(--text-small);
  color: var(--text-kicker);
}
/* copyright left, the b2b saas mode escape right */
.foot-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.saas-link {
  font-family: var(--font-hand);
  font-size: 1.05rem;
  color: rgba(26, 26, 26, .8);
  text-decoration: none;
}
.saas-link:hover { color: var(--accent-hover); }

/* ---- responsive ------------------------------------------ */
@media (max-width: 640px) {
  /* The drawing is the strongest thing on the page, and at phone widths the
     overlaid caption box covered most of it. Drop the caption out of the overlay
     and into a strip under the image, separated by the same ink rule — the whole
     drawing is visible and the comic-plate framing survives. */
  .figure-cap {
    position: static;
    width: auto;
    border: 0;
    border-top: var(--stroke-w-plate) solid var(--stroke);
    font-size: 1.5rem;
    line-height: 1.12;
  }

  .panel        { padding: 1.8rem 1.5rem; }
  .panel--roomy,
  .panel--strip,
  .panel--hero  { padding: 1.8rem 1.5rem; }
  .h-md         { font-size: 2rem; }
  .h-sm         { font-size: 1.8rem; }
  .page         { padding-top: 1.6rem; }
}

/* ---- legal pages ----------------------------------------- */
.foot-link {
  margin-left: .9rem;
  color: var(--text-muted);
  text-decoration: underline;
  text-decoration-color: var(--stroke-soft);
  text-underline-offset: 2px;
}
.foot-link:hover { color: var(--text-body); text-decoration-color: var(--accent); }

.prose--legal { max-width: 68ch; }
.prose--legal h2 {
  font-size: 1.35rem;
  font-weight: var(--weight-medium);
  margin: 1.9rem 0 .5rem;
}
.prose--legal h2:first-child { margin-top: 0; }
.prose--legal p { margin: 0 0 .8rem; }
/* Unfilled placeholders are highlighted so they cannot ship unnoticed. */
.prose--legal .todo { background: var(--wash-accent-strong); padding: 0 .2em; }