/* ==========================================================================
   FAMILY TECH — one stylesheet for the whole site.

   Change something here and it changes on every page.
   You will probably never need to touch this file. If you want the text
   bigger everywhere, change --body-size on the line marked EDIT below.
   ========================================================================== */

:root {
  /* EDIT: overall text size. 20px is already large. 22px is larger still. */
  --body-size: 20px;

  --ink:        #1c2530;   /* main text */
  --ink-soft:   #4a5563;   /* quieter text */
  --bg:         #fdfbf7;   /* warm off-white page */
  --panel:      #ffffff;   /* cards */
  --accent:     #0f5c4d;   /* deep green - buttons, links */
  --accent-dk:  #0a4238;
  --accent-sft: #e9f1ee;   /* pale green panels */
  --warn:       #8a3324;   /* muted brick, for scam warnings */
  --warn-sft:   #fbf0ed;
  --rule:       #ddd6ca;   /* hairlines */
  --accent-brd: #c6ddd6;   /* border of pale-green panels */
  --warn-brd:   #e8cec7;   /* border of pale-red panels */
  --on-accent:  #ffffff;   /* text that sits ON the accent colour */
  --shadow:     0 1px 3px rgba(28,37,48,.07), 0 8px 24px rgba(28,37,48,.05);

  /* The footer has its OWN colours. It must stay dark in both light and dark
     mode — don't wire it to --ink, or it inverts when the theme flips. */
  --foot-bg:   #1c2530;
  --foot-text: #c3cbd4;
  --foot-link: #9fd4c6;
  --foot-fine: #8b97a3;
  --foot-rule: #33414f;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--body-size);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* --- Skip link (for screen readers and keyboard users) ------------------- */
.skip {
  position: absolute; left: -9999px;
  background: var(--accent); color: var(--on-accent); padding: .8rem 1.2rem;
  border-radius: 0 0 8px 0; z-index: 100; text-decoration: none;
}
.skip:focus { left: 0; top: 0; }

/* --- Layout -------------------------------------------------------------- */
.wrap { width: 100%; max-width: 46rem; margin: 0 auto; padding: 0 1.25rem; }
.wrap--wide { max-width: 60rem; }

section { padding: 3.25rem 0; border-top: 1px solid var(--rule); }
section:first-of-type { border-top: 0; }

/* --- Header -------------------------------------------------------------- */
.site-head {
  background: var(--panel);
  border-bottom: 1px solid var(--rule);
  padding: .9rem 0;
  position: sticky; top: 0; z-index: 50;
}
.site-head .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.brand {
  font-family: var(--serif);
  font-size: 1.5rem; font-weight: 600; letter-spacing: -.01em;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.brand span { color: var(--accent); }
.nav { display: flex; gap: 1.4rem; flex-wrap: wrap; align-items: center; }
.nav a {
  color: var(--ink-soft); text-decoration: none; font-size: .95rem;
  font-weight: 500; padding: .4rem 0; border-bottom: 2px solid transparent;
}
.nav a:hover, .nav a:focus { color: var(--accent); border-bottom-color: var(--accent); }
.nav a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }

/* --- Hero ---------------------------------------------------------------- */
.hero { padding: 3.5rem 0 3rem; border-top: 0; }
.hero h1 {
  font-family: var(--serif);
  font-size: clamp(2.1rem, 6vw, 3.1rem);
  line-height: 1.15; letter-spacing: -.02em;
  margin: 0 0 1rem;
}
.hero .lede { font-size: 1.2rem; color: var(--ink-soft); margin: 0 0 1.8rem; }

.portrait {
  width: 148px; height: 148px; border-radius: 50%;
  object-fit: cover; border: 4px solid var(--panel);
  box-shadow: var(--shadow); margin-bottom: 1.5rem; display: block;
  background: var(--accent-sft);
}
.portrait--placeholder {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: .85rem; color: var(--accent);
  text-align: center; padding: 1rem; line-height: 1.3;
}

/* --- Headings ------------------------------------------------------------ */
h2 {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 4vw, 2.1rem);
  line-height: 1.2; letter-spacing: -.015em; margin: 0 0 1.1rem;
}
h3 {
  font-size: 1.15rem; font-weight: 700; margin: 2rem 0 .5rem;
  letter-spacing: -.005em;
}
p { margin: 0 0 1.15rem; }
p:last-child { margin-bottom: 0; }
a { color: var(--accent); text-underline-offset: .18em; }
a:hover { color: var(--accent-dk); }

