/*
  Acquisition landing page.

  A port of the First Online Bank WordPress theme (first-online-bank-theme/style.css), which
  was the design for www.firstonlinebank.com before it moved here. The class names are the
  originals on purpose: this file and that one should stay diffable, because the design is the
  spec and a rename would hide a drift.

  Loaded only by _BareLayout, which is the layout the Acquisition Page asks for. banking.css is
  deliberately NOT loaded beside it — that stylesheet dresses the bank demo's chrome, and this
  page brings its own. So .hero, .wrap and .btn here are free to mean what they meant in the
  theme without colliding with anything.

  The last section is the part with no counterpart in the theme: the CMS form's own class hooks,
  dressed to match the hand-written markup the theme used. See the note above it.
*/

:root{
  --paper: oklch(0.976 0.004 80);
  --paper-2: oklch(0.955 0.005 80);
  --ink: oklch(0.195 0.013 255);
  --ink-2: oklch(0.165 0.013 255);
  --text: oklch(0.255 0.012 255);
  --muted: oklch(0.50 0.012 255);
  --muted-ink: oklch(0.70 0.012 255);
  --accent: oklch(0.70 0.072 74);
  --accent-soft: oklch(0.70 0.072 74 / 0.45);
  --line: oklch(0.20 0.02 255 / 0.14);
  --line-ink: oklch(1 0 0 / 0.13);
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --maxw: 1180px;
  --pad: clamp(1.4rem, 5vw, 4rem);
}

*{ box-sizing: border-box; }
html{ -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: no-preference){ html{ scroll-behavior:smooth; } }
body{
  margin:0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection{ background: var(--accent-soft); color: var(--ink); }
a{ color: inherit; }
img{ max-width:100%; display:block; }

.wrap{ max-width: var(--maxw); margin:0 auto; padding-inline: var(--pad); }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background: var(--paper); color: var(--ink); padding:.8rem 1.2rem;
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
}
.skip-link:focus{ left:0; }

/* ---------- shared type ---------- */
.eyebrow{
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  margin:0;
}
.eyebrow .mark{ color: var(--accent); }
.kicker{
  display:inline-flex; align-items:center; gap:.85rem;
  font-size:.72rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color: var(--muted);
}
.kicker .num{ color: var(--accent); }
.kicker::before{ content:""; width:34px; height:1px; background: var(--accent); display:inline-block; }

h1,h2,h3{ font-family: var(--serif); font-weight:400; }
.lede{ font-family: var(--serif); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.7rem;
  font-family: var(--sans); font-size:.78rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  padding: 1.1rem 2.1rem; border:1px solid transparent; cursor:pointer;
  text-decoration:none; transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
  border-radius:1px;
}
.btn--light{ background: var(--paper); color: var(--ink); }
.btn--light:hover{ background: transparent; color: var(--paper); border-color: var(--accent); }
.btn--ink{ background: var(--ink); color: var(--paper); }
.btn--ink:hover{ background: transparent; color: var(--ink); border-color: var(--accent); }
/* The secondary button in the hero. Outlined rather than filled so it reads as the quieter of
   the two against the dark band — the filled one is the acquisition inquiry, and nothing beside
   it should compete for that click. */
.btn--outline{ background: transparent; color: var(--paper); border-color: var(--line-ink); }
.btn--outline:hover{ border-color: var(--accent); color: var(--paper); }
.btn .arr{ font-family: var(--serif); font-size:1rem; transform: translateY(-1px); }

/* ---------- header ---------- */
.topbar{
  position:absolute; inset:0 0 auto 0; z-index:5;
  display:flex; align-items:center; justify-content:space-between;
  padding: clamp(1.3rem,2.5vw,2rem) var(--pad);
  color: var(--paper);
}
.wordmark{ font-family: var(--sans); font-size:.74rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase; }
.wordmark .dot{ color: var(--accent); }
.topbar .tag{ font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color: var(--muted-ink); }

/* ---------- sticky acquisition bar ---------- */
.stickybar{
  position:fixed; top:0; left:0; right:0; z-index:40;
  background: oklch(0.165 0.013 255 / 0.92);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom:1px solid var(--line-ink);
  color: var(--paper);
  transform: translateY(-100%);
  transition: transform .4s cubic-bezier(.2,.7,.2,1);
}
.stickybar.is-on{ transform: translateY(0); }
.stickybar .inner{
  max-width: var(--maxw); margin:0 auto; padding:.7rem var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.stickybar .sb-left{ display:flex; align-items:baseline; gap:1.1rem; min-width:0; }
.stickybar .sb-mark{ font-size:.7rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase; white-space:nowrap; }
.stickybar .sb-price{ font-family:var(--serif); font-size:1.02rem; color: var(--paper); white-space:nowrap; }
.stickybar .sb-price .lbl{ font-family:var(--sans); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted-ink); margin-right:.5rem; }
.stickybar .sb-price .cur{ color:var(--muted-ink); font-family:var(--sans); font-size:.62rem; letter-spacing:.12em; margin-left:.5rem; }
.stickybar .btn{ padding:.7rem 1.3rem; font-size:.68rem; }
@media (max-width: 720px){
  .stickybar .sb-mark{ display:none; }
}

