/* ==========================================
   Blue Eden — home + Smart Assets
   (loads after styles.css and noa.css; reuses their
   tokens and the noa component layer: hero, frame,
   feature rows, stats, pills, loupe)
   ========================================== */

/* --- Framed output image (no browser chrome: these are renders, not screenshots) --- */
.be-hero-art {
  max-width: 1000px;
  margin: 64px auto 0;
  border: 1px solid var(--border-light);
  border-radius: 16px;
  overflow: hidden;
  background: var(--surface-frame);
  box-shadow: 0 30px 80px var(--shadow-strong), 0 0 0 1px rgba(var(--accent-rgb), 0.08);
}

.be-hero-art img {
  display: block;
  width: 100%;
  height: auto;
}

/* Portrait and square renders would tower over their paragraph at full
   column width; cap them and keep them centred in the cell. */
.be-shot--portrait {
  max-width: 400px;
  margin: 0 auto;
}

.be-shot--square {
  max-width: 560px;
  margin: 0 auto;
}

/* --- Settings band --- */
.be-settings {
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg, transparent 0%, rgba(var(--accent-deep-rgb), 0.05) 50%, transparent 100%);
}

.be-chips {
  justify-content: flex-start;
  margin-top: 8px;
}

.be-settings-note {
  margin-top: 32px;
  max-width: 720px;
  font-size: 0.93rem;
  line-height: 1.7;
  color: var(--ink-soft);
  padding-left: 18px;
  border-left: 2px solid rgba(var(--accent-rgb), 0.4);
}

/* --- On-request band: the pitch on the left, the form beside it --- */
.be-request-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.be-request-text h2 {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 700;
  color: var(--ink-strong);
  letter-spacing: -0.03em;
  line-height: 1.2;
  margin: 10px 0 16px;
}

.be-request-text p {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ink-soft);
}

.be-form-card {
  padding: clamp(24px, 3vw, 32px) clamp(20px, 2.5vw, 28px) 26px;
  background: var(--surface-raised);
  border: 1px solid var(--border-light);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(8, 8, 12, 0.45), 0 0 0 1px rgba(var(--accent-rgb), 0.08);
  /* Anchor target: clear the fixed nav when #contact is jumped to. */
  scroll-margin-top: 96px;
}

.be-form-card h3 {
  color: var(--ink-strong);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

/* --- Custom-work band (Smart Assets) --- */
.be-custom-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  padding: clamp(28px, 4vw, 44px);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
}

.be-custom-text h2 {
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 700;
  color: var(--ink-strong);
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 6px 0 12px;
}

.be-custom-text p {
  font-size: 0.97rem;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 640px;
}

.be-custom-box .btn {
  white-space: nowrap;
}

/* --- Infrastructure / CSR --- */
.be-infra {
  border-top: 1px solid var(--border);
}

.be-infra-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

.be-infra-main p {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ink);
}

.be-infra-main p + p {
  margin-top: 20px;
}

/* The limits panel is deliberately quieter than the claims it qualifies. */
.be-infra-limits {
  padding: 26px 24px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 2px solid var(--rule-quiet);
  border-radius: 14px;
}

.be-infra-limits h3 {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  margin-bottom: 12px;
}

.be-infra-limits p {
  font-size: 0.93rem;
  line-height: 1.7;
  color: var(--ink-soft);
}

/* --- Home --- */
/* The home hero carries no badge and no visual, so a full-height band leaves
   a dead zone under the buttons; 72vh still reads as a hero. */
.be-home-hero {
  min-height: 72vh;
}

.be-suite-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.be-product {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  transition: transform 0.4s var(--ease-out), border-color 0.4s;
}

.be-product:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--accent-rgb), 0.35);
}

/* Nothing shipped yet, so nothing to hover over either. */
.be-product--soon:hover {
  transform: none;
  border-color: var(--border);
}

.be-product-shot {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  background: var(--surface-raised);
}

