/* ==========================================================================
   Marlowe & Fen Bookkeeping — theme
   Light, calm, text-led. Deliberately the opposite of the carpentry site:
   generous white space, a quiet blue, and no imagery competing with the words.
   ========================================================================== */

:root {
  --d-bg:         #FFFFFF;
  --d-surface:    #F4F7FB;
  --d-ink:        #16283F;
  --d-ink-soft:   #40536B;
  --d-muted:      #5F7086;
  --d-rule:       #DDE5EF;
  --d-accent:     #2A6F97;   /* steel blue — 5.2:1 on white */
  --d-accent-ink: #FFFFFF;
  --d-dark:       #16283F;

  --d-font-display: "Lora", Georgia, "Times New Roman", serif;
  --d-font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --d-radius: 8px;
  --d-wrap:   1080px;

  /* Two secondary colours so the palette isn't a single blue. Gold carries
     figures and highlights; green means "done" and nothing else. Both are set
     dark enough to be used as text on white. */
  --mf-gold:  #96650C;
  --mf-green: #1F6B52;
  --mf-gold-wash:  #FBF3E4;
  --mf-green-wash: #E8F3EF;

  --d-scrim: .68;   /* these photos are bright, so the band scrim works harder */
}

/* A warm tinted section, for relief between the blue and the white. */
.mf-warm {
  background: linear-gradient(180deg, #FDF8EF 0%, #FBF3E4 100%);
  border-block: 1px solid #F0E3CC;
}

h1, h2, h3, h4 { font-weight: 600; letter-spacing: -.012em; }
h1 { line-height: 1.1; }

body { font-size: 1.0625rem; }

/* Light editorial hero, split down the middle. */
.mf-hero { padding-block: clamp(3rem, 2rem + 6vw, 6rem); }
.mf-hero__grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 940px) { .mf-hero__grid { grid-template-columns: 1.1fr .9fr; gap: 4rem; } }

/* A quiet credential strip rather than a loud badge row. */
.mf-creds {
  display: flex; flex-wrap: wrap; gap: .6rem 2rem;
  padding-top: 1.75rem; margin-top: 2rem;
  border-top: 1px solid var(--d-rule);
  font-size: .9375rem; color: var(--d-muted);
}
.mf-creds span { display: inline-flex; align-items: center; gap: .5rem; }
.mf-creds svg { width: 1.05rem; height: 1.05rem; color: var(--d-accent); flex: none; }

/* Service tiers — the plan card, but restrained. */
.mf-plan {
  background: var(--d-bg);
  border: 1px solid var(--d-rule);
  border-radius: var(--d-radius);
  padding: 2rem;
  display: flex; flex-direction: column;
}
.mf-plan--feature { border-color: var(--d-accent); border-width: 2px; }
.mf-plan__tag {
  font-size: .75rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--d-accent); margin-bottom: .75rem;
}
.mf-plan__price {
  font-family: var(--d-font-display); font-size: 2.5rem; color: var(--d-ink);
  line-height: 1; margin-bottom: .3rem;
}
.mf-plan__price small { font-family: var(--d-font-body); font-size: .875rem; color: var(--d-muted); font-weight: 500; }
.mf-plan .d-list { margin-top: 1.5rem; margin-bottom: 1.75rem; }
.mf-plan .d-btn { margin-top: auto; }

/* A calm document motif used behind the hero. */
.mf-doc {
  background: var(--d-surface);
  border: 1px solid var(--d-rule);
  border-radius: var(--d-radius);
  padding: 1.75rem;
}
.mf-doc__row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-block: .7rem;
  border-bottom: 1px solid var(--d-rule);
  font-size: .9375rem;
}
.mf-doc__row:last-child { border-bottom: 0; }
.mf-doc__row b { color: var(--d-ink); font-weight: 600; }

/* Green reads as "done" at a glance in a way another blue never would. */
.mf-doc__row .mf-ok {
  color: var(--mf-green); font-weight: 600;
  display: inline-flex; align-items: center; gap: .4rem;
}
.mf-doc__row .mf-ok::before {
  content: ""; width: 1rem; height: 1rem; flex: none;
  border-radius: 50%; background: var(--mf-green-wash);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231F6B52' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.4l3 3 6-6.5'/%3E%3C/svg%3E");
  background-size: .75rem; background-repeat: no-repeat; background-position: center;
}

/* Plan prices in gold — the one number on the page that should catch the eye. */
.mf-plan__price { color: var(--mf-gold); }
.mf-plan--feature .mf-plan__tag { color: var(--d-accent); }
.mf-stat-gold { color: var(--mf-gold); }

/* Service rows.
   These live in the stylesheet rather than inline on the element, because an
   inline grid-template-columns would also apply at phone widths and force a
   200px column into a 360px screen. */
.mf-row--num { grid-template-columns: 3rem 1fr; }
@media (min-width: 800px) {
  .mf-row--label { grid-template-columns: minmax(200px, 1fr) 2fr; }
}

/* FAQ */
.mf-faq details { border-bottom: 1px solid var(--d-rule); }
.mf-faq details:first-child { border-top: 1px solid var(--d-rule); }
.mf-faq summary {
  font-family: var(--d-font-display); font-size: 1.15rem; font-weight: 600;
  color: var(--d-ink); padding: 1.25rem 2.5rem 1.25rem 0;
  cursor: pointer; list-style: none; position: relative;
}
.mf-faq summary::-webkit-details-marker { display: none; }
.mf-faq summary::after {
  content: "+"; position: absolute; right: .25rem; top: 50%; transform: translateY(-50%);
  font-family: var(--d-font-body); font-size: 1.5rem; font-weight: 400; color: var(--d-accent);
  line-height: 1;
}
.mf-faq details[open] summary::after { content: "\2013"; }
.mf-faq .mf-faq__body { padding: 0 2.5rem 1.5rem 0; max-width: 68ch; }