/* ══════════════════════════════════════════════════════════
   PLAN A REALTY CORP. · "How to rent with Plan A" (rent.html)
   Loads AFTER style.css and only adds what this page needs.
   Nav, burger and drawer rules live in style.css only (shared by every page).
   Same tokens: ivory paper, navy ink, brass accents.
   ══════════════════════════════════════════════════════════ */


/* portal-only copy: shown only once main.js has confirmed the portal is deployed
   (inline script in rent.html sets html[data-portal="on"]); the neutral fallback shows otherwise */
html:not([data-portal="on"]) [data-portal-only],
html[data-portal="on"] [data-portal-fallback]{display:none!important}
html:not([data-portal="on"]) .portal{grid-template-columns:minmax(0,1fr)}
html:not([data-portal="on"]) .portal__copy{max-width:46rem}

/* anchors land below the fixed nav */
#steps,#package,#portal,#rights,#tips,#faq,#apply{scroll-margin-top:74px}

/* ══ HERO ══ */
.rhero{position:relative;padding:clamp(8.5rem,14vw,10.5rem) 0 clamp(3.5rem,7vw,5.5rem);overflow:hidden}
.rhero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(52% 64% at 84% 34%,rgba(168,118,62,.09),transparent 66%),
    repeating-linear-gradient(0deg,rgba(16,24,44,.04) 0 1px,transparent 1px 64px),
    repeating-linear-gradient(90deg,rgba(16,24,44,.04) 0 1px,transparent 1px 64px);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%);
}
.rhero__in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:clamp(2.5rem,6vw,5rem);align-items:center}
.rhero__col{min-width:0}
.rhero__h1{font-size:clamp(2.7rem,7.2vw,5.4rem);margin:0 0 1.5rem}
.rhero__h1 .ital{font-style:italic;color:var(--brass);font-weight:300}
.rhero__sub{font-size:clamp(1rem,1.6vw,1.13rem);color:var(--mute);max-width:58ch;margin-bottom:2.2rem}
.rhero .hero__cta{margin-bottom:0}

/* framed floor-plan card (echoes the home hero's sold-house card) */
.rcard{position:relative;isolation:isolate;margin:0}
.rcard::after{content:"";position:absolute;inset:18px -18px -18px 18px;z-index:-1;border:1px solid var(--brass);border-radius:var(--r)}
.rcard__in{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:0 24px 60px -30px rgba(16,24,44,.45)}
.rcard__plan{display:block;aspect-ratio:596/566;background:var(--paper-2);border-bottom:1px solid var(--line)}
.rcard__plan svg{display:block;width:100%;height:100%}
.rcard__b{padding:1.2rem 1.4rem 1.3rem}
.rcard__tag{
  display:inline-block;font-size:.58rem;letter-spacing:.19em;text-transform:uppercase;font-weight:700;
  color:var(--paper);background:var(--ink);border-radius:3px;padding:.26rem .55rem;margin:0 0 .5rem;
}
.glance{list-style:none;margin:0;padding:0;counter-reset:g}
.glance li{counter-increment:g;display:flex;gap:.8rem;align-items:baseline;padding:.55rem 0;border-top:1px solid var(--line);font-size:.93rem;color:var(--ink);line-height:1.45}
.glance li:first-child{border-top:0}
.glance li::before{content:counter(g,decimal-leading-zero);flex:none;min-width:1.6rem;font-family:var(--serif);font-size:.78rem;letter-spacing:.14em;color:var(--brass-tx);font-weight:600}
.rcard__foot{margin:.7rem 0 0;padding-top:.8rem;border-top:1px solid var(--line);font-size:.8rem;color:var(--mute-2)}