.be-product-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.be-product-shot--empty {
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(255, 255, 255, 0.02) 0px,
      rgba(255, 255, 255, 0.02) 10px,
      transparent 10px,
      transparent 20px
    ),
    var(--surface-raised);
}

.be-product-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px 22px 24px;
}

.be-product-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.be-product-head h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ink-strong);
  letter-spacing: -0.02em;
}

.be-status {
  flex-shrink: 0;
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-soft);
  background: rgba(var(--accent-rgb), 0.14);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 999px;
  white-space: nowrap;
}

.be-status--soon {
  color: var(--ink-soft);
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border-light);
}

.be-product-body p {
  font-size: 0.93rem;
  line-height: 1.7;
  color: var(--ink-soft);
  flex: 1;
}

.be-product-body .module-cta {
  margin-top: 18px;
}

.footer-muted {
  display: block;
  font-size: 0.875rem;
  color: var(--ink-dim);
  padding: 4px 0;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
  .be-suite-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Two columns leave the unshipped card alone on its row: let it use the
     width, and drop the placeholder panel rather than stretch it. */
  .be-product--soon {
    grid-column: 1 / -1;
  }

  .be-product--soon .be-product-shot--empty {
    display: none;
  }
}

@media (max-width: 860px) {
  .be-infra-grid,
  .be-request-grid {
    grid-template-columns: 1fr;
  }

  .be-custom-box {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .be-custom-box .btn {
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .be-suite-grid {
    grid-template-columns: 1fr;
  }

  .be-hero-art {
    margin-top: 44px;
  }

  .be-shot--portrait,
  .be-shot--square {
    max-width: 340px;
  }

  .be-home-hero {
    min-height: 0;
    padding-bottom: calc(var(--section-pad) * 0.7);
  }
}

/* The privacy line is a real commitment, not fine print. gray-600 on the
   card background measures 1.8:1, unreadable for a good number of people;
   at 0.75rem WCAG AA wants 4.5:1, and gray-400 gives 6.4:1 while still
   reading as quiet. */
.be-form-card .noa-form-privacy {
  color: var(--ink-soft);
}

/* --- Suite band -------------------------------------------------------------
   Sits above the footer of every product page. Each card keeps its own
   data-product, so the three arches glow in their own accent inside a page
   themed for a different one — the family shown, not asserted. */
.be-band {
  border-top: 1px solid var(--border);
  padding: clamp(48px, 6vw, 72px) 0 clamp(40px, 5vw, 56px);
  background: linear-gradient(180deg, transparent, rgba(var(--accent-deep-rgb), 0.05));
}

.be-band-title {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
  text-align: center;
  margin-bottom: 28px;
}

.be-band-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.be-band-item {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: 'logo name' 'logo blurb' 'logo cue';
  align-content: center;
  column-gap: 16px;
  padding: 20px 22px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  transition: border-color 0.3s, background 0.3s, transform 0.3s var(--ease-out);
}

.be-band-item img {
  grid-area: logo;
  align-self: center;
  height: 44px;
  width: auto;
  opacity: 0.85;
  transition: opacity 0.3s;
}

.be-band-name {
  grid-area: name;
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink-strong);
  letter-spacing: -0.01em;
}

.be-band-blurb {
  grid-area: blurb;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--ink-faint);
  margin-top: 2px;
}

.be-band-cue {
  grid-area: cue;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-bright);
}

a.be-band-item:hover {
  border-color: rgba(var(--accent-rgb), 0.4);
  background: rgba(var(--accent-rgb), 0.05);
  transform: translateY(-2px);
}

a.be-band-item:hover img {
  opacity: 1;
}

.be-band-item--here {
  border-color: rgba(var(--accent-rgb), 0.3);
  background: rgba(var(--accent-rgb), 0.06);
}

.be-band-item--here .be-band-cue {
  color: var(--ink-faint);
}

@media (max-width: 860px) {
  .be-band-grid {
    grid-template-columns: 1fr;
  }
}

/* --- AI Mailbox -------------------------------------------------------------
   The product's own shapes: the path a message takes through the four moves,
   the numbered steps, the "never does" list and the autonomy dial. Colours all
   come from the accent tokens, so this section is teal only because the body
   says data-product="mailbox". */
