/* =============================================================================
   Craftor sales page (page-craftor.php). Scoped to .crlp so it never touches the rest of
   the theme and never shares a scope with another product page (.stwlp is StoreWise,
   .swlp is SheetWise). Same house system as StoreWise: Inter, DevTonic blue, navy bands,
   gradient accents.

   Ported 17 Oct 2026 from the demo Hamza approved on 29 Sep (dts-tools/craftor-page-demo),
   with his later rules applied:
   - NO LINES (30 Sep, 14 Oct): no borders as dividers, no outlined boxes, no rules between
     rows, no connector lines, no top or side stripes. Things are told apart by space and a
     change of background. Drawn fields, chips and second buttons are filled. Allowed: a
     focus ring, a picked option's ring (box-shadow), a picked section's outline.
   - Nothing touches: no badge on text, nothing jammed against a frame.
   - Every section shows something, a different shape each time.
   The theme's main.css loads first; everything here is .crlp-scoped and wins over it.
   ============================================================================= */

.crlp {
  --p: #0066FF;
  --p2: #0052CC;
  --grad: linear-gradient(135deg, #0066FF, #00A3FF);
  --grad-dk: linear-gradient(135deg, #00A3FF, #7cc4ff);
  --ink: #0a0a0a;
  --muted: #5d6b82;
  --soft: #f3f7fd;
  /* The Craftor editor's own accent, so the drawn editor matches the real one. */
  --ed: #3056f5;
  --ed-ink: #1f3fd0;
  --ed-soft: #e9eeff;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: #1a1a1a;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.crlp *, .crlp *::before, .crlp *::after { box-sizing: border-box; }
.crlp img { max-width: 100%; height: auto; display: block; }
.crlp svg { display: block; }
.crlp h1, .crlp h2, .crlp h3, .crlp h4, .crlp h5, .crlp h6 { font-family: inherit; color: inherit; letter-spacing: inherit; margin: 0; padding: 0; text-transform: none; }
.crlp p, .crlp figure, .crlp ul, .crlp ol, .crlp li, .crlp table { margin: 0; padding: 0; }
.crlp ul, .crlp ol { list-style: none; }
.crlp a { color: inherit; }
.crlp button { font: inherit; }
.crlp table { border-collapse: collapse; border-spacing: 0; }
.crlp th, .crlp td { border: 0; }

/* ---- Section shells ---------------------------------------------------- */
.crlp .section { padding: 110px 40px; position: relative; overflow: hidden; }
.crlp .section.lt { background: #fff; }
.crlp .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%);
}
.crlp .section.dk { background: linear-gradient(160deg, #001429 0%, #0a1929 60%, #071b34 100%); color: #eaf2ff; }
.crlp .section.accent { background: linear-gradient(135deg, #0066FF 0%, #0052CC 100%); color: #fff; }
.crlp .section.dk::before, .crlp .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%);
}
.crlp .wrap { max-width: 1200px; margin: 0 auto; position: relative; z-index: 2; }

/* ---- Buttons ----------------------------------------------------------- */
.crlp .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 16px 30px; border-radius: 12px; font-size: 16px; font-weight: 700; line-height: 1.3;
  text-decoration: none; transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.crlp .btn .ar { transition: transform .25s ease; }
.crlp .btn:hover .ar { transform: translateX(4px); }
.crlp .btn-primary { background: var(--grad); color: #fff; box-shadow: 0 14px 32px rgba(0, 102, 255, 0.38); }
.crlp .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 20px 44px rgba(0, 102, 255, 0.5); color: #fff; }
.crlp .btn-secondary { background: rgba(255, 255, 255, 0.14); color: #fff; }
.crlp .btn-secondary:hover { background: rgba(255, 255, 255, 0.24); transform: translateY(-3px); color: #fff; }
.crlp .btn-white { background: #fff; color: #0052CC; box-shadow: 0 14px 32px rgba(0, 20, 60, .25); }
.crlp .btn-white:hover { transform: translateY(-3px); color: #0052CC; }
.crlp .btn:focus-visible, .crlp .pc-go:focus-visible, .crlp .chip:focus-visible, .crlp .eng-steps button:focus-visible, .crlp summary:focus-visible, .crlp .hb-devs button:focus-visible, .crlp .hb-tile:focus-visible { outline: 3px solid #7cc4ff; outline-offset: 3px; }

/* ---- Section heads ----------------------------------------------------- */
.crlp .shead { text-align: center; max-width: 800px; margin: 0 auto 64px; }
.crlp .eyebrow {
  display: inline-block; padding: 8px 22px; border-radius: 50px;
  background: rgba(0, 102, 255, 0.09);
  color: #005ce6; font-size: 12px; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase; margin-bottom: 22px; line-height: 1.5;
}
.crlp .section.dk .eyebrow { background: rgba(255, 255, 255, 0.12); color: #cfe6ff; }
.crlp .section.accent .eyebrow { background: rgba(0, 22, 66, 0.2); color: #fff; }
.crlp .stitle { text-wrap: balance; font-size: 50px; font-weight: 900; line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 20px; color: var(--ink); }
.crlp .gt { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.crlp .section.dk .gt { background: var(--grad-dk); -webkit-background-clip: text; background-clip: text; }
.crlp .section.accent .gt { background: linear-gradient(135deg, #ffffff, #cfe6ff); -webkit-background-clip: text; background-clip: text; }
.crlp .section.dk .stitle, .crlp .section.accent .stitle { color: #fff; }
.crlp .sdesc { font-size: 19px; line-height: 1.75; color: var(--muted); }
.crlp .section.dk .sdesc { color: rgba(255, 255, 255, 0.8); }
.crlp .section.accent .sdesc { color: #fff; }
.crlp .sdesc a { color: var(--p2); font-weight: 600; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.crlp .kicker { display: block; font-size: 12px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: #005ce6; margin-bottom: 12px; }
.crlp .section.dk .kicker { color: #7cc4ff; }

/* =============================================================================
   1. HERO, with the editor building a page by itself
   ============================================================================= */
.crlp .hero {
  padding: 170px 40px 110px;
  background: linear-gradient(160deg, #001429 0%, #0a1929 55%, #06213f 100%);
  color: #fff; position: relative; overflow: hidden;
}
.crlp .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%);
}
.crlp .hero-grid {
  max-width: 1320px; margin: 0 auto; position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 52px; align-items: center;
}
.crlp .hero-badge {
  display: inline-flex; align-items: center; gap: 9px; padding: 8px 18px; border-radius: 50px;
  background: rgba(0, 163, 255, 0.16); color: #bfe0ff;
  font-size: 13.5px; font-weight: 700; margin-bottom: 26px; line-height: 1.4;
}
.crlp .hero-badge svg { width: 16px; height: 16px; color: #7cc4ff; flex: none; }
.crlp .hero h1 { text-wrap: balance; font-size: 52px; font-weight: 900; line-height: 1.05; letter-spacing: -0.025em; margin: 0 0 24px; color: #fff; }
.crlp .gt-d { background: var(--grad-dk); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.crlp .hero-sub { font-size: 19px; line-height: 1.7; color: rgba(255, 255, 255, 0.8); margin: 0 0 34px; max-width: 540px; }
.crlp .hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.crlp .herostudio { display: flex; align-items: center; gap: 9px; margin-top: 30px; font-size: 13.5px; color: rgba(255, 255, 255, 0.62); }
.crlp .herostudio svg { width: 18px; height: 18px; color: #7cc4ff; flex-shrink: 0; }
.crlp .herostudio b { color: rgba(255, 255, 255, 0.88); }

/* ---- The drawn editor. Its chrome copies the real Craftor editor (same accent, same tiles,
   same icons, de-lined like the real one since 3 Oct), and the page inside is the sign shop's
   own home page. Parts are told apart by background: white bar, grey panel, darker stage. ---- */
.crlp .hb {
  position: relative;
  background: #fff; border-radius: 16px; overflow: hidden; color: #17181c;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.45);
  font-size: 12px; line-height: 1.4;
}
.crlp .hb-top { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 12px; background: #fff; }
.crlp .hb-brand { display: flex; align-items: center; gap: 7px; font-weight: 800; font-size: 13px; white-space: nowrap; }
.crlp .hb-mark { width: 22px; height: 22px; border-radius: 6px; background: var(--ed); color: #fff; display: grid; place-items: center; }
.crlp .hb-mark svg { width: 13px; height: 13px; }
.crlp .hb-page { display: flex; align-items: center; gap: 6px; font-weight: 700; padding-left: 8px; white-space: nowrap; }
.crlp .hb-page svg { width: 14px; height: 14px; }
.crlp .hb-page em { font-style: normal; font-size: 10.5px; font-weight: 700; color: #6b6f78; background: #f1f1ee; border-radius: 20px; padding: 2px 8px; }
.crlp .hb-devs { display: flex; gap: 2px; margin-left: auto; background: #f3f3f5; border-radius: 9px; padding: 3px; }
.crlp .hb-devs button { width: 30px; height: 26px; border: 0; border-radius: 7px; background: transparent; color: #6b6f78; display: grid; place-items: center; cursor: pointer; padding: 0; }
.crlp .hb-devs button svg { width: 15px; height: 15px; }
.crlp .hb-devs button.on { background: #fff; color: #17181c; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.crlp .hb-search { display: flex; align-items: center; gap: 6px; margin-left: auto; background: #f3f3f5; border-radius: 8px; padding: 6px 11px; font-weight: 600; color: #3c4046; white-space: nowrap; }
.crlp .hb-search svg { width: 13px; height: 13px; }
.crlp .hb-pub { background: var(--ed); color: #fff; font-weight: 700; border-radius: 8px; padding: 6px 14px; font-size: 12px; white-space: nowrap; }
.crlp .hb-body { display: grid; grid-template-columns: 176px minmax(0, 1fr); height: 470px; }
.crlp .hb-panel { padding: 12px 11px; background: #f7f7f9; overflow: hidden; }
.crlp .hb-h { display: flex; align-items: center; gap: 6px; font-size: 9px; font-weight: 800; letter-spacing: .05em; white-space: nowrap; text-transform: uppercase; color: var(--ed-ink); margin: 14px 0 9px; }
.crlp .hb-h::before { content: ''; width: 6px; height: 6px; border-radius: 2px; background: var(--ed); flex: none; }
.crlp .hb-h.plain { color: #8a8d94; margin-top: 2px; }
.crlp .hb-h.plain::before { display: none; }
.crlp .hb-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.crlp .hb-tile {
  height: 66px; border-radius: 9px; display: grid; justify-items: center; align-content: center;
  gap: 5px; font-size: 10.5px; font-weight: 700; text-align: center; line-height: 1.15; padding: 4px; background: #fff;
  transition: box-shadow .2s, transform .2s;
}
.crlp .hb-tiles.small .hb-tile { height: 56px; }
.crlp .hb-tile i { width: 26px; height: 26px; border-radius: 7px; background: var(--ed-soft); color: var(--ed-ink); display: grid; place-items: center; }
.crlp .hb-tile i svg { width: 15px; height: 15px; }
.crlp .hb-tile.basic i { background: #f3f1ec; color: #17181c; }
.crlp .hb-tile[data-for] { cursor: pointer; }
.crlp .hb-tile.pick { box-shadow: 0 0 0 2px var(--ed), 0 6px 16px rgba(48, 86, 245, .2); transform: translateY(-1px); }

.crlp .hb-stage { position: relative; background: #e3e6ec; padding: 14px; overflow: hidden; container-type: inline-size; }
/* The canvas is the drawn page's size container: its text is worked out from the canvas, never
   from the stage, so a narrower screen gets the layout of a narrower screen and nothing is cut. */
.crlp .hb-canvas { margin: 0 auto; width: 100%; height: 100%; overflow: hidden; border-radius: 8px; box-shadow: 0 6px 20px rgba(20, 30, 50, .18); transition: width .45s ease; background: #F2F2EF; container-type: inline-size; }
.crlp .hb-canvas.tab { width: 70%; }
.crlp .hb-canvas.phone { width: 43%; }
.crlp .hb-ghost {
  position: absolute; z-index: 5; left: 0; top: 0; pointer-events: none; opacity: 0; display: flex; align-items: center; gap: 6px;
  background: var(--ed); color: #fff; font-weight: 700; font-size: 11px; padding: 6px 10px; border-radius: 8px; white-space: nowrap;
  box-shadow: 0 10px 24px rgba(48, 86, 245, .45); transition: transform .8s cubic-bezier(.5, 0, .2, 1), opacity .25s;
}
.crlp .hb-ghost svg { width: 13px; height: 13px; }
.crlp .hb-cap { display: flex; justify-content: space-between; gap: 16px; margin-top: 14px; font-size: 13px; line-height: 1.6; color: #a5b9cf; }
.crlp .hb-cap > span { white-space: nowrap; }
.crlp .hb-cap b { font-weight: 500; }
.crlp .hb-cap b { color: rgba(255, 255, 255, .9); }

/* The panel's two views, as in the real editor: Add (the sections) and Style (the site's look). */
.crlp .hb-ptabs { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: #ececf0; border-radius: 9px; padding: 3px; margin-bottom: 12px; }
.crlp .hb-ptabs button { display: flex; align-items: center; justify-content: center; gap: 5px; border: 0; border-radius: 7px; background: transparent; color: #6b6f78; font-size: 11px; font-weight: 700; padding: 5px 0; cursor: pointer; transition: background .2s, color .2s; }
.crlp .hb-ptabs button svg { width: 13px; height: 13px; }
.crlp .hb-ptabs button.on { background: #fff; color: #17181c; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.crlp .hb-pv-style, .crlp .hb-pv-sec { display: none; }
.crlp .hb-panel.style .hb-pv-add, .crlp .hb-panel.sec .hb-pv-add { display: none; }
.crlp .hb-panel.style .hb-pv-style, .crlp .hb-panel.sec .hb-pv-sec { display: block; animation: hbIn .35s ease; }
@keyframes hbIn { from { opacity: 0; transform: translateY(4px); } }
.crlp .hb-looks { display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; }
.crlp .hb-look { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 9px; row-gap: 6px; border: 0; border-radius: 9px; background: #fff; padding: 7px 9px; text-align: left; color: #17181c; cursor: pointer; transition: box-shadow .2s, transform .2s; }
.crlp .hb-look.on { box-shadow: 0 0 0 2px var(--ed), 0 6px 16px rgba(48, 86, 245, .18); }
.crlp .hb-look .lk-dots { display: flex; gap: 3px; }
.crlp .hb-look .lk-dots i { display: block; width: 12px; height: 12px; border-radius: 50%; }
.crlp .hb-look b { font-size: 12px; line-height: 1.1; }
.crlp .hb-look .lk-signwriter { font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; font-weight: 800; text-transform: uppercase; font-size: 13px; letter-spacing: .01em; }
.crlp .hb-look .lk-glassworks { font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700; letter-spacing: -.02em; }
.crlp .hb-look .lk-canvasworks { font-family: Archivo, system-ui, sans-serif; font-weight: 800; letter-spacing: -.01em; }
.crlp .hb-look .lk-sawmill { font-family: Fraunces, Georgia, serif; font-weight: 700; }
.crlp .hb-cols, .crlp .hb-sels { display: grid; gap: 6px; }
.crlp .hb-col { display: flex; align-items: center; gap: 7px; background: #fff; border-radius: 8px; padding: 6px 8px; font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.crlp .hb-col i { width: 16px; height: 16px; border-radius: 5px; flex: none; transition: background-color .5s ease; }
.crlp .hb-col .c-acc { background: var(--ns-acc); }
.crlp .hb-col .c-dark { background: var(--ns-dark); }
.crlp .hb-col code { margin-left: auto; font: 600 9.5px/1 ui-monospace, Consolas, monospace; color: #6b6f78; background: none; padding: 0; }
.crlp .hb-sel { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 6px; background: #fff; border-radius: 8px; padding: 6px 8px; }
.crlp .hb-sel small { grid-column: 1 / -1; font-size: 9px; font-weight: 700; color: #8a8d94; line-height: 1.3; }
.crlp .hb-sel b { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crlp .hb-sel svg { width: 12px; height: 12px; color: #6b6f78; }
.crlp .hb-tgl { display: flex; align-items: center; gap: 8px; border: 0; border-radius: 8px; background: #fff; color: #17181c; font-size: 10.5px; font-weight: 700; padding: 7px 8px; text-align: left; cursor: pointer; }
.crlp .hb-tgl i { position: relative; flex: none; width: 26px; height: 15px; border-radius: 8px; background: #cfd1d8; transition: background-color .25s ease; }
.crlp .hb-tgl i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .25s ease; }
.crlp .hb-tgl.on i { background: var(--ed); }
.crlp .hb-tgl.on i::after { transform: translateX(11px); }
.crlp .hb-tgl:focus-visible { outline: 3px solid #7cc4ff; outline-offset: 3px; }

/* A section's own settings: its name, Content and Style, then its background and its space. */
.crlp .hb-sh { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; }
.crlp .hb-back { flex: none; width: 24px; height: 24px; border: 0; border-radius: 7px; background: #ececf0; color: #17181c; display: grid; place-items: center; padding: 0; cursor: pointer; }
.crlp .hb-back svg { width: 14px; height: 14px; }
.crlp .hb-sh i { flex: none; width: 24px; height: 24px; border-radius: 7px; background: var(--ed-soft); color: var(--ed-ink); display: grid; place-items: center; }
.crlp .hb-sh i svg { width: 14px; height: 14px; }
.crlp .hb-sh b { display: grid; font-size: 12px; line-height: 1.2; }
.crlp .hb-sh small { font-size: 9.5px; font-weight: 600; color: #8a8d94; }
.crlp .hb-stabs { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: #ececf0; border-radius: 8px; padding: 3px; }
.crlp .hb-stabs span { text-align: center; font-size: 10.5px; font-weight: 700; color: #6b6f78; padding: 4px 0; border-radius: 6px; }
.crlp .hb-stabs span.on { background: #fff; color: #17181c; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.crlp .hb-sg { margin-top: 12px; }
.crlp .hb-sg > * + .hb-fl { margin-top: 9px; }
.crlp .hb-seg + .hb-rng { margin-top: 6px; }
.crlp .hb-fl { display: block; font-size: 10px; font-weight: 700; color: #3c4046; margin: 0 0 5px; }
.crlp .hb-bgs { display: flex; gap: 7px; background: #e3e4e9; border-radius: 9px; padding: 6px 7px; }
.crlp .hb-bgs button { width: 21px; height: 21px; border: 0; border-radius: 6px; padding: 0; cursor: pointer; transition: box-shadow .2s, background-color .5s ease; }
.crlp .hb-bgs [data-bg="page"] { background-color: var(--ns-base); }
.crlp .hb-bgs [data-bg="band"] { background-color: #E4E4DD; }
.crlp .hb-bgs [data-bg="white"] { background-color: #fff; }
.crlp .hb-bgs [data-bg="dark"] { background-color: var(--ns-dark); }
.crlp .hb-bgs [data-bg="acc"] { background-color: var(--ns-acc); }
.crlp .hb-bgs button.on { box-shadow: 0 0 0 2px #e3e4e9, 0 0 0 4px var(--ed); }
.crlp .hb-say { display: block; font-size: 9.5px; line-height: 1.35; color: #6b6f78; margin: 6px 0 0; }
.crlp .hb-seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; background: #ececf0; border-radius: 8px; padding: 3px; }
.crlp .hb-seg button { border: 0; border-radius: 6px; background: transparent; color: #6b6f78; font-size: 10px; font-weight: 700; padding: 5px 8px; white-space: nowrap; cursor: pointer; transition: background .2s, color .2s; }
.crlp .hb-seg button.on { background: #fff; color: #17181c; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.crlp .hb-seg.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* A slider for an exact size, with its number in px (None at 0), as the editor's own. */
.crlp .hb-rng { display: grid; grid-template-columns: minmax(0, 1fr) 38px; align-items: center; column-gap: 8px; height: 20px; cursor: pointer; }
.crlp .hb-trk { position: relative; height: 4px; border-radius: 2px; background: #dcdde3; }
.crlp .hb-trk .f { position: absolute; left: 0; top: 0; bottom: 0; width: var(--v, 0%); border-radius: 2px; background: var(--ed); transition: width .25s ease-in-out; }
.crlp .hb-trk i { position: absolute; top: 50%; left: var(--v, 0%); width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(20, 30, 50, .4); transition: left .25s ease-in-out; }
.crlp .hb-rng.drag .f, .crlp .hb-rng.drag .hb-trk i { transition-duration: var(--d, .25s); }
.crlp .hb-rng b { font-size: 10px; font-weight: 700; color: #3c4046; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* The browser's colour picker, opened from the Accent colour, and the Headings font list. */
.crlp .hb-pick, .crlp .hb-drop { position: absolute; z-index: 7; left: 0; top: 0; background: #fff; box-shadow: 0 18px 40px rgba(20, 30, 50, .3), 0 2px 6px rgba(20, 30, 50, .12); opacity: 0; pointer-events: none; transition: opacity .22s ease, translate .22s ease; translate: 0 6px; }
.crlp .hb-pick.open, .crlp .hb-drop.open { opacity: 1; translate: 0 0; }
.crlp .hb-pick { width: 176px; padding: 10px; border-radius: 12px; }
.crlp .hb-pick-sv { position: relative; height: 92px; border-radius: 7px; background: linear-gradient(to top, #000, rgba(0, 0, 0, 0)), linear-gradient(to right, #fff, hsl(var(--h, 46), 100%, 50%)); }
.crlp .hb-pick-sv i, .crlp .hb-pick-hue i { position: absolute; border-radius: 50%; background: radial-gradient(circle, transparent 0 3.5px, #fff 4px); box-shadow: 0 1px 4px rgba(0, 0, 0, .45); transition: left .45s ease, top .45s ease; }
.crlp .hb-pick:not(.open) i { transition: none; }
.crlp .hb-pick-sv i { width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; left: var(--x, 100%); top: var(--y, 0%); }
.crlp .hb-pick-hue { position: relative; height: 10px; margin: 10px 0; border-radius: 5px; background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); }
.crlp .hb-pick-hue i { width: 14px; height: 14px; top: -2px; margin-left: -7px; left: var(--hx, 12.8%); background: #fff; }
.crlp .hb-pick-row { display: flex; align-items: center; gap: 8px; }
.crlp .hb-pick-row span { width: 20px; height: 20px; border-radius: 6px; background: var(--ns-acc); transition: background-color .5s ease; }
.crlp .hb-pick-row code { font: 600 11px/1 ui-monospace, Consolas, monospace; color: #17181c; background: #f3f3f5; border-radius: 6px; padding: 5px 8px; }
.crlp .hb-drop { width: 154px; padding: 5px; border-radius: 10px; }
.crlp .hb-drop span { display: block; padding: 5px 8px; border-radius: 6px; font-size: 11px; font-weight: 600; color: #17181c; white-space: nowrap; transition: background .15s; }
.crlp .hb-drop span.on { color: var(--ed-ink); font-weight: 800; }
.crlp .hb-drop span.hov { background: var(--ed-soft); }

/* The film fades out and back in when it starts over or jumps to a step, and nothing moves while
   the page is put back. */
.crlp .hb-body { transition: opacity .3s ease; }
.crlp .hb.fade .hb-body { opacity: 0; }
.crlp .hb.snap *, .crlp .hb.snap *::before, .crlp .hb.snap *::after { transition: none !important; animation: none !important; }

/* The pointer that does the clicking, with a soft ring where it clicks. */
/* Above everything in the editor, the picker and the font list too, so it is always seen. */
.crlp .hb-cursor { position: absolute; z-index: 9; left: 0; top: 0; width: 20px; height: 20px; pointer-events: none; opacity: 0; transition: transform .65s cubic-bezier(.45, 0, .2, 1), opacity .25s; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); }
.crlp .hb-cursor svg { position: relative; width: 20px; height: 20px; }
.crlp .hb-cursor::before { content: ''; position: absolute; left: -5px; top: -7px; width: 18px; height: 18px; border-radius: 50%; background: rgba(48, 86, 245, .45); opacity: 0; }
.crlp .hb-cursor.press::before { animation: hbPress .5s ease-out; }
@keyframes hbPress { 0% { transform: scale(.3); opacity: 1; } 100% { transform: scale(1.9); opacity: 0; } }

/* Typing on the page: the heading being written gets the editor's outline and a caret. */
.crlp .ns-h { transition: outline-color .3s, opacity .18s ease; outline: 2px solid transparent; outline-offset: .08em; }
.crlp .ns-h.editing { outline-color: var(--ed); }
.crlp .ns-caret { display: none; width: .07em; height: .85em; margin-left: .05em; background: currentColor; vertical-align: -.04em; }
.crlp .ns-h.editing .ns-caret { display: inline-block; animation: hbBlink 1s steps(1) infinite; }
@keyframes hbBlink { 50% { opacity: 0; } }

/* Published: the button turns into the editor's own "Published". */
.crlp .hb .hb-pub { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 98px; transition: background .3s, color .3s; }
.crlp .hb .hb-pub svg { width: 12px; height: 12px; }
.crlp .hb .hb-pub.done { background: #e3f6ea; color: #12804a; }

/* Glass track: step progress and caption. */
.crlp .hb-steps {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; margin-top: 16px;
  padding: 5px; border-radius: 15px; background: rgba(164,199,231,.075);
}
.crlp .hb-steps button {
  position: relative; isolation: isolate; overflow: hidden; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  padding: 6px; border: 0; outline: none; border-radius: 10px;
  background: transparent; color: #b6c8da; font: inherit; font-size: 10.75px;
  line-height: 16px; font-weight: 500; white-space: nowrap; cursor: pointer;
  transition: background .25s, color .25s, box-shadow .25s;
}
.crlp .hb-steps button > * { position: relative; z-index: 1; }
.crlp .hb-steps button span { white-space: nowrap; }
.crlp .hb-steps button i {
  display: grid; place-items: center; flex: none; width: 20px; height: 20px;
  font-style: normal; font-size: 11px; line-height: 20px; font-weight: 500; color: #8eabc7; transition: color .25s;
}
.crlp .hb-steps button:has(~ button[aria-pressed="true"]) { background: #24483f; color: #d8e8e2; }
.crlp .hb-steps button:has(~ button[aria-pressed="true"]) i { color: #9ecdb8; }
.crlp .hb-steps button:hover { background: rgba(170,210,255,.09); color: #fff; }
.crlp .hb-steps button[aria-pressed="true"] { background: #e4edf6; color: #183650; box-shadow: 0 5px 14px rgba(0,10,24,.25); }
.crlp .hb-steps button[aria-pressed="true"] i { color: #38678e; }
.crlp .hb-steps button::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(123,180,227,.24) 0%, rgba(123,180,227,.24) 64%, rgba(123,180,227,.13) 82%, transparent 100%);
  transform: translateX(-100%); transition: none;
}
.crlp .hb-steps button.run::after { transform: translateX(0); transition: transform var(--run, 6s) linear; }
.crlp .hb-steps button:focus-visible { background: #cce4f8; color: #12364e; box-shadow: 0 0 24px rgba(153,210,255,.32); }
.crlp .hb-steps button[aria-pressed="true"]:focus-visible { background: #e4edf6; box-shadow: 0 5px 14px rgba(0,10,24,.25); }
@media (min-width: 1181px) and (max-width: 1399px), (min-width: 641px) and (max-width: 749px) {
  .crlp .hb-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .crlp .hb-steps button { font-size: 12px; padding: 10px; }
  .crlp .hb-cap { flex-direction: column; gap: 6px; font-size: 12px; }
  .crlp .hb-cap > span { white-space: normal; }
}
@media (max-width: 640px) {
  .crlp .hb-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crlp .hb-steps button { flex-direction: row; padding: 12px; gap: 8px; font-size: 11px; }
  .crlp .hb-cap { flex-direction: column; gap: 8px; font-size: 12px; }
  .crlp .hb-cap > span { white-space: normal; }
}
@media (max-width: 360px) {
  .crlp .hb-steps button { flex-direction: column; gap: 6px; }
}
.crlp .hb-ptabs button:focus-visible, .crlp .hb-look:focus-visible { outline: 3px solid #7cc4ff; outline-offset: 3px; }

/* ---- The sign shop's page, drawn with its own look (Signwriter: #FFC300 on #121316,
   Barlow Condensed headings). Sized in em off the stage width, so it scales like a real
   preview, and reflows like a real phone when the canvas narrows. ----------------- */
/* Its look is read from these, set to Signwriter for every drawn page. The hero's editor switches
   them to Craftor's other three looks (DTSB_Style::looks(): the same colours, heading fonts, capitals
   and corners; the text on the accent is the ink on a light accent, white on a dark one, as there). */
.crlp {
  --ns-ink: #121316; --ns-acc: #FFC300; --ns-accl: #FFC300; --ns-on: #121316; --ns-base: #F2F2EF;
  --ns-dark: #121316; --ns-steel: #26292E; --ns-muted: #636970;
  --ns-hf: 'Barlow Condensed', 'Arial Narrow', sans-serif; --ns-hw: 800; --ns-ls: .01em; --ns-tt: uppercase; --ns-hk: 1; --ns-rad: .15em;
}
.crlp .hb[data-look="glassworks"] {
  --ns-ink: #12191C; --ns-acc: #0E7C7B; --ns-accl: #17CAC8; --ns-on: #fff; --ns-base: #F7F9FA;
  --ns-dark: #12191C; --ns-steel: #1E282C; --ns-muted: #5C666B;
  --ns-hf: 'Space Grotesk', system-ui, sans-serif; --ns-hw: 700; --ns-ls: -.025em; --ns-tt: none; --ns-hk: .8; --ns-rad: .45em;
}
.crlp .hb[data-look="canvasworks"] {
  --ns-ink: #17191A; --ns-acc: #B23A12; --ns-accl: #FFB287; --ns-on: #fff; --ns-base: #EDE8DC;
  --ns-dark: #1C1F21; --ns-steel: #2E3A3C; --ns-muted: #63604F;
  --ns-hf: Archivo, system-ui, sans-serif; --ns-hw: 800; --ns-ls: -.015em; --ns-tt: none; --ns-hk: .78; --ns-rad: .3em;
}
.crlp .hb[data-look="sawmill"] {
  --ns-ink: #231A12; --ns-acc: #A65E2E; --ns-accl: #E1B191; --ns-on: #fff; --ns-base: #FAF6EF;
  --ns-dark: #231A12; --ns-steel: #2C3A2E; --ns-muted: #6B5B4B;
  --ns-hf: Fraunces, Georgia, serif; --ns-hw: 700; --ns-ls: -.01em; --ns-tt: none; --ns-hk: .82; --ns-rad: .6em;
}
.crlp .ns { font-size: 1.55cqw; line-height: 1.4; color: var(--ns-ink); background: var(--ns-base); container-type: inline-size; min-height: 100%; }
.crlp .ns .bc { font-family: var(--ns-hf); font-weight: var(--ns-hw); text-transform: var(--ns-tt); letter-spacing: var(--ns-ls); }
.crlp .ns, .crlp .ns-util, .crlp .ns-head, .crlp .ns-cta, .crlp .ns-hero, .crlp .ns-hero small, .crlp .ns-hero .ns-h em, .crlp .ns-b, .crlp .ns-trust, .crlp .ns-tbl th, .crlp .ns-qf span {
  transition: background-color .5s ease, color .5s ease, border-radius .5s ease, opacity .2s ease;
}
.crlp .ns-logo, .crlp .ns-h5 { transition: opacity .18s ease; }
/* A heading font change fades only the words in that font out and back in, so the new letters never jump. */
.crlp .hb .ns.swap .bc { opacity: .12; }
.crlp .ns-util { display: flex; justify-content: space-between; gap: 1em; background: var(--ns-steel); color: #d7d8da; font-size: .78em; padding: .7em 1.6em; }
.crlp .ns-head { display: flex; align-items: center; gap: 1.2em; background: var(--ns-dark); color: #fff; padding: 1em 1.6em; }
/* The name takes the heading font, drawn a little smaller in a wide one, as the heading is. */
.crlp .ns-logo { display: flex; align-items: center; gap: .55em; font-size: calc(1.25em * (.3 + .7 * var(--ns-hk))); white-space: nowrap; flex: none; }
.crlp .ns-logo img { width: 1.55em; height: 1.55em; }
.crlp .ns-nav { display: flex; gap: 1.4em; margin-left: auto; font-weight: 700; font-size: .95em; white-space: nowrap; }
.crlp .ns-cta { background: var(--ns-acc); color: var(--ns-on); padding: .55em 1em; font-size: .95em; white-space: nowrap; border-radius: var(--ns-rad); }
.crlp .ns-hero { position: relative; background: var(--ns-dark) center/cover no-repeat; color: #fff; padding: 3.2em 1.6em 3em; }
.crlp .ns-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 11, 13, .86), rgba(10, 11, 13, .45)); }
.crlp .ns-hero > div { position: relative; max-width: 30em; }
.crlp .ns-hero small { display: block; color: var(--ns-accl); font-weight: 800; letter-spacing: .12em; font-size: .72em; text-transform: uppercase; margin-bottom: .8em; }
.crlp .ns-hero .ns-h { font-size: calc(var(--ns-hk) * 3.1em); line-height: .95; margin: 0 0 .35em; color: #fff; }
.crlp .ns-hero .ns-h em { font-style: normal; color: var(--ns-accl); }
.crlp .ns-hero p { font-size: .95em; line-height: 1.5; color: rgba(255, 255, 255, .85); margin-bottom: 1.2em; }
.crlp .ns-b { display: inline-block; font-size: .9em; padding: .6em 1.1em; margin: 0 .5em .4em 0; border-radius: var(--ns-rad); }
.crlp .ns-b1 { background: var(--ns-acc); color: var(--ns-on); }
.crlp .ns-b2 { background: rgba(255, 255, 255, .2); color: #fff; }
/* The kit's hazard stripe, in the accent and the dark band as Craftor's own (.dtsb-hazard); its accent glides. */
.crlp .ns-stripe { height: .7em; background: repeating-linear-gradient(-45deg, var(--ns-dark) 0 .55em, transparent .55em 1.1em) var(--ns-acc); transition: background-color .5s ease; }
.crlp .ns-trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6em; background: var(--ns-acc); color: var(--ns-on); padding: 1em 1.6em; font-weight: 700; font-size: .85em; }
.crlp .ns-trust.three { grid-template-columns: repeat(3, 1fr); }
.crlp .ns-sec { position: relative; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .7s ease, opacity .5s ease, background-color .5s ease, color .5s ease; }
.crlp .ns-sec.in { max-height: 30em; opacity: 1; }
.crlp .ns-sec.fresh { outline: 2px solid var(--ed); outline-offset: -2px; }
.crlp .ns-tag { position: absolute; top: 0; left: 0; z-index: 2; background: var(--ed); color: #fff; font-size: .72em; font-weight: 700; padding: .25em .6em; opacity: 0; transition: opacity .3s; }
.crlp .ns-sec.fresh .ns-tag { opacity: 1; }
.crlp .ns-pad { padding: 2.3em 1.6em 1.8em; transition: padding .45s ease; } /* the top clear of the section's editor tag */
/* One section's own Style tab: its background (Page, Band, White, Dark, Accent; the words turn light on a
   dark one, as in Craftor) and its space above. */
.crlp .ns-sec.bx-band { background-color: #E4E4DD; }
.crlp .ns-sec.bx-white { background-color: #fff; }
.crlp .ns-sec.bx-dark { background-color: var(--ns-dark); color: #fff; }
.crlp .ns-sec.bx-acc { background-color: var(--ns-acc); color: var(--ns-on); }
.crlp .ns-sec.bx-dark .ns-note { color: rgba(255, 255, 255, .7); }
.crlp .ns-sec.bx-acc .ns-note { color: inherit; }
/* ... and, with More tools, its exact space outside, corners and shadow, drawn at 16px of a real page = 1em.
   On a tablet and a phone that space shrinks by itself, by Craftor's own factors (site.css: --dtsb-k .85 and .7 above
   and below, --dtsb-kx .6 and .3 at the sides), for the screen the drawn page stands for: the tablet and phone
   previews, and the drawn page laid out as a phone's when the editor itself is narrow. */
.crlp .hb .ns { --k: 1; --kx: 1; }
.crlp .hb-canvas.tab .ns { --k: .85; --kx: .6; }
.crlp .hb-canvas.phone .ns { --k: .7; --kx: .3; }
@container (max-width: 340px) { .crlp .hb .ns { --k: .7; --kx: .3; } }
.crlp .hb .ns-sec[data-sec="table"] {
  margin: calc(var(--mt, 0em) * var(--k)) calc(var(--mx, 0em) * var(--kx)) 0; border-radius: var(--rad, 0em); box-shadow: var(--shd, none);
  transition: max-height .7s ease, opacity .5s ease, background-color .5s ease, color .5s ease, margin var(--d, .3s) ease-in-out, border-radius var(--d, .3s) ease-in-out, box-shadow .45s ease;
}
.crlp .hb .ns-sec[data-sec="table"].bx-shd { z-index: 1; }
.crlp .hb .ns-sec[data-sec="table"] .ns-pad { padding-top: 2.1em; padding-bottom: 2.1em; }
.crlp .ns-pad .ns-h5 { font-size: 1.6em; margin-bottom: .6em; line-height: 1.1; }
.crlp .ns-tbl { width: 100%; font-size: .9em; background: #fff; }
.crlp .ns-tbl th { background: var(--ns-dark); color: #fff; text-align: right; padding: .55em .6em; font-weight: 700; font-size: .85em; }
.crlp .ns-tbl th:first-child, .crlp .ns-tbl td:first-child { text-align: left; }
.crlp .ns-tbl td { padding: .5em .6em; text-align: right; font-variant-numeric: tabular-nums; color: var(--ns-ink); }
.crlp .ns-tbl tbody tr:nth-child(even) td { background: #f4f4f0; }
.crlp .ns-tbl td:first-child { font-weight: 700; }
.crlp .hb .ns-tbl td:first-child { white-space: nowrap; } /* a size reads on one line, in every preview */
.crlp .ns-note { font-size: .75em; color: var(--ns-muted); margin-top: .6em; }
.crlp .ns-date { display: flex; align-items: center; gap: .9em; background: #fff; padding: 1em 1.2em; font-size: .95em; }
.crlp .ns-date svg { width: 1.6em; height: 1.6em; flex: none; }
.crlp .ns-date .lv { margin-left: auto; text-align: right; font-size: .85em; color: var(--ns-muted); white-space: nowrap; }
.crlp .ns-date .lv b { display: block; color: var(--ns-ink); font-size: 1.15em; }
.crlp .ns-quote { display: grid; grid-template-columns: 1fr 1.2fr; gap: 1.6em; align-items: start; }
.crlp .ns-quote p { font-size: .9em; line-height: 1.5; color: #3c4046; }
.crlp .ns-qf { display: grid; grid-template-columns: 1fr 1fr; gap: .5em; }
.crlp .ns-qf i { font-style: normal; font-size: .75em; color: #636970; background: #fff; padding: .7em; }
.crlp .ns-qf i.w { grid-column: span 2; height: 3.6em; }
.crlp .ns-qf span { grid-column: span 2; background: var(--ns-acc); color: var(--ns-on); text-align: center; font-size: .9em; padding: .6em; border-radius: var(--ns-rad); }
@container (max-width: 340px) {
  .crlp .ns { font-size: 3.6cqw; }
  /* A phone-sized drawn page: the price table keeps every column in view, its sizes on one line. */
  .crlp .ns-pad { padding-left: 1.1em; padding-right: 1.1em; }
  .crlp .ns-tbl { font-size: .74em; }
  .crlp .ns-tbl th, .crlp .ns-tbl td { padding: .5em .35em; }
  .crlp .ns-tbl td:first-child { white-space: nowrap; }
  .crlp .ns-nav, .crlp .ns-util span + span { display: none; }
  .crlp .ns-cta { margin-left: auto; }
  .crlp .ns-trust, .crlp .ns-trust.three { grid-template-columns: 1fr 1fr; }
  .crlp .ns-quote { grid-template-columns: 1fr; }
  .crlp .ns-hero .ns-h { font-size: calc(var(--ns-hk) * 2.6em); }
}
/* Tablet and Phone in the drawn editor: a tablet's and a phone's layout, sized from the canvas.
   The menu folds away, the name and the button keep their space between them. */
/* Tablet keeps the desktop's text size (70% of the canvas at 3.3 = the desktop's 2.3); a phone's
   text is a little smaller, as a whole phone page has to fit. */
.crlp .hb-canvas.tab .ns { font-size: 3.3cqw; }
.crlp .hb-canvas.phone .ns { font-size: 4cqw; }
.crlp .hb-canvas.tab .ns-nav, .crlp .hb-canvas.phone .ns-nav,
.crlp .hb-canvas.tab .ns-util span + span, .crlp .hb-canvas.phone .ns-util span + span { display: none; }
.crlp .hb-canvas.tab .ns-cta, .crlp .hb-canvas.phone .ns-cta { margin-left: auto; }
.crlp .hb-canvas.tab .ns-quote, .crlp .hb-canvas.phone .ns-quote { grid-template-columns: 1fr; }
.crlp .hb-canvas.phone .ns-trust { grid-template-columns: 1fr 1fr; }
.crlp .hb-canvas.phone .ns-hero .ns-h { font-size: calc(var(--ns-hk) * 2.6em); }
/* The price table on a phone: tighter cells so every column stays inside the screen. */
.crlp .hb-canvas.phone .ns-pad { padding-left: 1.1em; padding-right: 1.1em; }
.crlp .hb-canvas.phone .ns-tbl { font-size: .74em; }
.crlp .hb-canvas.phone .ns-tbl th, .crlp .hb-canvas.phone .ns-tbl td { padding: .5em .35em; }
.crlp .hb-canvas.phone .ns-tbl td:first-child { white-space: nowrap; }
@container (min-width: 341px) and (max-width: 640px) {
  .crlp .ns { font-size: 2.3cqw; }
  .crlp .ns-nav { gap: 1em; }
}

/* =============================================================================
   2. THE PARTS MADE FOR CUSTOM PRODUCTS: drawn screens with real numbers
   ============================================================================= */
.crlp .bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.crlp .bx { background: #fff; border-radius: 22px; padding: 34px; box-shadow: 0 24px 60px -30px rgba(0, 40, 100, .28), 0 2px 6px rgba(0, 40, 100, .04); display: flex; flex-direction: column; gap: 24px; }
.crlp .bx.wide { grid-column: span 2; }
.crlp .bx h3 { text-wrap: balance; font-size: 26px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; color: var(--ink); margin-bottom: 10px; }
.crlp .bx p { font-size: 16px; line-height: 1.7; color: var(--muted); }
.crlp .bx-head { max-width: 760px; }
.crlp .bx-foot.bx-foot { font-size: 14px; color: #5d6b82; background: var(--soft); border-radius: 12px; padding: 12px 16px; margin-top: auto; line-height: 1.6; }
.crlp .bx-foot b { color: var(--ink); }
.crlp .bx.split { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; gap: 36px; }

/* The quote, three screens left to right */
.crlp .qflow { display: grid; grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr) 34px minmax(0, 1fr); align-items: stretch; }
.crlp .qarrow { display: grid; place-items: center; color: #9fb3d1; }
.crlp .qarrow svg { width: 22px; height: 22px; }
.crlp .qn { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; color: var(--ink); margin-bottom: 12px; }
.crlp .qn i { font-style: normal; width: 24px; height: 24px; border-radius: 50%; background: var(--grad); color: #fff; display: grid; place-items: center; font-size: 12px; }
.crlp .qstep { display: flex; flex-direction: column; }
.crlp .qcard { border-radius: 14px; padding: 18px; font-size: 12.5px; line-height: 1.45; flex: 1; }
.crlp .q-form { background: #F3ECDF; color: #231A12; }
.crlp .q-form .fr { font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: 18px; margin-bottom: 10px; }
.crlp .q-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.crlp .q-f { display: block; background: #fff; border-radius: 6px; padding: 7px 9px; }
.crlp .q-f b { display: block; font-weight: 600; }
.crlp .q-f small { display: block; font-size: 10px; color: #6B5B4B; }
.crlp .q-file { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: #fff; border-radius: 6px; padding: 7px 9px; margin-top: 8px; }
.crlp .q-file em { font-style: normal; color: #2f7a3b; font-weight: 700; font-size: 11px; white-space: nowrap; }
.crlp .q-admin { background: #f0f0f1; color: #1d2327; font-family: -apple-system, 'Segoe UI', Roboto, sans-serif; }
.crlp .q-admin .ttl { font-size: 15px; font-weight: 600; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.crlp .q-admin .ttl em { font-style: normal; font-size: 10px; background: #fcf0c3; color: #7a5a00; border-radius: 3px; padding: 1px 6px; }
.crlp .q-l { display: block; font-size: 11px; font-weight: 600; margin: 8px 0 4px; }
.crlp .q-in { display: block; background: #fff; border-radius: 4px; padding: 6px 8px; }
.crlp .q-in.big { font-size: 16px; font-weight: 700; }
.crlp .q-chk { display: flex; align-items: center; gap: 7px; margin: 10px 0; }
.crlp .q-chk i { width: 14px; height: 14px; border-radius: 3px; background: #2271b1; display: grid; place-items: center; flex: none; }
.crlp .q-chk i svg { width: 10px; height: 10px; color: #fff; }
.crlp .q-go { display: inline-block; background: #2271b1; color: #fff; border-radius: 4px; padding: 7px 12px; font-weight: 600; }
.crlp .q-mail { background: #eef2f8; color: #222; }
.crlp .q-mail .from { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.crlp .q-mail .from span { width: 28px; height: 28px; border-radius: 50%; background: #A65E2E; color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 12px; flex: none; }
.crlp .q-mail .from b { display: block; font-size: 12.5px; }
.crlp .q-mail .from small { color: #6b7280; font-size: 11px; }
.crlp .q-mt { width: 100%; margin: 4px 0 12px; font-size: 11.5px; border-radius: 8px; overflow: hidden; background: #fff; }
.crlp .q-mt th, .crlp .q-mt td { padding: 6px 8px; text-align: left; vertical-align: top; }
.crlp .q-mt th { width: 38%; font-weight: 700; background: #f6f7f9; }
.crlp .q-mt tr:nth-child(even) th { background: #eef0f4; }
.crlp .q-mt tr:nth-child(even) td { background: #f9fafb; }
.crlp .q-pay { display: inline-block; background: #1d2327; color: #fff; border-radius: 6px; padding: 8px 14px; font-weight: 700; }
.crlp .q-order { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 11.5px; color: #2f7a3b; font-weight: 700; }
.crlp .q-order svg { width: 14px; height: 14px; flex: none; }

/* The price table, in the panel shop's own look (Sawmill: Fraunces on cream) */
.crlp .pt { background: #F3ECDF; border-radius: 14px; padding: 20px; color: #231A12; }
.crlp .pt .fr { font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: 20px; margin-bottom: 12px; }
.crlp .pt table { width: 100%; font-size: 13px; background: #fff; }
.crlp .pt thead tr:first-child th { background: #2C3A2E; color: #e8e3d8; font-size: 10px; letter-spacing: .12em; text-align: center; padding: 6px; }
.crlp .pt thead tr + tr th { background: #231A12; color: #fff; font-size: 11px; padding: 8px 10px; text-align: right; }
.crlp .pt th:first-child, .crlp .pt td:first-child { text-align: left; }
.crlp .pt td { padding: 8px 10px; text-align: right; font-variant-numeric: tabular-nums; }
.crlp .pt tbody tr:nth-child(even) td { background: #faf6ef; }
.crlp .pt td:first-child { font-weight: 700; white-space: nowrap; }
.crlp .pt td.hl, .crlp .pt tbody tr td.hl { background: #A65E2E; color: #fff; font-weight: 800; }
.crlp .pt-scroll { overflow-x: auto; border-radius: 8px; }
.crlp .pt .same { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; background: #fff; border-radius: 8px; padding: 9px 12px; font-size: 12.5px; }
.crlp .pt .same b { font-size: 15px; color: #A65E2E; white-space: nowrap; }

/* Artwork and the day it leaves, on the sign shop's product page */
.crlp .pp { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 16px; background: #ECECE7; border-radius: 14px; padding: 16px; color: #121316; }
.crlp .pp-img { border-radius: 6px; overflow: hidden; }
.crlp .pp-img img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1 / 1; }
.crlp .pp .bc { display: block; font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; font-weight: 800; text-transform: uppercase; font-size: 26px; line-height: 1; }
.crlp .pp .from { font-weight: 700; margin: 6px 0 10px; font-size: 14px; color: #121316; }
.crlp .pp-up { background: #fff; border-radius: 6px; padding: 8px 10px; font-size: 12px; }
.crlp .pp-up .nm { display: flex; justify-content: space-between; gap: 8px; font-weight: 700; }
.crlp .pp-up .nm small { color: #636970; font-weight: 600; white-space: nowrap; }
.crlp .pp-bar { height: 7px; border-radius: 7px; background: #f1ead0; margin: 7px 0 5px; overflow: hidden; }
.crlp .pp-bar i { display: block; height: 100%; width: 100%; border-radius: 7px; background: #FFC300; }
.crlp .pp-up em { font-style: normal; color: #2f7a3b; font-weight: 700; font-size: 11px; }
.crlp .pp-cart { background: #FFC300; text-align: center; font-weight: 800; font-size: 13px; padding: 8px; margin: 10px 0; font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.crlp .pp-when { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 6px; padding: 8px 10px; font-size: 12px; line-height: 1.35; }
.crlp .pp-when svg { width: 20px; height: 20px; flex: none; }
.crlp .pp-when .lv { margin-left: auto; text-align: right; color: #636970; font-size: 10.5px; white-space: nowrap; }
.crlp .pp-when .lv b { display: block; color: #121316; font-size: 13px; }
.crlp .cd b { color: #b3261e; font-variant-numeric: tabular-nums; }
.crlp .pp-order { grid-column: 1 / -1; background: #fff; border-radius: 8px; padding: 10px 12px 12px; font-size: 12px; line-height: 1.4; }
.crlp .po-h { display: block; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #636970; margin-bottom: 7px; }
.crlp .po-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.crlp .po-row > b { font-size: 13px; }
.crlp .po-row > span { background: #f2f2ee; border-radius: 6px; padding: 4px 8px; display: inline-flex; align-items: center; gap: 5px; }
.crlp .po-row svg { width: 12px; height: 12px; flex: none; }
.crlp .po-row .po-day { margin-left: auto; background: #FFC300; color: #121316; font-weight: 600; }
.crlp .po-row .po-day b { font-weight: 800; }

/* Trade prices, the same sheet for two customers */
.crlp .tp { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; align-items: center; background: #F3ECDF; border-radius: 14px; padding: 18px; color: #231A12; }
.crlp .tp img { border-radius: 8px; aspect-ratio: 1 / 1; object-fit: cover; width: 100%; }
.crlp .tp .fr { display: block; font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: 18px; line-height: 1.25; }
.crlp .tp .sz { font-size: 12.5px; color: #6B5B4B; margin: 2px 0 12px; }
.crlp .tp-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #fff; border-radius: 8px; padding: 10px 12px; font-size: 13px; line-height: 1.4; }
.crlp .tp-row + .tp-row { margin-top: 8px; }
.crlp .tp-row b { font-size: 18px; font-variant-numeric: tabular-nums; }
.crlp .tp-row.trade { background: #f6e8dc; }
.crlp .tp-row.trade b { color: #A65E2E; }
.crlp .tp-row small { display: block; font-size: 11px; color: #6B5B4B; }
.crlp .tp-row svg { width: 14px; height: 14px; display: inline-block; vertical-align: -2px; margin-right: 5px; }

/* Three more parts, small */
.crlp .minis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 24px; }
.crlp .mini { background: #fff; border-radius: 18px; padding: 24px; box-shadow: 0 18px 44px -26px rgba(0, 40, 100, .25), 0 2px 6px rgba(0, 40, 100, .04); }
.crlp .mini h3 { font-size: 17px; font-weight: 800; margin: 16px 0 6px; color: var(--ink); }
.crlp .mini p { font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.crlp .mg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.crlp .mg div { background: #EDE8DC; border-radius: 8px; padding: 10px 6px 8px; text-align: center; font-size: 10.5px; font-weight: 700; color: #17191A; line-height: 1.25; }
.crlp .mg svg { width: 100%; height: 42px; margin-bottom: 6px; }
.crlp .mt { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.crlp .mt div { font-size: 10.5px; font-weight: 700; text-align: center; color: #231A12; line-height: 1.25; }
.crlp .mt img { border-radius: 8px; aspect-ratio: 1 / 1; object-fit: cover; margin-bottom: 6px; width: 100%; }
.crlp .ms { display: grid; grid-template-columns: 76px 1fr; gap: 12px; align-items: center; background: #F3ECDF; border-radius: 10px; padding: 10px; }
.crlp .ms img { border-radius: 8px; aspect-ratio: 1 / 1; object-fit: cover; width: 100%; }
.crlp .ms b { display: block; font-family: 'Fraunces', Georgia, serif; font-size: 14px; color: #231A12; line-height: 1.25; }
.crlp .ms span { display: inline-block; margin-top: 8px; background: #A65E2E; color: #fff; font-size: 11px; font-weight: 700; padding: 6px 10px; border-radius: 6px; }

/* =============================================================================
   3. THE ENGINE: ConfigKit's builder, the product page in Craftor, the customer.
   Drawn from the real screens (ConfigKit's builder, Craftor's editor), with the sign
   shop's own configurator and prices. Without the script every block and section shows.
   ============================================================================= */
.crlp .eng { max-width: 1160px; margin: 0 auto; }
.crlp .eng-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 22px; }
.crlp .eng-steps button {
  position: relative; overflow: hidden; display: flex; align-items: flex-start; gap: 12px; text-align: left; cursor: pointer;
  background: var(--soft); color: var(--ink); border: 0; border-radius: 14px; padding: 16px; transition: background .2s, box-shadow .2s;
}
.crlp .eng-steps button > * { position: relative; z-index: 1; }
/* The step that plays fills from left to right while it plays: progress without a line. */
.crlp .eng-steps button::after {
  content: ''; position: absolute; inset: 0; z-index: 0; background: rgba(0, 102, 255, .1); transform-origin: left center;
  transform: scaleX(0); pointer-events: none;
}
.crlp .eng-steps button.run::after { transform: scaleX(1); transition: transform var(--run, 8s) linear; }
.crlp .eng-steps button.full::after { transform: scaleX(1); transition: none; }
.crlp .eng-steps button i { font-style: normal; flex: none; width: 30px; height: 30px; border-radius: 50%; background: rgba(0, 102, 255, .12); color: #0052CC; display: grid; place-items: center; font-weight: 800; font-size: 13px; }
.crlp .eng-steps button b { display: block; font-size: 15px; line-height: 1.35; }
.crlp .eng-steps button small { display: block; font-size: 12.5px; color: #5d6b82; margin-top: 2px; line-height: 1.4; }
.crlp .eng-steps button[aria-selected="true"] { background: #fff; box-shadow: 0 0 0 2px rgba(0, 102, 255, .55), 0 10px 30px -12px rgba(0, 82, 204, .35); }
.crlp .eng-steps button[aria-selected="true"] i { background: var(--grad); color: #fff; }
.crlp .eng-win { position: relative; height: 580px; background: #fff; border-radius: 16px; overflow: hidden; color: #17181c; font-size: 12px; line-height: 1.4; box-shadow: 0 40px 90px -30px rgba(0, 30, 80, .45), 0 2px 8px rgba(0, 30, 80, .08); }
.crlp .eng-ph { height: 100%; }
.crlp .eng-ph[hidden] { display: none; }
.crlp .eng-cap { text-align: center; margin-top: 16px; font-size: 14px; color: #5d6b82; line-height: 1.6; }
.crlp .eng-cap b { color: var(--ink); }
.crlp .eng .hb-ghost { z-index: 20; }

/* ---- ConfigKit's builder: white bar, grey palette and side, darker canvas ---- */
.crlp .ck-top { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 14px; background: #fff; }
.crlp .ck-back { color: #50575e; font-weight: 600; white-space: nowrap; }
.crlp .ck-name { font-size: 14.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.crlp .ck-draft { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: #50575e; background: #f0f0f1; border-radius: 20px; padding: 3px 10px; transition: background .3s, color .3s; white-space: nowrap; }
.crlp .ck-draft::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #8c8f94; }
.crlp .ck.gone .ck-draft { background: #e7f6ec; color: #16723c; }
.crlp .ck.gone .ck-draft::before { background: #1f9d55; }
.crlp .ck-mode { display: flex; background: #f0f0f1; border-radius: 9px; padding: 3px; margin-left: 10px; }
.crlp .ck-mode span { padding: 5px 12px; border-radius: 7px; font-weight: 600; color: #50575e; }
.crlp .ck-mode span.on { background: #fff; color: #1d2327; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.crlp .ck-save { margin-left: auto; font-weight: 600; white-space: nowrap; background: #f0f0f1; border-radius: 8px; padding: 8px 12px; }
.crlp .ck-live { background: #1d2327; color: #fff; font-weight: 700; border-radius: 8px; padding: 8px 14px; transition: transform .2s, box-shadow .2s; white-space: nowrap; }
.crlp .ck-live.press { transform: scale(.95); box-shadow: 0 0 0 4px rgba(29, 35, 39, .2); }
.crlp .ck-body { display: grid; grid-template-columns: 168px minmax(0, 1fr) 232px; height: calc(100% - 48px); }
.crlp .ck-pal { padding: 12px 11px; overflow: hidden; background: #f7f7f8; }
.crlp .ck-pal p { font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #6b7280; margin: 4px 0 8px; }
.crlp .ck-pal p + .ck-tiles { margin-bottom: 12px; }
.crlp .ck-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.crlp .ck-tiles span { height: 54px; background: #fff; border-radius: 8px; display: grid; justify-items: start; align-content: center; gap: 5px; padding: 6px 8px; font-size: 10.5px; font-weight: 600; transition: box-shadow .2s; }
.crlp .ck-tiles span i { width: 16px; height: 16px; color: #1d2327; }
.crlp .ck-tiles span i svg { width: 16px; height: 16px; }
.crlp .ck-tiles span.pick { box-shadow: 0 0 0 2px #e8542c, 0 0 0 5px rgba(232, 84, 44, .16); }
.crlp .ck-canvas { background: #e9ebf0; padding: 12px 16px; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
.crlp .ck-tabs { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.crlp .ck-tabs span { display: inline-flex; align-items: center; gap: 6px; background: #fff; border-radius: 8px; padding: 5px 10px; font-weight: 600; color: #50575e; white-space: nowrap; }
.crlp .ck-tabs span i { font-style: normal; width: 17px; height: 17px; border-radius: 4px; background: #f0f0f1; display: grid; place-items: center; font-size: 10px; font-weight: 700; }
.crlp .ck-tabs span.on { color: #fff; background: #1d2327; }
.crlp .ck-tabs span.on i { background: rgba(255, 255, 255, .2); color: #fff; }
.crlp .ck-tabs em { margin-left: auto; font-style: normal; background: #fff; border-radius: 8px; padding: 5px 10px; font-weight: 600; white-space: nowrap; }
.crlp .ck-paper { flex: 1; min-height: 0; background: #fff; border-radius: 10px; padding: 14px 18px; overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, .06); }
.crlp .ck-scroll { transition: transform .7s ease; }
.crlp .ck-step + .ck-step { margin-top: 16px; }
.crlp .ck-step .ck-h { display: flex; align-items: center; gap: 7px; font-size: 13px; margin-bottom: 8px; font-weight: 700; line-height: 1.3; }
.crlp .ck-step .ck-h i { font-style: normal; width: 19px; height: 19px; border-radius: 5px; background: #1d2327; color: #fff; display: grid; place-items: center; font-size: 10.5px; }
.crlp .ck-blk { position: relative; border-radius: 8px; padding: 8px 10px; margin: 0 -10px 4px; transition: background .3s, max-height .6s ease, opacity .4s ease, padding .4s; }
.crlp .eng.js .ck-blk { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; overflow: hidden; }
.crlp .eng.js .ck-blk.in { max-height: 12em; opacity: 1; padding-top: 8px; padding-bottom: 8px; }
.crlp .ck-blk.sel { outline: 2px solid #e8542c; outline-offset: -2px; background: #fff8f5; }
.crlp .ck-blk label { display: block; font-weight: 700; font-size: 11.5px; margin-bottom: 6px; }
.crlp .ck-blk sup { color: #d63638; }
.crlp .ck-blk small { display: block; color: #6b7280; font-size: 10.5px; margin-top: 5px; }
.crlp .ck-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 7px; }
.crlp .ck-chips span { background: #f0f0f1; border-radius: 5px; padding: 3px 8px; font-size: 11px; }
.crlp .ck-wh { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.crlp .ck-wh span { border-radius: 5px; padding: 6px 8px; color: #6b7280; font-size: 11px; background: #f0f0f1; }
.crlp .ck-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.crlp .ck-cards span { background: #f0f0f1; border-radius: 6px; padding: 7px 8px; font-size: 11px; font-weight: 600; line-height: 1.3; }
.crlp .ck-cards em, .crlp .ck-checks em { display: block; font-style: normal; font-weight: 500; color: #50575e; font-size: 10.5px; }
.crlp .ck-checks { display: grid; gap: 5px; }
.crlp .ck-checks span { display: flex; align-items: center; gap: 8px; background: #f0f0f1; border-radius: 6px; padding: 5px 8px; font-size: 11px; font-weight: 600; }
.crlp .ck-checks span i { width: 13px; height: 13px; background: #fff; border-radius: 3px; flex: none; }
.crlp .ck-checks span em { margin-left: auto; white-space: nowrap; }
.crlp .ck-qty { display: inline-flex; gap: 3px; }
.crlp .ck-qty span, .crlp .ck-qty b { padding: 5px 12px; font-size: 12px; background: #f0f0f1; border-radius: 6px; }
.crlp .ck-up { display: flex; align-items: center; justify-content: center; gap: 8px; background: #f0f3f9; border-radius: 6px; padding: 10px; color: #50575e; font-size: 11px; text-align: center; }
.crlp .ck-up svg { width: 14px; height: 14px; flex: none; }
.crlp .ck-foot { display: flex; gap: 8px; align-items: center; margin-top: 8px; font-size: 11px; color: #50575e; }
.crlp .ck-foot .ok { display: inline-flex; align-items: center; gap: 5px; color: #16723c; font-weight: 700; white-space: nowrap; }
.crlp .ck-foot .ok svg { width: 13px; height: 13px; }
.crlp .ck-side { padding: 14px; overflow: hidden; background: #f7f7f8; }
.crlp .ck-sh { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.crlp .ck-sh i { width: 30px; height: 30px; border-radius: 8px; background: #fdecea; color: #e8542c; display: grid; place-items: center; flex: none; }
.crlp .ck-sh i svg { width: 16px; height: 16px; }
.crlp .ck-sh b { display: block; font-size: 14px; }
.crlp .ck-sh small { color: #6b7280; font-size: 11px; }
.crlp .ck-stabs { display: flex; gap: 3px; margin-bottom: 10px; background: #ebebee; border-radius: 8px; padding: 3px; }
.crlp .ck-stabs span { flex: 1; text-align: center; padding: 4px 0; border-radius: 6px; font-weight: 600; color: #6b7280; }
.crlp .ck-stabs span.on { color: #1d2327; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .1); }
.crlp .ck-side label, .crlp .pe-set label { display: block; font-size: 11px; font-weight: 700; margin: 9px 0 4px; }
.crlp .ck-in { display: block; background: #fff; border-radius: 6px; padding: 6px 9px; font-size: 11.5px; }
.crlp .ck-opts { display: grid; gap: 5px; }
.crlp .ck-opts span { display: flex; justify-content: space-between; align-items: center; gap: 8px; background: #fff; border-radius: 6px; padding: 6px 8px; font-weight: 600; font-size: 11px; }
.crlp .ck-opts em { font-style: normal; background: #f0f0f1; border-radius: 4px; padding: 1px 6px; font-size: 10.5px; color: #1d2327; white-space: nowrap; }
.crlp .ck-add { display: block; margin-top: 7px; background: #ebebee; border-radius: 6px; padding: 6px; text-align: center; font-weight: 600; color: #50575e; font-size: 11px; }
.crlp .ck-toast { position: absolute; left: 50%; bottom: 22px; transform: translate(-50%, 16px); opacity: 0; display: flex; align-items: center; gap: 8px; background: #e9f7ee; color: #16723c; font-weight: 700; font-size: 12.5px; border-radius: 10px; padding: 10px 16px; box-shadow: 0 12px 30px rgba(0, 40, 20, .18); transition: opacity .35s, transform .35s; pointer-events: none; white-space: nowrap; }
.crlp .ck-toast svg { width: 15px; height: 15px; flex: none; }
.crlp .ck-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---- The product page, in Craftor and then as the customer sees it ---- */
.crlp .pe .hb-top { gap: 14px; }
.crlp .pe-with { color: #6b6f78; white-space: nowrap; }
.crlp .pe-with b { color: #17181c; }
.crlp .pe-prev { margin-left: auto; background: #f0f0f2; border-radius: 8px; padding: 6px 12px; font-weight: 700; transition: background .2s, color .2s; white-space: nowrap; }
.crlp .pe-prev.press { background: #17181c; color: #fff; }
.crlp .pe-cust { display: none; align-items: center; justify-content: center; gap: 12px; height: 34px; background: #17181c; color: #fff; font-weight: 600; font-size: 12px; }
.crlp .pe-cust span { background: #fff; color: #17181c; border-radius: 6px; padding: 3px 10px; font-weight: 700; font-size: 11px; }
.crlp .pe-body { display: grid; grid-template-columns: 188px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); height: calc(100% - 46px); transition: grid-template-columns .45s ease; }
.crlp .pe-panel { overflow: hidden; }
.crlp .pe-panel .hb-tile { height: 60px; }
.crlp .pe-panel .hb-tile[data-pe-for] { cursor: default; }
.crlp .pe-set .pe-note { background: #fff; border-radius: 8px; padding: 9px 10px; font-size: 11px; line-height: 1.45; color: #3c4046; margin-bottom: 4px; }
.crlp .pe-tgl { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-weight: 600; font-size: 11.5px; }
.crlp .pe-tgl i { width: 26px; height: 15px; border-radius: 10px; background: #c9ccd3; position: relative; flex: none; }
.crlp .pe-tgl i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%; background: #fff; transition: left .2s; }
.crlp .pe-tgl.on i { background: var(--ed); }
.crlp .pe-tgl.on i::after { left: 13px; }
.crlp .pe-where { margin-top: 14px; background: #fff; border-radius: 8px; padding: 8px 10px; font-size: 10.5px; line-height: 1.45; color: #6b6f78; }
.crlp .pe .pe-stage { padding: 14px; height: 100%; }
.crlp .pe-canvas { height: 100%; overflow: hidden; border-radius: 8px; box-shadow: 0 6px 20px rgba(20, 30, 50, .18); background: #F2F2EF; }
.crlp .eng.preview .pe-cust { display: flex; }
.crlp .eng.preview .pe-body { grid-template-columns: 0 minmax(0, 1fr); height: calc(100% - 80px); }
.crlp .eng.preview .pe-panel { padding: 0; }
.crlp .eng.preview .ns-tag, .crlp .eng.preview .np-came { opacity: 0 !important; }
.crlp .eng.preview .ns-sec.fresh { outline-color: transparent; }
.crlp .np { font-size: 1.12cqw; }
.crlp .np .ns-sec.in { max-height: 90em; }
.crlp .np-crumbs { font-size: .85em; color: #636970; padding: 1em 1.8em .4em; }
.crlp .np-crumbs i { font-style: normal; margin: 0 .3em; }
.crlp .np-crumbs b { color: #121316; }
.crlp .np-drop { margin: 1em 1.8em; background: #e3e9f8; border-radius: 6px; padding: 2.4em; text-align: center; color: #3056f5; font-weight: 700; transition: opacity .3s; }
.crlp .eng.has-pmain .np-drop { display: none; }
/* Top padding clear of the section's editor tag, so the tag never sits on the page's words. */
.crlp .np-prod { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 2.2em; padding: 2.2em 1.8em 1.8em; }
.crlp .np-gal > img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.crlp .np-gal div { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6em; margin-top: .6em; }
.crlp .np-gal div img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; }
.crlp .np-gal div img:first-child { outline: 2px solid #121316; outline-offset: -2px; }
.crlp .np-info small { font-size: .75em; font-weight: 700; letter-spacing: .12em; color: #636970; text-transform: uppercase; }
.crlp .np-info .np-h { font-size: 2.6em; line-height: 1; margin: .15em 0 .2em; }
.crlp .np-from { font-weight: 700; font-size: 1.2em; margin-bottom: .5em; }
.crlp .np-desc { color: #4b5057; line-height: 1.5; margin-bottom: 1em; }
/* Room at the top for the "came with it" badge, well clear of the step dots under it. */
.crlp .np-cfg { position: relative; background: #fff; padding: 2.2em 1.2em 1.2em; }
.crlp .np-came { position: absolute; top: -.6em; right: .8em; background: var(--ed); color: #fff; font-size: .8em; font-weight: 700; padding: .3em .7em; border-radius: 4px; box-shadow: 0 6px 14px rgba(48, 86, 245, .35); transition: opacity .3s; }
/* The stepper, without the line between the dots. */
.crlp .np-dots { display: flex; justify-content: space-between; margin-bottom: 1.2em; }
.crlp .np-dots span { position: relative; display: grid; justify-items: center; gap: .3em; font-size: .78em; color: #636970; padding: 0 .4em; text-align: center; }
.crlp .np-dots span i { font-style: normal; width: 2.2em; height: 2.2em; border-radius: 50%; background: #e6e6e1; display: grid; place-items: center; font-weight: 700; color: #121316; }
.crlp .np-dots span.cur { color: #121316; font-weight: 700; }
.crlp .np-dots span.cur i { background: #FFC300; }
.crlp .np-dots span.done i { background: #121316; color: #121316; }
.crlp .np-dots span.done i::after { content: ''; width: .55em; height: .3em; border-left: 2px solid #FFC300; border-bottom: 2px solid #FFC300; transform: rotate(-45deg) translate(.08em, -.08em); position: absolute; }
.crlp .np-pane[hidden] { display: none; }
.crlp .np-l { display: block; font-size: .85em; margin: .2em 0 .5em; text-transform: uppercase; letter-spacing: .04em; }
.crlp .np-l sup { color: #b3261e; }
.crlp .np-chips { display: flex; flex-wrap: wrap; gap: .4em; margin-bottom: .7em; }
.crlp .np-chips span { background: #efefea; padding: .35em .7em; font-size: .9em; transition: background .2s; }
.crlp .np-chips span.on { background: #FFC300; font-weight: 700; outline: 2px solid #121316; outline-offset: -2px; }
.crlp .np-wh { display: grid; grid-template-columns: 1fr 1fr; gap: .8em; }
.crlp .np-wh span { background: #efefea; padding: .6em .8em; color: #636970; font-size: .9em; }
.crlp .np-wh b { color: #121316; font-size: 1.1em; margin: 0 .2em; }
.crlp .np-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5em; margin-bottom: .8em; }
.crlp .np-cards span { background: #efefea; padding: .55em .6em; font-size: .85em; font-weight: 600; line-height: 1.25; transition: background .2s; }
.crlp .np-cards em, .crlp .np-checks em { display: block; font-style: normal; font-weight: 500; color: #636970; }
.crlp .np-cards span.on { outline: 2px solid #121316; outline-offset: -2px; background: #fff8d9; }
.crlp .np-checks { display: grid; gap: .4em; }
.crlp .np-checks span { display: flex; align-items: center; gap: .6em; background: #efefea; padding: .45em .6em; font-size: .85em; font-weight: 600; }
.crlp .np-checks span i { width: 1.1em; height: 1.1em; background: #fff; flex: none; display: grid; place-items: center; }
.crlp .np-checks span.on i { background: #121316; }
.crlp .np-checks span.on i::after { content: ''; width: .5em; height: .28em; border-left: 2px solid #FFC300; border-bottom: 2px solid #FFC300; transform: rotate(-45deg) translate(.03em, -.06em); }
.crlp .np-checks span em { margin-left: auto; }
.crlp .np-qty { display: inline-flex; gap: .25em; }
.crlp .np-qty span, .crlp .np-qty b { padding: .45em 1em; font-size: 1em; background: #efefea; }
.crlp .np-qty b { min-width: 3em; text-align: center; font-variant-numeric: tabular-nums; }
.crlp .np-help { font-size: .8em; color: #636970; margin-top: .5em; }
.crlp .np-price { display: flex; align-items: center; justify-content: space-between; gap: 1em; margin-top: 1em; padding: .7em .9em; background: #f6f6f2; }
.crlp .np-price span { font-weight: 700; font-size: .85em; text-transform: uppercase; letter-spacing: .06em; color: #636970; }
.crlp .np-price small { display: block; text-transform: none; letter-spacing: 0; font-weight: 600; color: #121316; font-size: 1.05em; margin-top: .15em; }
.crlp .np-price b { font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; font-weight: 800; font-size: 2.3em; font-variant-numeric: tabular-nums; transition: color .3s; line-height: 1.1; }
.crlp .np-price b.bump { color: #b3261e; }
.crlp .np-cart { background: #FFC300; text-align: center; padding: .7em; margin-top: .9em; font-size: 1.05em; transition: box-shadow .3s, transform .3s; }
.crlp .np-cart.go { box-shadow: 0 0 0 .35em rgba(255, 195, 0, .35); transform: translateY(-1px); }
.crlp .np-leave { display: flex; justify-content: space-between; gap: 1em; margin-top: .8em; font-size: .82em; color: #3c4046; background: #fff; padding: .6em .8em; }
.crlp .np-leave b { white-space: nowrap; color: #121316; }
.crlp .np-tabs { display: flex; gap: .5em; margin: 0 1.8em; padding-top: 2.2em; }
.crlp .np-tabs span { padding: .45em .9em; font-weight: 700; color: #636970; background: #e8e8e3; }
.crlp .np-tabs span.on { color: #fff; background: #121316; }
.crlp .np-tabtext { padding: 1em 1.8em 2em; color: #3c4046; line-height: 1.55; }

.crlp .ckfacts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 44px; }
.crlp .ckfacts li { font-size: 15px; line-height: 1.6; color: var(--muted); background: var(--soft); border-radius: 16px; padding: 18px 20px; }
.crlp .ckfacts b { display: block; color: var(--ink); margin-bottom: 4px; }

/* =============================================================================
   4. ONE PRODUCT PAGE, MANY PRODUCTS
   ============================================================================= */
.crlp .tplrow { display: grid; grid-template-columns: minmax(0, 0.8fr) 60px minmax(0, 1.4fr); align-items: center; }
.crlp .tplcard { background: #fff; border-radius: 18px; padding: 18px; box-shadow: 0 24px 60px -30px rgba(0, 40, 100, .3), 0 2px 6px rgba(0, 40, 100, .04); font-size: 12px; line-height: 1.4; }
.crlp .tpl-top { display: flex; align-items: center; gap: 8px; font-weight: 700; margin-bottom: 14px; }
.crlp .tpl-top svg { width: 15px; height: 15px; color: var(--ed); flex: none; }
.crlp .tpl-top em { font-style: normal; font-size: 10px; background: var(--ed-soft); color: var(--ed-ink); border-radius: 20px; padding: 2px 8px; margin-left: auto; }
.crlp .tpl-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 8px; }
.crlp .tb { border-radius: 8px; padding: 9px 10px; color: #33415e; font-weight: 700; font-size: 11px; display: flex; align-items: center; gap: 7px; background: #eef2fc; }
.crlp .tb svg { width: 15px; height: 15px; color: var(--ed); flex: none; }
.crlp .tb.photo { grid-row: span 4; min-height: 150px; flex-direction: column; justify-content: center; text-align: center; background: #e5ebfa; }
.crlp .tpl-rule { margin-top: 16px; background: #f7f8fb; border-radius: 10px; padding: 10px 12px 12px; }
.crlp .tpl-rule p { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ed-ink); margin-bottom: 8px; }
.crlp .chk { display: flex; flex-wrap: wrap; gap: 6px; }
.crlp .chk span { display: inline-flex; align-items: center; gap: 5px; background: #fff; border-radius: 6px; padding: 4px 8px; font-weight: 600; font-size: 11px; color: #6b6f78; }
.crlp .chk span i { width: 12px; height: 12px; border-radius: 3px; background: #e3e5ea; display: grid; place-items: center; }
.crlp .chk span.on { color: #17181c; background: var(--ed-soft); }
.crlp .chk span.on i { background: var(--ed); }
.crlp .chk span.on i svg { width: 9px; height: 9px; color: #fff; }
.crlp .tplarrow { display: grid; place-items: center; color: #9fb3d1; }
.crlp .tplarrow svg { width: 30px; height: 30px; }
.crlp .tplout { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.crlp .mp { background: #F2F2EF; border-radius: 12px; overflow: hidden; color: #121316; box-shadow: 0 20px 44px -26px rgba(0, 20, 60, .45), 0 2px 6px rgba(0, 20, 60, .06); line-height: 1.35; }
.crlp .mp-bar { background: #121316; color: #fff; font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; font-weight: 800; text-transform: uppercase; font-size: 11px; padding: 7px 10px; display: flex; align-items: center; gap: 6px; }
.crlp .mp-bar img { width: 14px; height: 14px; }
.crlp .mp-in { padding: 10px; }
.crlp .mp-in img { border-radius: 4px; aspect-ratio: 1 / 1; object-fit: cover; margin-bottom: 8px; width: 100%; }
.crlp .mp-in small { font-size: 9.5px; font-weight: 700; letter-spacing: .1em; color: #636970; text-transform: uppercase; }
.crlp .mp-in b { display: block; font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; font-weight: 800; text-transform: uppercase; font-size: 19px; line-height: 1.05; margin: 2px 0 4px; }
.crlp .mp-in .pr { font-weight: 700; font-size: 12.5px; margin-bottom: 8px; }
.crlp .mp-steps { display: flex; justify-content: space-between; gap: 4px; font-size: 9px; color: #636970; margin-bottom: 8px; }
.crlp .mp-steps span:first-child { color: #121316; font-weight: 700; }
.crlp .mp-qty { display: flex; gap: 6px; margin-bottom: 8px; }
.crlp .mp-qty span { background: #fff; font-size: 11px; padding: 3px 9px; }
.crlp .mp-btn { background: #FFC300; text-align: center; font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; font-weight: 800; text-transform: uppercase; font-size: 11.5px; padding: 6px; }
.crlp .mp-lv { font-size: 10px; color: #636970; margin-top: 7px; }
.crlp .mp-lv b { color: #121316; display: inline; font-family: inherit; font-size: inherit; text-transform: none; margin: 0; line-height: inherit; }
.crlp .tplfacts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; margin-top: 56px; }
.crlp .tplfacts li { font-size: 15.5px; line-height: 1.65; color: var(--muted); }
.crlp .tplfacts b { display: block; color: var(--ink); margin-bottom: 4px; }
/* Every page of the shop: filled pills, no outlines. */
.crlp .every { margin-top: 44px; background: #fff; border-radius: 18px; padding: 22px 24px; box-shadow: 0 18px 44px -28px rgba(0, 40, 100, .25); display: flex; align-items: center; gap: 14px 22px; flex-wrap: wrap; }
.crlp .every p { font-size: 14px; font-weight: 800; color: var(--ink); }
.crlp .every ul { display: flex; flex-wrap: wrap; gap: 8px; }
.crlp .every li { background: var(--ed-soft); color: var(--ed-ink); border-radius: 999px; padding: 6px 13px; font-size: 13.5px; font-weight: 600; line-height: 1.4; }
/* The templates section on electric blue, as on the PriceWise page (25 Oct, Hamza: "electric blue is used less"):
   white words, the white cards with a deeper shadow. */
.crlp #templates.accent .tplarrow { color: rgba(255, 255, 255, .85); }
.crlp #templates.accent .mockup-note, .crlp #templates.accent .mockup-note b { color: #fff; }
.crlp #templates.accent .tplfacts li, .crlp #templates.accent .tplfacts b { color: #fff; }
.crlp #templates.accent .tplcard, .crlp #templates.accent .every { box-shadow: 0 26px 60px -26px rgba(0, 18, 64, .5), 0 2px 6px rgba(0, 18, 64, .08); }
.crlp #templates.accent .mp { box-shadow: 0 22px 48px -24px rgba(0, 18, 64, .55), 0 2px 6px rgba(0, 18, 64, .1); }

/* =============================================================================
   5. A WHOLE SHOP FROM A TRADE, one tab per trade
   ============================================================================= */
.crlp .chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 34px; }
.crlp .chip {
  appearance: none; border: 0; background: rgba(255, 255, 255, .1); color: #eaf2ff;
  border-radius: 999px; padding: 11px 20px; font-size: 14.5px; font-weight: 700; line-height: 1.3; cursor: pointer; display: inline-flex; align-items: center; gap: 9px; transition: background .15s, color .15s;
}
.crlp .chip:hover { background: rgba(255, 255, 255, .18); }
.crlp .chip[aria-selected="true"] { background: #fff; color: #0a1929; }
.crlp .chip i { width: 12px; height: 12px; border-radius: 3px; display: block; flex: none; }
.crlp .tpanel { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.8fr); gap: 40px; align-items: start; }
.crlp .tpanel[hidden] { display: none; }
.crlp .tinfo h3 { font-size: 30px; font-weight: 800; color: #fff; line-height: 1.15; margin-bottom: 6px; }
.crlp .tinfo .tl { font-size: 16px; color: rgba(255, 255, 255, .7); margin-bottom: 18px; }
/* The look's four colours, on a lighter chip so a dark swatch still shows on the navy band. */
.crlp .sw { display: inline-flex; gap: 6px; margin-bottom: 22px; background: rgba(255, 255, 255, .12); border-radius: 12px; padding: 6px; }
.crlp .sw i { width: 26px; height: 26px; border-radius: 7px; display: block; }
.crlp .tfacts { display: grid; gap: 8px; }
.crlp .tfacts li { background: rgba(255, 255, 255, .06); border-radius: 12px; padding: 11px 14px; font-size: 14.5px; line-height: 1.55; color: rgba(255, 255, 255, .78); }
.crlp .tfacts b { color: #fff; display: block; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 2px; }
/* "Any other trade": type what you make, and the drawn home page says it. */
.crlp .what { display: block; margin-bottom: 18px; }
.crlp .what span { display: block; font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, .85); margin-bottom: 7px; }
.crlp .what input {
  display: block; width: 100%; font: 600 16px/1.4 'Inter', sans-serif; color: #0a1929; background: #fff; border: 0; border-radius: 10px;
  padding: 12px 14px; box-shadow: none; margin: 0;
}
.crlp .what input:focus { outline: 3px solid #7cc4ff; outline-offset: 2px; }
/* The ready-made shops on white, right after the dark hero (24 Oct, Hamza: the ConfigKit page's order):
   dark words, light blue-grey chips and fact cards, the picked chip in navy. */
.crlp #trade .chip { background: #eef3fb; color: #0a1929; }
.crlp #trade .chip:hover { background: #e2eaf7; }
.crlp #trade .chip[aria-selected="true"] { background: #0a1929; color: #fff; }
.crlp #trade .tinfo h3 { color: #0a1929; }
.crlp #trade .tinfo .tl { color: #475569; }
.crlp #trade .sw { background: #e3eaf6; }
.crlp #trade .tfacts li { background: #f3f6fb; color: #475569; }
.crlp #trade .tfacts b { color: #0a1929; }
.crlp #trade .what span { color: #334155; }
.crlp #trade .what input { background: #f3f6fb; }
.crlp #trade .what input:focus { outline-color: #0066ff; }
.crlp #trade .example-label { color: #0066ff; }
.crlp #trade .shopm { box-shadow: 0 24px 56px rgba(15, 35, 75, .18); }
.crlp #trade .btn-secondary { background: #0a1929; color: #fff; }
.crlp #trade .btn-secondary:hover { background: #13273f; color: #fff; }
.crlp #trade .trade-note { color: #475569; }
.crlp #trade .wiz li { color: #475569; background: #f3f6fb; }
.crlp #trade .wiz b { color: #0a1929; }
/* The shop it builds, drawn from the kit itself: the kit's own words, photographs and look. */
.crlp .shopm { border-radius: 14px; overflow: hidden; box-shadow: 0 30px 70px rgba(0, 0, 0, .5); background: var(--steel); color: var(--ink2); container-type: inline-size; line-height: 1.4; }
.crlp .shopm .in { font-size: 1.45cqw; }
.crlp .sm-util { background: var(--steel); color: rgba(255, 255, 255, .82); font-size: .8em; padding: .7em 1.8em; display: flex; justify-content: space-between; gap: 1em; }
.crlp .sm-head { background: var(--hd); color: var(--hdi); display: flex; align-items: center; gap: 1.2em; padding: 1em 1.8em; }
.crlp .sm-logo { display: flex; align-items: center; gap: .6em; font-family: var(--hf); font-weight: 700; font-size: 1.2em; text-transform: var(--up); white-space: nowrap; }
.crlp .sm-logo img { width: 1.6em; height: 1.6em; object-fit: contain; }
.crlp .sm-nav { display: flex; gap: 1.4em; margin-left: auto; font-size: .9em; font-weight: 600; }
.crlp .sm-cta { background: var(--acc); color: var(--acci); padding: .55em 1.1em; border-radius: var(--rad); font-size: .9em; font-weight: 700; white-space: nowrap; }
.crlp .sm-hero { position: relative; padding: 3.4em 1.8em; background: #222 center/cover no-repeat; color: #fff; }
.crlp .sm-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 9, 10, .82), rgba(8, 9, 10, .3)); }
.crlp .sm-hero.plain { background: var(--hd); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 2em; align-items: stretch; }
.crlp .sm-hero.plain::before { display: none; }
/* Any other trade: where the one photo the wizard asks for goes. Filled, no outline, no made-up photo. */
.crlp .sm-slot { position: relative; display: grid; justify-items: center; align-content: center; gap: .45em; text-align: center; background: rgba(255, 255, 255, .07); border-radius: calc(var(--rad) + 8px); padding: 1.6em 1.4em; color: rgba(255, 255, 255, .72); }
.crlp .sm-slot svg { width: 2.6em; height: 2.6em; color: var(--accl); margin-bottom: .2em; }
.crlp .sm-slot .sl-b { font-weight: 700; font-size: 1.05em; color: #fff; line-height: 1.3; }
.crlp .sm-slot .sl-s { font-size: .82em; line-height: 1.45; max-width: 17em; }
.crlp .sm-hero > div { position: relative; max-width: 31em; }
.crlp .sm-hero small { display: block; font-size: .72em; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--accl); margin-bottom: .8em; }
.crlp .sm-hero .sm-h { font-family: var(--hf); font-weight: var(--hw); text-transform: var(--up); font-size: 3em; line-height: 1; margin-bottom: .35em; letter-spacing: var(--ls); color: #fff; overflow-wrap: anywhere; }
.crlp .sm-hero .sm-h em { font-style: normal; color: var(--accl); }
.crlp .sm-hero p { font-size: 1em; line-height: 1.5; color: rgba(255, 255, 255, .86); margin-bottom: 1.2em; }
.crlp .sm-b { display: inline-block; padding: .65em 1.2em; border-radius: var(--rad); font-size: .9em; font-weight: 700; margin: 0 .5em .4em 0; }
.crlp .sm-b1 { background: var(--acc); color: var(--acci); }
.crlp .sm-b2 { background: rgba(255, 255, 255, .2); color: #fff; }
.crlp .sm-trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1em; background: var(--trust); color: var(--trusti); padding: 1em 1.8em; font-size: .82em; font-weight: 700; }
.crlp .sm-prods { background: var(--base); padding: 1.8em; }
.crlp .sm-prods .sm-ph { font-family: var(--hf); font-weight: var(--hw); text-transform: var(--up); font-size: 1.7em; margin-bottom: .8em; letter-spacing: var(--ls); line-height: 1.1; }
.crlp .sm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1em; }
.crlp .sm-card { background: #fff; border-radius: var(--rad); overflow: hidden; }
.crlp .sm-card img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.crlp .sm-card div { padding: .8em; }
.crlp .sm-card small { font-size: .7em; letter-spacing: .1em; text-transform: uppercase; color: var(--mut); font-weight: 700; }
.crlp .sm-card b { display: block; font-family: var(--hf); font-weight: var(--hw); text-transform: var(--up); font-size: 1.15em; margin: .15em 0 .3em; line-height: 1.15; }
.crlp .sm-card span { font-weight: 700; font-size: .85em; }
.crlp .sm-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1em; }
.crlp .sm-steps div { background: #fff; border-radius: var(--rad); padding: 1.1em 1em 1.2em; }
.crlp .sm-steps i { font-style: normal; display: grid; place-items: center; width: 2em; height: 2em; border-radius: 50%; background: var(--acc); color: var(--acci); font-weight: 800; font-size: .9em; margin-bottom: .7em; }
.crlp .sm-steps b { display: block; font-family: var(--hf); font-weight: var(--hw); font-size: 1.15em; margin-bottom: .3em; line-height: 1.2; }
.crlp .sm-steps span { font-size: .85em; line-height: 1.5; color: var(--mut); }
/* The jewellery shop is light: its hero is the pink band with its photo beside the words, as the kit draws it. */
.crlp .shopm.light .sm-hero.plain { background: var(--band); color: var(--ink2); }
.crlp .shopm.light .sm-hero .sm-h { color: var(--ink2); }
.crlp .shopm.light .sm-hero p { color: var(--mut); }
.crlp .shopm.light .sm-b2 { background: #fff; color: var(--ink2); }
.crlp .shopm.light .sm-logo { font-weight: 400; letter-spacing: .04em; }
.crlp .shopm.light .sm-card { background: var(--band); }
.crlp .sm-photo { border-radius: calc(var(--rad) + 6px); min-height: 12em; background: center/cover no-repeat; }
.crlp .wiz { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 60px; }
.crlp .wiz li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .72); background: rgba(255, 255, 255, .05); border-radius: 16px; padding: 18px; }
.crlp .wiz li i { font-style: normal; width: 30px; height: 30px; border-radius: 50%; background: var(--grad); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 13px; }
.crlp .wiz b { display: block; color: #fff; }

/* =============================================================================
   6. THE EDITOR, the real one, with its parts pointed out (pins sit on empty space or
   just above the picture, never on its words)
   ============================================================================= */
.crlp .edshot { max-width: 1140px; margin: 0 auto; }
.crlp .ed-in { position: relative; }
.crlp .ed-hint { display: none; }
.crlp .edshot .frame { border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 40px 90px -30px rgba(0, 30, 80, .45), 0 2px 8px rgba(0, 30, 80, .08); }
.crlp .pin {
  position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: var(--grad); color: #fff;
  display: grid; place-items: center; font-weight: 800; font-size: 15px; line-height: 1; box-shadow: 0 0 0 5px rgba(0, 102, 255, .22), 0 8px 18px rgba(0, 60, 160, .4);
}
.crlp .pin.top { top: -26px; }
.crlp .pinlist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 1140px; margin: 40px auto 0; }
.crlp .pinlist li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; font-size: 15px; line-height: 1.6; color: var(--muted); background: var(--soft); border-radius: 16px; padding: 16px 18px 18px; }
.crlp .pinlist li i { font-style: normal; width: 30px; height: 30px; border-radius: 50%; background: var(--grad); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 13px; }
.crlp .pinlist b { display: block; color: var(--ink); }

/* =============================================================================
   7. ANY THEME: one real screenshot, wide (the top of the banner page, from its header down
   to the price), and under it a row: what it shows on the left, the three themes it was
   bought through as three filled cards on the right. On a phone the picture slides inside
   its own box, like the editor screenshot.
   ============================================================================= */
.crlp .throw { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; max-width: 1140px; margin: 0 auto; }
.crlp .thpic .frame { border-radius: 14px; overflow: hidden; box-shadow: 0 30px 70px -30px rgba(0, 30, 80, .4), 0 2px 8px rgba(0, 30, 80, .08); background: #fff; }
.crlp .th-hint { display: none; }
.crlp .thside { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 2.15fr); gap: 16px; align-items: stretch; }
.crlp .th-say { background: var(--soft); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; justify-content: flex-start; gap: 6px; }
.crlp .th-h { font-size: 12px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: #005ce6; }
.crlp .th-same { font-size: 15px; line-height: 1.6; color: var(--muted); }
.crlp .thlist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.crlp .thlist li { display: flex; align-items: center; gap: 14px; background: #fff; border-radius: 16px; padding: 18px; box-shadow: 0 18px 44px -28px rgba(0, 40, 100, .28); font-size: 15px; line-height: 1.5; color: var(--muted); }
.crlp .thlist i { width: 30px; height: 30px; border-radius: 50%; background: var(--grad); color: #fff; display: grid; place-items: center; flex: none; }
.crlp .thlist i svg { width: 15px; height: 15px; }
.crlp .thlist b { display: block; color: var(--ink); font-size: 17px; }
.crlp .note { max-width: 780px; margin: 44px auto 0; text-align: center; font-size: 16px; line-height: 1.7; color: var(--muted); }
.crlp .note + .note { margin-top: 20px; }
.crlp .note b { color: var(--ink); }

/* =============================================================================
   8. THE LETTER
   ============================================================================= */
.crlp .letter { max-width: 760px; margin: 0 auto; background: rgba(255, 255, 255, .06); border-radius: 22px; padding: 48px; }
.crlp .letter .lt-ti { font-size: 12px; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase; color: #7cc4ff; margin-bottom: 22px; }
.crlp .letter p { font-size: 18px; line-height: 1.8; color: rgba(255, 255, 255, .85); }
.crlp .letter p + p { margin-top: 18px; }
.crlp .signrow { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 40px; flex-wrap: wrap; }
.crlp .sig { font-family: 'Fraunces', Georgia, serif; font-style: italic; font-size: 34px; color: #fff; line-height: 1.2; }
.crlp .who { display: flex; align-items: center; gap: 12px; }
/* His face, as a picture the way the home and ConfigKit pages print it. His initials only when
   there is no picture at all, never on top of it. */
.crlp .av { width: 46px; height: 46px; border-radius: 50%; flex: none; display: grid; place-items: center; background: #1d3a66; color: #cfe6ff; font-weight: 800; font-size: 14px; letter-spacing: .02em; overflow: hidden; }
.crlp .av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.crlp .who b { display: block; color: #fff; }
.crlp .who span:not(.av) { font-size: 13px; color: rgba(255, 255, 255, .6); }

/* =============================================================================
   9. PRICING: pick how you pay, one card. Two radios and :has(), no script.
   ============================================================================= */
.crlp .pswitch { max-width: 980px; margin: 0 auto; }
.crlp .psw-r { position: absolute; opacity: 0; pointer-events: none; }
.crlp .psw-tabs { display: flex; justify-content: center; gap: 4px; background: rgba(0, 22, 66, .22); border-radius: 14px; padding: 5px; width: max-content; margin: 0 auto 26px; }
.crlp .psw-tabs label { padding: 11px 24px; border-radius: 10px; font-weight: 700; font-size: 15px; cursor: pointer; color: rgba(255, 255, 255, .88); line-height: 1.3; }
.crlp .pswitch:has(#cr-yearly:checked) label[for="cr-yearly"],
.crlp .pswitch:has(#cr-once:checked) label[for="cr-once"] { background: #fff; color: #0052CC; }
.crlp .pswitch:has(.psw-r:focus-visible) .psw-tabs { outline: 3px solid #fff; outline-offset: 3px; }
.crlp .pcard { background: #fff; color: var(--ink); border-radius: 24px; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); overflow: hidden; box-shadow: 0 40px 90px rgba(0, 20, 70, .35); }
.crlp .pc-main { padding: 40px 42px; display: flex; flex-direction: column; }
.crlp .pc-side { padding: 40px 36px; background: #eef3fb; display: flex; flex-direction: column; }
.crlp .pc-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.crlp .pc-lbl { font-size: 14px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: #005ce6; }
.crlp .pc-tag { font-size: 12px; font-weight: 700; color: #0052CC; background: rgba(0, 102, 255, .1); border-radius: 999px; padding: 4px 11px; }
.crlp .pc-fig { display: flex; align-items: baseline; gap: 8px; margin: 16px 0 6px; }
.crlp .pc-fig b { font-size: 64px; font-weight: 900; letter-spacing: -.03em; line-height: 1; }
.crlp .pc-fig span { font-size: 18px; font-weight: 700; color: #5d6b82; }
.crlp .pc-side .pc-fig b { font-size: 44px; }
.crlp .pc-side .pc-lbl { color: #5d6b82; }
.crlp .pc-txt { font-size: 16px; line-height: 1.7; color: #4a5568; margin: 12px 0 26px; }
.crlp .pc-side .pc-txt { flex: 1; }
.crlp .pc-go { display: block; text-align: center; border-radius: 12px; padding: 16px; font-weight: 700; font-size: 16px; line-height: 1.3; text-decoration: none; transition: transform .25s ease, box-shadow .25s ease, background .2s; }
.crlp .pc-main .pc-go { background: var(--grad); color: #fff; box-shadow: 0 14px 32px rgba(0, 102, 255, .35); }
.crlp .pc-main .pc-go:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(0, 102, 255, .45); color: #fff; }
.crlp .pc-side .pc-go { color: #0052CC; background: #dbe7fb; }
.crlp .pc-side .pc-go:hover { background: #cfdff9; color: #0052CC; }
.crlp .pc-small { margin-top: 12px; font-size: 13.5px; line-height: 1.55; color: #5d6b82; text-align: center; }
.crlp .pswitch .on { display: none; }
.crlp .pswitch:has(#cr-once:checked) .yr { display: none; }
.crlp .pswitch:has(#cr-once:checked) .on { display: block; }
.crlp .pswitch:has(#cr-once:checked) .pc-fig.on { display: flex; }
.crlp .pc-foot { max-width: 980px; margin: 0 auto; text-align: center; font-size: 15.5px; line-height: 1.8; color: rgba(255, 255, 255, .92); }
.crlp .pc-foot p + p { margin-top: 6px; }
.crlp .pc-foot b { color: #fff; }
.crlp .pc-foot a { color: #fff; text-underline-offset: 3px; }
.crlp .pc-foot .pc-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.crlp .pc-foot .pc-links a { text-decoration: none; background: rgba(255, 255, 255, .14); border-radius: 999px; padding: 8px 18px; font-weight: 700; font-size: 14.5px; }
.crlp .pc-foot .pc-links a:hover { background: rgba(255, 255, 255, .24); }
.crlp .dts-facts.dts-facts { margin: 28px auto 30px; }

/* =============================================================================
   10. DOES YOUR JOB NOT FIT, 11. QUESTIONS, 12. THE LAST WORD
   ============================================================================= */
.crlp .get-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 56px; align-items: start; }
.crlp .get-grid .sdesc + .sdesc { margin-top: 16px; }
.crlp .get-grid .stitle { font-size: 44px; }
.crlp .cta-card { background: #fff; border-radius: 22px; padding: 34px; box-shadow: 0 30px 70px -30px rgba(0, 40, 100, .32), 0 2px 8px rgba(0, 40, 100, .05); }
.crlp .cta-card h3 { font-size: 24px; font-weight: 800; margin-bottom: 12px; color: var(--ink); line-height: 1.25; }
.crlp .cta-card p { font-size: 15.5px; line-height: 1.7; color: var(--muted); }
.crlp .cta-card .btn { width: 100%; margin-top: 22px; }
.crlp .cta-card .cc-note { font-size: 13px; margin-top: 14px; text-align: center; }
/* Questions as separate filled boxes with a gap, never rows split by rules. */
.crlp .qa { max-width: 860px; margin: 0 auto; display: grid; gap: 10px; }
.crlp .qa details { background: rgba(255, 255, 255, .06); border-radius: 14px; transition: background .2s; }
.crlp .qa details[open] { background: rgba(255, 255, 255, .1); }
.crlp .qa summary { list-style: none; cursor: pointer; padding: 20px 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 18px; font-weight: 700; color: #fff; line-height: 1.4; border-radius: 14px; }
.crlp .qa summary::-webkit-details-marker { display: none; }
.crlp .qa summary::marker { content: ''; }
.crlp .qa .qa-ic { width: 20px; height: 20px; flex: none; color: #7cc4ff; transition: transform .2s ease; }
.crlp .qa details[open] .qa-ic { transform: rotate(180deg); }
.crlp .qa details p { font-size: 16.5px; line-height: 1.8; color: rgba(255, 255, 255, .8); padding: 0 22px 22px; max-width: 780px; }
.crlp .qa details p a { color: #9fd0ff; }
/* The questions on a light section (24 Oct, the ConfigKit page's order): white rows, dark words, blue arrows. */
.crlp .section.soft .qa details { background: #fff; transition: box-shadow .2s; }
.crlp .section.soft .qa details[open] { background: #fff; box-shadow: 0 14px 34px rgba(15, 35, 75, .08); }
.crlp .section.soft .qa summary { color: #0a1929; }
.crlp .section.soft .qa .qa-ic { color: #0066ff; }
.crlp .section.soft .qa details p { color: #475569; }
.crlp .section.soft .qa details p a { color: #0052cc; }
.crlp .get { text-align: center; max-width: 820px; margin: 0 auto; }
.crlp .get .btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 34px; }
.crlp .get-ask { margin-top: 22px; font-size: 15px; color: rgba(255, 255, 255, .88); }
.crlp .get-ask a { color: #fff; font-weight: 700; text-underline-offset: 3px; }

/* =============================================================================
   RESPONSIVE
   ============================================================================= */
@media (max-width: 1180px) {
  .crlp .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 54px; }
  .crlp .hero h1 { font-size: 50px; }
  .crlp .hero-sub { max-width: 640px; }
}
@media (max-width: 1024px) {
  .crlp .hero { padding: 150px 28px 80px; }
  .crlp .section { padding: 84px 28px; }
  .crlp .stitle { font-size: 40px; }
  .crlp .bento { grid-template-columns: minmax(0, 1fr); }
  .crlp .bx.wide { grid-column: span 1; }
  .crlp .bx.split { grid-template-columns: minmax(0, 1fr); }
  .crlp .qflow { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .crlp .qarrow { transform: rotate(90deg); height: 34px; }
  .crlp .pinlist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crlp .tplrow { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .crlp .tplarrow { transform: rotate(90deg); height: 50px; }
  .crlp .tpanel { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  /* Any other trade: the name and the box to type in come first, the drawn page that changes right
     under it, then the notes. */
  .crlp #tp-any .tinfo { display: contents; }
  .crlp #tp-any .tinfo h3, .crlp #tp-any .tinfo .tl, .crlp #tp-any .tinfo .what { order: -1; margin-bottom: 0; }
  .crlp #tp-any .tinfo .tl { margin-top: -26px; }
  .crlp #tp-any .tinfo .tfacts { order: 1; }
  .crlp .ckfacts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Three short columns of 15px words wrap at two or three words a line here: one column each. */
  .crlp .tplfacts, .crlp .wiz { grid-template-columns: minmax(0, 1fr); }
  .crlp .tplfacts { gap: 16px; margin-top: 44px; }
  .crlp .wiz { gap: 12px; margin-top: 44px; }
  .crlp .throw { gap: 20px; }
  .crlp .thside { grid-template-columns: minmax(0, 1fr); }
  .crlp .thlist li { flex-direction: column; align-items: flex-start; gap: 10px; }
  /* The drawn product page keeps readable words on a tablet. */
  .crlp .np { font-size: max(1.12cqw, 11px); }
  .crlp .np-dots span { font-size: .85em; }
  .crlp .get-grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .crlp .minis { grid-template-columns: minmax(0, 1fr); }
  .crlp .ck-body { grid-template-columns: 150px minmax(0, 1fr); }
  .crlp .ck-side { display: none; }
  .crlp .eng-steps { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}
@media (max-width: 760px) {
  .crlp .eng-win { height: 560px; }
  .crlp .ck-body { grid-template-columns: minmax(0, 1fr); }
  .crlp .ck-pal { display: none; }
  .crlp .ck-top .ck-save, .crlp .ck-top .ck-back, .crlp .ck-mode { display: none; }
  .crlp .ck-tabs em { display: none; }
  .crlp .ck-tabs span:not(.on) { font-size: 0; gap: 0; padding: 5px 7px; }
  .crlp .ck-tabs span:not(.on) i { font-size: 10px; }
  .crlp .pe-body { grid-template-columns: 0 minmax(0, 1fr); }
  .crlp .pe-panel { padding: 0; }
  .crlp .pe .hb-page, .crlp .pe-with { display: none; }
  /* On a phone the drawn product page keeps readable words: one column, the photo short. */
  .crlp .np { font-size: max(2.4cqw, 11px); }
  .crlp .np-prod { grid-template-columns: minmax(0, 1fr); gap: 1.4em; }
  .crlp .np-gal div { display: none; }
  .crlp .np-gal > img { aspect-ratio: 2 / 1; }
  .crlp .hb-canvas.tab { width: 80%; }
  .crlp .hb-canvas.phone { width: 58%; }
  .crlp .thlist { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .crlp .thlist li { flex-direction: row; align-items: center; }
  /* Any other trade on a phone: the words first, the photo's place under them, short and wide. */
  .crlp .sm-hero.plain { grid-template-columns: minmax(0, 1fr); gap: 1.2em; }
  .crlp .sm-slot { grid-template-columns: auto minmax(0, 1fr); justify-items: start; text-align: left; column-gap: 1em; row-gap: .15em; padding: 1em 1.2em; }
  .crlp .sm-slot svg { grid-row: span 2; margin: 0; }
  .crlp .ns.np .ns-nav { display: none; }
  .crlp .ns.np .ns-cta { margin-left: auto; }
  .crlp .hb-body { grid-template-columns: minmax(0, 1fr); height: auto; }
  .crlp .hb-panel { padding: 10px 11px 12px; }
  .crlp .hb-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .crlp .hb-h.plain, .crlp .hb-tiles.small { display: none; }
  .crlp .hb-panel .hb-h { margin-top: 2px; }
  .crlp .hb-stage { height: 400px; }
  .crlp .hb-page em, .crlp .hb-search { display: none; }
  /* Above the page, the Style view lays its parts side by side, and both views keep one height so
     nothing under the editor moves when the view changes. */
  .crlp .hb-pv-add, .crlp .hb-pv-style, .crlp .hb-pv-sec { min-height: 168px; }
  /* A section's settings lay out side by side: background, then space, then corners and shadow. */
  .crlp .hb-pv-sec { display: none; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 14px; align-content: start; }
  .crlp .hb-panel.sec .hb-pv-sec { display: grid; }
  .crlp .hb-sh { grid-column: 1 / -1; }
  .crlp .hb-stabs { display: none; }
  .crlp .hb-pv-sec .hb-sg { margin-top: 0; }
  .crlp .hb-looks { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
  .crlp .hb-look { grid-template-columns: minmax(0, 1fr); align-items: start; align-content: start; }
  .crlp .hb-cols, .crlp .hb-sels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crlp .hb-sels .hb-tgl { grid-column: 1; grid-row: 2; }
  .crlp .hb-pv-style .hb-h.plain { display: none; }
  .crlp .hb-cols { margin: 7px 0; }
  .crlp .tplout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crlp .tplout .mp:nth-child(3) { display: none; }
  .crlp .pcard { grid-template-columns: minmax(0, 1fr); }
  .crlp .pp, .crlp .tp { grid-template-columns: minmax(0, 1fr); }
  .crlp .tp img { max-width: 160px; }
  .crlp .shopm .in { font-size: 2.6cqw; }
  .crlp .sm-nav, .crlp .sm-util span + span { display: none; }
  .crlp .sm-cta { margin-left: auto; }
  .crlp .sm-trust { grid-template-columns: 1fr 1fr; }
  .crlp .sm-grid { grid-template-columns: 1fr 1fr; }
  .crlp .sm-grid .sm-card:nth-child(3) { display: none; }
  .crlp .sm-steps { grid-template-columns: 1fr 1fr; }
  .crlp .sm-steps div:nth-child(3) { display: none; }
  .crlp .every { padding: 18px; }
}
@media (max-width: 640px) {
  .crlp .hero { padding: 120px 16px 60px; }
  .crlp .hero h1 { font-size: 36px; }
  .crlp .hero-sub { font-size: 17px; }
  .crlp .hero-cta { flex-direction: column; align-items: stretch; }
  .crlp .section { padding: 64px 16px; }
  .crlp .stitle, .crlp .get-grid .stitle { font-size: 31px; }
  .crlp .sdesc { font-size: 17px; }
  .crlp .shead { margin-bottom: 40px; }
  .crlp .eyebrow { letter-spacing: 1.8px; padding: 7px 16px; }
  .crlp .bx { padding: 22px; }
  .crlp .bx h3 { font-size: 22px; }
  .crlp .pinlist, .crlp .ckfacts { grid-template-columns: minmax(0, 1fr); }
  /* The editor screenshot keeps a readable size and slides inside its own box, pins and all.
     The box clips its top edge too, so its top room holds a whole pin over the picture: a .pin.top
     is centred 26px above it, 17px half height plus its 5px ring, so 48px, and 56px gives its
     shadow room as well. */
  .crlp .ed-scroll { overflow-x: auto; overscroll-behavior-x: contain; padding-top: 56px; border-radius: 14px; -webkit-overflow-scrolling: touch; }
  .crlp .ed-scroll:focus-visible, .crlp .th-scroll:focus-visible { outline: 3px solid #7cc4ff; outline-offset: 3px; }
  .crlp .ed-in { width: 1000px; }
  .crlp .ed-hint, .crlp .th-hint { display: block; margin-top: 12px; text-align: center; font-size: 14px; color: var(--muted); }
  /* The theme screenshot likewise, sliding in its own box, at twice the box's width: then the box
     holds exactly one half of the page at a time, the logo and the photograph at rest, and slid
     all the way, the name, the price and the words whole (they start at 53% of the picture). The
     box carries the shadow, so no shadow is cut off at its edges. */
  .crlp .th-scroll { overflow-x: auto; overscroll-behavior-x: contain; border-radius: 14px; -webkit-overflow-scrolling: touch; box-shadow: 0 24px 50px -28px rgba(0, 30, 80, .4), 0 2px 8px rgba(0, 30, 80, .08); background: #fff; }
  .crlp .th-scroll .frame { width: 200%; border-radius: 0; box-shadow: none; }
  .crlp .pinlist li i { background: var(--grad); }
  .crlp .pc-main, .crlp .pc-side { padding: 28px 22px; }
  .crlp .pc-fig b { font-size: 50px; }
  .crlp .letter { padding: 24px; }
  .crlp .letter p { font-size: 16.5px; }
  .crlp .qa summary { font-size: 16.5px; padding: 17px 18px; }
  .crlp .qa details p { padding: 0 18px 18px; font-size: 16px; }
  .crlp .hb-devs button { width: 34px; height: 30px; }
  .crlp .chip { padding: 9px 14px; font-size: 13.5px; }
  .crlp .hb-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crlp .hb-tile { height: 56px; }
  .crlp .hb-page { display: none; }
  .crlp .hb-pv-add, .crlp .hb-pv-style, .crlp .hb-pv-sec { min-height: 202px; }
  .crlp .hb-pv-sec { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "hd hd" "bg sp" "cs sp"; row-gap: 10px; }
  .crlp .hb-pv-sec .hb-sh { grid-area: hd; margin-bottom: 0; }
  .crlp .hb-pv-sec .g-bg { grid-area: bg; }
  .crlp .hb-pv-sec .g-sp { grid-area: sp; }
  .crlp .hb-pv-sec .g-cs { grid-area: cs; }
  .crlp .hb-looks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crlp .hb-look { min-height: 50px; }
  .crlp .qcard { font-size: 12px; }
  .crlp .pt { padding: 14px 12px; }
  .crlp .pt table { font-size: 11.5px; }
  .crlp .pt td, .crlp .pt thead tr + tr th { padding: 7px 6px; }
  .crlp .pt td:first-child { white-space: normal; }
  .crlp .thlist li { padding: 14px 16px; }
  .crlp .eng-steps button { padding: 14px; }
  .crlp .ck-name { font-size: 13px; }
  .crlp .ck-top { gap: 8px; }
  .crlp .psw-tabs label { padding: 10px 18px; }
  .crlp .every li { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .crlp .ns-sec, .crlp .hb-canvas, .crlp .hb-ghost, .crlp .hb-cursor, .crlp .hb-body, .crlp .hb-pick, .crlp .hb-drop, .crlp .ck-scroll, .crlp .ck-blk, .crlp .eng-steps button::after, .crlp .hb-steps button::after { transition: none !important; }
  .crlp .hb-panel.style .hb-pv-style, .crlp .ns-h.editing .ns-caret { animation: none; }
}

/* 22 Oct: shop-owner clarity. Essential explanations stay outside miniature screens. */
.crlp .gt { background: none; color: #0066ee; -webkit-text-fill-color: currentColor; }
.crlp .section.dk .gt { background: none; color: #7cc4ff; }
.crlp .section.accent .gt { background: none; color: #fff; }
.crlp .hero .gt-d { background: none; color: #61b9ff; -webkit-text-fill-color: currentColor; }
.crlp .section { padding-top: 88px; padding-bottom: 88px; }
.crlp .shead { margin-bottom: 44px; }
.crlp .hero-sub { margin-bottom: 16px; }
.crlp .hero-scope { font-size: 15px; line-height: 1.6; color: #c4d8ee; margin-bottom: 24px; }
/* Under the hero buttons, as on the PriceWise hero (25 Oct, Hamza picked design C): the PriceWise reviews line
   (or the maker line), then two soft buttons, no underlined links. */
.crlp .hero-proof { display: flex; align-items: flex-start; gap: 9px; margin-top: 22px; font-size: 14px; line-height: 1.45; color: rgba(255, 255, 255, .7); }
.crlp .hero-proof b { color: #fff; }
.crlp .hp-stars { display: inline-flex; gap: 2px; color: #ffc94d; flex-shrink: 0; padding-top: 3px; }
.crlp .hp-stars svg { width: 15px; height: 15px; }
.crlp .herostudio { margin-top: 22px; }
.crlp .hero-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.crlp .hero-pill { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: #d7eaff; font-size: 14px; font-weight: 500; line-height: 1.4; text-decoration: none; transition: background .2s; }
.crlp .hero-pill b { color: #61b9ff; font-weight: 800; }
.crlp .hero-pill .hp-go { display: inline-flex; align-items: center; gap: 6px; color: #fff; font-weight: 700; }
.crlp .hero-pill:hover { background: rgba(255, 255, 255, .15); color: #d7eaff; text-decoration: none; }
.crlp .hero-pill:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(97, 185, 255, .65); }
@media (max-width: 640px) {
  .crlp .hero-pill { flex: 1 1 100%; justify-content: space-between; }
}
.crlp .hero-badge { letter-spacing: 0; text-transform: none; }
.crlp .demo-toggle { border: 0; border-radius: 8px; padding: 8px 12px; background: #e8effa; color: #16447c; font-size: 13px; font-weight: 700; line-height: 1.4; cursor: pointer; white-space: nowrap; }
.crlp .demo-toggle:hover { background: #d9e6f8; }
.crlp .demo-toggle:focus-visible { outline: 3px solid #7cc4ff; outline-offset: 3px; }
.crlp .hb-rng:focus-visible { outline: 3px solid #7cc4ff; outline-offset: 3px; }
.crlp .hero-toggle { background: #1e3c58; color: #e0efff; margin-left: 8px; }
.crlp .hero-toggle:hover { background: #2b4e6e; }
.crlp .hb-cap { align-items: start; }
.crlp .hb-cap > span:last-child { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
.crlp .example-label { color: #b9d5f3; font-size: 13px; font-weight: 700; line-height: 1.5; margin-bottom: 8px; }
.crlp .trade-note { max-width: 74ch; margin: 26px auto 0; font-size: 15px; line-height: 1.65; text-align: center; color: #c5d8eb; }
.crlp .section-action { margin-top: 28px; text-align: center; }
.crlp .wiz { align-items: stretch; margin-top: 28px; }
.crlp .bento, .crlp .minis { align-items: stretch; }
.crlp .bx.split { align-items: start; }
.crlp .bx { box-shadow: 0 12px 32px -22px rgba(0,40,100,.23); }
.crlp .bx-foot.bx-foot { margin-top: auto; }
.crlp .qflow { align-items: start; }
.crlp .qstep { display: block; }
.crlp .qcard { font-size: 14px; line-height: 1.5; padding: 18px; }
.crlp .qn { font-size: 14px; align-items: start; min-height: 26px; }
.crlp .qn i { flex: none; }
.crlp .q-f small, .crlp .q-l { font-size: 12px; }
.crlp .q-file { flex-wrap: wrap; }
.crlp .q-mt { font-size: 13px; }
.crlp .q-mail .from b { font-size: 14px; }
.crlp .q-mail .from small { font-size: 12px; }
.crlp .q-order { font-size: 13px; align-items: start; }
.crlp .qarrow { padding-top: 135px; }
.crlp .flow-result { padding: 14px 18px; background: #edf6f0; border-radius: 10px; color: #28513b; font-size: 15px; }
.crlp .flow-result b { color: #214532; }
.crlp .pt table { font-size: 14px; }
.crlp .pt .same { font-size: 14px; padding: 12px; }
.crlp .pt .same b { font-size: 22px; }
.crlp .pp-up, .crlp .pp-order { font-size: 13px; }
.crlp .pp-when { flex-wrap: wrap; }
.crlp .pp-when .cd { flex: 1; min-width: 100px; }
.crlp .pp-when .lv { margin-left: 0; }
.crlp .minis .mini { box-shadow: none; }
.crlp .minis .mini h3 { font-size: 18px; }
.crlp .eng-context { display: flex; align-items: start; justify-content: space-between; gap: 24px; margin-bottom: 16px; }
.crlp .eng-context > div { max-width: 72ch; }
.crlp .eng-context b { display: block; font-size: 16px; color: #172e4f; margin-bottom: 4px; }
.crlp .eng-context p { font-size: 15px; line-height: 1.6; color: #5d6b82; }
.crlp .eng-result { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 20px; background: #eef6f1; border-radius: 12px; margin-top: 18px; font-size: 16px; color: #315440; }
.crlp .eng-result b { font-size: 28px; line-height: 1.2; color: #254e35; font-variant-numeric: tabular-nums; }
.crlp .eng-result[hidden] { display: none; }
.crlp .eng .np-gal div { display: grid; }
.crlp .eng .np-gal > img { aspect-ratio: 4 / 3; }
.crlp .eng.preview .np { font-size: clamp(12px, 1.12cqw, 14px); }
.crlp .eng.preview .np-prod { align-items: start; padding-top: 1.6em; }
.crlp .eng.preview .np-cfg { padding-top: 1.2em; }
.crlp .eng:has(.pe:not([hidden])) .eng-win { height: auto; }
.crlp .eng .pe, .crlp .eng .pe-body, .crlp .eng .pe .pe-stage, .crlp .eng .pe-canvas { height: auto; }
.crlp .eng .pe-body { grid-template-rows: auto; align-items: start; }
.crlp .eng.preview .pe-body { grid-template-columns: minmax(0, 1fr); }
.crlp .eng.preview .pe-panel { display: none; }
/* The whole customer page is evidence, so let it grow instead of scrolling parts out of a fixed frame. */
.crlp .eng .pe .np { transform: none !important; }
.crlp .eng .np-tabs { flex-wrap: wrap; }
.crlp .eng:not(.preview) .np-tabs { padding-top: 2em; }
.crlp .eng .np .ns-sec.in { max-height: none; }
.crlp .eng .np-price { flex-wrap: wrap; }
.crlp .eng .np-price > span { flex: 1 1 140px; }
@media (max-width: 760px) {
  .crlp .eng .pe-body { grid-template-columns: minmax(0, 1fr); }
  .crlp .eng .pe-panel { display: none; }
  .crlp .eng .np { font-size: 13px; }
  .crlp .eng .np-prod { padding: 16px; gap: 16px; }
  .crlp .eng .ns-util { flex-wrap: wrap; gap: 4px 12px; padding: 10px 16px; }
  .crlp .eng .ns-util span + span { display: inline; }
  .crlp .eng .ns-head { flex-wrap: wrap; gap: 12px; padding: 12px 16px; }
  .crlp .eng .ns.np .ns-nav { display: flex; flex-wrap: wrap; order: 2; width: 100%; margin-left: 0; gap: 10px 16px; }
  .crlp .eng .np-crumbs { padding: 12px 16px 0; }
  .crlp .eng .np-tabs { margin: 0 16px; padding-top: 8px; }
  .crlp .eng .np-tabtext { padding: 12px 16px 16px; }
}
.crlp .eng-cap { max-width: 80ch; margin-left: auto; margin-right: auto; }
.crlp .ckfacts { align-items: start; }
.crlp .ckfacts li { background: none; padding: 0; }
.crlp .tplrow { align-items: start; }
.crlp .tplarrow { align-self: center; }
.crlp .tplout { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
.crlp .mockup-label { font-size: 14px; font-weight: 700; color: #315173; margin-bottom: 16px; }
.crlp .tpl-top { flex-wrap: wrap; }
.crlp .mp-in { padding: 16px; }
.crlp .mp-in small { font-size: 11px; }
.crlp .mp-in b { font-size: 24px; }
.crlp .mp-in .pr { font-size: 16px; }
.crlp .tplout .mp-in > img { aspect-ratio: 4 / 3; }
.crlp .mp-in .mp-lv b { display: inline; font: inherit; font-weight: 700; text-transform: none; }
.crlp .mp-steps { font-size: 12px; }
.crlp .mp-btn { font-size: 14px; padding: 10px; }
.crlp .mockup-note { max-width: 78ch; margin: 24px auto 0; text-align: center; font-size: 16px; line-height: 1.65; color: #5d6b82; }
.crlp .mockup-note b { color: #172e4f; }
.crlp .pinlist { align-items: start; }
.crlp .pinlist li { background: none; padding: 0; }
.crlp .pcard { background: none; box-shadow: none; overflow: visible; gap: 20px; align-items: start; }
.crlp .pc-main, .crlp .pc-side { padding: 32px; border-radius: 20px; }
.crlp .pc-main { background: #fff; }
.crlp .pc-includes ul { display: grid; gap: 20px; margin-top: 22px; }
.crlp .pc-includes li { color: #4a5568; font-size: 15px; line-height: 1.6; }
.crlp .pc-includes li b { display: block; color: #172e4f; font-size: 16px; margin-bottom: 4px; }
.crlp .purchase-scope { padding: 18px 22px; background: rgba(0,25,80,.18); border-radius: 12px; text-align: left; margin-bottom: 20px; }
.crlp .th-hint { display: block; text-align: center; font-size: 14px; color: #5d6b82; margin-top: 14px; }
.crlp .thside { align-items: start; }
.crlp .thlist { align-items: stretch; }
@media (max-width: 1024px) {
  .crlp .section { padding-top: 64px; padding-bottom: 64px; }
  .crlp .qarrow { padding-top: 0; }
}
@media (max-width: 640px) {
  .crlp .section { padding-top: 52px; padding-bottom: 52px; }
  .crlp .shead { margin-bottom: 30px; }
  .crlp .hero .hero-sub { font-size: 18px; }
  .crlp .hero-scope { font-size: 14px; }
  .crlp .hb-cap > span:last-child { justify-content: flex-start; }
  .crlp .hero-toggle { margin-left: 0; }
  .crlp .qcard { padding: 16px; }
  .crlp .qflow { gap: 12px; }
  .crlp .pt { padding: 16px; }
  .crlp .pt td, .crlp .pt thead tr + tr th { padding: 8px 6px; font-size: 12px; }
  .crlp .pt .same { align-items: start; }
  .crlp .eng-context { gap: 12px; flex-wrap: wrap; }
  .crlp .eng.preview .np { font-size: 13px; }
  .crlp .eng.preview .np-gal > img { height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
  .crlp .eng.preview .np-prod { gap: 12px; padding: 16px; }
  .crlp .eng-result { padding: 14px 16px; font-size: 14px; }
  .crlp .eng-result b { font-size: 25px; }
  .crlp .tplout { gap: 12px; }
  .crlp .mp-in { padding: 12px; }
  .crlp .mp-in b { font-size: 21px; }
  .crlp .mp-in .pr { font-size: 14px; }
  .crlp .mp-steps { display: grid; gap: 4px; font-size: 11px; }
  .crlp .th-scroll { overflow: visible; box-shadow: none; background: none; }
  .crlp .th-scroll .frame { width: 100%; border-radius: 12px; }
  .crlp .pc-main, .crlp .pc-side { padding: 26px; }
}

/* 23 Oct: align comparable rows without imposing heights on screenshots or stacked cards. */
.crlp .hero-grid { align-items: start; }
.crlp .bx-foot.bx-foot { padding: 16px; }
.crlp .mg div { padding: 8px; }
.crlp .pp-order, .crlp .tpl-rule { padding: 12px; }
.crlp .every { padding: 24px; }
.crlp .eng-result { padding: 16px; }
.crlp .purchase-scope { padding: 20px; }
.crlp .tplout .mp { display: flex; flex-direction: column; }
.crlp .tplout .mp-in { display: flex; flex-direction: column; flex: 1; }
.crlp .tplout .mp-btn { margin-top: auto; }
.crlp .thlist li { align-items: flex-start; }
.page-template-page-craftor .dtswo.dtswo--pair .dtswo-list { align-items: stretch; }
.page-template-page-craftor .dtswo.dtswo--pair .dtswo-b { flex: 1 1 auto; }
.page-template-page-craftor .dtswo.dtswo--pair .dtswo-what { margin-bottom: 16px; }
.page-template-page-craftor .dtswo.dtswo--pair .dtswo-foot { margin-top: auto; padding-top: 8px; }
@media (min-width: 1025px) {
  .crlp .qflow { align-items: stretch; row-gap: 0; }
  .crlp .qstep { display: grid; grid-template-rows: subgrid; grid-row: span 2; row-gap: 0; }
  .crlp .qarrow { grid-row: span 2; padding-top: 0; }
  .crlp .minis { row-gap: 0; }
  .crlp .mini { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 0; }
  .crlp .mini > :first-child { align-self: start; }
}
@media (max-width: 760px) {
  .crlp .eng .ck:not([hidden]) { display: grid; grid-template-rows: auto minmax(0, 1fr); }
  .crlp .eng .ck-top { height: auto; min-height: 48px; padding-block: 10px; flex-wrap: wrap; }
  .crlp .eng .ck-name { flex: 1 0 100%; white-space: normal; overflow: visible; }
  .crlp .eng .ck-live { margin-left: auto; }
  .crlp .eng .ck-body { height: auto; min-height: 0; }
}
@media (max-width: 640px) {
  .crlp .cta-card { padding: 24px; }
  .crlp .cta-card .btn { padding-inline: 20px; text-align: center; }
  .crlp .every { padding: 18px; }
  .crlp .eng-result { padding: 14px; }
}