@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:ital,wght@0,400;0,500;1,400&display=swap');
:root{
  /* one cream everywhere, one earthy page beneath it */
  --page:#E8DFCC;        /* page background: warm tan, earthy */
  --surface:#FFFCF1;     /* THE cream, sidebar, top bar, banner, every card */
  --bone:#F4ECDA;        /* subtle inner fills only (bar tracks, logs) */
  --rule:#D9CDB4;        /* borders */
  --orange:#C4561A; --burnt:#7E3410; --tan:#D8C5A9;
  --brown:#654B3B; --rust:#A65336; --charcoal:#000000; --muted:#857A68;
  --orange-tint:#FBE7D8; --rust-tint:#F6E7DC;
  --cream:var(--surface); --card:var(--surface); --art-bg:var(--surface);
}
*{box-sizing:border-box}
body{margin:0;background:var(--page);color:var(--charcoal);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--orange);text-decoration:none}
p{margin:0 0 .9rem}
h1,h2,h3,.display{font-family:"Cormorant Garamond",Garamond,serif;
  color:var(--burnt);font-weight:600;letter-spacing:.005em}
h1{font-size:2.5rem;line-height:1.08;margin:0 0 .3rem}
h2{font-size:1.4rem;margin:0 0 .15rem}
h3{font-size:1.05rem;margin:0 0 .3rem}
.brandname{font-family:"Cormorant Garamond",Garamond,serif;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--orange)}
h1 .vada,h2 .brandname{letter-spacing:.11em}
.mono{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace}

/* ---------- shell ---------- */
.shell{display:flex;min-height:100vh}
aside{flex:0 0 212px;background:var(--surface);
  border-right:1px solid var(--rule);display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;overflow-y:auto}
.mark{display:flex;align-items:center;gap:.6rem;padding:1.1rem .95rem 1.3rem}
/* No black plate behind it any more. That was framing a logo that came with
   its own black square; this one is the orange tile itself. */
.mark img{width:40px;height:40px;flex:0 0 auto;border-radius:9px;
  object-fit:contain;display:block}
/* Caps are wider than the sentence case this used to be, and the sidebar is
   212px with a 40px tile in front of the words. Sized to stay on one line in
   that gap rather than breaking after HARRIZONA. */
.markwd{font-family:"Inter",-apple-system,sans-serif;font-weight:800;
  font-size:.8rem;text-transform:uppercase;letter-spacing:.03em;
  white-space:nowrap;color:var(--charcoal);line-height:1}