/* ---------- hero ---------- */
.hero{
  position:relative; background: var(--ink); color: var(--paper);
  min-height: 100svh; display:flex; align-items:center;
  padding: 7rem 0 3.5rem;
  overflow:hidden;
}
.hero::after{ /* hairline frame accent */
  content:""; position:absolute; left: var(--pad); right: var(--pad); bottom: 1.6rem;
  height:1px; background: var(--line-ink);
}
.hero__inner{ position:relative; z-index:2; }
.hero .eyebrow{ color: var(--muted-ink); }
.hero h1{
  font-size: clamp(2.7rem, 7.2vw, 5.6rem);
  line-height: 1.015; letter-spacing:-.018em; font-weight:400;
  margin:.7rem 0 0; max-width: 16ch; color: var(--paper);
}
.hero__sub{
  margin: 1.7rem 0 0; max-width: 56ch;
  font-size: clamp(1.04rem, 1.7vw, 1.26rem); line-height:1.55;
  color: var(--muted-ink);
}

/* price spec block */
.price{
  margin-top: 2.6rem;
  display:flex; flex-wrap:wrap; align-items:stretch; gap: clamp(1.4rem,3vw,2.6rem);
  border-top:1px solid var(--line-ink); border-bottom:1px solid var(--line-ink);
  padding: 1.4rem 0;
}
.price__item{ display:flex; flex-direction:column; gap:.45rem; }
.price__lbl{ font-size:.66rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color: var(--muted-ink); }
.price__val{ font-family: var(--serif); line-height:1; }
.price__item--val .price__val{ font-size: clamp(1.3rem,2.4vw,1.7rem); color: var(--muted-ink); text-decoration: line-through; text-decoration-color: var(--accent-soft); text-decoration-thickness: 1px; }
.price__item--ask .price__val{ font-size: clamp(1.9rem,3.6vw,2.7rem); color: var(--paper); }
.price__item--ask .cur{ font-size:.5em; letter-spacing:.06em; color: var(--muted-ink); margin-left:.45rem; vertical-align:.25em; }
.price__src{ font-size:.7rem; letter-spacing:.04em; color: var(--muted-ink); }
.price__rule{ width:1px; background: var(--line-ink); align-self:stretch; }

.hero__cta{ margin-top: 2.4rem; display:flex; flex-direction:column; gap:1rem; align-items:flex-start; }
/* The two buttons sit side by side and wrap together on a narrow screen, which is why they are
   their own row rather than two children of .hero__cta — that column also holds the note, and a
   wrapping flex row cannot be half of a column. */
.hero__actions{ display:flex; flex-wrap:wrap; gap:.9rem; align-items:stretch; }
.hero__note{ font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color: var(--muted-ink); }

/* ---------- generic section ---------- */
section{ padding-block: clamp(4.5rem, 11vh, 8.5rem); }
.section--paper{ background: var(--paper); }
.section--paper-2{ background: var(--paper-2); border-top:1px solid var(--line); }

/* ---------- 01 the asset ---------- */
.asset__head{ margin-bottom: 2.8rem; }
.asset__lede{
  font-size: clamp(1.7rem, 3.6vw, 2.9rem); line-height:1.18; letter-spacing:-.012em;
  color: var(--ink); max-width: 20ch; margin: 1.4rem 0 0; font-weight:400;
}
.asset__grid{ display:grid; grid-template-columns:1fr; gap:1.6rem; max-width: 60ch; margin-left:auto; }
.asset__body{ color: var(--text); font-size:1.06rem; margin:0; }
.asset__body + .asset__body{ margin-top:1.1rem; }
.asset__body p{ margin:0; }
.asset__body p + p{ margin-top:1.1rem; }
@media (min-width: 880px){
  .asset__row{ display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2.5rem,6vw,6rem); align-items:end; }
  .asset__lede{ margin-top:0; }
}

