/* Term life insurance quote: /insurance-tools/term-life-insurance-quote.
   Maple Groove brand styling on the site tokens in /styles.css, in the
   calculators' look (the RRIF timing page): inputs on the left, the answer
   on the right, the reading below. term-life-quote.js fills the answer.

   Two roots on purpose. .tq holds the inputs and the answer; .tq-out is the
   answer card, and on a phone (<=720px) the phone-cockpit engine moves it
   into its dock at the bottom of the screen, so nothing about it may be
   scoped under .tq. */

.tqx {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  width: 100%;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 14px;
  color: var(--ink);
  position: relative;
  z-index: 5;
}
.tqx, .tqx *, .tqx *::before, .tqx *::after,
.tq-out, .tq-out *, .tq-out *::before, .tq-out *::after { box-sizing: border-box; }

.tqx .calc-eyebrow { max-width: none; padding: 0; margin: 0 0 14px; }
.tqx .page-header { margin: 6px 0 22px; }
.tqx .page-header h1 {
  font-family: 'Bebas Neue', sans-serif; font-size: clamp(34px, 4.4vw, 52px); font-weight: 400;
  letter-spacing: .04em; line-height: 1.05; color: var(--ink); margin-bottom: 8px;
}
.tqx .page-header p { font-size: 13.5px; color: var(--ink-dim); max-width: 78ch; line-height: 1.65; }
/* what the table prices today, under the lede (2026-10-13 launch: the page never promises a term it cannot price) */
.tqx .page-header .tq-scope { margin-top: 6px; font-size: 12px; color: var(--ink); border-left: 2px solid var(--blue); padding-left: 10px; }

.tq, .tq-out {
  --tq-panel: #0b0b0b;
  --tq-well: #111;
  --tq-good: var(--green);
  --tq-warn: var(--amber);
}

/* ---- the frame: inputs on the left, the answer on the right ---- */
.tq {
  display: grid;
  grid-template-columns: minmax(300px, 400px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  line-height: 1.55;
  margin: 0 0 28px;
}
.tq__noscript { grid-column: 1 / -1; font-size: 14px; line-height: 1.7; color: var(--ink-dim); max-width: 78ch; }
.tq__noscript a { color: var(--blue); }
.tq__answer { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.tq__card { background: var(--tq-panel); border: 1px solid var(--rule-2); border-radius: 14px; padding: 16px; min-width: 0; }
.tq__label {
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim); margin: 0 0 12px; font-weight: 400;
}
.tq__sub { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); margin: 0 0 8px; }
.tq [hidden], .tq-out [hidden] { display: none !important; }
.tq button, .tq input, .tq-out button { font-family: inherit; }
.tq button:focus-visible, .tq input:focus-visible, .tq a:focus-visible,
.tq-out button:focus-visible, .tq-out a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- inputs ---- */
.tq__f { margin: 0 0 16px; }
.tq__fl { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink); margin: 0 0 6px; line-height: 1.3; }
.tq__frow {
  display: flex; align-items: center; gap: 6px; padding: 0 10px;
  background: var(--tq-well); border: 1px solid var(--rule-2); border-radius: 8px;
}
.tq__frow:focus-within { border-color: var(--accent); }
.tq__cur { color: var(--ink-dim); font-size: 16px; }
.tq__num {
  flex: 1; min-width: 0; width: 100%; background: transparent; border: 0; color: var(--ink);
  font-size: 18px; font-weight: 700; padding: 7px 0; font-variant-numeric: tabular-nums;
}
.tq__num:focus, .tq .tq__num:focus-visible { outline: none; }   /* the row's border shows focus */
.tq__frow--age { flex: 0 0 76px; }
.tq__frow--age .tq__num { text-align: center; }
.tq__range { width: 100%; accent-color: var(--accent); height: 28px; margin: 6px 0 0; cursor: pointer; display: block; }
.tq__srow { display: flex; align-items: center; gap: 12px; }
.tq__srow .tq__range { flex: 1; min-width: 0; margin: 0; }
.tq__hint { font-size: 11px; line-height: 1.5; color: var(--ink-dim); margin: 5px 0 0; }
/* sex and tobacco side by side; the buttons tighten so "Non-smoker" holds one line */
.tq__pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 12px; }
.tq__pair .tq__f { margin-bottom: 0; }
.tq__pair .tq__seg { flex-wrap: nowrap; gap: 4px; }
.tq__pair .tq__seg button { padding: 8px 4px; font-size: 12px; white-space: nowrap; }
.tq__hint--pair { margin: 6px 0 16px; }
/* where a coverage amount handed over in the link came from (the needs calculator) */
.tq__hint--note { color: var(--ink); border-left: 2px solid var(--blue); padding-left: 8px; margin-top: 8px; }
.tq__more { font-size: 11.5px; line-height: 1.5; color: var(--ink-dim); margin: 2px 0 0; }
.tq__more a { color: var(--blue); }
.tq__prov { font-size: 11px; line-height: 1.5; color: var(--ink-dim); margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--rule-2); }

