/* Built Logic — AI Feasibility Study page, handoff v3 (11 Sep 2026).
   Page-local composition for ai-feasibility-study.html only. Palette and type
   are the locked design.md set; shared v3 tokens are read from bl-visual.css
   with a literal fallback so this sheet renders correctly on its own.

   Inside your Feasibility Study is a document composition: three selectable
   details, each one short HTML explanation beside one complete A4 page of the
   public format guide at its true proportions. The explanations are HTML text,
   not a raster of text, and every panel is in the DOM before any script runs. */

.fs-page {
  --fsv-radius-media: var(--bl-radius-media, 16px);
  --fsv-radius-card: var(--bl-radius-card, 12px);
  --fsv-shadow-media: var(--bl-shadow-media, 0 24px 60px rgba(35,42,49,.14), 0 2px 6px rgba(35,42,49,.08));
  --fsv-line: var(--bl-line-strong, rgba(35,42,49,.18));
  --fsv-ground: #FAFAF8;
  --fsv-ease: cubic-bezier(.2,.6,.2,1);
}

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

/* An explicit icon track: the marker is its own grid column, aligned to the
   first text line, so a bullet that wraps keeps its rule at the top. */
.fsv-outcomes { list-style: none; margin: 22px 0 0; padding: 0; max-width: 34em; }
.fsv-outcomes li {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  column-gap: 12px;
  align-items: start;
  padding: 10px 0;
  font-size: 18px;
  line-height: 1.5;
  color: #232A31;
  border-top: 1px solid #E5E5E2;
}
.fsv-outcomes li:first-child { border-top: none; }
.fsv-outcomes li::before {
  content: "";
  /* Half the first line box, so the rule sits on that line's optical centre. */
  margin-top: .72em;
  width: 16px;
  height: 2px;
  background: #1B3A5B;
}

/* A complete portrait page keeps its true proportions. */
.fsv-doc { margin: 0; }
/* The frame carries the border and shadow so the caption can sit inside the
   same <figure> without reading as part of the printed page. */