.markwd b{font-weight:700;color:var(--orange)}
.nav{display:flex;flex-direction:column;gap:.3rem;padding:0 .55rem}
.navlink{display:flex;align-items:center;gap:.6rem;padding:.48rem .6rem;
  border-radius:9px;color:var(--charcoal);font-weight:500;font-size:.83rem;
  line-height:1.2;background:#FFFFFF;border:1px solid #EFE7D6}
.navlink svg{flex:0 0 auto;width:16px;height:16px;stroke:var(--brown);
  stroke-width:1.7;fill:none;opacity:.75}
.navlink:hover{background:var(--orange-tint);color:var(--orange);
  border-color:#F0D8C2}
.navlink:hover svg{stroke:var(--orange);opacity:1}
.navlink.on{background:var(--orange-tint);color:var(--burnt);
  font-weight:700;border-color:#EBC9AC}
.navlink.on svg{stroke:var(--burnt);opacity:1}
.navcount{margin-left:auto;min-width:1.15rem;padding:0 .3rem;
  border-radius:99px;background:var(--orange);color:var(--surface);
  font-size:.68rem;font-weight:700;line-height:1.4;text-align:center}
.navlink.soon{color:var(--muted);background:transparent;
  border-color:#F2EBDC}
.navlink.soon svg{stroke:var(--tan)}
.navsub{font-family:"Inter",sans-serif;font-weight:600;font-size:.6rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  padding:1.5rem .85rem .45rem}
/* The way out, where somebody would look for it. It was only at the bottom
   of Settings, which is a long way to go to leave. */
.sideout{display:block;margin:0 0 .7rem;font-family:"Inter",sans-serif;
  font-weight:700;font-size:.78rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
.sideout:hover{color:var(--rust)}
.sidefoot{margin-top:auto;padding:1rem .95rem 1.1rem;
  border-top:1px solid var(--rule);font-size:.72rem;color:var(--muted)}
.sidefoot .dot{display:inline-block;width:6px;height:6px;border-radius:99px;
  background:var(--orange);margin-right:.5rem}
.sidefoot a{display:block;margin-top:.5rem;color:var(--muted)}
.sidefoot a:hover{color:var(--rust)}

/* ---------- top bar ---------- */
.nosearch{flex:1}
.leaverow{margin-top:1rem;padding-top:.9rem;
  border-top:1px solid var(--rule)}
.leaverow a{font-weight:600}
/* Three lines reading as one block, set down off the heading rather than
   crowding it. */
.askblock{margin:1.35rem 0 .5rem}
.askblock .sub{margin:0 0 .35rem;font-weight:700;color:var(--brown)}
.askblock .sub:last-child{margin:0}
.legal{display:block;margin-top:.5rem;font-size:.72rem;letter-spacing:.04em;
  color:var(--muted)}
.topbar{display:flex;align-items:center;gap:1.2rem;padding:1rem 2rem;
  border-bottom:1px solid var(--rule);background:var(--surface);position:sticky;
  top:0;z-index:5}
.search{flex:1 1 auto;display:flex;align-items:center;gap:.6rem;
  background:var(--card);border:1px solid var(--rule);border-radius:7px;
  padding:.55rem 1rem;max-width:36rem}
.search svg{stroke:var(--muted);stroke-width:1.8;fill:none;flex:0 0 auto}
.search input{flex:1 1 auto;border:0;outline:0;background:transparent;
  font-family:"Inter",sans-serif;font-size:.87rem;color:var(--charcoal)}
.search input::placeholder{color:var(--muted)}
/* The Drive's own TikTok, between the search and the owner. A filled circle
   so it reads as a button rather than another piece of text up there. */
.ttlink{display:inline-flex;align-items:center;gap:.5rem;flex:0 0 auto;
  margin-left:auto;text-decoration:none;color:var(--burnt)}
/* Countdown, TikTok, Linzy: one group on the right, evenly spaced, with
   the big gap in front of it rather than between them. */
.cdown+.ttlink{margin-left:1.4rem}
/* Beside the owner, so the gap between them is the small one and the
   space before them is the big one. */
.ttlink+.who{margin-left:.9rem}
.ttdot{display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 auto;width:34px;height:34px;border-radius:99px;
  background:var(--orange);color:var(--surface);
  transition:background .12s}
.ttname{font-family:"Inter",sans-serif;font-weight:700;font-size:.82rem;
  white-space:nowrap}
.ttlink:hover .ttdot{background:var(--burnt)}
.ttlink:hover .ttname{text-decoration:underline;color:var(--orange)}
/* It used to float dead centre, taken out of the flow. The middle of the
   bar belongs to the countdown now, so this sits in the row beside the
   owner, which is where it was asked for and reads as one group. */
@media(min-width:900px){.topbar{position:relative}}
/* The circle on its own on a phone, where there is no room for the name. */
@media(max-width:899px){.ttname{display:none}}
/* The owner, top right, and a way through to her TikTok. It is a link, so
   it says so on hover rather than being a picture people wonder about. */
.who{display:flex;align-items:center;gap:.75rem;margin-left:auto;
  color:inherit;text-decoration:none}
.who .pair{display:flex}
.who .pair img{width:40px;height:40px;border-radius:99px;object-fit:cover;
  object-position:center 22%;border:2px solid var(--surface);display:block;
  transition:border-color .12s}
.who .pair img+img{margin-left:-11px}
.who .nm{font-weight:800;font-size:.9rem;letter-spacing:.01em;
  color:var(--burnt);line-height:1.25}
.who .rl{font-size:.74rem;color:var(--muted)}
a.who:hover .nm{color:var(--orange)}
a.who:hover .pair img{border-color:var(--orange)}

main{flex:1 1 auto;min-width:0}
.pad{padding:1.8rem 2rem 4rem;max-width:1320px}

/* ---------- welcome ---------- */
.hero{position:relative;overflow:hidden;background:var(--art-bg);
  border:1px solid var(--rule);border-radius:10px;
  padding:2.6rem 3rem;
  display:flex;align-items:center;min-height:360px}
.hero{container-type:inline-size}
/* The artwork on the right half of the hero. Decoration, so aria-hidden and
   no alt: the page already says whose dashboard this is. Half the hero's
   width but capped, because past that cap it would be taller than the hero
   and get clipped. It is not drawn at all on a phone, where the hero is a
   name and four numbers and has no room for anything else. */
.artword{position:absolute;right:1.6rem;top:50%;translate:0 -50%;
  display:block;width:min(50%,34rem);height:auto;
  margin:0;pointer-events:none;z-index:0}
.hero .txt{position:relative;z-index:2;flex:1 1 auto;max-width:50%;min-width:19rem}
.hero h1{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  font-size:clamp(1.4rem,2.1vw,2.05rem);font-weight:500;letter-spacing:-.02em;
  margin:0 0 .5rem;line-height:1.15;white-space:nowrap}
.hero .lede{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  font-weight:500;font-size:.92rem;letter-spacing:.04em;color:var(--orange);
  margin:0 0 1.2rem}
.hero .body{font-size:.96rem;font-weight:500;color:var(--charcoal);
  max-width:25rem;margin:0}
.hero .row{margin-top:1.8rem}

.navlink.out .away{margin-left:auto;font-size:.78rem;opacity:.5}
.filters.cats{gap:.3rem;margin-bottom:.5rem}
/* Sub verticals are a second thought, not a second menu. One scrolling line
   at the size of a caption rather than two rows of dashed outlines taking as
   much room as the thing they filter. */
.filters.cats.subs{margin:.1rem 0 .9rem;padding:0 0 .2rem;flex-wrap:nowrap;
  overflow-x:auto;scrollbar-width:thin}
.filters.cats.subs::-webkit-scrollbar{height:4px}
.filters.cats.subs::-webkit-scrollbar-thumb{background:var(--tan);
  border-radius:99px}
.filters.cats .rchip.sub{background:transparent;border:0;padding:.15rem .45rem;
  font-size:.66rem;letter-spacing:.05em;color:var(--muted);white-space:nowrap;
  border-radius:5px}
.filters.cats .rchip.sub:hover{background:var(--bone);color:var(--rust)}
.filters.cats .rchip.sub.on{background:var(--rust);color:#fff;font-weight:700}
.filters.cats .rchip{font-size:.72rem;padding:.3rem .6rem}
.vvert{display:inline-block;background:var(--orange-tint);color:var(--orange);font-size:.62rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:.1rem .35rem;border-radius:4px;margin-right:.4rem;vertical-align:1px}
a.pcard{text-decoration:none;color:inherit;display:block}
a.pcard:hover{border-color:var(--orange)}
a.pcard:hover .pview{text-decoration:underline}
.lmid{font-size:.82rem;color:var(--muted);margin-top:.15rem}
.vsold{font-size:.78rem;margin:.15rem 0 .1rem}
.vsold a{color:var(--rust);text-decoration:none}
.vsold a:hover{text-decoration:underline}
.lrow > .apic{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:0 0 auto;margin-right:.2rem}
.ghandle{color:var(--orange)}
a.lna.go{color:var(--rust);text-decoration:none;border-bottom:1px dotted var(--rust)}
a.lna.go:hover{border-bottom-style:solid}
a.ghandle{text-decoration:none}
a.ghandle:hover{text-decoration:underline;text-underline-offset:3px}
.hero .lede{display:flex;flex-wrap:wrap;gap:.35rem 1.4rem;font-family:"Inter",sans-serif;
  font-size:.85rem;font-style:normal;color:var(--charcoal)}
.stands{line-height:2.1}
.stand{display:inline-flex;align-items:center;gap:.45rem;
  margin-right:.9rem;color:var(--charcoal);font-weight:600}
.stand b{font-weight:700;font-size:.62rem;letter-spacing:.1em;
  text-transform:uppercase;color:#fff;background:var(--burnt);
  border-radius:7px;padding:.28rem .6rem}
.lna{color:var(--tan)}
.ad{font-size:.63rem;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;padding:.16rem .42rem;border-radius:5px;
  white-space:nowrap;cursor:help}
.ad.paid{background:var(--burnt);color:#fff}
.ad.long{background:var(--rust-tint);color:var(--rust);
  border:1px solid #EFD5C5}
.adnote{font-size:.78rem;color:var(--muted);margin:.2rem 0 1rem;
  max-width:46rem}
.mvrow{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;
  margin-top:.35rem}
.mv{font-size:.63rem;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;padding:.16rem .42rem;border-radius:5px;
  white-space:nowrap}
.mv.up{background:var(--orange-tint);color:var(--burnt)}
.mv.down{background:var(--bone);color:var(--muted)}
.mv.new{background:var(--rust);color:#fff}
.mv.flat{background:var(--bone);color:var(--muted)}
.mvsub{font-size:.66rem;color:var(--muted);white-space:nowrap}
.vcard.on{outline:2px solid var(--rust);outline-offset:2px}
.vdetail{scroll-margin-top:1rem;
  display:flex;gap:1.4rem;flex-wrap:wrap;background:var(--card);
  border:1px solid var(--rule);border-radius:12px;padding:1rem;
  margin:0 0 1.2rem}
.vdplay{flex:0 0 325px;max-width:100%}
.vdplay iframe{width:100%;height:580px;border:0;border-radius:10px;
  background:var(--bone)}
.vdside{flex:1 1 18rem;min-width:0}
.vdhead{display:flex;align-items:baseline;justify-content:space-between;
  gap:1rem}
.vdwho{font-family:"Cormorant Garamond",serif;font-size:1.4rem;
  color:var(--burnt)}
.vdclose{font-size:.72rem;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--rust)}
.vdcap{font-size:.86rem;color:var(--charcoal);margin:.5rem 0 1rem}
.vfacts{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));
  gap:.6rem;margin-bottom:1.1rem}
.vf .k{font-size:.6rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted)}
.vf .v{font-family:"Inter",-apple-system,sans-serif;font-weight:700;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;font-size:1rem;
  color:var(--rust);margin-top:.1rem}
.vdgraph{background:var(--surface);border:1px solid var(--rule);
  border-radius:10px;padding:.8rem .9rem .6rem;margin-bottom:1rem}
.vdgraph .k{font-size:.6rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);margin-bottom:.5rem}
.spark{display:block;height:180px;width:100%;overflow:visible}
.sparkn{font-size:10px;font-weight:700;fill:var(--muted);
  font-family:"Inter",sans-serif}
@media(max-width:860px){.vdplay{flex:1 1 100%}
  .vdplay iframe{height:480px}}
.livegrid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;
  align-items:start}
.lvcol{background:var(--card);border:1px solid var(--rule);border-radius:12px;
  padding:.6rem .7rem .7rem}
.lvhd{font-size:.6rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);padding:.35rem .4rem .55rem}
.lvcard{display:flex;align-items:center;gap:.6rem;padding:.5rem .4rem;
  border-top:1px solid var(--rule);color:var(--charcoal)}
.lvcol .lvcard:first-of-type{border-top:0}
a.lvcard:hover{background:var(--orange-tint)}
.lvrank{flex:0 0 1.35rem;height:1.35rem;border-radius:5px;
  background:var(--bone);color:var(--muted);font-size:.66rem;font-weight:700;
  display:flex;align-items:center;justify-content:center}
.lvpic{flex:0 0 34px;height:34px;border-radius:6px;overflow:hidden;
  background:var(--bone)}
.lvpic img{width:100%;height:100%;object-fit:cover;display:block}
.lvtx{flex:1 1 auto;min-width:0}
.lvlead{font-size:.8rem;font-weight:600;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.lvwhen{font-size:.68rem;color:var(--muted);margin-top:.1rem}
.lvmore{font-size:.62rem;font-weight:700;color:var(--rust);
  margin-left:.35rem}
.lvp{color:var(--charcoal)}
a.lvp:hover{color:var(--rust);text-decoration:underline}
.lvall{display:inline}
.lvall summary{list-style:none;cursor:pointer;display:inline}
.lvall summary::-webkit-details-marker{display:none}
.lvall ul{margin:.4rem 0 .2rem;padding-left:.9rem;list-style:none}
.lvall li{font-size:.76rem;line-height:1.5;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.lvall li:before{content:"‚2";color:var(--tan);margin-right:.4rem}
.lvlead{font-size:.8rem;font-weight:600}
.lvcard .lvlead{white-space:normal}
.lvmore{font-size:.62rem;font-weight:700;color:var(--rust);margin-left:.35rem;
  border:1px solid var(--tan);border-radius:4px;padding:.05rem .25rem}
.lvmore:hover{background:var(--orange-tint);border-color:var(--orange)}
.lvnum{flex:0 0 auto;text-align:right}
.lvmoney{font-family:"Inter",-apple-system,sans-serif;font-weight:700;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;font-size:.92rem;
  color:var(--rust)}
.lvsub{font-size:.66rem;color:var(--muted);margin-top:.05rem}
.lvcol .more{margin-top:.7rem}
@media(max-width:980px){.livegrid{grid-template-columns:1fr}}
.more{display:flex;justify-content:center;margin-top:1.1rem}
.more a{font-size:.75rem;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--rust);padding:.5rem 1rem;
  border:1px solid var(--tan);border-radius:7px}
.more a:hover{background:var(--orange-tint);border-color:var(--orange);
  color:var(--burnt)}
/* The dashboard is a snapshot. Two things are not negotiable here: the hero
   is left exactly as it is, and a product card is the same square it is in
   My Earnings. Smaller is fine, a different shape is not, and half sized is
   not fine either. So the height comes out of spacing and out of the parts
   of a card that the snapshot does not need, and nowhere else. */
.snap .filterline{margin-top:1rem}

.snap .stats{gap:.6rem;margin-top:.8rem}
.snap .stat{padding:.7rem .8rem}
.snap .stat .ico{width:24px;height:24px;border-radius:7px}
.snap .stat .ico svg{width:13px;height:13px}
.snap .stat .v{font-size:1.35rem}
.snap .stat .note{font-size:.65rem;margin-top:.12rem;padding:.28rem .5rem}

.snap .section{margin-top:1rem}
.snap .section>.hd{margin-bottom:.5rem}
.snap .section>.hd h2{font-size:1.2rem}
.snap .section>.hd .s,.snap .section>.hd a{font-size:.7rem}

.snap .pcard .bd{padding:.5rem .6rem .6rem}
.snap .pcard .tt{font-size:.75rem;line-height:1.25;margin:0;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;
  overflow:hidden}
.snap .pcard .sh{font-size:.62rem;margin:.05rem 0 0}
.snap .pcard .ft{margin-top:.3rem}
.snap .pcard .amt{font-size:.88rem}
.snap .pcard .pview{display:none}

/* The video row matches the product row: same five columns, same width per
   card, so the two line up down the page. Only the picture differs, because
   a video still is portrait and a product photo is square, and that is the
   shape each of them actually is. */
.snap .vstrip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:.8rem;overflow:visible;padding:0}
.snap .vcard{flex:none;width:100%}
.snap .vshot{width:100%;height:auto;aspect-ratio:3/4}
.snap .vname{font-size:.72rem;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;
  overflow:hidden}
.snap .vsub,.snap .vsold{font-size:.62rem;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.snap .mvrow{display:none}
body:has(.snap) .pad{padding-bottom:1.2rem}

/* Shorter screens give up picture, never the hero and never the numbers. */
@media(max-height:900px){
  .snap .pgrid{grid-template-columns:repeat(5,minmax(0,1fr))}
  .snap .stat{padding:.55rem .7rem}
  .snap .stat .v{font-size:1.2rem}
  .snap .stat .note{background:none;padding:0;margin-top:.1rem}
  .snap .section{margin-top:.7rem}
  .snap .pcard .sh{display:none}
}
.filterline{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.filterline .filters{margin-bottom:0}
.fresh{display:inline-flex;align-items:center;gap:.4rem;font-size:.72rem;
  color:var(--muted);white-space:nowrap}
.fdot{width:6px;height:6px;border-radius:99px;background:var(--orange);
  flex:0 0 auto}
.fresh.working{color:var(--rust);font-weight:600}
.fresh.working .fdot{animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
/* Settings was six full width sections stacked, with the account tiles as
   tall cards, and it ran well past a screen. The accounts sit across the top
   as compact rows now and everything else pairs off into two columns. */
/* Every block on this page is the same block. Two even columns that stretch
   to match, one padding, one text size, one button size. Styling each one as
   it got added is what made this page look like three different pages. */
.setgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem;align-items:stretch}
@media (max-width:860px){.setgrid{grid-template-columns:1fr}}
.setpage .section{margin-top:1.6rem}
.setgrid .section{margin-top:0;display:flex;flex-direction:column}
.setpage .section>.hd{margin-bottom:.5rem;align-items:baseline}
.setpage .section>.hd h2{font-family:"Inter",sans-serif;
  font-weight:800;font-size:.95rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--burnt)}
.setpage .section>.hd .s{font-size:.74rem}
.setgrid .panel{flex:1;display:flex;flex-direction:column;
  align-items:flex-start;justify-content:space-between;gap:.9rem;
  min-height:9.5rem}
.setgrid .panel > *{width:100%}
.setgrid .panel .row{margin:0}
.setpage .panel{padding:1rem 1.1rem;font-size:.88rem;line-height:1.55}
.setpage .panel p{font-size:.88rem;line-height:1.55;margin:0 0 .85rem}
.setpage .panel .row{margin:auto 0 0}
.setpage .panel .btn,.setpage .panel .btn.sm{font-size:.82rem;
  padding:.5rem .95rem}
.setpage .tight{margin:0 0 .7rem;font-size:.82rem;color:var(--muted)}
/* Eight slots, so four across and two rows. Fixed four, not auto-fill, or
   a short last row sets its own width and nothing lines up. */
.setpage .agrid{grid-template-columns:repeat(4,1fr);gap:.7rem}
@media (max-width:900px){.setpage .agrid{grid-template-columns:repeat(2,1fr)}}
.setpage .acard{min-height:8.4rem;justify-content:flex-start}
.setpage .acard .apic{width:44px;height:44px;font-size:.72rem;flex:0 0 auto}
.setpage .acard .aname{font-size:.82rem;line-height:1.25;
  overflow-wrap:anywhere}
.setpage .acard .ago{font-size:.6rem}
/* Link an account sits on its own below the grid, beside Rank and PPS. */
.setpair{display:grid;gap:1.1rem;align-items:start;
  grid-template-columns:minmax(0,1fr) minmax(0,1.35fr)}
@media (max-width:860px){.setpair{grid-template-columns:1fr}}
.addform{display:flex;gap:.6rem;align-items:center;width:100%}
.addform input{flex:1;min-width:0;font-family:"Inter",sans-serif;
  font-size:.88rem;padding:.6rem .8rem;border:1px solid var(--rule);
  border-radius:9px;background:var(--card);color:var(--charcoal)}
.addform input:focus{outline:2px solid var(--burnt);outline-offset:1px}
.addform .btn{flex:0 0 auto}
/* Rank and PPS lying down, three across, Save beside them. */
.standbar .stform{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.8rem}
.standbar .fgrid{flex:1;min-width:14rem;display:grid;gap:.6rem;
  grid-template-columns:repeat(3,minmax(0,1fr))}
.standbar .fcard{padding:.65rem .75rem;min-width:0;overflow:hidden}
.standbar .fcard select,.standbar .fcard input{max-width:100%}
.standbar label{margin:0 0 .3rem}
.standbar .row{margin:0;flex:0 0 auto}
/* Disconnect and sign out, quietly, at the very bottom. */
.byerow{display:flex;gap:1.4rem;align-items:center;margin-top:2rem;
  padding-top:1rem;border-top:1px solid var(--rule);font-size:.84rem}
.byerow a{color:var(--muted);font-weight:600}
.byerow a:hover{color:var(--rust)}
.byerow a:last-child{margin-left:auto}
.setpage .mecard{gap:.8rem}
.setpage .bigpic{width:52px;height:52px}
.setpage .mename{font-size:1.25rem}
.setpage .stform label{margin:.55rem 0 .2rem}
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(11.5rem,1fr));
  gap:.7rem}
/* ---- Creator cards: four facts and a face ------------------------- */
.cfacts{display:flex;flex-direction:column;gap:.18rem;width:100%;
  margin-top:.45rem;font-size:.72rem;color:var(--brown)}
.cfacts>div{display:flex;justify-content:space-between;gap:.5rem;
  align-items:baseline}
.cfacts i{font-style:normal;font-size:.62rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
.cvtags{display:flex;flex-wrap:wrap;gap:.25rem;justify-content:center;
  margin-top:.45rem}
.cvtag{font-size:.6rem;padding:.14rem .38rem;border-radius:999px;
  background:var(--bone);color:var(--brown);white-space:nowrap}
.csearch{display:flex;gap:.5rem;margin:0 0 1rem;max-width:30rem}
.csearch input{flex:1}
.ccard{position:relative;background:var(--card);border:1px solid var(--rule);
  border-radius:12px;padding:1rem .8rem .85rem;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:.15rem;
  color:inherit;text-decoration:none}
a.ccard:hover{border-color:var(--orange)}
.crank{position:absolute;top:.45rem;left:.5rem;min-width:1.25rem;height:1.25rem;
  padding:0 .25rem;border-radius:6px;background:var(--burnt);color:#fff;
  font-size:.62rem;font-weight:700;display:flex;align-items:center;
  justify-content:center}
.cpic{width:58px;height:58px;border-radius:99px;object-fit:cover;
  background:var(--bone);margin-bottom:.4rem}
.cpic.ini{display:flex;align-items:center;justify-content:center;
  color:var(--orange);font-weight:700;font-size:1rem}
.cname{font-weight:600;font-size:.82rem;line-height:1.2;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chandle{font-size:.68rem;color:var(--rust);max-width:100%;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.cmoney{font-family:"Inter",-apple-system,sans-serif;font-weight:700;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;font-size:.88rem;
  color:var(--rust);margin-top:.35rem}
.csub{font-size:.64rem;color:var(--muted)}
.ccard .mvrow{justify-content:center;margin-top:.4rem}
/* My Earnings is a working page, not a showcase. The four figures read as
   numbers rather than posters, and the cards carry the product with the
   video so one card answers what sold and what it sold. */
.earn .tiles{gap:.6rem}
.earn .tile{padding:.7rem .85rem}
.earn .tile .k{font-size:.58rem}
.earn .tile .v{font-size:1.35rem}
.earn .tile .tnote{font-size:.63rem;margin-top:.15rem}
.earn .section{margin-top:1.2rem}
.earn .section>.hd h2{font-size:1.2rem}

.vwatch{display:block;text-decoration:none}
.vwatch:hover .vshot{border-color:var(--rust)}
.vprod{display:flex;align-items:center;gap:.4rem;margin-top:.35rem;
  padding:.28rem .35rem;border-radius:7px;background:var(--bone);
  text-decoration:none;color:var(--charcoal);min-width:0}
a.vprod:hover{background:var(--orange-tint)}
.vprod.none{opacity:.6}
.vpic{width:22px;height:22px;flex:0 0 auto;border-radius:4px;object-fit:cover;
  background:var(--tan);display:block}
.vpic.ph{background:var(--tan)}
.vpname{font-size:.66rem;font-weight:600;line-height:1.2;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pmore{font-size:.58rem;font-weight:700;color:var(--rust);margin-left:auto;
  flex:0 0 auto}
.split{display:flex;align-items:center;gap:1.8rem;flex-wrap:wrap;
  background:var(--card);border:1px solid var(--rule);border-radius:14px;
  padding:1.1rem 1.3rem}
.dwrap{position:relative;flex:0 0 auto;width:158px;height:158px}
.donut{width:158px;height:158px;transform:rotate(-90deg);display:block}
.donut .ring{transition:stroke-width .15s}
.donut .ring:hover{stroke-width:31}
.dmid{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.1rem;pointer-events:none;
  text-align:center}
.dmid b{font-family:"Inter",-apple-system,sans-serif;font-weight:700;
  font-variant-numeric:tabular-nums;letter-spacing:-.03em;font-size:1.15rem;
  color:var(--charcoal);line-height:1}
.dmid span{font-size:.56rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted)}

.slegend{flex:1 1 22rem;min-width:0;display:flex;flex-direction:column;
  gap:.35rem}
.srow{display:grid;grid-template-columns:auto 6.2rem 5.4rem 1fr 3rem;
  align-items:center;gap:.6rem}
.sdot{width:10px;height:10px;border-radius:3px;background:var(--c)}
.sk{font-weight:700;font-size:.8rem;color:var(--charcoal)}
.sv{font-family:"Inter",-apple-system,sans-serif;font-weight:700;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;font-size:.9rem;
  color:var(--charcoal);text-align:right}
.sbar2{height:7px;border-radius:99px;background:var(--bone);overflow:hidden;
  display:block;min-width:2rem}
.sbar2 i{display:block;height:100%;border-radius:99px;background:var(--c)}
.sp{font-family:"Inter",sans-serif;font-weight:700;
  font-variant-numeric:tabular-nums;font-size:.76rem;color:var(--muted);
  text-align:right}
.sb{grid-column:2 / -1;font-size:.66rem;color:var(--muted);margin-top:-.15rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:700px){
  .srow{grid-template-columns:auto 1fr auto}
  .sbar2,.sp{display:none}
  .sb{grid-column:2 / -1}}
.blank{border:1px dashed var(--tan);border-radius:12px;padding:3.5rem 1rem;
  text-align:center;color:var(--muted);background:var(--surface);
  margin-top:1.2rem}
.blank p{margin:0;font-family:"Cormorant Garamond",serif;font-style:italic;
  font-size:1.1rem}
.jump{display:flex;gap:.3rem;flex-wrap:wrap;margin:-.4rem 0 1.4rem}
.jump a{font-size:.72rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);padding:.3rem .6rem;
  border-radius:6px}
.jump a:hover{background:var(--bone);color:var(--rust)}
.lede-p{max-width:44rem;color:var(--charcoal);margin:.2rem 0 1rem}
.section[id]{scroll-margin-top:1.2rem}
.buypanel{max-width:44rem}
.buyhead{display:flex;align-items:flex-start;justify-content:space-between;
  gap:1.2rem;flex-wrap:wrap;padding-bottom:1rem;margin-bottom:1rem;
  border-bottom:1px solid var(--rule)}
.ctitle{font-family:"Inter",sans-serif;font-weight:800;font-size:1.45rem;
  letter-spacing:.03em;text-transform:uppercase;color:var(--burnt);
  line-height:1.15}
.csub{font-size:.72rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted);margin-top:.3rem}
.cprice{font-family:"Inter",-apple-system,sans-serif;font-weight:700;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;font-size:1.75rem;
  color:var(--rust);line-height:1.1}
.cprice.none{font-size:.78rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);padding-top:.5rem}
.clist{margin:.9rem 0 1.3rem;padding-left:1.1rem;color:var(--charcoal)}
.clist li{margin:.3rem 0}
.btn.off{background:var(--tan);border-color:var(--tan);color:var(--surface);
  cursor:default}
.btn.off:hover{background:var(--tan);border-color:var(--tan)}
.cnote{margin-top:.9rem;font-size:.8rem;color:var(--muted)}
.pitch{font-family:"Cormorant Garamond",serif;font-size:1.3rem;
  color:var(--burnt);margin:0 0 .5rem}
.pitch strong{color:var(--rust);font-weight:600}
.agrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:.8rem}
.acard{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:.5rem;padding:1.2rem .9rem;border:1px solid var(--rule);border-radius:12px;
  background:var(--card)}
