/* =====================================================================
   THE ONE DOOR  ·  css/funnel.css
   Linked by door.html and by nothing else.

   Four of the five funnel pages are a mark, a line, a bar and a row of
   balls, and the front-door kit already dresses all four of those. L5 is
   the one page that carries prose: the two answers L4 asked for, and - on
   the purchase branch only - the timing block.

   The timing block's type sizes are the reason this file exists. The
   conditions fence travels with the claim "at readable weight, on the
   same screen, never a footer, never a hover, never split"
   (SEVEN-DAY-CLOSE-LANGUAGE.md section 3). Readable weight is a legal
   requirement here, not a design preference, so the fence is set at 12.5px
   against the claim's 15px - close enough that it reads as part of the
   same statement rather than as small print hung underneath it.

   Royal Mortgage LLC · NMLS #2059962
   ===================================================================== */

/* THE ONE WIDTH LAW. Everything on a front-door page resolves to the same
   column the ask bar and the coin row do. --fd-col is front-door.css's own
   token; this file only reads it. */
.doorblock{width:var(--fd-col);margin-top:clamp(20px,4vh,34px);
  display:grid;gap:14px}
@media (min-width:768px){.doorblock{grid-template-columns:1fr 1fr}}

.doorpanel{background:var(--card);border:1px solid var(--line);
  border-radius:18px;padding:18px 20px;text-align:left;
  box-shadow:0 10px 30px rgba(21,43,107,.08)}
.doorpanel h2{margin:0 0 7px;font-size:15.5px;font-weight:800;color:var(--navy);
  line-height:1.3;letter-spacing:.005em}
.doorpanel p{margin:0;font-size:13.5px;line-height:1.6;color:var(--ink)}
/* The fragment a visitor arrived on gets a quiet gold edge so they can see
   which of the two answered them. Nothing moves and nothing opens. */
.doorpanel:target{border-color:var(--gold);box-shadow:0 12px 34px rgba(202,162,95,.22)}

/* ---------------------------------------------------------------------
   THE TIMING BLOCK
   Built by js/funnel.js on the purchase branch and on no other. It is one
   card on purpose: the headline, the line, the limit sentence and the
   fence are one statement and they may never be split across two
   surfaces or two screens.
   --------------------------------------------------------------------- */
.sevenday{width:var(--fd-col);margin-top:clamp(20px,4vh,34px);
  background:var(--card-tint);border:1px solid var(--gold);
  border-radius:18px;padding:20px 22px;text-align:left}
.sd-head{margin:0;font-size:clamp(17px,2.8vw,21px);font-weight:800;
  color:var(--navy);line-height:1.25;letter-spacing:.005em}
.sd-line{margin:10px 0 0;font-size:15px;line-height:1.6;color:var(--ink)}
.sd-limit{margin:10px 0 0;font-size:14px;line-height:1.6;font-weight:700;color:var(--navy)}
.sd-fence{margin:12px 0 0;padding-top:12px;border-top:1px solid var(--line);
  font-size:12.5px;line-height:1.65;color:var(--ink)}

@media print{
  .doorpanel:target{box-shadow:none}
  .sevenday,.doorpanel{box-shadow:none}
}