/* Landing page upgrade (Oct 9, 2026): hero micro-copy, Z-pattern feature rows for the officer tools, permissions/trust section.
   Uses the site's own tokens so it follows the light and dark themes. Elevation in dark = lighter surface, not shadow. */
.hero-micro{margin:-6px 0 4px;font-size:13.5px;color:rgba(232,237,243,.78);max-width:52ch;line-height:1.5}
.hero.hero-split .hero-copy h1{font-size:clamp(32px,4vw,52px);line-height:1.04;max-width:none}

.lp-z{display:grid;gap:22px;padding:28px 0 8px}
.lp-z-head{max-width:68ch}
.lp-z-head h2{margin:4px 0 6px;font-size:clamp(24px,3.2vw,34px);line-height:1.12;letter-spacing:-.01em}
.lp-z-head p{margin:0;font-size:15px}
.lp-zrow{display:grid;grid-template-columns:1.1fr .9fr;gap:22px;align-items:center;padding:18px;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--panel);box-shadow:var(--shadow-1)}
.lp-zrow:nth-child(odd) .lp-ztext{order:2}
.lp-zrow:nth-child(odd) .lp-zmock{order:1}
.lp-ztext h3{margin:8px 0 6px;font-size:21px;line-height:1.2}
.lp-ztext p{margin:0;color:var(--muted);font-size:15px;line-height:1.6;max-width:48ch}
.lp-zmock{display:grid;place-items:center}
.zm-card{width:100%;max-width:340px;display:grid;gap:8px;padding:14px;border-radius:14px;border:1px solid var(--rule);background:var(--panel-2);font-size:14px}
:root[data-wp-theme="dark"] .zm-card{background:rgba(255,255,255,.07)}
.zm-row{display:flex;align-items:center;gap:10px;min-height:28px}
.zm-row > span:first-child{flex:none}
.zm-name{font-weight:650;min-width:72px}
.zm-cls{color:var(--muted);flex:1;font-size:13px}
.zm-r{font-family:var(--display);font-weight:900;font-size:13px;padding:2px 9px;border-radius:8px;color:var(--accent-ink);background:var(--accent)}
.zm-r.r-s{background:linear-gradient(135deg,var(--accent-2),var(--accent));box-shadow:0 0 14px color-mix(in srgb,var(--accent) 50%,transparent)}
.zm-r.r-a{background:color-mix(in srgb,var(--accent) 78%,var(--panel))}
.zm-r.r-b{background:color-mix(in srgb,var(--accent) 55%,var(--panel));color:var(--text)}
.zm-r.r-c{background:var(--rule-strong);color:var(--text)}
.zm-sw{margin-left:auto;flex:none;width:42px;height:24px;border-radius:999px;background:var(--rule-strong);position:relative;transition:background .25s var(--ease)}
.zm-sw em{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--panel);box-shadow:0 1px 3px rgba(0,0,0,.35);transition:transform .25s var(--ease)}
.zm-sw.on{background:var(--accent)}
.zm-sw.on em{transform:translateX(18px)}
.zm-sub{font-size:12.5px;color:var(--muted)}
.zm-list{display:flex;flex-wrap:wrap;gap:6px}
.zm-list span{font-size:12px;font-weight:650;padding:3px 9px;border-radius:999px;border:1px solid var(--rule)}
.zm-list .ok{color:var(--accent);background:var(--accent-soft);border-color:transparent}
.zm-list .off{color:var(--faint);text-decoration:line-through}
.zm-chart{position:relative;display:flex;align-items:flex-end;gap:8px;height:110px;padding:0 6px 0 6px;border-bottom:1px solid var(--rule-strong)}
.zm-chart i{flex:1;border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,var(--accent-2),var(--accent));opacity:.9}
.zm-chart i.avg{background:var(--rule-strong);opacity:1}
.zm-chart s{position:absolute;left:0;right:0;height:0;border-top:2px dashed color-mix(in srgb,var(--accent) 70%,transparent)}
.zm-chart s::after{content:"average";position:absolute;right:0;top:-18px;font-size:11px;font-weight:700;color:var(--accent)}
.zm-bar{flex:1;height:8px;border-radius:99px;background:var(--rule);overflow:hidden}
.zm-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent-2),var(--accent))}
.zm-row > b{font-variant-numeric:tabular-nums;min-width:44px;text-align:right}
.zm-pick{display:flex;gap:4px;padding:4px;border-radius:999px;background:var(--rule)}
.zm-pick span{flex:1;text-align:center;padding:6px 0;border-radius:999px;font-weight:650;font-size:13px;color:var(--muted)}
.zm-pick .on{background:var(--panel);color:var(--text);box-shadow:var(--shadow-1)}