.mb-note {
  margin-top: 18px;
  font-size: 0.88rem;
  color: var(--ink-faint);
}

/* The four moves, as a path */
.mb-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 56px;
}

.mb-flow-step {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px 9px 10px;
  background: rgba(var(--accent-rgb), 0.07);
  border: 1px solid rgba(var(--accent-rgb), 0.22);
  border-radius: 100px;
}

.mb-flow-dot {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-on);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
}

.mb-flow-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-bright);
  white-space: nowrap;
}

.mb-flow-link {
  width: 26px;
  height: 1px;
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.15), rgba(var(--accent-rgb), 0.5));
}

/* Steps */
.mb-steps {
  max-width: 860px;
}

.mb-step {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: clamp(20px, 4vw, 48px);
  padding: 28px 0;
}

.mb-step + .mb-step {
  border-top: 1px solid var(--border);
}

.mb-step-index {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mb-step-num {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--accent-bright);
  opacity: 0.75;
}

.mb-step-label {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink-strong);
  letter-spacing: -0.01em;
}

.mb-step-body h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ink-bright);
  margin-bottom: 10px;
}

.mb-step-body p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--ink-soft);
}

/* What it never does */
.mb-never {
  list-style: none;
  max-width: 840px;
  display: grid;
  gap: 14px;
}

.mb-never li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start;
  padding: 16px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 2px solid rgba(var(--accent-rgb), 0.5);
  border-radius: 12px;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink);
}

.mb-never-mark {
  color: var(--accent-bright);
  margin-top: 2px;
  flex-shrink: 0;
}

.mb-trust-footer {
  margin-top: 26px;
  max-width: 720px;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--ink-soft);
}

/* Autonomy dial */
.mb-modes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.mb-mode {
  padding: 24px 24px 26px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
}

.mb-mode--default {
  border-color: rgba(var(--accent-rgb), 0.35);
  background: rgba(var(--accent-rgb), 0.05);
}

.mb-mode-name {
  display: block;
  font-weight: 700;
  color: var(--ink-strong);
  margin-bottom: 8px;
}

.mb-mode p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* Getting started checklist */
.mb-points {
  list-style: none;
  display: grid;
  gap: 14px;
  align-content: start;
}

.mb-points li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink);
}

.mb-points svg {
  color: var(--accent-bright);
  margin-top: 3px;
}

@media (max-width: 760px) {
  .mb-step {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .mb-step-index {
    flex-direction: row;
    align-items: baseline;
    gap: 10px;
  }

  .mb-modes {
    grid-template-columns: 1fr;
  }

  .mb-flow-link {
    width: 18px;
  }
}

/* A product card wears its own colour on the home page: data-product on the
   article retargets the accent tokens for everything inside it. */
.be-product-head h3 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.be-product-mark {
  height: 26px;
  width: auto;
  flex-shrink: 0;
}

.be-product .be-status {
  border-color: rgba(var(--accent-rgb), 0.3);
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent-bright);
}

.be-product .module-cta {
  color: var(--accent-bright);
}

.be-product:hover {
  border-color: rgba(var(--accent-rgb), 0.3);
}

/* ==========================================
   Smart Assets — the light theme
   ==========================================
   The page argues for looking at where an image gets computed, which is a
   quiet argument; a black slab with a neon accent argues the opposite. So
   this one product runs on paper instead of ink. Every selector is anchored
   on `body`: the bare attribute also matches the Smart Assets card on the
   dark home page and its tile in the mailbox band, and paper ink on those
   dropped them to 2.7:1. Nothing here is a new rule:
   every token below already exists in styles.css with a dark value, and the
   dark pages keep those untouched.

   Warm neutrals rather than grey ones, and shadows tinted brown rather than
   black, so the ground reads as paper. Every foreground tier was measured
   against #FBF7F3 and clears WCAG AA at 4.5:1 — pastel stops at the washes,
   not at the text. */