.acard:hover{border-color:var(--orange)}
.addcard{cursor:pointer;border-style:dashed;position:relative}
.addcard summary{list-style:none;display:flex;flex-direction:column;
  align-items:center;gap:.5rem}
.addcard summary::-webkit-details-marker{display:none}
.apic.plus{background:var(--orange-tint);color:var(--orange);font-size:1.6rem;
  font-weight:400;line-height:1}
.addcard form{display:flex;flex-direction:column;gap:.5rem;margin-top:.8rem;
  width:100%}
.addcard input{width:100%;font-family:"Inter",sans-serif;font-size:.85rem;
  padding:.5rem .6rem;border:1px solid var(--rule);border-radius:7px;
  background:var(--card);color:var(--charcoal)}
.addcard[open]{border-style:solid;border-color:var(--orange)}
.acard.on{background:var(--burnt);border-color:var(--burnt)}
.apic{width:56px;height:56px;border-radius:99px;object-fit:cover;
  display:flex;align-items:center;justify-content:center;background:var(--bone);
  color:var(--orange);font-family:"Inter",sans-serif;font-weight:700;
  font-size:.85rem}
.aname{font-family:"Inter",sans-serif;font-weight:600;font-size:.84rem;
  color:var(--burnt);word-break:break-word}
.acard.on .aname{color:var(--cream)}
.ago{font-family:"Inter",sans-serif;font-weight:600;font-size:.68rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--rust)}
.acard.on .ago{color:var(--tan)}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:.8rem}
.fcard{border:1px solid var(--rule);border-radius:12px;padding:.9rem 1rem;
  background:var(--card)}
.fcard input{width:100%;min-width:0;font-family:"Inter",sans-serif;
  font-size:.9rem;padding:.5rem .6rem;border:1px solid var(--rule);
  border-radius:7px;background:var(--card);color:var(--charcoal)}
.fcard label{display:block;margin:0 0 .45rem;font-weight:600;font-size:.68rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.stform label{display:block;margin:.9rem 0 .3rem;font-weight:600;font-size:.7rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.stform .opt{text-transform:none;letter-spacing:0;font-weight:400;
  color:var(--tan);margin-left:.4rem}
.stform input{font-family:"Inter",sans-serif;font-size:.88rem;padding:.55rem .7rem;
  border:1px solid var(--rule);border-radius:7px;background:var(--card);
  color:var(--charcoal);min-width:14rem}
.lmore{color:var(--muted);font-size:.78rem}
.gpic{width:38px;height:38px;border-radius:99px;object-fit:cover;
  display:inline-flex;align-items:center;justify-content:center;
  vertical-align:-.4rem;margin:0 .1rem 0 .2rem;background:var(--bone);
  color:var(--orange);font-family:"Inter",sans-serif;font-weight:700;
  font-size:.72rem;border:2px solid var(--card)}
/* inline-flex, not inline-block: as a flex item in the hero row an
   inline-block <details> is sized by its own line box, which put the two
   buttons on different baselines even though both summaries are 46px. */
/* No javascript in the closing. The menu is a checkbox: its label is the
   button, and a second label covers the whole window while it is open, so a
   click anywhere else lands on that and unticks the box. A <details> can
   only be closed by its own summary or by script, which is why this stopped
   being a <details>. */
.switch{position:relative;display:inline-flex;align-items:center}
.swchk{position:absolute;width:0;height:0;opacity:0;pointer-events:none}
.swchk:focus-visible ~ .btn{outline:2px solid var(--rust);outline-offset:2px}
.swveil{display:none}
.swchk:checked ~ .swveil{display:block;position:fixed;inset:0;z-index:8;
  cursor:default;background:transparent}
.swchk:checked ~ .swmenu{display:block}
.hero .row{align-items:center;gap:.6rem}
/* the global label rule is uppercase, small and muted, which is right for a
   form field's caption and wrong for a button. .btn never set these, so they
   came through. */
.switch>.btn{cursor:pointer;user-select:none;margin:0;
  text-transform:none;letter-spacing:normal;font-size:.83rem;
  font-weight:600;color:var(--cream);display:inline-flex}
/* A closed <details> still lets an absolutely positioned child paint, so
   the menu's 1px border was showing as a stray line above the button. */

.addacct .swmenu{min-width:17rem}
/* Above its own button, aligned to its own left edge. It used to open to
   the right, which was fine when Switch Account was the only button and is
   not now: the menu landed exactly on top of Add Account, so the first
   click went to the menu instead of the button. Upward because the hero
   clips its overflow and these sit near its bottom edge. */
.swmenu{display:none;position:absolute;z-index:9;bottom:calc(100% + .5rem);left:0;
  min-width:19rem;max-height:20rem;overflow:auto;
  background:var(--card);border:1px solid var(--rule);
  border-radius:12px;padding:.4rem;box-shadow:0 10px 30px rgba(36,31,24,.14)}
.swrow{display:flex;align-items:center;gap:.6rem;padding:.5rem .6rem;
  border-radius:8px;font-family:"Inter",sans-serif;font-weight:600;
  font-size:.83rem;color:var(--charcoal)}
.swrow .gpic{width:26px;height:26px;font-size:.58rem;vertical-align:middle;
  margin:0;border-width:0}
.swrow:hover{background:var(--orange-tint);color:var(--orange)}
.swrow.on{background:var(--burnt);color:var(--cream)}
.swadd{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.9rem}
.mecard{display:flex;gap:1.2rem;align-items:flex-start;flex-wrap:wrap}
.bigpic{width:76px;height:76px;border-radius:99px;object-fit:cover;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;background:var(--bone);
  color:var(--orange);font-weight:700;font-size:1.1rem}
.meinfo{flex:1 1 16rem;min-width:0}
.mename{font-family:"Cormorant Garamond",serif;font-size:1.7rem;color:var(--burnt)}
.mename a.hl{color:var(--burnt)}
.mename a.hl:hover{color:var(--rust);text-decoration:underline}
.memeta{font-size:.8rem;color:var(--muted);margin-top:.2rem}
.swgo{margin-left:auto;font-size:.72rem;font-weight:600;color:var(--rust)}
.swrow.on .swgo{color:var(--cream)}
.swadd input{flex:1 1 auto;min-width:0;font-family:"Inter",sans-serif;
  font-size:.82rem;padding:.5rem .6rem;border:1px solid var(--rule);
  border-radius:7px;background:var(--card);color:var(--charcoal)}
.swhint{font-size:.72rem;color:var(--muted);margin:.4rem .6rem .3rem}
.gsw{display:inline-block;position:relative;vertical-align:middle;
  margin-left:.6rem}
.gsw summary{list-style:none;cursor:pointer;font-family:"Inter",sans-serif;
  font-weight:600;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--brown);border:1px solid var(--rule);background:var(--card);
  border-radius:99px;padding:.3rem .8rem}
.gsw summary::-webkit-details-marker{display:none}
.gsw summary:hover{border-color:var(--orange);color:var(--orange)}
.gsw[open] summary{background:var(--burnt);border-color:var(--burnt);
  color:var(--cream)}
.gmenu{position:absolute;z-index:9;top:calc(100% + .4rem);left:0;min-width:15rem;
  background:var(--card);border:1px solid var(--rule);border-radius:10px;
  padding:.35rem;box-shadow:0 8px 24px rgba(36,31,24,.12)}
.gmenu a{display:flex;align-items:center;gap:.55rem;padding:.5rem .6rem;
  border-radius:7px;font-family:"Inter",sans-serif;font-weight:600;
  font-size:.82rem;color:var(--charcoal);white-space:nowrap}
.gmenu a:hover{background:var(--orange-tint);color:var(--orange)}
.gmenu img,.gmenu .ini{width:24px;height:24px;border-radius:99px;
  object-fit:cover;display:flex;align-items:center;justify-content:center;
  font-size:.58rem;font-weight:700;background:var(--bone);color:var(--orange)}
.achip{display:inline-flex;align-items:center;gap:.45rem;font-weight:600;
  font-size:.8rem;padding:.35rem .85rem .35rem .4rem;border-radius:99px;
  border:1px solid var(--rule);background:var(--card);color:var(--brown)}
.achip:first-child{padding-left:.85rem}
.achip img,.achip .ini{width:24px;height:24px;border-radius:99px;object-fit:cover;
  display:flex;align-items:center;justify-content:center;font-size:.58rem;
  font-weight:700;background:var(--bone);color:var(--orange)}
.achip:hover{border-color:var(--orange);color:var(--orange)}
.achip.on{background:var(--burnt);border-color:var(--burnt);color:var(--cream)}
.achip.on .ini{background:var(--orange-tint)}
.filters{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center;
  margin:0 0 1.4rem}
.rchip{font-weight:600;font-size:.78rem;padding:.42rem .9rem;border-radius:99px;
  border:1px solid var(--rule);background:var(--card);color:var(--brown);
  cursor:pointer;list-style:none}
.rchip::-webkit-details-marker{display:none}
.rchip:hover{border-color:var(--orange);color:var(--orange)}
.rchip.on{background:var(--orange);border-color:var(--orange);color:var(--cream)}
.cust{position:relative}
.cust form{display:flex;gap:.4rem;align-items:center;margin-top:.5rem;
  background:var(--card);border:1px solid var(--rule);border-radius:10px;
  padding:.6rem .7rem;position:absolute;z-index:6;white-space:nowrap}
.cust form span{font-size:.8rem;color:var(--muted)}
.cust input[type=date]{font-family:"Inter",sans-serif;font-size:.82rem;
  padding:.4rem .5rem;border:1px solid var(--rule);border-radius:7px;
  background:var(--card);color:var(--charcoal)}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem;
  margin:1.2rem 0 .3rem}
.tile{background:var(--card);border:1px solid var(--rule);border-radius:12px;
  padding:1.05rem 1.2rem}
.tile .k{font-weight:600;font-size:.68rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted)}
.tile .v{font-family:"Inter",-apple-system,sans-serif;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em;font-size:1.75rem;
  color:var(--rust);margin-top:.2rem;line-height:1.1}