/* floor plan drawing */
.fp__d path,.fp__d rect,.fp__d circle,.fp__d ellipse{stroke-dasharray:2400;stroke-dashoffset:2400;animation:fpDraw 2.8s var(--ease) .25s forwards}
.fp__int path{animation-delay:.75s}
.fp__furn path,.fp__furn rect,.fp__furn circle,.fp__furn ellipse{animation-delay:1.15s}
.fp__win{opacity:0;animation:fpIn .8s var(--ease) 1.2s forwards}
.fp__hero{opacity:0;animation:fpIn 1s var(--ease) 1.7s forwards}
.fp__pin{animation:pulse 2.6s ease-in-out 2.8s infinite}
@keyframes fpDraw{to{stroke-dashoffset:0}}
@keyframes fpIn{to{opacity:1}}

/* ══ ON THIS PAGE ══ */
.toc{background:var(--paper-2);border-block:1px solid var(--line)}
.toc__in{display:flex;align-items:center;gap:.4rem 1.6rem;overflow-x:auto;padding:.95rem 2px;white-space:nowrap;scrollbar-width:none}
.toc__in::-webkit-scrollbar{display:none}
.toc__h{flex:none;font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;color:var(--mute-2);font-weight:700}
.toc a{flex:none;font-size:.86rem;color:var(--mute);font-weight:500;padding:.3rem 0;border-bottom:1.5px solid transparent;transition:color .3s,border-color .3s}
.toc a:hover{color:var(--ink);border-bottom-color:var(--brass)}

/* ══ STEPS (timeline) ══ */
.steps{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2.5rem,6vw,5.5rem);align-items:start}
.steps__head{position:sticky;top:7rem;margin-bottom:0}
.tl{list-style:none;margin:0;padding:0;position:relative}
.tl::before{content:"";position:absolute;left:calc(1.35rem - .5px);top:.6rem;bottom:.6rem;width:1px;background:linear-gradient(180deg,var(--brass),var(--line-2) 80%)}
.tl__i{position:relative;display:grid;grid-template-columns:2.7rem minmax(0,1fr);gap:1.3rem;padding:0 0 2.5rem}
.tl__i:last-child{padding-bottom:0}
.tl__n{
  position:relative;z-index:1;width:2.7rem;height:2.7rem;border-radius:50%;display:grid;place-items:center;
  background:var(--paper);border:1px solid var(--brass);
  font-family:var(--serif);font-size:.82rem;font-weight:600;letter-spacing:.06em;color:var(--brass-tx);
}
.tl__b h3{font-size:1.3rem;margin:.5rem 0 .5rem}
.tl__b p{color:var(--mute);font-size:.95rem;margin:0;max-width:54ch}

