/* ==========================================================================
   Arcona marketing site
   Tokens, then components, then layout, then responsive.
   ========================================================================== */

:root {
  /* Palette */
  --ink:        #1E2528;  /* headings, buttons, hard rules */
  --ink-hover:  #3E4744;  /* solid button hover, body copy */
  --body:       #3E4744;
  --muted:      #5F6862;  /* small print */
  --muted-mono: #5F6B64;  /* mono labels and link hover. Note: near-identical
                             to --muted. Kept separate to preserve the original
                             rendering; safe to merge if anyone wants to. */
  --line:       #E0E1DD;  /* section dividers */
  --line-soft:  #C3C9C2;  /* dashed borders, outline buttons, footer text */
  --sage:       #A9B5A4;  /* accent rule, selection */
  --paper:      #F7F7F5;  /* page background */
  --surface:    #FFFFFF;  /* alternating section background */

  --on-dark:        rgba(255,255,255,.62);
  --on-dark-quiet:  rgba(255,255,255,.45);
  --on-dark-line:   rgba(255,255,255,.12);
  --on-dark-dash:   rgba(255,255,255,.26);

  /* Type */
  --font-display: 'Marcellus', serif;
  --font-body:    'Karla', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', monospace;

  /* Measure */
  --shell:    1240px;
  --gutter:   48px;
  --header-h: 72px;
  --band-y:   96px;   /* vertical padding inside a section */
}

/* --------------------------------------------------------------- base --- */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--muted-mono); }
::selection { background: var(--sage); color: var(--paper); }

.page { overflow-x: hidden; }

/* ---------------------------------------------------------- typography --- */

.h-hero,
.h-section,
.h-pricing,
.h-demo,
.h-card,
.h-statement,
.h-quote {
  font-family: var(--font-display);
  font-weight: 400;
  margin: 0;
  text-wrap: pretty;
}

.h-hero      { font-size: clamp(34px, 3.6vw, 52px); line-height: 1.13; margin-bottom: 24px; }
.h-section   { font-size: clamp(26px, 2.6vw, 38px); line-height: 1.2;  margin-bottom: 20px; max-width: 24em; }
.h-pricing   { font-size: clamp(24px, 2.4vw, 34px); line-height: 1.25; margin-bottom: 20px; }
.h-demo      { font-size: clamp(26px, 2.8vw, 40px); line-height: 1.25; margin-bottom: 32px; max-width: 26em; }
.h-statement { font-size: clamp(21px, 2vw,   30px); line-height: 1.4;  max-width: 32em; }
.h-quote     { font-size: clamp(24px, 2.5vw, 36px); line-height: 1.4;  margin-bottom: 28px; max-width: 24em; }
.h-card      { font-size: 22px; line-height: 1.3; margin-bottom: 12px; }

.lede    { font: 300 clamp(16px, 1.3vw, 19px)/1.6 var(--font-body); color: var(--body); margin: 0 0 32px; max-width: 30rem; }
.lede-sm { font: 300 17px/1.65 var(--font-body); color: var(--body); margin: 0; max-width: 34rem; }
.copy    { font: 400 15.5px/1.7 var(--font-body); color: var(--body); margin: 0; }
.copy--measured { max-width: 30em; }
.small   { font: 400 12.5px/1.6 var(--font-body); color: var(--muted); margin: 0; }
.small--measured { max-width: 32em; }
.meta    { font: 400 12px/1.7 var(--font-body); letter-spacing: .03em; color: var(--muted); margin: 0; }
.byline  { font: 400 13px/1.6 var(--font-body); letter-spacing: .04em; color: var(--muted); margin: 0 0 32px; }

.eyebrow {
  font: 400 11px var(--font-display);
  letter-spacing: .2em;
  text-transform: uppercase;
}

.mono {
  font: 400 9.5px/1.9 var(--font-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted-mono);
}
.mono--sm { font-size: 9px; }

/* -------------------------------------------------------------- layout --- */

.band {
  border-bottom: 1px solid var(--line);
}
.band--surface { background: var(--surface); }
.band--plain   { border-bottom: 0; }
.band--anchor  { scroll-margin-top: var(--header-h); }

.shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding: var(--band-y) var(--gutter);
}
.shell--flush-bottom { padding-bottom: 0; }
.shell--flush-top    { padding-top: 0; }
.shell--tall         { padding-block: 112px; }
.shell--short        { padding-block: 88px; }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 56px 64px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }

.actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

/* A hairline above a card or tier. Sage variant marks the secondary group. */
.rule        { height: 1px; background: var(--ink); margin-bottom: 20px; }
.rule--sage  { background: var(--sage); }
.rule--tight { margin-bottom: 16px; }

/* ------------------------------------------------------------- buttons --- */

.btn {
  display: inline-flex;
  align-items: center;
  height: 50px;
  padding: 0 26px;
  font: 500 13.5px var(--font-body);
  letter-spacing: .03em;
}
.btn--solid   { background: var(--ink); color: var(--paper); }
.btn--solid:hover { background: var(--ink-hover); color: var(--paper); }
.btn--outline { color: var(--ink); border: 1px solid var(--line-soft); }
.btn--outline:hover { border-color: var(--ink); color: var(--ink); }

.btn--sm { height: 40px; padding: 0 20px; font-size: 12.5px; }
.btn--lg { height: 54px; padding: 0 30px; font-size: 14px; }

.btn--underline {
  height: 44px;
  padding: 0;
  border-bottom: 1px solid var(--sage);
}
.btn--underline:hover { border-bottom-color: var(--ink); color: var(--ink); }

.billing-toggle {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  background: transparent;
  color: var(--muted);
  font: 500 11.5px var(--font-body);
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 1px solid var(--line-soft);
  cursor: pointer;
}
.billing-toggle.is-active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.billing-toggle__save {
  margin-left: 7px;
  font-size: 9.5px;
  letter-spacing: .08em;
  color: var(--sage);
}
.billing-toggle:not(.is-active) .billing-toggle__save { color: var(--muted-mono); }

/* --------------------------------------------------------------- slots --- */
/* Dashed placeholders for artwork not yet supplied. Delete with the markup. */

