/* =========================================================================
   GRADIENTS — page-local styles. Pairs with colors_and_type.css + guide-shell.css.
   Matches the brand-guide format: white ground, airy whitespace, 1px-line cards.
   ========================================================================= */

/* ---- 01 · signature at a glance (full hero specimen) ---- */
.ghero { position:relative; border-radius:var(--r-4); overflow:hidden; box-shadow:var(--sh-2); height:clamp(360px,42vw,520px); }
.ghero .ps-hero, .ghero > img { position:absolute; inset:0; width:100%; height:100%; }
.ghero__copy { position:absolute; z-index:3; left:clamp(28px,5%,64px); top:50%; transform:translateY(-50%); max-width:60%; }
.ghero__eb { font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.86); font-weight:var(--w-bold); margin:0 0 16px; }
.ghero__hd { font-size:clamp(34px,4.4vw,60px); line-height:1.0; letter-spacing:-.025em; font-weight:var(--w-medium); color:#fff; margin:0; }
.ghero__hd .line2 { display:block; }
.ghero__sub { font-size:clamp(15px,1.4vw,18px); line-height:1.6; color:rgba(255,255,255,.9); margin:20px 0 0; max-width:42ch; }
.ghero__tags { position:absolute; z-index:3; right:18px; bottom:16px; display:flex; gap:7px; }
.ghero__tags .tk { font-family:var(--font-mono); font-size:11px; color:#fff; background:rgba(12,14,22,.55); backdrop-filter:blur(6px); padding:5px 10px; border-radius:var(--r-1); border:1px solid rgba(255,255,255,.18); }

/* ---- 02 · real color, gently cooled — before/after drag slider ---- */
.ba { position:relative; border-radius:var(--r-4); overflow:hidden; box-shadow:var(--sh-1); border:1px solid var(--ps-line); height:clamp(280px,34vw,420px); user-select:none; touch-action:none; cursor:ew-resize; }
.ba img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.ba__cooled { z-index:2; clip-path:inset(0 0 0 50%); filter:var(--cool-grade); }
.ba__lab { position:absolute; z-index:4; top:16px; font-family:var(--font-mono); font-size:11px; font-weight:var(--w-medium); color:#fff; background:rgba(12,14,22,.6); backdrop-filter:blur(6px); padding:5px 10px; border-radius:var(--r-1); }
.ba__lab--raw { left:16px; }
.ba__lab--cool { right:16px; }
.ba__handle { position:absolute; z-index:5; top:0; bottom:0; left:50%; width:2px; background:#fff; box-shadow:0 0 0 1px rgba(12,14,22,.18); transform:translateX(-1px); }
.ba__grip { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:38px; height:38px; border-radius:50%; background:#fff; box-shadow:var(--sh-3); display:flex; align-items:center; justify-content:center; color:var(--ps-primary-blue); }
.ba__grip svg { width:20px; height:20px; }
.ba__note { font-size:13px; color:var(--fg-3); margin:12px 0 0; display:flex; align-items:center; gap:8px; }

/* ---- 03 · the two washes ---- */
.wash-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
@media (max-width:900px){ .wash-grid{ grid-template-columns:1fr; } }
.wcard { border:1px solid var(--ps-line); border-radius:var(--r-4); overflow:hidden; background:var(--ps-white); box-shadow:var(--sh-1); }
.wcard__stage { position:relative; height:300px; }
.wcard__stage .ps-hero { position:absolute; inset:0; height:100%; }
.wcard__copy { position:absolute; z-index:3; left:30px; top:50%; transform:translateY(-50%); max-width:62%; color:#fff; }
.wcard__copy .eb { font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; opacity:.9; margin-bottom:10px; }
.wcard__copy .hd { font-size:30px; font-weight:var(--w-medium); line-height:1.02; letter-spacing:-.02em; }
.wcard__copy .hd .accent { color:var(--ps-secondary-teal); }
.wcard__copy .hd .ps-text-gradient, .wcard__copy .hd .ps-text-gradient--reverse { display:inline-block; }
.wcard__copy .sub { font-size:13px; line-height:1.55; margin-top:12px; max-width:38ch; color:rgba(255,255,255,.92); }
.wcard__info { padding:18px 20px 20px; display:flex; flex-direction:column; align-items:flex-start; gap:13px; }
.wcard__info .nm { font-size:15.5px; font-weight:var(--w-medium); }
.wcard__info .use { font-weight:var(--w-regular); color:var(--fg-3); }
.wcard__info .tk { font-family:var(--font-mono); font-size:11.5px; color:var(--ps-dark-blue-700); margin-top:5px; cursor:copy; }
.wcard__info .ds { font-size:12.5px; line-height:1.55; color:var(--fg-2); margin-top:9px; }
.wcard__info .txt { display:flex; flex-direction:column; gap:0; }
.samples { display:flex; border-radius:var(--r-1); overflow:hidden; flex:none; border:1px solid var(--ps-line); }
.samples .sw { width:58px; height:62px; display:flex; flex-direction:column; justify-content:flex-end; padding:6px; }
.samples .sw b { font-size:8px; font-weight:var(--w-bold); letter-spacing:.03em; text-transform:uppercase; }
.samples .sw span { font-family:var(--font-mono); font-size:8px; margin-top:1px; opacity:.85; }

/* ---- 04 · wash anatomy ---- */
.recipe { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media (max-width:760px){ .recipe{ grid-template-columns:1fr 1fr; } }
.step .frame { height:160px; border-radius:var(--r-3); overflow:hidden; position:relative; background:var(--ps-navy); }
.step .frame img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.step .frame .raw { filter:none; }
.step .frame .cool { filter:var(--cool-grade); }
.step .ov { position:absolute; inset:0; }
.step .tag { display:flex; align-items:center; gap:8px; margin-top:12px; font-size:13px; font-weight:var(--w-medium); color:var(--fg-1); }
.step .tag .k { font-family:var(--font-mono); font-size:10px; color:#fff; background:var(--ps-primary-blue); width:18px; height:18px; border-radius:5px; display:inline-flex; align-items:center; justify-content:center; flex:none; }
.step .cap { font-size:12px; line-height:1.5; color:var(--fg-3); margin-top:5px; }
.step .cap code { font-family:var(--font-mono); font-size:10.5px; }

/* ---- 05 · scrims + solid panels ---- */
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
@media (max-width:760px){ .two-col{ grid-template-columns:1fr; } }
.scrim-card { border:1px solid var(--ps-line); border-radius:var(--r-4); overflow:hidden; background:var(--ps-white); box-shadow:var(--sh-1); }
.scrim-card__stage { position:relative; height:220px; overflow:hidden; }
.scrim-card__stage img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:var(--cool-grade); }
.scrim-card__stage .ov { position:absolute; inset:0; z-index:1; }
.scrim-card__stage .copy { position:absolute; z-index:3; color:#fff; }
.scrim-card__stage .copy .eb { font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; opacity:.82; margin-bottom:6px; }
.scrim-card__stage .copy .hd { font-size:22px; font-weight:var(--w-medium); line-height:1.04; letter-spacing:-.015em; }
.scrim-card__meta { padding:15px 18px 17px; }
.scrim-card__meta .nm { font-size:14px; font-weight:var(--w-medium); }
.scrim-card__meta .tk { font-family:var(--font-mono); font-size:11px; color:var(--ps-dark-blue-700); margin-top:4px; cursor:copy; }
.scrim-card__meta .ds { font-size:12.5px; line-height:1.55; color:var(--fg-2); margin-top:9px; }

.panel { position:relative; border-radius:var(--r-4); overflow:hidden; height:190px; display:flex; align-items:flex-end; padding:24px 28px; }
.panel.is-navy  { background:var(--wash-navy-diagonal), var(--ps-navy); }
.panel.is-teal  { background:var(--wash-teal-frame), var(--ps-primary-blue); }
.panel .pt { position:relative; z-index:2; color:#fff; }
.panel .pt .t { font-size:22px; font-weight:var(--w-medium); letter-spacing:-.01em; }
.panel .pt .s { font-family:var(--font-mono); font-size:11.5px; color:rgba(255,255,255,.85); margin-top:7px; cursor:copy; }

/* ---- 06 · gradient text ---- */
.chips { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:760px){ .chips{ grid-template-columns:1fr; } }
.chip { border-radius:var(--r-3); padding:26px 26px 20px; min-height:120px; display:flex; flex-direction:column; justify-content:space-between; }
.chip.dark { background:#0C0E16; }
.chip.light { background:var(--ps-white); border:1px solid var(--ps-line); }
.chip.cloud { background:var(--ps-cloud-gray); }
.chip .ph { font-size:30px; font-weight:var(--w-medium); letter-spacing:-.02em; line-height:1; }
.chip .ck { font-family:var(--font-mono); font-size:10.5px; margin-top:18px; cursor:copy; }
.chip.dark .ck { color:rgba(255,255,255,.55); }
.chip.light .ck, .chip.cloud .ck { color:var(--fg-3); }

/* ---- duotone footnote ---- */
.duo-note { display:grid; grid-template-columns:200px 1fr; gap:22px; align-items:center; border:1px solid var(--ps-line); border-left:none; border-radius:var(--r-3); overflow:hidden; background:var(--ps-cloud-gray); }
@media (max-width:680px){ .duo-note{ grid-template-columns:1fr; } }
.duo-note__img { position:relative; height:150px; }
.duo-note__img img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.duo-note__img .ps-duotone { position:absolute; inset:0; }
.duo-note__txt { padding:20px 24px 20px 4px; }
.duo-note__txt p { margin:0; font-size:13.5px; line-height:1.6; color:var(--fg-2); }
.duo-note__txt p strong { color:var(--fg-1); font-weight:var(--w-medium); }
.duo-note__txt a { color:var(--ps-primary-blue); font-weight:var(--w-medium); text-decoration:none; }
.duo-note__txt a:hover { text-decoration:underline; }

/* =========================================================================
   07 · LIVE WASH BUILDER (generator) — shares the Swell generator's controls
   ========================================================================= */
.gen { border:1px solid var(--ps-line); border-radius:var(--r-4); overflow:hidden; box-shadow:var(--sh-1); background:var(--ps-white); }
.gen__top { display:grid; grid-template-columns:1fr 320px; }
@media (max-width:880px){ .gen__top{ grid-template-columns:1fr; } }
.gen__stage { position:relative; min-height:440px; overflow:hidden; }
.gen__photo { position:absolute; inset:0; width:100%; height:100%; }
.gen__photo image-slot, .gen__photo img { position:absolute; inset:0; width:100%; height:100%; display:block; }
.gen__wash { position:absolute; inset:0; z-index:1; pointer-events:none; transition:opacity var(--d-fast) var(--ease-standard); }
.gen__copy-ov { position:absolute; z-index:3; left:30px; top:50%; transform:translateY(-50%); max-width:60%; color:#fff; pointer-events:none; }
.gen__copy-ov .eb { font-size:10px; letter-spacing:.2em; text-transform:uppercase; opacity:.9; margin-bottom:9px; }
.gen__copy-ov .hd { font-size:30px; font-weight:var(--w-medium); line-height:1.02; letter-spacing:-.02em; }
.gen__copy-ov .hd .ps-text-gradient { display:inline-block; }
.gen__stagetag { position:absolute; z-index:3; left:20px; bottom:16px; font-family:var(--font-mono); font-size:11px; color:rgba(255,255,255,.7); pointer-events:none; }
.gen__droptip { position:absolute; z-index:4; right:16px; top:16px; font-size:11px; font-weight:var(--w-medium); color:#fff; background:rgba(12,14,22,.55); backdrop-filter:blur(6px); padding:5px 11px; border-radius:var(--r-pill); border:1px solid rgba(255,255,255,.2); pointer-events:none; }
.gen__ctrls { padding:24px 24px 26px; border-left:1px solid var(--ps-line); display:flex; flex-direction:column; gap:22px; }
@media (max-width:880px){ .gen__ctrls{ border-left:0; border-top:1px solid var(--ps-line); } }
.ctrl__h { font-size:11px; font-weight:var(--w-bold); letter-spacing:.09em; text-transform:uppercase; color:var(--fg-3); margin:0 0 11px; }
.seg2 { display:inline-flex; flex-wrap:wrap; border:1px solid var(--ps-line); border-radius:var(--r-2); overflow:hidden; }
.seg2 button { font-family:var(--font-sans); font-size:12.5px; font-weight:var(--w-medium); color:var(--fg-2); background:var(--ps-white); border:0; padding:8px 13px; cursor:pointer; transition:background var(--d-fast) var(--ease-standard); }
.seg2 button + button { border-left:1px solid var(--ps-line); }
.seg2 button.is-on { background:var(--ps-primary-blue); color:#fff; }
.rangerow { display:flex; align-items:center; gap:12px; }
.rangerow input[type=range] { flex:1; accent-color:var(--ps-primary-blue); }
.rangerow .val { font-family:var(--font-mono); font-size:12px; color:var(--fg-2); width:64px; text-align:right; }
.gen__codebar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 22px; border-top:1px solid var(--ps-line); background:var(--ps-cloud-gray); }
.gen__codebar span { font-size:12px; color:var(--fg-3); }
.gen__copy { font-family:var(--font-sans); font-size:13px; font-weight:var(--w-medium); color:#fff; background:var(--ps-primary-blue); border:0; border-radius:var(--r-1); padding:9px 16px; cursor:pointer; }
.gen__copy:hover { background:var(--ps-dark-blue-700); }
.gen__code { margin:0; border-top:1px solid var(--ps-line); background:var(--ps-navy); color:#cfe6f2; font-family:var(--font-mono); font-size:12px; line-height:1.65; padding:18px 22px; overflow:auto; white-space:pre; }
.gen__code .cmt { color:#6f8aa0; }
.gen__code .t { color:#5FE0DA; }
.gen__code .p { color:#93C4D4; }