.tq__seg { display: flex; flex-wrap: wrap; gap: 6px; }
.tq__seg button {
  flex: 1 1 0; font-size: 12.5px; padding: 8px 10px; min-height: 40px; border-radius: 10px; line-height: 1.25;
  border: 1px solid var(--rule-2); background: transparent; color: var(--ink); cursor: pointer; text-align: center;
}
.tq__seg button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent-glow); background: rgba(214, 40, 40, .08); }
.tq__seg button small { display: block; font-size: 10.5px; letter-spacing: .02em; color: var(--ink-dim); margin-top: 2px; font-variant-numeric: tabular-nums; }
.tq__seg button[aria-pressed="true"] small { color: var(--ink); }

/* ---- the answer ---- */
.tq-out { display: flex; flex-direction: column; gap: 0; border-color: #3a1414; background: linear-gradient(180deg, #120808, var(--tq-panel) 60%); }
.tq-out__main { min-width: 0; }
.tq-out__price { margin: 0; font-family: 'Bebas Neue', sans-serif; font-weight: 400; line-height: 1; color: var(--ink); }
.tq-out__price b {
  font-weight: 400; font-size: clamp(54px, 6vw, 76px); color: var(--green); letter-spacing: .01em;
  text-shadow: 0 0 22px rgba(74, 222, 128, .35); font-variant-numeric: tabular-nums;
}
.tq-out__price span { font-size: 24px; letter-spacing: .04em; color: var(--ink-dim); margin-left: 4px; }
.tq-out__alt { font-size: 14px; color: var(--ink); margin: 8px 0 0; }
.tq-out__alt em { font-style: normal; color: var(--ink-dim); }
.tq-out__who { font-size: 12px; color: var(--ink-dim); margin: 6px 0 0; line-height: 1.5; }
/* the preferred price in one line inside the pinned price block, so it stays
   in view once the page scrolls (round 8, Dave and Priya: the preferred box
   slid under the pinned blocks after a term press) */
.tq-out__prefline { font-size: 12.5px; color: var(--ink); margin: 6px 0 0; line-height: 1.5; border-left: 2px solid var(--green); padding-left: 8px; }
/* a linked amount the page had to hold (over the online top, under the minimum) */
.tq-out__linked { font-size: 12px; color: var(--ink); margin: 6px 0 0; line-height: 1.5; border-left: 2px solid var(--blue); padding-left: 8px; }
.tq-out__nh { font-family: 'Bebas Neue', sans-serif; font-size: 32px; letter-spacing: .03em; line-height: 1.05; margin: 0 0 6px; color: var(--amber-glow); }
.tq-out__nb { font-size: 13px; line-height: 1.6; color: var(--ink); margin: 0; max-width: 62ch; }
.tq-out__try { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tq-out__try:empty { display: none; }
.tq-out__try button {
  font-size: 12px; color: var(--ink); background: transparent; border: 1px solid var(--rule-2);
  border-radius: 999px; padding: 6px 12px; min-height: 34px; cursor: pointer;
}
.tq-out__try button:hover { border-color: var(--accent); }

.tq-out__cta { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--rule-2); }
.tq-out__cta .cta { padding: 11px 18px; font-size: 12px; }
.tq-out__ctanote { margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--ink-dim); flex: 1 1 200px; }
.tq-out__ctanote a { color: var(--blue); }