/* ══ BROKER PACKAGE CHECKLIST ══ */
.pkg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem;align-items:start}
.pkg__stack{display:grid;gap:1.1rem;min-width:0}
.pkg__g{margin:0;min-width:0;border:1px solid var(--line);border-radius:var(--r);background:var(--paper);padding:1.5rem 1.4rem .9rem}
.pkg__g legend{float:left;width:100%;padding:0;margin:0 0 .6rem;font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--brass-tx);font-weight:700}
.chk{clear:both;position:relative;display:flex;gap:.85rem;align-items:flex-start;padding:.8rem 0;min-height:44px;border-top:1px solid var(--line);cursor:pointer}
.pkg__g legend+.chk{border-top:0}
.chk input{position:absolute;left:0;top:.85rem;width:22px;height:22px;margin:0;opacity:0;cursor:pointer}
.chk__box{
  flex:none;width:22px;height:22px;margin-top:.1rem;border:1.5px solid var(--line-2);border-radius:6px;
  background:var(--paper);display:grid;place-items:center;transition:background .25s,border-color .25s;
}
.chk__box::after{
  content:"";width:10px;height:5.5px;border-left:2px solid var(--paper);border-bottom:2px solid var(--paper);
  transform:translate(0,-1px) rotate(-45deg) scale(.4);opacity:0;transition:transform .25s var(--ease),opacity .2s;
}
.chk:hover .chk__box{border-color:var(--brass)}
.chk input:checked+.chk__box{background:var(--ink);border-color:var(--ink)}
.chk input:checked+.chk__box::after{opacity:1;transform:translate(0,-1px) rotate(-45deg) scale(1)}
.chk input:focus-visible+.chk__box{outline:2px solid var(--brass);outline-offset:3px}
.chk__t{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.chk__t strong{font-weight:600;font-size:.95rem;color:var(--ink);line-height:1.38}
.chk__t small{font-size:.84rem;color:var(--mute);line-height:1.5}
.chk input:checked~.chk__t strong{text-decoration:line-through;text-decoration-color:var(--brass);text-decoration-thickness:1.5px}
.pkg__bar{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1rem;margin-top:1.7rem}
.pkg__count{margin:0 auto 0 0;font-family:var(--serif);font-size:1.2rem;color:var(--ink);min-height:1.6em}
.pkg__note{font-size:.8rem;color:var(--mute-2);margin:.9rem 0 0;max-width:72ch}

/* ══ PORTAL ══ */
.portal{display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:clamp(2.5rem,6vw,5.5rem);align-items:center}
.portal__copy h2{font-size:clamp(2.1rem,5vw,3.4rem);margin:0 0 1.3rem}
.rticks{list-style:none;margin:1.8rem 0 2.1rem;padding:0;display:grid;gap:.8rem}
.rticks li{position:relative;padding-left:1.9rem;color:var(--mute);font-size:.95rem}
.rticks li::before{content:"";position:absolute;left:0;top:.52em;width:11px;height:6px;border-left:1.5px solid var(--brass);border-bottom:1.5px solid var(--brass);transform:rotate(-45deg)}
.portal__cta{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem}
.lnk{color:var(--ink);font-weight:500;font-size:.92rem;text-decoration:underline;text-decoration-color:var(--brass);text-decoration-thickness:1px;text-underline-offset:4px;transition:color .3s}
.lnk:hover{color:var(--brass-tx)}
.bnote{margin-top:2.5rem;padding:1.3rem 1.4rem;background:var(--paper-2);border:1px solid var(--line);border-left:3px solid var(--brass);border-radius:0 var(--r) var(--r) 0}
.bnote h3{font-size:1.12rem;margin-bottom:.35rem}
.bnote p{margin:0;color:var(--mute);font-size:.92rem}
/* inline phone links inside the broker note and FAQ answers */
.bnote p a,.qa__a p a{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--brass);text-underline-offset:4px;white-space:nowrap}
.bnote p a:hover,.qa__a p a:hover{color:var(--brass-tx)}

/* portal illustration (decorative, text is still bilingual) */
.pmock{position:relative;isolation:isolate;margin:0}
.pmock::after{content:"";position:absolute;inset:18px -18px -18px 18px;z-index:-1;border:1px solid var(--brass);border-radius:18px}
.pmock__win{background:var(--paper);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 28px 70px -34px rgba(16,24,44,.5)}
.pmock__top{display:flex;align-items:center;gap:.4rem;padding:.75rem 1rem;background:var(--ink)}
.pmock__dot{width:8px;height:8px;border-radius:50%;background:rgba(247,244,238,.28)}
.pmock__url{margin-left:.6rem;font-size:.72rem;letter-spacing:.08em;color:rgba(247,244,238,.78)}
.pmock__body{padding:1.35rem 1.4rem 1.5rem}
.pmock__ex{display:inline-block;margin:0 0 .75rem;padding:.2rem .5rem;border:1px solid rgba(168,118,62,.5);border-radius:3px;font-size:.58rem;letter-spacing:.19em;text-transform:uppercase;font-weight:700;color:var(--brass-tx)}
.pmock__h{margin:0 0 .9rem;font-family:var(--serif);font-size:1.35rem;line-height:1.2;color:var(--ink)}
.pmock__rows{list-style:none;margin:0;padding:0}
.pmock__rows li{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.4rem 1rem;padding:.72rem 0;border-top:1px solid var(--line);font-size:.9rem;color:var(--ink)}
.pmock__st{white-space:nowrap;font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-radius:100px;padding:.24rem .62rem}
.pmock__st--ok{background:rgba(16,24,44,.07);color:var(--ink)}
.pmock__st--up{border:1px solid rgba(168,118,62,.55);color:var(--brass-tx)}
.pmock__st--need{border:1px dashed var(--line-2);color:var(--mute-2)}
.pmock__prog{flex-basis:100%;height:4px;border-radius:4px;background:var(--paper-3);overflow:hidden}
.pmock__prog span{display:block;height:100%;width:64%;background:var(--brass);border-radius:4px;transform-origin:left;animation:pmFill 2.4s var(--ease) .6s both}
@keyframes pmFill{from{transform:scaleX(.35)}to{transform:scaleX(1)}}
.pmock__send{margin:1.2rem 0 0;padding:.8rem;text-align:center;border-radius:100px;background:var(--ink);color:var(--paper);font-weight:600;font-size:.88rem}