.eyebrow {
  font-size: .82rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 .6rem;
}

/* --- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .55rem; min-height: 60px; padding: .85rem 1.6rem;
  background: var(--accent); color: #fff; text-decoration: none;
  font-size: 1.22rem; font-weight: 600; border-radius: 10px;
  border: 2px solid var(--accent); box-shadow: var(--shadow);
  transition: background .15s ease;
}
.btn:hover, .btn:focus { background: var(--accent-dk); color: #fff; }
.btn--ghost { background: var(--panel); color: var(--accent); }
.btn--ghost:hover, .btn--ghost:focus { background: var(--accent-sft); color: var(--accent-dk); }
.btn-row { display: flex; gap: .9rem; flex-wrap: wrap; }

/* --- Panels -------------------------------------------------------------- */
.panel {
  background: var(--panel); border: 1px solid var(--rule);
  border-radius: 12px; padding: 1.6rem 1.7rem; box-shadow: var(--shadow);
}
.panel--accent {
  background: var(--accent-sft); border-color: var(--accent-brd);
}
.panel--warn {
  background: var(--warn-sft); border-color: var(--warn-brd);
}
.panel h3:first-child, .panel h2:first-child { margin-top: 0; }

/* The single most important box on the site. */
.rule-box {
  background: var(--accent); color: #fff;
  border-radius: 14px; padding: 2rem 1.9rem; box-shadow: var(--shadow);
  text-align: center;
}
.rule-box p.rule-text {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 4.2vw, 1.9rem);
  line-height: 1.3; margin: 0 0 .9rem; font-weight: 600;
}
.rule-box p.rule-sub { margin: 0; color: #cfe4dd; font-size: 1.02rem; }

/* --- Lists --------------------------------------------------------------- */
ul.plain, ul.check { padding-left: 0; list-style: none; margin: 0 0 1.15rem; }
ul.check li {
  position: relative; padding-left: 2rem; margin-bottom: .7rem;
}
ul.check li::before {
  content: "✓"; position: absolute; left: 0; top: -.05em;
  color: var(--accent); font-weight: 700; font-size: 1.15rem;
}
ul.never li::before { content: "✕"; color: var(--warn); }
ul.bullets { padding-left: 1.3rem; margin: 0 0 1.15rem; }
ul.bullets li { margin-bottom: .55rem; }

.two-col {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.2rem;
}

/* --- Price --------------------------------------------------------------- */
.price-card { background: var(--panel); border: 1px solid var(--rule);
  border-radius: 12px; padding: 1.5rem; box-shadow: var(--shadow); }
.price-card .price-name { font-weight: 700; margin: 0 0 .3rem; }
.price-card .price-fig {
  font-family: var(--serif); font-size: 2.2rem; line-height: 1.1;
  color: var(--accent); margin: 0;
}
.price-card .price-was {
  color: var(--ink-soft); font-size: .95rem; margin: .35rem 0 0;
}
.price-card .price-note { font-size: .95rem; color: var(--ink-soft); margin: .7rem 0 0; }

/* --- FAQ ----------------------------------------------------------------- */
.faq-group { margin-bottom: 2.5rem; }
details.qa {
  border-bottom: 1px solid var(--rule); padding: .35rem 0;
}
details.qa summary {
  cursor: pointer; list-style: none; padding: 1rem 2.2rem 1rem 0;
  font-weight: 600; font-size: 1.08rem; position: relative;
}
details.qa summary::-webkit-details-marker { display: none; }
details.qa summary::after {
  content: "+"; position: absolute; right: .3rem; top: .85rem;
  font-size: 1.7rem; font-weight: 400; color: var(--accent); line-height: 1;
}
details.qa[open] summary::after { content: "−"; }
details.qa summary:hover { color: var(--accent); }
details.qa .answer { padding: 0 0 1.2rem; color: var(--ink-soft); }
details.qa .answer p:last-child { margin-bottom: 0; }

/* --- Testimonials -------------------------------------------------------- */
blockquote.quote {
  margin: 0 0 1.4rem; padding: 1.3rem 1.5rem; background: var(--panel);
  border-left: 4px solid var(--accent); border-radius: 0 10px 10px 0;
  box-shadow: var(--shadow);
}
blockquote.quote p { font-size: 1.05rem; }
blockquote.quote cite {
  display: block; font-style: normal; font-weight: 600;
  font-size: .95rem; color: var(--ink-soft); margin-top: .6rem;
}

/* --- Steps --------------------------------------------------------------- */
ol.steps { list-style: none; counter-reset: s; padding: 0; margin: 0; }
ol.steps li {
  counter-increment: s; position: relative;
  padding: 0 0 1.6rem 3.4rem; border-left: 2px solid var(--rule);
  margin-left: 1.1rem;
}
ol.steps li:last-child { border-left-color: transparent; padding-bottom: 0; }
ol.steps li::before {
  content: counter(s); position: absolute; left: -1.15rem; top: -.15rem;
  width: 2.3rem; height: 2.3rem; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.05rem;
}
ol.steps li strong { display: block; font-size: 1.1rem; margin-bottom: .25rem; }

/* --- Footer -------------------------------------------------------------- */
.site-foot {
  background: var(--foot-bg); color: var(--foot-text); padding: 3rem 0 2.5rem;
  font-size: .97rem;
}
.site-foot a { color: var(--foot-link); }
.site-foot .brand { color: #fff; font-size: 1.3rem; }
.site-foot .brand span { color: var(--foot-link); }
.site-foot strong { color: #fff; }
.foot-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 2rem; margin-bottom: 2rem;
}
.foot-grid h4 { color: #fff; font-size: .82rem; letter-spacing: .09em;
  text-transform: uppercase; margin: 0 0 .7rem; }
.foot-grid ul { list-style: none; padding: 0; margin: 0; }
.foot-grid li { margin-bottom: .45rem; }
.fine { border-top: 1px solid var(--foot-rule); padding-top: 1.4rem;
  font-size: .87rem; color: var(--foot-fine); }

/* --- Utility ------------------------------------------------------------- */
.center { text-align: center; }
.mt0 { margin-top: 0; }
.small { font-size: .93rem; color: var(--ink-soft); }
.tel { font-weight: 700; white-space: nowrap; }

/* --- A line you can either type on or print and write on ----------------- */
.writeline-label {
  display: block; margin-top: 1.2rem;
  font-size: .93rem; font-weight: 600; color: var(--ink-soft);
}
.writeline {
  display: block; width: 100%; margin-top: .3rem;
  border: 0; border-bottom: 2px solid var(--rule);
  border-radius: 0; background: transparent; color: var(--ink);
  font-family: inherit; font-size: 1.2rem; font-weight: 600;
  padding: .45rem .2rem;
}
.writeline::placeholder { font-weight: 400; font-size: .95rem; color: var(--ink-soft); opacity: .75; }
.writeline:focus { outline: none; border-bottom-color: var(--accent); }

/* --- Sticky call bar (phones only) ---------------------------------------
   On a phone the phone number is always one tap away, at any scroll depth.
   Hidden on desktop, where the mid-page buttons do the same job. */
.callbar { display: none; }

/* --- On-this-page index --------------------------------------------------
   A shortcut list that sits in the empty left margin on wide screens and
   jumps to a section when clicked. There is only room for it on a large
   desktop window, so below 1280px wide it disappears entirely and the page
   behaves exactly as it did before. It never prints.

   The left position is worked out from the middle of the screen, so the
   list always sits the same distance from the text column no matter how
   wide the window is: half the screen, minus half the text column (23rem),
   minus the width of the list and its gap (14.5rem). */
.pageindex { display: none; }

@media (min-width: 1280px) {
  .pageindex {
    display: block;
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    /* The index is a proper little card, not floating text. That matters:
       the faint dividing line between page sections runs the full width of
       the window, so if the list had no visible edges the line would appear
       to break for no reason as it passed behind it. With a card, the line
       clearly goes behind something, which is what the eye expects. */
    left: calc(50% - 23rem - 15.6rem);
    width: 14.2rem;
    padding: .85rem 1rem;
    background: var(--panel);
    border: 1px solid var(--rule);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,.10);
    max-height: 76vh;
    overflow-y: auto;
    z-index: 40;
    font-size: .95rem;
    line-height: 1.4;
  }
  .pageindex-title {
    margin: 0 0 .7rem .9rem;
    font-size: .74rem; font-weight: 700;
    letter-spacing: .09em; text-transform: uppercase;
    color: var(--ink-soft);
  }
  .pageindex ul {
    list-style: none; margin: 0; padding: 0;
    border-left: 2px solid var(--rule);
  }
  .pageindex li { margin: 0; }
  .pageindex a {
    display: block;
    padding: .42rem .3rem .42rem .9rem;
    margin-left: -2px;
    border-left: 2px solid transparent;
    color: var(--ink-soft);
    text-decoration: none;
  }
  .pageindex a:hover, .pageindex a:focus {
    color: var(--accent);
    border-left-color: var(--accent-brd);
  }
  .pageindex a.is-current {
    color: var(--accent);
    font-weight: 700;
    border-left-color: var(--accent);
  }
}

/* Landing on a section must not tuck its heading underneath the sticky
   header at the top of the screen. */
section[id], h2[id] { scroll-margin-top: 5.5rem; }

/* Some people set their computer to reduce motion, usually because gliding
   movement makes them queasy. For them, jump straight to the section. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* --- A call-to-action dropped into the middle of a page ------------------ */
.cta-inline { text-align: center; margin-top: 2.2rem; }
.cta-inline .small { margin: .8rem 0 0; }

/* --- Small screens -------------------------------------------------------
   On a phone the menu wraps onto two lines. If it also stuck to the top of
   the screen it would eat a quarter of the display, so on narrow screens it
   simply scrolls away like the rest of the page. */
@media (max-width: 640px) {
  .site-head { position: static; }
  .nav { gap: 1.1rem; }
  .nav a { font-size: .92rem; }
  .hero { padding-top: 2.5rem; }
  section { padding: 2.6rem 0; }
}

@media (max-width: 700px) {
  .callbar {
    display: flex; align-items: center; justify-content: center;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    min-height: 64px; padding: .9rem 1rem;
    padding-bottom: calc(.9rem + env(safe-area-inset-bottom, 0px));
    background: var(--accent); color: var(--on-accent);
    font-size: 1.15rem; font-weight: 700; text-decoration: none;
    box-shadow: 0 -2px 14px rgba(0,0,0,.22);
  }
  /* Leave room so the sticky bar never covers the end of the footer. */
  body { padding-bottom: 76px; }
}

/* --- Keyboard focus ------------------------------------------------------ */
a:focus-visible, summary:focus-visible, button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px; border-radius: 4px;
}

