/* PHOENYX · addon scoped (phx-*). No styles are applied to existing site elements. */
:root { --phx-forest:#193e34; --phx-forest-dark:#102d28; --phx-cream:#f6f4ec; --phx-paper:#fffdfa; --phx-ink:#173b32; --phx-muted:#5b716a; --phx-gold:#e7c873; --phx-border:#d8e3d9; --phx-livia:#6d3e95; --phx-nyx:#a78bfa; --phx-nyx-bg:#151221; }
body.phx-preview { margin:0; background:var(--phx-cream); color:var(--phx-ink); font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.6; }
.phx-preview *, .phx-preview *::before, .phx-preview *::after { box-sizing:border-box; }
.phx-preview a { color:inherit; }
.phx-preview a:focus-visible { outline:3px solid #c89b36; outline-offset:4px; border-radius:2px; }
.phx-wrap { width:min(1130px,calc(100% - 44px)); margin-inline:auto; }
.phx-skip { position:absolute; top:-100px; left:14px; z-index:20; padding:10px 14px; background:var(--phx-gold); color:var(--phx-forest-dark); border-radius:8px; }
.phx-skip:focus { top:8px; }
.phx-environment { padding:8px 20px; text-align:center; background:#e9e5d6; color:#314e44; font-size:.78rem; font-weight:700; letter-spacing:.065em; border-bottom:1px solid #d5d9cc; }
.phx-header { background:var(--phx-paper); border-bottom:1px solid var(--phx-border); }
.phx-nav { min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.phx-brand { color:var(--phx-forest)!important; font-size:.9rem; font-weight:850; text-transform:uppercase; letter-spacing:.045em; text-decoration:none; }
.phx-navlinks { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.phx-navlinks a { padding:8px 12px; text-decoration:none; font-weight:650; font-size:.86rem; color:var(--phx-ink); border-radius:20px; transition:background .15s,color .15s; }
.phx-navlinks a[aria-current="page"] { background:var(--phx-forest); color:white; }
.phx-navlinks a:hover:not([aria-current="page"]) { background:#e9efe9; }
.phx-hero { padding:74px 0 82px; color:#fff; background:radial-gradient(circle at 90% 22%,rgba(231,200,115,.21),transparent 32%),linear-gradient(120deg,#10382e 0%,#1e5041 70%,#2d5c48 100%); position:relative; overflow:hidden; }
.phx-hero::after { content:""; pointer-events:none; position:absolute; height:290px; width:290px; right:-80px; bottom:-150px; border:1px solid rgba(255,255,255,.18); transform:rotate(35deg); border-radius:50%; box-shadow:0 0 0 45px rgba(255,255,255,.03),0 0 0 100px rgba(255,255,255,.025); }
.phx-violet-hero { background:radial-gradient(circle at 80% 30%,rgba(224,189,255,.20),transparent 35%),linear-gradient(117deg,#352044,#5f3980 65%,#79539c); }
.phx-nyx-hero { background-color:#151221; background-image:linear-gradient(rgba(167,139,250,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(167,139,250,.09) 1px,transparent 1px),radial-gradient(circle at 76% 24%,#4b3577 0%,transparent 40%),linear-gradient(112deg,#151221,#242038); background-size:36px 36px,36px 36px,auto,auto; }
.phx-hero .phx-wrap { position:relative; z-index:1; }
.phx-eyebrow { font-weight:800; letter-spacing:.15em; font-size:.72rem; text-transform:uppercase; color:#aa8140; }
.phx-hero .phx-eyebrow { color:var(--phx-gold); }
.phx-title { font-family:Georgia,"Times New Roman",serif; font-weight:500; letter-spacing:-.035em; font-size:clamp(2.5rem,6vw,5.1rem); line-height:1.04; margin:18px 0 24px; max-width:850px; }
.phx-lead { max-width:760px; color:#e8eee8; font-size:clamp(1.04rem,2vw,1.34rem); line-height:1.7; margin:0; }
.phx-hero.phx-nyx-hero .phx-lead { color:#efe7ff; }
.phx-section { padding:64px 0 76px; }
.phx-section h2 { font-family:Georgia,"Times New Roman",serif; font-size:clamp(1.7rem,3.2vw,2.45rem); line-height:1.23; color:var(--phx-forest-dark); font-weight:500; margin:6px 0 18px; }
.phx-section > .phx-wrap > p { max-width:780px; }
.phx-grid { margin-top:27px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.phx-card { background:var(--phx-paper); min-width:0; padding:26px 25px; border:1px solid var(--phx-border); border-radius:17px; box-shadow:0 10px 25px rgba(25,62,52,.055); display:flex; flex-direction:column; align-items:flex-start; transition:transform .16s,box-shadow .16s; }
.phx-card:hover { transform:translateY(-3px); box-shadow:0 15px 30px rgba(25,62,52,.105); }
.phx-card--livia { border-top:4px solid var(--phx-livia); }
.phx-card--nyx { border-top:4px solid #8666cc; }
.phx-card h3 { margin:7px 0 8px; line-height:1.24; color:#16372f; font-size:1.3rem; }
.phx-card p { margin:0 0 20px; color:#4d665e; font-size:.97rem; line-height:1.63; flex-grow:1; }
.phx-meta { display:block; text-transform:uppercase; font-size:.7rem; letter-spacing:.115em; color:#6f815e; font-weight:800; }
.phx-card--livia .phx-meta { color:var(--phx-livia); }
.phx-card--nyx .phx-meta { color:#7854b8; }
.phx-card a { color:var(--phx-forest)!important; text-underline-offset:4px; font-weight:800; font-size:.91rem; }
.phx-card--livia a { color:var(--phx-livia)!important; }
.phx-card--nyx a { color:#7150ad!important; }
.phx-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin:26px 0 29px; }
.phx-panel { background:rgba(255,255,255,.7); border:1px solid var(--phx-border); border-radius:14px; padding:27px 28px; }
.phx-panel h3 { margin:12px 0; color:#1d4539; font-size:1.24rem; line-height:1.34; }
.phx-panel p { margin:0 0 14px; color:#476258; }
.phx-panel p:last-child { margin-bottom:0; }
.phx-note { margin:27px 0; padding:20px 22px; background:#e9eee6; border-left:4px solid #739c80; border-radius:0 11px 11px 0; color:#234637; }
.phx-note strong { color:#10372d; }
.phx-link { font-weight:700; text-underline-offset:3px; color:#234c3e!important; }
.phx-facts { display:flex; flex-wrap:wrap; gap:9px; margin:24px 0 16px; }
.phx-facts span { background:#e4ebdf; color:#244b37; border:1px solid #d5e1d1; padding:10px 14px; font-weight:700; font-size:.87rem; border-radius:30px; }
.phx-steps { padding-left:0; list-style:none; max-width:800px; }
.phx-steps li { margin:10px 0; background:white; border:1px solid var(--phx-border); padding:14px 18px; border-radius:8px; }
.phx-steps strong { color:var(--phx-forest); display:block; }
.phx-livia-accent { background:linear-gradient(125deg,#f7eefa,#fefbff); border:1px solid #ddcde9; border-left:5px solid var(--phx-livia); padding:22px 26px; border-radius:0 12px 12px 0; }
.phx-livia-accent strong { color:#633580; }
.phx-livia-accent p { margin:8px 0 0; color:#624d6a; }
.phx-nyx-accent { padding:24px 26px; background:#1b172a; border:1px solid #68578b; color:#f3effa; border-radius:14px; }
.phx-nyx-accent strong { color:#c6b5ff; }
.phx-nyx-accent p { margin:9px 0 0; color:#ded6f0; }
.phx-swatches { display:flex; flex-wrap:wrap; gap:12px; margin-top:18px; }
.phx-swatch { display:inline-flex; align-items:center; gap:9px; padding:7px 11px 7px 7px; border:1px solid rgba(255,255,255,.28); border-radius:12px; font-size:.79rem; color:#f3effa; }
.phx-swatch i { display:inline-block; height:23px; width:23px; border:1px solid rgba(255,255,255,.35); border-radius:7px; }
.phx-diagram { display:block; margin:18px auto 10px; max-width:540px; width:100%; height:auto; border-radius:14px; box-shadow:0 6px 28px rgba(20,50,40,.1); }
.phx-footer { background:#102e27; color:#e1eae1; padding:35px 0 46px; }
.phx-footer strong { color:#f6edd2; font-size:.91rem; }
.phx-footer p { max-width:850px; color:#d3dfd3; font-size:.88rem; }
.phx-footer a { color:#f5d88e!important; text-underline-offset:3px; }
@media (max-width:900px){ .phx-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .phx-nav { align-items:flex-start; flex-direction:column; padding:15px 0; } }
@media (max-width:630px){ .phx-wrap { width:min(100% - 30px,1130px); } .phx-hero { padding:58px 0 62px; } .phx-section { padding:44px 0 54px; } .phx-grid,.phx-columns { grid-template-columns:1fr; } .phx-card,.phx-panel { padding:23px; } .phx-navlinks { gap:2px; } .phx-navlinks a { font-size:.79rem; padding:7px 9px; } .phx-environment { font-size:.69rem; padding:7px 10px; } }
@media (prefers-reduced-motion:reduce){ .phx-card,.phx-navlinks a { transition:none; } .phx-card:hover { transform:none; } }
@media print { .phx-header,.phx-environment { display:none; } .phx-hero { color:#173b32; background:white; } .phx-hero .phx-lead { color:#173b32; } .phx-section { padding:15px 0; } .phx-card { box-shadow:none; } }