/* ══ RIGHTS ══ */
.rights{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem}
.right{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:1.8rem 1.7rem;transition:border-color .45s var(--ease)}
.right:hover{border-color:var(--brass)}
.right__law{margin:0 0 .9rem;font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass-tx);font-weight:700}
.right h3{font-size:1.22rem;margin-bottom:.6rem}
.right p:not(.right__law){color:var(--mute);font-size:.93rem;margin:0}

.fare{
  margin-top:1.1rem;padding:clamp(1.6rem,3.5vw,2.3rem);border-radius:var(--r);background:var(--ink);color:var(--paper);
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:1rem 3rem;align-items:start;
}
.fare .right__law{color:var(--brass-hi)}
.fare h3{color:var(--paper);font-size:clamp(1.4rem,2.6vw,1.85rem)}
.fare>p{margin:0;color:rgba(247,244,238,.8);font-size:.95rem}

.disc{margin-top:3.2rem;padding-top:2.8rem;border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:2rem 3rem}
.disc__head h3{font-size:clamp(1.5rem,3vw,2rem);margin-bottom:.8rem}
.disc__head p{color:var(--mute);font-size:.95rem;max-width:44ch}
.disc__list{list-style:none;margin:0;padding:0}
.disc__list li{padding:1.3rem 0;border-top:1px solid var(--line)}
.disc__list li:first-child{border-top:0;padding-top:0}
.disc__list h4{margin:0 0 .35rem;font-family:var(--sans);font-weight:600;font-size:1rem;line-height:1.38;color:var(--ink)}
.disc__list p{color:var(--mute);font-size:.91rem;margin:0 0 .55rem}
.disc__list p:last-child{margin-bottom:0}
.disc__links{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem}
.disc__links .lnk{font-size:.86rem}

.legal{margin-top:2.8rem;padding:1.4rem 1.5rem;border:1px dashed var(--line-2);border-radius:var(--r);background:var(--paper)}
.legal p{margin:0 0 .8rem;font-size:.86rem;color:var(--mute)}
.legal p b{color:var(--ink)}
.legal__links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem 1.6rem}
.legal__links .lnk{font-size:.84rem}

