/* Zygos section landings: responsive, accessible controls over the six approved photos. */
:root{--z-navy:#072c55}
.z-section-page{background:#f8fbfa}
.zl-screen{position:relative;isolation:isolate;min-height:100svh;min-height:100dvh;overflow:hidden;background:#f8faf8;color:var(--z-navy)}
.zl-photo{position:absolute;inset:0;z-index:-3;display:block;overflow:hidden;background:#f9f9f4}
.zl-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center center}
.zl-screen::before{content:'';position:absolute;z-index:-2;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(251,254,252,.94) 0%,rgba(251,254,252,.81) 22%,rgba(252,254,252,.35) 49%,transparent 71%)}
.zl-screen::after{content:'';position:absolute;z-index:-1;right:18%;top:-37%;width:min(64vw,900px);aspect-ratio:1;border:33px solid rgba(67,212,225,.14);border-radius:50%;box-shadow:0 0 0 66px rgba(100,211,230,.1),0 0 0 120px rgba(125,230,211,.075);pointer-events:none}
.zl-screen--excel{--z-primary:#087746;--z-secondary:#12ae72;--z-light:#ddf5df;--z-border:#5bcba0;--z-glow:#e7ffe8}
.zl-screen--relazioni{--z-primary:#087cbd;--z-secondary:#08cce0;--z-light:#dcf8fc;--z-border:#71d8e9;--z-glow:#e3fcff}
.zl-screen--ren{--z-primary:#6435ac;--z-secondary:#954dec;--z-light:#e8dcfc;--z-border:#a777e0;--z-glow:#f1e7ff}
.zl-screen--excel::after{border-color:#a6e6bd35;box-shadow:0 0 0 66px #b7edc72d,0 0 0 120px #a8e7ca22}
.zl-screen--ren::after{border-color:#80dcf141}
.zl-topbar{position:relative;z-index:3;padding:clamp(21px,3.2vw,49px) clamp(21px,4.2vw,74px) 0}
.zl-back{width:fit-content;display:inline-flex;gap:15px;align-items:center;font:900 clamp(20px,2.5vw,31px)/1 'Outfit','DM Sans',sans-serif;letter-spacing:-.025em;color:#05234d;text-decoration:none;border-radius:12px}
.zl-back svg{width:35px;height:35px;stroke:currentColor;stroke-width:3;fill:none;stroke-linejoin:round;stroke-linecap:round}
.zl-back:focus-visible,.zl-action:focus-visible{outline:4px solid #f8ca48;outline-offset:5px}
.zl-panel{position:relative;z-index:2;width:min(49vw,760px);padding:clamp(40px,6vh,90px) 0 60px clamp(23px,4.3vw,76px);display:flex;flex-direction:column;align-items:stretch;gap:clamp(22px,3.3vh,38px)}
.zl-title-row{display:flex;gap:clamp(16px,1.9vw,29px);align-items:center;min-width:0}
.zl-title-icon{width:clamp(74px,8vw,122px);height:clamp(74px,8vw,122px);flex-shrink:0;border-radius:24px;background:var(--z-light);border:1px solid #ffffff98;display:grid;place-items:center;box-shadow:0 12px 30px #0d437017}
.zl-title-icon svg{width:67%;height:67%;fill:none;stroke:var(--z-primary);stroke-width:2.9;stroke-linecap:round;stroke-linejoin:round}
.zl-title{margin:0;font:900 clamp(41px,4.7vw,80px)/.99 'Outfit','DM Sans',sans-serif;letter-spacing:-.065em;overflow:visible;overflow-wrap:normal;text-wrap:balance}
.zl-title em{font-style:normal;color:var(--z-secondary)}
.zl-eyebrow{display:flex;align-items:center;gap:17px;font:900 clamp(25px,3vw,43px)/1 'Outfit',sans-serif;letter-spacing:-.05em}
.zl-eyebrow img{width:clamp(49px,5.1vw,77px);height:clamp(49px,5.1vw,77px);object-fit:contain}
.zl-eyebrow em{font-style:normal;color:var(--z-secondary)}
.zl-screen--excel .zl-panel{gap:clamp(17px,2.8vh,32px)}
.zl-screen--excel .zl-title{font-size:clamp(55px,5.8vw,95px);line-height:.94}
.zl-actions{display:grid;gap:clamp(13px,1.8vh,22px);width:100%;min-width:0}
.zl-actions--excel{grid-template-columns:repeat(2,minmax(0,1fr))}
.zl-action{display:flex;align-items:center;gap:clamp(12px,1.4vw,21px);padding:clamp(14px,1.8vw,25px);min-height:clamp(88px,10vh,129px);min-width:0;border-radius:clamp(19px,2vw,28px);background:#fffffff2;border:2px solid var(--z-border);box-shadow:0 14px 28px #0d52701b;color:var(--z-navy);text-decoration:none;font:800 clamp(18px,1.9vw,30px)/1.12 'Outfit',sans-serif;transition:transform .2s,box-shadow .2s}
.zl-action:hover{transform:translateY(-3px);box-shadow:0 18px 36px #064f7028}
.zl-action--primary{color:#fff;background:linear-gradient(111deg,var(--z-primary),var(--z-secondary));border-color:transparent;box-shadow:0 15px 27px #153c7140}
.zl-action--primary:hover{box-shadow:0 19px 34px #153c714f}
.zl-action-label{min-width:0;flex:1}
.zl-action-icon{flex-shrink:0;width:clamp(44px,5.3vw,66px);height:clamp(44px,5.3vw,66px);display:grid;place-items:center;border-radius:15px;background:var(--z-light);color:var(--z-primary)}
.zl-action--primary .zl-action-icon{background:#ffffff27;color:white}
.zl-action-icon svg{width:72%;height:72%;fill:none;stroke:currentColor;stroke-width:2.7;stroke-linecap:round;stroke-linejoin:round}
.zl-chevron{flex-shrink:0;margin-left:auto;font-size:clamp(26px,3vw,39px);font-weight:500;line-height:1}
.zl-actions--excel .zl-action{min-height:clamp(111px,13vh,156px)}
.zl-actions--relazioni{gap:12px}
.zl-actions--relazioni .zl-action{min-height:87px}
.zl-actions--relazioni .zl-minor-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.zl-actions--relazioni .zl-minor-pair .zl-action{min-height:78px;padding:13px;font-size:clamp(16px,1.3vw,23px)}
.zl-actions--relazioni .zl-minor-pair .zl-action-icon{width:49px;height:49px}
.zl-screen--relazioni .zl-title-row{gap:17px}
.zl-screen--relazioni .zl-title{font-size:clamp(52px,5.5vw,86px)}
.zl-eyebrow--excel{color:#053e2f}
.zl-screen--ren .zl-panel{padding-top:clamp(66px,9vh,125px)}
.zl-screen--ren .zl-title{font-size:clamp(45px,5.2vw,82px)}
.zl-screen--ren .zl-actions{margin-top:clamp(12px,2.4vh,32px)}
.zl-footnote{margin:0;color:#50778c;font-size:13px;font-weight:700}
.zl-screen .z-screen-note{position:absolute}
@media(max-width:1090px) and (min-width:721px){
 .zl-panel{width:56vw;padding-top:55px}
 .zl-action{gap:9px;padding:15px;font-size:19px}
 .zl-action-icon{width:48px;height:48px}
 .zl-title{font-size:54px}
 .zl-screen--excel .zl-title{font-size:clamp(49px,6.5vw,70px)}
 .zl-screen--ren .zl-title{font-size:clamp(42px,5.5vw,61px)}
}
@media(max-width:720px), (max-width:1100px) and (orientation:portrait){
 .zl-screen{min-height:100dvh;overflow:hidden}
 .zl-photo img{object-fit:contain;object-position:top center}
 /* Keep the characters below the actual controls rather than letting a button cover a face. */
 .zl-photo img{transform:translateY(clamp(96px,13dvh,132px));mask-image:linear-gradient(to bottom,transparent 0%,#000 5%,#000 100%)}
 .zl-photo{background:linear-gradient(180deg,#fafaf7 0%,#fafaf6 69%,#f2f8f4 100%)}
 .zl-screen--ren .zl-photo{background:linear-gradient(180deg,#eef4fc,#e9f4fb)}
 .zl-screen--relazioni .zl-photo{background:linear-gradient(180deg,#fbfcfa,#f4f8fa)}
 .zl-screen::before{background:linear-gradient(180deg,#fffefd4d 0%,transparent 25%,transparent 72%,#ffffffa8 100%)}
 .zl-screen::after{right:-49%;top:-29%;width:95vw;border-width:22px;box-shadow:0 0 0 41px #65dce52a,0 0 0 78px #6de8d01d}
 .zl-topbar{padding:20px 22px 0}
 .zl-back{gap:11px;font-size:23px}
 .zl-back svg{width:30px;height:30px}
 .zl-panel{width:100%;padding:clamp(35px,7vh,79px) 20px 24px;gap:23px}
 .zl-title-row{gap:13px}
 .zl-title-icon{width:clamp(55px,13.2vw,80px);height:clamp(55px,13.2vw,80px);border-radius:16px}
 .zl-title{font-size:clamp(34px,8.2vw,54px);letter-spacing:-.055em;line-height:1.04}
 .zl-eyebrow{font-size:clamp(27px,8vw,39px);gap:9px}
 .zl-eyebrow img{width:52px;height:52px}
 .zl-action{border-width:1.5px;min-height:74px;padding:13px 14px;border-radius:20px;gap:10px;font-size:clamp(17px,4.3vw,23px)}
 .zl-action-icon{width:48px;height:48px;border-radius:13px}
 .zl-chevron{font-size:27px}
 .zl-actions{gap:10px}
 .zl-screen--excel .zl-panel{padding-top:clamp(25px,4vh,45px);gap:18px}
 .zl-screen--excel .zl-title{font-size:clamp(46px,11vw,66px)}
 .zl-actions--excel{gap:9px}
 .zl-actions--excel .zl-action{min-height:89px;flex-wrap:wrap;gap:6px;padding:11px 10px;font-size:clamp(15px,4vw,22px)}
 .zl-actions--excel .zl-action-icon{width:42px;height:42px}
 .zl-actions--excel .zl-action-label{flex-basis:calc(100% - 70px)}
 .zl-actions--excel .zl-chevron{margin-left:auto}
 .zl-screen--ren .zl-panel{padding-top:clamp(51px,9vh,77px)}
 .zl-screen--ren .zl-title{font-size:clamp(35px,8.5vw,55px)}
 .zl-screen--ren .zl-actions{width:min(57%,350px);margin-top:9px;gap:12px}
 .zl-screen--ren .zl-action{font-size:clamp(15px,4.1vw,23px);min-height:86px;gap:7px;padding:10px}
 .zl-screen--ren .zl-action-icon{width:38px;height:38px;align-self:flex-start}
 .zl-screen--ren .zl-chevron{font-size:24px}
 .zl-screen--relazioni .zl-panel{padding-top:clamp(28px,5vh,51px)}
 .zl-screen--relazioni .zl-title{font-size:clamp(49px,11vw,70px)}
 .zl-screen--relazioni .zl-title-icon{width:67px;height:67px}
 .zl-screen--relazioni .zl-actions{position:absolute;top:calc(64dvh - 56px);left:20px;width:calc(100% - 40px);padding-bottom:30px}
 .zl-actions--relazioni .zl-action{min-height:75px;font-size:clamp(17px,4.9vw,24px)}
 .zl-actions--relazioni .zl-minor-pair{gap:8px}
 .zl-actions--relazioni .zl-minor-pair .zl-action{min-height:65px;padding:9px;font-size:clamp(13px,3.3vw,18px)}
 .zl-actions--relazioni .zl-minor-pair .zl-action-icon{width:39px;height:39px}
}
@media(max-width:720px) and (orientation:portrait){
 /* Preserve the whole portrait photo even on short or unusually tall phones. */
 .zl-screen{min-height:max(100dvh,calc(177.7vw + 120px))}
 .zl-photo img{transform:translateY(max(120px,calc(100dvh - 177.7vw)))}
}
@media(max-width:380px){
 .zl-screen--ren .zl-actions{width:61%}
 .zl-screen--ren .zl-action{font-size:14px}
 .zl-screen--relazioni .zl-actions{top:calc(57dvh - 55px)}
 .zl-screen--relazioni .zl-actions .zl-action{min-height:69px}
 .zl-screen--relazioni .zl-minor-pair .zl-action{gap:5px}
 .zl-screen--relazioni .zl-minor-pair .zl-chevron{font-size:21px}
}
@media(max-width:720px) and (max-height:735px){
 .zl-screen--relazioni{min-height:800px;overflow:visible}
 .zl-screen--relazioni .zl-actions{top:510px}
}
@media(prefers-reduced-motion:reduce){.zl-action{transition:none}}