.tile .tnote{font-size:.72rem;color:var(--muted);margin-top:.25rem}
.tile.orange,.tile.teal{background:var(--orange-tint);border-color:#F2D5BE}
.tile.rust,.tile.orange{background:var(--rust-tint);border-color:#E7D2C6}
.tile.rust .v,.tile.orange .v{color:var(--rust)}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem;margin-top:1.1rem}
.stats.five{grid-template-columns:repeat(5,1fr)}
@media(max-width:1180px){.stats.five{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.stats.five{grid-template-columns:repeat(2,1fr)}}
.stat{background:var(--card);border:1px solid var(--rule);border-radius:12px;
  padding:1.05rem 1.15rem}
.biolink{color:var(--rust);font-weight:600;text-decoration:none;
  border-bottom:1px solid var(--tan);white-space:nowrap}
.biolink:hover{color:var(--burnt);border-bottom-color:var(--orange)}
.bio{font-size:.9rem;line-height:1.5;color:var(--muted);margin:.5rem 0 .75rem;
  max-width:40rem}
.vtick.staff{background:var(--orange);color:var(--cream);margin-left:.3rem;
  vertical-align:1px}
.vtick{display:inline-flex;align-items:center;justify-content:center;width:15px;
  height:15px;border-radius:50%;background:var(--orange);color:#fff;font-size:.6rem;
  margin-right:.4rem;vertical-align:1px}
.pvs{display:flex;flex-wrap:wrap;gap:.45rem;margin:0 0 1rem}
.pv{background:var(--card);border:1px solid var(--rule);border-radius:9px;
  padding:.45rem .7rem;font-size:.66rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);font-weight:600;
  display:flex;flex-direction:column;gap:.1rem}
.pv b{font-family:"Inter",-apple-system,sans-serif;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em;font-size:1.05rem;text-transform:none;
  color:var(--rust)}
a.stat.go{display:block;text-decoration:none;color:inherit;transition:border-color .12s}
a.stat.go:hover{border-color:var(--orange)}
a.stat.go .note{color:var(--orange);font-weight:600}
/* Centred and bold: these four are the headline numbers on the page, so
   they read as a set rather than four left aligned paragraphs. */
.stat{text-align:center}
.stat .top{display:flex;align-items:center;justify-content:center;
  gap:.5rem;margin-bottom:.55rem}
.stat .ico{width:30px;height:30px;border-radius:8px;background:var(--orange-tint);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.stat .ico svg{width:16px;height:16px;stroke:var(--orange);stroke-width:1.7;fill:none}
.stat .k{font-weight:600;font-size:.72rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
.stat .v{font-family:"Inter",-apple-system,sans-serif;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em;font-size:1.75rem;
  color:var(--rust);line-height:1.1}
.stat .note{font-size:.73rem;color:var(--muted);margin-top:.2rem}
.stat .v .dash{color:var(--tan)}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1rem;
  align-items:start}
.card{background:var(--card);border:1px solid var(--rule);border-radius:12px;
  padding:1.3rem 1.4rem}
.card .hd{display:flex;align-items:baseline;gap:.7rem;margin-bottom:1rem}
.card .hd h2{margin:0;font-size:1.25rem}
.card .hd .s{font-size:.76rem;color:var(--muted)}
.card .hd .more{margin-left:auto;font-weight:600;font-size:.72rem;color:var(--rust)}

/* product cards */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));
  gap:.8rem}
.pcard{background:var(--card);border:1px solid var(--rule);border-radius:12px;
  overflow:hidden;display:flex;flex-direction:column}
.pcard .ph{aspect-ratio:1/1;background:var(--bone);display:block;width:100%;
  object-fit:cover}
.pcard .bd{padding:.7rem .8rem .85rem}
.pcard .tt{font-weight:600;font-size:.82rem;line-height:1.35;color:var(--burnt);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;min-height:2.2em}
.pcard .tt a{color:var(--burnt)}
.pcard .tt a:hover{color:var(--rust)}
.pcard .sh{font-size:.71rem;color:var(--muted);margin-top:.2rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcard .ft{display:flex;align-items:baseline;justify-content:space-between;
  gap:.4rem;margin-top:.55rem;padding-top:.55rem;border-top:1px solid var(--rule)}
.pcard .amt{font-family:"Inter",-apple-system,sans-serif;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em;font-size:1.1rem;color:var(--rust)}
.pcard .qty{font-size:.71rem;color:var(--muted)}
.pview{display:block;margin-top:.55rem;font-size:.71rem;font-weight:600;
  color:var(--rust)}
.pview:hover{text-decoration:underline}
.bar-row .lab a.plink{color:var(--charcoal)}
.bar-row .lab a.plink:hover{color:var(--rust);text-decoration:underline}
.rank{position:absolute;top:.5rem;left:.5rem;background:var(--burnt);color:var(--cream);
  font-weight:700;font-size:.66rem;padding:.16rem .45rem;border-radius:4px}
.pwrap{position:relative}

/* ---------- metrics ---------- */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--rule);border:1px solid var(--rule);border-radius:10px;
  overflow:hidden;margin-top:1.1rem}
