/* Brain to Build — shared site design system
   Used across pages via <link rel="stylesheet" href="site.css"> in each page's <helmet>. */

:root {
  /* Colour */
  --bt-navy: #001447;
  --bt-navy-hover: #12275C;
  --bt-sky: #25B8E4;
  --bt-bg-tint: #F4F7FA;
  --bt-muted: #4A5262;
  --bt-white: #FFFFFF;

  /* Font */
  --bt-font-body: 'Figtree', sans-serif;
  --bt-font-label: 'Archivo Narrow', sans-serif;

  /* Heading scale */
  --bt-h1-size: clamp(44px, 7cqw, 100px);
  --bt-h2-size: clamp(38px, 5.8cqw, 82px);
  --bt-h3-size: clamp(19px, 1.6cqw, 22px);
  --bt-eyebrow-size: 14px;

  /* Section spacing. Generous, because the air is what makes a page feel
     designed rather than filled. */
  --bt-section-pad-y: clamp(64px, 7cqw, 120px);
  --bt-section-pad-x: clamp(20px, 4.5cqw, 72px);

  /* Content column. Backgrounds run full width; content stays inside this. */
  --bt-content-max: 1320px;

  /* One measure for running text, used everywhere. */
  --bt-measure: 62ch;
}

/* ---- Section shell ---- */

.bt-section {
  padding: var(--bt-section-pad-y) max(var(--bt-section-pad-x), calc((100% - var(--bt-content-max)) / 2));
}

.bt-section--navy { background: var(--bt-navy); color: var(--bt-white); }
.bt-section--tint { background: var(--bt-bg-tint); }

/* ---- The grid ----
   Twelve columns. Every layout uses spans of this and nothing else, so content
   lines up vertically all the way down the page. */

.bt-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(24px, 2.8cqw, 52px);
  align-items: center;
}

.bt-grid--top { align-items: start; }
.bt-grid--stretch { align-items: stretch; }
.bt-grid--end { align-items: end; }

.c3  { grid-column: span 3; }
.c4  { grid-column: span 4; }
.c5  { grid-column: span 5; }
.c6  { grid-column: span 6; }
.c7  { grid-column: span 7; }
.c8  { grid-column: span 8; }
.c12 { grid-column: span 12; }

@container (max-width: 900px) {
  .c3, .c4, .c5, .c6, .c7, .c8 { grid-column: span 12; }
}

/* ---- Headings ---- */

.bt-h1 {
  margin: 0;
  font-family: var(--bt-font-body);
  font-size: var(--bt-h1-size);
  line-height: 1.02;
  letter-spacing: -0.036em;
  font-weight: 600;
  color: inherit;
  text-wrap: pretty;
}

.bt-h2 {
  margin: 0;
  font-family: var(--bt-font-body);
  font-size: clamp(36px, 5.2cqw, 76px);
  line-height: 1.06;
  letter-spacing: -0.032em;
  font-weight: 600;
  color: inherit;
  text-wrap: pretty;
}

.bt-h2--wide { max-width: 26ch; }

.bt-h3 {
  margin: 0;
  font-family: var(--bt-font-body);
  font-size: var(--bt-h3-size);
  line-height: 1.25;
  letter-spacing: -0.018em;
  font-weight: 500;
  color: inherit;
}

/* ---- Section eyebrow ----
   Small wide-tracked label with a short cyan rule under it. Every section gets
   one, the way every page of the guide is signposted before you read it. */

.bt-eyebrow {
  display: block;
  margin: 0 0 clamp(20px, 2.2cqw, 32px);
  font-family: var(--bt-font-label);
  font-size: var(--bt-eyebrow-size);
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--bt-muted);
}

.bt-eyebrow::after {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  background: var(--bt-sky);
  margin-top: 14px;
}

.bt-section--navy .bt-eyebrow { color: rgba(255, 255, 255, .7); }

/* ---- Typography ---- */

.bt-lead {
  margin: 0;
  font-family: var(--bt-font-body);
  font-size: clamp(17px, 1.75cqw, 24px);
  line-height: 1.55;
  font-weight: 400;
  color: inherit;
  max-width: var(--bt-measure);
  text-wrap: pretty;
}

.bt-body {
  margin: 0;
  font-family: var(--bt-font-body);
  font-size: clamp(16px, 1.42cqw, 20px);
  line-height: 1.5;
  font-weight: 400;
  color: inherit;
  max-width: var(--bt-measure);
}