/* --- Printing (the Scam Resources page gets printed) --------------------- */
@media print {
  .site-head, .site-foot, .btn-row, .skip,
  .callbar, .cta-inline, .pageindex { display: none !important; }
  body { padding-bottom: 0 !important; }
  body { font-size: 12pt; background: #fff; }
  .panel, .rule-box { box-shadow: none; border: 1px solid #999; }
  .rule-box { background: #fff !important; color: #000 !important; }
  .rule-box p.rule-sub { color: #333 !important; }
  details.qa { page-break-inside: avoid; }
  /* Keep the write-on line visible on paper, with anything typed into it. */
  .writeline { border-bottom: 2px solid #333 !important; color: #000 !important; }
  .writeline::placeholder { color: transparent !important; }
  details.qa .answer { display: block !important; }
  a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  a[href^="#"]::after { content: ""; }
}

/* --- Dark mode (some phones force it; keep it readable) ------------------ */
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e8edf2; --ink-soft: #b0bcc8; --bg: #161d24; --panel: #1e262f;
    --accent: #58b89f; --accent-dk: #7ccdb6; --accent-sft: #1d3830;
    --warn: #e59182; --warn-sft: #33211d; --rule: #33414f;
    --accent-brd: #2f5a4d; --warn-brd: #5a3a33; --on-accent: #10201b;
  }
  /* Solid buttons get dark text on the light-green fill.
     The outline ("ghost") button must NOT — it needs green text on a dark
     panel, or it disappears. */
  .btn:not(.btn--ghost) { color: #10201b; }
  .btn:not(.btn--ghost):hover, .btn:not(.btn--ghost):focus { color: #10201b; }
  .btn--ghost { color: var(--accent); border-color: var(--accent); }
  .btn--ghost:hover, .btn--ghost:focus { color: #10201b; background: var(--accent); }
  .rule-box { background: #1d3830; border: 1px solid #2f5a4d; }
  .rule-box p.rule-text { color: #eaf5f1; }
  ol.steps li::before, ul.check li::before { color: #10201b; }
  ul.check li::before { color: var(--accent); }
  ol.steps li::before { background: var(--accent); }
}