body[data-product='smart'] {
  /* Terracotta, the colour already in smart-assets-light.svg. */
  --accent: #c4522b;
  --accent-rgb: 196, 82, 43;
  --accent-on: #ffffff;                      /* 4.58:1 on the accent */
  --accent-hover: #a8431f;
  --accent-mid: #b34a26;                     /* 5.02:1 on the ground */
  --accent-mid-rgb: 179, 74, 38;
  --accent-bright: #a8431f;                  /* 5.65:1 — dark, since "bright"
                                                means readable, not luminous */
  --accent-bright-rgb: 168, 67, 31;
  --accent-soft: #f3c9b6;
  --accent-deep: #e8a98e;
  /* The hero glow and orbs multiply this triplet at low alpha. A dark one
     would sit on the paper as a bruise, so the deep end goes pale here. */
  --accent-deep-rgb: 232, 169, 142;

  --ground: #fbf7f3;
  --surface-raised: #ffffff;
  --surface-frame: #ffffff;
  --veil: rgba(251, 247, 243, 0.85);
  --veil-solid: rgba(251, 247, 243, 0.97);
  --bg-card: rgba(255, 255, 255, 0.72);
  --surface-hover: rgba(58, 42, 34, 0.04);
  --surface-glass: rgba(255, 255, 255, 0.62);
  --surface-hover-strong: rgba(58, 42, 34, 0.07);
  --border: rgba(58, 42, 34, 0.10);
  --border-light: rgba(58, 42, 34, 0.16);
  --border-hover: rgba(58, 42, 34, 0.26);

  --ink-strong: #2b211c;                     /* 14.73:1 */
  --ink-bright: #3c302a;                     /* 11.95:1 */
  --ink: #4e423b;                            /*  9.09:1 */
  --ink-soft: #6b5e56;                       /*  5.86:1 */
  --ink-faint: #77695f;                      /*  4.96:1 */
  --ink-dim: #7a6c62;                        /*  4.75:1 */

  /* Brown-tinted and shallow: on paper, a black shadow reads as dirt. */
  --rule-quiet: rgba(122, 108, 98, 0.45);
  --shadow-strong: rgba(94, 62, 43, 0.13);
  --shadow-soft: rgba(94, 62, 43, 0.09);
}

/* The headline gradient runs ink -> accent-soft -> accent-mid. On paper the
   pale middle would erase the middle of the sentence, so it runs the other
   way: dark into terracotta. */
body[data-product='smart'] .hero-line {
  background: linear-gradient(120deg, var(--ink-strong) 0%, var(--ink-strong) 35%, var(--accent) 100%);
  /* `background` is a shorthand: it resets the background-clip set upstairs,
     and the headline paints as a solid bar instead of letters. Restate it. */
  -webkit-background-clip: text;
  background-clip: text;
}

/* Frames hold a photograph, not a screenshot: a hairline and a soft drop are
   enough, and the dark page's heavy inner ring would ring like a bruise. */
body[data-product='smart'] .be-hero-art,
body[data-product='smart'] .noa-shot {
  box-shadow: 0 18px 44px var(--shadow-strong);
}

/* On the dark page the nav floats over the hero until it scrolls. On paper an
   unpainted nav lets the hero wash run under the logo, so it carries the veil
   from the start. */
body[data-product='smart'] .nav {
  background: var(--veil);
  backdrop-filter: blur(20px) saturate(1.1);
  -webkit-backdrop-filter: blur(20px) saturate(1.1);
  border-bottom-color: var(--border);
}

/* Softer still: the hero wash is decoration here, not a light source. */
body[data-product='smart'] .hero-glow {
  filter: blur(80px);
  opacity: 0.75;
}

body[data-product='smart'] .footer {
  background: rgba(58, 42, 34, 0.025);
}

/* Each band card keeps its own product colour, and those were tuned against
   the dark ground: on paper the teal cue measured 1.83:1. --accent-ink is the
   same identity taken down to where it reads. */
body[data-product='smart'] .be-band-cue {
  color: var(--accent-ink);
}