.lp-trust{display:grid;gap:18px;padding:28px 0 8px}
.lp-trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.lp-trust-col{padding:18px;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--panel)}
.lp-trust-col h3{margin:0 0 10px;font-size:16px}
.lp-trust-col ul{margin:0 0 10px;padding-left:18px;display:grid;gap:5px;font-size:14.5px}
.lp-trust-col p{margin:0;font-size:13.5px;line-height:1.55}
.lp-trust-never{border-color:color-mix(in srgb,var(--accent) 40%,var(--rule));background:linear-gradient(180deg,var(--accent-soft),var(--panel) 60%)}
.lp-trust-never ul{list-style:none;padding-left:0}
.lp-trust-never li{font-weight:650}
.lp-trust-never li::before{content:"\2715";display:inline-block;width:1.4em;font-weight:900;color:var(--accent)}

/* Oct 12 conversion pass: trust note next to the buttons, fold-out for every tool, builder strip. */
.lp-seeperms{display:inline-flex;align-items:center;min-height:28px;padding:0 2px;margin:0;border:0;background:none;color:var(--accent);font:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.lp-seeperms:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.lp-all{border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--panel);padding:0 18px}
.lp-all > summary{min-height:52px;display:flex;align-items:center;font-weight:750;cursor:pointer;list-style:none}
.lp-all > summary::-webkit-details-marker{display:none}
.lp-all > summary::after{content:"+";margin-left:auto;font-size:20px;font-weight:700;color:var(--accent)}
.lp-all[open] > summary::after{content:"\2212"}
.lp-all .lp-grid{padding:0 0 18px}
.lp-z > .lp-stats{margin:0}
.lp-maker{display:flex;align-items:center;gap:14px;justify-content:space-between;padding:14px 18px;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--panel-2);font-size:14.5px;line-height:1.5}
.lp-maker .btn{flex:none}
/* Oct 12: real screens from a sample guild in place of the drawn mocks (public/landing/*.webp, 2x, ~10-30 KB each). */
.lp-shot{margin:0;width:100%;max-width:560px;display:grid;gap:8px}
.lp-shot img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--rule);background:#fff;box-shadow:0 10px 30px rgba(10,14,22,.12)}
.lp-shot-stack{position:relative}
.lp-shot-stack .lp-shot-2{width:78%;margin:-26px 0 0 auto;position:relative;box-shadow:0 18px 40px rgba(10,14,22,.22)}
.lp-shot-fade img{-webkit-mask:linear-gradient(90deg,#000 82%,transparent);mask:linear-gradient(90deg,#000 82%,transparent)}
.lp-shot-cap{margin:0;font-size:12px;color:var(--faint)}
.lp-zmock{place-items:stretch center}

/* Player card section: the real card (features/badges.js) with the site's own foil + tilt (features/polish.js). */
.lp-cards{display:grid;grid-template-columns:.9fr 1.1fr;gap:28px;align-items:center;padding:28px 0 8px}
.lp-cards-copy h2{margin:4px 0 8px;font-size:clamp(24px,3.2vw,34px);line-height:1.12}
.lp-cards-copy p{margin:0 0 8px;font-size:15px;line-height:1.6;max-width:46ch}
.lp-cards-hint{font-size:13px!important;color:var(--faint)}
.lp-cardstage{display:grid;gap:8px;justify-items:center;perspective:1000px}
.lp-cardstage .pcard{width:100%;max-width:440px}
.lp-cardstage .bdg{pointer-events:none}
.lp-cardstage .lp-ava{display:grid;place-items:center;font-family:var(--display,serif);font-size:30px;font-weight:900;color:var(--pc-ring,#e0b84a);background:radial-gradient(circle at 35% 30%,#3a2f55,#14101f)}
@media (hover:hover){[data-hint-touch]{display:none}}
@media (hover:none){[data-hint-hover]{display:none}}
@property --mx{syntax:'<percentage>';inherits:true;initial-value:50%}
@property --my{syntax:'<percentage>';inherits:true;initial-value:50%}
@property --rx{syntax:'<angle>';inherits:true;initial-value:0deg}
@property --ry{syntax:'<angle>';inherits:true;initial-value:0deg}
.pcard.lp-drift{animation:lpDrift 7s ease-in-out infinite}
.pcard.lp-drift .pc-sheen{opacity:.5}
@keyframes lpDrift{0%,100%{--mx:20%;--my:25%;--rx:2deg;--ry:-3deg}50%{--mx:80%;--my:70%;--rx:-2deg;--ry:3deg}}
@media (prefers-reduced-motion:reduce){.pcard.lp-drift{animation:none}}

@media (max-width:760px){
  .lp-cards{grid-template-columns:1fr;gap:16px}
  .lp-shot-stack .lp-shot-2{width:86%;margin-top:-16px}
  .lp-maker{flex-direction:column;align-items:flex-start}
  .lp-zrow{grid-template-columns:1fr;gap:14px;padding:14px}
  .lp-zrow:nth-child(odd) .lp-ztext{order:1}
  .lp-zrow:nth-child(odd) .lp-zmock{order:2}
  .lp-trust-grid{grid-template-columns:1fr}
  .hero-micro{max-width:none}
}
@media (prefers-reduced-motion:reduce){.zm-sw,.zm-sw em{transition:none}}