/* page-fields.css: one deliberate background idea per page, bent from the shared family
   (canvas, setup-grid, blue glow, citron). Static, no 100vw, no extra requests.
   Loaded right after atmosphere.css. The fields replace the heading pseudo-layers on these pages. */

/* shared: a clipped, isolated stage; the field lives on #main behind everything */
body:is([data-page=help],[data-page=security],[data-page=privacy],[data-page=terms],[data-page=confirm],[data-page=preferences],[data-page=unsubscribe],[data-page="404"]) #main{position:relative;isolation:isolate;overflow-x:clip}
body:is([data-page=help],[data-page=privacy],[data-page=terms],[data-page=confirm],[data-page=preferences],[data-page=unsubscribe],[data-page="404"]) :is(.page-heading,.legal-hero):before,body:is([data-page=help],[data-page=privacy],[data-page=terms],[data-page=confirm],[data-page=preferences],[data-page=unsubscribe],[data-page="404"]) :is(.page-heading,.legal-hero):after{content:none!important;display:none!important}
body[data-page=security] .page-heading:before,body[data-page=security] .page-heading:after{background:none;mask-image:none;width:auto;transform:none}
body:is([data-page=help],[data-page=privacy],[data-page=terms],[data-page=confirm],[data-page=preferences],[data-page=unsubscribe],[data-page="404"]) #main:before,body:is([data-page=help],[data-page=privacy],[data-page=terms],[data-page=confirm],[data-page=preferences],[data-page=unsubscribe],[data-page="404"]) #main:after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none}

