/* =============================================================================
   SheetWise landing page. Scoped to .stwlp so it never touches the rest of the
   theme. Brand: Inter, DevTonic blue (#0066FF), navy sections, gradient accents.
   Same system as the SheetWise, DiscountWise and Sellsmith pages.
   ============================================================================= */

.stwlp {
  --p: #0066FF;
  --p2: #0052CC;
  --p3: #00A3FF;
  --p-soft: #CCE5FF;
  --grad: linear-gradient(135deg, #0066FF, #00A3FF);
  --grad-dk: linear-gradient(135deg, #00A3FF, #7cc4ff);
  --green: #10b981;
  --ink: #0a0a0a;
  --muted: #667085;
  --dk: #001429;
  --dk2: #0a1929;
  --line: rgba(0, 102, 255, 0.14);
  --radius: 22px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: #1a1a1a;
  -webkit-font-smoothing: antialiased;
}

.stwlp *,
.stwlp *::before,
.stwlp *::after { box-sizing: border-box; }

.stwlp img { max-width: 100%; display: block; }
.stwlp svg { display: block; }

/* ---- Section shells ---------------------------------------------------- */
.stwlp .section { padding: 110px 40px; position: relative; overflow: hidden; }
.stwlp .section.lt { background: #ffffff; }
.stwlp .section.soft {
  background:
    radial-gradient(circle at 15% 20%, rgba(0, 163, 255, 0.06), transparent 55%),
    radial-gradient(circle at 85% 80%, rgba(0, 102, 255, 0.05), transparent 55%),
    linear-gradient(180deg, #f7faff 0%, #ffffff 100%);
}
.stwlp .section.accent {
  background: linear-gradient(135deg, #0066FF 0%, #0052CC 100%);
  color: #fff;
}
.stwlp .section.dk {
  background: linear-gradient(160deg, #001429 0%, #0a1929 60%, #071b34 100%);
  color: #eaf2ff;
}
.stwlp .wrap { max-width: 1200px; margin: 0 auto; position: relative; z-index: 2; }

.stwlp .section.dk::before,
.stwlp .section.accent::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 18% 40%, rgba(0, 102, 255, 0.16), transparent 50%),
    radial-gradient(circle at 82% 80%, rgba(0, 102, 255, 0.1), transparent 50%);
}

/* ---- Buttons ----------------------------------------------------------- */
.stwlp .btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 16px 30px; border-radius: 12px;
  font-size: 16px; font-weight: 700; text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.stwlp .btn .ar { transition: transform .25s ease; }
.stwlp .btn:hover .ar { transform: translateX(4px); }
.stwlp .btn-primary {
  background: var(--grad); color: #fff;
  box-shadow: 0 14px 32px rgba(0, 102, 255, 0.38);
}
.stwlp .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 20px 44px rgba(0, 102, 255, 0.5); }
.stwlp .btn-secondary {
  background: rgba(255, 255, 255, 0.08); color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.stwlp .btn-secondary:hover { background: rgba(255, 255, 255, 0.16); transform: translateY(-3px); }

/* =============================================================================
   HERO
   ============================================================================= */
.stwlp .hero {
  padding: 190px 40px 100px;
  background: linear-gradient(160deg, #001429 0%, #0a1929 55%, #06213f 100%);
  color: #fff; position: relative; overflow: hidden;
}
.stwlp .hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 18% 35%, rgba(0, 102, 255, 0.2), transparent 50%),
    radial-gradient(circle at 85% 75%, rgba(0, 163, 255, 0.13), transparent 50%);
}
.stwlp .hero-grid {
  max-width: 1240px; margin: 0 auto; position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 60px; align-items: center;
}
.stwlp .hero-badge {
  display: inline-flex; align-items: center; gap: 9px; padding: 8px 18px;
  border-radius: 50px; background: rgba(0, 163, 255, 0.14);
  border: 1px solid rgba(0, 163, 255, 0.35); color: #bfe0ff;
  font-size: 13.5px; font-weight: 700; margin-bottom: 26px;
}
.stwlp .hero-badge svg { width: 16px; height: 16px; color: #7cc4ff; }
.stwlp .hero h1 {
  font-size: 62px; font-weight: 900; line-height: 1.05; letter-spacing: -0.025em;
  margin: 0 0 22px; color: #fff;
}
.stwlp .gt-d {
  background: var(--grad-dk);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.stwlp .hero-sub {
  font-size: 20px; line-height: 1.7; color: rgba(255, 255, 255, 0.78);
  margin: 0 0 32px; max-width: 560px;
}
/* A grid, not a wrapping flex row. Three stats of different lengths wrapped the
   third onto its own line and the block read as broken. */
.stwlp .hero-stats {
  display: grid; grid-template-columns: repeat(3, auto); justify-content: start;
  gap: 34px; margin: 34px 0 30px;
}
.stwlp .hstat .num {
  font-size: 30px; font-weight: 900; white-space: nowrap;
  background: var(--grad-dk);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.stwlp .hstat .lbl { font-size: 13px; color: rgba(255, 255, 255, 0.6); font-weight: 600; white-space: nowrap; }
.stwlp .hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.stwlp .herostudio {
  display: flex; align-items: center; gap: 9px; margin-top: 30px;
  font-size: 13.5px; color: rgba(255, 255, 255, 0.6);
}
.stwlp .herostudio svg { width: 18px; height: 18px; color: #7cc4ff; flex-shrink: 0; }
.stwlp .herostudio b { color: rgba(255, 255, 255, 0.85); }

/* ---- The hero card: a real cutting plan, not a picture of one ----------- */
.stwlp .hero-visual { position: relative; }
.stwlp .plancard {
  background: #fff; border-radius: 24px; padding: 22px; color: #1a1a1a;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.05);
  position: relative; z-index: 2; max-width: 520px; margin: 0 auto;
}
.stwlp .plancard-top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 16px;
}
.stwlp .plancard-title { font-size: 15px; font-weight: 800; }
.stwlp .plancard-title span { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); margin-top: 2px; }
.stwlp .plancard-tag {
  background: linear-gradient(135deg, #10b981, #059669); color: #fff;
  font-size: 12px; font-weight: 800; padding: 6px 13px; border-radius: 50px;
  white-space: nowrap; box-shadow: 0 8px 18px rgba(16, 185, 129, 0.35);
}
.stwlp .plancard-draw {
  border: 1px solid #e6eefc; border-radius: 14px; padding: 12px; background: #fbfcfe;
}
.stwlp .plancard-meta {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px;
}
.stwlp .pmeta {
  background: rgba(0, 102, 255, 0.05); border: 1px solid #e6eefc;
  border-radius: 12px; padding: 10px 12px;
}
.stwlp .pmeta .k { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); }
.stwlp .pmeta .v { font-size: 17px; font-weight: 900; color: #0a0a0a; margin-top: 3px; }
.stwlp .plancard-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 16px; padding-top: 15px; border-top: 1px solid #eef3fc;
}
.stwlp .plancard-foot .lab { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.stwlp .plancard-btn {
  background: var(--grad); color: #fff; border: 0; border-radius: 10px;
  padding: 11px 20px; font-size: 14px; font-weight: 800; font-family: inherit;
}

/* The drawing is the plugin's own SVG, which paints itself from classes. These
   are the plugin's defaults, copied so the plan looks the same here as it does
   in a shop. */
.stwlp .shw-layout { display: block; width: 100%; height: auto; color: #7a8798; }
.stwlp .shw-sheet { fill: #f4f6f9; stroke: #c8d2dd; stroke-width: 3; }
.stwlp .shw-part { fill: #e2ecff; stroke: #0066FF; stroke-width: 4; }
.stwlp .shw-part.is-turned { fill: #d7e6ff; }
.stwlp .shw-part-text { fill: #0b2c5e; font-weight: 600; }
.stwlp .shw-cut { stroke: #ff5c00; stroke-width: 3; opacity: .55; }
.stwlp .shw-offcut { fill: url(#shw-hatch); stroke: #c8d2dd; stroke-width: 2; stroke-dasharray: 18 12; }
.stwlp .shw-offcut-text { fill: #7a8798; }
.stwlp .shw-trim { stroke: #c8d2dd; stroke-width: 2; stroke-dasharray: 10 8; fill: none; }

/* =============================================================================
   SECTION HEADS, shared by every section below the hero
   ============================================================================= */
.stwlp .shead { text-align: center; max-width: 780px; margin: 0 auto 64px; }
.stwlp .eyebrow {
  display: inline-block; padding: 8px 22px; border-radius: 50px;
  background: rgba(0, 102, 255, 0.08); border: 1px solid rgba(0, 102, 255, 0.18);
  /* Not var(--p). The brand blue on this pale blue chip measured 4.02 to 4.29 to 1 across
     seven light sections and 12px text wants 4.5. This is the same blue a step darker and
     reaches 4.76 on the darkest of the three chip grounds. The chip stays as it is: lifting
     the chip instead would have moved seven sections' worth of ground. */
  color: #005ce6; font-size: 12px; font-weight: 800; letter-spacing: 2.5px;
  text-transform: uppercase; margin-bottom: 22px;
}
.stwlp .section.dk .eyebrow {
  background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.28); color: #cfe6ff;
}
.stwlp .section.accent .eyebrow {
  /* Darker, not lighter, and only just. A white veil over this blue lifts the pill to
     rgb(46,124,241) and white type on that reaches 3.99, under the line for 12px, so this one
     goes the other way. It went too far: at 0.3 the pill was a 0.067 luminance shift off its
     own ground while the dark band's pill is 0.023, so it read as a solid navy blob among ten
     faint tints. 0.1 puts it at 0.025, the same weight as the dark one, and white type on it
     still reaches 5.77 to 1, which is better than white on the bare band. */
  background: rgba(0, 22, 66, 0.1); border-color: rgba(255, 255, 255, 0.28); color: #fff;
}
.stwlp .stitle {
  font-size: 52px; font-weight: 900; line-height: 1.08; letter-spacing: -0.02em;
  margin: 0 0 20px; color: inherit;
}
.stwlp .gt {
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stwlp .sdesc { font-size: 19px; line-height: 1.75; color: var(--muted); margin: 0; }
.stwlp .section.dk .sdesc { color: rgba(255, 255, 255, 0.8); }
.stwlp .section.accent .sdesc { color: #fff; }

/* =============================================================================
   2. THE PROBLEM: a day of quoting by hand
   ============================================================================= */
.stwlp .aday { display: grid; grid-template-columns: 1.05fr .95fr; gap: 54px; align-items: center; }

.stwlp .mmt { padding: 22px 0; border-bottom: 1px solid #e9eff9; }
.stwlp .mmt:first-child { padding-top: 0; }
.stwlp .mmt:last-child { border-bottom: 0; padding-bottom: 0; }
.stwlp .mmt-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 9px; flex-wrap: wrap;
}
.stwlp .when { font-size: 12.5px; font-weight: 800; color: var(--p); letter-spacing: .4px; }
.stwlp .out {
  font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px;
  color: #98a2b3; background: #f4f7fc; border-radius: 50px; padding: 5px 12px;
}
.stwlp .mmt p { margin: 0; font-size: 16.5px; line-height: 1.75; color: #475467; }
.stwlp .mmt p b { color: #0a0a0a; font-weight: 800; }

/* The back of the envelope. Same card shell as the receipt on DiscountWise,
   because this is the same idea: the number the shop reaches on its own. */
.stwlp .envelope {
  background: #fff; border: 1px solid rgba(0, 102, 255, .14); border-radius: 22px;
  padding: 28px 28px 24px; box-shadow: 0 24px 60px rgba(2, 30, 84, .12);
  font-variant-numeric: tabular-nums; max-width: 460px; margin: 0 auto; width: 100%;
}
.stwlp .env-head {
  display: flex; align-items: center; gap: 11px; font-weight: 800; font-size: 16.5px;
  color: #0a0a0a; padding-bottom: 16px; border-bottom: 2px dashed #e3ebf8;
}
.stwlp .env-head svg { width: 20px; height: 20px; color: var(--p); flex-shrink: 0; }
.stwlp .env-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 18px;
  padding: 14px 0; border-bottom: 1px dashed #e9eff9; font-size: 15.5px; color: #475467;
}
.stwlp .env-row .m { font-weight: 800; color: #0a0a0a; white-space: nowrap; }
.stwlp .env-sum {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 0; font-weight: 900; font-size: 17px; color: #0a0a0a;
}
.stwlp .env-truth {
  background: #fff4f2; border: 1px solid #ffd9d1; border-radius: 14px;
  padding: 15px 17px; margin-top: 4px;
}
.stwlp .env-truth .h {
  display: flex; align-items: center; gap: 9px; font-weight: 900; font-size: 15.5px; color: #b42318;
}
.stwlp .env-truth .h svg { width: 17px; height: 17px; flex-shrink: 0; }
.stwlp .env-truth p { margin: 7px 0 0; font-size: 14px; line-height: 1.65; color: #7a271a; }
.stwlp .env-note { margin-top: 16px; font-size: 12.5px; color: #98a2b3; font-weight: 600; text-align: center; }

.stwlp .aclose { text-align: center; margin-top: 56px; }
.stwlp .aclose .big { font-size: 30px; font-weight: 900; letter-spacing: -0.01em; }
.stwlp .aclose .sub { font-size: 17px; color: var(--muted); margin-top: 10px; }

/* =============================================================================
   3. HOW IT WORKS: three steps, each carrying the real thing
   ============================================================================= */
.stwlp .flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; position: relative; }

/* The line joining the three numbers, behind the cards. Stops short at both ends so
   it does not run off the outside of the first and last step. */
.stwlp .flow::before {
  content: ''; position: absolute; top: 27px; left: 16%; right: 16%; height: 2px;
  background: linear-gradient(90deg, rgba(0,102,255,.25), rgba(0,163,255,.45), rgba(0,102,255,.25));
  z-index: 0;
}

/* One card per step, not a card floating under loose text. Three paragraphs of
   different lengths left the three artefacts hanging at three different heights,
   which read as broken rather than as a sequence. */
.stwlp .step {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid rgba(0, 102, 255, .14); border-radius: 22px;
  padding: 0 24px 24px; margin-top: 27px;
  box-shadow: 0 18px 44px rgba(2, 30, 84, .10);
}
.stwlp .step-n {
  width: 54px; height: 54px; border-radius: 50%; margin: -27px auto 20px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 900; color: #fff; background: var(--grad);
  box-shadow: 0 10px 26px rgba(0, 102, 255, .35), 0 0 0 8px #fff;
}
.stwlp .step h4 { font-size: 21px; font-weight: 900; margin: 0 0 9px; text-align: center; letter-spacing: -.01em; }
.stwlp .step > p { margin: 0 0 20px; font-size: 15.5px; line-height: 1.7; color: var(--muted); text-align: center; }

/* The artefact inside the step. No second card shell: a card inside a card is a
   box for the sake of a box. */
.stwlp .step-art {
  /* Not margin-top:auto. Pushing these to the bottom of three cards of equal height
     left the artefact floating in the middle of the short ones with a hole above it.
     All three paragraphs run to four lines, so they line up on their own. */
  background: #f7faff; border: 1px solid #e6eefc;
  border-radius: 16px; padding: 15px;
}
.stwlp .step-cap {
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .9px;
  color: #98a2b3; margin-bottom: 10px;
}

/* 1. what the customer pastes */
.stwlp .paste {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px; line-height: 1.85; color: #344054; white-space: pre;
  background: #fff; border: 1px solid #e6eefc; border-radius: 12px;
  padding: 12px 13px; overflow-x: auto;
}

/* 2. what comes back */
.stwlp .answer {
  font-size: 14.5px; font-weight: 700; color: #0a0a0a; line-height: 1.55; margin-bottom: 12px;
}
.stwlp .answer b { color: var(--p); font-weight: 900; }
.stwlp .step-draw { border: 1px solid #e6eefc; border-radius: 12px; padding: 9px; background: #fff; }

/* 3. what lands on the order */
.stwlp .oline { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.stwlp .oline .n { font-size: 14.5px; font-weight: 800; color: #0a0a0a; line-height: 1.4; }
.stwlp .oline .n small { display: block; font-weight: 600; color: var(--muted); font-size: 12.5px; margin-top: 3px; }
.stwlp .oline .a { font-size: 18px; font-weight: 900; color: var(--p); white-space: nowrap; }
.stwlp .ochips { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 13px; }
.stwlp .ochip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 800; color: #0b2c5e;
  background: #eaf2ff; border: 1px solid #d3e6ff; border-radius: 50px; padding: 5px 11px;
}
.stwlp .ochip svg { width: 12px; height: 12px; }
.stwlp .ochip.stock { color: #065f46; background: #e7f8f1; border-color: #b9ead8; }
.stwlp .onote {
  margin: 14px 0 0; padding-top: 13px; border-top: 1px dashed #dfe9f8;
  font-size: 12.5px; line-height: 1.6; color: var(--muted);
}

/* =============================================================================
   4. TRUST: the two things a shop worries about before it trusts a price
   ============================================================================= */
.stwlp .hw { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.stwlp .hw + .hw { margin-top: 90px; }
.stwlp .hw.flip .hw-visual { order: -1; }
.stwlp .hw .shead { text-align: left; margin: 0; max-width: none; }
.stwlp .hw-visual {
  background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 26px;
  box-shadow: 0 20px 50px rgba(2, 30, 84, 0.09);

  /* A white card on a blue band inherits the band's white text, so anything inside
     that does not name its own colour disappears. It cost me a heading. */
  color: #1a1a1a;
}

/* On a blue band the head goes white and the accent phrase goes to pale blue,
   because a blue gradient on blue is invisible. */
.stwlp .section.accent .stitle { color: #fff; }
/* Navy, not a white that fades to pale blue. The fade reads as the second half of the heading
   being switched off, which is what Hamza was seeing: it passes on contrast and still looks
   dimmer than the words next to it. Navy on this blue is a deliberate accent and it keeps the
   section to the same three colours as everything else on it. */
.stwlp .section.accent .gt {
  background: none; -webkit-background-clip: initial; background-clip: initial;
  -webkit-text-fill-color: #001429; color: #001429;
}

/* The blade demonstration: two halves of a sheet that do not fit on it. */
.stwlp .kerf { text-align: center; }
.stwlp .kerf-cap {
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .9px;
  color: #98a2b3; margin-bottom: 14px;
}
.stwlp .kerf-sheet {
  position: relative; height: 108px; border-radius: 10px;
  border: 2px solid #c8d2dd; background: #f4f6f9; display: flex; overflow: hidden;
}
.stwlp .kerf-half {
  flex: 1; margin: 8px; border-radius: 6px;
  background: #e2ecff; border: 2px solid #0066FF;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; color: #0b2c5e;
}
.stwlp .kerf-blade {
  width: 6px; margin: 8px 0; background: repeating-linear-gradient(180deg, #ff5c00 0 7px, transparent 7px 12px);
  align-self: stretch;
}
.stwlp .kerf-sum {
  margin-top: 16px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13.5px; color: #344054; line-height: 2;
}
.stwlp .kerf-sum b { color: #b42318; }
.stwlp .kerf-verdict {
  margin-top: 14px; padding: 12px 14px; border-radius: 12px;
  background: #fff4f2; border: 1px solid #ffd9d1;
  font-size: 14px; font-weight: 800; color: #b42318;
}
.stwlp .kerf-verdict span { display: block; font-weight: 600; color: #7a271a; margin-top: 4px; font-size: 13px; }

/* The basket trail: what is stored, and what is worked out again. */
.stwlp .trail-head { font-weight: 900; font-size: 16px; margin-bottom: 4px; color: #0a0a0a; }
.stwlp .trail-sub { font-size: 13px; color: var(--muted); margin-bottom: 18px; }
.stwlp .trail { display: flex; flex-direction: column; gap: 0; }
.stwlp .tstep {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px 0; border-bottom: 1px dashed #e9eff9;
}
.stwlp .tstep:last-child { border-bottom: 0; }
.stwlp .tdot {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; margin-top: 1px;
  display: flex; align-items: center; justify-content: center;
  background: #eaf2ff; color: var(--p);
}
.stwlp .tdot svg { width: 14px; height: 14px; }
.stwlp .tdot.no { background: #fff1f0; color: #b42318; }
.stwlp .tstep .tx { font-size: 14.5px; font-weight: 800; color: #0a0a0a; line-height: 1.45; }
.stwlp .tstep .tx small { display: block; font-weight: 600; color: var(--muted); font-size: 13px; margin-top: 3px; }

/* =============================================================================
   6. EVERYTHING IT DOES: a bento of tiles on the dark band
   ============================================================================= */
.stwlp .eyebrow.dk {
  background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.18); color: #bfe0ff;
}
.stwlp .section.dk .stitle { color: #fff; }

.stwlp .bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(120px, auto); gap: 18px; }
.stwlp .btile {
  background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 20px; padding: 26px; display: flex; flex-direction: column;
  transition: border-color .3s, background .3s, transform .3s;
}
.stwlp .btile:hover {
  border-color: rgba(0, 163, 255, .45); background: rgba(255, 255, 255, .07); transform: translateY(-4px);
}
.stwlp .btile.big { grid-column: span 2; grid-row: span 2; }
.stwlp .btile.wide { grid-column: span 2; }
.stwlp .btile h3 { font-size: 17px; font-weight: 800; color: #fff; margin: 0 0 7px; }
.stwlp .btile p { font-size: 13.5px; line-height: 1.65; color: rgba(226, 240, 255, .72); margin: 0; }
.stwlp .bic {
  width: 44px; height: 44px; border-radius: 13px; margin-bottom: 16px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 163, 255, .16); border: 1px solid rgba(0, 163, 255, .3);
}
.stwlp .bic svg { width: 21px; height: 21px; color: #7cc4ff; }

/* The little demonstration inside a tile. */
.stwlp .bviz { margin-top: auto; padding-top: 18px; }
.stwlp .bstrip { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.stwlp .bchip {
  font-size: 12px; font-weight: 800; padding: 6px 12px; border-radius: 50px;
  background: rgba(0, 163, 255, .14); border: 1px solid rgba(0, 163, 255, .3); color: #bfe0ff;
}
.stwlp .bchip.warn { background: rgba(255, 92, 0, .14); border-color: rgba(255, 140, 60, .4); color: #ffc59a; }
.stwlp .bchip.ok { background: rgba(16, 185, 129, .16); border-color: rgba(16, 185, 129, .38); color: #8ef0cb; }

/* The itemised quote, the thing that stops the "how did you get that" email. */
.stwlp .bquote {
  border-top: 1px solid rgba(255, 255, 255, .12);
  margin-top: auto; padding-top: 6px;
}
.stwlp .bqrow {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 9px 0; font-size: 13.5px; color: rgba(226, 240, 255, .8);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.stwlp .bqrow small { display: block; font-size: 11.5px; color: rgba(226, 240, 255, .45); margin-top: 2px; }
.stwlp .bqrow b { color: #fff; font-weight: 800; white-space: nowrap; }
.stwlp .bqrow.tot { border-bottom: 0; font-weight: 900; color: #fff; font-size: 15.5px; padding-top: 13px; }

/* =============================================================================
   7. HOW IT IS DONE NOW, AND HOW IT COULD BE
   ============================================================================= */
.stwlp .bb { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; position: relative; max-width: 960px; margin: 0 auto; }
.stwlp .bb-vs {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 4;
  width: 52px; height: 52px; border-radius: 50%; background: #0a1929; color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 14px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
}
.stwlp .bb-card { border-radius: 22px; padding: 32px 30px; }
.stwlp .bb-card.usual { background: #f4f6fa; border: 1px solid #e6e9ef; }
.stwlp .bb-card.us {
  background: linear-gradient(160deg, #062142, #0a1929); color: #fff;
  border: 1px solid rgba(0, 163, 255, 0.3);
}
.stwlp .bb-h { margin-bottom: 18px; }
.stwlp .bb-tag { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; color: #98a2b3; }
.stwlp .bb-card.us .bb-tag { color: #7cc4ff; }
.stwlp .bb-r {
  display: flex; gap: 12px; align-items: flex-start; padding: 13px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.06); font-size: 15px; line-height: 1.6;
}
.stwlp .bb-card.us .bb-r { border-top-color: rgba(255, 255, 255, .1); color: rgba(226, 240, 255, .88); }
.stwlp .bb-r .k {
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .8px;
  color: #b3bac5; display: block; margin-bottom: 3px;
}
.stwlp .bb-card.us .bb-r .k { color: #7cc4ff; }
.stwlp .bb-r .dash { background: #e6e9ef; color: #98a2b3; }
.stwlp .verdict { margin-top: 30px; text-align: center; font-size: 17px; font-weight: 800; color: #0a0a0a; }
.stwlp .verdict span { color: var(--p); }
.stwlp .fnote { text-align: center; margin-top: 12px; font-size: 13px; color: #98a2b3; font-weight: 600; }

/* =============================================================================
   8. PRICING: one plugin, one price, a toggle for how you pay
   ============================================================================= */
.stwlp .ptoggle {
  display: inline-flex; gap: 4px; background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .13); border-radius: 50px; padding: 4px; margin-bottom: 22px;
}
.stwlp .ptoggle button {
  border: 0; background: none; color: rgba(226, 240, 255, .7); cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 800; padding: 8px 18px; border-radius: 50px;
  transition: background .2s, color .2s;
}
.stwlp .ptoggle button.on { background: var(--grad); color: #fff; }
.stwlp .ptoggle .save { font-size: 10.5px; font-weight: 800; opacity: .85; margin-left: 6px; }

/* What the price actually buys, beside the card. */

/* =============================================================================
   10. A NOTE FROM THE MAKER, AND THE LAST BUTTON
   ============================================================================= */
.stwlp .get-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 40px; align-items: stretch; }

.stwlp .letter {
  background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 24px; padding: 42px 44px; backdrop-filter: blur(6px);
  display: flex; flex-direction: column; justify-content: center;
}
.stwlp .letter .tag {
  display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: 1.5px;
  text-transform: uppercase; color: #fff; opacity: .8; margin-bottom: 18px;
}
.stwlp .letter p { font-size: 16.5px; line-height: 1.8; color: rgba(255, 255, 255, 0.94); margin: 0 0 15px; }
.stwlp .letter em { font-style: normal; border-bottom: 1px solid rgba(255, 255, 255, .4); }

.stwlp .signrow { display: flex; align-items: center; gap: 16px; margin-top: 22px; flex-wrap: wrap; }
.stwlp .sig {
  font-size: 30px; font-weight: 400; color: #fff; opacity: .9;
  font-family: 'Segoe Script', 'Bradley Hand', cursive;
}
.stwlp .who { display: flex; align-items: center; gap: 12px; }
.stwlp .lav {
  width: 46px; height: 46px; border-radius: 50%; background: #fff; color: #0052CC;
  font-weight: 800; display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.stwlp .lav img { width: 100%; height: 100%; object-fit: cover; }
.stwlp .who b { display: block; font-size: 14.5px; color: #fff; }
.stwlp .who span { font-size: 13px; color: rgba(255, 255, 255, .72); }

.stwlp .cta-card {
  background: #fff; border-radius: 26px; padding: 46px 42px;
  box-shadow: 0 30px 70px rgba(0, 20, 60, .3); text-align: center;
  display: flex; flex-direction: column; justify-content: center;
  color: #1a1a1a;
}
.stwlp .cc-eb {
  display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: 2px;
  text-transform: uppercase; color: #fff; margin-bottom: 14px;
}
.stwlp .cta-card h2 {
  font-size: 36px; font-weight: 900; letter-spacing: -0.02em; color: #0a0a0a;
  line-height: 1.1; margin: 0 0 12px;
}
.stwlp .cta-card p { font-size: 16.5px; line-height: 1.7; color: var(--muted); margin: 0 0 26px; }
.stwlp .cc-btn {
  display: inline-flex; align-items: center; gap: 10px; align-self: center;
  background: var(--p); color: #fff; font-weight: 800; font-size: 16px;
  padding: 17px 34px; border-radius: 50px; text-decoration: none;
  box-shadow: 0 14px 34px rgba(0, 20, 60, .3);
  transition: transform .3s, box-shadow .3s; margin-bottom: 24px;
}
.stwlp .cc-btn:hover { background: #001429; transform: translateY(-3px); box-shadow: 0 20px 44px rgba(0, 20, 60, .42); }
.stwlp .cc-trust { display: flex; flex-direction: column; gap: 12px; text-align: left; max-width: 350px; margin: 0 auto; }
.stwlp .ti { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; color: var(--muted); line-height: 1.5; }
.stwlp .ti svg { width: 17px; height: 17px; color: var(--green); flex-shrink: 0; margin-top: 2px; }

/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 1024px) {
  .stwlp .hero { padding: 150px 28px 80px; }
  .stwlp .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .stwlp .hero h1 { font-size: 48px; }
  .stwlp .hero-sub { font-size: 18px; }
  .stwlp .section { padding: 80px 28px; }
  .stwlp .stitle { font-size: 40px; }
  .stwlp .aday { grid-template-columns: 1fr; gap: 44px; }
  .stwlp .flow { grid-template-columns: 1fr; gap: 44px; }
  .stwlp .hw { grid-template-columns: 1fr; gap: 36px; }
  .stwlp .shots { grid-template-columns: 1fr; }
  .stwlp .bento { grid-template-columns: repeat(2, 1fr); }
  .stwlp .bb { grid-template-columns: 1fr; gap: 20px; }
  .stwlp .price-wrap { grid-template-columns: 1fr; gap: 26px; }
  .stwlp .get-grid { grid-template-columns: 1fr; gap: 28px; }
  .stwlp .letter { padding: 32px 28px; }
  .stwlp .cta-card { padding: 36px 26px; }
  .stwlp .bb-vs { display: none; }
  .stwlp .btile.big { grid-column: span 2; grid-row: span 1; }
  .stwlp .shot.big { grid-column: span 1; }
  .stwlp .hw + .hw { margin-top: 60px; }
  /* Stacked, every row reads heading then picture. Leaving the flip in place put
     the card above the heading it belongs to on half the rows. */
  .stwlp .hw.flip .hw-visual { order: 2; }
  .stwlp .flow::before { display: none; }
}

@media (max-width: 640px) {
  .stwlp .hero { padding: 130px 20px 66px; }
  .stwlp .hero h1 { font-size: 36px; }
  .stwlp .hero-sub { font-size: 17px; }
  .stwlp .hero-stats { grid-template-columns: 1fr; gap: 18px; }
  .stwlp .hstat .num { font-size: 25px; }
  .stwlp .hero-cta { flex-direction: column; align-items: stretch; }
  .stwlp .btn { justify-content: center; }
  .stwlp .plancard { padding: 16px; }
  .stwlp .stitle { font-size: 31px; }
  .stwlp .sdesc { font-size: 17px; }
  .stwlp .shead { margin-bottom: 44px; }
  .stwlp .aclose .big { font-size: 24px; }
  .stwlp .envelope { padding: 20px 18px 18px; }
  .stwlp .bento { grid-template-columns: 1fr; }
  .stwlp .pcard2 { padding: 26px 22px; }
  .stwlp .amt { font-size: 42px; }
  .stwlp .cta-card h2 { font-size: 28px; }
  .stwlp .letter { padding: 26px 22px; }
  .stwlp .btile.big,
  .stwlp .btile.wide { grid-column: span 1; }
  .stwlp .btile { padding: 20px; }
  .stwlp .plancard-meta { gap: 8px; }
  .stwlp .pmeta { padding: 9px 10px; }
  .stwlp .pmeta .v { font-size: 15px; }
  .stwlp .section { padding: 64px 20px; }
}


/* =============================================================================
   StoreWise only: the parts a theme page needs and a plugin page does not
   ============================================================================= */

/* ---- The four demo shops ------------------------------------------------ */

.stwlp .demos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 34px;
  margin-top: 46px;
}

.stwlp .demo {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(0, 20, 41, 0.08);
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.stwlp .demo:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 60px rgba(0, 20, 41, 0.14);
}

/* The picture is the product here, so it gets the room and no rounding of its own. */
.stwlp .demo img {
  width: 100%;
  aspect-ratio: 8 / 5;
  object-fit: cover;
  object-position: top center;
  border-bottom: 1px solid var(--line);
}

.stwlp .demo-body { padding: 26px 28px 30px; }

.stwlp .demo-trade {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--p);
  margin-bottom: 8px;
}

.stwlp .demo h3 { font-size: 24px; line-height: 1.2; margin: 0 0 10px; }
.stwlp .demo p { color: var(--muted); font-size: 15.5px; line-height: 1.6; margin: 0 0 18px; }

.stwlp .demo-links { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }

.stwlp .demo-links a {
  font-weight: 700;
  font-size: 15px;
  color: var(--p);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color 160ms ease;
}

.stwlp .demo-links a:hover { border-bottom-color: var(--p); }

/* ---- The looks, as swatches rather than screenshots --------------------- */

.stwlp .looks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 18px;
  margin-top: 40px;
}

.stwlp .look {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: #fff;
}

.stwlp .look-bar { height: 74px; display: flex; }
.stwlp .look-bar span { flex: 1; }

.stwlp .look-name {
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  background: #fff;
}

.stwlp .look-name small {
  display: block;
  font-weight: 500;
  color: var(--muted);
  font-size: 12.5px;
  margin-top: 2px;
}

/* ---- What is in the box, counted -------------------------------------- */

.stwlp .counts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 22px;
  margin-top: 40px;
}

.stwlp .count {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  padding: 26px 24px;
}

.stwlp .count .n {
  font-size: 40px;
  font-weight: 900;
  line-height: 1;
  background: var(--grad-dk);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.stwlp .count .l { margin-top: 10px; font-size: 15px; color: rgba(255, 255, 255, 0.82); line-height: 1.45; }

@media (max-width: 860px) {
  .stwlp .demo img { aspect-ratio: 3 / 2; }
}


/* =============================================================================
   Hero visuals, three of them, so the choice can be made by looking

   The first hero put a screenshot of a demo shop beside the headline, and the
   demos have their own section further down. A sales page should not spend its
   best space showing the thing it is about to show properly.

   Each of these is drawn in CSS instead: nothing to photograph, nothing to
   re-shoot when a demo changes, and it stays sharp on any screen.
   ============================================================================= */

/* ---- A: the price falls out of the size -------------------------------- */

.stwlp .hv-card {
  background: #fff;
  border-radius: 20px;
  padding: 26px 26px 22px;
  box-shadow: 0 30px 70px rgba(0, 12, 30, 0.35);
  color: #0a0a0a;
  max-width: 460px;
}

.stwlp .hv-top { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.stwlp .hv-thumb {
  width: 54px; height: 54px; border-radius: 12px; flex: none;
  background: linear-gradient(135deg, #2F4A3C, #45614f);
}
.stwlp .hv-name { font-weight: 800; font-size: 17px; line-height: 1.2; }
.stwlp .hv-sub { color: var(--muted); font-size: 13px; margin-top: 3px; }

.stwlp .hv-lab {
  font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); margin: 16px 0 8px;
}

.stwlp .hv-sizes { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; }
.stwlp .hv-in {
  border: 2px solid var(--p-soft); border-radius: 12px; padding: 12px 14px;
  font-weight: 700; font-size: 16px; background: #fbfdff;
}
.stwlp .hv-in span { color: var(--muted); font-weight: 600; font-size: 13px; margin-left: 4px; }
.stwlp .hv-x { color: var(--muted); font-weight: 700; }

.stwlp .hv-pick {
  margin-top: 10px; border: 2px solid var(--p-soft); border-radius: 12px;
  padding: 12px 14px; font-weight: 600; font-size: 15px; background: #fbfdff;
  display: flex; justify-content: space-between; align-items: center;
}
.stwlp .hv-pick b { font-weight: 800; }
.stwlp .hv-pick i { font-style: normal; color: var(--p); font-weight: 800; }

.stwlp .hv-total {
  margin-top: 18px; padding-top: 16px; border-top: 2px dashed rgba(0, 102, 255, 0.18);
  display: flex; align-items: baseline; justify-content: space-between;
}
.stwlp .hv-total .k { font-size: 13px; font-weight: 700; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; }
.stwlp .hv-total .v { font-size: 38px; font-weight: 900; letter-spacing: -0.02em; }

.stwlp .hv-btn {
  margin-top: 16px; display: block; text-align: center; border-radius: 12px;
  background: var(--grad); color: #fff; font-weight: 800; padding: 14px 18px; font-size: 15px;
}

/* ---- the three-up comparison page only --------------------------------- */

.stwlp .tryout { padding: 26px 40px 0; }
.stwlp .tryout h2 {
  font-size: 15px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: #0066FF; margin: 0 0 4px;
}
.stwlp .tryout p { margin: 0 0 10px; color: #667085; font-size: 15px; }

@media (max-width: 860px) {
  .stwlp .way.us { grid-template-columns: minmax(0, 1fr); }
  .stwlp .way.us p { grid-column: 1; grid-row: auto; }
}

@media (max-width: 900px) {
  .stwlp .cmp2 { display: block; overflow-x: auto; white-space: nowrap; }
  .stwlp .cmp2 td, .stwlp .cmp2 th { white-space: normal; min-width: 190px; }
}

.stwlp .door {
  background: linear-gradient(135deg, #001429 0%, #0a1929 100%);
  border-radius: 18px; padding: 30px 26px; color: #fff; position: relative; overflow: hidden;
}

.stwlp .door .n {
  font-size: 54px; font-weight: 900; line-height: 1;
  color: rgba(255, 255, 255, 0.14); margin-bottom: 12px;
}
.stwlp .door h3 { font-size: 21px; margin: 0 0 10px; line-height: 1.25; }
.stwlp .door p { color: rgba(255, 255, 255, 0.72); font-size: 15px; line-height: 1.6; margin: 0 0 16px; }
.stwlp .door .out {
  font-size: 13.5px; font-weight: 800; color: #ff9a8b;
  border-top: 1px solid rgba(255, 255, 255, 0.16); padding-top: 14px;
}

@media (max-width: 860px) { .stwlp .answer2 { grid-template-columns: minmax(0, 1fr); } }

@media (max-width: 860px) { .stwlp .beforeafter { grid-template-columns: minmax(0, 1fr); } }

@media (max-width: 900px) { .stwlp .inbox { grid-template-columns: minmax(0, 1fr); } }

@media (max-width: 760px) {
  .stwlp .dl-row { grid-template-columns: 60px 14px minmax(0, 1fr); }
  .stwlp .dl-sum { grid-template-columns: minmax(0, 1fr); }
}

/* =============================================================================
   Section two, design-led. A theme is bought on design, so the section has to
   SHOW pages rather than describe them in sentences. Everything below is drawn
   in CSS: no screenshots, because the demo section further down is where real
   screenshots belong, and a big screenshot up here would do that job twice.
   ============================================================================= */

/* Shared browser chrome for every mock in this section. */
.stwlp .brw { border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid rgba(10,20,40,.12); box-shadow: 0 20px 50px rgba(10, 25, 60, .10); }
.stwlp .brw-bar { height: 30px; background: #f1f3f6; border-bottom: 1px solid rgba(10,20,40,.08); display: flex; align-items: center; gap: 6px; padding: 0 12px; }
.stwlp .brw-bar i { width: 8px; height: 8px; border-radius: 50%; background: #cfd5dd; }
.stwlp .brw-bar .url { margin-left: 10px; height: 12px; border-radius: 6px; background: #e2e6ec; flex: 1; max-width: 220px; }

@media (max-width: 900px) { .stwlp .twoup { grid-template-columns: minmax(0,1fr); } }

/* ---- B: one page, with its parts pointed at ---------------------------- */

.stwlp .anno { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 34px; margin-top: 46px; align-items: center; }
.stwlp .anno-stage { position: relative; }
.stwlp .anno-list { display: grid; gap: 15px; }
.stwlp .anno-item { display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 14px; align-items: start; }
.stwlp .anno-item .n { width: 30px; height: 30px; border-radius: 50%; background: var(--grad); color: #fff; font-size: 13px; font-weight: 900; display: grid; place-items: center; }
.stwlp .anno-item h4 { font-size: 16.5px; margin: 3px 0 4px; color: var(--ink); }
.stwlp .anno-item p { font-size: 14.5px; line-height: 1.55; color: var(--muted); margin: 0; }

.stwlp .pin { position: absolute; width: 26px; height: 26px; border-radius: 50%; background: var(--p); color: #fff; font-size: 12px; font-weight: 900; display: grid; place-items: center; box-shadow: 0 0 0 4px rgba(0,102,255,.22); z-index: 3; }

@media (max-width: 980px) { .stwlp .anno { grid-template-columns: minmax(0,1fr); } }

/* ---- C: the pages that come in the box --------------------------------- */

/*
 * Four across, two rows, eight cells. Seven pages and the card that lists the ones nobody
 * wants a picture of, so the grid finishes square.
 *
 * Whole pages side by side was tried and it does not work: the home page is four times the
 * length of the contact page, so a top aligned row is one tall spike with a hole beneath it.
 * These are the same pages, same width, cut at a common height with a fade where they carry
 * on, which shows far more than the old header crop did and stays tidy.
 */
.stwlp .pageset { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; margin-top: 46px; }
.stwlp .pg { min-width: 0; }
.stwlp .pg .nm { padding: 0 2px 10px; font-size: 14px; font-weight: 800; color: var(--ink); }
.stwlp .pg .nm small { display: block; font-size: 12px; font-weight: 500; color: var(--muted); margin-top: 2px; line-height: 1.4; }

/* ---- 5. Built for prices that are worked out --------------------------- */

@media (max-width: 980px) { .stwlp .built { grid-template-columns: minmax(0,1fr); gap: 32px; } }

/* ---- 6. The looks, as the same page wearing each one -------------------- */

/* ---- 7. Swap any section for another ----------------------------------- */

/* ---- Alternatives, shown big enough to compare -----------------------------
   The old rail drew four 900px files at about 200px wide, which is a strip you
   cannot read, in a section whose whole promise is comparing them. Two across
   at 588px, from 2400px captures, is nearly three times the size.

   Every picture is boxed to the same height with object-fit, because the six
   patterns are not the same shape: the photograph one renders 1296px tall
   against 612 for the quietest, and left to themselves the rows would come out
   ragged. Cover from the top keeps the words in frame for five of them, and the
   photograph one is pulled down because its words sit low in the picture.
   ------------------------------------------------------------------------- */

.stwlp .altgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 46px; }
.stwlp .altcard { margin: 0; }
.stwlp .altcard .shot {
  display: grid; place-items: center; height: 452px; border-radius: 16px; overflow: hidden;
  background: #f4f7fb; border: 1px solid var(--line);
  box-shadow: 0 16px 40px rgba(10, 25, 60, .09);
}
/* Full width, never cover. Cover scales a 2400 wide picture up until it fills 220px of height
   and then cuts the sides off, which took the "Get" off "Get a price" on two of the six. The
   picture is drawn at the card's full width and only ever clipped top and bottom, so the
   heading is always whole. */
.stwlp .altcard .shot img { width: 100%; height: auto; display: block; }
.stwlp .altcard figcaption { padding: 14px 4px 0; }
.stwlp .altcard figcaption b { display: block; font-size: 16px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
.stwlp .altcard figcaption span { display: block; margin-top: 3px; font-size: 14px; line-height: 1.5; color: var(--muted); }

@media (max-width: 820px) {
  .stwlp .altgrid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .stwlp .altcard .shot { height: 330px; }
}

.stwlp .swap-note { margin-top: 22px; font-size: 15px; color: var(--muted); text-align: center; }

/* ---- 8. You change it yourself ----------------------------------------- */

/* ---- 9. The editor, photographed rather than drawn ------------------------
   The drawn editor that was here made the section argue against itself: a
   wireframe of a toolbar is the opposite of "this is the software you already
   know". So it is a real screenshot now, full width, and the frame around it is
   quiet so nothing competes with what is inside.
   ------------------------------------------------------------------------- */

.stwlp .edshot { margin: 46px 0 0; }
.stwlp .edshot img {
  width: 100%; height: auto; display: block; border-radius: 16px;
  border: 1px solid rgba(10, 20, 40, .14);
  box-shadow: 0 30px 70px rgba(10, 25, 60, .18);
}
.stwlp .edshot figcaption {
  margin-top: 16px; text-align: center; font-size: 14.5px; line-height: 1.6; color: var(--muted);
}

.stwlp .yset { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; margin-top: 46px; }
.stwlp .yset .y { padding-top: 20px; border-top: 2px solid rgba(0, 102, 255, .3); }
.stwlp .yset .y b { display: block; font-size: 17px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
.stwlp .yset .y p { margin: 8px 0 0; font-size: 15px; line-height: 1.65; color: var(--muted); }

@media (max-width: 820px) {
  .stwlp .yset { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}

.stwlp .tickset .t svg { width: 22px; height: 22px; color: var(--p); margin-top: 1px; }
.stwlp .tickset .t b { color: var(--ink); }

@media (max-width: 900px) { .stwlp .lookset { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) { .stwlp .lookset { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* The letter's own title. It used to borrow `.ti` from the final band, which is a small
   muted trust line, so the title came out looking like a footnote. */
.stwlp .lt-ti {
  font-size: 12.5px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255, 255, 255, .6); margin: 0 0 18px;
}


/* The buttons in the closing card were sized to their words and drifted apart. */
.stwlp .cta-card .cc-btn { align-self: stretch; justify-content: center; margin-bottom: 14px; }
.stwlp .cta-card .cc-btn:last-of-type { margin-bottom: 22px; }
.stwlp .cc-trust { font-size: 13.5px; color: var(--muted); line-height: 1.6; text-align: center; }

/* The second button in the closing card had no rule of its own, so both buttons came out
   as the same blue and the choice read as one button drawn twice. */
.stwlp .cc-btn.ghost {
  background: transparent; color: var(--p2); box-shadow: none;
  border: 2px solid var(--p);
}
.stwlp .cc-btn.ghost:hover { background: #001429; border-color: #001429; color: #fff; box-shadow: none; }
.stwlp .ed-sel .img { background-size: cover; background-position: center; }


/* The letter's signature, the same shape the other product pages use. */
.stwlp .who b { display: block; font-size: 14.5px; color: #fff; }
.stwlp .who span { font-size: 13px; color: rgba(255, 255, 255, .72); }
.stwlp .signrow .sig { line-height: 1; }

/* ---- The hero, and the answer side of the problem section ---------------
   Both used to be a shop drawn in CSS. A drawn mock is the first thing a visitor sees and
   they read it as the design they would be buying, so a simplified one makes the theme look
   worse than it is. Both now carry a real screenshot of a real demo shop instead.
   ------------------------------------------------------------------------ */

.stwlp .shopstack { position: relative; padding: 0 0 46px 92px; }

/* the shop sitting behind, just enough of it to say there is more than one */
.stwlp .shopstack .behind {
  position: absolute; left: 0; bottom: 0; width: 68%; z-index: 1;
  box-shadow: 0 18px 44px rgba(6, 18, 40, .34);
}
.stwlp .shopstack .front { position: relative; z-index: 2; box-shadow: 0 26px 60px rgba(6, 18, 40, .42); }

/* the label that says which shop this is, so nobody has to guess */
.stwlp .shopstack .tagline {
  position: absolute; right: 0; bottom: 0; z-index: 3;
  background: rgba(255, 255, 255, .96); color: #0a1929; border-radius: 10px;
  padding: 9px 14px; font-size: 12.5px; font-weight: 800; letter-spacing: .01em;
  box-shadow: 0 10px 26px rgba(6, 18, 40, .3);
}
.stwlp .shopstack .tagline small { display: block; font-weight: 600; color: #5b6b7c; font-size: 11.5px; margin-top: 2px; }

@media (max-width: 980px) {
  .stwlp .shopstack { padding: 0 0 30px 0; }
  .stwlp .shopstack .behind { display: none; }
  .stwlp .shopstack .tagline { position: static; display: inline-block; margin-top: 14px; }
}
/* The page cards carry a real screenshot now, so they need framing rather than a canvas. */
.stwlp .pageset { gap: 18px; }
.stwlp .pg { min-width: 0; }
.stwlp .pg .brw { box-shadow: 0 14px 34px rgba(10, 25, 60, .10); }
.stwlp .pg .brw img { width: 100%; height: auto; display: block; }
.stwlp .pg .nm { padding: 0 2px 12px; }

/* Seven page shots in a three across grid leave one stranded on its own row. Four across
   fills as four and three, which reads as a deliberate grid, and the shots are still wide
   enough to see the design rather than guess at it. */
@media (min-width: 1100px) { .stwlp .pageset { gap: 16px; } }
/* The alternatives are photographs of real sections now, not drawings of them. */
.stwlp .swap-opt img { width: 100%; height: auto; display: block; }
.stwlp .swap-opt .cap2 { border-top: 1px solid var(--line); }

/* The product page section carries the real page, which is taller than it is wide. */
/* The look cards carry a screenshot of the same page in each style. */
@media (max-width: 1000px) { .stwlp .lookset { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .stwlp .lookset { grid-template-columns: minmax(0, 1fr); } }

/* =============================================================================
   The looks section, showing what a look actually changes.
   Seven screenshots on their own only prove the colours move. The three things a
   look really changes are the palette, the typeface and how square the corners
   are, so each card now shows all three, and the typeface name is set in the
   typeface it names.
   ============================================================================= */

/* The display faces the seven looks use, self hosted the same way the theme does.
   Only the one weight each card needs, so this costs about 220 KB in total and
   nothing is fetched from anywhere else while the page loads. */
@font-face { font-family: 'SW Barlow Condensed'; src: url('../fonts/barlow-condensed-800-latin.woff2') format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'SW Archivo';          src: url('../fonts/archivo-700-latin.woff2') format('woff2');          font-weight: 700; font-display: swap; }
@font-face { font-family: 'SW Nunito';           src: url('../fonts/nunito-800-latin.woff2') format('woff2');           font-weight: 800; font-display: swap; }
@font-face { font-family: 'SW Space Grotesk';    src: url('../fonts/space-grotesk-700-latin.woff2') format('woff2');    font-weight: 700; font-display: swap; }
@font-face { font-family: 'SW Fraunces';         src: url('../fonts/fraunces-700-latin.woff2') format('woff2');         font-weight: 700; font-display: swap; }
@font-face { font-family: 'SW Bitter';           src: url('../fonts/bitter-700-latin.woff2') format('woff2');           font-weight: 700; font-display: swap; }
@font-face { font-family: 'SW Figtree';          src: url('../fonts/figtree-800-latin.woff2') format('woff2');          font-weight: 800; font-display: swap; }

/* ---- the three things a look changes, shown once above the grid ---------- */

@media (max-width: 900px) { .stwlp .whatchanges { grid-template-columns: minmax(0, 1fr); } }

/* ---- each look card, with its own palette, typeface and corner ---------- */

/* the typefaces, one per look */
.stwlp .face-barlow  { font-family: 'SW Barlow Condensed', 'Arial Narrow', sans-serif; font-weight: 800; letter-spacing: .01em; text-transform: uppercase; }
.stwlp .face-archivo { font-family: 'SW Archivo', 'Helvetica Neue', sans-serif; font-weight: 700; }
.stwlp .face-nunito  { font-family: 'SW Nunito', 'Trebuchet MS', sans-serif; font-weight: 800; }
.stwlp .face-grotesk { font-family: 'SW Space Grotesk', monospace; font-weight: 700; }
.stwlp .face-fraunces{ font-family: 'SW Fraunces', Georgia, serif; font-weight: 700; }
.stwlp .face-bitter  { font-family: 'SW Bitter', Rockwell, Georgia, serif; font-weight: 700; }
.stwlp .face-figtree { font-family: 'SW Figtree', 'Segoe UI', sans-serif; font-weight: 800; }

/* ---- and the line that says you are not stuck with any of it ------------ */

.stwlp .looks-note {
  margin-top: 30px; text-align: center; font-size: 15.5px; line-height: 1.7;
  color: rgba(234, 242, 255, .72); max-width: 760px; margin-left: auto; margin-right: auto;
}
.stwlp .looks-note b { color: #fff; }

/* =============================================================================
   Hero options, 22 August 2026.
   The browser-window frame reads as a mockup, and a mockup in the first thing a
   visitor sees makes the work look like a picture of work. None of these three
   uses a frame.
   ============================================================================= */

/* ---- A: the shop runs off the right edge -------------------------------- */

.stwlp .hero.hero-bleed { padding-right: 0; }
.stwlp .hero.hero-bleed .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 54px; max-width: none; padding-left: max(40px, calc((100vw - 1240px) / 2)); }
.stwlp .hero-bleedshot { position: relative; }
.stwlp .hero-bleedshot img {
  width: 100%; height: auto; display: block;
  border-radius: 18px 0 0 18px;
  box-shadow: -30px 40px 90px rgba(0, 8, 24, .55);
}
.stwlp .hero-bleedshot .who {
  position: absolute; left: 22px; bottom: 22px; z-index: 2;
  background: rgba(10, 20, 36, .78); backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .16); border-radius: 10px;
  padding: 9px 14px; font-size: 12.5px; font-weight: 800; color: #fff;
}
.stwlp .hero-bleedshot .who small { display: block; font-weight: 500; color: rgba(255,255,255,.66); font-size: 11.5px; margin-top: 2px; }

@media (max-width: 980px) {
  .stwlp .hero.hero-bleed { padding-right: 40px; }
  .stwlp .hero.hero-bleed .hero-grid { grid-template-columns: minmax(0, 1fr); padding-left: 0; }
  .stwlp .hero-bleedshot img { border-radius: 16px; }
}

/* ---- B: words only, then the shops do the talking ----------------------- */

.stwlp .hero.hero-words { padding: 170px 40px 86px; text-align: center; }
.stwlp .hero.hero-words .hero-grid { grid-template-columns: minmax(0, 1fr); max-width: 980px; gap: 0; }
.stwlp .hero.hero-words h1 { font-size: 74px; margin-bottom: 26px; }
.stwlp .hero.hero-words .hero-sub { max-width: 720px; margin-left: auto; margin-right: auto; font-size: 21px; }
.stwlp .hero.hero-words .hero-cta { justify-content: center; }
.stwlp .hero.hero-words .herostudio { justify-content: center; }
.stwlp .hero.hero-words .hero-badge { margin-left: auto; margin-right: auto; }

/* the strip of shops that sits straight underneath, cropped to their tops */
.stwlp .heroband { position: relative; margin-top: 64px; }
.stwlp .heroband-rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.stwlp .heroband-rail figure { margin: 0; border-radius: 14px 14px 0 0; overflow: hidden; box-shadow: 0 -8px 40px rgba(0, 8, 24, .4); }
.stwlp .heroband-rail img { width: 100%; height: 190px; object-fit: cover; object-position: top center; display: block; }
.stwlp .heroband::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 70px;
  background: linear-gradient(180deg, rgba(6, 33, 63, 0), #06213f);
  pointer-events: none;
}

@media (max-width: 900px) {
  .stwlp .hero.hero-words h1 { font-size: 44px; }
  .stwlp .heroband-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- C: one shop, full width under the words ---------------------------- */

.stwlp .hero.hero-wide { padding: 170px 0 0; }
.stwlp .hero.hero-wide .hero-grid { grid-template-columns: minmax(0, 1fr); max-width: 1100px; gap: 0; padding: 0 40px; }
.stwlp .hero.hero-wide h1 { font-size: 66px; max-width: 900px; }
.stwlp .hero.hero-wide .hero-sub { max-width: 640px; }
.stwlp .herowide {
  margin-top: 56px; position: relative; z-index: 2;
  max-width: 1320px; margin-left: auto; margin-right: auto; padding: 0 40px;
}
.stwlp .herowide img {
  width: 100%; height: 420px; object-fit: cover; object-position: top center;
  display: block; border-radius: 20px 20px 0 0;
  box-shadow: 0 -10px 70px rgba(0, 8, 24, .5);
}
.stwlp .herowide .who {
  position: absolute; left: 62px; bottom: 22px;
  background: rgba(10, 20, 36, .8); backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .16); border-radius: 10px;
  padding: 9px 14px; font-size: 12.5px; font-weight: 800; color: #fff;
}
.stwlp .herowide .who small { display: block; font-weight: 500; color: rgba(255,255,255,.66); font-size: 11.5px; margin-top: 2px; }

@media (max-width: 900px) {
  .stwlp .hero.hero-wide h1 { font-size: 44px; }
  .stwlp .herowide { padding: 0 20px; }
  .stwlp .herowide img { height: 240px; }
  .stwlp .herowide .who { left: 34px; }
}

/* =============================================================================
   Hero visuals, third attempt. The two column shape stays, because Hamza said
   the left and right was right. What goes on the right must not be a shop page:
   drawn, it gets mistaken for the design, and photographed it reads as a mockup.
   So each of these shows the idea the theme is built on, a price being worked
   out, rather than a website.
   ============================================================================= */

/* ---- B: a photograph with the price on it ------------------------------- */

.stwlp .heroshot { position: relative; border-radius: 20px; overflow: hidden; box-shadow: 0 30px 70px rgba(0, 8, 24, .5); }
.stwlp .heroshot > img { width: 100%; height: 470px; object-fit: cover; display: block; }
.stwlp .heroshot::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(200deg, rgba(0, 12, 28, 0) 40%, rgba(0, 12, 28, .72) 100%);
}
.stwlp .heroshot .quote {
  position: absolute; left: 22px; right: 22px; bottom: 22px; z-index: 2;
  background: rgba(255, 255, 255, .96); border-radius: 14px; padding: 16px 18px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: center;
}
.stwlp .heroshot .quote .lab { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #7b8794; }
.stwlp .heroshot .quote .what { font-size: 15px; font-weight: 700; color: #0f1d2e; }
.stwlp .heroshot .quote .val { font-size: 32px; font-weight: 900; color: #0f1d2e; line-height: 1; grid-row: 1 / 3; }

/* ---- C: the price built up line by line --------------------------------- */

.stwlp .herosum {
  background: #fff; border-radius: 22px; padding: 26px 26px 24px; color: #1a1a1a;
  box-shadow: 0 30px 70px rgba(0, 8, 24, .45);
}
.stwlp .herosum .top { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #7b8794; margin-bottom: 16px; }
.stwlp .herosum .ln { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: baseline; padding: 11px 0; }
.stwlp .herosum .ln + .ln { border-top: 1px solid #eef2f7; }
.stwlp .herosum .ln b { font-weight: 700; font-size: 15.5px; color: #0f1d2e; }
.stwlp .herosum .ln small { display: block; font-size: 12.5px; font-weight: 500; color: #7b8794; margin-top: 2px; }
.stwlp .herosum .ln i { font-style: normal; font-weight: 800; font-size: 15.5px; color: var(--p); white-space: nowrap; }
.stwlp .herosum .tot {
  margin-top: 14px; padding-top: 16px; border-top: 2px dashed rgba(0, 102, 255, .2);
  display: flex; justify-content: space-between; align-items: baseline;
}
.stwlp .herosum .tot span { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #7b8794; }
.stwlp .herosum .tot b { font-size: 40px; font-weight: 900; letter-spacing: -.02em; color: #0f1d2e; }
.stwlp .herosum .foot { margin-top: 14px; font-size: 12.5px; color: #7b8794; line-height: 1.5; }

/* =============================================================================
   Hero visuals, fourth attempt, and the first that is about the theme.
   Every version so far sold a price being worked out. That is the calculator's
   pitch and the calculator is a separate product. StoreWise is a theme, so the
   hero has to show design: colour, type, corners, the raw material a buyer is
   paying for.
   ============================================================================= */

/* ---- A: the design system, on a card ------------------------------------
   Picked by Hamza, then asked for more in it. Every value below is real: the
   palette names and colours, the spacing steps and the corner radii all come
   out of the theme's own theme.json and styles/*.json, and the tab row names
   the look those values belong to.
   ------------------------------------------------------------------------ */

.stwlp .hsys {
  background: #fff; border-radius: 22px; color: #1a1a1a;
  box-shadow: 0 30px 70px rgba(0, 8, 24, .45); overflow: hidden;
}

/* the tab row, so the card says which look it is showing */
.stwlp .hsys-tabs { display: flex; gap: 6px; padding: 14px 16px; background: #f6f9fd; border-bottom: 1px solid #e8eef6; overflow: hidden; }
.stwlp .hsys-tabs span {
  font-size: 11.5px; font-weight: 700; color: #7b8794; background: #fff;
  border: 1px solid #e2e9f2; border-radius: 999px; padding: 6px 12px; white-space: nowrap;
}
.stwlp .hsys-tabs span.on { background: #0f1d2e; border-color: #0f1d2e; color: #fff; }
.stwlp .hsys-tabs span.rest { border-style: dashed; color: #9aa7b6; }

.stwlp .hsys-body { padding: 22px 24px 24px; }
.stwlp .hsys .row2 + .row2 { margin-top: 20px; padding-top: 18px; border-top: 1px solid #eef2f7; }
.stwlp .hsys .k {
  font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: #7b8794; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: baseline;
}
.stwlp .hsys .k em { font-style: normal; font-weight: 600; letter-spacing: 0; text-transform: none; font-size: 11.5px; color: #9aa7b6; }

/* colours, with the names the buyer sees in the editor */
.stwlp .hsys .pal { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.stwlp .hsys .pal div { min-width: 0; }
.stwlp .hsys .pal i { display: block; height: 44px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(10, 20, 40, .1); }
.stwlp .hsys .pal b { display: block; font-size: 10.5px; font-weight: 700; color: #64748b; margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* type, with the face named on the right the way a specimen does */
.stwlp .hsys .faces { display: grid; gap: 9px; }
.stwlp .hsys .faces div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: baseline; }
.stwlp .hsys .faces b { font-size: 23px; line-height: 1.05; color: #0f1d2e; font-weight: 800; }
.stwlp .hsys .faces i { font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #9aa7b6; white-space: nowrap; }

/* corners, shown on the shapes they actually apply to */
.stwlp .hsys .corners { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.stwlp .hsys .corners i {
  width: 46px; height: 46px; background: #eef3f9; box-shadow: inset 0 0 0 1px #dbe4ee;
  display: grid; place-items: center; font-style: normal; font-size: 10.5px; font-weight: 800; color: #7b8794;
}
.stwlp .hsys .corners .btn3 {
  margin-left: auto; background: #FFC300; color: #121316; font-size: 12.5px; font-weight: 800;
  padding: 12px 18px; white-space: nowrap;
}

/* the spacing steps, drawn at their real proportions */
.stwlp .hsys .spacing { display: flex; gap: 8px; align-items: flex-end; }
.stwlp .hsys .spacing i { flex: 1; background: linear-gradient(180deg, #cfe0f5, #a9c8ea); border-radius: 3px 3px 0 0; display: block; }

.stwlp .hsys-foot {
  padding: 14px 24px 16px; background: #f6f9fd; border-top: 1px solid #e8eef6;
  font-size: 12px; color: #7b8794; line-height: 1.5;
}
.stwlp .hsys-foot b { color: #0f1d2e; }

/* ---- B: the palettes as a colour field ---------------------------------- */

.stwlp .hpal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.stwlp .hpal .sw { border-radius: 16px; overflow: hidden; box-shadow: 0 18px 44px rgba(0, 8, 24, .35); }
.stwlp .hpal .sw .band { height: 92px; display: grid; grid-template-columns: 2fr 1fr 1fr; }
.stwlp .hpal .sw .band span { display: block; }
.stwlp .hpal .sw .nm { padding: 11px 13px; background: #fff; }
.stwlp .hpal .sw .nm b { display: block; font-size: 14px; font-weight: 800; color: #0f1d2e; }
.stwlp .hpal .sw .nm small { display: block; font-size: 12px; color: #7b8794; margin-top: 2px; }
.stwlp .hpal .more2 {
  border: 2px dashed rgba(255, 255, 255, .28); border-radius: 16px;
  display: grid; place-items: center; text-align: center; padding: 20px;
  font-size: 13.5px; font-weight: 700; color: rgba(255, 255, 255, .78); line-height: 1.5;
}

/* ---- C: a type specimen ------------------------------------------------- */

.stwlp .hspec { background: #fff; border-radius: 22px; padding: 30px 30px 26px; color: #1a1a1a; box-shadow: 0 30px 70px rgba(0, 8, 24, .45); }
.stwlp .hspec .big { font-size: 76px; line-height: .92; color: #0f1d2e; letter-spacing: -.01em; }
.stwlp .hspec .line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: baseline; padding: 13px 0; }
.stwlp .hspec .line + .line { border-top: 1px solid #eef2f7; }
.stwlp .hspec .line em { font-style: normal; font-size: 23px; color: #0f1d2e; }
.stwlp .hspec .line i { font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #7b8794; white-space: nowrap; }
.stwlp .hspec .foot2 { margin-top: 18px; padding-top: 16px; border-top: 1px solid #eef2f7; font-size: 12.5px; color: #7b8794; line-height: 1.55; }

/* The design system card on a narrow screen. Five colour names in a row with nowrap set a
   min-content wider than a phone, which dragged the whole hero grid out with it. */
@media (max-width: 620px) {
  .stwlp .hsys-tabs { flex-wrap: wrap; }
  .stwlp .hsys .pal { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 8px; }
  .stwlp .hsys .pal b { white-space: normal; }
  .stwlp .hsys .k { flex-direction: column; gap: 3px; }
  .stwlp .hsys .k em { font-size: 11px; }
  .stwlp .hsys .corners .btn3 { margin-left: 0; }
  .stwlp .hsys .faces b { font-size: 20px; }
}

/* The parts of a finished shop a buyer never sees, and would never think to ask for. Sits
   under the page grid so the section reads as "the whole thing is done", which is the
   promise, rather than "here are some pages". */
.stwlp a.go {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--grad); color: #fff; font-weight: 800; font-size: 14.5px;
  padding: 12px 18px; border-radius: 10px; text-decoration: none; align-self: flex-start;
}
.stwlp a.go:hover { filter: brightness(1.06); color: #fff; text-decoration: none; }

/* ---- B: one shop a row, the page beside the words ----------------------- */

/* The picture keeps the wider column on both sides. Swapping only the order put the
   flipped rows' pictures into the narrow track, so alternate shops were 537px wide against
   617px and the section read as broken rather than alternating. */
.stwlp .shoprow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 54px; align-items: center; }
.stwlp .shoprow.flip { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.stwlp .shoprow.flip .rowshot { order: -1; }
.stwlp .shoprow + .shoprow { margin-top: 46px; padding-top: 46px; border-top: 1px solid var(--line); }

/* No fade at the foot. It was 190px of the picture turned into white, which is both the shadow
   Hamza did not want and the empty white space he asked about: the same thing seen twice. A
   cropped picture can just stop. With the fade gone the bottom corners round again, because the
   only reason they were square was that a curve and a fade fight each other. */
/* No fixed height. 520px was clipping every picture at a row nobody chose, which on all four
   landed inside the band of empty padding the next section of the shop page starts with. The
   pictures are cut at their own clean line now, so the card is exactly the picture. */
.stwlp .rowshot {
  position: relative; border-radius: 16px; overflow: hidden;
  box-shadow: 0 26px 54px rgba(10, 25, 60, .18);
}
.stwlp .rowshot img { width: 100%; height: auto; display: block; }
.stwlp .rowtext .tr2 { font-size: 13px; font-weight: 800; color: var(--p); letter-spacing: .02em; margin-bottom: 8px; }
.stwlp .rowtext h3 { font-size: 30px; font-weight: 800; margin: 0 0 12px; line-height: 1.15; }
.stwlp .rowtext p { font-size: 16px; line-height: 1.7; color: var(--muted); margin: 0 0 20px; }
.stwlp .rowtext .pal2 { display: flex; gap: 7px; margin-bottom: 22px; }
.stwlp .rowtext .pal2 span { width: 26px; height: 26px; border-radius: 7px; box-shadow: inset 0 0 0 1px rgba(10,20,40,.12); }

@media (max-width: 900px) {
  .stwlp .shoprow { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .stwlp .shoprow.flip .rowshot { order: 0; }
}

@media (max-width: 900px) { .stwlp .stage2 { grid-template-columns: minmax(0, 1fr); } }
/* The rows sit inside the section with the same space above them the other sections use. */
.stwlp .shoprows { margin-top: 46px; }

/* The page cards in section four still use the browser frame, so it keeps its rules. */
.stwlp .brw.shot-frame .brw-bar { background: #f4f6f9; }
.stwlp .brw.shot-frame img { width: 100%; height: auto; display: block; }

/* The rest of the shop designs, once there are more than the rows can carry.
   A row is about 600px tall, so a page of them stops being a page at around five. Past
   that the extras drop into this compact grid and the section stops growing, which matters
   because new shop designs keep arriving. */
.stwlp .shopmore { margin-top: 46px; padding-top: 40px; border-top: 1px solid var(--line); }
.stwlp .shopmore-h { font-size: 19px; font-weight: 800; color: var(--ink); margin-bottom: 20px; }
.stwlp .shopgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 18px; }
.stwlp .sg {
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff;
  text-decoration: none; display: block; transition: transform .18s ease, box-shadow .18s ease;
}
.stwlp .sg:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(10, 25, 60, .12); }
.stwlp .sg .sgshot { height: 140px; overflow: hidden; position: relative; background: #eef2f7; }
.stwlp .sg .sgshot img { width: 100%; height: auto; display: block; }
.stwlp .sg .sgm { padding: 12px 14px 14px; }
.stwlp .sg .sgm b { display: block; font-size: 15px; font-weight: 800; color: var(--ink); }
.stwlp .sg .sgm small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 3px; }

.stwlp .shopall { margin-top: 30px; text-align: center; }
.stwlp .shopall p { font-size: 15px; color: var(--muted); margin: 0 0 16px; }

@media (max-width: 900px) { .stwlp .tsplit { grid-template-columns: minmax(0, 1fr); gap: 30px; } }

/* ---- C: a band of trades that keeps moving ------------------------------ */

.stwlp .tband { margin-top: 46px; position: relative; }
.stwlp .tband .lane { display: flex; gap: 12px; width: max-content; animation: sw-lane 46s linear infinite; }
.stwlp .tband .lane.back { animation-duration: 58s; animation-direction: reverse; margin-top: 12px; }
.stwlp .tband .lane span {
  font-size: 15px; font-weight: 600; color: #33475b; background: #fff;
  border: 1px solid var(--line); border-radius: 999px; padding: 11px 20px; white-space: nowrap;
}
.stwlp .tband .lane span.on { background: var(--grad); color: #fff; font-weight: 800; border-color: transparent; }
.stwlp .tband .fade-l, .stwlp .tband .fade-r { position: absolute; top: 0; bottom: 0; width: 120px; z-index: 2; pointer-events: none; }
.stwlp .tband .fade-l { left: 0; background: linear-gradient(90deg, #fff, rgba(255,255,255,0)); }
.stwlp .tband .fade-r { right: 0; background: linear-gradient(270deg, #fff, rgba(255,255,255,0)); }
@keyframes sw-lane { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .stwlp .tband .lane { animation: none; } }

/* the band needs its own clipping wrapper so the lanes do not widen the page */
.stwlp .tband-clip { overflow: hidden; }
/* The two halves of "what you do not have to think about": the search engine work and the
   security work. Both are real and neither had a word on the page before. */

/* the import band: picking a demo brings its design with it */

/* =============================================================================
   "What you do not have to do", four ways. What is on the page is six paragraphs
   in two columns, which is a wall of small text in the middle of a page whose
   job is to be looked at. Every version below cuts the words hard.
   ============================================================================= */

/* ---- A: small tiles, three across --------------------------------------- */

.stwlp .dtiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 14px; margin-top: 40px; }
.stwlp .dt {
  border: 1px solid var(--line); border-radius: 14px; padding: 20px 18px; background: #fff;
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 13px; align-items: center;
}
.stwlp .dt .i5 { width: 34px; height: 34px; border-radius: 10px; background: rgba(0,102,255,.09); color: var(--p); display: grid; place-items: center; }
.stwlp .dt .i5 svg { width: 17px; height: 17px; }
.stwlp .dt b { display: block; font-size: 14.5px; font-weight: 800; color: var(--ink); line-height: 1.3; }
.stwlp .dt small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 3px; }

/* ---- B: two lines of ticks, no boxes ------------------------------------ */

.stwlp .dticks { margin-top: 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 14px 30px; }
.stwlp .dticks div { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 11px; align-items: baseline; font-size: 15.5px; color: #33475b; }
.stwlp .dticks div svg { width: 20px; height: 20px; color: var(--p); }
.stwlp .dticks div b { color: var(--ink); font-weight: 700; }

/* ---- C: one dark panel, two headings, short lines ------------------------ */

.stwlp .dpanel {
  margin-top: 40px; border-radius: 20px; padding: 36px 38px 34px; color: #eaf2ff;
  background: linear-gradient(150deg, #001429 0%, #0a1929 60%, #071b34 100%);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 34px;
}
.stwlp .dpanel h4 { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #7cc4ff; margin: 0 0 16px; }
.stwlp .dpanel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.stwlp .dpanel li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 11px; align-items: baseline; font-size: 15.5px; line-height: 1.45; color: rgba(234,242,255,.82); }
.stwlp .dpanel li svg { width: 18px; height: 18px; color: #7cc4ff; }
.stwlp .dpanel li b { color: #fff; font-weight: 700; }

/* ---- D: a strip of chips, one line each --------------------------------- */

.stwlp .dstrip { margin-top: 40px; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: #fff; }
.stwlp .dstrip .dhead {
  padding: 16px 22px; background: #f6f9fd; border-bottom: 1px solid var(--line);
  font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
}
.stwlp .dstrip .dchips { display: flex; flex-wrap: wrap; gap: 10px; padding: 20px 22px 22px; }
.stwlp .dstrip .dchips span {
  display: inline-flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 600; color: #33475b;
  border: 1px solid var(--line); border-radius: 999px; padding: 9px 16px;
}
.stwlp .dstrip .dchips span svg { width: 16px; height: 16px; color: var(--p); flex: none; }

/* =============================================================================
   "Already done", drawn instead of described.
   Hamza: "its not about fewer words its about good svg presentations etc
   mockups etc". Every point here is something a shop owner has seen with their
   own eyes: a Google result, a link pasted into WhatsApp, the WordPress updates
   screen, the network panel. So each one is drawn as the thing itself.
   ============================================================================= */

.stwlp .dm { background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; }
.stwlp .dm .dm-stage {
  padding: 24px 24px 26px; background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.9), rgba(255,255,255,0) 70%),
    linear-gradient(160deg, #eef3fa 0%, #e3ebf6 100%);
  flex: 1; display: flex; align-items: center; justify-content: center;
}
.stwlp .dm .dm-meta { padding: 18px 22px 20px; border-top: 1px solid var(--line); }
.stwlp .dm .dm-meta b { display: block; font-size: 16px; font-weight: 800; color: var(--ink); }
.stwlp .dm .dm-meta small { display: block; font-size: 13.5px; line-height: 1.55; color: var(--muted); margin-top: 4px; }

/* ---- the Google result -----------------------------------------------------
   Drawn as the search page a shop owner would recognise: the query still in the
   box, the favicon and breadcrumb above the blue title, the rating line and a
   People also ask block. Google's own type stack and colours, because a mockup
   in the wrong typeface reads as a drawing of a search result.
   -------------------------------------------------------------------------- */

.stwlp .g-win {
  width: 100%; max-width: 440px; background: #fff; border-radius: 12px; overflow: hidden;
  box-shadow: 0 14px 40px rgba(12, 28, 56, .16);
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
.stwlp .g-top { padding: 14px 16px 12px; display: flex; align-items: center; gap: 12px; }
.stwlp .g-logo { font-size: 17px; font-weight: 700; letter-spacing: -.5px; flex: none; }
.stwlp .g-logo i { font-style: normal; }
.stwlp .g-box {
  flex: 1; min-width: 0; border: 1px solid #dfe1e5; border-radius: 20px; height: 32px;
  display: flex; align-items: center; gap: 8px; padding: 0 12px; font-size: 12.5px; color: #202124;
}
.stwlp .g-box svg { width: 13px; height: 13px; color: #9aa0a6; flex: none; }
.stwlp .g-tabs { display: flex; gap: 18px; padding: 0 16px; font-size: 11px; color: #5f6368; border-bottom: 1px solid #ebedef; }
.stwlp .g-tabs span { padding-bottom: 9px; }
.stwlp .g-tabs span.on2 { color: #1a73e8; font-weight: 600; position: relative; }
.stwlp .g-tabs span.on2::after { content: ""; position: absolute; left: -2px; right: -2px; bottom: 0; height: 2px; background: #1a73e8; }
.stwlp .g-body { padding: 14px 16px 16px; }

.stwlp .g-line { display: flex; align-items: center; gap: 9px; margin-bottom: 4px; }
.stwlp .g-fav2 {
  width: 26px; height: 26px; border-radius: 50%; background: #121316; color: #FFC300;
  font-size: 11px; font-weight: 900; display: grid; place-items: center; flex: none;
  font-family: "Inter", sans-serif;
}
.stwlp .g-line div { min-width: 0; }
.stwlp .g-line b { display: block; font-size: 12.5px; font-weight: 400; color: #202124; line-height: 1.2; }
.stwlp .g-line small { display: block; font-size: 11.5px; color: #4d5156; line-height: 1.3; }
.stwlp .g-title { font-size: 17px; line-height: 1.3; color: #1a0dab; margin: 3px 0; }
.stwlp .g-desc { font-size: 12.5px; line-height: 1.55; color: #4d5156; }
.stwlp .g-rate { display: flex; align-items: center; gap: 6px; margin-top: 7px; font-size: 12px; color: #70757a; }
.stwlp .g-rate .st2 { display: flex; gap: 1.5px; }
.stwlp .g-rate .st2 i { width: 10px; height: 10px; background: #fbbc04; clip-path: polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); }
.stwlp .g-sitelinks { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 20px; margin-top: 10px; }
.stwlp .g-sitelinks span { font-size: 12.5px; color: #1a0dab; }
.stwlp .g-paa { margin-top: 15px; border-top: 1px solid #ebedef; padding-top: 12px; }
.stwlp .g-paa .paa-h { font-size: 14px; color: #202124; margin-bottom: 4px; }
.stwlp .g-paa .q2 { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: #202124; padding: 9px 0; border-bottom: 1px solid #ebedef; }
.stwlp .g-paa .q2 svg { width: 12px; height: 12px; color: #70757a; }

/* ---- the link pasted into a chat -------------------------------------------
   On the wallpaper colour a phone actually uses, with a real photograph rather
   than a rectangle, a proper bubble tail and blue read ticks.
   -------------------------------------------------------------------------- */

.stwlp .chat2 {
  width: 100%; max-width: 340px; background: #efeae2; border-radius: 14px; padding: 16px 14px 18px;
  box-shadow: 0 14px 40px rgba(12, 28, 56, .16);
}
.stwlp .chat2 .who2 { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.stwlp .chat2 .who2 i { width: 26px; height: 26px; border-radius: 50%; background: #c9d4cd; display: block; flex: none; }
.stwlp .chat2 .who2 b { font-size: 12.5px; color: #3b4a54; font-weight: 600; }
.stwlp .chat2 .bub2 {
  background: #d9fdd3; border-radius: 10px 2px 10px 10px; padding: 4px 4px 5px; margin-left: auto;
  max-width: 268px; position: relative; box-shadow: 0 1px 1px rgba(11,20,26,.13);
}
.stwlp .chat2 .bub2::after {
  content: ""; position: absolute; top: 0; right: -7px; width: 8px; height: 13px; background: #d9fdd3;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.stwlp .chat2 .prev2 { background: rgba(255,255,255,.62); border-radius: 7px; overflow: hidden; }
.stwlp .chat2 .prev2 img { width: 100%; height: auto; display: block; }
.stwlp .chat2 .prev2 .pt2 { padding: 7px 9px 8px; }
.stwlp .chat2 .prev2 .pt2 b { display: block; font-size: 12px; font-weight: 600; color: #111b21; line-height: 1.3; }
.stwlp .chat2 .prev2 .pt2 small { display: block; font-size: 11px; color: #667781; margin-top: 2px; line-height: 1.35; }
.stwlp .chat2 .prev2 .pt2 i { display: block; font-style: normal; font-size: 10.5px; color: #8696a0; margin-top: 4px; text-transform: uppercase; }
.stwlp .chat2 .txt2 { font-size: 12.5px; color: #111b21; padding: 5px 6px 0; line-height: 1.4; }
.stwlp .chat2 .tm2 { display: flex; align-items: center; justify-content: flex-end; gap: 3px; font-size: 10.5px; color: #667781; padding: 2px 6px 0; }
.stwlp .chat2 .tm2 svg { width: 14px; height: 14px; color: #53bdeb; }

/* ---- what the browser had to fetch ------------------------------------------
   The network panel a developer would show them, with the domain column that
   makes the point: every row is the shop's own address.
   -------------------------------------------------------------------------- */

.stwlp .net2 {
  width: 100%; max-width: 430px; background: #fff; border-radius: 12px; overflow: hidden;
  box-shadow: 0 14px 40px rgba(12, 28, 56, .16); font-family: "Inter", sans-serif;
}
.stwlp .net2 .nt { background: #f6f8fa; border-bottom: 1px solid #e6eaef; padding: 11px 14px; display: flex; align-items: center; gap: 9px; }
.stwlp .net2 .nt b { font-size: 11.5px; font-weight: 700; color: #4b5a6b; }
.stwlp .net2 .nt .dot2 { width: 8px; height: 8px; border-radius: 50%; background: #dd3c3c; flex: none; }
.stwlp .net2 .nt .pill2 { margin-left: auto; font-size: 10.5px; font-weight: 700; color: #0a7c42; background: #e6f6ed; border-radius: 999px; padding: 4px 9px; }
.stwlp .net2 table { width: 100%; border-collapse: collapse; }
.stwlp .net2 th { font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #98a4b3; text-align: left; padding: 9px 14px 7px; border-bottom: 1px solid #eef2f7; }
.stwlp .net2 td { font-size: 11.5px; color: #4b5a6b; padding: 7px 14px; border-bottom: 1px solid #f4f7fa; white-space: nowrap; }
.stwlp .net2 td.nm2 { color: #0f1d2e; font-weight: 600; }
.stwlp .net2 td.dom { color: #0a7c42; }
.stwlp .net2 td.bar5 { width: 38%; }
.stwlp .net2 td.bar5 i { display: block; height: 7px; border-radius: 4px; background: linear-gradient(90deg, #0066FF, #00A3FF); }
.stwlp .net2 .nfoot { padding: 12px 14px 14px; background: #f6f8fa; border-top: 1px solid #e6eaef; font-size: 11.5px; color: #4b5a6b; line-height: 1.5; }
.stwlp .net2 .nfoot b { color: #0f1d2e; }

/* ---- the WordPress updates screen -------------------------------------------
   The real admin: the dark sidebar down the side, the blue notice, a checkbox
   and the theme's own thumbnail.
   -------------------------------------------------------------------------- */

/* ---- layouts -------------------------------------------------------------- */

.stwlp .dgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 22px; margin-top: 44px; }
.stwlp .dgrid.two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); }

.stwlp .drows { margin-top: 44px; }
.stwlp .drow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px; align-items: center; }
.stwlp .drow + .drow { margin-top: 34px; padding-top: 34px; border-top: 1px solid var(--line); }
.stwlp .drow.flip2 .drow-art { order: -1; }
.stwlp .drow-art {
  border-radius: 16px; padding: 30px; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.9), rgba(255,255,255,0) 70%), linear-gradient(160deg, #eef3fa, #e3ebf6);
}
.stwlp .drow-txt h4 { font-size: 24px; font-weight: 800; color: var(--ink); margin: 0 0 10px; line-height: 1.2; }
.stwlp .drow-txt p { font-size: 16px; line-height: 1.7; color: var(--muted); margin: 0; }

@media (max-width: 900px) {
  .stwlp .drow { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .stwlp .drow.flip2 .drow-art { order: 0; }
}

/* =============================================================================
   SPEED, shown the way every buyer already reads it: the PageSpeed report card.

   Two dials and the three Core Web Vitals. The numbers are Lighthouse on the demo
   shop's home page, served over HTTP/2 so the measurement is the theme and not a
   slow server. Mobile 96 four runs running, desktop 100, blocking time 0ms,
   layout shift 0.002. Measured 25 August 2026.

   Green is #0CCE6B because that is the colour a passing score is, everywhere, and
   a speed report drawn in the wrong colour does not read as a speed report.
   ============================================================================= */

.stwlp .psi {
  width: 100%; margin: 46px auto 0; background: #fff;
  border-radius: 20px; overflow: hidden; box-shadow: 0 26px 70px rgba(4, 14, 32, .34);
}

/* ---- the bar across the top: what was tested, and when ------------------- */

.stwlp .psi-top {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 16px 24px; background: #f6f8fa; border-bottom: 1px solid #e6eaef;
}
.stwlp .psi-top .addr {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  font-size: 13px; font-weight: 600; color: #33475b;
}
.stwlp .psi-top .addr svg { width: 15px; height: 15px; color: #0a7c42; flex: none; }
.stwlp .psi-top .when { margin-left: auto; font-size: 12px; color: #7b8794; }

/* ---- the two dials ------------------------------------------------------- */

/*
 * As many columns as there are dials, not four.
 *
 * It was a fixed four while the card showed four scores. The speed scores came off on
 * 9 September 2026, because they move with the machine that measures them and the card
 * invites the reader to measure it themselves, so two were left sitting in a four wide grid
 * with half the row empty. `auto-fit` lets the row hold whatever the card is honest about
 * today without anyone remembering this line.
 *
 * The minimum is a real width, not zero. `minmax(0, 1fr)` with `auto-fit` gives the browser
 * no reason to stop, so it laid out two dials and several hundred empty tracks behind them.
 */
.stwlp .psi-dials { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.stwlp .psi-dial { padding: 26px 14px 24px; text-align: center; border-right: 1px solid #eef2f7; }
.stwlp .psi-dial:last-child { border-right: none; }
.stwlp .psi-dial .ring { display: block; width: 108px; height: 108px; margin: 0 auto; position: relative; }
.stwlp .psi-dial .ring svg { width: 108px; height: 108px; transform: rotate(-90deg); }
.stwlp .psi-dial .ring circle { fill: none; stroke-width: 7; stroke-linecap: round; }
.stwlp .psi-dial .ring .bg { stroke: #e3f7ec; }
.stwlp .psi-dial .ring .fg { stroke: #0CCE6B; }
.stwlp .psi-dial .ring b {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 34px; font-weight: 800; color: #0a7c42; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.stwlp .psi-dial .who3 {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 14px;
  font-size: 14px; font-weight: 800; color: var(--ink);
}
.stwlp .psi-dial .who3 svg { width: 16px; height: 16px; color: #7b8794; }
.stwlp .psi-dial .lbl3 { display: block; margin-top: 4px; font-size: 12.5px; color: #7b8794; }

/* ---- the three Core Web Vitals ------------------------------------------ */

.stwlp .psi-vitals { border-top: 1px solid #eef2f7; }
.stwlp .psi-vh {
  padding: 15px 24px 12px; font-size: 11px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: #8b98a6;
}
.stwlp .psi-three {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid #f4f7fa;
}
.stwlp .psi-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px;
  align-content: start; padding: 16px 24px 18px; border-right: 1px solid #f4f7fa;
}
.stwlp .psi-row:last-child { border-right: none; }
.stwlp .psi-row .nm5 { display: flex; align-items: center; gap: 9px; min-width: 0; }
.stwlp .psi-row .tick { width: 18px; height: 18px; border-radius: 50%; background: #0CCE6B; display: grid; place-items: center; flex: none; }
.stwlp .psi-row .tick svg { width: 11px; height: 11px; color: #fff; }
.stwlp .psi-row .nm5 b { font-size: 14.5px; font-weight: 700; color: #0f1d2e; }
/* Navy, not green. The dials are the green in this card and a second green competes with them. */
.stwlp .psi-row .val { font-size: 20px; font-weight: 800; color: #0f1d2e; font-variant-numeric: tabular-nums; white-space: nowrap; align-self: center; }
.stwlp .psi-row small { grid-column: 1; font-size: 12.5px; line-height: 1.45; color: #7b8794; }
.stwlp .psi-row .cap5 { grid-column: 2; font-size: 11.5px; color: #98a4b3; white-space: nowrap; text-align: right; }

.stwlp .psi-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding: 16px 24px; background: #f6f8fa; border-top: 1px solid #e6eaef;
  font-size: 13.5px; line-height: 1.6; color: #5a6b7d;
}
.stwlp .psi-foot b { color: #0f1d2e; }
.stwlp .psi-foot > span { min-width: 0; flex: 1 1 380px; }
.stwlp .psi-run {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  padding: 11px 20px; border-radius: 10px; background: var(--p); color: #fff;
  font-size: 14px; font-weight: 700; text-decoration: none;
  transition: background .2s ease, transform .2s ease;
}
.stwlp .psi-run svg { width: 15px; height: 15px; transition: transform .2s ease; }
.stwlp .psi-run:hover { background: var(--p2); }
.stwlp .psi-run:hover svg { transform: translateX(3px); }

/* The three claims under the report card, as electric blue cards.
   They were a hairline ruled footnote and Hamza wanted them to carry weight, so they are the
   brand blue with white type on top. Solid, never the brand gradient: white on #0066FF
   measures 4.8 to 1 and passes, but the light end of the gradient, #00A3FF, only reaches
   2.7 and would fail. Heading and body are both pure white and separate by size and weight
   rather than by colour, because a dimmed white on this blue drops under 4.5. */
.stwlp .psi-says { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 48px; }
.stwlp .psi-says .sy {
  display: block; background: var(--p); border-radius: 20px; padding: 26px 26px 28px;
  box-shadow: 0 20px 46px rgba(0, 40, 120, .34);
}
.stwlp .psi-says .sy > span {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px;
  background: rgba(255, 255, 255, .18); color: #fff; margin-bottom: 16px;
}
.stwlp .psi-says .sy > span svg { width: 21px; height: 21px; }
.stwlp .psi-says .sy h4 {
  margin: 0 0 8px; font-size: 18px; font-weight: 800; color: #fff; letter-spacing: -.01em;
  /* Two lines for every heading, whether it needs them or not, so all three paragraphs
     start on the same line. One of the three wraps and the others do not. */
  line-height: 1.3; min-height: 2.6em;
}
.stwlp .psi-says .sy p { margin: 0; font-size: 15px; line-height: 1.62; color: #fff; }

@media (max-width: 900px) {
  .stwlp .psi-says { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .stwlp .psi-says .sy h4 { min-height: 0; }
  .stwlp .psi-three { grid-template-columns: minmax(0, 1fr); }
  .stwlp .psi-row { border-right: none; border-top: 1px solid #f4f7fa; }
  .stwlp .psi-dials { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stwlp .psi-dial:nth-child(2) { border-right: none; }
  .stwlp .psi-dial:nth-child(-n+2) { border-bottom: 1px solid #eef2f7; }
}

.stwlp .psi-warn {
  max-width: 900px; margin: 44px auto -12px; padding: 13px 18px; border-radius: 12px;
  background: rgba(255, 92, 92, .14); border: 1px solid rgba(255, 138, 138, .4);
  color: #ffd6d6; font-size: 13.5px; line-height: 1.6; text-align: center;
}
.stwlp .psi-warn code { background: rgba(0, 0, 0, .3); border-radius: 4px; padding: 1px 6px; font-size: 12.5px; }

/* ---- The looks, told rather than shown -----------------------------------
   The seven screenshots were the same banner shop seven times with the buttons
   recoloured, and nobody could see the difference at that size. What is left is
   a row of names and the colours they are made of, which is the only part a
   shop owner was reading anyway.
   ------------------------------------------------------------------------- */
.stwlp .lookline {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 14px; margin-top: 48px;
}
.stwlp .lkl {
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 14px; padding: 18px 18px 16px;
}
.stwlp .lkl-dots { display: flex; gap: 6px; margin-bottom: 13px; }
.stwlp .lkl-dots i {
  width: 26px; height: 26px; border-radius: 7px; display: block;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28);
}
.stwlp .lkl b { display: block; font-size: 16px; font-weight: 800; color: #fff; letter-spacing: -.01em; }
.stwlp .lkl small { display: block; font-size: 13.5px; color: rgba(255, 255, 255, .78); margin-top: 3px; }
.stwlp .lkl.more { background: rgba(255, 255, 255, .06); border-style: dashed; }
.stwlp .lkl.more .lkl-dots i { background: rgba(255, 255, 255, .16); box-shadow: none; }

/* ---- The looks, shown as one shop changing --------------------------------
   A grid of seven thumbnails said "here are seven colour schemes", which is a
   settings screen. These show the same shop wearing a different one, because
   the point is that importing a shop is the start and not the end of it.
   All of it sits on the electric blue section.
   ------------------------------------------------------------------------- */

/* ---- Option 1: the same shop, twice ---- */

/* ---- Option 2: one big shop ---- */

/* ---- Option 3: the fan ---- */

/* ---- The picker under any of them ---- */

@media (max-width: 900px) {
  .stwlp .lkpair { grid-template-columns: minmax(0, 1fr); }
  .stwlp .lkarrow { transform: rotate(90deg); }
  .stwlp .lkfan { height: auto; }
  .stwlp .lkfan .lkf { position: static; width: 100%; transform: none; opacity: 1; margin-bottom: 16px; }
}

/* ---- A shop page, drawn out of a look's own colours -----------------------
   Screenshots of the real home page were the problem here: seven of them look
   the same at that size, because the photograph fills the frame and the colours
   only show at the edges. Drawn, the difference between yellow on black with
   square corners and sage on linen with soft ones reads instantly.

   Every part takes its colour from the four custom properties the look sets, and
   its corner from --wr, so the picture IS the setting rather than a picture of
   one. Nothing here is an image file.
   ------------------------------------------------------------------------- */

/* ---- the header ---- */

/* ---- the hero ---- */

/* ---- the products ---- */

/* ---- the footer ---- */

/* ---- sizes ---- */
.stwlp .wire--md { transform-origin: top left; }

/* The empty one that stands for the looks not built yet. */
.stwlp .wire--ghost {
  display: grid; place-items: center; min-height: 118px; background: rgba(255, 255, 255, .08);
  border: 1px dashed rgba(255, 255, 255, .38); box-shadow: none; color: rgba(255, 255, 255, .6);
  font-size: 26px; font-weight: 300;
}
.stwlp .wire--md.wire--ghost { min-height: 210px; }

/* ---- Arrangement 1: the same shop twice ---- */

/* ---- Arrangement 2: all of them ---- */

/* ---- Arrangement 3: one big one ---- */

/* ---- the drawn picker ---- */

@media (max-width: 900px) {
  .stwlp .wirepair { grid-template-columns: minmax(0, 1fr); }
  .stwlp .wirearrow { transform: rotate(90deg); }
}

/* ---- The Styles panel, drawn ---------------------------------------------
   The section is not a gallery of looks. It is the moment after the import,
   when the shop is up and the owner wants their own colour on the buttons. So
   the picture is the panel and the shop together: the knob and what it turns.

   Drawn the way WordPress draws it, because that is half the promise. Every
   control in here is one the theme really has: the named colours out of
   theme.json, the ten heading faces, and the one corner setting that moves
   cards, fields and pills together.
   ------------------------------------------------------------------------- */

.stwlp .spanel {
  width: 280px; background: #fff; border-radius: 12px; overflow: hidden;
  box-shadow: 0 26px 60px rgba(3, 12, 30, .34); color: #1e1e1e;
  font-size: 13px; flex: none;
}
.stwlp .spanel-top {
  display: flex; align-items: center; padding: 13px 15px;
  border-bottom: 1px solid #e0e0e0; font-size: 13.5px;
}
.stwlp .spanel-top b { font-weight: 700; }
.stwlp .spanel-x { margin-left: auto; width: 13px; height: 13px; position: relative; opacity: .45; }
.stwlp .spanel-x::before,
.stwlp .spanel-x::after { content: ""; position: absolute; left: 0; top: 6px; width: 13px; height: 1.6px; background: #1e1e1e; }
.stwlp .spanel-x::before { transform: rotate(45deg); }
.stwlp .spanel-x::after { transform: rotate(-45deg); }

.stwlp .spanel-grp { padding: 15px; border-bottom: 1px solid #f0f0f0; }
.stwlp .spanel-grp:last-child { border-bottom: none; }
.stwlp .spanel-lbl {
  display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: #757575; margin-bottom: 11px;
}

/* the colour rows */
.stwlp .spanel-cols { display: grid; gap: 7px; }
.stwlp .scol { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #1e1e1e; padding: 4px 6px; border-radius: 4px; }
.stwlp .scol i { width: 22px; height: 22px; border-radius: 50%; display: block; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); flex: none; }
.stwlp .scol.picked { background: #f0f6ff; box-shadow: inset 0 0 0 1.5px #3858e9; font-weight: 700; }
.stwlp .spanel-hex {
  display: flex; align-items: center; gap: 9px; margin-top: 11px; padding: 8px 10px;
  border: 1px solid #dcdcdc; border-radius: 4px; font-size: 12.5px; color: #555;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.stwlp .spanel-hex span { width: 15px; height: 15px; border-radius: 3px; background: #B23A12; display: block; }

/* the heading faces */
.stwlp .sface {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px; border-radius: 4px; font-size: 13.5px; color: #1e1e1e; margin-bottom: 4px;
}
.stwlp .sface svg { width: 13px; height: 13px; color: #3858e9; }
.stwlp .sface.on { background: #f0f6ff; box-shadow: inset 0 0 0 1.5px #3858e9; font-weight: 700; }

/* the corner slider */
.stwlp .sslide { position: relative; height: 20px; }
.stwlp .sslide i { position: absolute; display: block; }
.stwlp .sslide .track { left: 0; right: 0; top: 9px; height: 3px; border-radius: 2px; background: #dcdcdc; }
.stwlp .sslide .fill { left: 0; width: 38%; top: 9px; height: 3px; border-radius: 2px; background: #3858e9; }
.stwlp .sslide .knob { left: 38%; top: 3px; width: 15px; height: 15px; margin-left: -7px; border-radius: 50%; background: #3858e9; box-shadow: 0 0 0 3px rgba(56, 88, 233, .18); }
.stwlp .sslide-ends { display: flex; justify-content: space-between; font-size: 11.5px; color: #757575; margin-top: 7px; }

/* ---- Arrangement 1: the panel open over the shop ---- */

/* ---- Arrangement 2: side by side ---- */

/* ---- Arrangement 3: the three controls broken out ---- */

@media (max-width: 900px) {
  .stwlp .editshot-stage { padding-right: 0; }
  .stwlp .editshot .spanel { position: static; margin: 18px auto 0; }
  .stwlp .editpair { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .stwlp .editlink { transform: rotate(90deg); }
}

/* The band between the two rows of products, so the drawn shop is a full page rather than a
   header and one row. Without it the Styles panel is taller than the thing it is changing. */

/* ---- A small shop, drawn ---------------------------------------------------
   The first drawn version was cramped: text jammed into a flat rectangle, a
   black bar across the middle and product cards that read as a table. Redrawn
   with room to breathe and a proper type scale, because an ugly mockup on a
   sales page is worse than none.

   Only four colours, one heading face and one corner radius come from the look.
   The photographs, the words and the prices stay put, which is exactly what
   happens when a real shop owner changes their styles.
   ------------------------------------------------------------------------- */

.stwlp .shopdraw {
  --wa: #B23A12; --wi: #17191A; --wp: #EDE8DC; --wn: #DFD5C2; --wr: 2px;
  /*
   * Drawn at the width a real shop is designed at, then zoomed down to fit the column. A page
   * squeezed narrow and a page seen small are two different pictures, and only the second one
   * looks like a shop.
   */
  width: 1120px; zoom: .42;
  background: var(--wp); border-radius: 30px; overflow: hidden;
  box-shadow: 0 66px 150px rgba(10, 25, 60, .22), 0 0 0 2px rgba(10, 25, 60, .06);
  line-height: 1.45;
}

/* ---- the header ---- */
.stwlp .shopdraw .sd-bar { display: flex; align-items: center; gap: 40px; background: var(--wi); padding: 26px 34px; }
.stwlp .shopdraw .sd-mark { font-size: 26px; color: #fff; letter-spacing: .01em; flex: none; }
.stwlp .shopdraw .sd-nav { display: flex; gap: 30px; flex: 1; }
.stwlp .shopdraw .sd-nav b { font-size: 17px; font-weight: 500; color: rgba(255, 255, 255, .74); }
.stwlp .shopdraw .sd-btn {
  background: var(--wa); color: #fff; border-radius: var(--wr);
  padding: 15px 26px; font-size: 16px; font-weight: 700; white-space: nowrap; letter-spacing: .01em;
}

/* ---- the hero ---- */
.stwlp .shopdraw .sd-hero { position: relative; }
.stwlp .shopdraw .sd-hero img { width: 100%; height: 560px; object-fit: cover; display: block; }
.stwlp .shopdraw .sd-eyebrow {
  display: block; font-size: 13px; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(255, 255, 255, .82); margin-bottom: 18px;
}
.stwlp .shopdraw .sd-h1 { display: block; font-size: 52px; line-height: 1.06; margin-bottom: 18px; }
.stwlp .shopdraw .sd-cta { display: flex; gap: 14px; }
.stwlp .shopdraw .sd-cta i {
  font-style: normal; font-size: 17px; font-weight: 700; padding: 17px 28px; border-radius: var(--wr);
}
.stwlp .shopdraw .sd-cta i.solid { background: var(--wa); color: #fff; }
.stwlp .shopdraw .sd-cta i.ghost { box-shadow: inset 0 0 0 1.4px rgba(255, 255, 255, .62); color: #fff; }

/* ---- the promise line: a rule and some words, not a black bar ---- */
.stwlp .shopdraw .sd-strip {
  display: flex; align-items: center; justify-content: center; gap: 28px;
  padding: 34px 44px 8px; color: var(--wi); font-size: 15px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; opacity: .72;
}
.stwlp .shopdraw .sd-strip i { display: block; height: 2px; width: 92px; background: currentColor; opacity: .4; }

/* ---- the products ---- */
.stwlp .shopdraw .sd-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; padding: 30px 44px 42px; }
.stwlp .shopdraw .sd-card { display: block; }
.stwlp .shopdraw .sd-shot { display: block; border-radius: var(--wr); overflow: hidden; background: var(--wn); }
.stwlp .shopdraw .sd-shot img { width: 100%; height: 180px; object-fit: cover; display: block; }
.stwlp .shopdraw .sd-card b { display: block; font-size: 18px; font-weight: 700; color: var(--wi); margin-top: 20px; }
.stwlp .shopdraw .sd-card em { display: block; font-style: normal; font-size: 17px; font-weight: 600; color: var(--wi); opacity: .62; margin-top: 6px; }

/* ---- the footer ---- */
.stwlp .shopdraw .sd-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  background: var(--wi); padding: 30px 34px;
}
.stwlp .shopdraw .sd-foot span:first-child { font-size: 22px; color: #fff; }
.stwlp .shopdraw .sd-foot span:last-child { font-size: 17px; color: rgba(255, 255, 255, .55); }

/* ---- the layouts ---- */

.stwlp .editshot { position: relative; max-width: 980px; margin: 50px auto 0; }
.stwlp .editshot-stage { padding-right: 232px; }
.stwlp .editshot .spanel { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }

.stwlp .editpair2 { display: grid; grid-template-columns: 470px auto 470px; justify-content: center; gap: 26px; align-items: center; margin-top: 50px; }
.stwlp .editpair2 .ep > b { display: block; margin-top: 16px; font-size: 14px; font-weight: 800; color: var(--ink); text-align: center; }
.stwlp .editpair2 .ep-mid .spanel { width: 236px; }

.stwlp .looks-note2 {
  max-width: 760px; margin: 40px auto 0; text-align: center;
  font-size: 15.5px; line-height: 1.7; color: var(--muted);
}
.stwlp .looks-note2 b { color: var(--ink); }

@media (max-width: 1000px) {
  .stwlp .editshot-stage { padding-right: 0; }
  .stwlp .editshot .spanel { position: static; transform: none; margin: 20px auto 0; }
  .stwlp .editpair2 { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  /* The drawing keeps its 1120px, so the zoom is what comes down with the screen. */
  .stwlp .shopdraw { zoom: .30; }
}
@media (max-width: 620px) {
  .stwlp .shopdraw { zoom: .23; }
}
@media (max-width: 560px) {
  .stwlp .shopdraw .sd-grid { grid-template-columns: repeat(2, 1fr); }
  .stwlp .shopdraw .sd-hero-txt { right: 22px; }
  .stwlp .shopdraw .sd-nav { display: none; }
}

/* The hero card, the way the covers shop really does it: a solid block of the accent colour
   sitting in the bottom left corner of the photograph, holding everything. Checked against the
   starter site rather than invented. It takes the look's corner radius, so on the rounded look
   it becomes a soft card and on the square one it is a hard block. */
.stwlp .shopdraw .sd-hero-card {
  position: absolute; left: 40px; bottom: 40px; width: 58%; z-index: 2;
  background: var(--wa); color: #fff; border-radius: var(--wr); padding: 38px 42px 42px;
  box-shadow: 0 34px 80px rgba(10, 20, 40, .3);
}
.stwlp .shopdraw .sd-hero-card p { margin: 0 0 28px; font-size: 17px; line-height: 1.55; color: rgba(255, 255, 255, .9); }

/* The whole page inside the browser frame, at its own length rather than a fixed crop. */
.stwlp .pg .brw img { width: 100%; height: auto; display: block; }
.stwlp .pg .brw { border-radius: 10px; }
.stwlp .pg .brw-bar { height: 18px; padding: 0 7px; gap: 4px; }
.stwlp .pg .brw-bar i { width: 5px; height: 5px; }
.stwlp .pg .brw-bar .url { height: 7px; margin-left: 5px; max-width: 90px; }

@media (max-width: 900px) {
  /* Seven strips do not survive a phone, so they go three across and stay whole. */
  .stwlp .pageset { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .stwlp .pageset { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- The page tiles ------------------------------------------------------
   Same height every one, the page scaled to the tile width and cut clean where
   it carries on. No fade: it read as smoke on the bottom of every tile. Seven
   pages of wildly different lengths cannot all be shown whole at a size anybody
   can read, so the button under the section is how you go and see the rest.
   ------------------------------------------------------------------------- */
.stwlp .pg .brw { position: relative; height: 470px; overflow: hidden; }
.stwlp .pg .brw img { width: 100%; height: auto; display: block; }

/* The eighth cell: the pages that exist but nobody wants a picture of. */
.stwlp .pg--rest .restbox {
  height: 470px; border-radius: 10px; border: 1px dashed var(--line);
  background: linear-gradient(160deg, #f7faff, #eef3fa);
  display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 26px 24px;
}
.stwlp .pg--rest .restbox span {
  display: block; font-size: 14.5px; font-weight: 600; color: var(--muted);
  padding-left: 22px; position: relative;
}
.stwlp .pg--rest .restbox span::before {
  content: ""; position: absolute; left: 0; top: 7px; width: 11px; height: 8px;
  border-left: 2px solid var(--p); border-bottom: 2px solid var(--p); transform: rotate(-45deg);
}

@media (max-width: 900px) {
  .stwlp .pageset { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stwlp .pg .brw, .stwlp .pg--rest .restbox { height: 360px; }
}
@media (max-width: 520px) {
  .stwlp .pageset { grid-template-columns: minmax(0, 1fr); }
}


/* ---- 5. The product page, step by step -----------------------------------
   Three cards left to right, ending on the number, then a wide strip for the
   sketch and for the plugin. Every figure is the demo shop's own, read by
   working its calculator: 3.2 by 2.4 metres is 7.68 square metres, 650gsm at
   12.60 is 96.77, eyelets 9.00, corners 8.00, ropes 7.00, so 120.77.
   ------------------------------------------------------------------------- */

/* Figures line up in a column when they are tabular. */
.stwlp .fig { font-variant-numeric: tabular-nums; }

.stwlp .fld { display: block; }
.stwlp .fld > b {
  display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; margin-bottom: 9px; color: var(--muted);
}
.stwlp .sizepair { display: flex; align-items: center; gap: 12px; }
.stwlp .sizebox {
  flex: 1; display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 13px 15px; border-radius: 10px; font-size: 20px; font-weight: 700;
}
.stwlp .sizebox i { font-style: normal; font-size: 12px; font-weight: 600; opacity: .55; }
.stwlp .sizex { font-size: 16px; font-weight: 700; opacity: .45; }

.stwlp .trip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 52px; align-items: stretch; }
.stwlp .tcard {
  background: #fff; border-radius: 20px; padding: 28px 26px 30px;
  box-shadow: 0 22px 54px rgba(10, 25, 60, .1), 0 0 0 1px rgba(10, 25, 60, .07);
  display: grid; grid-template-rows: auto auto 1fr; gap: 18px;
}
.stwlp .cstep {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 11px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--p);
}
.stwlp .cstep i { width: 22px; height: 22px; border-radius: 50%; background: rgba(0, 102, 255, .1);
  display: grid; place-items: center; font-style: normal; font-size: 12px; }
.stwlp .tart { background: #f6f9ff; border-radius: 14px; padding: 20px; display: grid; gap: 12px; align-content: center; min-height: 186px; }
.stwlp .tart .sizebox { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(10, 20, 40, .16); }
.stwlp .tart .sizex { color: var(--muted); }
/* The swatch grid, drawn the way PriceWise draws it: tiles of auto-fill minmax(84px), a
   62px chip, the name under it, the rate under that, and a ring plus a corner tick on the
   chosen one. The photographs are close crops of the covers shop's own cloth. */
.stwlp .tart--sw { align-content: start; gap: 16px; }
.stwlp .swgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 12px; }
/* Three rows, and the middle one takes up the slack. A buyer's own option names will not
   all be the same length: "Flame retardant" wraps to two lines here and, laid out as a plain
   stack, it pushed its own price a line lower than the other two and the row read as broken.
   With the name on a 1fr track every price sits on the same line whatever the name does. */
.stwlp .swtile { display: grid; grid-template-rows: auto 1fr auto; gap: 6px; justify-items: center; }
.stwlp .swtile b { align-self: center; }
.stwlp .swtile .chip {
  display: block; width: 100%; height: 62px; border-radius: 12px; overflow: hidden;
  border: 2px solid #e6eefc; position: relative; background: #eef4ff;
}
.stwlp .swtile .chip img { width: 100%; height: 100%; object-fit: cover; }
.stwlp .swtile b { font-size: 12px; font-weight: 600; color: #3a3340; text-align: center; line-height: 1.2; }
.stwlp .swtile em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--p); text-align: center; }
.stwlp .swtile.picked .chip { border-color: var(--p); box-shadow: 0 0 0 3px rgba(0, 40, 120, .2); }
.stwlp .swtile.picked b { color: var(--p); font-weight: 700; }
.stwlp .swtile.picked .chip::after {
  content: ""; position: absolute; right: 6px; top: 6px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230066FF' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l6 6L20 6'/%3E%3C/svg%3E");
  background-size: 64%; background-position: center; background-repeat: no-repeat;
}

.stwlp .swcolour { display: flex; align-items: center; gap: 12px; padding-top: 4px; }
.stwlp .swcolour .swlbl { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.stwlp .swcolour .dots { display: flex; gap: 8px; }
.stwlp .swcolour .dots i {
  display: block; width: 24px; height: 24px; border-radius: 8px;
  box-shadow: inset 0 0 0 2px rgba(10, 20, 40, .1);
}
.stwlp .swcolour .dots i.picked { box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px var(--p); }

/* The ways a job can be measured, as small chips. Area is the one this shop uses. */
.stwlp .modes { display: flex; flex-wrap: wrap; gap: 7px; }
.stwlp .mode {
  font-size: 11.5px; font-weight: 600; color: var(--muted); background: #fff;
  border-radius: 999px; padding: 6px 11px; box-shadow: inset 0 0 0 1.5px rgba(10, 20, 40, .12);
}
.stwlp .mode.picked { color: var(--p); font-weight: 700; background: #eaf3ff; box-shadow: inset 0 0 0 1.5px rgba(0, 102, 255, .38); }

.stwlp .bigfig { text-align: center; }
.stwlp .bigfig b {
  display: block; font-size: 54px; line-height: 1; font-weight: 800; letter-spacing: -.035em;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stwlp .bigfig em { font-style: normal; display: block; font-size: 13px; color: var(--muted); margin-top: 12px; line-height: 1.6; }
.stwlp .tcard h4 { font-size: 18px; margin: 0; color: var(--ink); letter-spacing: -.015em; }
.stwlp .tcard p { font-size: 14.5px; line-height: 1.65; color: var(--muted); margin: 8px 0 0; }

.stwlp .tstrip {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 24px;
}
.stwlp .cband {
  display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 22px; align-items: center;
  background: #fff; border-radius: 20px; padding: 24px 26px;
  box-shadow: 0 22px 54px rgba(10, 25, 60, .1), 0 0 0 1px rgba(10, 25, 60, .07);
}
.stwlp .cband .art {
  height: 92px; border-radius: 12px; background: #f6f9ff; display: grid; place-items: center;
  border: 1.5px dashed rgba(0, 102, 255, .28); color: var(--p); text-align: center;
}
.stwlp .cband .art svg { width: 26px; height: 26px; }
.stwlp .cband .art.solid { border-style: solid; border-color: rgba(0, 102, 255, .18); }
.stwlp .cband .art small { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; margin-top: 7px; }
.stwlp .cband h4 { font-size: 18px; margin: 0 0 7px; color: var(--ink); letter-spacing: -.015em; }
.stwlp .cband p { font-size: 14.5px; line-height: 1.65; color: var(--muted); margin: 0; }

@media (max-width: 980px) {
  .stwlp .trip { grid-template-columns: minmax(0, 1fr); }
  .stwlp .tstrip { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .stwlp .cband { grid-template-columns: minmax(0, 1fr); }
}


/* ---- 11. Pricing: two prices, big, and almost nothing else ----------------
   The old section was built to show one price and could not hold a choice.
   The figures are the only thing that needs to be loud here, because every
   section above has already made the argument.
   ------------------------------------------------------------------------- */

/* The yearly: solid dark navy, not a darkened blue. A pane cut out of the blue is still blue,
   which put blue on blue inside the card and gave the eye nothing to catch. Navy against white
   against the electric blue ground is three clearly different things. */

/* The one payment: solid white. On the navy ground this panel was electric blue and that is
   what made it jump out. On an electric blue ground it had nothing to jump out of, so it is
   the loudest thing that can sit on this colour instead. */

/* One line says what the row is, so nothing has to be marked. A tick in a circle beside every
   item is the house style of every software page ever made, and five of them turned a confident
   row into a feature grid. */
/* The five sit in a band across the foot of the same card, so the whole offer is one object.
   Loose underneath they were naked blocks of type on the blue with nothing holding them.
   Navy, matching the yearly panel, so the card reads as an L of navy wrapping the white. */

/* The refund is the last thing said and the most important, so it is said plainly. A box with
   an icon in it makes a promise look like a feature. */

@media (max-width: 900px) {
  .stwlp .bg2 { grid-template-columns: minmax(0, 1fr); }
  .stwlp .bg2 .big b { font-size: 70px; }
  .stwlp .bg2-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) { .stwlp .bg2-in { grid-template-columns: minmax(0, 1fr); } }

/* ---- 11. Pricing: one white card on the brand blue -------------------------
   Designed whole, after a version that grew a piece at a time and ended as
   three objects at three weights: an L of navy with a white notch cut out of
   it, five columns of small type in a band, and a refund sentence hanging
   underneath on its own hairline.

   The blue shouts, one white card holds everything, and the navy half is the
   one to pick. Three surfaces and no fourth.
   ------------------------------------------------------------------------- */

.stwlp .pcard {
  margin-top: 52px; background: #fff; border-radius: 24px; overflow: hidden;
  box-shadow: 0 38px 90px rgba(0, 26, 80, .34);
}
.stwlp .pcard-top { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stwlp .pc-way { padding: 44px 42px 46px; position: relative; }
.stwlp .pc-way + .pc-way { border-left: 1px solid rgba(10, 25, 60, .1); }
.stwlp .pc-once { background: #001429; border-left-color: #001429 !important; }

/* The chip is the store's sale badge, so it is the store's red on BOTH cards. It used to
   be a quiet blue, left over from the "Cheaper from year three" label that no longer
   exists. White on #dc2626 is 4.83. */
.stwlp .pcard .tag {
  position: absolute; top: 26px; right: 28px; background: #dc2626; color: #ffffff;
  font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: 7px 14px; border-radius: 999px;
}
.stwlp .pcard .lbl {
  font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.stwlp .pc-once .lbl { color: #7cc4ff; }
.stwlp .pcard .fig { display: flex; align-items: baseline; gap: 10px; margin-top: 16px; }
.stwlp .pcard .fig b {
  font-size: 88px; line-height: .9; font-weight: 800; letter-spacing: -.045em;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.stwlp .pc-once .fig b { color: #fff; }
.stwlp .pcard .fig span { font-size: 18px; font-weight: 600; color: var(--muted); }
.stwlp .pc-once .fig span { color: rgba(255, 255, 255, .7); }
.stwlp .pcard p { margin: 20px 0 26px; font-size: 16px; line-height: 1.7; color: #46586b; min-height: 5.2em; }
.stwlp .pc-once p { color: #c3d5ea; }
.stwlp .pcard .go {
  display: inline-flex; padding: 15px 30px; border-radius: 12px;
  font-size: 16px; font-weight: 700; text-decoration: none;
  background: var(--p); color: #fff; transition: background .2s ease;
}
/* The two buttons are opposites, which is the point: on white the button is blue, on navy it
   is white. Each one turns into the other's colour under the pointer. */
.stwlp .pc-once .go { background: #fff; color: #001429; box-shadow: 0 14px 30px rgba(0, 0, 0, .3); }
.stwlp .pcard .go:hover { background: #001429; color: #fff; }
.stwlp .pc-once .go:hover { background: var(--p); color: #fff; }

/* Under the card, not inside it. One line of names and one line about the refund, centred on
   the blue. They are the note at the foot of the decision, not part of it, and boxing them into
   the card made the card carry three jobs at once.

   One line of names, not a grid of descriptions: every one of these five already has a whole
   section above explaining it. */
.stwlp .pcard-foot { margin-top: 34px; text-align: center; }
.stwlp .pcard-foot p { min-height: 0; }
.stwlp .pcard-foot .in { margin: 0; font-size: 16px; line-height: 1.7; color: #fff; }
.stwlp .pcard-foot .in b { font-weight: 800; }
/*
 * The bundle line. Same quiet register as the other two lines. The link is a small white
 * chip rather than underlined or colour-shifted text, because this ground defeats both:
 * no underlines is the site rule, and on #0066FF nearly nothing except full white reads,
 * so a hover that changes the colour of bare text has nowhere legal to go. White chip,
 * navy text (13.5:1), inverting on hover (15:1). Both states measured.
 */
.stwlp .pcard-foot .bnd { margin: 12px 0 0; font-size: 16px; line-height: 1.7; color: #fff; }
.stwlp .pcard-foot .bnd b { font-weight: 800; }
.stwlp .pcard-foot .bnd a {
  display: inline-block; margin-left: 6px; padding: 3px 12px; border-radius: 8px;
  background: #fff; color: #001429; font-weight: 800; text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
.stwlp .pcard-foot .bnd a:hover { background: #001429; color: #fff; }

.stwlp .pcard-foot .risk {
  margin: 12px auto 0; max-width: 780px; font-size: 15px; line-height: 1.7; color: #fff;
}
.stwlp .pcard-foot .risk b { font-weight: 800; }

@media (max-width: 900px) {
  .stwlp .pcard-top { grid-template-columns: minmax(0, 1fr); }
  .stwlp .pc-way + .pc-way { border-left: none; }
  .stwlp .pcard .fig b { font-size: 66px; }
  .stwlp .pcard p { min-height: 0; }
  .stwlp .pc-way { padding: 34px 28px 36px; }
  .stwlp .pcard-foot { margin-top: 26px; }
}


/* ---- 12. FAQ: the site's accordion, wearing this page's dark band ----------
   The band and the header are this page's now. These override what the main
   stylesheet paints the cards, so the section stops being a visitor.

   The cards were a near black fill with a two pixel cyan edge, which is the
   only place on this page anything is outlined in cyan. They take the same
   paint the dark band's other tiles already use.
   ------------------------------------------------------------------------- */

.stwlp #faq .faq-content-wrapper { min-height: 0; }

.stwlp #faq .faq-item {
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 18px;
  backdrop-filter: none;
  margin-bottom: 14px;
}
.stwlp #faq .faq-item:hover { border-color: rgba(255, 255, 255, .22); }
.stwlp #faq .faq-item.active-item {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .28);
  box-shadow: none;
}

/* The question does not slide sideways under the pointer. Eleven rows each stepping
   5px right as the pointer crosses them reads as the list being unstable. */
.stwlp #faq .faq-question { font-size: 17.5px; padding: 24px 28px; }
.stwlp #faq .faq-item:hover .faq-question { color: #fff; padding-left: 28px; }

.stwlp #faq .faq-toggle { color: var(--p2); }
.stwlp #faq .faq-item.active-item .faq-toggle { color: #cfe6ff; }

.stwlp #faq .faq-answer-content { font-size: 16px; color: rgba(255, 255, 255, .82); padding: 0 28px 0; }
.stwlp #faq .faq-item.active-item .faq-answer-content { padding: 0 28px 24px; }


/* ---- 11b. The yearly / one time switch ------------------------------------
   Two radios and `:has()`, and no script anywhere near it. The page carries no
   JavaScript and this does not change that, which also means every figure stays
   in the HTML: a search engine and a reader with scripts off both still see all
   four prices, only two of them displayed.
   ------------------------------------------------------------------------- */

/* Focusable, operable by keyboard, and never drawn. `display: none` would take it
   out of the tab order and off the keyboard entirely. */
.stwlp .psw-r {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.stwlp .psw-tabs {
  display: inline-flex;
  gap: 4px;
  margin: 0 auto 34px;
  padding: 5px;
  background: #001b3d;
  border: 0;
  border-radius: 999px;
}

.stwlp .psw-tabs label {
  padding: 11px 30px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  cursor: pointer;
  user-select: none;
  transition: background .2s ease, color .2s ease;
}

.stwlp .psw-tabs label:hover { background: #0a3a7a; }

/* The chosen one is a white pill: white on this blue is 5.07 to 1 and the navy on white
   is 15, so the pair reads at a glance and both states clear the line for 15px text. */
.stwlp .pswitch:has(#sw-yearly:checked) label[for="sw-yearly"],
.stwlp .pswitch:has(#sw-once:checked) label[for="sw-once"] {
  background: #fff;
  color: #001429;
}

/* Keyboard users see where they are, since the radio itself is invisible. */
.stwlp .pswitch:has(#sw-yearly:focus-visible) label[for="sw-yearly"],
.stwlp .pswitch:has(#sw-once:focus-visible) label[for="sw-once"] {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

/* And the swap itself. Everything carrying `.yr` or `.on` appears with its plan. */
.stwlp .pswitch { text-align: center; }
.stwlp .pswitch .pcard { text-align: left; }
.stwlp .pswitch:has(#sw-yearly:checked) .pcard .on,
.stwlp .pswitch:has(#sw-once:checked) .pcard .yr { display: none; }

/* `.go` is inline-flex and `.fig` is flex, so `display: block` from a generic rule would
   flatten them. Each is put back to the display it had. */
.stwlp .pswitch .pcard .fig { display: flex; }
.stwlp .pswitch .pcard a.go { display: inline-flex; }
.stwlp .pswitch:has(#sw-yearly:checked) .pcard .fig.on,
.stwlp .pswitch:has(#sw-once:checked) .pcard .fig.yr,
.stwlp .pswitch:has(#sw-yearly:checked) .pcard a.go.on,
.stwlp .pswitch:has(#sw-once:checked) .pcard a.go.yr { display: none; }

@media (max-width: 560px) {
  .stwlp .psw-tabs { display: flex; width: 100%; }
  .stwlp .psw-tabs label { flex: 1; text-align: center; padding: 11px 12px; }
}


/* ---- 11c. The saving, in the store's own sale colours ---------------------
   Read off woocommerce.css rather than invented, because this page and the
   product pages have to look like one shop:

     .sale-badge   red   #ef4444 to #dc2626, white type
     .old-price    grey  #999, struck through
     .you-save     green #10b981 to #059669, white type

   So: red chip, GREY struck price, green saving pill. The first version made
   the struck price red, which is why it looked foreign; on the product pages
   red is the badge and the old price is grey.

   Two deliberate departures, both about small type on a strong fill, both
   measured. The house gradients read at their midpoint: white on the red one
   is 4.26 and on the green 3.06, and 14px type wants 4.5. So the chip takes
   the DARK END of the house red, #dc2626, which is white at 4.83, and the
   saving pill takes #047857 from the same green family at 5.48. Same hues,
   same family, legible. The struck grey is #767676 on paper rather than the
   house #999, which is 2.85; on the navy card it mirrors to #9aa4b2 at 7.36.

   The struck figure is the two products bought apart, not an invented old
   price, and the paragraph under the card says so in words. Everything is
   computed in PHP from the four real prices.
   ------------------------------------------------------------------------- */

/* The struck price sits BEFORE the one being charged, which is the order a shopper reads
   and the order the store's own product pages use. */
.stwlp .pcard .fig s {
  color: #9aa4b2;
  font-size: 26px;
  font-weight: 700;
  text-decoration-thickness: 2px;
  text-underline-offset: 0;
  margin-right: 10px;
  align-self: center;
}

/* Only the struck grey changes on paper: #9aa4b2 is 1.9 to 1 on white. #767676 is the
   house #999 taken to 4.54, which is the same grey to the eye and above the line. The red
   chip and the green pill are the same on both cards, which is the point. */
.stwlp .pcard .pc-way:not(.pc-once) .fig s { color: #767676; }

/* Solid, not a tint over a tint. The first version was translucent green inside a
   translucent border, which reads as frosted glass; Hamza's call is solid. #2fd07f with
   #04231a on it measures 8.29 to 1, and the pill itself sits at 9.23 against the navy. */
.stwlp .pcard .save {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
  min-height: 0;
  padding: 8px 16px;
  border-radius: 999px;
  background: #047857;
  border: 0;
  color: #ffffff;
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: .01em;
}

/* The percentage chip is the loudest thing on the card after the price, so it stops
   borrowing the quiet blue the old "Cheaper from year three" tag used. */
/* The card grew a chip and a badge, so its body no longer needs the old floor that kept
   two cards level; the grid does that on its own. */
.stwlp .pc-once p { min-height: 0; }
.stwlp .pcard .pc-once .save + .go,
.stwlp .pc-once a.go { margin-top: 22px; }

@media (max-width: 900px) {
  .stwlp .pcard .fig s { font-size: 22px; }
}

/* The line under the button in the "tell me what you need" card. The trust list below the
   buy buttons is a column of ticks, which is not what one quiet sentence wants. */
.stwlp .cc-note { font-size: 14px; line-height: 1.6; color: var(--muted); margin: 0; }