.bt-sub {
  margin: 0;
  font-family: var(--bt-font-body);
  font-size: clamp(27px, 3.2cqw, 46px);
  line-height: 1.15;
  letter-spacing: -0.024em;
  font-weight: 500;
  color: inherit;
  max-width: 24ch;
  text-wrap: pretty;
}

/* Captions sit under the thing they describe, on the same left edge as
   everything else. Never centred. */
.bt-caption {
  margin: 16px 0 0;
  font-family: var(--bt-font-body);
  font-size: clamp(16px, 1.15cqw, 17.5px);
  line-height: 1.5;
  font-weight: 400;
  color: var(--bt-muted);
  text-align: left;
  max-width: var(--bt-measure);
}

.bt-section--navy .bt-caption { color: rgba(255, 255, 255, .72); }

.bt-h2 + .bt-lead,
.bt-sub + .bt-lead { margin-top: clamp(16px, 1.8cqw, 26px); }

/* ---- Device frames ----
   Frames fill the grid column they sit in. The screenshot obeys the layout,
   not the other way round. */

.bt-browser-frame {
  width: 100%;
  background: var(--bt-white);
  border: 1px solid rgba(0, 20, 71, .18);
  box-shadow: 0 26px 56px rgba(0, 20, 71, .12);
}

.bt-browser-frame__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  background: var(--bt-bg-tint);
  border-bottom: 1px solid rgba(0, 20, 71, .14);
}

.bt-browser-frame__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(0, 20, 71, .18);
  display: block;
}

.bt-browser-frame__window { background: var(--bt-white); line-height: 0; }

.bt-browser-frame__window img { display: block; width: 100%; height: auto; }

.bt-phone-frame {
  width: 100%;
  /* A phone screenshot is 9:16. Left uncapped it grows taller than anything
     beside it and blows a hole in the row. */
  max-width: 320px;
  border: 10px solid var(--bt-navy);
  border-radius: 34px;
  overflow: hidden;
  background: var(--bt-navy);
  box-shadow: 0 18px 40px rgba(0, 20, 71, .18);
}

.bt-phone-frame__window { line-height: 0; }

.bt-phone-frame__window img { display: block; width: 100%; height: auto; }

/* ---- Screen picker ----
   One record, several views. The visitor chooses. */

.bt-rotator {
  position: relative;
  width: 100%;
  height: clamp(420px, 40cqw, 580px);
  background: var(--bt-white);
}

.bt-rotator img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity .45s ease;
}

.bt-rotator img.is-on { opacity: 1; }

.bt-viewpick {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin: 24px 0 0;
}

.bt-viewpick button {
  font-family: var(--bt-font-body);
  font-size: clamp(15px, 1.15cqw, 16.5px);
  font-weight: 500;
  color: var(--bt-navy);
  background: transparent;
  border: 1px solid rgba(0, 20, 71, .22);
  padding: 12px 20px;
  min-height: 46px;
  cursor: pointer;
  line-height: 1.2;
}

.bt-viewpick button:hover { border-color: var(--bt-sky); }

.bt-viewpick button[aria-selected="true"] {
  background: var(--bt-navy);
  border-color: var(--bt-navy);
  color: var(--bt-white);
}

/* ---- Spec row ----
   The thin labelled row under a device, as used on the Field Logic social cards. */

.bt-specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: clamp(20px, 2.4cqw, 44px);
  margin: clamp(36px, 3.8cqw, 60px) 0 0;
}

.bt-spec {
  border-top: 2px solid rgba(0, 20, 71, .18);
  padding-top: 16px;
  font-family: var(--bt-font-body);
  font-size: clamp(17px, 1.5cqw, 21px);
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: -0.014em;
  color: inherit;
}

.bt-spec--accent { border-top-color: var(--bt-sky); color: var(--bt-sky); }

.bt-section--navy .bt-spec { border-top-color: rgba(255, 255, 255, .28); }

/* ---- Point list ---- */

.bt-points { margin: 0; padding: 0; list-style: none; }

.bt-points li {
  border-top: 1px solid rgba(0, 20, 71, .20);
  padding: 16px 0;
  font-family: var(--bt-font-body);
  font-size: clamp(17px, 1.3cqw, 19px);
  line-height: 1.45;
  font-weight: 400;
  color: inherit;
}

.bt-points li:last-child { border-bottom: 1px solid rgba(0, 20, 71, .20); }

.bt-section--navy .bt-points li { border-color: rgba(255, 255, 255, .26); }

/* ---- Workflow stepper ---- */

.bt-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 24px 0;
  margin: 28px 0 0;
}

.bt-step { position: relative; text-align: center; padding: 0 10px; }