.metric{background:var(--card);padding:1.25rem 1.4rem}
.metric .k{font-weight:600;font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
.metric .v{font-family:"Cormorant Garamond",serif;font-weight:700;
  font-size:2.05rem;color:var(--burnt);line-height:1.1;margin-top:.35rem}
.metric .n{font-size:.75rem;color:var(--muted);margin-top:.2rem}
.metric.accent .v{color:var(--rust)}

/* ---------- sections ---------- */
.section{margin-top:2.4rem}
.section>.hd{display:flex;align-items:baseline;justify-content:space-between;
  gap:1rem;margin-bottom:.9rem}
.section>.hd h2{margin:0}
.section>.hd .s{font-size:.8rem;color:var(--muted)}
.section>.hd a{font-weight:600;font-size:.76rem;color:var(--rust);
  margin-left:auto}
.two{display:grid;grid-template-columns:1.45fr 1fr;gap:1.6rem;align-items:start}
.panel{background:var(--card);border:1px solid var(--rule);border-radius:10px;
  padding:1.4rem 1.5rem}
.panel+.panel{margin-top:1rem}
.panel .head{display:flex;justify-content:space-between;align-items:baseline;
  gap:1rem;margin-bottom:1rem}
.panel .head h2{margin:0}
.panel .head a{font-weight:600;font-size:.74rem;color:var(--rust)}

/* ---------- lists / rows ---------- */
.listrow{display:flex;align-items:center;gap:.8rem;padding:.65rem 0;
  border-bottom:1px solid var(--rule)}
.listrow:last-child{border-bottom:0}
.listrow .ic{width:30px;height:30px;border-radius:99px;background:var(--orange-tint);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  font-weight:600;font-size:.66rem;color:var(--orange)}
.listrow .tx{flex:1 1 auto;min-width:0}
.listrow .t{font-weight:600;font-size:.85rem;color:var(--burnt);
  line-height:1.35}
.listrow .d{font-size:.74rem;color:var(--muted)}
.listrow .n{font-weight:600;font-size:.85rem;color:var(--charcoal);
  font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- bars ---------- */
.bars{display:flex;flex-direction:column;gap:.8rem}
.bar-row{display:grid;grid-template-columns:minmax(9rem,22rem) 1fr auto;gap:1rem;align-items:center}
.bar-row .lab{font-weight:600;font-size:.82rem;color:var(--charcoal);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-row .mono-lab{font-family:"IBM Plex Mono",monospace;font-size:.74rem;
  color:var(--muted)}
.bar-track{background:var(--bone);border-radius:3px;height:12px;overflow:hidden}
.bar-fill{height:100%;background:var(--orange);border-radius:0 3px 3px 0;min-width:3px}
.bar-row .val{font-weight:600;font-size:.83rem;color:var(--charcoal);
  font-variant-numeric:tabular-nums}

/* ---------- accounts ---------- */
.acct{display:flex;align-items:center;gap:.85rem;padding:.8rem 0;
  border-bottom:1px solid var(--rule);min-width:0;flex-wrap:wrap}
.acct>div:last-child{margin-left:auto}
.acct:last-child{border-bottom:0}
.avatar,.side-acct .av,.listrow .ic{overflow:hidden;border-radius:50%;
  flex:0 0 auto}
.avatar img,.side-acct .av img,.listrow .ic img{width:100%;height:100%;
  border-radius:50%;object-fit:cover;object-position:center;display:block;
  aspect-ratio:1/1}
.avatar.pic,.side-acct .av.pic,.listrow .ic.pic{padding:0;background:var(--bone)}
.sgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:.8rem}
.scard{background:var(--card);border:1px solid var(--rule);border-radius:12px;
  padding:.85rem 1rem .95rem}
.stop{display:flex;align-items:center;gap:.45rem}
.stop svg{width:15px;height:15px;flex:0 0 auto;stroke:var(--orange);
  stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.stop .sname{font-weight:700;font-size:.66rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted);line-height:1}
.sname{font-weight:600;font-size:.7rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted)}
.samt{font-family:"Inter",-apple-system,sans-serif;font-weight:700;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;font-size:1.5rem;
  color:var(--rust);line-height:1.1;margin:.35rem 0 .45rem}
.sbar{height:6px;border-radius:99px;background:var(--bone);overflow:hidden}
.sbar span{display:block;height:100%;background:var(--orange);border-radius:99px}
.ssub{font-size:.72rem;color:var(--muted);margin-top:.4rem;font-weight:500}
.sblurb{font-size:.73rem;color:var(--muted);margin-top:.1rem}
.vrow{display:flex;align-items:center;gap:.85rem;padding:.7rem 0;
  border-bottom:1px solid var(--rule)}
.vrow:last-child{border-bottom:0}
.lrow{display:flex;align-items:center;gap:1rem;padding:.85rem 0;
  border-bottom:1px solid var(--rule)}
.lrow:last-child{border-bottom:0}
.lrank{flex:0 0 auto;width:26px;height:26px;border-radius:99px;
  background:var(--orange-tint);color:var(--orange);display:flex;
  align-items:center;justify-content:center;font-weight:700;font-size:.7rem}
.ltx{flex:1 1 auto;min-width:0}
.lwhen{font-weight:600;font-size:.86rem;color:var(--burnt)}
.lprod{font-size:.75rem;color:var(--muted);margin:.1rem 0 .4rem}
.lbar{height:6px;border-radius:99px;background:var(--bone);overflow:hidden}
.lbar span{display:block;height:100%;background:var(--rust);border-radius:99px}
.lnums{text-align:right;flex:0 0 auto}
.lmoney{font-family:"Inter",-apple-system,sans-serif;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em;font-size:1.15rem;
  color:var(--rust);line-height:1.15}
.lsub{font-size:.71rem;color:var(--muted)}
.vstrip{display:flex;gap:.85rem;overflow-x:auto;padding:.2rem .2rem 1rem;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.vstrip::-webkit-scrollbar{height:8px}
.vstrip::-webkit-scrollbar-thumb{background:var(--tan);border-radius:99px}
.vstrip::-webkit-scrollbar-track{background:transparent}
/* Three vertical cards across, so the videos are big enough to actually
   see. Everything about a video lives under its own picture rather than
   beside it, which is what made the board read as a jumble. */
.vgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem}
@media (max-width:820px){.vgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.vgrid{grid-template-columns:1fr}}
.vcard{display:flex;flex-direction:column;min-width:0;
  text-decoration:none;padding:.6rem;border-radius:14px;
  background:var(--card);border:1px solid var(--rule)}
.vcard:hover{border-color:var(--rust)}
.vcard.grid{flex:none;width:auto}
.vcard.grid .vshot{width:100%;height:auto;aspect-ratio:3/4}
.vshot{position:relative;width:100%;aspect-ratio:9/16;border-radius:10px;
  overflow:hidden;background:var(--bone);border:1px solid var(--rule)}
.vshot img{width:100%;height:100%;object-fit:cover;display:block}
/* A broken image used to take the whole card down with it. */
.vshot{min-height:9rem}
.vcard:hover .vshot{border-color:var(--rust)}
.noimg{width:100%;height:100%;display:flex;align-items:center;
  justify-content:center;font-family:"Inter",sans-serif;font-weight:600;
  font-size:.68rem;letter-spacing:.1em;color:var(--muted)}
.vctag{position:absolute;top:.45rem;left:.45rem;background:var(--rust);
  color:#fff;font-weight:700;font-size:.58rem;letter-spacing:.09em;
  padding:.16rem .4rem;border-radius:4px}
.vmoney{position:absolute;left:0;right:0;bottom:0;padding:1.6rem .6rem .5rem;
  background:linear-gradient(to top,rgba(20,18,14,.86),transparent);
  color:#fff;font-family:"Inter",-apple-system,sans-serif;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em;font-size:1.05rem}
.vmeta{padding:.5rem .1rem 0}
.vcard .vtx{padding:.1rem .15rem 0}
.vcard .vsub{font-size:.7rem;color:var(--muted);margin-top:.2rem}
.vcard .mvrow{margin-top:.35rem}
.vname{font-weight:600;font-size:.84rem;color:var(--burnt);line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}
.vcard:hover .vname{color:var(--rust)}
.vsold{font-size:.71rem;color:var(--muted);margin-top:.15rem}
.vlink{display:block;flex:0 0 auto}
.vlink:hover .vthumb{border-color:var(--rust)}
.vthumb{width:44px;height:58px;border-radius:7px;object-fit:cover;flex:0 0 auto;
  background:var(--bone);display:block;border:1px solid var(--rule)}
.vtx{flex:1 1 auto;min-width:0}
.vcap{font-weight:600;font-size:.86rem;line-height:1.35;color:var(--burnt);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vcap a{color:var(--charcoal)}
.vcap a:hover{color:var(--rust);text-decoration:underline}
.vtag{font-size:.6rem;font-weight:700;letter-spacing:.09em;padding:.1rem .38rem;
  border-radius:4px;background:var(--rust-tint);color:var(--rust);
  vertical-align:middle;margin-left:.25rem}
.vsub{font-size:.73rem;color:var(--muted);margin-top:.25rem}
.vamt{font-weight:600;font-size:.88rem;color:var(--burnt);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.thumb{width:46px;height:46px;border-radius:6px;object-fit:cover;flex:0 0 auto;
  background:var(--bone);display:block;border:1px solid var(--rule)}
.pcell{display:flex;align-items:center;gap:.8rem}
.pinfo{min-width:0}
.pname{font-weight:600;font-size:.84rem;color:var(--burnt);line-height:1.35}
.pname a{color:var(--burnt)}
.pname a:hover{color:var(--rust);text-decoration:underline}
.pshop{font-size:.74rem;color:var(--muted);margin-top:.15rem}
.avatar{flex:0 0 auto;width:46px;height:46px;border-radius:99px;display:flex;
  align-items:center;justify-content:center;font-weight:600;font-size:.85rem}
.avatar.on{background:var(--orange);color:var(--cream)}
.avatar.off{background:var(--bone);color:var(--muted)}
.acct .who2,.acct .who{flex:1 1 12rem;min-width:0}
.acct .n{font-weight:600;font-size:.95rem;color:var(--burnt)}
.acct .n a.hl{color:var(--burnt)}
.acct .n a.hl:hover{color:var(--rust);text-decoration:underline}
.acct .s{font-size:.73rem;color:var(--muted)}
.badge{font-weight:600;font-size:.66rem;letter-spacing:.05em;padding:.26rem .66rem;
  border-radius:99px;white-space:nowrap}
.badge.on{background:var(--orange-tint);color:var(--orange)}
.badge.off{background:var(--bone);color:var(--muted)}
.badge.money{background:var(--orange);color:var(--cream)}

/* ---------- buttons ---------- */
.btn{font-family:"Inter",sans-serif;font-weight:600;font-size:.83rem;
  display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1.4rem;
  border-radius:7px;border:1px solid var(--orange);background:var(--orange);
  color:var(--cream);cursor:pointer}
.btn:hover{background:var(--burnt);border-color:var(--burnt);color:var(--cream)}
.btn.ghost{background:transparent;color:var(--burnt);border-color:var(--tan)}
.btn.ghost:hover{background:var(--orange-tint);color:var(--burnt);border-color:var(--orange)}
.btn.rust{background:var(--rust);border-color:var(--rust);color:var(--cream)}
.btn.rust:hover{background:#8C4429;border-color:#8C4429}
.btn.sm{padding:.34rem .82rem;font-size:.74rem}
.btn.block{width:100%;justify-content:center}
.row{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center;margin-top:1.2rem}

/* ---------- tables ---------- */
table{border-collapse:collapse;width:100%;font-size:.85rem}
th,td{border-bottom:1px solid var(--rule);padding:.66rem .5rem;text-align:left}
th{font-weight:600;font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted)}
td.n{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;
  color:var(--charcoal)}
td.brandname{font-family:"Cormorant Garamond",Garamond,serif;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--orange)}
h1 .vada,h2 .brandname{letter-spacing:.11em}
.mono{font-family:"IBM Plex Mono",monospace;font-size:.75rem;color:var(--muted)}
tr:last-child td{border-bottom:0}

/* ---------- misc ---------- */
.sub{font-weight:600;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin:0 0 1.7rem}
.note{background:var(--orange-tint);border:1px solid #F2D5BE;border-radius:8px;
  padding:1.05rem 1.3rem;margin:1.2rem 0}
.note.bad{background:var(--rust-tint);border-color:#E7D2C6}
.note p{margin:.3rem 0}
.note p:first-child{margin-top:0}
.note p:last-child{margin-bottom:0}
.log{font-family:"IBM Plex Mono",monospace;font-size:.78rem;background:var(--bone);
  border:1px solid var(--rule);border-radius:8px;padding:1.05rem 1.3rem;
  white-space:pre-wrap;line-height:1.7}
label{display:block;margin:1.1rem 0 .4rem;font-weight:600;font-size:.72rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
select,.addbox input,textarea{font-family:"Inter",sans-serif;font-size:.88rem;
  padding:.6rem .8rem;border-radius:7px;border:1px solid var(--rule);
  background:var(--card);color:var(--charcoal)}
.addbox{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;
  margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid var(--rule)}
.hint{font-size:.78rem;color:var(--muted);margin:.6rem 0 0}
.addbox input{min-width:13rem;flex:0 1 20rem}
.chips{display:flex;gap:.45rem;flex-wrap:wrap;margin-top:.9rem}
.chip{font-weight:600;font-size:.78rem;padding:.35rem .85rem;border-radius:99px;
  border:1px solid var(--rule);background:var(--card);color:var(--charcoal)}
.chip:hover{border-color:var(--orange);color:var(--orange);background:var(--orange-tint)}
.steps{counter-reset:s;list-style:none;padding:0;margin:.3rem 0 0}
.steps li{counter-increment:s;position:relative;padding-left:2.4rem;margin:0 0 1rem}
.steps li:last-child{margin-bottom:0}
.steps li::before{content:counter(s);position:absolute;left:0;top:-.1rem;
  width:1.7rem;height:1.7rem;border-radius:99px;background:var(--orange-tint);
  color:var(--orange);font-family:"Cormorant Garamond",serif;font-weight:700;
  font-size:1rem;display:flex;align-items:center;justify-content:center}
.empty{text-align:center;padding:2.3rem 1rem;color:var(--muted);
  font-family:"Cormorant Garamond",serif;font-style:italic;font-size:1.05rem}
.soonbox{border:1px dashed var(--tan);border-radius:8px;padding:1rem 1.2rem;
  margin-top:1rem;background:var(--bone)}
.soonbox .t{font-family:"IBM Plex Mono",monospace;font-size:.72rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--rust);
  margin-bottom:.4rem}
.pull{font-family:"Cormorant Garamond",serif;font-size:1.25rem;font-style:italic;
  color:var(--charcoal);border-left:2px solid var(--tan);padding-left:1.2rem;
  margin:1.5rem 0}

@media(max-width:1180px){.metrics,.stats,.tiles{grid-template-columns:repeat(2,1fr)}
  .grid2{grid-template-columns:1fr}
  .two{grid-template-columns:1fr}
  .hero{min-height:250px}
  .hero .txt{max-width:50%}
  .artword{right:1.6rem}}
/* ---- Phones: the sidebar folds into a menu button ------------------
   Thirteen links wrapped across the top of a phone is not a sidebar, it is
   a wall. The button sits beside the logo and the same list drops down
   underneath it, one row per link, the way it reads on a laptop. */
.markrow{display:flex;align-items:center;justify-content:space-between}
.burger{display:none;background:none;border:0;cursor:pointer;
  padding:1.1rem 1.1rem;margin:0;gap:5px;flex-direction:column}
.burger i{display:block;width:22px;height:2px;border-radius:2px;
  background:var(--burnt);transition:transform .18s, opacity .18s}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:860px){
  .shell{flex-direction:column}
  aside{flex:none;height:auto;position:static;border-right:0;
    border-bottom:1px solid var(--rule)}
  .mark{padding:1.2rem 1rem .9rem}
  .burger{display:flex}
  .nav{display:none;flex-direction:column;gap:.15rem;padding:.3rem 1rem 1rem}
  .nav.open{display:flex}
  .navlink{font-size:.95rem;padding:.72rem .8rem;border-radius:9px}
  .navlink svg{display:none}
  .navsub{display:none}
  /* The account count and the copyright are noise on a phone, but the way
     out is not. Keep the foot, show only that, and only while the menu is
     open so it is not sitting under the logo on every page. */
  .sidefoot{display:none;padding:0 1rem 1rem}
  .nav.open + .sidefoot{display:block}
  .sidefoot .dot,.sidefoot .legal{display:none}
  .sideout{margin:0;font-size:.95rem;padding:.72rem .8rem;border-radius:9px;
    color:var(--brown)}
  .nosearch{flex:1}
.leaverow{margin-top:1rem;padding-top:.9rem;
  border-top:1px solid var(--rule)}
.leaverow a{font-weight:600}
/* Three lines reading as one block, set down off the heading rather than
   crowding it. */
.askblock{margin:1.35rem 0 .5rem}
.askblock .sub{margin:0 0 .35rem;font-weight:700;color:var(--brown)}
.askblock .sub:last-child{margin:0}
.legal{display:block;margin-top:.5rem;font-size:.72rem;letter-spacing:.04em;
  color:var(--muted)}
.topbar{padding:.85rem 1.1rem}
  .who .nm,.who .rl{display:none}
  .pad{padding:1.2rem 1.1rem 3rem}
  .hero{padding:1.8rem 1.5rem;min-height:0}
  .artword{display:none}
  .swmenu{left:0;bottom:calc(100% + .5rem);top:auto}
  .hero h1{font-size:1.7rem;white-space:normal}
  .metrics,.stats,.tiles{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}
}

/* ---- Help ----------------------------------------------------------- */
.rform{display:flex;flex-direction:column;gap:.85rem;margin:1rem 0 1.4rem;
  max-width:46rem}
.rform textarea{padding:.8rem .9rem;border-radius:12px;font:inherit;
  line-height:1.55;color:inherit;background:var(--card);
  border:1px solid var(--rule);resize:vertical}
.rform textarea:focus{outline:2px solid var(--burnt);outline-offset:1px}
.rlist{display:flex;flex-direction:column;gap:.7rem;margin-top:.9rem;
  max-width:46rem}
.rrow{padding:.85rem 1rem;border-radius:12px;background:var(--card);
  border:1px solid var(--rule)}
.rhead{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;
  margin-bottom:.35rem;font-size:.85rem}
.rnew{padding:.08rem .45rem;border-radius:99px;font-size:.7rem;
  letter-spacing:.06em;text-transform:uppercase;font-weight:700;
  background:var(--orange);color:var(--surface)}
.rrow p{margin:0;line-height:1.6;white-space:pre-wrap}
.rdone{margin-top:.5rem !important;font-size:.82rem}

/* ---- Are you sure --------------------------------------------------- */
.askwrap{position:fixed;inset:0;z-index:40;display:flex;align-items:center;
  justify-content:center;padding:1.2rem;background:rgba(40,28,20,.42)}
.askwrap[hidden]{display:none}
.askbox{width:min(26rem,100%);padding:1.5rem 1.6rem;border-radius:16px;
  background:var(--surface);border:1px solid var(--rule);
  box-shadow:0 18px 50px rgba(40,28,20,.22)}
.askq{margin:0 0 1.2rem;font-size:1.02rem;line-height:1.5;
  color:var(--charcoal)}
.askrow{display:flex;gap:.6rem}
.askrow .btn{flex:1;justify-content:center;text-align:center}

/* ---- Up or down ------------------------------------------------------ */
.verdict{margin:0 0 .7rem;font-family:"Inter",sans-serif;font-weight:800;
  font-size:1rem;letter-spacing:.01em}
.verdict span{display:block;margin-top:.15rem;font-weight:500;font-size:.76rem;
  letter-spacing:normal;color:var(--muted)}
.verdict.vup{color:#2F6B37}
.verdict.vdn{color:var(--rust)}
.verdict.vhold{color:var(--brown)}

/* ---- $AD ------------------------------------------------------------- */
/* On the picture, where you see it before you read anything. */
.addot{position:absolute;left:.5rem;bottom:.5rem;z-index:3;
  display:flex;align-items:center;justify-content:center;
  width:2.9rem;height:2.9rem;border-radius:99px;
  background:var(--orange);color:#fff;font-family:"Inter",sans-serif;
  font-weight:800;font-size:1.12rem;letter-spacing:.01em;line-height:1;
  box-shadow:0 2px 10px rgba(40,28,20,.35)}
.addot i{font-style:normal;font-size:.76rem;font-weight:700;opacity:.9;
  margin-right:1px;position:relative;top:-1px}
.cpblock{text-align:right}
.cline{font-weight:700;color:var(--burnt);margin-bottom:.5rem}
.cfree{margin-top:.2rem;font-family:"Inter",sans-serif;font-weight:800;
  font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--rust)}

/* ---- One product ----------------------------------------------------- */
.pdhead{display:flex;gap:1.2rem;align-items:flex-start;flex-wrap:wrap;
  margin-bottom:1.6rem}
.pdpic{width:9rem;height:9rem;flex:0 0 auto;border-radius:14px;
  object-fit:cover;background:var(--bone);border:1px solid var(--rule)}
.pdtx{flex:1;min-width:14rem}
.pdbrand{display:inline-block;font-size:.9rem;font-weight:800;
  color:var(--burnt);text-decoration:underline;text-underline-offset:2px;
  text-decoration-thickness:1px;margin-bottom:.15rem}
a.pdbrand:hover{color:var(--rust)}
.pdname{font-size:1.6rem;line-height:1.15;margin:0 0 .8rem}
.pdrow{display:flex;gap:.6rem;flex-wrap:wrap}
.pdgap{margin:0 0 1rem}
.pdpic.rnd{border-radius:50%}
.pdpic.ini{display:flex;align-items:center;justify-content:center;
  font-family:"Inter",sans-serif;font-weight:800;font-size:2.6rem;
  color:var(--burnt);background:var(--bone)}
.chandle.big{font-size:1rem;margin:-.4rem 0 .9rem;color:var(--muted)}
.cstat{display:inline-block;font-family:"Inter",sans-serif;font-weight:800;
  font-size:.74rem;letter-spacing:.06em;color:var(--cream);
  background:var(--orange);border-radius:999px;padding:.2rem .6rem;
  margin-bottom:.5rem}
/* ---- A member, opened by an admin ---------------------------------- */
.mhead{display:flex;flex-wrap:wrap;align-items:flex-start;
  justify-content:space-between;gap:1rem;margin:0 0 1.2rem}
.mrow{margin-top:.5rem;display:flex;flex-wrap:wrap;gap:.6rem;
  align-items:center;font-size:.86rem;color:var(--brown)}
.dirname{font-weight:700;color:var(--brown)}
.dirname:hover{color:var(--rust);text-decoration:underline}
/* One card per connected account, with everything the Drive already knows
   about it: where they stand, what they sell, and what their page says. */
.mcard{border:1px solid var(--rule);border-radius:11px;background:var(--card);
  padding:.7rem .9rem;margin:0 0 .55rem}
.mcard:last-child{margin:0}
.mhead{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.mfoll{font-size:.74rem;color:var(--muted)}
.mbio{margin:.45rem 0 0;font-size:.85rem;line-height:1.5;color:var(--brown)}
.mlink{display:inline-block;margin-top:.35rem;font-size:.8rem;
  color:var(--rust);text-decoration:underline;word-break:break-all}
.mhandle{font-weight:700;color:var(--rust)}
.mhandle:hover{text-decoration:underline}
.mtag{font-family:"Inter",sans-serif;font-weight:800;font-size:.66rem;
  letter-spacing:.07em;color:var(--cream);background:var(--burnt);
  border-radius:5px;padding:.18rem .42rem}
.cverts{display:flex;flex-wrap:wrap;gap:.5rem}
.cvert{display:inline-flex;align-items:center;gap:.45rem;font-size:.82rem;
  padding:.4rem .8rem;border:1px solid var(--rule);border-radius:999px;
  background:var(--card);color:var(--brown)}
.cvert i{font-style:normal;font-weight:700;font-size:.72rem;
  color:var(--muted)}
.csolds{display:flex;flex-direction:column;gap:.45rem;max-width:46rem}
.csold{font-size:.85rem;color:var(--brown);padding:.55rem .8rem;
  border:1px solid var(--rule);border-radius:9px;background:var(--card)}
.csold:hover{border-color:#EBC9AC;color:var(--rust)}
.pdgap .gaprow span{font-size:.72rem;padding:.25rem .6rem}
.pstars{margin-left:auto;font-size:.76rem;font-weight:700;color:var(--rust)}

/* ---- Helpful links --------------------------------------------------- */
.lrow{display:grid;grid-template-columns:2.6rem minmax(0,1fr);
  align-items:stretch;gap:.4rem;touch-action:pan-y}
.lrow.solo{grid-template-columns:minmax(0,1fr)}
.postlist.draggable .lrow{touch-action:none}
/* A hand sized target. At 18 by 31 this was a dot you had to aim at, and
   missing it grabbed the card instead and looked like nothing happened. */
.lgrip{display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:4px;border-radius:10px;cursor:grab;
  background:transparent;border:1px solid transparent;
  touch-action:none;user-select:none;-webkit-user-select:none}
.lgrip i{display:block;width:16px;height:2px;border-radius:2px;
  background:var(--muted)}
.lgrip:hover{background:var(--bone);border-color:var(--rule)}
.lgrip:hover i{background:var(--burnt)}
.lgrip:active{cursor:grabbing;background:var(--orange-tint)}
.lrow.lifted{opacity:.6}
.lrow.lifted .lcard{border-color:var(--orange);
  box-shadow:0 6px 18px rgba(0,0,0,.12)}
.postlist.dragging{cursor:grabbing;user-select:none}
.postlist.saved .lcard{border-color:#CFE0C4}
.lcard{display:grid;grid-template-columns:minmax(7rem,12rem) minmax(0,1fr);
  align-items:stretch;border:1px solid var(--rule);border-radius:13px;
  overflow:hidden;background:var(--card)}
.lcard:hover{border-color:#EBC9AC}
.lhead{display:flex;align-items:center;justify-content:center;
  text-align:center;padding:1rem;background:var(--bone);
  border-right:1px solid var(--rule)}
/* One size, one weight, one case, whatever she types into the box. */
.lname,a.lname,span.lname{font-family:"Inter",sans-serif;font-weight:800;
  font-size:1.1rem;line-height:1.25;letter-spacing:.02em;
  text-transform:uppercase;color:var(--burnt);overflow-wrap:anywhere}
a.lname{text-decoration:none;transition:color .12s}
a.lname:hover{color:var(--orange);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:2px}
.lbody{display:flex;flex-direction:column;justify-content:center;gap:.5rem;
  padding:.95rem 1.1rem;font-size:.86rem;line-height:1.5;color:var(--brown)}
.ltools{display:flex;align-items:center;gap:.85rem;align-self:flex-end;
  font-size:.74rem}
.ltools a{color:var(--muted)}
.ltools a:hover{color:var(--rust)}
.lmove{display:flex;flex-direction:column;line-height:.75;font-size:.72rem}
.lmove a{color:var(--muted);text-decoration:none}
.lmove a:hover{color:var(--rust)}
.lmove .off{color:var(--rule)}
@media (max-width:620px){
  .lcard{grid-template-columns:1fr}
  .lrow{grid-template-columns:2.4rem minmax(0,1fr);gap:.35rem}
  .lhead{border-right:0;border-bottom:1px solid var(--rule)}
}

/* ---- A resource, which is really its file ---------------------------- */
.resfile{display:flex;align-items:center;gap:.7rem;margin-top:.7rem;
  padding:.65rem .8rem;border-radius:11px;background:var(--bone);
  border:1px solid var(--rule)}
.resfile:hover{border-color:#EBC9AC;background:var(--orange-tint)}
.rext{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  min-width:2.9rem;height:2.1rem;border-radius:7px;background:var(--burnt);
  color:var(--surface);font-family:"Inter",sans-serif;font-weight:800;
  font-size:.62rem;letter-spacing:.06em}
.rname{flex:1;min-width:0;font-size:.84rem;color:var(--brown);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rget{flex:0 0 auto;font-size:.66rem;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--rust)}

/* ---- A trending video, as drawn ------------------------------------- */
/* Two to a row so the videos are big enough to watch, which is the point:
   they play here, so there is no second page to send anybody to. */
.vgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
@media (max-width:900px){.vgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.vgrid{grid-template-columns:1fr}}
.vcard{display:flex;flex-direction:column;min-width:0;padding:.6rem;
  border-radius:14px;background:var(--card);border:1px solid var(--rule)}
.vcard:hover{border-color:#EBC9AC}

.vshot{position:relative;width:100%;aspect-ratio:9/16;border-radius:12px;
  overflow:hidden;background:var(--bone);border:1px solid var(--rule);
  cursor:pointer}
.vshot img{width:100%;height:100%;object-fit:cover;display:block}
/* Laid out at its own width then scaled, so it fills the card instead of
   being cropped by it. */
.vshot iframe{position:absolute;top:0;left:0;border:0;z-index:5;
  background:#000}
.vshot.playing img,.vshot.playing .vplay,.vshot.playing .ebox,
.vshot.playing .addot,.vshot.playing .vctag{display:none}
/* Shown once it is playing. Transparent so it sits on the video rather than
   over it, and it puts the picture back. */

/* rank, top left */
.vctag{position:absolute;top:.5rem;left:.5rem;z-index:3;
  display:flex;align-items:center;justify-content:center;
  min-width:1.85rem;height:1.85rem;padding:0 .35rem;
  background:var(--orange);color:#fff;font-family:"Inter",sans-serif;
  font-weight:800;font-size:1.05rem;border-radius:8px;line-height:1;
  box-shadow:0 2px 7px rgba(40,28,20,.3)}

/* the play mark, middle */
/* Centred by its own box rather than by nudging a triangle, so it stays put
   whatever size the card is. */
.vplay{position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:4;
  width:3.1rem;height:3.1rem;border-radius:99px;pointer-events:none;
  background:rgba(255,255,255,.18);border:1.5px solid rgba(255,255,255,.5);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  transition:background .12s}
.vplay::after{content:"";position:absolute;left:54%;top:50%;
  translate:-50% -50%;width:0;height:0;
  border-left:17px solid rgba(255,255,255,.75);
  border-top:11px solid transparent;border-bottom:11px solid transparent}
.vshot:hover .vplay{background:rgba(255,255,255,.3)}

/* the four counts, bottom right, two by two */
.ebox{position:absolute;right:.5rem;bottom:.5rem;z-index:3;
  display:grid;grid-template-columns:auto auto;gap:1px;
  border:1px solid rgba(255,255,255,.65);border-radius:9px;overflow:hidden;
  background:rgba(255,255,255,.25)}
.ebox span{display:flex;align-items:center;gap:.26rem;color:#fff;
  padding:.3rem .5rem;background:rgba(20,14,10,.42);
  font-family:"Inter",sans-serif;font-weight:700;font-size:.76rem;
  line-height:1;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.ebox i{display:flex;flex:0 0 auto}
.ebox i svg{width:.92rem;height:.92rem;fill:none;stroke:currentColor;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin="round";opacity:.9}
.ebox i svg path,.ebox i svg circle{fill:none}

/* under the picture */
.vcard .vtx{padding:.6rem .2rem 0}
.vwho{display:flex;justify-content:space-between;align-items:baseline;
  gap:.4rem;font-size:.74rem;font-weight:600;color:var(--brown);min-width:0}
.vwho > :first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;color:var(--burnt);font-weight:800}
/* Underlines on the way past, so it is obvious it goes somewhere. */
.vwho a:first-child:hover{color:var(--rust);text-decoration:underline;
  text-underline-offset:2px;text-decoration-thickness:1px}
.vwho .dim{font-weight:500;font-size:.74rem;white-space:nowrap}
/* The money and the shape of it belong together, in one box. */
.vmoneycard{display:flex;align-items:center;justify-content:space-between;
  gap:.5rem;margin-top:.5rem;padding:.55rem .7rem;border-radius:11px;
  background:var(--bone);border:1px solid var(--rule);min-width:0}
.vgmv{font-family:"Inter",sans-serif;font-weight:800;font-size:1.12rem;
  color:var(--burnt);line-height:1.05;white-space:nowrap}
.vgmv span{display:block;font-size:.54rem;font-weight:700;letter-spacing:.09em;
  color:var(--muted);margin-top:.12rem}
.vtrend{display:flex;align-items:center;gap:.4rem;min-width:0}
.mspark{flex:0 0 auto;width:74px;height:32px;overflow:visible}
.mspark .fill{fill:currentColor;opacity:.16;stroke:none}

.mspark.up{color:#2F6B37}
.mspark.dn{color:var(--rust)}
.mspark.flat{color:var(--brown)}
.vtl{font-size:.54rem;line-height:1.25;color:var(--muted);text-align:right;
  letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}
.vtl b{color:var(--burnt)}
.vposted{margin-top:.4rem;font-size:.7rem;font-weight:600;
  color:var(--brown)}
.vposted.open{color:var(--orange)}
/* The picture fills the height of the strip as a rounded square, with the
   brand over the product name beside it, and the button underneath. */
.vprod{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.65rem;
  align-items:stretch;margin-top:.7rem;padding-top:.7rem;
  border-top:1px solid var(--rule)}
.vplink{display:block;align-self:stretch}
.vpbits{min-width:0;display:flex;flex-direction:column;
  justify-content:center}
.vbrand{display:block;font-size:.88rem;font-weight:800;color:var(--burnt);
  line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  text-decoration:underline;text-underline-offset:2px;
  text-decoration-thickness:1px}
a.vbrand:hover{color:var(--rust)}
.vpph{display:block;width:3.4rem;height:3.4rem;border-radius:11px;
  object-fit:cover;background:var(--bone);border:1px solid var(--rule)}
.vplink:hover .vpph{border-color:var(--rust)}
.vpn{display:block;min-width:0;font-size:.74rem;color:var(--brown);line-height:1.3;color:var(--brown);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}
a.vpn:hover{color:var(--rust);text-decoration:underline}

/* ---- Room to film ---------------------------------------------------- */
.gaprow{display:flex;flex-wrap:wrap;gap:.35rem;margin:.45rem 0 0}
.gaprow span{font-size:.64rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;padding:.12rem .4rem;border-radius:5px;
  background:var(--bone);color:var(--muted);white-space:nowrap}
/* Three or fewer videos on the board is the opening worth pointing at. */
.gvid.open{background:var(--orange-tint);color:var(--orange)}
.gup{background:#E3F0E4 !important;color:#2F6B37 !important}
.gdn{background:#F6E7DC !important;color:var(--rust) !important}

/* ---- Member directory ----------------------------------------------- */
/* A line each inside a box that scrolls, with a search over it. Cards were
   honest about every member and useless at fifty of them: the page just got
   longer until nobody reached the end. */
.dirbox{max-width:46rem;border:1px solid var(--rule);border-radius:12px;
  background:var(--card);overflow:hidden;margin:0 0 1rem}
.dirfind{display:flex;align-items:center;gap:.7rem;padding:.6rem .8rem;
  border-bottom:1px solid var(--rule);background:var(--bone)}
.dirfind input{flex:1;min-width:0;border:1px solid var(--rule);
  border-radius:8px;padding:.45rem .7rem;font:inherit;font-size:.86rem;
  background:var(--card);color:inherit}
.dirfind input:focus{outline:2px solid var(--burnt);outline-offset:1px}
.dircount{font-size:.76rem;color:var(--muted);white-space:nowrap}
.dirscroll{max-height:58vh;overflow-y:auto}
.dirrow{display:flex;align-items:center;gap:.6rem;padding:.5rem .8rem;
  border-bottom:1px solid var(--rule);font-size:.86rem}
.dirrow:last-of-type{border-bottom:0}
.dirrow:hover{background:var(--bone)}
.dirwho{font-weight:700;color:var(--burnt);white-space:nowrap}
.dirwho .dirname{color:inherit}
.dirtags{display:flex;gap:.3rem;flex-wrap:wrap}
.dirtt{font-size:.76rem;font-weight:700;color:var(--rust);
  border:1px solid var(--tan);border-radius:99px;padding:.05rem .5rem;
  white-space:nowrap}
.dirtt:hover{border-color:var(--orange);background:var(--orange-tint)}
/* The address takes whatever is left and gives it back when the window
   narrows, so the name, the handle and the controls never get squeezed. */
.dirmail{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;font-size:.8rem;color:var(--muted)}
.dirmeta{font-size:.74rem;color:var(--muted);white-space:nowrap}
.dirgo{white-space:nowrap}
.dirgo .rmbtn{font-size:.74rem;padding:.2rem .5rem}
.dirnone{display:none;padding:1.1rem .9rem;color:var(--muted);
  font-size:.86rem}
@media(max-width:760px){
  /* Name and role on the first line, everything known about them on the
     second. Paid or Added used to be hidden here, which meant the one
     question the row exists to answer could not be answered on the phone
     it gets asked on. */
  .dirrow{flex-wrap:wrap;gap:.3rem .5rem;padding:.7rem .8rem;
    align-items:baseline}
  .dirwho{flex:1 1 auto;min-width:0}
  .rolecell{flex:0 0 auto;order:2}
  .dirtags{flex:1 0 100%;order:3}
  .dirmail{flex:1 0 100%;order:4;font-size:.78rem}
  .dirmeta{flex:1 0 100%;order:5;display:block;font-size:.75rem}
  /* Removing somebody is not a thing to put under a thumb beside their
     name. It goes last, quietly, and still asks before it does it. */
  .dirgo{flex:0 0 auto;order:6;margin-left:auto}
  .dirgo .rmbtn{font-size:.72rem;padding:.25rem .55rem}
}
.dirtable{width:100%;max-width:56rem;border-collapse:collapse;
  table-layout:auto;margin:1.3rem 0 1.6rem;font-size:.9rem}
.dirtable td:nth-child(3){max-width:15rem;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.dirtable th{text-align:left;font-size:.68rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);font-weight:700;
  padding:0 .9rem .5rem}
.dirtable td{padding:.75rem .7rem;border-top:1px solid var(--rule);
  vertical-align:middle}
.dirtable th{padding-left:.7rem;padding-right:.7rem}
.dirtable tbody tr:hover{background:var(--card)}
.dirtable .right{text-align:right;white-space:nowrap}
.dirtable .dim{font-size:.84rem}
/* A named button, not a cross. Removing somebody should read like a
   decision, because it is one. */
/* The link is the page. It sits in one row with its own button and
   wraps rather than scrolls, because a link you cannot see all of is
   a link you do not trust. */
/* The one control in the Drive that spends money every time it is
   used, so it says what it does and sits beside Send. */
.alsomail{display:inline-flex;align-items:center;gap:.4rem;
  font-size:.8rem;color:var(--muted);cursor:pointer;user-select:none}
.alsomail input{accent-color:var(--burnt);width:1rem;height:1rem;
  margin:0}
.payrow{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  margin:0;padding:.85rem 1rem;border-bottom:1px solid var(--rule)}
.payrow:last-child{border-bottom:0}
.paywho{display:flex;flex-direction:column;flex:1 1 11rem;min-width:0}
.paymail{font-size:.76rem;color:var(--muted);overflow:hidden;
  text-overflow:ellipsis}
.paysum{display:flex;flex-direction:column;flex:0 1 auto;text-align:right;
  margin-left:auto}
.paysum b{font-size:1.05rem;color:var(--burnt)}
.payfor{font-size:.76rem;color:var(--muted)}
.payrow .btn{flex:0 0 auto}
.payrow .xdrop{flex:0 0 auto;margin-left:.1rem}
/* One back control for the whole app. Installed on a homescreen there
   is no browser back button, so without this a member who taps into a
   product or a thread is stuck with the burger menu. */
/* The middle of the bar. Hidden until the script has a real number in
   it, so nobody ever sees an empty frame or a zero. */
.cdown{display:flex;flex-direction:column;align-items:center;gap:.1rem;
  flex:0 0 auto;margin-left:auto;pointer-events:none;white-space:nowrap}
.cdlab{font-family:"Inter",sans-serif;font-size:.6rem;
  letter-spacing:.16em;color:var(--muted)}
.cdnum{font-family:"Inter",sans-serif;font-size:.68rem;
  letter-spacing:.09em;color:var(--muted)}
.cdnum b{font-family:"Fraunces",Georgia,serif;font-size:.95rem;
  font-weight:600;color:var(--burnt);letter-spacing:0}
/* No room for it beside a full width search box on a phone. */
@media(max-width:899px){.cdown{display:none}}
.markend{display:flex;align-items:center;gap:.2rem}
.goback.small{display:none;width:1.9rem;height:1.9rem;font-size:.95rem;
  margin:0}
@media(max-width:860px){
  /* A whole second bar held a back arrow, a link to the Drive's own
     TikTok and Linzy's face. On a phone that is a sixth of the screen,
     above the fold, on every page, and a member already knows whose app
     they are in. The arrow moves up beside the menu button and the bar
     goes, except on the one page that has a search in it. */
  .topbar.bare{display:none}
  .topbar .ttlink,.topbar .who{display:none}
  .topbar{padding:.6rem 1.1rem}
  .goback.small{display:flex}
  .topbar .goback{display:none}
}


.seeall{margin-top:1rem}
.seeall .btn{width:100%;justify-content:center}
@media(min-width:861px){.seeall{margin-top:1.2rem}
  .seeall .btn{width:auto}}
.vearn{display:none;font-family:"Fraunces",Georgia,serif;
  font-size:1.35rem;font-weight:600;color:var(--burnt);
  margin:.5rem 0 .1rem;line-height:1}
.rpick{display:none;font-family:"Inter",sans-serif;font-weight:600;
  font-size:.9rem;padding:.6rem .8rem;border-radius:99px;
  border:1px solid var(--rule);background:var(--card);color:var(--brown);
  width:100%;max-width:18rem}
/* ---- Phones --------------------------------------------------------
   The dashboard was built for a laptop and then squeezed. On a phone the
   hero became a wall of text, six filter chips wrapped onto three lines,
   the figures stacked one per screenful, and the product and video rows
   ran off the side with the words cut in half. This is the same page
   with everything that does not earn its width taken out of it. */
@media(max-width:860px){
  /* The hero keeps a face, a name and the three numbers that rank them.
     The bio is already on their TikTok and the two money pills repeat
     what the figures below say properly. */
  .hero{min-height:0;padding:1.3rem 1.15rem}
  .hero .txt{max-width:100%;min-width:0}
  .bio,.pvs{display:none}
  .hero h1{font-size:1.3rem;white-space:normal;line-height:1.25}
  .gpic{width:32px;height:32px}
  .lede.stands{line-height:2;margin:.5rem 0 0;font-size:.84rem}
  .stand{margin-right:.5rem;gap:.35rem}
  .stand b{font-size:.54rem;padding:.2rem .45rem;border-radius:5px}
  .hero .row{margin-top:1.1rem;gap:.5rem}
  .hero .row .btn{flex:1 1 0;min-width:0;justify-content:center;
    font-size:.82rem;padding:.55rem .6rem}

  /* One control instead of six chips on three lines. */
  .filters.dated .rpick{display:block}
  .filters.dated .rchip,.filters.dated .cust{display:none}

  /* Four figures as four squares, not four full width bars with the
     middle of each one empty. */
  .stats{grid-template-columns:repeat(2,1fr);gap:.6rem}
  .stat{padding:.8rem .6rem;text-align:center}
  .stat .v{font-size:1.25rem}
  /* An odd number of figures leaves the last one alone in a column with
     a hole beside it. It takes the whole row instead. */
  .stats>.stat:last-child:nth-child(odd){grid-column:1 / -1}
  /* The note under each figure was wrapping onto two lines and making
     every tile taller than the number it is explaining. */
  .stat .note{font-size:.68rem;padding:.3rem .5rem}

  /* Two across, whole, instead of four across with the names cut off. */
  .pgrid,.snap .pgrid{grid-template-columns:repeat(2,minmax(0,1fr));
    gap:.6rem}
  .snap .pcard .pn{white-space:normal}
  /* The video row stops being a sideways scroller nobody finds the end
     of and becomes two columns you scroll down through like everything
     else on the page. */
  .vstrip,.snap .vstrip{display:grid;grid-template-columns:1fr;
    gap:.7rem;overflow:visible;padding:0}
  .vstrip .vcard{width:auto;flex:none}
  /* The player at the shape a TikTok actually is, not a crop of one.
     The figures move off the picture and sit under it, where there is
     room to read them. */
  .vstrip .vshot{aspect-ratio:9/16}
  .vstrip .vmoney{display:none}
  .vstrip .vearn{display:block}
  /* Under a full width player the product was a thin bar with a 22px
     picture and a title at two thirds of a rem, cut off with an
     ellipsis. It is the thing you tap to go and look at what sold, so it
     is sized like it. */
  .vstrip .vprod{gap:.7rem;align-items:center;padding:.7rem 0 .1rem}
  .vstrip .vpic{width:46px;height:46px;border-radius:9px}
  .vstrip .vpname{font-size:.92rem;line-height:1.3;white-space:normal;
    color:var(--burnt);display:-webkit-box;-webkit-line-clamp:2;
    -webkit-box-orient:vertical;overflow:hidden;
    text-decoration:underline;text-decoration-color:var(--tan);
    text-underline-offset:3px}
  .vstrip .pmore{font-size:.7rem}
}

.goback{flex:0 0 auto;width:2rem;height:2rem;border-radius:99px;
  border:1px solid var(--rule);background:var(--card);
  color:var(--charcoal);font-size:1rem;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;margin-right:.6rem}
.goback:hover{border-color:var(--burnt);color:var(--burnt)}
.twopay{color:var(--burnt);font-weight:700;text-decoration:none;
  border-bottom:1px solid var(--burnt)}
.payrow{position:relative}
.payrow.done{opacity:.78}
.payform{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center;
  margin:0 0 .5rem}
.payform input{flex:1 1 16rem;font-size:.9rem;padding:.6rem .75rem;
  border:1px solid var(--rule);border-radius:9px;background:var(--card);
  color:var(--charcoal);min-width:0}
.paygap{color:var(--burnt);font-size:.76rem}
.payby{font-size:.76rem;color:var(--muted)}
.paywho a{color:inherit;text-decoration:none;
  border-bottom:1px solid var(--rule)}
.paywho a:hover{border-bottom-color:var(--burnt)}
.paywhen{flex:0 0 auto;font-size:.78rem;color:var(--muted);
  min-width:7rem;text-align:right}
form.dirrow{margin:0}
.refbox{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap;
  background:var(--card);border:1px solid var(--rule);border-radius:12px;
  padding:.9rem 1rem;margin:0 0 1.6rem}
.reflink{flex:1 1 16rem;font-family:ui-monospace,Menlo,monospace;
  font-size:.9rem;color:var(--burnt);word-break:break-all;
  user-select:all}
.refbox .btn{flex:0 0 auto;min-width:6rem;justify-content:center}
.rolecell{white-space:nowrap}
/* The role is the control. Looks like a value until you go near it. */
.rolenow{display:inline-block;padding:.22rem .6rem;border-radius:99px;
  font-weight:700;font-size:.8rem;color:var(--burnt);
  background:var(--orange-tint);border:1px solid transparent}
a.rolenow:hover{border-color:#EBC9AC;background:var(--surface)}
.rolenow.owner{background:var(--burnt);color:var(--surface)}
.dirtable thead a{color:inherit}
.dirtable thead a:hover{color:var(--rust)}
.dirtable th a.sorton{color:var(--rust)}
.rmbtn{display:inline-block;padding:.35rem .65rem;border-radius:8px;
  font-size:.74rem;font-weight:600;color:var(--rust);
  border:1px solid var(--rule);background:var(--card);white-space:nowrap}
.rmbtn:hover{color:var(--surface);background:var(--rust);
  border-color:var(--rust)}
@media (max-width:720px){
  .dirtable thead{display:none}
  .dirtable tr{display:block;margin-bottom:.7rem;border:1px solid var(--rule);
    border-radius:11px;background:var(--card);padding:.5rem .3rem}
  .dirtable td{display:block;border:0;padding:.25rem .8rem}
  .dirtable .right{text-align:left;padding-top:.6rem}
}

/* ---- Announcements, Resources, Links -------------------------------- */
/* ---- The writing box ------------------------------------------------ */
.rich{border:1px solid var(--rule);border-radius:11px;background:var(--card);
  overflow:hidden;margin:0 0 .8rem}
.richbar{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem;
  padding:.4rem .5rem;border-bottom:1px solid var(--rule);
  background:var(--bone)}
.richbar button{font-family:inherit;font-size:.8rem;line-height:1;
  min-width:2rem;padding:.4rem .55rem;border:1px solid transparent;
  border-radius:7px;background:transparent;color:var(--brown);cursor:pointer}
.richbar button:hover{background:var(--card);border-color:var(--rule)}
.richsep{width:1px;height:1.1rem;background:var(--rule);margin:0 .25rem}
.richbody{min-height:9rem;padding:.9rem 1rem;outline:0;line-height:1.65;
  font-size:.92rem;color:var(--brown)}
.richbody:empty:before{content:attr(data-ph);color:var(--muted)}
.richbody h3{font-size:1.1rem;font-weight:700;margin:.6rem 0 .3rem;
  color:var(--burnt)}
.richbody p{margin:0 0 .6rem}
.richbody ul,.richbody ol{margin:0 0 .6rem;padding-left:1.3rem}
.richbody img{max-width:100%;height:auto;border-radius:9px}
.richbody a{color:var(--rust);text-decoration:underline}
.prose{line-height:1.65}
.prose h3{font-size:1.08rem;font-weight:700;margin:.7rem 0 .35rem;
  color:var(--burnt)}
.prose p{margin:0 0 .6rem}
.prose p:last-child{margin:0}
.prose ul,.prose ol{margin:0 0 .6rem;padding-left:1.3rem}
.prose img{max-width:100%;height:auto;border-radius:10px;margin:.4rem 0}
.prose a{color:var(--rust);text-decoration:underline}
/* One line: the address, then the button that does something with it. */
/* A thin horizontal card. One row, label on the left, the thing it does on
   the right, so a whole section costs one line instead of four. */
/* The paperclip and Send live inside the box you type in, the way every
   chat does it, instead of on their own row underneath costing height. */
/* The four doors off the Control Panel. One shape, one size, one rhythm, so
   the page is read in a glance instead of scrolled through. */
/* 46rem, the same as the invite card above them. Everything on this page
   lines up on one left edge and one right edge or none of it looks placed. */
.sendcard{padding:1.1rem 1.2rem;margin:0 0 1.4rem;max-width:46rem}
.sendcard h2{margin:0 0 .7rem}
.sendcard .tsubject{margin-bottom:.6rem}
.sendcard .rich{margin:0}
.ptiles{display:grid;gap:.7rem;margin:0 0 1.4rem;max-width:46rem;
  grid-template-columns:repeat(2,minmax(0,1fr))}
/* Two by two, never three with one hanging off the end. Four tiles only look
   deliberate in a shape that divides into four. */
@media(max-width:560px){.ptiles{grid-template-columns:1fr}}
.ptile{position:relative;display:flex;flex-direction:column;gap:.3rem;
  padding:.95rem 1.05rem;border:1px solid var(--rule);border-radius:12px;
  background:var(--card);color:inherit;text-decoration:none;
  transition:border-color .12s,transform .12s}
.ptile:hover{border-color:var(--orange);transform:translateY(-1px)}
.ptile.alarm{border-color:var(--orange);background:var(--orange-tint)}
.plab{font-family:"Inter",sans-serif;font-weight:800;font-size:.68rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--burnt)}
.pnow{font-size:.84rem;color:var(--muted);line-height:1.35}
.ptile .navcount.big{position:absolute;top:.7rem;right:.8rem}
/* Paperclip and Send live inside the writing box, because that is what they
   act on. */
.richfoot{display:flex;align-items:center;justify-content:flex-end;gap:.8rem;
  padding:.5rem .7rem;border-top:1px solid var(--rule);background:var(--bone)}
.richfoot .clip{font-size:1.2rem}
.slimcard{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;
  padding:.65rem .8rem;margin:0 0 1.4rem;border:1px solid var(--rule);
  border-radius:12px;background:var(--card);color:inherit;
  text-decoration:none;
  /* The same 46rem as the message form and the inbox. A card that runs
     wider than everything beside it reads as a mistake even when nobody
     can say why. */
  max-width:46rem}
a.slimcard:hover{border-color:var(--orange)}
.slimcard.alarm{border-color:var(--rust);background:var(--rust-tint)}
.slimcard.alarm .slimnow{color:var(--burnt)}
.slimlab{font-family:"Inter",sans-serif;font-weight:800;font-size:.76rem;
  letter-spacing:.09em;color:var(--burnt);white-space:nowrap}
.slimcard .tsubject{flex:1;min-width:11rem;margin:0}
.slimcard .btn{flex:0 0 auto}
.slimnow{flex:1;font-size:.86rem;color:var(--muted)}
.navcount.big{font-size:.78rem;min-width:1.5rem;height:1.5rem}
/* ---- Agency applications -------------------------------------------- */
.appcard{border:1px solid var(--rule);border-radius:13px;background:var(--card);
  padding:1.1rem 1.25rem;margin:0 0 1rem;max-width:46rem}
.apphead{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;
  margin-bottom:.3rem}
.apphead h3{margin:0;flex:1;min-width:10rem;font-size:1.1rem}
.cstat.off{background:var(--bone);color:var(--muted)}
.qa{margin:.7rem 0}
.qa i{font-style:normal;font-size:.72rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
.qa p{margin:.15rem 0 0;line-height:1.55}
.picklist{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1rem}
.pickrow{display:inline-flex;align-items:center;gap:.45rem;padding:.45rem .8rem;
  border:1px solid var(--rule);border-radius:999px;background:var(--card);
  cursor:pointer;font-size:.88rem}
.pickrow input{margin:0}
.btn.sm{padding:.45rem .9rem;font-size:.78rem}
.postlist:empty{display:none}
.postlist{display:flex;flex-direction:column;gap:1rem;margin:1.4rem 0 2rem;
  max-width:46rem}
.post{padding:1.1rem 1.25rem;border-radius:13px;background:var(--card);
  border:1px solid var(--rule)}
.phead{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem .8rem;
  margin-bottom:.5rem}
/* The subject is the thing somebody scans for, so it carries weight and a
   little more size than the words under it. */
.phead h3{margin:0;flex:1;min-width:12rem;font-size:1.22rem;font-weight:700;
  line-height:1.25;color:var(--burnt)}
.phead .dim{font-size:.78rem;white-space:nowrap}
.ptools{display:flex;gap:.7rem;font-size:.78rem}
.ptools a{color:var(--muted)}
.ptools a:hover{color:var(--rust)}
.post p{margin:0 0 .7rem;line-height:1.65}
.post p:last-child{margin:0}
.post ul,.post ol{margin:0 0 .7rem;padding-left:1.2rem}
.post li{margin:0 0 .3rem;line-height:1.6}
.post .shot{margin-top:.8rem}
.post .shot img{max-height:26rem}
.post strong{color:var(--burnt)}

/* ---- Messages ------------------------------------------------------- */
.invlist{display:flex;flex-direction:column;gap:.45rem;margin:1rem 0 2rem;
  max-width:36rem}
.invrow{display:flex;align-items:center;gap:.8rem;padding:.55rem .9rem;
  border-radius:10px;background:var(--card);border:1px solid var(--rule)}
.invrow span:first-child{flex:1;min-width:0;overflow:hidden;
  text-overflow:ellipsis}
.invrow .dim{font-size:.78rem;white-space:nowrap}
.invrow .xdrop{padding:0 .5rem;border:0;background:transparent}
.xdrop:hover{color:var(--surface);background:var(--rust);border-color:var(--rust)}
/* Sits at the bottom right of the conversation, under everything it would
   delete, which is where you reach for it once you are finished reading. */
.binbtn{margin-left:auto;display:inline-flex;flex-direction:column;
  align-items:center;gap:.12rem;padding:.3rem .5rem;border-radius:9px;
  color:var(--muted);line-height:1}
.binbtn svg{stroke:currentColor;stroke-width:1.6;fill:none}
.binbtn span{font-size:.68rem;letter-spacing:.07em;text-transform:uppercase}
.hwho{display:flex;align-items:center;gap:.3rem}
.hwhen{text-transform:none;letter-spacing:normal}
.hmsg.you .hwho{justify-content:flex-end}
.binbtn:hover{color:var(--rust);background:var(--orange-tint)}
.btn.ghost{background:transparent;color:var(--brown);
  border:1px solid var(--rule)}
.twrap{display:flex;align-items:stretch;gap:.45rem}
.twrap > .trow{flex:1 1 auto;min-width:0}
/* Its own box beside the row, so a long subject cannot push it onto a line
   of its own, which is what the old cross did. */
.rowbin{flex:0 0 auto;justify-content:center;padding:0 .7rem;
  border-radius:12px;background:var(--card);border:1px solid var(--rule);
  margin-left:0}
.rowbin:hover{color:var(--rust);background:var(--orange-tint);
  border-color:#EBC9AC}
.tlist:empty{display:none}
.tlist{display:flex;flex-direction:column;gap:.6rem;margin:1.2rem 0 2rem;
  max-width:46rem}
.trow{display:grid;align-items:center;gap:.2rem .7rem;padding:.8rem 1rem;
  border-radius:12px;color:var(--charcoal);background:var(--card);
  border:1px solid var(--rule);
  grid-template-columns:auto 1fr auto;grid-template-areas:"dot kind when"
                                                          "dot sub  sub"}
.trow:hover{border-color:#EBC9AC;background:var(--orange-tint)}
.trow.un{border-color:#EBC9AC}
.tnew{grid-area:dot;width:7px;height:7px;border-radius:99px;
  background:var(--orange)}
.tfrom{grid-area:kind;font-size:.9rem;font-weight:700;color:var(--burnt)}
.tkind{font-size:.62rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--surface);background:var(--rust);
  padding:.08rem .36rem;border-radius:99px;margin-left:.4rem;
  vertical-align:2px}
.tsub{grid-area:sub;font-size:.92rem;line-height:1.4;
  color:var(--brown)}
.trow.un .tsub{font-weight:600}
.trow .dim{grid-area:when;font-size:.78rem;text-align:right}
.fieldlab{margin:0 !important;font-size:.72rem}
/* A question on a form is something to read, not a section label. The
   global caps heading is 14px uppercase, which is smaller and harder going
   than the prose everywhere else in the app. */
.ask{display:block;font-size:1.02rem;font-weight:600;line-height:1.45;
  color:var(--burnt);margin:1.6rem 0 .2rem;text-transform:none;
  letter-spacing:0}
.askhint{margin:0 0 .5rem;font-size:.92rem;line-height:1.5;color:var(--muted)}
.rform .ask:first-of-type{margin-top:.6rem}
h2.caps{font-family:"Inter",sans-serif;font-weight:800;font-size:.95rem;
  letter-spacing:.09em;color:var(--burnt);margin:1.8rem 0 .6rem}
.shot{display:block;margin-top:.55rem}
.shot img{display:block;max-width:100%;max-height:19rem;border-radius:9px;
  border:1px solid var(--rule)}
.paperclip{display:inline-block;margin-top:.5rem;padding:.3rem .65rem;
  border-radius:8px;font-size:.84rem;background:var(--bone);
  border:1px solid var(--rule)}
.paperclip::before{content:"\1F4CE  "}
.clip{cursor:pointer;margin:0}
.clip{flex:0 0 auto;align-self:center;font-size:1.1rem;opacity:.65;
  text-transform:none;letter-spacing:normal}
.clip:hover{opacity:1}
.clip input{position:absolute;width:1px;height:1px;opacity:0;
  pointer-events:none}
.clip.has{opacity:1}
.clipname{font-size:.78rem;color:var(--rust);font-weight:600;
  letter-spacing:normal;text-transform:none}
.sendrow{display:flex;align-items:center;gap:.9rem}
.sendrow .clip{font-size:1.35rem}
.dmrules{margin:.5rem 0 1.3rem;padding-left:1.15rem;
  max-width:34rem;font-size:.92rem;line-height:1.6}
.dmrules li{margin:0 0 .3rem}
.dmrules li:last-child{margin:0}
.tsubject{padding:.7rem .9rem;border-radius:12px;font:inherit;color:inherit;
  background:var(--card);border:1px solid var(--rule)}
.tsubject:focus{outline:2px solid var(--burnt);outline-offset:1px}
/* A row with no unread dot still lines up with the ones that have one. */
.trow:not(.un){padding-left:1.95rem}

/* ---- Harry ---------------------------------------------------------- */
.hwise{margin:-.1rem 0 0;font-size:.88rem;color:var(--brown)}
.hwrap{display:flex;flex-direction:column;gap:.9rem;margin-top:1.1rem}
/* The conversation and the box you type into are one object. Two separate
   cards made it look like the box belonged to the page rather than to Harry. */
.hbox{display:flex;flex-direction:column;border:1px solid var(--rule);
  border-radius:14px;background:var(--card);overflow:hidden}
.hscroll{display:flex;flex-direction:column;gap:1.1rem;max-height:52vh;
  overflow-y:auto;padding:1.15rem 1.2rem}
.hscroll:empty{display:none}
.hmsg{max-width:44rem}
.hmsg.you{align-self:flex-end;text-align:right}
.hwho{font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.3rem}
.hbody{padding:.75rem 1rem;border-radius:13px;line-height:1.62}
.hmsg.waiting .hbody{color:var(--muted)}
/* A plain underlined link read as part of the page. It is the one control
   that clears a conversation, so it looks like a thing you press and it
   sits under the box on the right, out of the way of the writing. */
/* The one control that clears a conversation. It sits on the same line as
   the question count, off to the right, and it is a real button rather than
   a see through one nobody could tell was pressable. */
.hwiserow{display:flex;align-items:center;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;margin:.6rem 0 0}
.hwiserow .hwise{margin:0;flex:1;min-width:14rem}
.hbar{display:none}
.dots{display:inline-flex;gap:3px;vertical-align:middle;margin-right:.3rem}
.dots i{width:5px;height:5px;border-radius:50%;background:var(--rust);
  animation:blip 1s infinite}
.dots i:nth-child(2){animation-delay:.15s}
.dots i:nth-child(3){animation-delay:.3s}
@keyframes blip{0%,60%,100%{opacity:.25}30%{opacity:1}}
.hmsg.you .hbody{background:var(--burnt);color:var(--surface);text-align:left}
.hmsg.harry .hbody{background:var(--bone);border:1px solid var(--rule)}
/* Harry writes in small paragraphs and bullets. Give them room to breathe,
   because the point of the short paragraphs is that they are easy to read. */
.hbody p{margin:0 0 .7rem}
.hbody p:last-child{margin:0}
.hask{display:flex;flex-wrap:wrap;gap:.7rem;align-items:flex-end;
  padding:.85rem .9rem;background:var(--surface);position:relative}
/* A screenshot of a product page carries everything a link cannot: the
   title, the price, the stars and the first few reviews. Dropping one on
   the box is the shortest way to hand him all of it. */
form.over{outline:2px dashed var(--orange);outline-offset:-4px;
  border-radius:10px}
.hdrop{display:none;position:absolute;inset:0;z-index:3;
  align-items:center;justify-content:center;background:var(--orange-tint);
  color:var(--burnt);font-weight:700;font-size:.85rem;border-radius:10px;
  pointer-events:none}
form.over .hdrop{display:flex}
/* What is attached, under whatever form it was attached to. */
.drops{flex:1 0 100%;display:flex;flex-wrap:wrap;gap:.5rem;order:9;
  margin-top:.5rem}
.drops:empty{display:none;margin:0}
.drop{display:flex;align-items:center;gap:.4rem;padding:.3rem .5rem;
  border:1px solid var(--rule);border-radius:8px;background:var(--bone);
  font-size:.74rem;color:var(--brown);max-width:14rem}
.drop img{width:28px;height:28px;object-fit:cover;border-radius:5px;
  flex:0 0 auto}
.drop span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drop b{cursor:pointer;color:var(--muted);font-weight:700;padding:0 .15rem}
.drop b:hover{color:var(--orange)}
/* Only once there is something above it, or the empty state grows a line
   across the top of nothing. */
.hscroll:not(:empty)+.hask{border-top:1px solid var(--rule)}
.hask textarea{flex:1;min-width:0;padding:.5rem .35rem;border:0;
  background:transparent;color:inherit;font:inherit;line-height:1.5;
  resize:vertical}
.hask textarea:focus{outline:none}
.hask .btn{white-space:nowrap}
/* The reply box inside a conversation. Same editor, shorter, and the whole
   thing sits inside the card the messages are in. */
.dmreply{padding:.85rem .9rem;background:var(--surface)}
.hscroll:not(:empty)+.dmreply{border-top:1px solid var(--rule)}
.dmreply .rich{margin:0 0 .6rem}
.dmreply .sendrow{gap:.8rem}
.rich.short .richbody{min-height:4.5rem}
.htips{margin:-.1rem 0 -.1rem;font-size:.88rem;color:var(--brown)}
.htips p{margin:0 0 .25rem;color:var(--rust);letter-spacing:.05em}
/* Matches ASK WISELY exactly, so the two headings on this page read as a
   pair rather than as two different ideas about what a heading looks like. */
.htips strong,.hwise strong{font-weight:800;letter-spacing:.08em;
  color:var(--burnt);margin-right:.25rem}
.htips strong{font-size:1.02rem}
.htips ul{margin:0;padding-left:1.05rem}
.htips li{margin:0 0 .14rem;line-height:1.5}
.htips li:last-child{margin:0}

.castnote{margin:0;padding:.85rem 1rem;font-size:.85rem;color:var(--muted);
  border-top:1px solid var(--rule);background:var(--surface)}
.hbar{display:flex;gap:1rem;align-items:center;font-size:.82rem;
  color:var(--muted)}
.hbar a{color:var(--muted)}
.hbody ul,.hbody ol{margin:0 0 .7rem;padding-left:1.35rem}
.hbody li{margin:0 0 .3rem}
.hbody li:last-child{margin:0}
.hbody strong{font-weight:600;color:var(--burnt)}
.hbody em{font-style:normal;font-weight:600;font-size:.82rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
@media (max-width:640px){
  .hmsg{max-width:100%}
  .hask{flex-direction:column;align-items:stretch}
}