/* RAW MATERIAL: dark design from the owner's claude.ai/design export (RAW_MATERIAL.html). */
[hidden]{display:none!important}
:root{
  color-scheme:dark;
  --bg:#080A0B; --bg2:#0B0D0E; --panel:#0F1214; --panel2:#14181B; --deep-bg:#060708;
  --line:#1C2023; --line2:#2B3034; --line3:#3A4045;
  --text:#F3F4F6; --text2:#E6E8EC; --soft:#C9CCD1; --dim:#B7BDC4; --muted:#8B8F95;
  --red:#EF233C; --yellow:#FFCC00; --blue:#168BFF; --grey:#8E9299; --purple:#9333EA; --green:#00C76F;
  --display:'Archivo','Arial Black',sans-serif; --sans:'Inter',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace;
  --clip:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
body{font-family:var(--sans)}
a{color:var(--text);text-decoration:none}
a:hover{color:var(--soft)}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--soft);color:var(--bg)}
img{display:block;max-width:100%}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:16px;background:var(--text);color:var(--bg);padding:8px 12px;z-index:99}
.page{min-height:0;display:flex;flex-direction:column}
main{flex:1;width:100%}
.disp{font-family:var(--display);font-weight:900;font-stretch:125%;text-transform:uppercase}
.mono{font-family:var(--mono)}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--dim)}
.stripe{display:flex;height:4px}.stripe span{flex:1}
.stripe span:nth-child(1){background:var(--red)}.stripe span:nth-child(2){background:var(--yellow)}.stripe span:nth-child(3){background:var(--blue)}
.stripe span:nth-child(4){background:var(--grey)}.stripe span:nth-child(5){background:var(--purple)}.stripe span:nth-child(6){background:var(--green)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;background:var(--text);color:var(--bg);border:0;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;clip-path:var(--clip);align-self:flex-start;text-align:center}
.btn:hover{background:var(--soft);color:var(--bg)}
.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--line3);clip-path:none}
.btn.ghost:hover{background:var(--line);color:var(--text)}
.btn.block{width:100%;align-self:stretch;min-height:56px}
.btn.sm{min-height:36px;padding:0 14px;font-size:11px}
.btn.danger{background:#EF233C;color:#fff}
.btn[disabled]{opacity:.4;cursor:not-allowed}
.link{background:none;border:0;padding:0;color:var(--soft);font-size:13px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.link:hover{color:var(--text)}

/* Notice + header */
.notice{background:var(--text);color:var(--bg);padding:8px 20px;text-align:center;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase}
.top{position:sticky;top:0;z-index:30;background:rgba(8,10,11,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.top-in{max-width:1280px;margin:0 auto;padding:0 clamp(20px,4vw,48px);min-height:76px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 24px}
.brand{height:76px;display:flex;align-items:center;gap:14px;color:var(--text2)}
.brand:hover{color:var(--text2)}
.brand svg{width:44px;height:33px;flex:none}
.brand .rule{width:1px;height:32px;background:var(--line3)}
.brand .words{display:flex;flex-direction:column;gap:6px}
.brand .name{font-family:var(--display);font-weight:900;font-stretch:125%;font-size:18px;line-height:1;white-space:nowrap}
.brand .tag{font-size:8.5px;font-weight:500;line-height:1;letter-spacing:.47em;color:var(--dim);white-space:nowrap}
.top nav{display:flex;align-items:stretch;gap:clamp(18px,3vw,36px)}
.top nav a{display:flex;align-items:center;min-height:76px;border-bottom:2px solid transparent;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;color:var(--dim)}
.top nav a:hover{color:var(--text)}
.top nav a[aria-current="page"]{color:var(--text);border-bottom-color:var(--text)}
.cart-btn{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 16px;background:var(--text);color:var(--bg);border:0;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;clip-path:var(--clip)}
.cart-btn:hover{background:var(--soft)}
.bag-count{min-width:22px;height:22px;padding:0 6px;display:inline-flex;align-items:center;justify-content:center;background:var(--bg);color:var(--text);font-family:var(--mono);font-size:11px}
/* Under 920px (iPad portrait and phones) the nav takes its own row under the logo and Cart, so Cart stays on the first row */
@media(max-width:920px){.top nav{order:3;flex-basis:100%;justify-content:space-between;flex-wrap:wrap;column-gap:12px}.top nav a{min-height:52px}}
@media(max-width:720px){.top nav{column-gap:8px}.top nav a{min-height:48px}.brand .rule,.brand .words{display:none}}
/* Under 360px: tighter header so all five links fit on one row (they wrap rather than run off the screen if they can't) */
@media(max-width:359px){.top-in{padding:0 16px}.top nav{column-gap:4px}.top nav a{font-size:11px;letter-spacing:.08em}}
/* Under 360px the home band titles' longest word ("RESEARCHERS.") no longer fits at 24px */
@media(max-width:359px){.band>div{min-width:0}.band h2{font-size:21px;overflow-wrap:break-word}}

/* Sections */
.wrap{max-width:1280px;margin:0 auto;padding:clamp(28px,4vw,56px) clamp(20px,4vw,48px) 0;display:flex;flex-direction:column;gap:clamp(28px,4vw,48px)}
.pagehead{display:flex;flex-direction:column;gap:14px}
.pagehead h1,.section h1{margin:0;font-family:var(--display);font-weight:900;font-stretch:125%;font-size:clamp(32px,4.4vw,56px);line-height:1;text-transform:uppercase}
.lede{margin:0;font-size:17px;line-height:1.65;color:var(--soft);max-width:44em}
.shipline,.fine{margin:0;font-size:13px;line-height:1.6;color:var(--muted)}
.center{text-align:center}
.section{max-width:1280px;margin:0 auto;width:100%;padding:clamp(28px,4vw,56px) clamp(20px,4vw,48px) 0;display:flex;flex-direction:column;gap:28px}
.head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.shop-msg{font-family:var(--mono);font-size:13px;color:var(--green)}

/* Home */
.hero{max-width:1280px;margin:0 auto;padding:clamp(48px,7vw,104px) clamp(20px,4vw,48px) clamp(40px,5vw,72px);display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
.hero h1{margin:16px 0 0;font-family:var(--display);font-weight:900;font-stretch:125%;font-size:clamp(44px,6.2vw,96px);line-height:.92;text-transform:uppercase}
.hero p{margin:22px 0 0;font-size:clamp(16px,1.3vw,19px);line-height:1.65;color:var(--soft);max-width:32em}
.hero .ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.spec{border:1px solid var(--line2);background:var(--panel);font-family:var(--mono);font-size:13px}
.spec div{display:flex;justify-content:space-between;gap:16px;padding:15px 18px;border-bottom:1px solid var(--line)}
.spec div:last-child{border-bottom:0}
.spec span{color:var(--muted);letter-spacing:.12em;text-transform:uppercase}
.spec strong{font-weight:500;color:var(--text)}
.cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.cats a{background:var(--bg);padding:22px 20px;display:flex;flex-direction:column;gap:12px;min-height:150px}
.cats a:hover{background:var(--panel)}
.cats .sw{width:28px;height:6px}
.cats strong{font-size:15px;font-weight:600;line-height:1.35}
.cats small{font-family:var(--mono);font-size:12px;color:var(--muted)}
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pillars div{padding:30px clamp(18px,3vw,32px);border-right:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.pillars div:last-child{border-right:0}
.pillars .n{font-family:var(--mono);color:var(--muted);font-size:13px}
.pillars h3{margin:0;font-family:var(--display);font-weight:900;font-stretch:110%;font-size:18px;text-transform:uppercase}
.pillars p{margin:0;font-size:14px;line-height:1.6;color:var(--soft)}
.band{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.band>div{background:var(--panel);padding:clamp(28px,4vw,56px);display:flex;flex-direction:column;gap:16px}
.band h2{margin:0;font-family:var(--display);font-weight:900;font-stretch:125%;font-size:clamp(24px,2.6vw,36px);line-height:1.05;text-transform:uppercase}
.band p{margin:0;font-size:15px;line-height:1.65;color:var(--soft);max-width:36em}
@media(max-width:860px){.hero{grid-template-columns:1fr}.pillars div{border-right:0;border-bottom:1px solid var(--line)}}

/* Shop */
.filters{display:flex;gap:8px;flex-wrap:wrap}
.filters button{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 14px;background:transparent;border:1px solid var(--line2);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);cursor:pointer}
.filters button i{width:10px;height:10px;display:inline-block}
.filters button[aria-selected="true"]{background:var(--text);color:var(--bg);border-color:var(--text)}
.shop-note{margin:0;font-size:14px;line-height:1.6;color:var(--soft)}
.shop-note a{text-decoration:underline;text-underline-offset:3px}
.products{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:16px}
.product{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line2)}
.product .bar{height:6px}
.product .pic{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--panel2);border-bottom:1px solid var(--line)}
.product .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.product .pic .ph{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:18px;background-image:linear-gradient(rgba(243,244,246,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(243,244,246,.04) 1px,transparent 1px);background-size:24px 24px}
.product .pic .ph b{font-family:var(--display);font-weight:900;font-stretch:125%;font-size:28px;line-height:1;text-transform:uppercase;color:var(--text2)}
.product .pic .ph em{font-style:normal;font-family:var(--mono);font-size:12px;color:var(--muted)}
.product .body{display:flex;flex-direction:column;gap:10px;padding:20px;flex:1}
.product .type{font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.04em}
.product .cat{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.product .cat i{width:10px;height:10px;display:inline-block;flex:none}
.product .name-row{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.product h2{margin:0;font-family:var(--display);font-weight:900;font-stretch:115%;font-size:22px;text-transform:uppercase;color:var(--text)}
.product .price{font-family:var(--mono);font-size:16px;font-weight:600}
.product .note{font-size:13px;line-height:1.55;color:var(--muted);flex:1}
.product .lab{align-self:flex-start;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;padding:4px 8px;border:1px solid var(--line3);color:var(--yellow)}
.product .btn{margin-top:6px;align-self:stretch}

/* Forms / cards */
.card{display:flex;flex-direction:column;gap:18px;max-width:460px;background:var(--panel);border:1px solid var(--line2);padding:clamp(22px,3vw,32px)}
.card h2,.panel h2{margin:0;font-family:var(--display);font-weight:900;font-stretch:115%;font-size:20px;text-transform:uppercase}
.form{display:flex;flex-direction:column;gap:18px;max-width:520px}
.form label,.card label{display:flex;flex-direction:column;gap:8px;font-size:13px;font-weight:500;color:var(--soft)}
.form input,.card input,.form textarea,.card textarea,.form select,.card select{padding:13px 14px;background:var(--bg);border:1px solid var(--line3);color:var(--text);font-size:15px;border-radius:0}
.form input:focus,.card input:focus,.form textarea:focus,.form select:focus,.card select:focus,.card textarea:focus{outline:2px solid var(--soft);outline-offset:-1px}
textarea{resize:vertical}
label.check{flex-direction:row!important;gap:10px!important;align-items:flex-start;font-size:13px;line-height:1.55;font-weight:400!important}
label.check input{margin-top:3px;padding:0;accent-color:var(--green)}
.row3{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.card .links{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px}
.hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
.flash{background:var(--panel2);border:1px solid var(--line3);border-left:3px solid var(--green);padding:14px 18px;font-size:14px;color:var(--text)}
.msg{margin:0;font-size:14px;min-height:1.2em;color:var(--yellow)}
.pill{display:inline-block;background:var(--green);color:var(--bg);font-family:var(--mono);font-size:11px;font-weight:600;padding:2px 7px;vertical-align:middle}
.status{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;padding:3px 8px;border:1px solid var(--line3);color:var(--dim)}
.s-open,.s-pending{color:var(--yellow);border-color:#5A4A12}
.s-approved,.s-shipped,.s-waiting{color:var(--green);border-color:#0E5134}
.s-paid,.s-closed{color:var(--dim)}
.s-void,.s-refunded,.s-suspended,.s-expired{color:#FF6B7A;border-color:#5A1A22}

/* Account */
.acct{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:20px;align-items:start}
.acct nav{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line2)}
.acct nav button,.acct nav .navlink{text-align:left;background:transparent;border:0;border-bottom:1px solid var(--line);padding:14px 16px;font-size:14px;font-weight:500;color:var(--soft);cursor:pointer}
.acct nav button[aria-selected="true"]{background:var(--text);color:var(--bg)}
.acct nav button.out{border-bottom:0;text-decoration:underline}
.panel{grid-column:span 3;min-width:0;background:var(--panel);border:1px solid var(--line2);padding:clamp(20px,3vw,32px);display:flex;flex-direction:column;gap:18px}
.panel p{margin:0;font-size:15px;line-height:1.6;color:var(--soft)}
.order{border:1px solid var(--line2);padding:14px 16px;font-size:14px;display:flex;flex-direction:column;gap:4px;color:var(--soft)}
.order .r{display:flex;justify-content:space-between;gap:12px}
.warn{border:1px solid #5A1A22;background:#1A0D10;padding:18px;display:flex;flex-direction:column;gap:14px}
.warn p{color:#FFB3BB!important}
@media(max-width:760px){.panel{grid-column:auto}}

/* Messages */
.thread-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.thread{display:flex;flex-direction:column;gap:12px}
.bubble{max-width:680px;padding:14px 16px;border:1px solid var(--line2);background:var(--bg)}
.bubble.staff{background:var(--panel2);border-left:3px solid var(--text);align-self:flex-start}
.bubble.me{align-self:flex-end}
.bubble.note{border-style:dashed;border-color:#5A4A12;background:#15130A}
.bubble .who{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.bubble p{margin:0;font-size:15px;line-height:1.6;color:var(--text2);overflow-wrap:anywhere}
.tlist{display:flex;flex-direction:column;border:1px solid var(--line2)}
.titem{display:flex;justify-content:space-between;gap:16px;text-align:left;background:var(--panel);border:0;border-bottom:1px solid var(--line);padding:14px 16px;font-size:14px;color:var(--text);cursor:pointer}
.titem:hover{background:var(--panel2)}
.titem small{color:var(--muted)}

/* Affiliates */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;background:var(--line2);border:1px solid var(--line2)}
.steps div{background:var(--panel);padding:24px;display:flex;flex-direction:column;gap:8px}
.steps h3{margin:0;font-family:var(--display);font-weight:900;font-stretch:115%;font-size:22px;text-transform:uppercase}
.steps p{margin:0;font-size:14px;line-height:1.55;color:var(--soft)}
.aff-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:16px}
.code-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;border:1px solid var(--line3);padding:10px 12px;background:var(--bg)}
.code-row .code{font-family:var(--mono);font-size:20px;letter-spacing:.1em}
.code-row .link-text{font-family:var(--mono);font-size:13px;overflow-wrap:anywhere;color:var(--soft)}
.code-row .btn{min-height:34px;padding:0 12px;font-size:11px}
.qr{width:220px;height:auto;border:1px solid var(--line3);background:#fff}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;background:var(--line2);border:1px solid var(--line2)}
.stats div{background:var(--panel);padding:18px;display:flex;flex-direction:column;gap:4px}
.stats span{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.stats strong{font-family:var(--mono);font-weight:600;font-size:26px}
.stats em{font-style:normal;font-size:12px;color:var(--muted)}

/* Tables / admin */
.tablewrap{overflow-x:auto;border:1px solid var(--line2);background:var(--panel)}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--muted);background:var(--bg2);padding:12px;border-bottom:1px solid var(--line2);white-space:nowrap}
td{padding:12px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--text2)}
td small{color:var(--muted)}
td.act{display:flex;gap:8px;flex-wrap:wrap}
td input:not([type=checkbox]),td select{background:var(--bg);border:1px solid var(--line3);color:var(--text);padding:6px 8px;font-size:13px;margin:2px 0}
td input:not([type=checkbox]):not(.num){width:100%;min-width:170px}
.num{width:100px;padding:8px 10px;background:var(--bg);border:1px solid var(--line3);color:var(--text)}
.section.admin{max-width:1440px}
.admin-tabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--line2)}
.admin-tabs button{background:none;border:0;border-bottom:2px solid transparent;padding:12px 14px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);cursor:pointer}
.admin-tabs button[aria-selected="true"]{color:var(--text);border-bottom-color:var(--text)}
.admin-panel{display:flex;flex-direction:column;gap:20px;padding-top:24px}
.admin-panel .filters button{min-height:34px}
.search{display:flex;gap:10px;max-width:520px}
.search input{flex:1;padding:10px 12px;background:var(--bg);border:1px solid var(--line3);color:var(--text)}
.ticket{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start}
.ticket>div{display:flex;flex-direction:column;gap:16px}
.card.side{max-width:none;gap:14px}
.photo{display:block;width:72px;height:72px;border:1px dashed var(--line3);cursor:pointer;background:var(--bg);overflow:hidden}
.photo img{width:100%;height:100%;object-fit:cover}
.photo span{display:grid;place-items:center;height:100%;font-size:10px;font-family:var(--mono);text-align:center;color:var(--muted)}
.danger-text{color:#FF6B7A!important;border-color:#5A1A22!important}
@media(max-width:900px){.ticket{grid-template-columns:1fr}}

/* Legal */
.legal-grid{display:flex;flex-wrap:wrap;gap:clamp(28px,5vw,72px);align-items:flex-start}
.legal-nav{flex:0 1 260px;position:sticky;top:100px;display:flex;flex-direction:column;gap:4px}
.legal-nav a{min-height:44px;display:flex;align-items:center;padding:10px 14px;color:var(--soft);font-size:14px;font-weight:500}
.legal-nav a[aria-current="page"]{background:var(--text);color:var(--bg)}
.legal-doc{flex:1 1 560px;min-width:0;max-width:780px;display:flex;flex-direction:column;gap:18px}
.legal-doc h2{margin:0 0 8px;font-family:var(--display);font-weight:900;font-stretch:125%;font-size:clamp(24px,3vw,36px);line-height:1.05;text-transform:uppercase}
.legal-doc h3{margin:24px 0 0;padding-top:20px;border-top:1px solid var(--line);font-family:var(--display);font-weight:900;font-stretch:110%;font-size:20px;line-height:1.2;text-transform:uppercase}
.legal-doc p{margin:0;font-size:16px;line-height:1.7;color:var(--soft)}
.legal-doc .li{display:flex;gap:16px;font-size:16px;line-height:1.7;color:var(--soft)}
.legal-doc .li>span:first-child{flex:none;min-width:24px;font-family:var(--mono);font-size:13px;line-height:2.05;color:var(--muted)}
.legal-doc .li>span:first-child~span{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.legal-doc .updated{font-family:var(--mono);font-size:12px;color:var(--muted)}
@media(max-width:1000px){.legal-nav{position:static}}
/* Referral points terms page: chips, dated line and the numbered block */
.legal .chips{display:flex;gap:8px;flex-wrap:wrap}
.legal .chips a{display:inline-flex;align-items:center;min-height:38px;padding:0 14px;border:1px solid var(--line2);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.legal .chips a:hover{color:var(--text);border-color:var(--line3)}
.legal .updated{margin:0;font-family:var(--mono);font-size:12px;color:var(--muted)}
.legal .block{display:flex;flex-direction:column;gap:14px;max-width:780px;border-top:1px solid var(--line);padding-top:28px}
.legal .block p{margin:0;font-size:16px;line-height:1.7;color:var(--soft);overflow-wrap:anywhere}

/* Footer */
.foot{margin-top:auto;padding-top:clamp(80px,10vw,140px)}
.foot-in{border-top:1px solid var(--line);background:var(--deep-bg)}
.foot-wrap{max-width:1280px;margin:0 auto;padding:48px clamp(20px,4vw,48px) 32px;display:flex;flex-direction:column;gap:36px}
.foot-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:32px 64px}
.foot .brand{height:auto;align-self:flex-start}
.foot .brand svg{width:40px;height:30px}
.foot .brand .name{font-size:16px}
.foot-cols{display:flex;flex-wrap:wrap;gap:32px 56px}
.foot-cols div{display:flex;flex-direction:column;gap:12px}
.foot-cols span{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.foot-cols a{font-size:14px;color:var(--soft)}
.foot-cols a:hover{color:var(--text)}
.foot p{margin:0;max-width:820px;font-size:13px;line-height:1.65;color:var(--muted)}

/* Cart drawer: a modal <dialog> (opened with showModal()); the UA dialog box is reset so it looks like the old panel,
   and ::backdrop is the old scrim */
.drawer{position:fixed;top:0;right:0;bottom:0;left:auto;z-index:61;width:min(460px,100%);max-width:none;height:100%;max-height:none;margin:0;padding:0;border:0;display:flex;flex-direction:column;color:var(--text);background:var(--panel);border-left:1px solid var(--line2)}
.drawer::backdrop{background:rgba(0,0,0,.64)}
.drawer-head h2:focus{outline:none}
.drawer-head{flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;height:76px;padding:0 20px 0 24px}
.drawer-head h2{margin:0;font-family:var(--display);font-weight:900;font-stretch:125%;font-size:22px;text-transform:uppercase}
.drawer-body{flex:1;min-height:0;overflow-y:auto;padding:0 24px 24px}
.drawer-foot{flex:none;display:flex;flex-direction:column;gap:14px;padding:20px 24px 24px;border-top:1px solid var(--line2);background:var(--bg2)}
.drawer .r{display:flex;justify-content:space-between;gap:12px;font-size:16px;font-weight:600}
.drawer .r strong{font-family:var(--mono)}
.x{width:44px;height:44px;background:transparent;border:1px solid var(--line2);color:var(--text);font-size:16px;cursor:pointer}
.x:hover{background:var(--line)}
.line{display:grid;grid-template-columns:12px 1fr auto;gap:8px 12px;padding:20px 0;border-bottom:1px solid var(--line);align-items:start}
.line-img{width:12px;height:12px;margin-top:4px;grid-row:span 2}
.line-name{font-family:var(--display);font-weight:900;font-stretch:115%;font-size:16px;text-transform:uppercase}
.line>span:nth-child(3){font-family:var(--mono);font-size:15px;font-weight:600}
.qty{display:flex;align-items:center;height:40px;border:1px solid var(--line3);align-self:start;justify-self:start}
.qty button{width:40px;height:100%;background:transparent;border:0;color:var(--text);font-size:17px;cursor:pointer}
.qty button:hover{background:var(--line)}
.qty span{min-width:36px;text-align:center;font-family:var(--mono);font-size:14px}
.remove{background:none;border:0;color:var(--muted);text-decoration:underline;text-underline-offset:3px;cursor:pointer;font-size:13px;padding:0;justify-self:end;align-self:center}
.ship-note{font-size:13px;color:var(--muted)}
.aff-code{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:500;color:var(--soft)}
.aff-code input{padding:10px 12px;background:var(--bg);border:1px solid var(--line3);color:var(--text);font-family:var(--mono);font-size:14px;letter-spacing:.06em;text-transform:uppercase}

/* Stacks */
.stacks-wrap{display:flex;flex-direction:column;gap:20px;padding-top:12px;scroll-margin-top:110px}
.stacks-title{margin:0;font-family:var(--display);font-weight:900;font-stretch:125%;font-size:clamp(26px,3vw,40px);line-height:1;text-transform:uppercase}
.stack-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:16px}
.stack{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line2)}
.stack .bar{height:6px}
.stack .body{display:flex;flex-direction:column;gap:12px;padding:20px;flex:1}
.stack .cat{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.stack .cat i{width:10px;height:10px;display:inline-block}
.stack .name-row{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.stack h3{margin:0;font-family:var(--display);font-weight:900;font-stretch:115%;font-size:22px;text-transform:uppercase}
.stack .price{font-family:var(--mono);font-size:16px;font-weight:600}
.stack ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.stack li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px;font-weight:600}
.stack li .mono{font-weight:400;font-size:12px;color:var(--muted)}
.stack .type{font-family:var(--mono);font-size:12px;color:var(--muted)}
.stack .btn{align-self:stretch;margin-top:auto}
.suggest{display:flex;flex-direction:column;gap:10px;padding-top:24px}
.sg{display:flex;align-items:center;gap:14px;padding:12px 12px 12px 0;background:var(--panel2);border:1px solid var(--line2)}
.sg .sw{width:6px;align-self:stretch;flex:none}
.sg .t{flex:1;display:flex;flex-direction:column;gap:4px}
.sg strong{font-size:14px}
.sg small{font-size:13px;line-height:1.45;color:var(--dim)}

/* Artwork */
.hero-side{display:flex;flex-direction:column;gap:16px}
.hero-art{width:100%;height:auto;border:1px solid var(--line2)}
.cats .tile-top{display:flex;align-items:center;justify-content:space-between}
.cats .tile-top img{width:34px;height:34px}
.filters button img{width:18px;height:18px}
.filters button[aria-selected="true"] img{filter:brightness(.2)}
.stack .cat img,.product .cat img{width:18px;height:18px}
.product .pic{aspect-ratio:16/10}
.product .pic svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.pagehead.accent,.section{position:relative}
.pagehead.accent::after,.accent-mark{content:"";position:absolute;right:0;top:4px;width:200px;height:56px;background:url('/assets/accent.svg') no-repeat right top/contain;pointer-events:none}
.accent-mark{right:clamp(20px,4vw,48px);top:clamp(28px,4vw,56px)}
@media(max-width:720px){.pagehead.accent::after,.accent-mark{width:120px;height:34px}}

/* Brand photography (owner images, compliant crops) */
.brand-hero{position:relative;display:flex;align-items:center;max-width:none;min-height:clamp(480px,48vw,720px);padding:clamp(48px,6vw,96px) max(clamp(20px,4vw,48px),calc((100vw - 1280px)/2 + 48px));overflow:hidden;grid-template-columns:none}
.brand-hero .hero-bg,.brand-hero .hero-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center}
.brand-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,10,11,.97) 0%,rgba(8,10,11,.9) 40%,rgba(8,10,11,.35) 64%,rgba(8,10,11,0) 82%),linear-gradient(0deg,rgba(8,10,11,.9) 0%,rgba(8,10,11,0) 30%)}
.brand-hero .hero-copy{position:relative;z-index:1;max-width:560px}
.spec-strip{max-width:1280px;margin:0 auto clamp(28px,4vw,48px);padding:0 clamp(20px,4vw,48px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:1px}
.spec-strip div{display:flex;flex-direction:column;gap:6px;padding:18px 20px;background:var(--panel);border:1px solid var(--line2);font-family:var(--mono);font-size:13px}
.spec-strip span{color:var(--muted);letter-spacing:.12em;text-transform:uppercase;font-size:11px}
.feature{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:0;border:1px solid var(--line2);background:var(--panel)}
.feature-img img{width:100%;height:100%;max-height:560px;object-fit:cover;display:block}
.feature-copy{padding:clamp(28px,4vw,56px);display:flex;flex-direction:column;gap:16px;justify-content:center}
.feature-copy h2{margin:0;font-family:var(--display);font-weight:900;font-stretch:125%;font-size:clamp(26px,3vw,40px);line-height:1.05;text-transform:uppercase}
.feature-copy p{margin:0;font-size:16px;line-height:1.65;color:var(--soft);max-width:34em}
.banner img{width:100%;height:auto;display:block;border:1px solid var(--line2)}
@media(max-width:860px){
  .brand-hero{min-height:620px;align-items:flex-end}
  .brand-hero .hero-bg img{object-position:55% center}
  .brand-hero::after{background:linear-gradient(0deg,rgba(8,10,11,.97) 0%,rgba(8,10,11,.85) 45%,rgba(8,10,11,.1) 80%)}
  .feature{grid-template-columns:1fr}
  .feature-img img{max-height:360px}
}

/* Hero contained to the content column (aligned with logo and Cart), bordered like other panels */
.brand-hero{box-sizing:border-box;width:calc(100% - 2 * clamp(20px,4vw,48px));max-width:1184px;margin:clamp(20px,3vw,32px) auto 0;padding:clamp(32px,5vw,72px) clamp(24px,4vw,56px);border:1px solid var(--line2);min-height:clamp(440px,42vw,620px)}
.spec-strip{margin-top:16px}
@media(max-width:860px){.brand-hero{min-height:560px;padding:28px 22px}}

/* ===== Art direction: one frame treatment, 8px scale ===== */
:root{--s1:8px;--s2:16px;--s3:24px;--s4:32px;--s6:48px;--s8:64px;--frame-clip:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px))}
.frame{margin:0;position:relative;background:var(--panel);border:1px solid var(--line2);clip-path:var(--frame-clip);display:flex;flex-direction:column}
.frame img{display:block;width:100%;height:auto}
.frame figcaption{padding:var(--s1) var(--s2);border-top:1px solid var(--line);font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}
.cat-block{display:flex;flex-direction:column;gap:var(--s2)}
.sec-head{display:flex;flex-direction:column;gap:var(--s2);max-width:760px}
.sec-head h2{margin:0;font-family:var(--display);font-weight:900;font-stretch:125%;font-size:clamp(26px,3vw,40px);line-height:1.05;text-transform:uppercase}
.sec-head p{margin:0;font-size:16px;line-height:1.65;color:var(--soft)}
.standard{display:flex;flex-direction:column;gap:var(--s3)}
.band3{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}
.band3 .frame.tall{clip-path:none;border:0;background:var(--bg)}
.band3 .frame.tall img{height:100%;max-height:640px;object-fit:cover;object-position:center 60%}
/* Product + stack cards: one illustrated set (same 16:10 art panel), photos only in the packaging lightbox */
.product .pic,.stack .pic{position:relative;aspect-ratio:16/10;overflow:hidden;background:#0F1214;border-bottom:1px solid var(--line)}
.product .pic svg,.stack .pic svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.product .meta-row{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s1)}
.pkg-link{padding:4px 0;background:none;border:0;color:var(--soft);font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.pkg-link:hover{color:var(--text)}
.product .btn,.stack .btn{margin-top:auto}
.lightbox{border:1px solid var(--line3);padding:var(--s3);background:var(--panel);color:var(--text);max-width:min(720px,calc(100% - 32px))}
.lightbox::backdrop{background:rgba(0,0,0,.78)}
.lightbox img{display:block;width:100%;height:auto;max-height:76vh;object-fit:contain}
.lightbox p{margin:var(--s2) 0 0;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.lightbox .x{position:absolute;top:var(--s1);right:var(--s1);background:var(--bg)}
@media(max-width:860px){
  .band3{grid-template-columns:1fr!important}
  .band3 .frame.tall img{max-height:420px}
}

/* ===== Checkout ===== */
.s-awaiting_payment{color:var(--yellow);border-color:#5A4A12}
.s-cancelled,.s-failed{color:var(--muted)}
.co{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,400px);gap:clamp(24px,3vw,40px);align-items:start}
.co-main{display:flex;flex-direction:column;gap:var(--s2)}
.co-step{display:flex;flex-direction:column;gap:var(--s2);padding:clamp(20px,3vw,32px);background:var(--panel);border:1px solid var(--line2)}
.co-step h2{margin:0;display:flex;align-items:baseline;gap:12px;font-family:var(--display);font-weight:900;font-stretch:115%;font-size:20px;text-transform:uppercase}
.co-step h2 span{font-family:var(--mono);font-size:13px;font-weight:500;color:var(--muted)}
.co-step p{margin:0;font-size:15px;line-height:1.6;color:var(--soft)}
.co-step .fine{font-size:13px;color:var(--muted)}
.co-step .fine a,.co-step .check a,.co-off a{text-decoration:underline;text-underline-offset:3px}
.co label{display:flex;flex-direction:column;gap:8px;font-size:13px;font-weight:500;color:var(--soft)}
.co input:not([type=checkbox]):not([type=radio]),.co select{width:100%;padding:13px 14px;background:var(--bg);border:1px solid var(--line3);color:var(--text);font-size:15px;border-radius:0}
.co input:focus,.co select:focus{outline:2px solid var(--soft);outline-offset:-1px}
.co label.check{flex-direction:row;align-items:flex-start;gap:12px;font-size:14px;line-height:1.5;color:var(--soft)}
.co label.check input{margin-top:3px;width:18px;height:18px;flex:none;accent-color:var(--text)}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.g3{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1.2fr) minmax(0,.9fr);gap:var(--s2)}
.pay-methods{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--s1)}
.co .pay-methods label{flex-direction:row;align-items:center;gap:12px;padding:16px;border:1px solid var(--line3);background:var(--bg);color:var(--text);font-size:14px;font-weight:600;cursor:pointer}
.co .pay-methods label:has(input:checked){border-color:var(--text);background:var(--panel2)}
.pay-methods input{width:18px;height:18px;margin:0;accent-color:var(--text)}
.pay-panel{display:flex;flex-direction:column;gap:var(--s2)}
.cc{min-height:48px}
.cc iframe{width:100%!important}
.billing{display:flex;flex-direction:column;gap:var(--s2)}
.co-off{padding:16px;border:1px solid var(--line3);border-left:3px solid var(--yellow);background:var(--bg)}
.co-sum{position:sticky;top:96px;display:flex;flex-direction:column;gap:12px;padding:clamp(20px,3vw,28px);background:var(--panel);border:1px solid var(--line2)}
.co-sum-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.co-sum h2{margin:0;font-family:var(--display);font-weight:900;font-stretch:115%;font-size:18px;text-transform:uppercase}
#coSumBody{display:flex;flex-direction:column;gap:12px}
.co-lines{list-style:none;margin:0;padding:0 0 12px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:14px}
.co-lines li{display:grid;grid-template-columns:6px minmax(0,1fr) auto;gap:12px;align-items:start;font-size:14px;font-weight:600}
.co-lines i{align-self:stretch;min-height:34px}
.co-lines small{display:block;margin-top:4px;font-family:var(--mono);font-size:12px;font-weight:400;color:var(--muted)}
.co-lines strong{font-family:var(--mono);font-weight:500}
.co-sum .r{display:flex;justify-content:space-between;gap:12px;font-family:var(--mono);font-size:13px;color:var(--soft)}
.co-sum .r.total{padding-top:12px;border-top:1px solid var(--line);font-size:17px;font-weight:600;color:var(--text)}
.co-sum .fine{margin:0;font-size:12px;color:var(--muted)}
.co-empty{max-width:520px}
.co-done-title{font-size:clamp(28px,3.4vw,40px)!important}
.co-done .ctas{display:flex;gap:12px;flex-wrap:wrap}
.pay-box{display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap;padding:var(--s2);background:var(--bg);border:1px solid var(--line3)}
.pay-qr{width:220px;height:220px;object-fit:contain;background:#fff;padding:10px;flex:none}
.pay-dl{margin:0;flex:1;min-width:220px;display:flex;flex-direction:column}
.pay-dl div{display:grid;grid-template-columns:90px minmax(0,1fr) auto;gap:12px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--line)}
.pay-dl div:last-child{border-bottom:0}
.pay-dl dt{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.pay-dl dd{margin:0;font-family:var(--mono);font-size:15px;color:var(--text);overflow-wrap:anywhere}
.pay-dl dd small{display:block;margin-top:2px;font-size:12px;color:var(--muted)}
/* Admin → Settings → Payments */
.pay-settings fieldset{margin:0;padding:var(--s2);border:1px solid var(--line2);display:flex;flex-direction:column;gap:var(--s2)}
.pay-settings legend{padding:0 8px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.qr-row{display:flex;gap:var(--s2);align-items:flex-start}
.qr-row img,.qr-empty{width:120px;height:120px;object-fit:contain;background:#fff;flex:none}
.qr-empty{display:flex;align-items:center;justify-content:center;background:var(--bg);border:1px dashed var(--line3);font-size:12px;color:var(--muted)}
.qr-row label.btn{display:inline-flex;flex-direction:row;color:var(--text)}
@media(max-width:900px){.co{grid-template-columns:1fr}.co-sum{position:static;order:-1}.co-done .co-sum{order:0}}
@media(max-width:560px){.g2{grid-template-columns:1fr}.g3{grid-template-columns:1fr 1fr}.g3 label:first-child{grid-column:1/-1}.pay-qr{width:200px;height:200px;margin:0 auto}}
.order .pay-due{display:block;margin-top:6px;padding:10px 12px;border-left:3px solid var(--yellow);background:var(--bg);font-size:13px;line-height:1.55;color:var(--soft)}
.order .pay-due a{text-decoration:underline}

/* ===== Referral points, account approval, admin users ===== */
.panel-wrap{grid-column:span 3;min-width:0;display:flex;flex-direction:column;gap:16px}
.panel-wrap .panel{grid-column:auto}
@media(max-width:760px){.panel-wrap{grid-column:auto}}
.approval-note{padding:14px 18px;background:var(--panel2);border:1px solid var(--line3);border-left:3px solid var(--yellow);font-size:14px;line-height:1.55;color:var(--soft)}
.refer{display:flex;flex-direction:column;gap:16px}
.refer-code{max-width:none;gap:14px}
.code-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.code-row .code{font-family:var(--mono);font-size:clamp(30px,4vw,44px);font-weight:600;letter-spacing:.18em;color:var(--text)}
.link-row .mono{font-size:14px;color:var(--soft);overflow-wrap:anywhere}
.qr-wrap{display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap}
.qr-wrap img{width:180px;height:auto;border:1px solid var(--line3);background:#fff}
.qr-dl{display:flex;flex-direction:column;gap:8px}
.refer-how{margin:0;font-size:14px;line-height:1.6;color:var(--soft)}
.refer .neg{color:#FF6B7A;font-family:var(--mono)}
.refer .pos{color:var(--green);font-family:var(--mono)}
.refer select,.cashout select{padding:13px 14px;background:var(--bg);border:1px solid var(--line3);color:var(--text);font-size:15px}
.refer-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:1px;background:var(--line2);border:1px solid var(--line2)}
.refer-facts div{background:var(--panel);padding:22px;display:flex;flex-direction:column;gap:8px}
.refer-facts .n{font-family:var(--mono);font-size:13px;color:var(--muted)}
.refer-facts h3{margin:0;font-family:var(--display);font-weight:900;font-stretch:115%;font-size:18px;text-transform:uppercase}
.refer-facts p{margin:0;font-size:14px;line-height:1.6;color:var(--soft)}
.s-available,.s-active{color:var(--green);border-color:#0E5134}
.s-requested,.s-paused{color:var(--yellow);border-color:#5A4A12}
.s-rejected{color:#FF6B7A;border-color:#5A1A22}
.lab-only{color:var(--blue)!important;border-color:#123A66!important}
.product .price s{color:var(--muted);font-weight:400;margin-right:6px}
.pts-use{padding:14px 16px;border:1px solid var(--line3);background:var(--bg)}
.pts-cover{margin:0;padding:12px 14px;border-left:3px solid var(--green);background:var(--bg)}
.co-sum .pts-line{color:var(--green)}
.order .pay-due{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.pay-qr.sm{width:140px;height:140px;padding:6px}
.order .pay-due .btn{margin-top:8px}
/* Admin → Users */
.users-search{max-width:none;flex-wrap:wrap}
.users-search input{flex:1 1 260px}
.users-search select{padding:10px 12px;background:var(--bg);border:1px solid var(--line3);color:var(--text)}
.user-head{display:flex;flex-direction:column;gap:6px;margin:12px 0 4px}
.user-head h2{margin:0;display:flex;gap:12px;align-items:center;font-family:var(--display);font-weight:900;font-stretch:115%;font-size:26px;text-transform:uppercase}
.user-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px;align-items:start}
.user-grid .card{max-width:none}
.btn-row{display:flex;gap:8px;flex-wrap:wrap}
.acct-settings,.aff-settings{max-width:640px}

/* iPad Chrome: never let page height depend on viewport units; closed dialogs never take space; page ends at the footer */
.page{min-height:0}
dialog:not([open]){display:none!important}
.page{overflow-x:clip}
/* Cash App / Zelle payment matching: confirmation page (amount, code, report) and admin "Match a payment" */
.pay-col{flex:1;min-width:220px;display:flex;flex-direction:column;gap:12px}
.pay-col .pay-dl{flex:none;min-width:0}
.pay-dl .pay-amt dd{font-size:28px;font-weight:600;line-height:1.1}
.pay-dl .pay-code dd{font-size:18px;letter-spacing:.06em}
.co-step .pay-exact{font-size:14px;line-height:1.55;padding-top:12px;border-top:1px solid var(--line)}
.pay-reported{padding:14px 18px;background:var(--panel2);border:1px solid var(--line3);border-left:3px solid var(--green);font-size:15px;line-height:1.6;color:var(--text2)}
.pay-report{display:flex;flex-direction:column;gap:14px;padding:var(--s2);border:1px solid var(--line3);background:var(--bg)}
.pay-more summary{cursor:pointer;font-size:13px;color:var(--soft);text-decoration:underline;text-underline-offset:3px}
.pay-more[open] summary{margin-bottom:12px}
.s-payment_reported{color:var(--yellow);border-color:#5A4A12}
.admin-panel small.hot{color:var(--yellow);font-weight:600}
.paymatch .row3{grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}
.paymatch select{width:100%}
.pm-form{display:flex;flex-direction:column;gap:14px}
.pm-out{display:flex;flex-direction:column;gap:12px}
.pm-out:empty{display:none}
.match-list{display:flex;flex-direction:column;gap:10px}
.match-item{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border:1px solid var(--line2);background:var(--bg);font-size:14px;color:var(--soft)}
.match-item.same{border-left:3px solid var(--yellow)}
.match-item p{margin:0}
.match-item strong{color:var(--text)}
.mi-top{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;font-family:var(--mono)}
.mi-score{margin-left:auto;font-size:12px;color:var(--muted)}
.mi-claim{color:var(--yellow)}
.mi-claim.none{color:var(--muted)}
.mi-act{margin-top:6px}
.mp-form{max-width:520px;gap:12px}
.mp-row td{background:var(--bg)}
.mp-row .mp-form input:not([type=checkbox]){padding:13px 14px;font-size:15px;margin:0}
/* Small screens: the hero copy may shrink below its longest word, the title scales down, the eyebrow spacing tightens */
.brand-hero .hero-copy{min-width:0}
@media(max-width:480px){.brand-hero h1{font-size:clamp(30px,calc((100vw - 86px) * .146),44px)}}
@media(max-width:359px){.brand-hero .eyebrow{letter-spacing:.18em}}
/* Keyboard focus: a visible ring on links, buttons and inputs (mouse clicks show none). The clip-path buttons (.btn,
   Cart) would clip an outside ring at their cut corners, so theirs is drawn inset, in the background color. */
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:not([tabindex="-1"]):focus-visible{outline:2px solid var(--text);outline-offset:3px}
.btn:not(.ghost):focus-visible,.cart-btn:focus-visible{outline:2px solid var(--bg);outline-offset:-6px}
.btn.danger:focus-visible{outline-color:#fff}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--soft);outline-offset:-1px}
input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{outline:2px solid var(--text);outline-offset:2px}
.acct nav button:focus-visible,.acct nav .navlink:focus-visible,.titem:focus-visible,.admin-tabs button:focus-visible,.legal-nav a:focus-visible{outline-offset:-3px}
.legal-nav a[aria-current="page"]:focus-visible,.acct nav button[aria-selected="true"]:focus-visible,.filters button[aria-selected="true"]:focus-visible{outline-color:var(--bg);outline-offset:-4px}
/* Lists in the privacy policy; 404 page */
.legal-doc ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:10px;font-size:16px;line-height:1.7;color:var(--soft)}
.legal-doc li{padding-left:2px;overflow-wrap:anywhere}
.nf .nf-links{display:flex;gap:12px;flex-wrap:wrap}
/* Footer at the bottom of the screen on short pages, without viewport units (iPad Chrome resolved 100vh far too tall):
   html is the screen height, body at least that, the page fills body and main takes the spare room above the footer.
   Taller pages are unchanged and still end at the footer. Closed dialogs and scripts are display:none, open dialogs
   sit in the top layer, so neither takes space in the body column. */
html{height:100%}
body{min-height:100%;display:flex;flex-direction:column}
body>.page{flex:1 0 auto;width:100%}
.page>main{flex:1 0 auto}