/* ══════════════════════════════════════════════════════════
   PLAN A REALTY CORP. · Financing Solutions / Loan Products (financing.html, 2026-10-17)
   Loads AFTER style.css and only adds what this page needs: a short hero, Alex's intro, the product cards, one
   section per product with the list of products beside it, and the one-at-a-time view financing.js switches on.
   Nav, burger, drawer, buttons, the whole-language blocks and the footer live in style.css.
   No new colours: body copy --ink / --ink-2, quiet text --mute / --mute-2 (both pass AA on all three light grounds),
   small teal text only --teal-tx (5.91:1 on white), brand --teal as decoration or behind black text (7.81:1).
   ══════════════════════════════════════════════════════════ */

/* anchors land below the fixed nav; a product's section also keeps its "Back" link in view */
main [id]{scroll-margin-top:5.5rem}
.lp{scroll-margin-top:5.5rem}

/* ══ HERO ══ */
.fhero{position:relative;padding:clamp(8.5rem,14vw,10.5rem) 0 clamp(1.6rem,3.6vw,2.4rem);overflow:hidden}
.fhero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(52% 64% at 84% 30%,rgba(9,178,149,.09),transparent 66%),
    repeating-linear-gradient(0deg,rgba(0,0,0,.04) 0 1px,transparent 1px 64px),
    repeating-linear-gradient(90deg,rgba(0,0,0,.04) 0 1px,transparent 1px 64px);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 50%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0%,#000 50%,transparent 100%);
}
.fhero .wrap{position:relative;z-index:1}
.fhero__h1{font-size:clamp(2.6rem,6.6vw,4.6rem);margin:0}

/* ══ ALEX'S INTRO ══ (his heading carries a rule under it, as on his own page) */
.lp-listview{padding:0 0 clamp(4.5rem,9vw,7rem)}
.lpi{max-width:74ch}
.lpi__h{font-size:clamp(1.45rem,3vw,2.05rem);line-height:1.2;margin:clamp(1rem,2.4vw,1.6rem) 0 1.5rem;padding-bottom:1rem;border-bottom:1px solid var(--ink)}
.lpi__body{color:var(--ink-2);font-size:1.03rem;line-height:1.7}
.lpi__body strong{font-weight:700;color:var(--ink)}
.lpi__body ul{list-style:none;margin:0 0 1.2em;padding:0}
.lpi__body li{position:relative;padding-left:1.7rem;margin:0 0 .5rem}
.lpi__body li::before{content:"";position:absolute;left:.3rem;top:.32em;width:.38rem;height:.72rem;border:solid var(--teal-tx);border-width:0 2px 2px 0;transform:rotate(45deg)}

/* ══ THE CARDS ══ (like Alex's own: title, his opening sentence, an arrow; the whole card opens the product) */
.lpc-grid{list-style:none;margin:clamp(2.6rem,5vw,3.6rem) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.lpc{
  position:relative;display:flex;flex-direction:column;min-width:0;padding:1.45rem 1.45rem 1.15rem;
  background:var(--paper);border:1px solid var(--line-2);border-radius:var(--r);
  transition:background .3s,border-color .3s,transform .35s var(--ease),box-shadow .35s var(--ease);
}
.lpc__t{font-size:1.17rem;line-height:1.28;letter-spacing:-.005em;margin:0 0 .75rem;overflow-wrap:anywhere}
.lpc__t a{color:var(--ink)}
.lpc__t a::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:1}
.lpc__t a:focus-visible{outline:none}
.lpc__d{margin:0 0 1.1rem;color:var(--mute);font-size:.93rem;line-height:1.6;transition:color .3s}
.lpc__go{
  margin-top:auto;align-self:flex-end;display:grid;place-items:center;width:40px;height:40px;flex:none;
  border:1px solid var(--line-2);border-radius:50%;color:var(--teal-tx);transition:border-color .3s,color .3s;
}
.lpc__go svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--ease)}
/* kit pairing on hover: brand teal with BLACK text (7.81:1), never white on teal */
.lpc:hover,.lpc:focus-within{background:var(--teal);border-color:var(--teal);transform:translateY(-3px);box-shadow:0 18px 34px -20px rgba(9,178,149,.85)}
.lpc:hover .lpc__d,.lpc:focus-within .lpc__d{color:var(--ink)}
.lpc:hover .lpc__go,.lpc:focus-within .lpc__go{border-color:var(--ink);color:var(--ink)}
.lpc:hover .lpc__go svg,.lpc:focus-within .lpc__go svg{transform:translateX(3px)}
.lpc:focus-within{outline:2px solid var(--ink);outline-offset:3px}