.slot {
  border: 1px dashed var(--line-soft);
  background: repeating-linear-gradient(135deg,
              rgba(30,37,40,.035) 0 9px, transparent 9px 18px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
}
.slot--hero    { width: 100%; min-height: 440px; align-self: stretch; border-right: 0; }
.slot--video   { aspect-ratio: 16 / 7; margin-bottom: 56px; }
.slot--spread  { border: 0; border-top: 1px dashed var(--line-soft);
                 border-bottom: 1px dashed var(--line-soft); height: 440px; }
.slot--portrait{ aspect-ratio: 4 / 5; padding: 16px; }

/* Full-bleed band around the report spread, sits outside .shell */
.bleed { padding-block: 48px; }

/* Stack spacing where a grid is followed by a link or button */
.stack-below { margin-bottom: 48px; }

/* ---------------------------------------------------------------- logo --- */
/* Direction 3d: Marcellus lowercase, the "o" replaced by two concentric open
   arcs at even weight and x height, terminals cut flat (no linecap).
   Set as live text rather than an exported SVG because the wordmark uses
   Marcellus, which this site already self-hosts.
   Arc geometry is the canvas file's h24 set: smaller renders carry
   proportionally heavier strokes to hold the same optical weight. */

/* Outlined, so no webfont dependency and no reflow while Marcellus loads.
   viewBox is cropped to the ink, and "arcona" has no ascenders or descenders,
   so height sizes the x-height directly. */

.logo {
  display: block;
  flex: none;
  line-height: 0;
}
.logo img,
img.logo {
  display: block;
  width: auto;
  height: 15px;      /* x-height. Lockup reads about 95px wide. */
}
.logo--footer {
  margin-bottom: 24px;
}
.logo--footer img,
img.logo--footer {
  height: 18px;
}

/* -------------------------------------------------------------- header --- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(247, 247, 245, .94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 44px;
}
.site-nav {
  display: flex;
  gap: 28px;
  font: 400 13px var(--font-body);
  letter-spacing: .04em;
  color: var(--body);
}
.site-header__spacer { flex: 1; }

/* ---------------------------------------------------------------- hero --- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 52%) minmax(0, 1fr);
  min-height: calc(100vh - var(--header-h));
  border-bottom: 1px solid var(--line);
}
.hero__copy {
  padding: 88px 56px 72px var(--gutter);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--paper);
  border-right: 1px solid var(--line);
}
.hero__copy-inner {
  max-width: 36rem;
  margin-left: auto;
  width: 100%;
  padding-right: 24px;
}
.hero__media {
  background: var(--surface);
  display: flex;
  align-items: center;
  padding: 56px 0 56px 40px;
  min-height: 520px;
}
/* ------------------------------------------------------------- pricing --- */

.pricing__head {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 40px;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 52px;
}
.pricing__toggle { display: flex; flex: none; }

.tier__price {
  font: 400 34px/1 var(--font-display);
  margin: 16px 0 6px;
  font-variant-numeric: tabular-nums;
}
.tier__unit {
  font: 400 12px var(--font-body);
  color: var(--muted);
  letter-spacing: .04em;
  margin-left: 3px;
}

.addon {
  margin-top: 40px;
  padding: 20px 24px;
  border: 1px dashed var(--line-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  align-items: baseline;
  opacity: .55;
}
.addon__label { color: var(--muted); }
.addon__price {
  font: 400 22px/1 var(--font-display);
  font-variant-numeric: tabular-nums;
  color: var(--body);
}
.addon__desc { flex: 1; min-width: 16rem; }
.addon__chip {
  font: 400 9.5px var(--font-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted-mono);
  border: 1px solid var(--line-soft);
  padding: 4px 10px;
  flex: none;
}

.pricing__footer {
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

/* --------------------------------------------------------------- trust --- */
/* Factual claims only. Every line here maps to a clause in Schedule B of the
   Information Management Agreement. Nothing goes in that is not contracted. */

.trust__inner {
  display: flex;
  align-items: center;
  gap: 28px;
}
.trust__mark {
  flex: none;
  width: 20px;
  height: 20px;
  opacity: .85;
}
.trust__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.trust__list li {
  font: 400 10.5px var(--font-mono);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted-mono);
  padding: 0 22px;
  border-left: 1px solid var(--line);
  white-space: nowrap;
}
.trust__list li:first-child { border-left: 0; padding-left: 0; }

/* --------------------------------------------------------------- quote --- */

.quote-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px;
  gap: 64px;
  align-items: start;
}

/* -------------------------------------------------------------- footer --- */

.site-footer {
  background: var(--ink);
  color: var(--line-soft);
  scroll-margin-top: var(--header-h);
}
.site-footer a { color: var(--line-soft); }
.site-footer a:hover { color: var(--paper); }
.site-footer__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 56px var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 48px;
  align-items: start;
}
.site-footer .wordmark {
  border-color: var(--on-dark-dash);
  color: rgba(255,255,255,.5);
  margin-bottom: 24px;
}
.site-footer__tagline {
  font: 400 13px/1.7 var(--font-body);
  color: var(--on-dark);
  margin: 0;
  max-width: 26em;
}
.site-footer__nav {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 14px 48px;
  font: 400 13px var(--font-body);
  letter-spacing: .03em;
}
.site-footer__nav a.is-quiet { color: rgba(255,255,255,.58); }
.site-footer__bar { border-top: 1px solid var(--on-dark-line); }
.site-footer__bar-inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 20px var(--gutter);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  font: 400 11px var(--font-mono);
  letter-spacing: .08em;
  color: var(--on-dark-quiet);
}

/* --------------------------------------------------------- legal pages --- */
/* /terms and /privacy. One measure, generous leading, numbered clauses that
   can be cited by number. Deliberately plainer than the marketing pages. */

.legal { max-width: 44rem; }
.legal__meta {
  font: 400 11px/1.9 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted-mono);
  margin: 0 0 40px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line-soft);
}
.legal__meta span { display: block; }
.legal__lede { font: 300 18px/1.65 var(--font-body); color: var(--body); margin: 0 0 40px; }

.legal h2 {
  font: 400 21px/1.3 var(--font-display);
  color: var(--ink);
  margin: 52px 0 14px;
  padding-top: 24px;
  border-top: 1px solid var(--line-soft);
}
.legal h2:first-of-type { margin-top: 0; }
.legal h3 {
  font: 500 15px/1.5 var(--font-body);
  color: var(--ink);
  margin: 28px 0 8px;
}
.legal p, .legal li { font: 400 15.5px/1.75 var(--font-body); color: var(--body); }
.legal p { margin: 0 0 16px; }
.legal ul, .legal ol { margin: 0 0 16px; padding-left: 1.4em; }
.legal li { margin-bottom: 8px; }
.legal strong { font-weight: 500; color: var(--ink); }
.legal a { border-bottom: 1px solid var(--line-soft); }
.legal a:hover { border-bottom-color: var(--ink); }

