/* ══════════════════════════════════════════════════════════════════
   SafeRise — css/saferise-protocol-preview.css · SR-620
   The shared protocol preview (js/saferise-protocol-preview.js), on the
   home page and every pathway/track landing page. Surface code sr-px-.
   Midnight by default; Sunrise through [data-theme="sunrise"], below.
   Replaces the earlier generated copy of the home page's dialog.
   ══════════════════════════════════════════════════════════════════ */
.sr-px{
  --px-bg:#0B0D14; --px-bg2:#10131C; --px-ink:#F4EEE3; --px-ink2:#C9C4BA; --px-dim:#9A968F;
  --px-gold:#D4A843; --px-gold-lt:#ECC96A; --px-line:rgba(244,238,227,.12); --px-card:rgba(255,255,255,.03);
  --px-serif:'Cormorant Garamond',Georgia,serif; --px-sans:'DM Sans',Inter,Arial,sans-serif;
  padding:0; border:1px solid rgba(212,168,67,.45); border-radius:16px;
  width:min(1480px,94vw); max-width:none; max-height:min(960px,96svh); height:min(960px,96svh);
  background:var(--px-bg); color:var(--px-ink); overflow:hidden;
  box-shadow:0 40px 120px rgba(0,0,0,.7);
  font-family:var(--px-sans);
}
.sr-px::backdrop{background:rgba(4,5,9,.82);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
html.sr-px-locked,html.sr-px-locked body{overflow:hidden}
.sr-px *{box-sizing:border-box}
.sr-px :where(h2,h3,h4,p,ul){margin:0}
.sr-px [hidden]{display:none!important}

.sr-px-frame{position:relative;display:grid;grid-template-columns:36% minmax(0,1fr);height:100%}

/* left · the buying driver over the protocol's own photograph */
.sr-px-art{position:relative;overflow:hidden;background:#07080D}
.sr-px-hero{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 25%;display:block}
.sr-px-art::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,8,13,0) 38%,rgba(7,8,13,.55) 62%,rgba(7,8,13,.94) 100%)}
.sr-px-driver{position:absolute;z-index:1;left:clamp(24px,3vw,40px);right:clamp(24px,3vw,40px);bottom:clamp(28px,4vw,48px);color:#F7F2E8}
.sr-px-drvey{display:flex;align-items:center;gap:12px;font:700 11px/1.3 var(--px-sans);letter-spacing:.22em;text-transform:uppercase;color:var(--px-gold-lt)}
.sr-px-drvey::before{content:"";width:28px;height:1px;background:currentColor;flex:none}
.sr-px-drv{margin-top:16px;font:600 clamp(36px,3.9vw,62px)/1 var(--px-serif);color:#F7F2E8;text-wrap:balance}
.sr-px-art--plain .sr-px-drv{font-size:clamp(26px,2.5vw,36px);line-height:1.1}
.sr-px-drvsub{margin-top:14px;font:400 clamp(20px,2vw,31px)/1.2 var(--px-serif);color:#EDE6D9}

/* right · identity, value, experience */
.sr-px-body{position:relative;min-width:0;overflow-y:auto;overscroll-behavior:contain;
  padding:clamp(22px,3.6vh,42px) clamp(22px,2.6vw,44px) clamp(18px,2.6vh,30px);
  display:flex;flex-direction:column;gap:clamp(10px,min(1.2vw,1.7vh),18px);
  background:linear-gradient(180deg,var(--px-bg2),var(--px-bg) 60%);
  scrollbar-width:thin;scrollbar-color:rgba(212,168,67,.35) transparent}
.sr-px-body > *{flex-shrink:0}
.sr-px-close{position:absolute;z-index:3;top:16px;right:16px;width:44px;height:44px;border:0;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;color:var(--px-ink);background:transparent}
.sr-px-close .sr-px-ic{width:26px;height:26px}
.sr-px-close:hover{background:rgba(255,255,255,.07)}
.sr-px :focus-visible{outline:2px solid var(--px-gold);outline-offset:3px}
.sr-px-body:focus{outline:none}

.sr-px-context{font:700 11px/1.3 var(--px-sans);letter-spacing:.22em;text-transform:uppercase;color:var(--px-gold);padding-right:56px}
.sr-px-title{margin-top:-6px;font:600 clamp(40px,min(5.6vw,7.6vh),84px)/.98 var(--px-serif);letter-spacing:-.01em;color:var(--px-ink);padding-right:40px;text-wrap:balance;overflow-wrap:anywhere}
.sr-px-intro{font:400 clamp(21px,min(2.1vw,3.2vh),32px)/1.18 var(--px-serif);color:var(--px-ink)}
.sr-px-support{margin-top:-6px;font:400 clamp(15px,min(1.2vw,1.95vh),18.5px)/1.5 var(--px-sans);color:var(--px-ink2);max-width:66ch}

/* the guided experience: a wide, shallow panel */
.sr-px-guided{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:22px;
  min-height:0;padding:clamp(12px,1.6vh,18px) 24px;border:1px solid rgba(212,168,67,.4);border-radius:12px;overflow:hidden;
  background:linear-gradient(90deg,var(--px-bg2),rgba(16,19,28,.92))}
.sr-px-gtext{position:relative;z-index:1;max-width:min(380px,58%)}
.sr-px-label{font:700 10px/1.3 var(--px-sans);letter-spacing:.2em;text-transform:uppercase;color:var(--px-gold)}
.sr-px-gh{margin-top:6px;font:500 clamp(28px,2.4vw,36px)/1.1 var(--px-serif);color:var(--px-ink)}
.sr-px-gbody{margin-top:6px;font:400 14.5px/1.5 var(--px-sans);color:var(--px-ink2)}
.sr-px-gart{position:absolute;top:0;right:0;bottom:0;width:48%;
  background:url(/assets/preview/guided-light.webp) center/cover no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 45%);mask-image:linear-gradient(90deg,transparent,#000 45%)}

/* the library: subordinate to the title */
.sr-px-lib{padding-top:clamp(10px,1.4vh,18px);border-top:1px solid rgba(212,168,67,.35)}
.sr-px-libh{font:500 clamp(27px,min(3.1vw,4.7vh),48px)/1.05 var(--px-serif);color:var(--px-ink)}
.sr-px-libp{margin-top:6px;font:400 clamp(14.5px,min(1.12vw,1.8vh),17.5px)/1.45 var(--px-sans);color:var(--px-ink2)}

/* supporting cards: explanatory, not controls */
.sr-px-cards{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.sr-px-cards[data-count="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.sr-px-cards[data-count="1"]{grid-template-columns:minmax(0,1fr)}
.sr-px-cards[data-count="0"]{display:none}
/* one card alone sits as a row: artwork beside the text, not a tall block */
.sr-px-cards[data-count="1"] .sr-px-card{flex-direction:row}
.sr-px-cards[data-count="1"] .sr-px-cart{flex:0 0 46%;height:auto;min-height:120px}
.sr-px-cards[data-count="1"] .sr-px-ctext{align-self:center}
.sr-px-card{display:flex;flex-direction:column;border:1px solid var(--px-line);border-radius:10px;overflow:hidden;background:var(--px-card)}
.sr-px-cart{height:clamp(96px,min(8.4vw,12vh),136px);position:relative;overflow:hidden;background:#0E1119}
.sr-px-cart img{width:100%;height:100%;object-fit:cover;display:block}
.sr-px-pair{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.sr-px-ctext{padding:12px 16px 14px}
.sr-px-ctext h4{display:flex;align-items:center;gap:10px;font:500 clamp(18px,min(1.42vw,2.3vh),23px)/1.15 var(--px-serif);color:var(--px-ink)}
.sr-px-ctext h4 .sr-px-ic{width:26px;height:26px;flex:none;color:var(--px-gold)}
.sr-px-ctext p{margin-top:8px;font:400 clamp(14px,1.1vw,16.5px)/1.5 var(--px-sans);color:var(--px-ink2)}

/* the action row */
.sr-px-foot{margin-top:auto;padding-top:4px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.sr-px-more{display:inline-flex;align-items:center;gap:14px;min-height:44px;padding:0 0 4px;border:0;border-bottom:1px solid rgba(212,168,67,.6);
  background:none;cursor:pointer;font:400 16px/1.2 var(--px-sans);color:var(--px-ink)}
.sr-px-plus{width:20px;height:20px;color:var(--px-gold);transition:transform .25s}
.sr-px-more[aria-expanded="true"] .sr-px-plus{transform:rotate(45deg)}
.sr-px-cta{display:inline-flex;align-items:center;justify-content:center;min-height:52px;min-width:min(100%,340px);padding:0 30px;
  border-radius:8px;text-decoration:none;text-align:center;
  font:700 13px/1.2 var(--px-sans);letter-spacing:.16em;text-transform:uppercase;color:#17120A;
  background:linear-gradient(180deg,#E7C27A,#C89A4E);box-shadow:inset 0 1px 0 rgba(255,246,220,.55),0 10px 26px -14px rgba(212,168,67,.7)}
.sr-px-cta:hover{filter:brightness(1.06)}

/* everything included, in place */
/* SR-623 · everything included: the home page's icon list beside the device stack */
.sr-px-inc{display:grid;grid-template-columns:minmax(0,1fr) clamp(200px,30%,340px);gap:clamp(18px,2.4vw,36px);align-items:center;
  padding-top:18px;border-top:1px solid var(--px-line)}
.sr-px-inclist .sr-px-label{margin-bottom:10px}
.sr-px-inc ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px}
.sr-px-inc li{border-bottom:1px solid var(--px-line)}
.sr-px-incrow{display:flex;align-items:center;gap:14px;width:100%;min-height:44px;padding:8px 10px;border:0;background:none;cursor:pointer;text-align:left;
  font:400 13.5px/1.25 var(--px-sans);color:var(--px-ink2);transition:background .2s,color .2s}
.sr-px-incrow .sr-px-ic{width:20px;height:20px;flex:none;color:var(--px-dim);transition:color .2s}
.sr-px-incrow:hover,.sr-px-incrow[aria-pressed="true"]{background:rgba(255,255,255,.04);color:var(--px-ink)}
.sr-px-incrow:hover .sr-px-ic,.sr-px-incrow[aria-pressed="true"] .sr-px-ic{color:var(--px-gold-lt)}
.sr-px-reveal{margin-top:16px;padding-top:14px;border-top:1px solid rgba(212,168,67,.35);min-height:92px}
.sr-px-revcat{font:700 10px/1.3 var(--px-sans);letter-spacing:.2em;text-transform:uppercase;color:var(--px-gold)}
.sr-px-revh{margin-top:6px;font:500 clamp(22px,1.9vw,28px)/1.1 var(--px-serif);color:var(--px-ink)}
.sr-px-revp{margin-top:6px;font:400 14px/1.5 var(--px-sans);color:var(--px-ink2);max-width:52ch}
.sr-px-phones{width:100%;height:auto;display:block;filter:drop-shadow(0 24px 40px rgba(0,0,0,.55))}
[data-theme="sunrise"] .sr-px-incrow:hover,[data-theme="sunrise"] .sr-px-incrow[aria-pressed="true"]{background:rgba(29,26,21,.05)}

/* a narrower desktop */
@media(max-width:1100px){
  .sr-px-frame{grid-template-columns:32% minmax(0,1fr)}
  .sr-px-cards[data-count="1"]{grid-template-columns:minmax(0,1fr)}
}
/* phone: one column, in the brief's order; the dialog scrolls, nothing inside it does */
@media(max-width:760px){
  .sr-px{width:calc(100vw - 16px);height:auto;max-height:96svh;overflow-y:auto;overscroll-behavior:contain;border-radius:14px}
  .sr-px-frame{display:block;height:auto}
  .sr-px-art{height:min(92vw,360px)}
  .sr-px-hero{object-position:50% 12%}
  .sr-px-art::after{background:linear-gradient(180deg,rgba(7,8,13,0) 30%,rgba(7,8,13,.7) 58%,rgba(7,8,13,.96) 100%)}
  .sr-px-driver{left:20px;right:20px;bottom:18px}
  .sr-px-drv{font-size:clamp(28px,8vw,36px);margin-top:10px}
  .sr-px-drvsub{font-size:18px;margin-top:8px}
  .sr-px-body{overflow:visible;padding:24px 20px 24px;gap:16px}
  .sr-px-close{position:fixed;top:calc(2svh + 10px);right:16px;background:rgba(7,8,13,.66);box-shadow:0 0 0 1px rgba(255,255,255,.18)}
  .sr-px-context,.sr-px-title{padding-right:0}
  .sr-px-guided{grid-template-columns:auto minmax(0,1fr);padding:16px;gap:14px}
  .sr-px-gtext{max-width:none}
  .sr-px-gart{width:40%;opacity:.45}
  .sr-px-cards,.sr-px-cards[data-count="2"]{grid-template-columns:minmax(0,1fr)}
  .sr-px-cards[data-count="1"] .sr-px-card{flex-direction:column}
  .sr-px-cards[data-count="1"] .sr-px-cart{flex:none;height:150px}
  .sr-px-cart{height:150px}
  .sr-px-foot{flex-direction:column;align-items:stretch}
  .sr-px-more{align-self:flex-start}
  .sr-px-cta{width:100%;min-width:0}
  .sr-px-inc{grid-template-columns:minmax(0,1fr)}
  .sr-px-phones{width:min(62vw,240px);margin:6px auto 0}
}
/* 200% zoom and short screens: the body keeps scrolling, the art keeps its place */
@media(max-height:560px) and (min-width:761px){
  .sr-px{height:96svh;max-height:96svh}
}

/* Sunrise · the same structure on a warm paper ground */
[data-theme="sunrise"] .sr-px{
  --px-bg:#F7F2E9; --px-bg2:#FBF8F2; --px-ink:#1D1A15; --px-ink2:#4E483E; --px-dim:#6A6357;
  --px-gold:#8A6516; --px-gold-lt:#E9C46F; --px-line:rgba(29,26,21,.14); --px-card:#FFFFFF;
  border-color:rgba(138,101,22,.45); box-shadow:0 40px 120px rgba(40,30,10,.35)}
[data-theme="sunrise"] .sr-px::backdrop{background:rgba(30,24,14,.55)}
[data-theme="sunrise"] .sr-px-guided{background:linear-gradient(90deg,#FFFFFF,rgba(255,255,255,.9));border-color:rgba(138,101,22,.4)}
[data-theme="sunrise"] .sr-px-cart{background:#EFE8DB}
[data-theme="sunrise"] .sr-px-close:hover{background:rgba(29,26,21,.06)}
[data-theme="sunrise"] .sr-px-more{border-bottom-color:rgba(138,101,22,.6)}
@media(max-width:760px){[data-theme="sunrise"] .sr-px-close{color:#F7F2E8}}

/* SR-622 · the Anger Alchemy refinement, for every protocol ─────────────── */
/* smoked-glass planes with champagne edges and a light ribbon: decorative,
   the illustration of guidance. Used large in the AI card, small and quiet
   at the left of the guided banner. */
.sr-px-glass{position:absolute;inset:0;overflow:hidden;perspective:520px;pointer-events:none}
.sr-px-ribbon{position:absolute;inset:0;width:100%;height:100%}
.sr-px-pane{position:absolute;top:18%;left:28%;width:56%;height:64%;border-radius:8px;
  border:1px solid rgba(236,201,140,.6);
  background:linear-gradient(140deg,rgba(255,255,255,.16),rgba(255,255,255,.03) 55%,rgba(255,255,255,.07));
  box-shadow:inset 0 1px 0 rgba(255,240,210,.35),0 12px 30px -14px rgba(0,0,0,.8);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);transform:rotateY(-24deg) rotateX(6deg)}
.sr-px-pane--2{left:18%;top:12%;opacity:.7}
.sr-px-pane--3{left:8%;top:6%;opacity:.42}
.sr-px-prompt{position:absolute;inset:0;display:grid;place-items:center;padding:0 10%;text-align:center;
  font:italic 400 clamp(12px,1vw,15px)/1.2 var(--px-serif);color:#F5ECDB;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.sr-px-glasscard{background:radial-gradient(90% 120% at 70% 60%,rgba(201,143,58,.16),transparent 60%),linear-gradient(180deg,#121521,#0B0D15)}

/* the guided banner: quiet glass on the left, the coastal photograph on the right */
.sr-px-guided{grid-template-columns:clamp(96px,11vw,150px) minmax(0,1fr)}
.sr-px-glass--mini{position:relative;inset:auto;z-index:1;height:clamp(84px,min(9vw,13vh),120px);opacity:.75}
.sr-px-glass--mini .sr-px-prompt{font-size:clamp(10px,.8vw,12px)}
.sr-px-gtext{max-width:min(360px,50%)}
.sr-px-gart{width:47%;background:url(/assets/preview/guided-coastal.webp) 0% 45%/cover no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%);mask-image:linear-gradient(90deg,transparent,#000 14%)}

/* see another response: the triggered still left, the grounded right, cut on
   a diagonal with a fine gold line. A static comparison, not a slider. */
.sr-px-pair{display:block;position:relative}
.sr-px-pair img{position:absolute;top:0;height:100%;width:64%;object-fit:cover;object-position:50% 22%}
.sr-px-pa{left:0;clip-path:polygon(0 0,100% 0,56.25% 100%,0 100%)}
.sr-px-pb{right:0;clip-path:polygon(43.75% 0,100% 0,100% 100%,0 100%)}
.sr-px-split{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.sr-px-split line{stroke:#E3BF68;stroke-width:1.6}
.sr-px-conimg{object-position:50% 30%}
@media(max-width:760px){
  .sr-px-guided{grid-template-columns:72px minmax(0,1fr)}
  .sr-px-glass--mini{height:72px}
  .sr-px-gart{width:46%;opacity:.5}
}
[data-theme="sunrise"] .sr-px-glasscard{background:radial-gradient(90% 120% at 70% 60%,rgba(201,143,58,.22),transparent 60%),linear-gradient(180deg,#2A2620,#1B1814)}
/* SR-622 · the banner as three columns, so the copy never sits on the photograph */
.sr-px-guided{grid-template-columns:clamp(70px,min(7vw,11vh),150px) minmax(0,1fr) 43%;column-gap:clamp(14px,1.6vw,22px)}
.sr-px-guided .sr-px-gtext{max-width:none}
.sr-px-guided .sr-px-gart{position:relative;top:auto;right:auto;bottom:auto;width:auto;align-self:stretch;min-height:100%;
  margin:calc(-1 * clamp(12px,1.6vh,18px)) -24px calc(-1 * clamp(12px,1.6vh,18px)) 0}
@media(max-width:760px){
  .sr-px-guided{grid-template-columns:minmax(0,1fr);padding:16px 16px 0}
  .sr-px-guided .sr-px-glass--mini{display:none}
  .sr-px-guided .sr-px-gart{height:140px;min-height:0;opacity:1;margin:4px -16px 0;background-position:0% 40%;
    -webkit-mask-image:linear-gradient(180deg,transparent,#000 30%);mask-image:linear-gradient(180deg,transparent,#000 30%)}
}