/* Stage 3 (17 Oct 2026): the ConfigKit and Craftor section on /pricewise-pro/, in the place of the
   StoreWise section and dark like it. Loaded by inc/stage3/pricewise-ladder.php on that page only.
   No lines anywhere (Hamza): things are separated by space and a change of background; the switches
   are filled pills, the picture frames have no border, the phone bezel is padding, not a border. */

.pwlad{padding:96px 0 104px;background:linear-gradient(180deg,#0f1826 0%,#1a2332 100%);color:#fff;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;scroll-margin-top:96px}
.pwlad *{box-sizing:border-box}
.pwlad-in{max-width:1180px;margin:0 auto;padding:0 20px}

/* The head. On a computer the heading breaks after "PriceWise," (one span a line). */
.pwlad-head{max-width:760px;margin:0 0 46px}
.pwlad-kicker{font-size:11.5px;font-weight:700;line-height:1.3;letter-spacing:.12em;text-transform:uppercase;
  color:#9fd0ff;margin:0 0 14px}
.pwlad h2{font-size:clamp(28px,3.4vw,42px);font-weight:700;line-height:1.12;letter-spacing:-.025em;
  margin:0 0 18px;color:#fff;text-wrap:balance}
.pwlad h2 span{display:block}
.pwlad-lede{max-width:600px;font-size:17.5px;font-weight:400;line-height:1.65;color:rgba(255,255,255,.74);margin:0;text-wrap:pretty}

/* One step: the words and, beside them, the facts and the price; the pictures across the whole step
   under them. ConfigKit shows a computer and a phone side by side; Craftor, the top step, is a shade
   lighter and has a switch of three screens. */
.pwlad-step{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-areas:"words more" "shot shot";column-gap:56px;row-gap:40px;
  background:rgba(255,255,255,.04);border-radius:28px;padding:50px}
.pwlad-step + .pwlad-step{margin-top:26px}
.pwlad-step.wide{background:rgba(255,255,255,.07)}
.pwlad-words{grid-area:words;align-self:start;min-width:0}
.pwlad-shot{grid-area:shot;min-width:0}
.pwlad-more{grid-area:more;align-self:end;min-width:0}

/* The step label: the same staircase and words as the "Which one do I need?" box */
.pwlad-rung{display:flex;align-items:center;gap:12px;margin:0 0 16px}
.pwlad-rung .dtswo-stairs{display:block;flex:0 0 auto;width:22px;height:22px}
.pwlad-rung .dtswo-stairs .on{fill:#4da3ff}
.pwlad-rung .dtswo-stairs .off{fill:rgba(255,255,255,.2)}
.pwlad-rung-t{display:flex;flex-direction:column;gap:3px}
.pwlad-rung-t b{font-size:12px;font-weight:800;line-height:1.1;letter-spacing:.08em;text-transform:uppercase;color:#9fd0ff}
.pwlad-rung-t span{font-size:13.5px;font-weight:600;line-height:1.2;color:rgba(255,255,255,.7)}

.pwlad h3{font-size:clamp(28px,2.9vw,38px);font-weight:800;line-height:1.08;letter-spacing:-.025em;color:#fff;margin:0 0 8px}
.pwlad-what{margin:0 0 18px;font-size:16px;font-weight:600;line-height:1.4}
.pwlad-what a{color:#9fd0ff;text-decoration:none}
.pwlad-what a:hover{color:#fff}
.pwlad-body{font-size:16.5px;font-weight:400;line-height:1.66;color:rgba(255,255,255,.78);margin:0;text-wrap:pretty}

/* Facts as filled tiles */
.pwlad-facts{list-style:none;margin:0 0 26px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.pwlad-facts li{margin:0;background:rgba(255,255,255,.065);border-radius:14px;padding:15px 14px 16px}
.pwlad-facts b{display:block;font-size:24px;font-weight:800;line-height:1;color:#fff;margin:0 0 7px;
  letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.pwlad-facts span{display:block;font-size:13.5px;line-height:1.45;color:rgba(255,255,255,.7)}

/* Craftor's four starter shops, each with its own logo */
.pwlad-shops-lead{font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.72);margin:0 0 12px}
.pwlad-shops{list-style:none;margin:0 0 26px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
/* An odd number of shops: the last one across both columns. */
.pwlad-shops li:last-child:nth-child(odd){grid-column:1 / -1}
.pwlad-shops li{margin:0;display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.07);border-radius:14px;
  padding:11px 12px;min-width:0}
.pwlad-logo{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:42px;height:42px;border-radius:10px;
  background:#fff}
.pwlad-logo img{display:block;width:30px;height:30px}
.pwlad-shops b{display:block;font-size:14.5px;font-weight:700;line-height:1.3;color:#fff}
.pwlad-shops em{display:block;font-style:normal;font-size:13px;line-height:1.4;color:rgba(255,255,255,.62)}

/* The price and the button */
.pwlad-buy{display:flex;align-items:center;justify-content:space-between;gap:16px 22px;flex-wrap:wrap}
.pwlad-price{margin:0;font-size:14.5px;line-height:1.3;color:rgba(255,255,255,.72)}
.pwlad-price b{font-size:32px;font-weight:800;line-height:1;color:#fff;letter-spacing:-.02em;margin:0 3px;
  font-variant-numeric:tabular-nums}
.pwlad-once{display:block;margin-top:7px;font-size:13.5px;color:rgba(255,255,255,.56)}
.pwlad-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:#0066ff;color:#fff;
  border-radius:12px;padding:17px 26px;font-size:16px;font-weight:700;line-height:1;text-decoration:none;
  box-shadow:0 12px 28px -12px rgba(0,102,255,.85);transition:background .18s,transform .18s}
.pwlad-btn:hover,.pwlad-btn:focus-visible{background:#005be5;color:#fff;transform:translateY(-2px)}
.pwlad-btn:focus-visible,.pwlad-what a:focus-visible,.pwlad-note a:focus-visible{outline:2px solid #9fd0ff;outline-offset:3px}
.pwlad-btn svg{display:block;flex:0 0 auto}

/* The switch above the pictures: filled pills */
.pwlad-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.pwlad .pwlad-tab{appearance:none;-webkit-appearance:none;border:0;box-shadow:none;margin:0;
  background:rgba(255,255,255,.09);color:rgba(255,255,255,.8);border-radius:999px;padding:11px 17px;min-height:42px;
  font-family:inherit;font-size:14px;font-weight:600;line-height:1;letter-spacing:0;text-transform:none;
  cursor:pointer;transition:background .15s,color .15s}
.pwlad .pwlad-tab:hover{background:rgba(255,255,255,.16);color:#fff}
.pwlad .pwlad-tab[aria-selected="true"]{background:#fff;color:#0f1826}
.pwlad .pwlad-tab:focus-visible{outline:2px solid #9fd0ff;outline-offset:2px}

/* The picture frame: a filled bar on top, no border */
.pwlad-frame{border-radius:14px;overflow:hidden;background:#0b111b;
  box-shadow:0 36px 70px -34px rgba(0,0,0,.95)}
.pwlad-bar{display:flex;align-items:center;gap:6px;height:30px;padding:0 13px;background:#253043}
.pwlad-bar i{display:block;width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.24)}
/* Craftor: the pictures of one switch sit on top of each other and only the picked one shows (display,
   not opacity: a fading pane was caught half-way in screenshots). All of them have the same shape. */
.pwlad-screen{position:relative;aspect-ratio:16/10;background:#fff}
.pwlad-pane{position:absolute;inset:0;display:none}
.pwlad-pane.is-on{display:block}
.pwlad-pane picture{display:block;width:100%;height:100%}
.pwlad-pane img{display:block;width:100%;height:100%;object-fit:cover;object-position:left top}
.pwlad-device{display:block;padding:7px;border-radius:28px;background:#15191d;
  box-shadow:0 24px 44px -22px rgba(15,24,38,.7)}
.pwlad .pwlad-device img{display:block;width:100%;height:auto;border-radius:21px;object-fit:contain}

/* ConfigKit on a computer: the computer and the phone side by side, same banner, same picks; the phone
   shows the price. The switch is hidden here and comes back on a tablet or a phone (below). */
.pwlad-duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.36fr);gap:20px;align-items:stretch}
.pwlad-duo .pwlad-pane{position:static;display:block;min-width:0}
.pwlad-duo .pwlad-frame img{display:block;width:100%;height:auto;object-fit:fill}
.pwlad-duo .pwlad-pane.phone{display:flex;align-items:center;justify-content:center;padding:24px 16px;border-radius:14px;
  background:linear-gradient(160deg,#e9eef5 0%,#d9e2ee 100%)}
.pwlad-duo .pwlad-device{width:min(236px,100%)}

.pwlad-caps{margin:14px 2px 0}
.pwlad-cap{display:none;margin:0;font-size:14px;line-height:1.55;color:rgba(255,255,255,.62);text-wrap:pretty}
.pwlad-cap.is-on{display:block}
.pwlad-cap-m{display:none}

@media (min-width:981px){
  .pwlad-tabs.duo{display:none}
  .pwlad-caps.duo .pwlad-cap{display:none}
  .pwlad-caps.duo .pwlad-cap.both{display:block;max-width:880px}
}

/* The honest notes under the two steps: three cards of one height, the link at the bottom */
.pwlad-notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:26px;align-items:stretch}
.pwlad-note{display:flex;flex-direction:column;align-items:flex-start;background:rgba(255,255,255,.05);border-radius:20px;padding:26px 26px 24px}
.pwlad-note b{display:block;font-size:16.5px;font-weight:700;line-height:1.3;color:#fff;margin:0 0 8px}
.pwlad-note p{margin:0;font-size:15px;line-height:1.62;color:rgba(255,255,255,.72)}
.pwlad-note p:not(:last-child){margin-bottom:5px}
.pwlad-note a{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding:11px 0 0;color:#9fd0ff;
  font-weight:700;text-decoration:none}
.pwlad-note a:hover{color:#fff}

/* A tablet: one column; ConfigKit's switch is back and starts on the phone, in a frame as tall as the
   computer's, so a tap never moves what is under it */
@media (max-width:980px){
  .pwlad-step{grid-template-columns:minmax(0,1fr);grid-template-areas:"words" "shot" "more";
    row-gap:26px;padding:38px 34px}
  .pwlad-words,.pwlad-more{align-self:auto}
  .pwlad-duo{display:block}
  .pwlad-duo .pwlad-pane,.pwlad-duo .pwlad-pane.phone{display:none}
  .pwlad-duo .pwlad-pane.is-on{display:block}
  .pwlad-duo .pwlad-pane.phone.is-on{display:flex;aspect-ratio:1216/933;padding:0}
  .pwlad-duo .pwlad-device{width:auto;height:88%}
  .pwlad .pwlad-duo .pwlad-device img{width:auto;height:100%}
  .pwlad-notes{grid-template-columns:minmax(0,1fr)}
}

/* A phone: Craftor's three screens show their part that matters, all in one upright frame, so a tap
   on the switch never moves what is under it. ConfigKit's computer picture and phone stand at their
   own height. */
@media (max-width:600px){
  .pwlad{padding:66px 0 74px}
  .pwlad-in{padding:0 16px}
  .pwlad-head{margin-bottom:34px}
  .pwlad h2{text-wrap:wrap}
  .pwlad h2 span{display:inline}
  .pwlad-lede{font-size:16.5px}
  .pwlad-step{padding:26px 18px 24px;border-radius:22px;row-gap:22px}
  .pwlad-step + .pwlad-step{margin-top:18px}
  .pwlad-body{font-size:16px}
  .pwlad-facts{grid-template-columns:minmax(0,1fr);gap:8px}
  .pwlad-facts li{display:flex;align-items:center;gap:14px;padding:13px 14px}
  .pwlad-facts b{flex:0 0 56px;margin:0;font-size:22px}
  .pwlad-shops{grid-template-columns:minmax(0,1fr);gap:8px}
  .pwlad-tabs{gap:6px}
  .pwlad .pwlad-tab{padding:10px 14px;font-size:13.5px}
  .pwlad-buy{flex-direction:column;align-items:stretch}
  .pwlad-btn{width:100%}
  .pwlad-screen{aspect-ratio:19/25}
  .pwlad-cap-pc{display:none}
  .pwlad-cap-m{display:inline}
  .pwlad-duo .pwlad-pane.phone.is-on{aspect-ratio:auto;padding:22px 0}
  .pwlad-duo .pwlad-device{height:auto;width:min(250px,76%)}
  .pwlad .pwlad-duo .pwlad-device img{width:100%;height:auto}
  .pwlad-note{padding:22px 20px 20px}
}

@media (prefers-reduced-motion:reduce){
  .pwlad-btn,.pwlad .pwlad-tab{transition:none}
  .pwlad-btn:hover{transform:none}
}