/* ---------- 02 strategic value ---------- */
.value__head{ margin-bottom: clamp(2.4rem,5vw,3.6rem); max-width:60ch; }
.value__head h2{ font-size: clamp(1.9rem,3.4vw,2.6rem); line-height:1.15; color:var(--ink); margin:1.1rem 0 0; max-width:18ch; }
.pillars{ display:grid; grid-template-columns:1fr; gap:0; }
.pillar{ padding: 2rem 0; border-top:1px solid var(--line); display:grid; grid-template-columns:1fr; gap:.7rem; }
.pillar__num{ font-family:var(--serif); font-size:1.05rem; color: var(--accent); letter-spacing:.04em; }
.pillar h3{ font-size: clamp(1.4rem,2.2vw,1.8rem); line-height:1.15; color:var(--ink); margin:0; font-weight:400; }
.pillar p{ margin:.2rem 0 0; color: var(--muted); font-size:1.02rem; max-width:34ch; }
@media (min-width: 820px){
  .pillars{ grid-template-columns: repeat(3,1fr); gap: clamp(1.6rem,3vw,3rem); }
  .pillar{ border-top:1px solid var(--ink); padding: 1.7rem 0 0; }
}

/* ---------- 03 value framing (ink quote) ---------- */
.framing{ background: var(--ink); color: var(--paper); }
.framing .kicker{ color: var(--muted-ink); }
.framing blockquote{
  margin: 1.8rem 0 0;
  font-family: var(--serif); font-weight:400;
  font-size: clamp(1.55rem, 3.2vw, 2.55rem); line-height:1.32; letter-spacing:-.01em;
  color: var(--paper); max-width: 26ch; quotes:none;
}
.framing blockquote .em,
.framing blockquote em,
.framing blockquote i{ font-style: italic; color: var(--accent); }
/* The quote is a WYSIWYG field now, so it arrives wrapped in <p>. The blockquote already carries
   the type and the measure; the paragraph inside it should add nothing. */
.framing blockquote p{ margin:0; }
.framing blockquote p + p{ margin-top:.6em; }
.framing__lead{ max-width: 28ch; }

