/* ================================================================
   p-websites.css · page styles for websites.html (v5 "NIGHT SHIFT")
   Owned by the websites page agent. Loaded right after style.css.
   Use the shared tokens/helpers from style.css; do not redefine
   nav, footer, buttons or other global chrome here.
   Rule: never hide content in CSS. Initial motion states are set by
   JS at runtime (OT / GSAP) so no-JS and reduced motion show all.
   Reference: ../V5-SPEC.md
   ================================================================ */

/* ================================================================
   HERO  · copy left, blueprint "build sheet" right (stacks <=920)
   ================================================================ */
.ws-hero::before{ /* shop light falling on the drawing sheet */
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(620px 460px at 78% 46%,rgba(255,107,26,.10),transparent 70%),
    radial-gradient(520px 380px at 70% 60%,rgba(120,160,214,.07),transparent 70%);
}
.ws-hero-grid{display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);gap:clamp(36px,4.2vw,68px);align-items:center}
.ws-hero-copy{min-width:0}
/* "wins jobs," never splits from its comma (the headline intro would otherwise reflow mid-reveal) */
.ws-nb{white-space:nowrap}
@media(min-width:921px){
  .ws-hero h1{font-size:clamp(2.8rem,5.3vw,5.3rem)}
}
/* small laptops: give the build sheet a little more of the row */
@media(min-width:921px) and (max-width:1180px){
  .ws-hero-grid{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr)}
}
@media(max-width:920px){
  .ws-hero-grid{grid-template-columns:minmax(0,1fr);gap:clamp(40px,7vw,56px)}
  .ws-build{max-width:660px}
}
.ws-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:14px 16px}
@media(max-width:560px){.ws-ctas > *{flex:1 1 100%}}