/* HELP: Signposts. A calm dotted lattice that fades down the page, one soft glow behind the search box. */
body[data-page=help] #main:before{bottom:auto;height:560px;background:radial-gradient(circle,#6E8FD6 0 1.2px,transparent 1.9px) 0 0/26px 26px;opacity:.4;-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.5) 55%,#000 80%),linear-gradient(180deg,#000 8%,transparent 92%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,rgba(0,0,0,.5) 55%,#000 80%),linear-gradient(180deg,#000 8%,transparent 92%);mask-composite:intersect}
body[data-page=help] #main:after{content:none}
body[data-page=help] .page-heading+.body-section{position:relative;isolation:isolate}
body[data-page=help] .page-heading+.body-section:before{content:'';position:absolute;z-index:-1;pointer-events:none;inset:-70px -12% auto;height:230px;background:radial-gradient(ellipse 46% 50% at 50% 50%,#C5D9FF,#E6EDFF99 55%,transparent 100%);opacity:.7}

/* SECURITY: The sealed panel. The heading becomes a closed outline with a fine double edge. Cool blue only;
   citron only on the lock mark. */
body[data-page=security] .page-heading{margin-top:22px;padding-inline:max(22px,3.5vw)}
body[data-page=security] .page-heading:before{content:'';position:absolute;display:block;inset:0;left:0;right:0;top:0;bottom:0;width:auto;height:auto;transform:none;z-index:-2;opacity:1;border:1.5px solid #8EAAE8;border-radius:2px;background:linear-gradient(135deg,#F2F6FF,#FBFCFF 55%,#EDF3FF)}
body[data-page=security] .page-heading:after{content:'';position:absolute;display:block;inset:7px;left:7px;right:7px;top:7px;bottom:7px;width:auto;height:auto;transform:none;z-index:-1;opacity:1;border:1px solid #B9CDF2;border-radius:1px;pointer-events:none}
body[data-page=security] .emblem-orbit{background:#FBFCFF}
body[data-page=security] .emblem-orbit>.ui-mark{color:#1E3FA8;background:#E7F36A;border-radius:50%;padding:9px;width:60px;height:60px;box-sizing:border-box}
body[data-page=security] .emblem-orbit i{background:#FBFCFF}
body[data-page=security] #main:before{content:'';position:absolute;z-index:-3;pointer-events:none;inset:0;bottom:auto;height:640px;background:radial-gradient(ellipse 50% 60% at 50% 0,#E6EDFF,transparent 100%);opacity:.8}

/* PRIVACY and TERMS: Signed paper. Near-flat canvas, one ruled margin line on the reading edge
   (inline-start, mirrors in RTL), the grid only in the header zone. */
body:is([data-page=privacy],[data-page=terms]) #main:before{content:none}
@media(min-width:900px){body:is([data-page=privacy],[data-page=terms]) #main:before{content:'';bottom:auto;height:360px;background:url('assets/setup-grid.svg') right top/1100px auto no-repeat;opacity:.14;-webkit-mask-image:linear-gradient(90deg,transparent 64%,#000 76%),linear-gradient(180deg,#000 25%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 64%,#000 76%),linear-gradient(180deg,#000 25%,transparent 100%);mask-composite:intersect}
html[dir=rtl] body:is([data-page=privacy],[data-page=terms]) #main:before{transform:scaleX(-1)}}
body:is([data-page=privacy],[data-page=terms]) .contents{border-inline-start:0}
body:is([data-page=privacy],[data-page=terms]) #main:after{content:none}
body:is([data-page=privacy],[data-page=terms]) .document{position:relative}
body:is([data-page=privacy],[data-page=terms]) .document:before{content:'';position:absolute;inset-block:0;inset-inline-start:-18px;width:1px;background:#B3C8F2;pointer-events:none}
body:is([data-page=privacy],[data-page=terms]) .legal-hero{border-bottom-color:#D4E1F8}

/* CONFIRM, PREFERENCES, UNSUBSCRIBE: Desk lamp. One small citron pool under the panel, nothing else. */
body:is([data-page=confirm],[data-page=preferences],[data-page=unsubscribe]) #main:before,body:is([data-page=confirm],[data-page=preferences],[data-page=unsubscribe]) #main:after{content:none}
body:is([data-page=confirm],[data-page=preferences],[data-page=unsubscribe]) .page-heading+.body-section{position:relative;isolation:isolate}
body:is([data-page=confirm],[data-page=preferences],[data-page=unsubscribe]) .page-heading+.body-section:before{content:'';position:absolute;z-index:-1;pointer-events:none;left:50%;width:min(860px,100%);transform:translateX(-50%);bottom:-34px;height:230px;background:radial-gradient(ellipse 50% 50% at 50% 55%,#F0F5B2,#F0F5B266 55%,transparent 100%);opacity:.85}

/* reserve the card's settled height so the script filling it in does not push the footer */
body:is([data-page=confirm],[data-page=preferences],[data-page=unsubscribe]) #state-card{min-height:170px}

@media(min-width:701px) and (max-width:799px){body:is([data-page=confirm],[data-page=preferences],[data-page=unsubscribe]) #state-card{min-height:200px}}

/* 404: The empty slot. The panel grid with one panel knocked out and drawn dashed where the page should be;
   a blue glow pooled to the opposite side. */
body[data-page="404"] #main:before{bottom:auto;height:620px;background:radial-gradient(ellipse 34% 46% at 14% 34%,#C7D9FF,#E6EDFF80 60%,transparent 100%);opacity:.75}
body[data-page="404"] #main:after{content:none}
@media(min-width:900px){
body[data-page="404"] #main:after{content:'';bottom:auto;height:480px;background:
 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='236' height='171' viewBox='-1 -1 237 172'%3E%3Cpath d='M0 0H205L235 30V170H30L0 140Z' fill='%23FBFCFF' stroke='%232454F2' stroke-width='1.6' stroke-dasharray='7 6' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat right 28px top 153px/212px 154px,
 url('assets/setup-grid.svg') right -67px top/1300px auto no-repeat;
 opacity:.55;-webkit-mask-image:linear-gradient(90deg,transparent 664px,#000 700px),linear-gradient(180deg,#000 50%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 664px,#000 700px),linear-gradient(180deg,#000 50%,transparent);mask-composite:intersect}
html[dir=rtl] body[data-page="404"] #main:after{transform:scaleX(-1)}}
@media(min-width:1100px){body[data-page="404"] #main:after{-webkit-mask-image:linear-gradient(90deg,transparent 810px,#000 840px),linear-gradient(180deg,#000 50%,transparent);mask-image:linear-gradient(90deg,transparent 810px,#000 840px),linear-gradient(180deg,#000 50%,transparent)}}
@media(min-width:1300px){body[data-page="404"] #main:after{background-position:right 95px top 153px,right 0 top;-webkit-mask-image:linear-gradient(90deg,transparent 860px,#000 890px),linear-gradient(180deg,#000 50%,transparent);mask-image:linear-gradient(90deg,transparent 860px,#000 890px),linear-gradient(180deg,#000 50%,transparent)}}
@media(min-width:1440px){body[data-page="404"] #main:after{-webkit-mask-image:linear-gradient(90deg,transparent calc(50% + 160px),#000 calc(50% + 190px)),linear-gradient(180deg,#000 50%,transparent);mask-image:linear-gradient(90deg,transparent calc(50% + 160px),#000 calc(50% + 190px)),linear-gradient(180deg,#000 50%,transparent)}}
/* narrow: the grid and the empty slot sit after the text, behind the figure and button, never behind the heading */
@media(max-width:899.98px){
body[data-page="404"] .page-heading+.wrap{position:relative}
body[data-page="404"] .page-heading+.wrap:before{content:'';position:absolute;z-index:-1;pointer-events:none;inset:92px 0 -130px;background:
 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='236' height='171' viewBox='-1 -1 237 172'%3E%3Cpath d='M0 0H205L235 30V170H30L0 140Z' fill='%23FBFCFF' stroke='%232454F2' stroke-width='1.6' stroke-dasharray='7 6' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat left calc(50% + 157.5px) top 8px/147px 106px,
 url('assets/setup-grid.svg') center top -51px/900px auto no-repeat;opacity:.45;-webkit-mask-image:linear-gradient(180deg,#000 50%,transparent);mask-image:linear-gradient(180deg,#000 50%,transparent)}
html[dir=rtl] body[data-page="404"] .page-heading+.wrap:before{transform:scaleX(-1)}}
@media(max-width:700px){
body:is([data-page=confirm],[data-page=preferences],[data-page=unsubscribe]) #state-card{min-height:192px}
@media(max-width:339px){body:is([data-page=confirm],[data-page=preferences],[data-page=unsubscribe]) #state-card{min-height:240px}}
body[data-page=help] #main:before{height:420px;background-size:22px 22px;opacity:.25}
body[data-page=security] .page-heading{padding-inline:22px}
body[data-page=privacy] .document:before,body[data-page=terms] .document:before{inset-inline-start:-12px}
}
@media print{body[data-page="404"] .page-heading+.wrap:before,body #main:before,body #main:after,body .page-heading+.body-section:before,body .document:before,body[data-page=security] .page-heading:before,body[data-page=security] .page-heading:after{display:none!important}}