/* ══ TIPS ══ */
.tips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem}
.tip{padding:1.8rem 1.7rem;border:1px solid var(--line);border-radius:var(--r);background:var(--paper);transition:border-color .45s var(--ease)}
.tip:hover{border-color:var(--brass)}
.tip__ic{width:44px;height:44px;margin-bottom:1.2rem;display:grid;place-items:center;border:1px solid var(--line);border-radius:12px;background:var(--paper-2)}
.tip__ic svg{width:20px;height:20px;fill:none;stroke:var(--brass-tx);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tip h3{font-size:1.2rem;margin-bottom:.5rem}
.tip p{color:var(--mute);font-size:.93rem;margin:0}

/* ══ FAQ ══ */
.faq{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(2.5rem,6vw,5rem);align-items:start}
.faq__head{position:sticky;top:7rem;margin-bottom:0}
.faq__head .lede a{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--brass);text-underline-offset:4px;white-space:nowrap}
.faq__head .lede a:hover{color:var(--brass-tx)}
.qa{border-top:1px solid var(--line-2)}
.qa:last-child{border-bottom:1px solid var(--line-2)}
.qa summary{
  list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1.2rem;
  padding:1.25rem 0;font-family:var(--serif);font-size:clamp(1.08rem,1.8vw,1.24rem);line-height:1.3;color:var(--ink);
  transition:color .3s;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{
  content:"";flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--line-2);
  background:
    linear-gradient(var(--brass-tx),var(--brass-tx)) center/11px 1.5px no-repeat,
    linear-gradient(var(--brass-tx),var(--brass-tx)) center/1.5px 11px no-repeat;
  transition:background-size .3s var(--ease),border-color .3s,transform .3s var(--ease);
}
.qa summary:hover{color:var(--brass-tx)}
.qa summary:hover::after{border-color:var(--brass)}
.qa[open] summary::after{background-size:11px 1.5px,1.5px 0;transform:rotate(180deg)}
.qa__a{padding:0 3rem 1.45rem 0}
.qa__a p{margin:0;color:var(--mute);font-size:.95rem;max-width:62ch}

/* ══ CLOSING CTA (dark band, reuses .sec--band from style.css) ══ */
.rcta__in{position:relative;max-width:780px;margin-inline:auto;text-align:center}
.rcta .eyebrow{justify-content:center}
.rcta .eyebrow::after{content:"";width:26px;height:1px;background:var(--brass-hi);flex:none}
.rcta h2{font-size:clamp(2.1rem,5vw,3.4rem);margin:0 0 1.3rem}
.rcta .lede{margin-inline:auto}
.rcta__btns{display:flex;flex-wrap:wrap;justify-content:center;gap:.85rem;margin:2.1rem 0 1.5rem}
.rcta__alt{margin:0;font-size:.88rem;color:rgba(247,244,238,.66)}
.rcta__alt a{color:var(--paper);text-decoration:underline;text-decoration-color:rgba(217,180,120,.6);text-underline-offset:4px}
.rcta__alt a:hover{color:var(--brass-hi)}
.rcta__alt i{font-style:normal;color:rgba(247,244,238,.4);margin:0 .55rem}
.rcta+.foot,main+.foot{border-top:1px solid var(--line-d)}

/* ══ RESPONSIVE ══ */
@media (max-width:1000px){
  .rhero__in,.steps,.portal,.faq,.disc,.fare{grid-template-columns:1fr}
  .rcard,.pmock{max-width:460px}
  .steps__head,.faq__head{position:static}
  .pkg,.rights,.tips{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .pkg,.rights,.tips{grid-template-columns:1fr}
}
@media (max-width:760px){
  .rhero{padding-top:7.5rem}
  .rcard::after,.pmock::after{inset:10px -10px -10px 10px}
  .qa__a{padding-right:0}
  .rcta__btns .btn{flex:1 1 100%}
  .tl__b h3{font-size:1.18rem}
}

/* ══ MOTION ══ */
@media (prefers-reduced-motion:reduce){
  .fp__d path,.fp__d rect,.fp__d circle,.fp__d ellipse{stroke-dashoffset:0;animation:none}
  .fp__win,.fp__hero{opacity:1;animation:none}
  .fp__pin,.pmock__prog span{animation:none}
}

/* ══ PRINT: "Print this checklist" prints just the package section ══ */
@media print{
  .skip,.nav,.drawer,.toc,.rcta,.foot,.pkg__bar .btn{display:none!important}
  .reveal{opacity:1!important;transform:none!important}
  body{background:#fff}
  .sec{padding:1.2rem 0}
  .chk__box,.chk input:checked+.chk__box{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  body.print-pkg main>:not(#package){display:none!important}
  body.print-pkg #package{background:#fff;border:0}
  .pkg__g{break-inside:avoid}
}