/* ---------- acquisition ---------- */
.acq{ background: var(--paper-2); border-top:1px solid var(--line); }
.acq__grid{ display:grid; grid-template-columns:1fr; gap: clamp(2.4rem,5vw,4.5rem); }
.acq h2{ font-size: clamp(2rem,3.8vw,2.9rem); line-height:1.1; color:var(--ink); margin:1.1rem 0 0; }
.acq__copy{ color: var(--text); max-width: 46ch; margin: 1.5rem 0 0; font-size:1.06rem; }
.acq__price{ margin-top: 2rem; border-top:1px solid var(--line); padding-top:1.4rem; display:flex; flex-direction:column; gap:.45rem; }
.acq__price .lbl{ font-size:.66rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.acq__price .val{ font-family:var(--serif); font-size: clamp(1.9rem,3.4vw,2.5rem); color: var(--ink); line-height:1; }
.acq__price .cur{ font-size:.5em; color:var(--muted); margin-left:.4rem; vertical-align:.25em; letter-spacing:.06em; }
@media (min-width: 900px){
  .acq__grid{ grid-template-columns: .82fr 1.18fr; align-items:start; }
}

/* ---------- footer ---------- */
footer{ background: var(--ink-2); color: var(--muted-ink); padding-block: clamp(3rem,6vw,4.5rem); }
.foot__top{ display:flex; flex-wrap:wrap; gap:1.2rem 2rem; justify-content:space-between; align-items:baseline; padding-bottom:1.8rem; border-bottom:1px solid var(--line-ink); }
.foot__top .wordmark{ color: var(--paper); }
.foot__top .meta{ font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; }
.foot__bottom{ display:flex; flex-wrap:wrap; gap:.6rem 2rem; justify-content:space-between; margin-top:1.4rem; font-size:.74rem; line-height:1.6; color: var(--muted-ink); }
.foot__bottom p{ margin:0; max-width:62ch; }

/* ---------- reveal ---------- */
@media (prefers-reduced-motion: no-preference){
  .reveal{ opacity:0; transform: translateY(14px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
  .reveal.is-vis{ opacity:1; transform:none; }
  .reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; } .reveal.d3{ transition-delay:.24s; }
}

/* =========================================================================
   THE CMS FORM
   =========================================================================

   The theme hand-wrote its inquiry form, so there is nothing to port here —
   these rules dress the platform's own class hooks (documented in
   docs/forms.md) to land on the same design.

   The form is authored in the Forms panel and placed in the Acquisition
   block's zone. An author types `acq-form` into Settings > CSS classes on it,
   which is what scopes everything below; nothing here leaks onto a form
   placed anywhere else.

   One caveat straight from the docs: a CSS class on a form lands on BOTH the
   outer <section> (.mc-form-block) and the <form> itself. So `.acq-form` is
   two elements, and anything that nests visibly — a border, padding — would
   otherwise be drawn twice. Hence every rule below is keyed on
   `.mc-form-block.acq-form` or `.acq-form .mc-form-…`, never on `.acq-form`
   alone.
   ------------------------------------------------------------------------- */

/* The painted surface — the theme's .form.
   NOT .mc-form-block. The theme's panel contains the legend, and the legend is
   drawn by the Acquisition block because the form builder has no element for
   one. Painting the form's own section would have put the border below the
   legend instead of around it. So the block's wrapper is the panel, and the
   form inside it stays undressed — which also sidesteps the documented caveat
   that a form's CSS class lands on both the section and the <form>. */
.acq__form{
  background: var(--paper);
  border:1px solid var(--line);
  padding: clamp(1.6rem,3.5vw,2.6rem);
}
.mc-form-block.acq-form,
.acq-form form.acq-form{ background:none; border:0; padding:0; }

/* The ruled label above the form. Still the theme's rule, because it is still
   the theme's markup — the Acquisition block draws it, since the form builder
   has no element that is a section label rather than a question. */
.form__legend{
  font-family: var(--sans);
  font-size:.7rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); margin:0 0 1.6rem;
  display:flex; align-items:center; gap:.7rem;
}
.form__legend::after{ content:""; flex:1; height:1px; background: var(--line); }

.acq-form .mc-form-field{ display:flex; flex-direction:column; gap:.5rem; margin-bottom:1.3rem; }

.acq-form .mc-form-label{
  font-family: var(--sans);
  font-size:.72rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color: var(--text);
}

/* The theme put "(optional)" and the puzzle question in the label as a muted
   span. The CMS renders an element's Description as its own line, and for the
   text inputs that line lands UNDER the control rather than under the label —
   so it cannot be made to read as part of the label without replacing the
   markup. Styled as a quiet footnote instead, which is the honest version of
   where it actually is. The captcha is the exception: its question renders
   under the label, where the theme had it. */
.acq-form .mc-form-description{
  font-family: var(--sans);
  font-size:.68rem; letter-spacing:.08em; text-transform:uppercase;
  color: var(--muted); margin:0;
}

.acq-form .mc-form-input{
  font-family: var(--sans); font-size:1rem; color: var(--ink);
  background: var(--paper-2); border:1px solid var(--line); border-radius:1px;
  padding:.9rem 1rem; width:100%;
  transition: border-color .2s ease, background .2s ease;
}
.acq-form textarea.mc-form-input{ resize:vertical; min-height:96px; }
.acq-form .mc-form-input:focus{ outline:none; border-color: var(--accent); background: var(--paper); }
.acq-form .mc-form-input::placeholder{ color: oklch(0.6 0.01 255); }

/* Invalid state. The platform marks the field, so the border and the message
   both key off the same hook rather than the theme's .field.invalid. */
.acq-form .mc-form-field[data-invalid] .mc-form-input,
.acq-form .mc-form-input[aria-invalid="true"]{ border-color: oklch(0.55 0.13 25); }
.acq-form .mc-form-error{ font-size:.74rem; color: oklch(0.5 0.13 25); letter-spacing:.01em; }

/* The error summary banner has no counterpart in the theme — it kept errors
   per field. Dressed quietly so it reads as part of the form. */
.acq-form .mc-form-errors{
  font-size:.8rem; color: oklch(0.5 0.13 25);
  border:1px solid oklch(0.55 0.13 25 / .4); padding:.9rem 1rem; margin:0 0 1.4rem;
}

.acq-form .mc-form-actions{
  display:flex; flex-direction:column; gap:1rem; align-items:flex-start; margin-top:.4rem;
}
.acq-form .mc-form-submit{
  display:inline-flex; align-items:center; justify-content:center; gap:.7rem;
  font-family: var(--sans); font-size:.78rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  padding: 1.1rem 2.1rem; border:1px solid transparent; border-radius:1px; cursor:pointer;
  background: var(--ink); color: var(--paper);
  transition: background .25s ease, color .25s ease, border-color .25s ease;
  width:100%;
}
.acq-form .mc-form-submit:hover{ background: transparent; color: var(--ink); border-color: var(--accent); }
@media (min-width:520px){ .acq-form .mc-form-submit{ width:auto; } }

/* The confirmation replaces the fields, which is what the theme's
   .form.is-sent / .form__success pair did by hand. */
.acq-form .mc-form-confirmation{
  padding: clamp(1.8rem,4vw,3rem) 0;
}
.acq-form .mc-form-confirmation h3{
  font-family: var(--serif); font-weight:400;
  font-size: clamp(1.5rem,2.6vw,2rem); color:var(--ink); margin:.8rem 0 .6rem;
}
.acq-form .mc-form-confirmation p{ color: var(--muted); max-width:40ch; margin:0; }

/* The note under the button — the theme's .form__sec. Drawn by the Acquisition
   block, for the reason given on its FormNote field: a Submit element carries a
   label and a Class and nothing else, so there is no description to author. */
.form__sec{
  font-family: var(--sans);
  font-size:.72rem; letter-spacing:.04em; color: var(--muted);
  margin:1rem 0 0;
}