/* ══ ONE PRODUCT ══ */
.lp-detail{padding:clamp(1rem,2.4vw,1.6rem) 0 clamp(4.5rem,9vw,7rem)}
.lp-detail__in{display:grid;grid-template-columns:minmax(0,1fr);gap:3rem}
.lp + .lp{margin-top:3.5rem;padding-top:3rem;border-top:1px solid var(--line)}
.lp__back{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:.35rem 0;margin:0 0 .6rem;font-size:.9rem;font-weight:600;color:var(--teal-tx)}
.lp__back svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--ease)}
.lp__back:hover{color:var(--ink)}
.lp__back:hover svg{transform:translateX(-3px)}
.lp__h{font-size:clamp(1.85rem,4.2vw,2.7rem);line-height:1.12;margin:0 0 1.5rem;max-width:26ch;overflow-wrap:anywhere}
.lp__h:focus{outline:none}
.lp__body{max-width:70ch;color:var(--ink-2);font-size:1.02rem;line-height:1.72}
.lp__body h3{font-size:1.16rem;line-height:1.3;letter-spacing:.005em;margin:2rem 0 .7rem;color:var(--ink)}
.lp__body h3:first-child{margin-top:0}
.lp__body h3 strong{font-weight:inherit}
.lp__body p{margin:0 0 1em}
.lp__body strong{font-weight:700;color:var(--ink)}
.lp__body ul,.lp__body ol{margin:0 0 1.2em;padding:0;list-style:none}
.lp__body li{position:relative;padding-left:1.35rem;margin:0 0 .45rem}
.lp__body li::before{content:"";position:absolute;left:.2rem;top:.66em;width:7px;height:7px;border-radius:50%;background:var(--teal)}
.lp-emoji{font-style:normal}
.lp__cta{margin:2.4rem 0 0;padding-top:1.6rem;border-top:1px solid var(--line);max-width:70ch}
.lp__apply svg{fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;width:.95em;height:.95em}
.lp__nt{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* the list of all products (Alex's left menu): beside the text from 1000px, under it on narrower screens */
.lpn{min-width:0}
.lpn__h{font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;font-weight:700;color:var(--teal-tx);margin:0 0 .8rem}
.lpn ul{list-style:none;margin:0;padding:0;border-left:1px solid var(--line-2)}
.lpn a{display:block;margin-left:-1px;padding:.55rem .95rem;border-left:2px solid transparent;color:var(--mute);font-size:.93rem;font-weight:500;line-height:1.35;transition:color .25s,border-color .25s}
.lpn a:hover{color:var(--ink);border-left-color:var(--line-2)}
.lpn a[aria-current]{color:var(--teal-tx);border-left-color:var(--teal-tx);font-weight:700}
.lpn a:focus-visible{outline-offset:-2px}
@media (min-width:1000px){
  .lp-detail__in{grid-template-columns:250px minmax(0,1fr);gap:clamp(2.5rem,5vw,4.5rem);align-items:start}
  .lp-items{grid-column:2;grid-row:1;min-width:0}
  .lpn{grid-column:1;grid-row:1;position:sticky;top:6.25rem;max-height:calc(100vh - 7.5rem);overflow-y:auto;padding-top:3.1rem}
}
@media (max-width:999.98px){
  .lpn{padding-top:2rem;border-top:1px solid var(--line)}
}

/* ══ ONE PRODUCT AT A TIME (financing.js; the head of financing.html adds .lp-js and data-lp before the first paint) ══
   /financing: the intro and the cards, no product. /financing#<id>: that product only, with the list and Back.
   Without JavaScript none of this applies: the cards, then every product one after the other. */
.lp-js .lp-detail{display:none}
.lp-js[data-lp] .lp-detail{display:block}
.lp-js[data-lp] .lp-listview{display:none}
.lp-js .lp{display:none}
.lp-js .lp.is-active{display:block}
.lp-js .lp + .lp{margin-top:0;padding-top:0;border-top:0}

/* ══ RESPONSIVE ══ */
@media (max-width:1000px){ .lpc-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){
  .lpc-grid{grid-template-columns:1fr;gap:.8rem}
  .lpc{padding:1.2rem 1.15rem 1rem}
  .lpc__t{font-size:1.1rem}
  .lp__cta .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .lpc:hover,.lpc:focus-within{transform:none}
}