.legal__note {
  background: var(--surface);
  border-left: 2px solid var(--ink);
  padding: 20px 24px;
  margin: 0 0 24px;
}
.legal__note p:last-child { margin-bottom: 0; }

.legal__toc { margin: 0 0 8px; padding: 0; list-style: none; columns: 2; column-gap: 40px; }
.legal__toc li { margin-bottom: 6px; font-size: 14px; break-inside: avoid; }

/* ---------------------------------------------------------------- form --- */
/* One form on the site: the privacy-package request. Styled to match the
   legal pages rather than the marketing ones — this reader is doing diligence,
   not being sold to. */

.form { max-width: 34rem; margin-top: 40px; }
.field { margin-bottom: 24px; }
.field > label {
  display: block;
  font: 500 13px/1.5 var(--font-body);
  color: var(--ink);
  margin-bottom: 7px;
}
.field .hint { display: block; font: 400 12.5px/1.5 var(--font-body); color: var(--muted); margin-top: 6px; }
.field .req { color: var(--muted); font-weight: 400; }

.field input[type="text"],
.field input[type="email"],
.field select,
.field textarea {
  width: 100%;
  font: 400 15px/1.5 var(--font-body);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 0;
  padding: 12px 14px;
  appearance: none;
}
.field textarea { min-height: 110px; resize: vertical; }
.field select {
  /* Native arrow is removed by appearance:none, so draw one. */
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%),
                    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 20px) 21px, calc(100% - 14px) 21px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted); }

.form button[type="submit"] {
  font: 500 13.5px var(--font-body);
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  height: 52px;
  padding: 0 28px;
  cursor: pointer;
}
.form button[type="submit"]:hover { background: var(--ink-hover); border-color: var(--ink-hover); }

.form__foot { margin-top: 20px; font: 400 12.5px/1.65 var(--font-body); color: var(--muted); }
.form__foot a { border-bottom: 1px solid var(--line-soft); }

/* Honeypot. Bots fill it, people never see it. Not display:none — some bots
   skip hidden inputs, and screen readers get aria-hidden + tabindex instead. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------------------------------------------------------- responsive --- */
/* The original export had no breakpoints and broke below about 1000px. */

@media (max-width: 1000px) {
  :root { --gutter: 32px; --band-y: 72px; }

  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero__copy { padding: 64px var(--gutter) 48px; border-right: 0; }
  .hero__copy-inner { margin-left: 0; padding-right: 0; max-width: none; }
  .hero__media { padding: 0 0 0 var(--gutter); min-height: 0; }
  .slot--hero { min-height: 320px; }

  .grid-3 { grid-template-columns: repeat(2, 1fr); gap: 40px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .quote-layout { grid-template-columns: 1fr; gap: 40px; }
  .slot--portrait { max-width: 260px; }
}

@media (max-width: 680px) {
  :root { --gutter: 20px; --band-y: 56px; }

  .site-header__inner { gap: 16px; }
  .site-nav { display: none; }          /* CTA and footer nav carry it */

  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; gap: 36px; }
  .shell--tall { padding-block: 72px; }

  .slot--video { aspect-ratio: 4 / 3; margin-bottom: 40px; }
  .slot--spread { height: 280px; }

  .trust__inner { align-items: flex-start; gap: 18px; }
  .trust__list { flex-direction: column; gap: 8px; }
  .trust__list li { border-left: 0; padding: 0; white-space: normal; }

  .pricing__head { align-items: flex-start; }
  .addon { gap: 10px 20px; }
  .addon__desc { min-width: 0; }

  .site-footer__inner { grid-template-columns: 1fr; gap: 32px; }
  .site-footer__bar-inner { font-size: 10px; }

  .legal__toc { columns: 1; }
  .legal h2 { margin-top: 40px; }

  .btn { height: 46px; padding: 0 20px; }
}