.bt-step__dot {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bt-white);
  color: var(--bt-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 17px;
  margin: 0 auto 12px;
  position: relative;
  z-index: 1;
}

.bt-step:not(:first-child)::before {
  content: "";
  position: absolute;
  top: 21px;
  right: 50%;
  width: 100%;
  height: 2px;
  background: rgba(255, 255, 255, .35);
}

.bt-step__label {
  display: block;
  font-size: 16.5px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--bt-white);
}

@container (max-width: 700px) {
  .bt-step:not(:first-child)::before { display: none; }
}

/* ---- Buttons ---- */

.bt-btn {
  font-family: var(--bt-font-body);
  font-size: 16.5px;
  font-weight: 500;
  color: var(--bt-white);
  background: var(--bt-navy);
  border: none;
  padding: 18px 36px;
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.bt-btn:hover { background: var(--bt-navy-hover); color: var(--bt-white); text-decoration: none; }

/* Outline button, for the second action in a pair. */
.bt-btn--ghost {
  color: var(--bt-navy);
  background: transparent;
  border: 1.5px solid var(--bt-navy);
  padding: 16.5px 34.5px;
}

.bt-btn--ghost:hover { background: transparent; color: var(--bt-navy); border-color: var(--bt-sky); }

.bt-section--navy .bt-btn--ghost { color: var(--bt-white); border-color: rgba(255,255,255,.6); }
.bt-section--navy .bt-btn--ghost:hover { color: var(--bt-white); border-color: var(--bt-sky); }

.bt-link {
  font-size: 16.5px;
  font-weight: 500;
  color: inherit;
  text-decoration: none;
  border-bottom: 2px solid var(--bt-sky);
  padding-bottom: 5px;
  white-space: nowrap;
}

.bt-link:hover { color: var(--bt-sky); text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  .bt-rotator img { transition: none; }
}


/* Device label — wide caps above a device, as on the social cards. */
.bt-devlabel {
  display: block;
  margin: 0 0 16px;
  font-family: var(--bt-font-label);
  font-size: 17.5px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--bt-navy);
}
.bt-section--navy .bt-devlabel { color: rgba(255,255,255,.85); }

/* Clean screen card — a screenshot with soft depth and no fake chrome. */
.bt-screen {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 20, 71, .16);
  border: 1px solid rgba(0, 20, 71, .10);
  line-height: 0;
  background: var(--bt-white);
}
.bt-screen img { display: block; width: 100%; height: auto; }


/* Numbered feature cards — the guide's check numbering, dressed for a product page. */
.bt-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(18px, 2cqw, 32px);
}

.bt-card {
  background: var(--bt-white);
  border: 1px solid rgba(0, 20, 71, .10);
  box-shadow: 0 14px 36px rgba(0, 20, 71, .08);
  padding: clamp(24px, 2.4cqw, 34px) clamp(22px, 2.2cqw, 32px);
}

.bt-card__num {
  display: block;
  font-family: var(--bt-font-label);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--bt-sky);
  margin-bottom: 12px;
}

.bt-card__label {
  display: block;
  font-family: var(--bt-font-body);
  font-size: clamp(19px, 1.7cqw, 24px);
  font-weight: 500;
  letter-spacing: -0.018em;
  color: var(--bt-navy);
  line-height: 1.25;
}

.bt-card--navy { background: var(--bt-navy); border-color: var(--bt-navy); }
.bt-card--navy .bt-card__label { color: var(--bt-white); }


/* ---- Feature story ----
   One reusable scroll-driven product story. Markup contract:
   .bt-story
     > header block (category label + heading)
     > .bt-story__scroll   desktop: tall scroll runway
         > .bt-story__stage   pinned icy-blue stage
             > .bt-story__copy   one .bt-story__statement per step
             > .bt-story__media  one .bt-story__shot per step (img inside)
     > .bt-story__stack    mobile and reduced-motion: static stacked panels
   Position and scale per shot are tuned with --shot-w (width) and
   --shot-lift (how far the crop rises into view). */

.bt-story__scroll { height: 280cqh; }
@supports not (height: 280cqh) { .bt-story__scroll { height: 280vh; } }

.bt-story__stage {
  position: sticky;
  top: 7vh;
  height: 86vh;
  background: var(--bt-bg-tint);
  border-radius: 24px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 42% 58%;
  align-items: center;
}

.bt-story__copy { position: relative; height: 100%; }

.bt-story__statement {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 0 clamp(28px, 3cqw, 56px);
  margin: 0;
  font-family: var(--bt-font-body);
  font-size: clamp(24px, 2.4cqw, 38px);
  line-height: 1.25;
  letter-spacing: -0.022em;
  font-weight: 500;
  color: var(--bt-navy);
  text-wrap: pretty;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease, transform .6s ease;
}