.tq-out__step {
  margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--tq-good);
  background: rgba(74, 222, 128, .06); font-size: 12.5px; line-height: 1.55; color: var(--ink);
}
.tq-out__step p { margin: 0; }
.tq-out__why { color: var(--ink-dim); }
.tq-tip-short { display: none; }
.tq-out__blend { font-size: 11.5px; line-height: 1.5; color: var(--ink-dim); margin: 6px 0 0; max-width: 70ch; }
.tq-out__amt { display: block; padding: 7px 8px; }
.tq-out__step button {
  font-size: 12px; color: var(--ink); background: transparent; border: 1px solid var(--tq-good);
  border-radius: 999px; padding: 5px 12px; min-height: 32px; cursor: pointer; margin: 8px 8px 0 0; display: inline-block;
}
.tq-out__pref, .tq-out__ladder, .tq-out__about { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--rule-2); }
.tq-out__dl { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px 16px; margin: 0; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.tq-out__dl dt { color: var(--ink-dim); }
.tq-out__dl dd { margin: 0; text-align: right; font-weight: 700; }
.tq-out__dl dd + dd { font-weight: 400; color: var(--ink-dim); }

.tq-out__ladder-t { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.tq-out__ladder-t th { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); font-weight: 400; text-align: right; padding: 0 8px 6px; }
.tq-out__ladder-t th:first-child { text-align: left; }
.tq-out__ladder-t tr[data-amount] { cursor: pointer; }
.tq-out__ladder-t td { padding: 7px 8px; border-top: 1px solid var(--rule); text-align: right; white-space: nowrap; }
.tq-out__ladder-t td:first-child { padding: 0; text-align: left; }
.tq-out__ladder-t td button {
  display: block; width: 100%; background: transparent; border: 0; color: inherit; font-weight: inherit; cursor: pointer;
  text-align: left; padding: 7px 8px; font-size: 12.5px; font-variant-numeric: tabular-nums; min-height: 34px;
}
.tq-out__ladder-t tr:hover td { background: rgba(255, 255, 255, .03); }
.tq-out__ladder-t tr.is-mine td { color: var(--green); font-weight: 700; background: rgba(74, 222, 128, .07); }
.tq-out__ladder-t tr.is-na td { color: var(--ink-faint); }
.tq-out__ladder-t td.tq-out__na { text-align: center; font-size: 11px; letter-spacing: .04em; color: var(--ink-dim); }
.tq-out__ladder-t td:last-child, .tq-out__ladder-t th:last-child { color: var(--ink-dim); }
.tq-tag { font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--green); font-weight: 700; margin-left: 4px; white-space: nowrap; }
.tq-out__ladder-t tr.is-step td { border-top-color: #2e2e2e; }
.tq-out__about p { margin: 0 0 8px; font-size: 12px; line-height: 1.6; color: var(--ink-dim); max-width: 70ch; }
.tq-out__about p:last-child { margin-bottom: 0; }

/* ---- the static sample table (generated) ---- */
.tqx .tq-sample { max-width: 900px; margin: 4px auto 24px; }
.tqx .tq-sample h2 { font-family: 'Bebas Neue', sans-serif; font-size: 26px; font-weight: 400; letter-spacing: .04em; margin: 0 0 8px; }
.tqx .tq-sample p { font-size: 12.5px; line-height: 1.6; color: var(--ink-dim); margin: 0 0 10px; }
.tqx .tq-sample__wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--rule-2); border-radius: 10px; }
.tqx .tq-sample table { border-collapse: collapse; width: 100%; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.tqx .tq-sample th, .tqx .tq-sample td { padding: 7px 10px; text-align: right; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.tqx .tq-sample thead th { background: #141414; color: var(--ink-dim); font-weight: 400; font-size: 10.5px; letter-spacing: .04em; }
.tqx .tq-sample th:first-child { text-align: left; }

/* ---- the reading below the tool (the calculators' pattern) ---- */
.tqx .explain { max-width: 780px; margin: 8px auto 20px; }
.tqx .explain h2 { font-family: 'Bebas Neue', sans-serif; font-size: 26px; font-weight: 400; letter-spacing: .04em; color: var(--ink); margin: 28px 0 10px; }
.tqx .explain p, .tqx .explain li { font-family: 'Instrument Serif', Georgia, serif; font-size: 18px; line-height: 1.55; color: #cfcfcf; }
.tqx .explain p { margin-bottom: 12px; }
.tqx .explain ul { margin: 0 0 12px 20px; padding: 0; }
.tqx .explain li { margin-bottom: 8px; }
.tqx .explain a { color: var(--blue); }
/* the questions people search, answered (mirrored by the page's FAQPage JSON-LD) */
.tqx .tq-faq h3 { font-family: 'Space Mono', ui-monospace, monospace; font-size: 15px; font-weight: 700; line-height: 1.4; color: var(--ink); margin: 22px 0 6px; }
.tqx .related { list-style: none; margin-left: 0 !important; }
.tqx .related li::before { content: '\2192  '; color: var(--accent); }
.tqx .tq-assume { margin: 18px 0 0; border-top: 1px solid var(--rule-2); border-bottom: 1px solid var(--rule-2); }
.tqx .tq-assume summary { cursor: pointer; padding: 12px 0; font-family: 'Bebas Neue', sans-serif; font-size: 19px; letter-spacing: .05em; color: var(--blue); min-height: 44px; }
.tqx .tq-assume summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tqx .tq-assume ul { margin: 0 0 14px 20px; }
.tqx .tq-assume li { font-size: 16px; }
.tqx .rates-note { font-size: 11px; color: var(--ink-dim); text-align: center; margin: 10px auto 24px; line-height: 1.6; max-width: 820px; }
.tqx .legal-disclaimer { max-width: 780px; margin-left: auto; margin-right: auto; }

/* The shared sheet sets overflow-x:hidden on html and body, which turns body
   into a scroll container and stops position:sticky (the RRIF page's fix,
   rrif-timing.css). clip trims the same overflow without one. Only this
   page loads this file. */
html, body { overflow-x: clip; }

/* desktop: the price and the booking button ride at the top of the answer
   card while the page scrolls, so reaching the term buttons at the foot of
   the inputs never moves the price off screen (client-eyes round 2). Round 4:
   with the rate table full, the whole answer column (price, other amounts,
   about) outgrew the inputs, so sticking the column stopped engaging; the
   two blocks now stick inside the card instead, and the other amounts and
   the notes scroll under them. The button's offset is the price block's
   height, which term-life-quote.js keeps in --tq-main-h. */
@media (min-width: 901px) and (min-height: 600px) {
  .tq-out__main, .tq-out__cta { position: sticky; z-index: 3; }
  .tq-out__main {
    top: calc(var(--bar-h) + 12px); padding: 2px 0 16px;
    background: linear-gradient(180deg, #120808, #0f0909);
  }
  .tq-out__cta {
    top: calc(var(--bar-h) + 12px + var(--tq-main-h, 210px)); margin-top: 0; padding-bottom: 12px;
    background: #0f0909; box-shadow: 0 12px 14px -12px rgba(0, 0, 0, .95);
  }
}

/* ---- narrower screens ---- */
@media (max-width: 900px) {
  .tq { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .tqx { padding: 0 4px; font-size: 13.5px; }
  .tqx .page-header { margin: 2px 0 14px; }
  .tqx .page-header p { font-size: 12.5px; }
  .tq { gap: 12px; margin-bottom: 20px; }
  .tq__card { padding: 12px; }
  .tqx .explain p, .tqx .explain li { font-size: 17px; }
}

/* Phone cockpit (<=720px): the engine moves .tq-out into its dock. Only the
   price (the first child) and the booking button (.lgd) stay docked; the
   step hint, the preferred classes, the ladder and the notes go back to the
   scroll pane under the inputs. The dock sizes to the price, not the
   engine's default half of the screen (the price is short; the inputs need
   the room). */
html.mg-phone-lock body .mgpc-dock { flex: 0 0 auto; max-height: 48%; }
html.mg-phone-lock .mgpc-dock .tq-out { padding: 10px 14px 12px; border-radius: 14px 14px 0 0; border-bottom: 0; gap: 0; }
html.mg-phone-lock .mgpc-dock .tq-out__main { flex: 0 0 auto; min-height: 0; }
html.mg-phone-lock .mgpc-dock .tq__label { margin-bottom: 4px; }
html.mg-phone-lock .mgpc-dock .tq-out__price b { font-size: 50px; }
html.mg-phone-lock .mgpc-dock .tq-out__price span { font-size: 20px; }
html.mg-phone-lock .mgpc-dock .tq-out__alt { font-size: 12.5px; margin-top: 4px; }
html.mg-phone-lock .mgpc-dock .tq-out__who { font-size: 11px; margin-top: 2px; line-height: 1.4; }
html.mg-phone-lock .mgpc-dock .tq-out__prefline { font-size: 11px; margin-top: 3px; line-height: 1.4; }
html.mg-phone-lock .mgpc-dock .tq-out__linked { font-size: 11px; margin-top: 2px; line-height: 1.4; }
html.mg-phone-lock .mgpc-dock .tq-out__step { margin-top: 6px; padding: 6px 10px; font-size: 11.5px; line-height: 1.4; }
html.mg-phone-lock .mgpc-dock .tq-out__step { display: flex; align-items: center; gap: 8px; }
html.mg-phone-lock .mgpc-dock .tq-out__step p { flex: 1 1 auto; }
html.mg-phone-lock .mgpc-dock .tq-tip-long, html.mg-phone-lock .mgpc-dock .tq-tip-extra { display: none; }
html.mg-phone-lock .mgpc-dock .tq-out__blend { font-size: 10.5px; margin-top: 2px; }
html.mg-phone-lock .mgpc-dock .tq-tip-short { display: inline; }
html.mg-phone-lock .mgpc-dock .tq-out__step button { margin: 0; min-height: 30px; padding: 4px 10px; font-size: 11.5px; flex: 0 0 auto; white-space: nowrap; }
html.mg-phone-lock .mgpc-dock .tq-out__nh { font-size: 24px; }
html.mg-phone-lock .mgpc-dock .tq-out__nb { font-size: 12px; line-height: 1.5; }
html.mg-phone-lock .mgpc-dock .tq-out__try { margin-top: 6px; }
html.mg-phone-lock .mgpc-dock .tq-out__cta { flex: 0 0 auto; margin-top: 8px; padding-top: 8px; flex-wrap: wrap; gap: 4px; }
html.mg-phone-lock .mgpc-dock .tq-out__cta .cta { padding: 10px 14px; white-space: nowrap; flex: 1 1 auto; text-align: center; }
html.mg-phone-lock .mgpc-dock .tq-out__ctanote { flex: 1 1 100%; font-size: 10.5px; line-height: 1.35; }
html.mg-phone-lock .mgpc-dock .tq-long { display: none; }
html.mg-phone-lock .mgpc-dock .tq-out__alt em { font-size: 11px; }
html.mg-phone-lock .mgpc-dock .tq-out__price b { font-size: 46px; }
/* what the engine sent back to the scroll pane reads as its own card */
html.mg-phone-lock .tq__answer > .tq-out__pref,
html.mg-phone-lock .tq__answer > .tq-out__ladder,
html.mg-phone-lock .tq__answer > .tq-out__about {
  background: var(--tq-panel); border: 1px solid var(--rule-2); border-radius: 14px; padding: 12px; margin: 0;
}
html.mg-phone-lock .tqx .page-header h1 { font-size: 30px; }
html.mg-phone-lock .tqx .calc-eyebrow { display: none; }   /* the lock gives the room to the tool */

@media (prefers-reduced-motion: reduce) {
  .tq * { transition: none !important; }
}