/* ---------- the drawing sheet ---------- */
.ws-build{
  --sp:clamp(14px,2vw,26px);
  position:relative;min-width:0;padding:var(--sp);
  border:1px solid rgba(var(--steel),.16);border-radius:var(--r-lg);
  background-color:#0b1420;
  background-image:
    radial-gradient(120% 90% at 50% 0%,rgba(255,107,26,.05),transparent 60%),
    linear-gradient(rgba(var(--steel),.09) 1px,transparent 1px),
    linear-gradient(90deg,rgba(var(--steel),.09) 1px,transparent 1px),
    linear-gradient(rgba(var(--steel),.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(var(--steel),.04) 1px,transparent 1px);
  background-size:auto,96px 96px,96px 96px,16px 16px,16px 16px;
  background-position:0 0,-1px -1px,-1px -1px,-1px -1px,-1px -1px;
  box-shadow:var(--sh-3),0 0 0 1px rgba(0,0,0,.35),0 0 90px -30px rgba(255,107,26,.35),var(--sheen);
}
/* crop marks in the four corners (inside the sheet padding) */
.ws-build::before{
  --m:rgba(255,140,70,.55);--a:12px;--o:9px;
  content:"";position:absolute;inset:var(--o);pointer-events:none;
  background:
    linear-gradient(var(--m),var(--m)) 0 0/var(--a) 1.5px no-repeat,
    linear-gradient(var(--m),var(--m)) 0 0/1.5px var(--a) no-repeat,
    linear-gradient(var(--m),var(--m)) 100% 0/var(--a) 1.5px no-repeat,
    linear-gradient(var(--m),var(--m)) 100% 0/1.5px var(--a) no-repeat,
    linear-gradient(var(--m),var(--m)) 0 100%/var(--a) 1.5px no-repeat,
    linear-gradient(var(--m),var(--m)) 0 100%/1.5px var(--a) no-repeat,
    linear-gradient(var(--m),var(--m)) 100% 100%/var(--a) 1.5px no-repeat,
    linear-gradient(var(--m),var(--m)) 100% 100%/1.5px var(--a) no-repeat;
}
@media(max-width:560px){.ws-build::before{--a:8px;--o:5px}}
/* (the floating demo launcher steps aside while .hero / .frame-phone sit
   under it, bot-demo.js "tucked" state, so the sheet keeps its full width) */

/* ---------- stage: browser + (status | phone) in flow ----------
   All sizes are proportional to the stage width (cqw), so the
   composition is identical at every width. The phone overlaps the
   browser only by --lift (vertical) and by 100% - --bw (horizontal). */
.ws-stage{
  --bw:76%;--pw:28cqw;--lift:41cqw;
  container-type:inline-size;position:relative;
}
.ws-browser{width:var(--bw);position:relative;z-index:1;
  box-shadow:var(--sh-3),0 0 0 1px rgba(0,0,0,.4),0 0 60px -12px rgba(170,200,240,.16),var(--sheen)}
.ws-browser .fb-bar{height:clamp(24px,5.6cqw,34px);gap:clamp(5px,1.1cqw,7px);padding:0 clamp(9px,2cqw,14px)}
.ws-browser .fb-bar > i{width:clamp(7px,1.5cqw,10px);height:clamp(7px,1.5cqw,10px)}
.ws-browser .fb-url{height:clamp(16px,3.7cqw,22px);line-height:clamp(14px,3.4cqw,20px);font-size:clamp(.56rem,1.6cqw,.68rem)}
.ws-browser{--fb-ar:16/10.4}
.ws-stage .frame-screen{container-type:inline-size}

.ws-under{display:flex;align-items:flex-start;gap:clamp(12px,2.6cqw,22px);position:relative;z-index:2}
.ws-status{flex:1;min-width:0;padding-top:clamp(14px,2.6cqw,20px);font-family:var(--fm)}
.ws-phone{
  flex:none;width:var(--pw);margin-top:calc(var(--lift) * -1);position:relative;z-index:2;
  padding:calc(var(--pw) * .036);border-radius:calc(var(--pw) * .17);
  box-shadow:inset 0 0 0 1.5px #33475f,inset 0 0 0 4px #070b10,-18px 26px 60px rgba(0,0,0,.6),0 0 60px -18px rgba(255,107,26,.3);
}
.ws-phone .frame-screen{border-radius:calc(var(--pw) * .13)}
.ws-phone::before{top:2.6%;height:3.1%;width:30%}
/* phones: status readout becomes the sheet's header (visible on the first
   screen), browser full width, then the receipt beside the phone.
   .ws-under / .ws-status dissolve (display:contents) so their parts are
   placed on the stage grid; DOM order is unchanged. */
@media(max-width:560px){
  .ws-stage{--bw:100%;--pw:46cqw;--lift:45cqw;
    display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:8px;align-items:start}
  /* (auto, not var(--pw): cqw on the container itself would resolve against the viewport) */
  .ws-under,.ws-status{display:contents}
  .ws-st-top{grid-column:1/-1;grid-row:1}
  .ws-st-fuse{grid-column:1/-1;grid-row:2}
  .ws-st-cap{grid-column:1/-1;grid-row:3}
  .ws-st-list{grid-column:1/-1;grid-row:4}
  .ws-browser{grid-column:1/-1;grid-row:5;margin-top:16px}
  .ws-receipt{grid-column:1;grid-row:6;align-self:start}
  .ws-phone{grid-column:2;grid-row:6}
}

/* ---------- status readout (left of the phone) ---------- */
.ws-st-top{display:flex;align-items:center;gap:9px;font-size:clamp(.6rem,1.7cqw,.7rem);font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--ok2)}
.ws-st-top .led{flex:none}
.ws-st-label{flex:1;min-width:0;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ws-st-pct{flex:none;color:var(--txt);font-variant-numeric:tabular-nums;letter-spacing:1px}
.ws-st-fuse{position:relative;height:2px;margin:11px 0 9px;border-radius:2px;background:rgba(var(--steel),.16)}
.ws-st-fuse i{position:absolute;inset:0;border-radius:2px;transform-origin:0 50%;transform:scaleX(var(--p,1));
  background:linear-gradient(90deg,#1f7a45,var(--ok));box-shadow:0 0 10px rgba(74,222,128,.55)}
.ws-status.is-building .ws-st-top{color:var(--orange2)}
.ws-status.is-building .ws-st-fuse i{background:linear-gradient(90deg,rgba(229,90,13,.5),var(--orange) 70%,#ffd0aa);box-shadow:0 0 10px rgba(255,107,26,.75)}
/* honesty label: marks the mock as an example, so it must be easy to read */
.ws-st-cap{display:block;font-size:clamp(.66rem,1.6cqw,.7rem);letter-spacing:1.4px;text-transform:uppercase;color:var(--mut);line-height:1.5;text-wrap:balance}
.ws-st-list{list-style:none;display:flex;flex-wrap:wrap;gap:5px 16px;margin-top:9px;font-size:clamp(.56rem,1.5cqw,.62rem);font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--mut);line-height:1.5}
.ws-st-list li{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.ws-st-list li::before{content:"";width:9px;height:5px;margin-top:-3px;border-left:2px solid var(--ok);border-bottom:2px solid var(--ok);transform:rotate(-45deg);flex:none}
.ws-st-list li.is-pending{color:var(--dim)}
.ws-st-list li.is-pending::before{width:7px;height:7px;margin-top:0;border:1.5px solid var(--line2);transform:none;border-radius:2px}

/* receipt: the quote request lands in the owner's inbox (the hero's punchline;
   example data only, same as the mock form) */
.ws-receipt{
  position:relative;z-index:1;display:flex;flex-direction:column;gap:7px;margin-top:14px;padding:11px 13px 12px;
  border:1px solid rgba(74,222,128,.3);border-radius:var(--r-sm);
  background:linear-gradient(180deg,#132131,#0e1622);
  box-shadow:0 14px 30px -14px rgba(0,0,0,.8),0 0 0 1px rgba(0,0,0,.35),0 0 26px -10px rgba(74,222,128,.35),inset 0 1px 0 rgba(255,255,255,.04);
}
.ws-rc-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px}
.ws-rc-t{display:inline-flex;align-items:center;gap:7px;font-family:var(--fm);font-size:.69rem;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--txt);line-height:1.3;white-space:nowrap}
.ws-rc-t svg{width:15px;height:15px;flex:none;fill:none;stroke:var(--orange);stroke-width:1.9;stroke-linejoin:round;stroke-linecap:round}
.ws-rc-ok{display:inline-flex;align-items:center;gap:5px;font-family:var(--fm);font-size:.66rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--ok2);line-height:1.3;white-space:nowrap;
  padding:3px 8px 3px 6px;border-radius:var(--r-pill);background:rgba(74,222,128,.08);border:1px solid rgba(74,222,128,.3)}
.ws-rc-ok svg{width:11px;height:11px;flex:none;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.ws-rc-d{font-family:var(--fb);font-size:.8rem;color:var(--mut);line-height:1.4}
.ws-rc-zip{font-family:var(--fm);font-size:.76rem;color:var(--txt);letter-spacing:.5px}
/* phones: a narrow card beside the phone. Lines stack (label, ZIP, issue,
   emailed) and may wrap; nothing is allowed to run under the phone */
@media(max-width:560px){
  .ws-st-list{margin-top:7px;gap:4px 14px}
  .ws-receipt{margin-top:12px;padding:10px 9px 11px;gap:5px;min-width:0}
  .ws-rc-top{display:contents}
  .ws-rc-t{order:0;white-space:normal;font-size:.62rem;letter-spacing:.8px;gap:6px}
  .ws-rc-t svg{width:13px;height:13px}
  .ws-rc-d{order:1;font-size:.76rem;line-height:1.35}
  .ws-rc-d > span{display:block}
  .ws-rc-d > .ws-rc-sep{display:none}
  .ws-rc-zip{font-size:.72rem}
  .ws-rc-ok{order:2;align-self:flex-start;white-space:normal;padding:0;border:0;background:none;
    font-family:var(--fb);font-size:.72rem;font-weight:600;letter-spacing:0;text-transform:none;line-height:1.3}
}

/* ================================================================
   MOCK SITE (example business) · sized in cqw of each .frame-screen
   light theme so the screens glow like monitors in a dark shop
   ================================================================ */
.mk{
  --ink:#13202f;--inkm:#5b6a7b;--bg:#e8edf2;--card:#fff;--ln:#d2dae3;--bar:#c4cdd8;--dark:#122030;
  display:flex;flex-direction:column;min-height:100%;
  font-family:var(--fb);color:var(--ink);background:var(--bg);line-height:1.25;
  -webkit-font-smoothing:antialiased;
}
.mk svg{display:block;flex:none}
.mk-logo{display:grid;place-items:center;flex:none;background:var(--orange)}
.mk-logo svg{fill:#1a0d04}
.mk-bar{display:block;width:var(--w,100%);border-radius:99px;background:var(--bar)}
.mk-eyebrow{font-family:var(--fm);font-weight:700;text-transform:uppercase;color:#c9510b}
.mk-h{display:block;font-family:var(--fd);font-weight:800;text-transform:uppercase;line-height:.92;color:var(--ink);letter-spacing:.01em}

/* click-to-call: --on 0 = unlit glass, 1 = lit (fx flickers it on) */
.mk-call{
  --on:1;position:relative;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;
  font-weight:800;text-transform:uppercase;letter-spacing:.04em;
  color:#1a0d04;background:rgb(255 107 26 / var(--on));
  border:1px solid rgb(255 120 40 / calc(.35 + var(--on) * .65));
}
@supports (color:color-mix(in srgb,red 50%,blue)){
  .mk-call{color:color-mix(in srgb,#1a0d04 calc(var(--on) * 100%),#8d99a7)}
}
.mk-call svg{fill:currentColor}

/* desktop mock */
.mk-desk{height:100%}
.mk-top{display:flex;align-items:center;gap:2.6cqw;height:8.6cqw;padding:0 6cqw;background:var(--dark);color:#fff;flex:none}
.mk-brand{display:flex;align-items:center;gap:1.2cqw;font-size:2.15cqw;font-weight:700;white-space:nowrap}
.mk-desk .mk-logo{width:3.9cqw;height:3.9cqw;border-radius:1cqw}
.mk-desk .mk-logo svg{width:2.5cqw;height:2.5cqw}
.mk-nav{display:flex;gap:2.3cqw;margin-left:auto;font-size:1.6cqw;color:#a3b2c3;white-space:nowrap}
.mk-call-sm{gap:.7cqw;font-size:1.5cqw;padding:.85cqw 1.6cqw;border-radius:99px;box-shadow:0 0 calc(var(--on) * 2cqw) rgb(255 107 26 / calc(var(--on) * .55))}
.mk-call-sm svg{width:1.6cqw;height:1.6cqw}
.mk-hero{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:3.6cqw;align-items:center;padding:3.6cqw 6cqw 3cqw;flex:none}
.mk-copy{display:flex;flex-direction:column;align-items:flex-start;gap:1.35cqw;min-width:0}
.mk-desk .mk-eyebrow{font-size:1.4cqw;letter-spacing:.25cqw}
.mk-desk .mk-h{font-size:6.1cqw}
.mk-desk .mk-copy .mk-bar{height:1.2cqw}
.mk-btns{display:flex;gap:1.3cqw;margin-top:.9cqw}
.mk-btns .mk-call{gap:.8cqw;font-size:1.7cqw;padding:1.3cqw 2.2cqw;border-radius:.9cqw;box-shadow:0 .8cqw calc(var(--on) * 3cqw) rgb(255 107 26 / calc(var(--on) * .45))}
.mk-btns .mk-call svg{width:1.8cqw;height:1.8cqw}
.mk-ghost{display:inline-flex;align-items:center;white-space:nowrap;font-size:1.7cqw;font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:1.3cqw 2.2cqw;border-radius:.9cqw;border:1px solid #aebac7;color:#2a3a4c}
.mk-form{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--ln);min-width:0}
.mk-desk .mk-form{gap:1cqw;padding:2.1cqw;border-radius:1.5cqw;box-shadow:0 1.4cqw 4cqw rgba(20,32,46,.14)}
.mk-form-t{font-family:var(--fd);font-weight:800;text-transform:uppercase;color:var(--ink);line-height:1.05}
.mk-desk .mk-form-t{font-size:2.4cqw}
.mk-field{display:flex;flex-direction:column;min-width:0}
.mk-field small{font-family:var(--fm);font-weight:700;text-transform:uppercase;color:var(--inkm);line-height:1.2}
.mk-field b{display:block;font-weight:600;color:var(--ink);background:#f1f4f8;border:1px solid var(--ln);white-space:nowrap;overflow:hidden}
.mk-desk .mk-field{gap:.45cqw}
.mk-desk .mk-field small{font-size:1.1cqw;letter-spacing:.15cqw}
.mk-desk .mk-field b{font-size:1.7cqw;height:3.7cqw;line-height:3.5cqw;padding:0 1.1cqw;border-radius:.7cqw}
.mk-send{display:block;text-align:center;background:var(--dark);color:#fff;font-weight:800;text-transform:uppercase;letter-spacing:.05em;line-height:1.2}
.mk-desk .mk-send{font-size:1.4cqw;padding:1.15cqw;border-radius:.7cqw;margin-top:.3cqw}
.mk-sent{display:inline-flex;align-items:center;align-self:flex-start;white-space:nowrap;font-weight:700;color:#177a3c;background:#e2f6e9;border:1px solid #b5e4c6;border-radius:99px;line-height:1.2}
.mk-sent svg{fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.mk-desk .mk-sent{gap:.6cqw;font-size:1.25cqw;padding:.55cqw 1.2cqw .55cqw .9cqw}
.mk-desk .mk-sent svg{width:1.5cqw;height:1.5cqw}
.mk-rev{background:#dce3eb;flex:none}
.mk-desk .mk-rev{margin-top:auto;padding:2.1cqw 6cqw 2.6cqw}
.mk-rev-t{display:block;font-family:var(--fm);font-weight:700;text-transform:uppercase;color:var(--inkm)}
.mk-desk .mk-rev-t{font-size:1.25cqw;letter-spacing:.25cqw;margin-bottom:1.3cqw}
.mk-rev-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.8cqw}
.mk-rcard{display:flex;align-items:flex-start;background:var(--card);border:1px solid var(--ln)}
.mk-rcard > span{flex:1;min-width:0;display:flex;flex-direction:column}
.mk-av{flex:none;border-radius:50%;background:#cad3dd}
.mk-desk .mk-rcard{gap:1.1cqw;padding:1.3cqw;border-radius:1.1cqw}
.mk-desk .mk-av{width:3.2cqw;height:3.2cqw}
.mk-desk .mk-rcard > span{gap:.75cqw;padding-top:.2cqw}
.mk-desk .mk-rcard .mk-bar{height:.95cqw}

/* phone mock (cqw of the phone screen) */
.mk-phone{padding-bottom:6cqw}
.mk-ptop{display:flex;align-items:center;gap:3cqw;padding:17cqw 6cqw 4.2cqw;background:var(--dark);color:#fff}
.mk-ptop b{font-size:4.7cqw;font-weight:700;white-space:nowrap}
.mk-phone .mk-logo{width:8.6cqw;height:8.6cqw;border-radius:2.2cqw}
.mk-phone .mk-logo svg{width:5.4cqw;height:5.4cqw}
.mk-burger{margin-left:auto;display:flex;flex-direction:column;gap:1.2cqw}
.mk-burger i{display:block;width:6cqw;height:.9cqw;border-radius:1cqw;background:#a3b2c3}
.mk-phero{display:flex;flex-direction:column;align-items:flex-start;gap:2.4cqw;padding:6cqw 6cqw 0}
.mk-phone .mk-eyebrow{font-size:3.3cqw;letter-spacing:.5cqw}
.mk-phone .mk-h{font-size:12.4cqw}
.mk-phero .mk-bar{height:2.6cqw}
.mk-call-xl{display:flex;margin:5.4cqw 6cqw 0;gap:2.2cqw;font-size:5.2cqw;height:13.5cqw;border-radius:2.8cqw;
  box-shadow:0 1.6cqw calc(var(--on) * 6cqw) rgb(255 107 26 / calc(var(--on) * .5))}
.mk-call-xl svg{width:5.4cqw;height:5.4cqw}
.mk-phone .mk-form{margin:5.4cqw 6cqw 0;gap:2.8cqw;padding:5cqw;border-radius:3.4cqw;box-shadow:0 2cqw 6cqw rgba(20,32,46,.12)}
.mk-phone .mk-form-t{font-size:5.6cqw}
.mk-phone .mk-field{gap:1cqw}
.mk-phone .mk-field small{font-size:2.9cqw;letter-spacing:.3cqw}
.mk-phone .mk-field b{font-size:4.2cqw;height:9.4cqw;line-height:9cqw;padding:0 2.6cqw;border-radius:1.8cqw}
.mk-phone .mk-send{font-size:3.6cqw;padding:2.8cqw;border-radius:1.8cqw}
.mk-phone .mk-sent{gap:1.4cqw;font-size:3.2cqw;padding:1.3cqw 2.8cqw 1.3cqw 2cqw}
.mk-phone .mk-sent svg{width:3.6cqw;height:3.6cqw}
.mk-phone .mk-rev{margin-top:6cqw;padding:5cqw 6cqw;display:flex;flex-direction:column;gap:3cqw}
.mk-phone .mk-rev-t,.mk-area .mk-rev-t{font-size:3cqw;letter-spacing:.5cqw}
.mk-phone .mk-rcard{gap:3cqw;padding:3.4cqw;border-radius:2.6cqw}
.mk-phone .mk-av{width:8cqw;height:8cqw}
.mk-phone .mk-rcard > span{gap:2cqw;padding-top:.6cqw}
.mk-phone .mk-rcard .mk-bar{height:2.2cqw}
.mk-area{padding:5cqw 6cqw 0;display:flex;flex-direction:column;gap:3cqw}
.mk-map{display:block;height:40cqw;border-radius:2.6cqw;border:1px solid var(--ln);
  background:
    radial-gradient(circle at 56% 46%,var(--orange) 0 2.2cqw,rgba(255,107,26,.25) 2.3cqw 7cqw,transparent 7.2cqw),
    linear-gradient(118deg,transparent 46%,#c9d3de 46% 49%,transparent 49%),
    linear-gradient(28deg,transparent 60%,#d3dbe4 60% 62.5%,transparent 62.5%),
    repeating-linear-gradient(0deg,#dfe6ee 0 1px,transparent 1px 8cqw),
    repeating-linear-gradient(90deg,#dfe6ee 0 1px,transparent 1px 8cqw),#eef2f6}

/* typing caret + live pulse (classes added by p-websites.js, motion only) */
.ws-typing::after{content:"";display:inline-block;width:2px;height:1em;margin-left:1px;vertical-align:-.12em;background:currentColor;animation:wsCaret .7s steps(1) infinite}
@keyframes wsCaret{50%{opacity:0}}
@media (prefers-reduced-motion: no-preference){
  .ws-live .mk-call::after{
    content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
    border:2px solid rgba(255,107,26,.75);animation:wsRing 1.9s cubic-bezier(.16,1,.3,1) infinite;
  }
  .ws-live .mk-call-sm::after{animation-delay:.6s}
  @keyframes wsRing{0%{transform:scale(1);opacity:.85}100%{transform:scale(1.12,1.55);opacity:0}}
  /* hero scrolled away: stop the pulses (p-websites.js toggles .ws-off) */
  .ws-off .mk-call::after{animation:none;opacity:0}
}

/* blueprint overlay drawn by p-websites.js during the build (removed after).
   No SVG filters: the glow is a wider low-alpha stroke / halo circle drawn
   with the line, so phones repaint nothing extra per frame. */
.ws-draft{position:absolute;left:0;top:0;overflow:visible;pointer-events:none;z-index:5}
.ws-draft .g{stroke:rgba(var(--steel),.32);stroke-width:1;fill:none;stroke-dasharray:4 5}
.ws-draft .o{stroke:#9cc3ef;stroke-width:1.5;fill:none}
.ws-draft .og{stroke:rgba(130,180,240,.22);stroke-width:5;fill:none;stroke-linecap:round}
.ws-draft .r{stroke:rgba(156,195,239,.75);stroke-width:1;fill:none}
.ws-draft .t{fill:#fff}
.ws-draft .th{fill:rgba(255,140,60,.38)}

/* ================================================================
   CAUTION-TAPE BAND (feature list on a moving strip)
   ================================================================ */
.ws-band{padding:clamp(30px,4vw,46px) 0;overflow:clip}
.ws-tape{--tape-h:44px;justify-content:flex-start;gap:0}
.ws-tape-track{display:flex;flex:none;gap:88px;padding:0 44px;white-space:nowrap}
.ws-tape-track span{
  display:inline-block;background:var(--tape-b);color:var(--orange);
  font-family:var(--fd);font-weight:800;text-transform:uppercase;letter-spacing:.14em;
  font-size:.98rem;line-height:1;padding:8px 15px;white-space:nowrap;
}
@media(max-width:560px){.ws-tape{--tape-h:38px}.ws-tape-track{gap:60px;padding:0 30px}.ws-tape-track span{font-size:.86rem;padding:7px 12px}}

/* ================================================================
   01 / WHY IT MATTERS · header + example search
   ================================================================ */
.ws-why{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);gap:clamp(36px,5vw,84px);align-items:center;margin-bottom:clamp(48px,6vw,84px)}
.ws-why .sub{margin-bottom:0}
@media(max-width:1023px){.ws-why{grid-template-columns:minmax(0,1fr)}.ws-serp{max-width:640px}}

.ws-serp{
  margin:0;position:relative;min-width:0;
  background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid var(--line2);border-radius:var(--r-lg);
  padding:clamp(16px,2vw,24px);box-shadow:var(--sh-3),var(--sheen);
}
.ws-serp-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ws-serp-note{font-family:var(--fm);font-size:.68rem;letter-spacing:2px;text-transform:uppercase;color:var(--mut)}
.ws-serp-bar{display:flex;align-items:center;gap:11px;min-height:46px;margin:14px 0 16px;padding:10px 18px;border-radius:var(--r-pill);background:#0a111a;border:1px solid var(--line2)}
.ws-serp-bar svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--mut);stroke-width:2.2;stroke-linecap:round}
.ws-q{font-size:.95rem;color:var(--txt);min-width:0;line-height:1.35}
.ws-results{list-style:none;display:flex;flex-direction:column;gap:8px;position:relative}
.ws-res{
  display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;gap:12px;
  padding:12px 14px;border-radius:var(--r-sm);border:1px solid var(--line);background:rgba(255,255,255,.015);position:relative;
}
.ws-rank{font-family:var(--fm);font-size:.72rem;font-weight:700;color:var(--dim);letter-spacing:1px;width:2ch;text-align:right;font-variant-numeric:tabular-nums}
.ws-fav{width:26px;height:26px;border-radius:7px;background:rgba(var(--steel),.14);display:grid;place-items:center;flex:none}
.ws-fav svg{width:16px;height:16px;fill:#1a0d04}
.ws-res-txt{display:flex;flex-direction:column;gap:7px;min-width:0}
.ws-res-txt i{display:block;height:9px;width:var(--w,60%);border-radius:5px;background:rgba(var(--steel),.2)}
.ws-res-txt i + i{height:7px;background:rgba(var(--steel),.12)}
.ws-res-txt b{font-size:.92rem;font-weight:600;color:var(--txt);line-height:1.3}
.ws-res-txt small{font-family:var(--fm);font-size:.68rem;color:var(--mut);line-height:1.35;overflow-wrap:anywhere}
.ws-res-chip{font-family:var(--fm);font-size:.6rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;white-space:nowrap;
  border-radius:var(--r-pill);padding:5px 10px;border:1px solid var(--line2);color:var(--mut)}
.ws-res.is-you{border-color:rgba(255,107,26,.45);background:linear-gradient(90deg,rgba(255,107,26,.13),rgba(255,107,26,.025) 70%),#121c2a;z-index:2;box-shadow:0 10px 26px -12px rgba(0,0,0,.7)}
.ws-res.is-you .ws-rank{color:var(--orange2)}
.ws-res.is-you .ws-fav{background:var(--orange)}
.ws-res.is-you .ws-res-chip{color:var(--orange2);border-color:rgba(255,107,26,.45);background:rgba(255,107,26,.08)}
.ws-res.is-top{border-color:rgba(255,107,26,.85);background:linear-gradient(90deg,rgba(255,107,26,.2),rgba(255,107,26,.04) 75%),#121c2a;
  box-shadow:0 0 0 1px rgba(255,107,26,.25),0 0 30px -4px rgba(255,107,26,.38),0 14px 34px -12px rgba(255,107,26,.5),inset 3px 0 0 var(--orange)}
.ws-res.is-top .ws-rank{color:var(--orange);text-shadow:0 0 10px rgba(255,107,26,.7)}
@media(max-width:560px){
  .ws-res{grid-template-columns:auto auto minmax(0,1fr);gap:10px;padding:11px 12px}
  .ws-res-chip{grid-column:3;justify-self:start;margin-top:-2px}
  .ws-res-txt b{font-size:.86rem}
  .ws-serp-bar{padding:9px 14px}
  .ws-q{font-size:.88rem}
}

/* stats row: 2x2 on tablets / small laptops (auto-fit left "1 job" alone at ~1024), 4 across from 1100 */
@media(min-width:700px) and (max-width:1099px){.ws-why-sec .valgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){.ws-why-sec .valgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* "#1 spot" stat flashes when the example result reaches the top */
@media (prefers-reduced-motion: no-preference){
  .val.ws-hit b{animation:wsHit 1.5s cubic-bezier(.16,1,.3,1)}
  @keyframes wsHit{0%{filter:drop-shadow(0 0 0 rgba(255,107,26,0))}25%{filter:drop-shadow(0 0 18px rgba(255,107,26,.95))}100%{filter:drop-shadow(0 0 0 rgba(255,107,26,0))}}
}

/* ================================================================
   02 / PRICING · drawn ticks, odometer prices, caution-tape note
   ================================================================ */
.ws-plans .plan.featured{--wire-bg:linear-gradient(180deg,#15202f,var(--panel3))}
.ws-plans .tag{transform-origin:100% 50%}
/* SVG ticks (injected by p-websites.js when motion is on; the CSS ✓/+ glyphs stay otherwise) */
.ws-ticks li::before{content:none!important}
.ws-tick{position:absolute;left:1px;top:calc(10px + .8em - 8px);width:16px;height:16px;overflow:visible;
  fill:none;stroke:var(--orange);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 4px rgba(255,107,26,.55))}
/* odometer (built + removed by p-websites.js; the price text is restored exactly) */
.ws-odo-c{position:relative;display:inline-block;clip-path:inset(0 -.15em);
  -webkit-mask-image:linear-gradient(transparent,#000 16%,#000 84%,transparent);mask-image:linear-gradient(transparent,#000 16%,#000 84%,transparent)}
.ws-odo-f{visibility:hidden}
.ws-odo-s{position:absolute;left:0;right:0;top:0;display:flex;flex-direction:column;align-items:center}
.ws-odo-s > span{display:block;height:1em;line-height:1;
  background:linear-gradient(160deg,#fff 35%,var(--orange2));-webkit-background-clip:text;background-clip:text;color:transparent}

.ws-note{border-left:0;position:relative;overflow:hidden;padding-left:calc(26px + 14px)}
.ws-note::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:13px;transform-origin:50% 0;transform:scaleY(var(--tp,1));
  background:repeating-linear-gradient(-45deg,var(--orange) 0 7px,#0b0f14 7px 14px);
  box-shadow:inset -1px 0 0 rgba(0,0,0,.45),2px 0 12px rgba(255,107,26,.25);
}
@media(max-width:560px){.ws-note{padding:20px 20px 20px 34px}.ws-note::before{width:11px}}

/* ================================================================
   CTA · molten "Online" foundry floor: anchored to the section bottom,
   only the top half of the letters shows (glyph top = 0.181em into the
   line box, cap height 0.719em, so bottom:-0.46em leaves ~50% visible),
   which keeps it inside the bottom padding, clear of the headline,
   paragraph and button. p-websites.js pours it once on enter.
   Final state (no JS / reduced motion) = poured.
   ================================================================ */
.ws-cta .cta-ghost{
  --fill:100%;
  top:auto;bottom:-.46em;transform:translateX(-50%);transform-origin:50% 100%;
  -webkit-text-stroke:1.5px rgba(255,107,26,.3);
  /* visible window = 46%..82% of the line box (section bottom .. glyph top):
     cooling ember at the floor, molten orange body, white-hot skin on top */
  background-image:linear-gradient(0deg,
    rgba(90,30,4,.3) 0%,
    rgba(120,40,6,.3) calc(var(--fill) * .5),
    rgba(214,82,14,.36) calc(var(--fill) * .64),
    rgba(255,112,32,.44) calc(var(--fill) * .76),
    rgba(255,176,112,.6) calc(var(--fill) * .81),
    rgba(255,232,210,.78) calc(var(--fill) * .83),
    transparent calc(var(--fill) * .83 + .6%));
  -webkit-background-clip:text;background-clip:text;
}
.ws-cta h2,.ws-cta p{text-shadow:0 2px 18px rgba(10,15,22,.85)}
@media(max-width:420px){
  .ws-plans .tag{position:relative;top:auto;right:auto;align-self:flex-start;margin:-10px 0 14px;transform-origin:0 50%}
}
@media(max-width:400px){
  .ws-st-top{letter-spacing:1.1px;gap:7px;font-size:.58rem}
  .ws-st-cap,.ws-st-list{letter-spacing:1px}
}