.bt-story__statement.is-on { opacity: 1; transform: translateY(0); }

.bt-story__media { position: relative; height: 100%; }

.bt-story__shot {
  position: absolute;
  left: 50%;
  bottom: calc(-1 * var(--shot-lift, 0px));
  width: var(--shot-w, 62%);
  transform: translateX(-50%) translateY(18px) scale(.985);
  opacity: 0;
  transition: opacity .5s ease, transform .6s ease;
}

.bt-story__shot.is-on { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }

.bt-story__shot img { display: block; width: 100%; height: auto; }

.bt-story__stack { display: none; }

@container (max-width: 900px) {
  .bt-story__scroll { display: none; }
  .bt-story__stack { display: flex; flex-direction: column; gap: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .bt-story__scroll { display: none; }
  .bt-story__stack { display: flex; flex-direction: column; gap: 20px; }
}

.bt-story__panel {
  background: var(--bt-bg-tint);
  border-radius: 20px;
  overflow: hidden;
  padding: 26px 20px 0;
}

.bt-story__panel p {
  margin: 0;
  font-family: var(--bt-font-body);
  font-size: 18px;
  line-height: 1.45;
  font-weight: 500;
  color: var(--bt-navy);
  text-wrap: pretty;
}

.bt-story__panel-shot { margin: 24px auto 0; width: min(420px, 96%); }
.bt-story__panel-shot img { display: block; width: 100%; height: auto; }

/* Oversized device picture that bleeds slightly out of its column */

/* ---- Feature section ----
   One component for every Field Logic feature section, so the six of them are
   identical in every measurement. Copy block left or right, one composed
   product picture opposite it.

   Reading order is fixed: eyebrow, headline, main paragraph, teal-rule
   statement, supporting paragraph, picture. On a narrow screen the picture
   always drops to the bottom, whichever side it sits on at desktop. */

.bt-feature { align-items: center; }

/* The label above the headline: short cyan rule, then the word. */
.bt-flabel {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin: 0 0 clamp(24px, 2.6cqw, 36px);
}

.bt-flabel::before {
  content: "";
  display: block;
  flex: none;
  width: 32px;
  height: 3px;
  background: var(--bt-sky);
  margin-top: 9px;
}

.bt-flabel span {
  font-family: var(--bt-font-label);
  font-size: clamp(15px, 1.4cqw, 19px);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bt-navy);
  line-height: 1.1;
}

/* Main paragraph under the headline. */
.bt-feature__lead { margin-top: clamp(22px, 2.4cqw, 32px); }

/* The teal-rule statement. Same rule, same spacing, in every section.
   A little stronger than the supporting copy, never bolder than the headline. */
.bt-pull {
  margin: clamp(24px, 2.4cqw, 32px) 0 0;
  padding-left: 20px;
  border-left: 3px solid var(--bt-sky);
  font-family: var(--bt-font-body);
  font-size: clamp(18px, 1.85cqw, 25px);
  line-height: 1.45;
  letter-spacing: -0.018em;
  font-weight: 500;
  color: inherit;
  max-width: 46ch;
  text-wrap: pretty;
}

/* Supporting paragraph under the statement. */
.bt-feature__close {
  margin-top: clamp(24px, 2.4cqw, 32px);
  color: var(--bt-muted);
}

@container (max-width: 900px) {
  .bt-feature > .bt-feature__copy { order: 1; }
  .bt-feature > .bt-feature__art  { order: 2; }
}

.bt-bleed { width: 114%; max-width: none; margin-left: -7%; }
.bt-bleed--left { margin-left: -7%; }
/* The job section: a wider column plus a touch more bleed, so this
   composition carries the same weight as the ones either side of it. */
.bt-bleed--xl { width: 111%; margin-left: -5%; }

@container (max-width: 900px) {
  .bt-bleed { width: 100%; margin-left: 0; margin-right: 0; }
}

/* ---- Home page components ---- */

/* Numbered step marker, used on navy. */
.bt-step {
  display: block;
  font-family: var(--bt-font-label);
  font-size: clamp(30px, 3cqw, 44px);
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1;
  color: var(--bt-sky);
}