.fsv-doc__frame {
  border: 1px solid var(--fsv-line);
  border-radius: var(--fsv-radius-media);
  background: var(--fsv-ground);
  box-shadow: var(--fsv-shadow-media);
  overflow: hidden;
}
.fsv-doc img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 210 / 297;
  object-fit: contain;
  background: #FAFAF8;
}
.fsv-hero__doc { max-width: 420px; margin-left: auto; }
/* Centred against the document frame, not the hero column. */
.fsv-doc__cap { margin: 14px 0 0; font-size: 15px; line-height: 1.55; color: #586069; text-align: center; }

/* ------------------------------------------------------------------ questions */
/* A centred reading column: the heading is centred, the rows stay left-aligned. */
.fsv-faq { max-width: 780px; margin: 0 auto; }
.fsv-faq__h { text-align: center; }
.fsv-faq .fs-acc { max-width: none; }

/* ---------------------------------------------------- a plan you can use */

.fsv-deliverables { margin: 30px 0 0; max-width: 78em; }
.fsv-deliverables div {
  display: grid;
  grid-template-columns: minmax(0, 15em) minmax(0, 1fr);
  gap: 6px 32px;
  padding: 14px 0;
  border-top: 1px solid #E5E5E2;
}
.fsv-deliverables dt { font-size: 17px; font-weight: 600; color: #232A31; }
.fsv-deliverables dd { margin: 0; font-size: 16px; line-height: 1.6; color: #586069; }

/* -------------------------------------------- inside your Feasibility Study */
/* Three selectable details over one large panel. The .bl-tabs primitive lives in
   assets/bl-visual.css; everything below is this page's layout of one panel:
   short copy beside one complete A4 page at its true proportions. */

.fsv-inside { margin-top: 32px; }
.fsv-inside__panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  /* Top-aligned: an A4 page is tall, and centring strands the short explanation
     in the middle of a column of empty space. */
  align-items: start;
}
.fsv-inside__copy h3 {
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: 27px;
  line-height: 1.18;
  letter-spacing: -.012em;
  color: #232A31;
}
.fsv-inside__copy p {
  margin: 14px 0 0;
  font-size: 18px;
  line-height: 1.6;
  color: #586069;
  max-width: 32em;
}
/* The document detail: a complete portrait page, large enough to read, that
   opens at full size. No fixed height, so the page is never reshaped. */
.fsv-inside__doc {
  display: block;
  width: 100%;
  max-width: 460px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--fsv-line);
  border-radius: var(--fsv-radius-media);
  background: var(--fsv-ground);
  box-shadow: var(--fsv-shadow-media);
  overflow: hidden;
  cursor: zoom-in;
}
.fsv-inside__doc img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 210 / 297;
  object-fit: contain;
  background: #FAFAF8;
}
.fsv-inside__doc:focus-visible { outline: 3px solid #1B3A5B; outline-offset: 3px; }
/* Caption under the document frame, centred on the page rather than the panel
   column, so a four-item excerpt viewer states which preview is showing. */
.fsv-inside__fig { margin: 0; max-width: 460px; }
.fsv-inside__cap {
  margin: 12px 0 0;
  font: 500 13px "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.06em;
  color: #586069;
  text-align: center;
}
.fsv-inside__action { margin: 30px 0 0; font-size: 17px; }

/* ------------------------------------------------------------- responsive */

@media (max-width: 1040px) {
  .fsv-deliverables div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .fsv-inside__panel { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  /* One selected detail at full content width, as File 2 asks for on narrow screens. */
  .fsv-inside__doc { max-width: none; }
  .fsv-inside__fig { max-width: none; }
}
@media (max-width: 760px) {
  .fsv-hero__doc { max-width: 340px; margin-left: 0; }
  .fsv-outcomes li { font-size: 17px; }
  .fsv-inside__copy h3 { font-size: 24px; }
  .fsv-inside__copy p { font-size: 17px; }
}

/* ------------------------------------------------------------ utility footer */
/* v4: the full-size tagline and Map CTA left the footer on this page, so the
   dark banner starts at the card. The site-wide -40px pull existed to overlap
   the old CTA block; without it the last section would be clipped. */
.footer-shell--compact { padding-top: 56px; }

/* ==================================================================
   Feasibility Study refresh (24 Sep 2026). Shared pieces (buttons,
   icon tiles, hero field, sheets, lifting cards, FAQ cards) come from
   the "Service page refresh" block in assets/bl-visual.css.
   ================================================================== */

/* Hero outcomes: a small check tile instead of a dash */
.st-page .fsv-outcomes li { grid-template-columns: 22px minmax(0, 1fr); border-top: 0; padding: 7px 0; }
.st-page .fsv-outcomes li::before { margin-top: .12em; width: 22px; height: 22px; border-radius: 7px; background: rgba(175, 196, 221, 0.45) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B3A5B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 15px no-repeat; }
.st-page .fs-section--hero .fs-cta { margin-top: 26px; }

/* A plan you can put to work: four icon cards instead of ruled rows */
.st-page .fsv-deliverables { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; max-width: none; }
.st-page .fsv-deliverables > div { display: block; padding: 24px 22px 26px; border-bottom: 0; }
.st-page .fsv-deliverables dt { display: block; font-size: 19px; line-height: 1.3; }
.st-page .fsv-deliverables dt .bl-icon { margin-bottom: 18px; }
.st-page .fsv-deliverables dd { margin-top: 8px; }

/* Useful with us or without us: a flat Charcoal panel, not a full-width band */
.st-own__panel { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px 48px; align-items: center; padding: clamp(32px, 4vw, 52px); border-radius: clamp(20px, 3vw, 32px); background: #232A31; color: #FAFAF8; }
.st-own__panel .fs-h2, .st-own__panel .fs-body { color: #FAFAF8; }
.st-own__panel .fs-body { margin-bottom: 0; color: #E5E5E2; }
.st-own__routes { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.st-own__routes li { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 14px; background: rgba(250, 250, 248, 0.06); border: 1px solid rgba(175, 196, 221, 0.22); font-weight: 600; font-size: 17px; }
.st-own__routes .bl-icon { background: #AFC4DD; color: #232A31; }

/* Inside your Feasibility Study: sits on the tinted sheet */
.st-page .fsv-inside__action { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }

/* Take the decision to your board: a card with the download as a button */
.st-board { display: flex; align-items: center; gap: 24px; padding: clamp(24px, 3vw, 36px); border: 1px solid rgba(35, 42, 49, 0.1); border-radius: 18px; background: #FAFAF8; }
.st-board__copy { flex: 1; }
.st-board .fs-h2 { margin-top: 0; }
.st-board .fs-body { margin-bottom: 0; }

/* Closing: a tinted panel instead of a grey band */
.st-page .fs-section--request { background: transparent; padding: clamp(40px, 5vw, 64px) clamp(8px, 1.4vw, 20px); }
.st-page .fs-close-cta { background: var(--bl-tint); border-radius: clamp(20px, 3vw, 32px); padding: clamp(36px, 5vw, 60px) clamp(24px, 4vw, 56px); max-width: 56rem; text-align: center; }
.st-page .fs-close-cta .fs-body { margin-left: auto; margin-right: auto; }

@media (max-width: 1000px) {
  .st-page .fsv-deliverables { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-own__panel { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .st-page .fsv-deliverables { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .st-page .fsv-deliverables dt { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; }
  .st-page .fsv-deliverables dt .bl-icon { margin: 0; width: 44px; height: 44px; }
  .st-board { flex-direction: column; align-items: flex-start; }
  .st-page .fs-section--hero .fs-cta, .st-page .fs-close-cta .fs-cta { width: 100%; }
}

/* Published study price (24 Sep 2026, Kristian): sits with the hero button */
.st-price { margin: 24px 0 0; font-size: 17px; line-height: 1.5; color: #586069; }
.st-price strong { font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 30px; letter-spacing: -.01em; color: #232A31; margin-right: 2px; }
.st-page .st-price + .fs-cta { margin-top: 16px; }
.st-board__more { margin: 10px 0 0; font-size: 15px; color: #586069; }
.st-board__more a { color: #1B3A5B; font-weight: 600; text-decoration: underline; text-decoration-color: #AFC4DD; text-underline-offset: 4px; }
.st-board__more a:hover { text-decoration-color: #1B3A5B; }

/* Hero page flipper (25 Sep 2026): sits under the caption */
.fsv-pager { margin-top: 10px; font-size: 15px; color: #232A31; }
.fsv-pager [data-bl-pager-count] { min-width: 20ch; }