/* =====================================================================
   ROYALBUILDER.ai  ·  builder.css
   The site layer. Loads AFTER css/royal-system.css and adds only what
   the builder surfaces need on top of the shared system: the two
   clocks, the lot and community cards, the neutral lender panel, the
   portal chrome, the toolkit grid and the collision check.

   Nothing here re-declares a brand token. Every color below is a
   var() off the system, so the day the system moves, this moves too.

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


/* ---------------------------------------------------------------------
   1. PAGE FURNITURE the system does not ship
   --------------------------------------------------------------------- */

/* the first thing a keyboard lands on */
.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;
  padding:12px 20px;border-radius:0 0 10px 0;font-weight:700;font-size:14px;z-index:100}
.skip:focus{left:0}

/* anything wider than the rail scrolls inside itself, never the page */
.scroller{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* the site wordmark in the brandbar */
.brandbar .sitemark{gap:11px;text-decoration:none;justify-content:flex-start;width:auto}
.brandbar .sitemark .castle{height:clamp(34px,5vw,44px)}
.brandbar .sitemark .words{font-size:clamp(17px,2.7vw,23px);letter-spacing:.02em}

/* the section head: eyebrow, headline, one line of subject */
.section-head{max-width:62ch;margin-bottom:clamp(22px,3.5vw,34px)}
.section-head h2{margin-bottom:8px}
.section-head .sec-sub{font-size:var(--fs-lede);color:var(--muted);margin:0}
.section-head.center{margin-inline:auto;text-align:center}

/* The system sizes these to --col and relies on .stage's align-items:center to
   place them. Inside the wide .wrap rail there is no such centering, so they
   have to bring their own or they sit hard against the left edge. */
.coins,.promise,.trust{margin-inline:auto}

/* A row of coins that has to hold thirteen of them. A grid would leave a
   left-aligned ragged last row; flex-wrap with center justification keeps
   every row, including the short one, on the page's center line. */
.coinflow{display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(14px,2.4vw,26px);width:100%;max-width:940px;margin-inline:auto;
  padding:0;list-style:none}
.coinflow .cell{width:92px}
.coinflow .cell .coin{width:72px;height:72px}
@media(min-width:768px){.coinflow .cell{width:108px}
  .coinflow .cell .coin{width:86px;height:86px}}
.coins .cell .label{font-weight:800;text-transform:uppercase;letter-spacing:.1em;
  color:var(--navy);font-size:clamp(10px,1.5vw,11.5px)}
.coins .cell:hover .label{color:var(--gold-deep)}
/* the reserved slots read one step back until they open */
.cell.reserved .label{color:var(--muted)}
.cell.reserved .coin{filter:saturate(.72)}
.cell.reserved:hover .coin{filter:none}

/* the hero art — the sphere floats in midair on the white page */
.heroart{display:flex;justify-content:center;align-items:center}
.heroart img{width:min(340px,74vw);height:auto;display:block}
@media(max-width:767px){.heroart{margin-top:26px}.heroart img{width:min(250px,60vw)}}

/* three numbers under the hero */
.statrow{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.stat{flex:1 1 150px;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:14px 16px}
.stat b{display:block;font-size:20px;color:var(--navy);line-height:1.15}
.stat span{display:block;font-size:var(--fs-fine);color:var(--muted);font-weight:600;
  line-height:1.45;margin-top:3px}

/* the tick list */
.ticks{list-style:none;margin:0;padding:0}
.ticks li{position:relative;padding:0 0 12px 30px;font-size:var(--fs-small);
  color:var(--muted);line-height:var(--lh-body)}
.ticks li:last-child{padding-bottom:0}
.ticks li b{color:var(--ink)}
.ticks li::before{content:"";position:absolute;left:0;top:5px;width:17px;height:17px;
  border-radius:50%;
  background:radial-gradient(circle at 32% 24%, #fdf6e3 0%, #f5e2b4 16%, #e2c283 34%,
    var(--gold) 52%, #a5814a 70%, #7d6238 86%, #6a5330 100%);
  box-shadow:inset 0 1px 2px rgba(255,255,255,.6), inset 0 -2px 4px rgba(90,66,30,.4)}

/* a two-column split that stacks under 768 */
.split{display:grid;grid-template-columns:1fr;gap:clamp(22px,4vw,44px);align-items:start}
@media(min-width:768px){.split{grid-template-columns:1fr 1fr}
  .split.art-left{grid-template-columns:.82fr 1.18fr}}


/* ---------------------------------------------------------------------
   2. THE ASK BAR on this site
   The system ships .searchbox / .askrow / .askout. These are the only
   additions: the note under the bar, and the bar sitting left-aligned
   in the hero instead of centred in a front-door column.
   --------------------------------------------------------------------- */
.ask{margin-top:clamp(20px,3vh,30px);width:100%}
.ask .searchbox{width:100%;max-width:var(--col);margin-top:0}
.ask .askout{width:100%;max-width:var(--col)}
.asknote{font-size:var(--fs-fine);color:var(--muted);margin:9px 0 0;font-weight:600}
.askout .a{white-space:pre-wrap}


/* ---------------------------------------------------------------------
   3. THE TWO CLOCKS
   Build track over money track. This is the whole wedge rendered in
   two grooves: when the money bar turns red the lock dies before the
   certificate of occupancy lands.
   --------------------------------------------------------------------- */
.clocks{margin-top:12px}
.clocks .track{display:flex;align-items:center;margin:7px 0;gap:8px}
.clocks .tlab{flex:none;width:46px;font-size:9.5px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
.clocks .rail{flex:1;height:6px;border-radius:var(--r-pill);background:var(--track);
  position:relative;overflow:hidden}
.clocks .rail i{position:absolute;left:0;top:0;bottom:0;border-radius:var(--r-pill);
  transition:width .35s ease}
.clocks .rail.build i{background:var(--navy)}
.clocks .rail.money i{background:linear-gradient(90deg,var(--gold-deep),var(--gold))}
.clocks .rail.money.dead i{background:var(--alert)}
.clocks .pct{flex:none;width:82px;text-align:right;font-size:10px;font-weight:700;
  color:var(--muted);line-height:1.2}

/* the clock legend on the marketing page */
.clockcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:20px 22px}
.clockcard h3{margin-bottom:4px}
.clockcard .who{font-size:var(--fs-fine);font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-ink);margin-bottom:12px}
.stagelist{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.stagelist li{font-size:11.5px;font-weight:700;color:var(--navy);background:var(--card-tint);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:5px 12px}


/* ---------------------------------------------------------------------
   4. THE COLLISION CHECK
   Two dates in, one sentence out. It runs entirely in the browser.
   --------------------------------------------------------------------- */
.calc{background:var(--card);border:1.5px solid var(--gold);border-radius:var(--r-lg);
  padding:clamp(20px,3vw,30px);box-shadow:var(--lift-1)}
.calc .form{max-width:none;margin-bottom:16px}
.calcout{border-top:1px dashed var(--line);padding-top:16px;margin-top:4px;
  font-size:var(--fs-small);line-height:var(--lh-body);color:var(--ink)}
.calcout .verdict{display:block;font-weight:800;font-size:16px;margin-bottom:6px}
.calcout.ok .verdict{color:var(--green)}
.calcout.warn .verdict{color:var(--alert)}
.calcout.idle .verdict{color:var(--muted)}
.calcout .gap{color:var(--muted)}


/* ---------------------------------------------------------------------
   5. THE PORTAL
   --------------------------------------------------------------------- */

/* the co-brand bar: the builder's name rides WITH the mark. Their portal. */
.cobrand{display:flex;align-items:center;justify-content:center;gap:13px;flex-wrap:wrap;
  padding:6px 0 0}
.cobrand .bname{font-weight:800;letter-spacing:.14em;color:var(--navy);font-size:13px;
  text-transform:uppercase}
.cobrand .x{color:var(--gold-deep);font-weight:800;font-size:12px}
.cobrand .pname{font-size:13px;font-weight:800;letter-spacing:.04em;color:var(--navy)}

.ptabs{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:18px 0 20px}
.ptab{background:var(--card);border:1.5px solid var(--line);border-radius:var(--r-pill);
  padding:9px 20px;font-size:13.5px;font-weight:700;color:var(--navy);cursor:pointer;
  font-family:inherit;min-height:44px;display:inline-flex;align-items:center;gap:8px;
  transition:border-color .12s,transform .12s}
.ptab:hover{border-color:var(--gold);transform:translateY(-1px)}
.ptab.on{background:var(--navy);border-color:var(--navy);color:#fff}
.ptab .pinstar{color:var(--gold-deep);font-style:normal}
.ptab.on .pinstar{color:var(--gold)}

.vhead{text-align:center;margin:4px auto 18px;max-width:60ch}
.vhead h2{margin:0 0 5px}
.vhead p{margin:0;font-size:var(--fs-small);color:var(--muted);font-weight:600}

/* community cards */
.cgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:14px}
.ccard{background:var(--card);border:1.5px solid var(--line);border-radius:var(--r-lg);
  padding:20px 22px;cursor:pointer;font-family:inherit;text-align:left;min-height:44px;
  transition:border-color .15s,transform .15s,box-shadow .15s}
.ccard:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:var(--lift-2)}
.ccard h3{margin:0 0 2px;font-size:18px}
.ccard .where{font-size:12px;color:var(--muted);font-weight:600}
.ccard .cstats{display:flex;gap:18px;margin-top:14px}
.ccard .cstats b{display:block;font-size:19px;color:var(--navy);line-height:1.1}
.ccard .cstats small{font-size:var(--fs-micro);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
.ccard .cflags{margin-top:12px;font-size:12px;font-weight:700;color:var(--alert);min-height:18px}
.ccard .cflags.ok{color:var(--green)}

/* lot cards */
.lgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(298px,1fr));gap:14px}
.lot{background:var(--card);border:1.5px solid var(--line);border-radius:var(--r);
  padding:16px 18px 15px;text-align:left;font-family:inherit;cursor:pointer;min-height:44px;
  transition:border-color .15s,transform .15s}
.lot:hover{border-color:var(--gold);transform:translateY(-2px)}
.lot.flagged{border-color:#E4B7AC}
.lot .lothead{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.lot .lotno{font-weight:800;font-size:15.5px;color:var(--navy)}
.lot .plan{font-size:12px;color:var(--muted);font-weight:600;text-align:right}
.lot .buyer{margin:7px 0 2px;font-size:13.5px;font-weight:700;color:var(--ink)}
.lot .buyer.spec{color:var(--gold-deep);letter-spacing:.06em;text-transform:uppercase;
  font-size:12px}
.lot .lender{font-size:11.5px;color:var(--muted);font-weight:600}
.lot .flag{margin-top:9px;font-size:12px;font-weight:700;color:var(--alert)}
.lot .flag.softflag{color:var(--gold-ink)}

/* the lot detail panel */
.detail{grid-column:1/-1;background:var(--card);border:1.5px solid var(--gold);
  border-radius:var(--r-lg);padding:22px 24px;animation:royal-rise .25s ease}
.detail .dhead{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;
  flex-wrap:wrap}
.detail .dhead h3{margin:0;font-size:20px}
.detail .dhead .sub{font-size:12.5px;color:var(--muted);font-weight:600;margin-top:3px}
.detail .closebtn{background:none;border:none;font-size:24px;line-height:1;color:var(--muted);
  cursor:pointer;padding:0 8px;font-family:inherit;min-height:44px}
.detail .closebtn:hover{color:var(--navy)}
.mile{display:grid;grid-template-columns:1fr;gap:22px;margin-top:16px}
@media(min-width:680px){.mile{grid-template-columns:1fr 1fr}}
.mile h4{margin:0 0 10px;font-size:var(--fs-micro);font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-ink)}
.steps{list-style:none;margin:0;padding:0}
.steps li{display:flex;align-items:center;gap:10px;padding:5px 0;font-size:13px;
  color:var(--muted);font-weight:600}
.steps li .dot{width:10px;height:10px;border-radius:50%;background:var(--line);flex:none}
.steps li.done{color:var(--ink)}
.steps li.done .dot{background:var(--navy)}
.steps li.now{color:var(--navy);font-weight:800}
.steps li.now .dot{background:var(--gold);animation:royal-pulse 1.6s ease-in-out infinite}

/* the note the assistant leaves on a lot */
.ainote{margin-top:18px;display:flex;gap:10px;align-items:flex-start}
.ainote .seal{width:24px;height:24px;margin-top:4px}
.ainote .nbub{background:var(--card-tint);border:1px solid var(--line);border-radius:14px;
  border-bottom-left-radius:4px;padding:11px 15px;font-size:13.5px;line-height:1.55;
  color:var(--ink)}

/* the neutral lender panel */
.lenders{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:14px}
.lcard{background:var(--card);border:1.5px solid var(--line);border-radius:var(--r);
  padding:18px 20px}
.lcard b{font-size:15px;color:var(--navy);display:block}
.lcard .ltag{font-size:11px;color:var(--muted);font-weight:600}
.lcard .lapi{display:inline-block;margin-top:10px;font-size:var(--fs-micro);font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:var(--green);background:var(--green-bg);
  border-radius:var(--r-pill);padding:4px 12px}
.lcard .lcount{margin-top:10px;font-size:12.5px;color:var(--muted);font-weight:600}
.lcard.invite{border-style:dashed;display:flex;flex-direction:column;align-items:flex-start;
  justify-content:center;cursor:pointer;font-family:inherit;text-align:left;
  transition:border-color .15s}
.lcard.invite:hover{border-color:var(--gold)}
.lcard.invite b{color:var(--gold-deep)}
.lchoice{margin-top:14px;background:var(--green-bg);border:1.5px solid #BFD7CA;
  border-radius:14px;padding:13px 18px;font-size:12.5px;color:#2E5544;font-weight:600;
  line-height:1.55}

/* the pin ask */
/* THE SUNNY CLEARANCE, 7/28/2026. THE SUNNY LAW puts a fixed gold bubble in the
   bottom-right corner of every page on this site - 64px wide, 26px in from both
   edges, so it occupies the corner up to 90px off the bottom. This pop used to
   sit at bottom:22px and would now open underneath it. 108px puts the pop clear
   of the bubble with an 18px gap. The phone rule below already sits at 100px to
   clear the ask dock, and 100px also clears the 56px phone bubble, so it does
   not move. If Sunny's size or inset ever changes, this number moves with it. */
.pinpop{position:fixed;right:22px;bottom:108px;z-index:80;max-width:340px;
  background:var(--card);border:1.5px solid var(--gold);border-radius:var(--r-lg);
  box-shadow:var(--lift-3);padding:16px 18px;display:none;animation:royal-rise .3s ease}
.pinpop.show{display:block}
.pinpop .prow{display:flex;gap:10px;align-items:flex-start}
.pinpop .seal{margin-top:2px}
.pinpop .ptext{font-size:13.5px;line-height:1.5;color:var(--ink)}
.pinpop .pacts{display:flex;gap:9px;margin-top:12px;justify-content:flex-end}
.pinpop .pacts button{border:none;border-radius:10px;padding:9px 16px;font-size:13px;
  font-weight:700;cursor:pointer;font-family:inherit;min-height:44px}
.pinpop .pinbtn{background:var(--navy);color:#fff}
.pinpop .pinbtn:hover{background:var(--navy-deep)}
.pinpop .later{background:none;color:var(--muted)}
.pinpop .later:hover{color:var(--navy)}
/* On a phone the pop goes full width, which puts it square on top of the ask
   dock stuck to the same edge. 100px clears the dock (its 48px send button
   sets a 75px floor, and it sits 14px off the bottom) and leaves a gap. */
@media(max-width:560px){.pinpop{left:16px;right:16px;max-width:none;bottom:100px}}

/* the portal's own ask dock, stuck to the bottom of the room */
.askdock{position:sticky;bottom:14px;margin-top:26px;z-index:60;
  background:var(--card);border:1.5px solid var(--line);border-radius:var(--r-lg);
  padding:12px 14px;box-shadow:var(--lift-2)}
.askdock .askout{width:100%;margin-top:12px;box-shadow:none}
/* The branded placeholder on the compact bar. The system ships .phold for the
   hero .searchbox only; the rules that hide the real placeholder and swap the
   overlay out on the first keystroke are scoped to that class, so the compact
   bar needs its own pair. Same law, same overlay, different dress. */
.askdock .askrow{position:relative}
.askdock .askrow input::placeholder{color:transparent}
.askdock .phold{left:18px;right:70px;font-size:14.5px;font-weight:600}
.askdock .askrow input:not(:placeholder-shown) ~ .phold{opacity:0}

.privline{display:flex;gap:9px;align-items:flex-start;justify-content:center;
  max-width:70ch;margin:26px auto 0;font-size:var(--fs-fine);color:var(--muted);
  line-height:var(--lh-body);text-align:left}
.privline svg{width:15px;height:15px;flex:none;fill:var(--gold-deep);margin-top:2px}


/* ---------------------------------------------------------------------
   6. THE TOOLKIT
   --------------------------------------------------------------------- */
.toolgrid{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:768px){.toolgrid{grid-template-columns:1fr 1fr}}
@media(min-width:1280px){.toolgrid{grid-template-columns:repeat(3,1fr)}}
.tool{display:flex;gap:16px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:20px 22px;scroll-margin-top:24px}
.tool .coin{flex:none}
.tool .num{font-size:var(--fs-micro);font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-ink);margin:0 0 3px}
.tool h3{margin:0 0 4px;font-size:16.5px}
.tool .was{font-size:11.5px;color:var(--muted);font-weight:600;margin:0 0 8px}
.tool p{margin:0 0 12px;font-size:var(--fs-small);color:var(--muted);line-height:var(--lh-body)}
/* The gold rule rides on the text instead of the border box, so the link can
   carry a thumb-sized target — 40px tall, thirteen times down a phone — with
   the rule still sitting tight under the words. The negative margin gives the
   padding back to the layout, so nothing above or below it moves. */
.tool .open{display:inline-block;font-size:13px;font-weight:800;color:var(--navy);
  text-decoration:underline;text-decoration-color:var(--gold);
  text-decoration-thickness:1.5px;text-underline-offset:4px;
  padding:11px 8px;margin:-11px -8px}
.tool .open:hover{color:var(--gold-deep)}
@media(max-width:420px){.tool{flex-direction:column;gap:12px}}

/* the transfer tier a tool landed in */
.tier{display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;padding:3px 10px;border-radius:var(--r-pill);margin-bottom:8px}
.tier.t1{background:var(--green-bg);color:var(--green)}
.tier.t2{background:rgba(203,162,96,.18);color:var(--gold-deep)}
.tier.t3{background:rgba(37,48,105,.09);color:var(--navy)}

.tierkey{display:grid;grid-template-columns:1fr;gap:14px;margin-top:20px}
@media(min-width:768px){.tierkey{grid-template-columns:repeat(3,1fr)}}
.tierkey .card b{display:block;color:var(--navy);font-size:15px;margin-bottom:5px}


/* ---------------------------------------------------------------------
   7. THE STANDALONE PAGES (offline, 404)
   --------------------------------------------------------------------- */
.plainstage{flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:44px var(--gutter)}
.plainstage h1{margin:28px 0 14px}
.plainstage p{color:var(--muted);max-width:48ch;font-size:16px;margin:0 0 10px}
.plainstage p em{font-style:normal;color:var(--gold-deep);font-weight:700}
.plainstage .btnrow{justify-content:center}


/* ---------------------------------------------------------------------
   8. PRINT
   The system already handles the coin, the panel and the buttons. These
   are the parts it does not know about.
   --------------------------------------------------------------------- */
@media print{
  .skip,.ptabs,.askdock,.pinpop,.calc .form,.cell.reserved{display:none !important}
  .lot,.ccard,.lcard,.tool,.clockcard{border:.75pt solid #999 !important;
    box-shadow:none !important;break-inside:avoid}
  .clocks .rail{border:.5pt solid #999}
  .clocks .rail i{background:#555 !important}
  .clocks .rail.money.dead i{background:#000 !important}
}

/* ============================================================
   THE COMING SOON MARKER  ·  7/31/2026 (V4)
   Bryan's standing grant (7/29): "full authority right now to put
   'Coming Soon' on any bubble that doesn't lead anywhere." One text
   node and two rules - no script, no animation, no layout shift, no
   network request, so THE SPEED LAW holds.
   A Coming Soon coin does NOT lift on hover: the lift is a promise
   that a tap goes somewhere, and this one honestly goes nowhere yet.
   ============================================================ */
.cell .soon{display:block;margin-top:.4rem;
  font:600 .62rem/1 Montserrat,'Segoe UI',system-ui,sans-serif;
  letter-spacing:.12em;text-transform:uppercase;color:#8A8FA6;text-align:center}
.cell[aria-disabled="true"]{cursor:default}
.cell[aria-disabled="true"]:hover .coin{transform:none}