:root{--navy:#14284B;--navy2:#1d3a66;--teal:#0F7C7A;--teal-l:#E3F2F0;--gold:#C9A24B;--gold-d:#9C7A2C;--gold-l:#F6EBCF;--cream:#FBF6EC;--ink:#1d2433;--muted:#5b6475;--line:#e7dfcd;--r:18px;--sh:0 6px 24px rgba(20,40,75,.10)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Heebo,system-ui,Arial,sans-serif;background:var(--cream);color:var(--ink);line-height:1.6;font-size:17px;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--teal)}
a:focus-visible,button:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:8px}
.skip{position:absolute;right:-999px;top:0;background:var(--navy);color:#fff;padding:8px 14px;z-index:99}
.skip:focus{right:8px}
.wrap{width:min(1120px,100% - 32px);margin-inline:auto}
h1,h2,h3,h4{line-height:1.25;margin:0 0 .5em;color:var(--navy)}
h2{font-size:clamp(1.4rem,3.6vw,1.9rem);font-weight:800}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 16px;background:rgba(251,246,236,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--navy)}
.brand img{border-radius:12px;border:1px solid var(--line);background:#fff}
.brand span{display:flex;flex-direction:column;line-height:1.15}
.brand small{color:var(--muted);font-size:.78rem}
.topbar nav{display:flex;gap:4px}
.topbar nav a{text-decoration:none;color:var(--navy);font-weight:600;padding:6px 12px;border-radius:999px}
.topbar nav a:hover{background:var(--gold-l)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font:inherit;font-weight:700;font-size:.95rem;padding:10px 18px;border-radius:999px;border:0;cursor:pointer;text-decoration:none;min-height:44px}
.btn.gold{background:var(--gold);color:var(--navy)}
.btn.gold:hover{background:#d8b45e}
.btn.glass{background:rgba(255,255,255,.16);color:#fff;border:1.5px solid rgba(255,255,255,.6)}
.btn.ghost{background:#fff;color:var(--navy);border:1.5px solid var(--line)}
.btn.ghost:hover{border-color:var(--gold)}
.btn.copy{background:var(--teal);color:#fff;align-self:flex-start}
.btn.copy:hover{background:#0c6664}
.btn.copy.done{background:#2f8a3d}
/* hero */
.hero{position:relative;min-height:min(78vh,640px);display:flex;align-items:flex-end;overflow:hidden;color:#fff}
.hero picture,.hero-bg{position:absolute;inset:0;width:100%;height:100%}
.hero-bg{object-fit:cover;object-position:30% 50%}
.hero-shade{position:absolute;inset:0;background:linear-gradient(270deg,rgba(14,29,56,.92) 0%,rgba(14,29,56,.72) 38%,rgba(14,29,56,.15) 70%,rgba(14,29,56,0) 100%)}
.hero-in{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:56px 0 48px}
.hero-text{max-width:600px}
.eyebrow{display:inline-block;background:rgba(201,162,75,.22);border:1px solid rgba(232,200,120,.7);color:#FCE9B8;font-weight:700;padding:6px 14px;border-radius:999px;margin:0 0 14px}
.hero h1{color:#fff;font-size:clamp(2.4rem,7vw,4.2rem);font-weight:800;margin:0 0 6px;letter-spacing:-.5px;text-shadow:0 2px 18px rgba(0,0,0,.25)}
.hero-sub{font-size:clamp(1.15rem,3vw,1.5rem);font-weight:700;color:#F3D88E;margin:0 0 12px}
.hero-desc{font-size:1.02rem;color:#e9eef7;margin:0 0 20px;max-width:520px}
.hero-cta{display:flex;flex-wrap:wrap;gap:10px}
.hero-logo{display:flex;flex-direction:column;align-items:center;gap:8px;background:rgba(255,255,255,.95);padding:14px 14px 10px;border-radius:22px;box-shadow:0 10px 30px rgba(0,0,0,.25);color:var(--navy);font-weight:700;font-size:.8rem;text-align:center;width:180px;flex:none}
.hero-logo img{width:150px;height:150px}
.block{padding:40px 0 8px}
.note{color:var(--muted);margin:-4px 0 16px}
.sgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.scard{display:flex;flex-direction:column;background:#fff;border-radius:var(--r);box-shadow:var(--sh);overflow:hidden;text-decoration:none;color:inherit;border:2px solid transparent;transition:transform .2s,border-color .2s}
.scard.active:hover{transform:translateY(-3px);border-color:var(--gold)}
.scard img{aspect-ratio:16/9;object-fit:cover;width:100%}
.scard-body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:6px}
.scard h3{font-size:1.3rem;margin:4px 0 0}
.scard p{margin:0;color:var(--muted)}
.badge{align-self:flex-start;font-size:.82rem;font-weight:700;padding:3px 12px;border-radius:999px}
.badge.ok{background:var(--teal-l);color:var(--teal)}
.badge.wait{background:var(--gold-l);color:var(--gold-d)}
.mini{list-style:none;display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:6px 0}
.mini li{background:var(--cream);border:1px solid var(--line);padding:2px 10px;border-radius:999px;font-size:.85rem}
.go{color:var(--teal);font-weight:800;margin-top:4px}
.scard.soon{opacity:.92;background:linear-gradient(160deg,#fff,#f7f1e3)}
.soon-art{aspect-ratio:16/9;display:grid;place-items:center;background:repeating-linear-gradient(135deg,#efe4c8 0 14px,#f6eedb 14px 28px)}
.soon-art span{width:92px;height:92px;border-radius:50%;display:grid;place-items:center;background:var(--navy);color:var(--gold);font-size:3rem;font-weight:800;box-shadow:var(--sh)}
.how{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.how div{background:#fff;border-radius:var(--r);padding:16px;display:flex;gap:12px;align-items:flex-start;box-shadow:0 2px 10px rgba(20,40,75,.06)}
.how b{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--gold);color:var(--navy)}
.how p{margin:0}
/* session page */
.s-hero,.tool-hero{background:linear-gradient(135deg,var(--navy) 0%,var(--navy2) 55%,var(--teal) 140%);color:#fff;padding:32px 0 30px}
.s-hero h1,.tool-hero h1{color:#fff;font-size:clamp(1.8rem,5.5vw,2.8rem);font-weight:800}
.lead{font-size:1.08rem;color:#e6ecf5;max-width:760px;margin:0 0 16px}
.crumbs{font-size:.9rem;color:#c9d3e4;margin:0 0 8px}
.crumbs a{color:#F3D88E}
.jump{display:flex;flex-wrap:wrap;gap:8px}
.jump a{color:#fff;text-decoration:none;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);padding:6px 14px;border-radius:999px;font-weight:600;font-size:.92rem}
.jump a:hover{background:rgba(255,255,255,.22)}
.block-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.block-head h2{margin:0}
.slides{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.slide,.shot{position:relative;display:block;border-radius:12px;overflow:hidden;box-shadow:0 2px 10px rgba(20,40,75,.12);border:2px solid transparent}
.slide:hover,.shot:hover{border-color:var(--gold)}
.slide span{position:absolute;bottom:6px;left:6px;background:var(--navy);color:#fff;font-size:.75rem;font-weight:700;border-radius:999px;padding:1px 8px}
.video{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);background:#0d1a30}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.padlet{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:linear-gradient(120deg,var(--gold-l),#fff 70%);border:2px solid var(--gold);border-radius:var(--r);padding:20px 22px;text-decoration:none;color:var(--ink);box-shadow:var(--sh)}
.padlet:hover{transform:translateY(-2px)}
.padlet>span:nth-child(2){flex:1 1 220px;display:flex;flex-direction:column}
.padlet b{font-size:1.35rem;color:var(--navy)}
.padlet small{color:var(--muted);font-size:.95rem}
.padlet-ico{font-size:2.4rem}
.callout{background:var(--teal-l);border-inline-start:5px solid var(--teal);padding:12px 16px;border-radius:12px;margin:18px 0 0}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.tile{display:flex;flex-direction:column;background:#fff;border-radius:22px;overflow:hidden;text-decoration:none;color:inherit;box-shadow:var(--sh);border:2px solid transparent;transition:transform .2s,border-color .2s}
.tile:hover{transform:translateY(-4px);border-color:var(--gold)}
.tile img{aspect-ratio:4/3;object-fit:cover;width:100%}
.tile-body{padding:16px 20px 20px}
.tile h3{font-size:1.45rem;font-weight:800;margin:0 0 4px}
.tile p{margin:0 0 6px;color:var(--muted)}
/* tool pages */
.tool-hero-in{display:flex;align-items:center;justify-content:space-between;gap:24px}
.tool-hero-img{width:200px;height:200px;border-radius:24px;object-fit:cover;flex:none;box-shadow:0 10px 30px rgba(0,0,0,.25);border:4px solid rgba(255,255,255,.85)}
.toolchip{display:inline-block;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);border-radius:12px;padding:6px 12px;margin:0 0 14px}
.toolchip a{color:#F3D88E}
.steps{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.steps li{display:flex;gap:14px;background:#fff;border-radius:var(--r);padding:16px 18px;box-shadow:0 2px 10px rgba(20,40,75,.06)}
.snum{flex:none;width:40px;height:40px;border-radius:50%;background:var(--navy);color:var(--gold);font-weight:800;display:grid;place-items:center;font-size:1.1rem}
.steps h4{font-size:1.1rem;margin:4px 0 4px}
.steps p{margin:0}
.pgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:16px}
.pgrid.one{grid-template-columns:1fr;max-width:820px}
.pcard{display:flex;flex-direction:column;gap:10px;background:#fff;border-radius:var(--r);padding:18px;box-shadow:0 2px 12px rgba(20,40,75,.08);border-top:5px solid var(--gold)}
.pcard-more{border-top-color:var(--teal)}
.pcard-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.pcard h4{margin:0;font-size:1.08rem}
.tag{font-size:.78rem;font-weight:700;padding:2px 10px;border-radius:999px;white-space:nowrap}
.tag-src{background:var(--gold-l);color:var(--gold-d)}
.tag-more{background:var(--teal-l);color:var(--teal)}
.ptext{margin:0;white-space:pre-wrap;word-wrap:break-word;font-family:inherit;font-size:.95rem;background:var(--cream);border:1px dashed #dccfae;border-radius:12px;padding:12px 14px;max-height:340px;overflow:auto;line-height:1.65}
.tips{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.tips li{background:#fff;border-radius:14px;padding:12px 16px 12px 16px;border-inline-start:5px solid var(--gold);box-shadow:0 2px 10px rgba(20,40,75,.05)}
.sites-shots{margin-top:22px;background:#fff;border-radius:var(--r);padding:18px;box-shadow:0 2px 10px rgba(20,40,75,.06)}
.sites-shots h3{font-size:1.15rem}
.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin-bottom:12px}
.pager{display:flex;flex-wrap:wrap;gap:10px;padding:34px 0 10px}
.pager-a{text-decoration:none;background:#fff;border:1.5px solid var(--line);color:var(--navy);font-weight:700;padding:8px 16px;border-radius:999px}
.pager-a.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.pager-a.back{margin-inline-start:auto;color:var(--teal)}
/* lightbox */
.lightbox{border:0;padding:0;background:transparent;max-width:min(1100px,96vw);width:96vw}
.lightbox::backdrop{background:rgba(10,18,34,.88)}
.lightbox figure{margin:0}
.lightbox img{width:100%;border-radius:12px;background:#fff}
.lightbox figcaption{color:#fff;text-align:center;margin-top:8px;font-weight:600}
.lightbox button{position:fixed;background:rgba(255,255,255,.92);color:var(--navy);border:0;border-radius:50%;width:48px;height:48px;font-size:1.6rem;font-weight:800;cursor:pointer;display:grid;place-items:center}
.lb-close{top:14px;left:14px}
.lb-prev{top:50%;right:10px;transform:translateY(-50%)}
.lb-next{top:50%;left:10px;transform:translateY(-50%)}
/* footer */
.footer{margin-top:56px;background:var(--navy);color:#dfe6f1;padding:30px 0 18px}
.foot-in{width:min(1120px,100% - 32px);margin-inline:auto;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.foot-in img{border-radius:16px;background:#fff;padding:4px}
.footer p{margin:2px 0}
.foot-name{font-weight:800;color:var(--gold);font-size:1.15rem}
.foot-links{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:6px!important}
.foot-links a{color:#fff;text-decoration:none}
.foot-small{text-align:center;font-size:.82rem;color:#9fb0c9;margin-top:18px!important}
@media (max-width:700px){
 body{font-size:16px}
 .topbar nav a{padding:6px 8px;font-size:.92rem}
 .brand small{display:none}
 .hero{min-height:auto}
 .hero-bg{object-position:20% 30%}
 .hero-shade{background:linear-gradient(0deg,rgba(14,29,56,.95) 0%,rgba(14,29,56,.82) 45%,rgba(14,29,56,.25) 80%,rgba(14,29,56,.05) 100%)}
 .hero-in{flex-direction:column-reverse;align-items:stretch;padding:150px 0 28px}
 .hero-logo{flex-direction:row;width:auto;align-self:flex-start;padding:6px 12px 6px 8px;border-radius:16px;font-size:.78rem}
 .hero-logo img{width:56px;height:56px}
 .tool-hero-in{flex-direction:column-reverse;align-items:flex-start}
 .tool-hero-img{width:120px;height:120px;border-radius:18px}
 .slides{grid-template-columns:repeat(2,1fr)}
 .block{padding-top:30px}
 .pager-a.back{margin-inline-start:0}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}