/* Sleeper design system: Society6-inspired, never imitated.
   Paper + cream + ink; Didone display with italic emphasis; grotesque UI. */
:root{
  /* Palette matched to the Artz reference store (your-handi-mart.myshopify.com):
     white ground, black ink, deep teal #108474 as the readable accent,
     bright teal #58C5C7 + ice tint #D8F3F5 as surfaces, #E5E5E5 hairlines.
     LIVE badge stays red by deliberate exception: red means "live" everywhere. */
  --paper:#FFFFFF; --cream:#F8F8F8; --ink:#000; --muted:rgba(0,0,0,.62);
  --hair:#E5E5E5; --card:#fff;
  --accent:#108474; --tomato:#D63A22; --butter:#D8F3F5; --sage:#58C5C7;
  --serif:"DM Serif Display","Didot","Bodoni 72",Georgia,serif;
  --sans:"Figtree","Avenir Next",Avenir,"Helvetica Neue",Arial,sans-serif;
}
::selection{background:var(--butter)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* iOS Safari zooms the whole page on focus of any input under 16px and
   leaves it zoomed; every text-entry control clears that bar */
input[type=text],input[type=email],input[type=number],input[type=password],input[type=search],textarea,select{font-size:16px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.62;overflow-x:hidden}
a{color:inherit}

/* ---------- chrome ---------- */
.topbar{background:var(--accent);color:#fff;text-align:center;font-size:12.5px;letter-spacing:.04em;padding:9px 16px}
.topbar a{color:#fff;text-underline-offset:3px}
.nav{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 24px;border-bottom:1px solid var(--hair);position:sticky;top:0;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(8px);z-index:50}
.wordmark{font-family:var(--serif);font-size:27px;text-decoration:none;letter-spacing:.02em}
.wordmark sup{font-family:var(--sans);font-size:9px;letter-spacing:.14em;color:var(--muted)}
.navlinks{display:flex;gap:22px}
.navlinks a{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;color:var(--muted)}
.navlinks a:hover,.navlinks a.on{color:var(--accent)}
.chip{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;border:1px solid var(--ink);border-radius:100px;padding:9px 18px;text-decoration:none;white-space:nowrap}
.chip.solid{background:var(--ink);color:#fff}
.navright{display:flex;gap:10px;align-items:center}
.menu-btn{display:none;background:transparent;cursor:pointer;font-family:inherit}
@media(max-width:760px){
  .navlinks{display:none}
  .menu-btn{display:inline-block}
  /* the right-hand chips plus the wordmark used to overflow a 375px phone,
     which expands the layout viewport and renders every page zoomed out */
  .nav{padding:12px 14px;gap:10px}
  .nav .chip{padding:7px 12px;font-size:10px;letter-spacing:.1em}
  .nav .chip.solid{display:none}
  .wordmark{font-size:22px}
  .nav.open .navlinks{display:flex;flex-direction:column;gap:16px;position:absolute;top:100%;left:0;right:0;background:var(--paper);border-bottom:1px solid var(--hair);padding:20px 24px 24px;box-shadow:0 14px 24px rgba(0,0,0,.08)}
}

.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
section{padding:76px 0;border-bottom:1px solid var(--hair)}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin:0 0 16px}
h1{font-family:var(--serif);font-weight:400;font-size:clamp(44px,7vw,82px);line-height:1.04;margin:0 0 24px;letter-spacing:.01em}
h2{font-family:var(--serif);font-weight:400;font-size:clamp(30px,4.4vw,48px);line-height:1.1;margin:0 0 22px;max-width:24ch}
h1 em,h2 em{font-style:italic}
h3{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin:0 0 10px}
p{margin:0 0 15px;max-width:66ch}
.lead{font-size:19px}
.muted{color:var(--muted)}
ul,ol{margin:0 0 15px;padding-left:22px;max-width:66ch}
li{margin-bottom:8px}
.btn{display:inline-block;background:var(--ink);color:#fff;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:15px 28px;text-decoration:none;border:none;cursor:pointer;transition:background .15s}
.btn:hover{background:var(--accent)}
.btn.o{background:transparent;color:var(--ink);border:1px solid var(--ink);border-radius:100px}
.btn.o:hover{background:transparent;color:var(--accent);border-color:var(--accent)}
.chip.solid:hover{background:var(--accent);border-color:var(--accent)}
.wrap a:not(.btn):not(.chip),.foot nav a{color:var(--accent)}
.btnrow{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:30px}
.hero{padding:88px 0 66px;border-bottom:1px solid var(--hair)}
.dek{font-size:19px;max-width:54ch}

/* ---------- video hero ---------- */
/* The clip is scenery: it sits under a scrim, never takes focus, and the
   words on it are the same words the cream hero carries. Height is a token so
   the YouTube frame can be sized to cover it. */
.vhero{--vhero-h:clamp(520px,78vh,780px);position:relative;min-height:var(--vhero-h);display:flex;align-items:flex-end;overflow:hidden;background:#1c1b19 center/cover no-repeat;color:#fff;isolation:isolate}
.vhero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;z-index:0}
.vhero iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:max(100%,calc(var(--vhero-h) * 1.7778));height:max(var(--vhero-h),56.25vw);border:0;pointer-events:none;z-index:0}
/* Heavy on purpose: the words have to win over whatever the clip is doing.
   A pool of shadow sits behind the text column on top of the vertical fade. */
.vhero-scrim{position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse 72% 85% at 24% 62%,rgba(0,0,0,.48),rgba(0,0,0,0) 72%),linear-gradient(180deg,rgba(0,0,0,.40) 0%,rgba(0,0,0,.52) 45%,rgba(0,0,0,.84) 100%)}
.vhero-in{position:relative;z-index:2;width:100%;padding-top:96px;padding-bottom:64px}
.vhero .eyebrow{color:var(--sage)}
.vhero h1,.vhero .dek{color:#fff}
.vhero .dek{text-shadow:0 1px 14px rgba(0,0,0,.4)}
.vhero .joinnote{color:rgba(255,255,255,.84)}
.vhero .vhero-in a:not(.btn):not(.chip){color:#fff}
.vhero .join input[type=email]{border-color:transparent}
.vhero .join .btn{background:var(--accent)}
.vhero .join .btn:hover{background:#fff;color:var(--ink)}
.vhero-pause{position:absolute;right:18px;bottom:18px;z-index:3;background:rgba(0,0,0,.45);color:#fff;border:1px solid rgba(255,255,255,.55);border-radius:100px;padding:8px 14px;font:inherit;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;backdrop-filter:blur(6px)}
.vhero-pause:hover,.vhero-pause:focus-visible{background:rgba(255,255,255,.92);color:var(--ink)}
.vhero.still video,.vhero.still iframe{display:none}
@media (prefers-reduced-motion:reduce){.vhero video,.vhero iframe,.vhero-pause{display:none}}
@media(max-width:760px){.vhero{--vhero-h:clamp(480px,72vh,640px)}.vhero-in{padding-top:64px;padding-bottom:48px}.vhero-pause{right:12px;bottom:12px}}

/* ---------- at a glance: two columns, rows not cards ---------- */
.glance{display:grid;grid-template-columns:1fr 1fr;gap:56px;margin-top:34px}
.gl-head{font-family:var(--serif);font-size:26px;margin:0 0 6px;padding-bottom:10px;border-bottom:2px solid var(--ink)}
.gl-list{list-style:none;margin:0;padding:0;max-width:none}
.gl-row{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--hair);margin:0}
.gl-ico{flex:0 0 40px;width:40px;height:40px;border-radius:20px;background:var(--butter);color:var(--accent);display:flex;align-items:center;justify-content:center}
.gl-title{font-size:16.5px;font-weight:700;margin:0 0 3px;line-height:1.3;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.gl-body{font-size:14.5px;line-height:1.55;margin:0;color:#333;max-width:none}
.gl-tag{font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);border:1px solid #C9C9C9;border-radius:100px;padding:3px 8px;white-space:nowrap}
.gl-tag.on{color:var(--accent);border-color:var(--accent)}
@media(max-width:760px){.glance{grid-template-columns:1fr;gap:40px}.gl-row{padding:14px 0}}

/* ---------- grids & cards ---------- */
.grid{display:grid;gap:20px}
.g2{grid-template-columns:1fr 1fr}
.g3{grid-template-columns:repeat(3,1fr)}
@media(max-width:880px){.g3{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.g2,.g3{grid-template-columns:1fr}}
.card{background:var(--card);border-radius:8px;box-shadow:0 1px 2px rgba(0,0,0,.05),0 10px 28px rgba(0,0,0,.07);padding:22px;position:relative}
.card p{font-size:15px;margin-bottom:0}
.card h3{margin-top:2px}
.band{background:var(--cream);border-radius:12px;padding:40px 38px;margin:6px 0}
.band.butter{background:var(--butter)}
.tier.t1{border-top:4px solid var(--sage)}
.tier.t2{border-top:4px solid var(--butter)}
.tier.t3{border-top:4px solid var(--accent)}
@media(max-width:620px){.band{padding:28px 20px}}

/* listing card demo */
.art{background:#fff;padding:24px;display:flex;justify-content:center;box-shadow:inset 0 0 0 1px rgba(0,0,0,.04)}
.frame{border:7px solid #111;background:#fff;padding:13px;box-shadow:0 14px 22px -10px rgba(0,0,0,.35)}
.canvas{width:132px;height:168px}
.c1{background:linear-gradient(168deg,#dfe6ee 0 28%,#8fa6bf 28% 46%,#41597a 46% 63%,#22334d 63% 82%,#101c30 82%)}
.c2{background:radial-gradient(circle at 30% 25%,#e8b64c 0 22%,transparent 23%),radial-gradient(circle at 72% 70%,#1d1d1b 0 30%,transparent 31%),linear-gradient(20deg,#f0e4d0,#e5cfa8)}
.c3{background:conic-gradient(from 210deg at 55% 40%,#7e8c6f,#c9cfb8,#8fa08a,#5c6b55,#7e8c6f)}
.by{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:15px 0 4px}
.ptitle{font-size:15.5px;margin:0 0 4px;max-width:none}
.price{font-size:14px;margin:0}
.price b{font-weight:700}
.price s{color:var(--muted)}
.live{position:absolute;top:14px;left:14px;background:var(--tomato);color:#fff;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:6px 10px;z-index:2}
.price b{color:var(--accent)}

/* ---------- steps / flow ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:st}
@media(max-width:760px){.steps{grid-template-columns:1fr}}
.step{border-top:1px solid var(--ink);padding-top:14px}
.step::before{counter-increment:st;content:"0" counter(st);font-family:var(--serif);font-size:22px;display:block;margin-bottom:6px}
.step p{font-size:15px}
.flow{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:26px 0 8px}
@media(max-width:900px){.flow{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.flow{grid-template-columns:1fr}}
.fstep{background:var(--card);border-radius:8px;box-shadow:0 1px 2px rgba(0,0,0,.05),0 8px 20px rgba(0,0,0,.06);padding:16px 16px 14px}
.fstep .n{font-family:var(--serif);font-size:19px;margin-bottom:4px}
.fstep h4{margin:0 0 6px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.fstep p{font-size:13.5px;margin:0;color:var(--muted)}
.fstep.alt{outline:1.5px dashed var(--accent);outline-offset:-6px}

/* ---------- charts (single-measure bar lists, ink on paper) ---------- */
.chart{margin:22px 0 8px;max-width:760px}
.crow{display:grid;grid-template-columns:190px 1fr;gap:14px;align-items:center;padding:7px 6px;border-radius:6px}
.crow:hover{background:rgba(0,0,0,.045)}
@media(max-width:560px){.crow{grid-template-columns:1fr;gap:4px;padding:8px 4px}}
.clab{font-size:13.5px;font-weight:600}
.clab small{display:block;font-weight:400;color:var(--muted);font-size:11.5px}
.cbar{display:flex;align-items:center;gap:10px}
.cbar i{display:block;height:14px;background:var(--accent);border-radius:0 4px 4px 0;min-width:3px}
.cbar.alt i{background:rgba(0,0,0,.38)}
.cbar b{font-size:13px;font-weight:700;white-space:nowrap}
.cbar small{color:var(--muted);font-size:11.5px;white-space:nowrap}
.cnote{font-size:12px;color:var(--muted);margin-top:10px;max-width:70ch}

/* ---------- tiers ---------- */
.tname{font-family:var(--serif);font-size:28px;margin:0 0 2px}
.tprice{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.tier ul{padding-left:18px;font-size:14.5px;margin-bottom:14px}

/* ---------- phases ---------- */
.phases{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:880px){.phases{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.phases{grid-template-columns:1fr}}
.phase{border-top:1px solid var(--ink);padding-top:12px}
.phase h4{font-family:var(--serif);font-weight:400;font-size:21px;margin:0 0 6px}
.phase .tag{display:inline-block;font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--ink);border-radius:100px;padding:3px 9px;margin-bottom:8px}
.phase .tag.now{background:var(--accent);border-color:var(--accent);color:#fff}
.phase p{font-size:13.5px;color:var(--muted)}

/* ---------- tables ---------- */
.tscroll{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:14.5px}
th{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;text-align:left;color:var(--muted);border-bottom:1px solid var(--ink);padding:9px 14px 9px 0}
td{border-bottom:1px solid var(--hair);padding:10px 14px 10px 0;vertical-align:top}
td:first-child{font-weight:600}

/* ---------- terms ---------- */
.terms{counter-reset:t;list-style:none;padding:0;max-width:none;column-count:2;column-gap:44px;margin-top:22px}
@media(max-width:820px){.terms{column-count:1}}
.terms li{counter-increment:t;break-inside:avoid;margin:0 0 16px;padding-left:38px;position:relative;font-size:14.5px}
.terms li::before{content:counter(t,decimal-leading-zero);position:absolute;left:0;top:1px;font-family:var(--serif);font-size:16px;color:var(--muted)}

/* ---------- flywheel ---------- */
.flywheel{display:block;margin:10px auto;max-width:560px;width:100%;height:auto}
.flywheel text{font-family:var(--sans);font-size:12.5px;font-weight:600;fill:var(--ink)}
.flywheel .c{font-family:var(--serif);font-size:15px;letter-spacing:.08em}

/* ---------- signup ---------- */
.join{display:flex;gap:10px;max-width:520px;margin-top:28px;position:relative}
.join input[type=email]{flex:1;min-width:0;border:1px solid var(--ink);background:#fff;border-radius:100px;padding:14px 22px;font:inherit;font-size:15px}
.join input[type=email]:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.join .btn{border-radius:100px;padding:14px 26px;white-space:nowrap}
@media(max-width:560px){.join{flex-direction:column}.join .btn{text-align:center}}
.joinnote{font-size:12.5px;color:var(--muted);margin-top:12px;letter-spacing:.02em}
.joined{display:inline-block;background:var(--accent);color:#fff;border-radius:100px;padding:13px 24px;font-size:14px;font-weight:600;margin-top:28px}
.joined.err{background:var(--tomato)}
h3.feat{font-family:var(--serif);font-weight:400;font-size:26px;letter-spacing:0;text-transform:none;margin:0 0 8px}

/* ---------- simple prospectus Q&A ---------- */
.qa{padding:36px 0;border-bottom:1px solid var(--hair);max-width:680px}
.qa h2{font-size:clamp(24px,3.2vw,34px);margin:0 0 10px;max-width:none}
.qa p,.qa ul{font-size:16.5px}
.qa .btnrow{margin-top:24px}

/* ---------- account ---------- */
.acct{display:grid;grid-template-columns:190px 1fr;gap:34px;align-items:start;padding-top:40px}
@media(max-width:820px){.acct{grid-template-columns:1fr;gap:10px}}
.actnav{display:flex;flex-direction:column;gap:4px;position:sticky;top:96px}
@media(max-width:820px){.actnav{flex-direction:row;flex-wrap:wrap;position:static;border-bottom:1px solid var(--hair);padding-bottom:12px}}
.actnav a{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;color:var(--muted);padding:8px 10px;border-radius:6px}
.actnav a:hover{color:var(--accent)}
.actnav a.on{color:var(--ink);background:var(--cream)}
.actnav a.out{margin-top:14px;color:var(--muted);font-size:11px}
@media(max-width:820px){.actnav a.out{margin-top:0;margin-left:auto}}
.actmain{padding-bottom:70px;min-width:0}
.acthead{padding:8px 0 26px}
.authform input{width:100%;border:1px solid var(--hair);background:var(--paper);border-radius:8px;padding:11px 13px;font:inherit;font-size:14.5px}
.authform input:focus{outline:2px solid var(--accent);outline-offset:1px}
label.f{display:block;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:13px 0 6px}
select,input[type=text],input[type=number],input[type=password],input[type=email]{border:1px solid var(--hair);background:var(--paper);border-radius:8px;padding:11px 13px;font:inherit;font-size:14.5px;width:100%}
.ck{display:block;font-size:14.5px;margin:9px 0}
.ck input{width:auto;margin-right:9px}
.btn.sm{padding:9px 15px;font-size:10.5px}
.seg{display:flex;flex-wrap:wrap;gap:7px}
/* A white pill on a white page is an outline, and outlines read as decoration
   rather than as something to press. The fill is what makes them look tappable. */
.seg button{font-size:12.5px;border:1px solid #D7DBDD;background:var(--cream);color:var(--ink);
	border-radius:100px;padding:9px 16px;cursor:pointer;font-family:inherit;
	transition:background .12s,border-color .12s,transform .1s}
.seg button:hover{background:#EDEFEF;border-color:#BFC6C8}
.seg button:active{transform:translateY(1px)}
.seg button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.seg button.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.seg button.on:hover{background:var(--accent);border-color:var(--accent)}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.split{display:flex;justify-content:space-between;align-items:center;gap:10px}
/* duel */
.duel{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:center;max-width:820px}
@media(max-width:640px){.duel{grid-template-columns:1fr;gap:10px}.vs{display:none}}
.duelcard{background:var(--card);border:none;border-radius:10px;box-shadow:0 1px 2px rgba(0,0,0,.05),0 12px 30px rgba(0,0,0,.09);padding:22px;cursor:pointer;transition:transform .12s}
.duelcard:hover{transform:translateY(-3px);outline:2px solid var(--accent)}
.duelcard img{width:100%;max-width:250px;display:block;margin:0 auto;box-shadow:0 12px 20px -10px rgba(0,0,0,.35);border:6px solid #111;background:#fff}
.duelcard .dl{display:block;margin-top:13px;font-size:13px;color:var(--muted)}
.vs{font-family:var(--serif);font-size:20px;font-style:italic;color:var(--muted)}
/* archetype + meter */
.archcard{border-top:4px solid var(--sage)}
.rvblend{font-size:19px;line-height:1.45;margin:0 0 12px}
.meter{height:8px;background:var(--cream);border-radius:100px;overflow:hidden;margin:8px 0 8px}
.meter i{display:block;height:100%;background:var(--accent);border-radius:100px;transition:width .4s}
/* eye readout */
.generow{display:grid;grid-template-columns:96px 1fr 96px;gap:10px;align-items:center;font-size:12px;color:var(--muted);margin:12px 0}
.generow span:last-child{text-align:right}
.genebar{position:relative;height:5px;background:var(--cream);border-radius:100px}
.genebar i{position:absolute;top:-4.5px;width:14px;height:14px;border-radius:50%;background:var(--accent)}
.chips{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:4px}
.chips .cat{font-size:11.5px;border:1px solid var(--hair);border-radius:100px;padding:5px 12px}
/* daily five */
.dfive{margin-top:14px}
.dfcard{display:flex;gap:22px;align-items:center;min-height:172px}
.dfthumbwrap{position:relative;display:block;flex:none}
.dfthumb{width:150px;height:150px;object-fit:cover;display:block;border:5px solid #111;background:#fff;box-shadow:0 12px 18px -8px rgba(0,0,0,.3);cursor:zoom-in}
.dffull{display:none;position:absolute;left:calc(100% + 16px);top:50%;transform:translateY(-50%);z-index:90;background:#fff;padding:8px;border:6px solid #111;box-shadow:0 26px 52px rgba(0,0,0,.32)}
.dffull img{max-width:450px;max-height:450px;display:block}
.dfthumbwrap:hover .dffull{display:block}
@media(max-width:1100px){.dffull{display:none !important}}
.dfcard .dfl{font-size:15px;margin:0 0 10px}

/* palette swatches */
.pal{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.pal span{width:24px;height:24px;border-radius:6px;border:1px solid var(--hair)}
.genebar.rf{cursor:pointer}
.genebar.rf i{cursor:grab}

/* ---------- eye exam ---------- */
.examtext{width:100%;max-width:640px;border:1px solid var(--hair);background:var(--card);border-radius:10px;padding:16px;font:inherit;font-size:15px;line-height:1.6}
.examtext:focus{outline:2px solid var(--accent)}
/* Twelve words will not sit beside a picture in one line, so on a wide screen
   they get their own column and the picture gets more room. On a phone the two
   stack and both centre, which reads as one object rather than two. */
.gutwrap{display:grid;grid-template-columns:auto minmax(260px,1fr);gap:30px;align-items:center;max-width:840px}
.gutpic{line-height:0}
.gutimg{width:250px;max-width:100%;border:6px solid #111;background:#fff;box-shadow:0 14px 22px -10px rgba(0,0,0,.35)}
.gutwords .seg{gap:8px}
@media(max-width:820px){
	.gutwrap{grid-template-columns:1fr;gap:20px;justify-items:center;text-align:center}
	.gutimg{width:220px}
	.gutwords .seg{justify-content:center}
	.gutwords{width:100%}
}
.stagedcard{background:var(--butter);border-radius:12px;padding:26px 28px;max-width:560px}
.stagedtxt{font-size:17px;line-height:1.55;margin:0;font-style:italic}

/* ---------- spaces ---------- */
.spacegrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:760px){.spacegrid{grid-template-columns:1fr}}
.spmini{display:flex;gap:5px;margin:4px 0 2px}
.spmini span{width:20px;height:20px;border-radius:5px;border:1px solid var(--hair)}
.spchip{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--hair);border-radius:100px;padding:4px 10px;color:var(--muted);margin-right:6px}
.spdel{background:none;border:none;color:var(--muted);font-size:11px;cursor:pointer;text-decoration:underline;padding:0}

/* ---------- footer ---------- */
.foot{padding:54px 24px;text-align:center}
.foot .wordmark{font-size:22px}
.foot nav{margin:12px 0 8px;font-size:13px}
.foot p{max-width:none;font-size:11.5px;letter-spacing:.05em;color:var(--muted)}

/* A found piece is always a door into that piece. Without a visible response
   to the cursor people read these as a printed sheet and never try. */
.brCard,.dbFind{transition:transform .14s ease,opacity .14s ease}
.brCard:hover,.dbFind:hover{transform:translateY(-3px)}
.brCard:hover img,.dbFind:hover img{opacity:.92}
.brCard:focus-visible,.dbFind:focus-visible{outline:2px solid var(--sage);outline-offset:4px}

/* ---------- exam: "what do these mean?" ---------- */
.xwhat{background:none;border:none;padding:0;font:inherit;font-size:13.5px;color:var(--accent);
	text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.xmodal{position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:200;display:flex;
	align-items:center;justify-content:center;padding:20px}
.xmbox{background:var(--paper);border-radius:14px;max-width:640px;width:100%;
	max-height:86vh;display:flex;flex-direction:column;box-shadow:0 30px 70px rgba(0,0,0,.35)}
.xmhead{display:flex;align-items:flex-start;gap:14px;padding:20px 22px 12px;border-bottom:1px solid var(--hair)}
.xmhead h3{margin:0;font-size:19px;font-family:var(--serif);font-weight:400;flex:1}
.xmx{background:none;border:none;font-size:26px;line-height:1;color:var(--muted);cursor:pointer;padding:0 2px}
.xmbody{overflow-y:auto;padding:6px 12px}
.xmrow{display:block;width:100%;text-align:left;background:none;border:1px solid transparent;
	border-radius:10px;padding:12px 12px;cursor:pointer;font:inherit}
.xmrow:hover{background:var(--cream)}
.xmrow.on{background:#E9F5F2;border-color:var(--accent)}
.xmname{display:block;font-size:14.5px;font-weight:700;margin-bottom:3px}
.xmrow.on .xmname:after{content:' ✓';color:var(--accent)}
.xmdesc{display:block;font-size:13.5px;line-height:1.5;color:var(--muted)}
.xmfoot{display:flex;align-items:center;gap:14px;padding:14px 22px 18px;border-top:1px solid var(--hair)}
.xmfoot p{margin:0;font-size:12.5px;flex:1}
@media(max-width:600px){.xmodal{padding:0}.xmbox{max-height:100vh;border-radius:0}}

/* ---------- claiming and Bid Wars ---------- */
.claimbox{border:1px solid var(--hair);border-left:4px solid var(--ink);background:var(--cream);
	padding:16px 18px;margin:0 0 18px;border-radius:6px}
.claimbox.is-hold{border-left-color:var(--accent);background:#EFF6F4}
.claimbox.is-won{border-left-color:var(--accent);background:#E9F5F2}
.claimbox.is-gone{border-left-color:#B9BFC2;background:var(--cream);opacity:.85}
/* A war should feel like an alarm going off, because it is one. */
.claimbox.is-war{border-left-color:var(--tomato);background:#FDF0ED;
	animation:clpulse 1.6s ease-in-out infinite}
@keyframes clpulse{0%,100%{box-shadow:0 0 0 0 rgba(214,58,34,0)}50%{box-shadow:0 0 0 5px rgba(214,58,34,.10)}}
@media (prefers-reduced-motion:reduce){.claimbox.is-war{animation:none}}
.clhead{margin:0 0 6px;font-size:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
	display:flex;align-items:baseline;gap:12px}
.clhead.war{color:var(--tomato)}
.clhead.won{color:var(--accent)}
.clhead.gone{color:var(--muted)}
.clhead .clock{margin-left:auto;font-family:var(--serif);font-size:24px;font-weight:400;
	letter-spacing:.02em;text-transform:none;font-variant-numeric:tabular-nums;color:var(--ink)}
.clnote{margin:0 0 10px;font-size:13px;line-height:1.55;color:var(--muted)}
.clbig{margin:0 0 12px;font-size:26px;font-family:var(--serif)}
.clbig .muted{font-family:var(--sans);font-size:13px}
.claimbox .btnrow{margin:0}

/* The locked preview at the end of the open exam: real colours, no pieces. */
.xjpal{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px}
.xjsw{display:flex;width:64px;height:64px;border-radius:8px;overflow:hidden;
	box-shadow:0 1px 2px rgba(0,0,0,.12),inset 0 0 0 1px rgba(0,0,0,.06)}
.xjsw i{flex:1;display:block}

/* ---------- viz: the Your Eye graphs (assets/js/eyeviz.js) ---------- */
/* One accent plus gray, validated rather than eyeballed. The two emphasis
   pairs clear both separation gates on white (deck vs you: CVD dE 20.4,
   normal dE 21.1; dots vs you: CVD dE 13.5, normal dE 19.3) and the teal ramp
   passes the ordinal checks outright. The two light marks sit below 3:1 on
   white by design, which is legal only with a relief channel, so every chart
   ships direct labels and a real table behind "Show the numbers". The site is
   light only, so there is one set of values. */
:root{
  --viz-you:#108474;        /* the member's own mark, the site accent */
  --viz-deck:#78C2B3;       /* the deck: distribution bars, unfilled meter track */
  --viz-context:#A4A4A4;    /* de-emphasis gray: the 155 works as context */
  --viz-band:rgba(16,132,116,.10); /* the accent as a wash, never a block */
  --viz-ink:var(--ink);
  --viz-muted:var(--muted);
  --viz-hair:var(--hair);
  --viz-surface:var(--card);
}
.vizfig{margin:0}
.vizbody{margin:0}
.vizsvg{display:block;width:100%;height:auto;font-family:var(--sans);overflow:visible}
.vizsvg:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.vizstrip{margin:0 0 18px}
.vizstrip:last-child{margin-bottom:6px}
.vizaxis{font-size:11px;fill:var(--viz-muted)}
/* the surface ring, applied to text: a label that crosses a mark or a rule
   stays readable without anything being drawn on top of the data */
.vizlbl{font-size:11px;fill:var(--viz-ink);paint-order:stroke fill;stroke:var(--viz-surface);
  stroke-width:3px;stroke-linejoin:round}
.vizlbl-you{font-size:11.5px;font-weight:700;fill:var(--viz-you)}
.vizlbl-nb{font-size:11px;font-weight:700;fill:var(--viz-ink)}
.vizlbl-arch{font-size:11px;fill:var(--viz-muted)}
.vizlbl-tag{font-size:12px;fill:var(--viz-ink)}
.vizval{font-size:11px;font-weight:700;fill:var(--viz-ink);font-variant-numeric:tabular-nums}
.vizsay{font-size:13px;line-height:1.5;color:var(--viz-muted);margin:6px 0 0;max-width:62ch}
.vizsub{font-size:13px;line-height:1.5;color:var(--viz-muted);margin:0 0 12px;max-width:62ch}
.vizgh{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--viz-muted);margin:16px 0 6px}
.vizgh:first-child{margin-top:2px}
/* the disclosure that turns any chart into its table twin */
.viztog{margin-top:12px;background:none;border:none;padding:0;cursor:pointer;font:inherit;
  font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.viztog:hover{text-decoration:underline}
.viztog:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.viztables{margin-top:10px;overflow-x:auto}
.viztbl{border-collapse:collapse;width:100%;font-size:12.5px;margin-bottom:16px}
.viztbl caption{text-align:left;color:var(--viz-muted);font-size:12px;line-height:1.5;padding:6px 0}
.viztbl th,.viztbl td{border-bottom:1px solid var(--viz-hair);padding:6px 10px 6px 0;text-align:left;
  vertical-align:top;font-weight:400}
.viztbl thead th{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--viz-muted);white-space:nowrap}
.viztbl tbody th{font-weight:600}
.viztbl td{font-variant-numeric:tabular-nums}
/* legend: always present as soon as a chart carries more than one mark */
.vizleg{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px;font-size:12px;color:var(--viz-muted)}
.vizlegi{display:inline-flex;align-items:center;gap:6px}
.vizlegi svg{flex:none}
/* the evidence row: counts, not a score */
.viztiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:14px}
.viztile{border-top:2px solid var(--viz-hair);padding-top:10px}
.viztile:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.viztilev{display:block;font-family:var(--sans);font-size:30px;font-weight:600;line-height:1.05}
.viztilel{display:block;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--viz-muted);margin-top:4px}
.viztilew{font-size:12.5px;line-height:1.45;color:var(--viz-muted);margin:6px 0 0}
/* the twelve duels, replayed */
.vizduels{list-style:none;margin:0;padding:0;max-width:none}
.vizduel{display:flex;gap:16px;align-items:flex-start;padding:14px 0;border-top:1px solid var(--viz-hair);margin:0}
.vizduel:first-child{border-top:none;padding-top:2px}
.vizduelt{display:flex;gap:8px;flex:none}
.vizthumb{display:block;width:62px;text-align:center}
.vizthumb img{width:62px;height:62px;object-fit:cover;display:block;background:#fff}
.vizthumb:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* chosen is filled, passed is hollow, and both say so in words: the
   difference never rests on colour */
.vizthumb.is-won img{border:2px solid var(--viz-you)}
.vizthumb.is-lost img{border:2px solid var(--viz-hair);opacity:.55}
.vizthumbl{display:block;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-top:5px}
.vizthumb.is-won .vizthumbl{color:var(--viz-you)}
.vizthumb.is-lost .vizthumbl{color:var(--viz-muted)}
.vizduelb{min-width:0}
.vizduelh{font-size:16px;font-weight:700;line-height:1.35;margin:0;color:var(--ink)}
.vizduelb .vizsay{margin-top:4px}
@media(max-width:520px){
  .vizduel{flex-direction:column;gap:10px}
  .viztiles{grid-template-columns:1fr 1fr}
}
/* one tooltip for every chart: values lead, labels follow */
.viztip{position:fixed;z-index:200;pointer-events:none;background:var(--ink);color:#fff;
  border-radius:6px;padding:8px 11px;font-family:var(--sans);font-size:12px;line-height:1.45;
  max-width:260px;box-shadow:0 10px 26px rgba(0,0,0,.28)}
.viztip[hidden]{display:none}
.viztiph{display:flex;align-items:center;gap:7px}
.viztiph b{font-size:13.5px;font-weight:700}
.viztipk{display:block;width:12px;height:3px;border-radius:2px;flex:none}
.viztip span{display:block;color:#D3D7D6;margin-top:2px}
/* the four lines on the overview: two real pictures at the ends, you in
   between. Plain HTML so the pictures are ordinary images. The track is
   chart furniture in the validated context gray; the one mark on it is the
   accent. Pictures are 72px, 56px on a phone, and the track takes whatever is
   left, so nothing on the row can push the card wider than the screen. */
.vizln{display:flex;flex-direction:column;gap:24px}
.vizlnrow{margin:0;min-width:0}
.vizlnends{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0 0 8px;
  font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--viz-muted)}
.vizlnends span:last-child{text-align:right}
.vizlnbar{--vizln-pic:72px;display:grid;grid-template-columns:var(--vizln-pic) minmax(0,1fr) var(--vizln-pic);
  gap:14px;align-items:center}
.vizlnpic{display:block;width:var(--vizln-pic);height:var(--vizln-pic);background:#F0F3F3;border-radius:4px;overflow:hidden}
.vizlnpic img{display:block;width:100%;height:100%;object-fit:cover}
.vizlntrack{position:relative;height:44px;min-width:0}
.vizlntrack::before{content:'';position:absolute;left:0;right:0;top:29px;height:2px;border-radius:2px;
  background:var(--viz-context)}
.vizlnyou{position:absolute;top:22px;width:16px;height:16px;margin:0 0 0 -8px;padding:0;border-radius:50%;
  background:var(--viz-you);border:2px solid var(--viz-surface);box-shadow:0 0 0 1px var(--viz-you);cursor:default}
.vizlnyou:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.vizlnyoul{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap;font-size:11.5px;font-weight:700;
  color:var(--viz-you);pointer-events:none}
.vizlnrow .vizsay{margin-top:10px}
@media(max-width:520px){.vizlnbar{--vizln-pic:56px;gap:10px}}
/* ---------- the Your Eye type system ----------
   One ladder for every tab, so a heading never looks like a paragraph and a
   paragraph never looks like a caption: a kicker, then the title, then one
   line on what the card is, then the thing itself. A sentence that carries a
   real count is a finding, in ink, with the count in bold; how to read a
   chart is a note. Scoped under .actmain so it outranks the generic
   .card p and h2/h3 rules without reaching for !important. */
.actmain .ey-kicker{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;line-height:1.4;
  color:var(--accent);margin:0 0 8px;max-width:none}
.actmain .ey-title{font-family:var(--serif);font-weight:400;font-size:24px;line-height:1.2;letter-spacing:0;
  text-transform:none;color:var(--ink);margin:0 0 6px;max-width:none}
.actmain .ey-desc{font-size:14px;line-height:1.55;color:var(--muted);max-width:60ch;margin:0 0 14px}
.actmain .ey-finding{font-size:16px;line-height:1.5;color:var(--ink);max-width:62ch}
.actmain .ey-finding strong{font-weight:700}
.actmain .ey-body{font-size:15.5px;line-height:1.65;color:#3A3A3A;max-width:62ch}
.actmain .ey-note{font-size:12.5px;line-height:1.5;color:var(--muted);max-width:62ch}
.actmain .ey-note strong{color:var(--ink)}
.actmain .ey-item{font-size:16px;font-weight:600;line-height:1.3;color:var(--ink);margin:0;max-width:none}
.actmain .ey-pagetitle{font-size:clamp(32px,4.5vw,52px)}
.actmain .ey-dek{font-size:16px}
/* a status line that shares the kicker's row, like "Saved" */
.actmain .ey-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.actmain .ey-top .ey-note{margin:0;text-align:right}
.actmain .ey-block{margin-top:26px}
.actmain .ey-sect{margin:20px 0 18px}
/* The written reading as a ledger, the same shape as the homepage's at a
   glance list: an icon circle, a serif title, the lead in bold, then the
   paragraphs, with a hairline between rows. */
.actmain .rd-list{list-style:none;margin:0;padding:0;max-width:none}
.actmain .rd-row{display:flex;gap:16px;align-items:flex-start;padding:18px 0;border-top:1px solid var(--hair);margin:0}
.actmain .rd-row:first-child{border-top:none}
.actmain .rd-ico.sm{flex:0 0 28px;width:28px;height:28px;border-radius:14px;margin-top:1px}
.actmain .rd-main{flex:1;min-width:0}
.actmain .rd-title{font-family:var(--serif);font-weight:400;font-size:22px;line-height:1.2;letter-spacing:0;
  text-transform:none;color:var(--ink);margin:0 0 6px;max-width:none}
.actmain .rd-lead{font-size:16.5px;font-weight:700;line-height:1.45;color:var(--ink);margin:0 0 8px;max-width:60ch}
.actmain .rd-lead.sm{font-size:15.5px;font-weight:600;margin:3px 0 0}
.actmain .rd-lead.q{font-style:italic}
.actmain .rd-main .ey-body{margin:0 0 10px}
.actmain .rd-main .ey-body:last-child{margin-bottom:0}
.actmain .rd-subhead{margin:28px 0 4px;padding-bottom:10px;border-bottom:2px solid var(--ink)}
/* the design lane's section, brought onto the same ladder from outside */
.actmain #eyDesignCard .slpr-design{margin:0;padding:0;border:0;border-radius:0}
.actmain .slpr-design h3{font-family:var(--serif);font-weight:400;font-size:24px;line-height:1.2;letter-spacing:0;
  text-transform:none;color:var(--ink);margin:0 0 6px}
.actmain .slpr-design .slpr-design-sub{font-size:14px;line-height:1.55;color:var(--muted);opacity:1;max-width:60ch;margin:0 0 14px}
.actmain .slpr-design .slpr-design-why{font-size:14px;line-height:1.5;color:var(--muted)}
.actmain .dfcard .dfl{font-size:16px;font-weight:600}
/* Chart text set by a single class loses to the site's .card p (15px), so
   the pieces that sit in a <p> inside a card are pinned here. */
.actmain .vizduelh{font-size:16px}
.actmain .viztilew{font-size:12.5px}
.actmain .eybestl{font-size:22px}
/* Inside a card, .card p would blow the design lane's small print up to
   15px ink; put it back to the small muted lines it was drawn as. */
.actmain #eyDesignCard .slpr-design-meta{font-size:12.5px;color:var(--muted);opacity:1}
.actmain #eyDesignCard .slpr-design-find{font-size:12px;color:var(--muted);opacity:1}
.actmain #eyDesignCard .slpr-design-note{font-size:12.5px;color:var(--muted);opacity:1}
@media(max-width:520px){
  .actmain .ey-title{font-size:22px}
  .actmain .rd-row{gap:12px;padding:16px 0}
  .actmain .rd-title{font-size:20px}
}

/* ---------- Your Eye: six tabs, one page (includes/templates/account-eye.php) ---------- */
/* The readout is rendered whole on every visit and the tab only decides which
   container is on screen, so a switch costs no request and nothing has a
   second source of truth. Two controls, never both at once: the sub menu
   under "Your Eye" on desktop, where the account nav is a column beside the
   page, and the pill strip under the heading below 820px, where that nav
   becomes a row above it and a nested list would be unreadable. */
.eyetab{display:none}
.eyetab.on{display:block}
.actnav .actsub{display:flex;flex-direction:column;gap:2px;margin:2px 0 8px;padding-left:11px;border-left:1px solid var(--hair)}
.actnav .actsub a{font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:none;padding:5px 8px;color:var(--muted)}
.actnav .actsub a:hover{color:var(--accent)}
.actnav .actsub a.on{color:var(--ink);background:var(--cream)}
.eyetabs{display:none}
/* the overview's five doors, one per other tab */
.eydoors{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:20px;margin-top:20px}
.eydoor{display:flex;flex-direction:column;align-items:flex-start}
.eydoor a{margin-top:auto}
/* the one work the reading points at hardest */
.eybest{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap}
.eybestimg{flex:none;width:190px;min-height:150px;background:#F0F3F3;padding:10px;display:flex;align-items:center;justify-content:center}
.eybestimg img{max-width:100%;max-height:230px;object-fit:contain;display:block}
.eybestl{font-family:var(--serif);font-size:24px;line-height:1.2;margin:0}
@media(max-width:820px){
  .actnav .actsub{display:none}
  .eyetabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px}
  .eyetabs a{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;
    color:var(--muted);background:var(--cream);border:1px solid var(--hair);border-radius:999px;padding:7px 12px}
  .eyetabs a.on{color:var(--paper);background:var(--ink);border-color:var(--ink)}
}
@media(max-width:520px){
  .eybestimg{width:100%}
}