/* Light variant of the feature label, for navy sections. */
.bt-flabel--light span { color: #FFFFFF; }

/* Service card. A rule, a title, a sentence, three plain lines. No box. */
.bt-svc {
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-top: 1px solid rgba(0, 20, 71, .20);
  padding-top: clamp(20px, 2cqw, 28px);
  height: 100%;
}

.bt-svc__rule { display: block; width: 32px; height: 3px; background: var(--bt-sky); }

.bt-svc__title {
  margin: 0;
  font-size: clamp(20px, 1.75cqw, 24px);
  line-height: 1.2;
  letter-spacing: -0.018em;
  font-weight: 600;
  text-wrap: pretty;
}

.bt-svc__body {
  margin: 0;
  font-size: clamp(16px, 1.42cqw, 18px);
  line-height: 1.5;
  color: inherit;
}

.bt-svc__list {
  margin: auto 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.bt-svc__list li {
  font-size: clamp(15px, 1.3cqw, 16.5px);
  line-height: 1.4;
  color: var(--bt-muted);
}

/* Proof card in the Field Logic block: everything centred over the phone. */
.bt-proofcard { display: flex; flex-direction: column; gap: 16px; height: 100%; text-align: center; }

.bt-proofcard__title {
  margin: 0;
  font-size: clamp(20px, 1.75cqw, 24px);
  line-height: 1.22;
  letter-spacing: -0.018em;
  font-weight: 600;
  text-wrap: pretty;
}

.bt-proofcard__body {
  margin: 0;
  font-size: clamp(16px, 1.42cqw, 18px);
  line-height: 1.5;
  color: var(--bt-muted);
  text-wrap: pretty;
}

.bt-proofcard__shot {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  margin: auto auto 0;
  padding-top: clamp(16px, 2cqw, 30px);
  align-self: center;
}

/* Copy that is still to be written. Marked so it cannot go live by accident. */
.bt-todo {
  margin-top: clamp(26px, 2.6cqw, 36px);
  border-left: 3px solid var(--bt-sky);
  padding: 4px 0 4px 20px;
}

.bt-todo__label {
  font-family: var(--bt-font-label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bt-muted);
  margin-bottom: 10px;
}

.bt-todo__body {
  margin: 0;
  font-size: clamp(16px, 1.42cqw, 18px);
  line-height: 1.5;
  color: var(--bt-muted);
}

.bt-todo--light { margin-top: 0; }
.bt-todo--light .bt-todo__label { color: rgba(255, 255, 255, .72); }
.bt-todo--light .bt-todo__body { color: rgba(255, 255, 255, .82); }

/* ---- Owner section ----
   Image left, heading and body stacked right, both tops aligned. The closing
   statement runs the full grid width under one rule. Mobile order is set by the
   DOM: heading, photograph, body. */

.bt-owner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(28px, 3.2cqw, 60px);
  row-gap: clamp(20px, 2.2cqw, 30px);
  align-items: start;
}
.bt-owner__head { grid-column: 2; grid-row: 1; }
.bt-owner__art  { grid-column: 1; grid-row: 1 / span 2; align-self: stretch; }
.bt-owner__art img { height: 100%; object-fit: cover; object-position: 50% 42%; }
.bt-owner__body { grid-column: 2; grid-row: 2; }
.bt-owner__head .bt-h2 { margin-top: clamp(18px, 2cqw, 28px); }
.bt-owner__body .bt-lead { max-width: 56ch; }

.bt-owner-close {
  margin: clamp(44px, 4.6cqw, 78px) 0 0;
  border-top: 1px solid rgba(0, 20, 71, .20);
  padding-top: clamp(30px, 3.2cqw, 48px);
  font-size: clamp(22px, 2.4cqw, 32px);
  line-height: 1.34;
  letter-spacing: -0.022em;
  font-weight: 400;
  max-width: none;
  text-wrap: pretty;
}

@container (max-width: 900px) {
  .bt-owner { grid-template-columns: 1fr; row-gap: clamp(24px, 3cqw, 34px); }
  .bt-owner__head,
  .bt-owner__art,
  .bt-owner__body { grid-column: 1; grid-row: auto; }
  .bt-owner__body .bt-lead { max-width: none; }
  .bt-owner__art img { height: auto; object-fit: fill; }
}
.bt-contact-link { color: var(--bt-navy); text-decoration: none; }
.bt-contact-link:hover { color: var(--bt-navy); text-decoration: underline; text-decoration-color: var(--bt-sky); text-underline-offset: 3px; }
.bt-section--navy .bt-contact-link { color: #A2DFED; }
.bt-section--navy .bt-contact-link:hover { color: var(--bt-white); text-decoration-color: var(--bt-white); }

.fl-quote-body p { margin: 0 0 0.85em; }
.fl-quote-body p:last-child { margin-bottom: 0; }