/* ==========================================================================
   NEXVORK LAYOUTS — SHARED BLOCKS
   Components used across more than one page: the plan viewer, demo cards,
   feature rows, process steps, quotes, pricing, comparison table.
   Loaded after nxl-core.css, before the page stylesheet.
   ========================================================================== */

/* --------------------------------------------------------------------------
   A — THE PLAN VIEWER (a scaled-down echo of the real product)
   -------------------------------------------------------------------------- */
.viewer{
    position:relative;border-radius:var(--r-xl);overflow:hidden;
    border:1px solid var(--line-2);background:var(--night-2);
    box-shadow:var(--sh-pop);
}
.viewer::after{
    content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}
.viewer__bar{
    display:flex;align-items:center;gap:10px;flex-wrap:wrap;
    padding:12px 14px;border-bottom:1px solid var(--line);
    background:linear-gradient(180deg,rgba(255,255,255,.04),transparent);
}
.viewer__seg{display:flex;gap:3px;padding:3px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--line);}
.viewer__seg button{padding:6px 13px;border-radius:999px;font-size:11.5px;font-weight:700;color:var(--ink-3);transition:background .3s var(--ease),color .3s var(--ease);}
.viewer__seg button:hover{color:var(--ink);}
.viewer__seg button.is-on{background:linear-gradient(170deg,var(--accent-hi),var(--accent));color:var(--accent-ink);}
.viewer__tools{display:flex;gap:6px;margin-left:auto;}
.viewer__tools span{width:30px;height:30px;border-radius:9px;border:1px solid var(--line);display:grid;place-items:center;color:var(--ink-3);}
.viewer__tools svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.viewer__body{position:relative;padding:clamp(10px,1.4vw,18px);}

.viewer__brand{position:absolute;top:clamp(20px,2.4vw,34px);left:clamp(22px,2.6vw,38px);z-index:4;pointer-events:none;max-width:60%;}
.viewer__brand h3{font-family:var(--display);font-size:clamp(1.3rem,2.4vw,2rem);line-height:1;color:var(--ink);text-shadow:0 2px 22px rgba(0,0,0,.8);}
.viewer__brand p{margin-top:8px;font-family:var(--mono);font-size:9.4px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);}
.viewer__avail{display:inline-flex;align-items:center;gap:7px;margin-top:12px;padding:4px 10px;border-radius:999px;
    background:rgba(98,194,150,.12);border:1px solid rgba(98,194,150,.3);color:#9FE7C2;
    font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;}

.viewer__legend{position:absolute;left:50%;transform:translateX(-50%);bottom:clamp(64px,7vw,78px);z-index:4;display:flex;gap:7px;flex-wrap:wrap;justify-content:center;}
.viewer__legend .pill{background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);font-size:10.5px;padding:5px 11px;}
.viewer__dock{
    position:absolute;left:50%;transform:translateX(-50%);bottom:clamp(16px,2vw,26px);z-index:5;
    display:flex;align-items:center;gap:8px;padding:7px;border-radius:999px;
    background:var(--glass-hi);border:1px solid var(--line);box-shadow:var(--sh);
    backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);
}
.viewer__dock .dk{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;font-size:12px;font-weight:700;color:var(--ink-2);}
.viewer__dock .dk.search{background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--ink-4);min-width:132px;}
.viewer__dock .dk svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
.viewer__dock .dk.go{background:linear-gradient(170deg,var(--accent-hi),var(--accent));color:var(--accent-ink);box-shadow:0 10px 26px -12px rgba(216,178,106,.8);}
@media (max-width:760px){
    .viewer__legend{display:none;}
    .viewer__dock .dk.search{display:none;}
    .viewer__brand{position:static;max-width:none;margin-bottom:12px;}
}

/* The SVG site plan itself */
.plan{width:100%;height:auto;border-radius:12px;overflow:visible;}
.plan .plots > g{transform-box:fill-box;transform-origin:50% 50%;cursor:pointer;}
.plan .pl rect{fill:var(--sand);stroke:var(--sand-edge);stroke-width:1;transition:fill .35s var(--ease),stroke .35s var(--ease);}
.plan .pl text{font-family:var(--mono);font-size:13px;font-weight:600;fill:#4B4234;}
.plan .pl.s rect{fill:var(--sold);stroke:var(--sold-line);}
.plan .pl.s text{fill:#8D9096;}
.plan .pl.h rect{fill:#C9A765;stroke:#8C7340;}
.plan .pl.h text{fill:#2B2112;}
.plan .pl.b rect{fill:#8FAEDC;stroke:#5C7CA8;}
.plan .pl.b text{fill:#16243B;}
.plan .plots > g:hover rect{stroke:var(--accent-hi);stroke-width:2.4;}
.plan .lb{font-family:var(--mono);font-size:11px;letter-spacing:.14em;fill:var(--ink-3);}
.plan .lb-park{fill:#A7E2BD;font-size:12px;letter-spacing:.2em;}
.plan .lb-sub{font-size:9.5px;letter-spacing:.2em;fill:rgba(190,185,176,.6);}

/* plots drop in one by one on load (--i is set by nxl-motion.js) */
.plan .plots > g{opacity:0;transform:scale(.8);animation:plotin .72s var(--ease) forwards;animation-delay:calc(var(--i,0) * 15ms + 320ms);}
@keyframes plotin{to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){.plan .plots > g{opacity:1;transform:none;animation:none;}}

/* --------------------------------------------------------------------------
   B — DEMO / PROJECT CARDS
   -------------------------------------------------------------------------- */
.demo{display:flex;flex-direction:column;overflow:hidden;padding:0;}
.demo__vis{position:relative;aspect-ratio:16/10;background:radial-gradient(120% 90% at 50% 20%,#141A21,#0A0E13 70%);overflow:hidden;border-bottom:1px solid var(--line);}
.demo__vis .mini{position:absolute;inset:14%;display:grid;grid-template-columns:repeat(8,1fr);grid-auto-rows:1fr;gap:3px;}
.demo__vis .mini i{border-radius:2px;background:var(--sand);box-shadow:inset 0 0 0 1px var(--sand-edge);transition:transform .6s var(--ease),background .5s var(--ease);}
.demo__vis .mini i.s{background:var(--sold);box-shadow:inset 0 0 0 1px var(--sold-line);}
.demo__vis .mini i.h{background:#C9A765;}
.demo__vis .mini i.b{background:#8FAEDC;}
.demo__vis .mini i.p{background:var(--park);box-shadow:inset 0 0 0 1px var(--park-hi);}
.demo__vis .mini i.r{background:var(--asphalt);box-shadow:none;}
.demo:hover .demo__vis .mini i{transform:scale(.93);}
.demo__vis::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 46%,rgba(8,11,15,.85));}
.demo__badge{position:absolute;z-index:2;top:12px;left:12px;}
.demo__body{padding:clamp(18px,2vw,26px);display:flex;flex-direction:column;gap:10px;flex:1;}
.demo__t{font-family:var(--display);font-size:clamp(1.25rem,2vw,1.6rem);line-height:1.05;color:var(--ink);}
.demo__m{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-4);}
.demo__d{font-size:14px;color:var(--ink-3);line-height:1.6;flex:1;}
.demo__f{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:14px;border-top:1px solid var(--line);margin-top:4px;}

/* --------------------------------------------------------------------------
   C — FEATURE ROWS / TILES
   -------------------------------------------------------------------------- */
.feat{
    position:relative;display:flex;gap:16px;padding:20px 22px;border-radius:var(--r-lg);
    border:1px solid var(--line);background:rgba(255,255,255,.025);
    transition:border-color .45s var(--ease),background .45s var(--ease),transform .45s var(--ease);
}
.feat:hover{border-color:rgba(216,178,106,.4);background:rgba(216,178,106,.055);transform:translateY(-3px);}
.feat__i{flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:var(--accent-hi);
    background:rgba(216,178,106,.12);border:1px solid rgba(216,178,106,.24);}
.feat__i svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;}
.feat__t{font-size:15px;font-weight:800;letter-spacing:-.012em;margin-bottom:5px;}
.feat__d{font-size:13.6px;color:var(--ink-3);line-height:1.58;}
.feat__n{position:absolute;top:14px;right:16px;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:var(--ink-4);opacity:.6;}

/* wide rail card */
.railcard{width:min(76vw,430px);padding:clamp(24px,2.4vw,34px);border-radius:var(--r-xl);
    border:1px solid var(--line);background:linear-gradient(170deg,rgba(255,255,255,.06),rgba(255,255,255,.015));
    display:flex;flex-direction:column;gap:14px;min-height:min(60vh,430px);box-shadow:var(--sh);}
.railcard__n{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;color:var(--accent);}
.railcard__t{font-family:var(--display);font-size:clamp(1.5rem,2.6vw,2.2rem);line-height:1.02;color:var(--ink);}
.railcard__d{font-size:14.6px;color:var(--ink-3);line-height:1.64;}
.railcard__list{margin-top:auto;display:flex;flex-direction:column;gap:9px;padding-top:18px;border-top:1px solid var(--line);}
.railcard__list li{display:flex;gap:10px;align-items:flex-start;font-size:13.4px;color:var(--ink-2);}
.railcard__list svg{width:14px;height:14px;margin-top:4px;flex:none;stroke:var(--accent);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}

/* --------------------------------------------------------------------------
   D — PROCESS STEPS
   -------------------------------------------------------------------------- */
.steps{display:flex;flex-direction:column;gap:0;padding-left:38px;}
.step{position:relative;padding:0 0 clamp(34px,4vw,56px);}
.step:last-child{padding-bottom:0;}
.step__dot{position:absolute;left:-38px;top:2px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
    font-family:var(--mono);font-size:11.5px;font-weight:600;color:var(--accent-hi);
    background:radial-gradient(circle at 36% 28%,rgba(216,178,106,.26),rgba(9,12,16,.96));
    border:1px solid rgba(216,178,106,.7);
    box-shadow:0 0 0 6px var(--night),0 0 28px rgba(216,178,106,.3),inset 0 0 0 3px rgba(216,178,106,.08);}
.step__t{font-family:var(--display);font-size:clamp(1.35rem,2.4vw,2rem);line-height:1.04;color:var(--ink);margin-bottom:10px;}
.step__d{font-size:15px;color:var(--ink-3);line-height:1.68;max-width:56ch;}
.step__meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}

/* --------------------------------------------------------------------------
   E — QUOTES
   -------------------------------------------------------------------------- */
.quote{display:flex;flex-direction:column;gap:18px;flex:1;min-width:0;}
.quote__stars{display:flex;gap:3px;color:var(--accent);}
.quote__stars svg{width:14px;height:14px;fill:currentColor;stroke:none;}
.quote__t{font-family:var(--display);font-size:clamp(1.12rem,1.7vw,1.42rem);line-height:1.34;color:var(--ink);text-wrap:pretty;}
.quote__by{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:16px;border-top:1px solid var(--line);}
.quote__av{width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;
    font-family:var(--display);font-size:17px;color:var(--accent-hi);
    background:radial-gradient(circle at 34% 28%,rgba(216,178,106,.28),rgba(9,12,16,.7));
    border:1px solid rgba(216,178,106,.4);}
.quote__by > span:last-child{display:flex;flex-direction:column;min-width:0;}
.quote__n{display:block;font-size:14px;font-weight:800;color:var(--ink);line-height:1.2;}
.quote__r{display:block;font-family:var(--mono);font-size:9.6px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-4);margin-top:4px;}

/* --------------------------------------------------------------------------
   F — PRICING
   -------------------------------------------------------------------------- */
.price{position:relative;overflow:hidden;border-radius:var(--r-xl);border:1px solid rgba(216,178,106,.3);
    background:linear-gradient(168deg,rgba(216,178,106,.12),rgba(12,16,21,.75) 42%);box-shadow:var(--sh-pop);
    padding:clamp(28px,3.4vw,52px);}
.price__tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);}
.price__n{font-family:var(--display);font-size:clamp(3rem,6vw,5rem);line-height:1;color:var(--sand);margin-top:16px;letter-spacing:-.02em;}
.price__n small{font-family:var(--ui);font-size:clamp(.8rem,1.1vw,.95rem);font-weight:700;color:var(--ink-3);letter-spacing:0;margin-left:10px;}
.price__sub{margin-top:12px;font-size:14.5px;color:var(--ink-3);}
.price__list{margin-top:26px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px 22px;}
@media (max-width:620px){.price__list{grid-template-columns:minmax(0,1fr);}}
.price__list li{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--ink-2);}
.price__list svg{width:15px;height:15px;margin-top:4px;flex:none;stroke:var(--avail);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;}
.addon{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:15px 0;border-bottom:1px solid var(--line);}
.addon:last-child{border-bottom:0;}
.addon__t{font-size:14.6px;font-weight:700;color:var(--ink);}
.addon__d{font-size:13px;color:var(--ink-4);margin-top:3px;}
.addon__p{font-family:var(--mono);font-size:13px;color:var(--accent-hi);white-space:nowrap;}

/* --------------------------------------------------------------------------
   G — COMPARISON
   -------------------------------------------------------------------------- */
.cmp{width:100%;border-collapse:collapse;font-size:14.4px;}
.cmp th,.cmp td{padding:15px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top;}
.cmp thead th{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-4);font-weight:600;}
.cmp tbody th{font-weight:700;color:var(--ink);width:30%;}
.cmp td{color:var(--ink-3);}
.cmp td.yes{color:var(--sand);}
.cmp .mk{display:inline-flex;align-items:center;gap:8px;}
.cmp .mk svg{width:15px;height:15px;flex:none;stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.cmp .mk.y svg{stroke:var(--avail);}
.cmp .mk.n svg{stroke:#F08A7E;}
.cmp tbody tr{transition:background .3s var(--ease);}
.cmp tbody tr:hover{background:rgba(255,255,255,.025);}
.cmp-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:rgba(255,255,255,.02);}
.cmp-wrap table{min-width:640px;}

/* --------------------------------------------------------------------------
   H — REQUIREMENT CARDS / ICON LISTS
   -------------------------------------------------------------------------- */
.req{display:flex;flex-direction:column;gap:14px;}
.req__n{font-family:var(--display);font-size:clamp(2.6rem,5vw,4rem);line-height:.9;color:rgba(216,178,106,.3);}
.ticks{display:flex;flex-direction:column;gap:12px;}
.ticks li{display:flex;gap:12px;align-items:flex-start;font-size:14.6px;color:var(--ink-2);line-height:1.58;}
.ticks svg{width:16px;height:16px;margin-top:4px;flex:none;stroke:var(--accent);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}
.ticks--green svg{stroke:var(--avail);}

/* --------------------------------------------------------------------------
   I — NOTE / CALLOUT
   -------------------------------------------------------------------------- */
.note{display:flex;gap:14px;padding:18px 20px;border-radius:var(--r-lg);border:1px solid var(--line);
    background:rgba(255,255,255,.028);font-size:14px;color:var(--ink-3);line-height:1.62;}
.note svg{width:18px;height:18px;flex:none;margin-top:2px;stroke:var(--accent);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
.note--gold{border-color:rgba(216,178,106,.3);background:rgba(216,178,106,.07);color:var(--ink-2);}