:root{
  --page:#FFFFFF; --ink:#101114; --soft:#6E7178; --faint:#9B9EA4;
  --hair:#E6E7E9; --tint:#F4F5F6;
}
*{box-sizing:border-box;margin:0;padding:0}
/* a display rule further down must not defeat the hidden attribute */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{background:var(--page);color:var(--ink);font-family:Archivo,-apple-system,
  BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:15px;line-height:1.68;
  font-feature-settings:"tnum" 1;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:1.5px solid var(--ink);outline-offset:3px}
.wrap{max-width:1120px;margin:0 auto;padding:0 40px}

.topbar{border-bottom:1px solid var(--hair)}
.topbar .wrap{display:flex;align-items:center;gap:22px;
  height:58px;font-size:13px;letter-spacing:.02em}
.topbar .mark{flex:none;display:flex;align-items:center}
.topbar .mark .logo{display:block;height:30px;width:auto}
.topbar span{margin-left:auto;flex:none;white-space:nowrap}
.topbar b{font-weight:600;letter-spacing:-.01em;font-size:15px}
.topbar span{color:var(--faint)}

/* ---- row 1: render left, specification right ---- */
.top{display:grid;grid-template-columns:1.25fr 1fr;gap:44px;padding:38px 0 44px}
.viewport{margin:0;width:100%;aspect-ratio:4/3;overflow:hidden;
  background:var(--tint);border-radius:2px}
.viewport img{width:100%;height:100%;display:block;object-fit:cover}
.thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:8px}
.thumbs button{padding:0;border:0;background:none;cursor:pointer;text-align:left;
  display:block}
.thumbs img{width:100%;height:auto;display:block;border-radius:2px;
  box-shadow:inset 0 0 0 1px rgba(16,17,20,.06);opacity:.62;transition:opacity .12s}
.thumbs button:hover img{opacity:.85}
.thumbs button[aria-pressed="true"] img{opacity:1;
  box-shadow:0 0 0 2px var(--ink)}
.thumbs span{display:block;font-size:11px;color:var(--faint);margin-top:6px;
  line-height:1.3}
.thumbs button[aria-pressed="true"] span{color:var(--ink)}
.controls{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding-top:14px}
.seg{display:flex;gap:20px}
.seg button{font:inherit;font-size:13px;background:none;border:0;padding:0;
  cursor:pointer;color:var(--faint)}
.seg button:hover{color:var(--soft)}
.seg button[aria-pressed="true"]{color:var(--ink);font-weight:600}
.seg .lbl{font-size:11px;color:var(--faint);letter-spacing:.05em;align-self:center;
  margin-right:-10px}

.idcard{display:flex;flex-direction:column}
.idcard .chip{height:132px;border-radius:2px;
  box-shadow:inset 0 0 0 1px rgba(16,17,20,.06)}
.idcard h1{font-size:32px;font-weight:600;letter-spacing:-.026em;line-height:1.05;
  margin-top:20px}
.idcard .brand{font-size:13px;color:var(--faint);margin-top:6px}
.idcard table{width:100%;border-collapse:collapse;font-size:13.5px;margin-top:20px}
.idcard td{padding:9px 0;border-bottom:1px solid var(--hair)}
.idcard td:first-child{color:var(--faint);width:44%}
.idcard td:last-child{text-align:right;color:#25272B}
.copybtn{margin-top:18px;align-self:flex-start;font:inherit;font-size:13px;
  background:none;border:0;border-bottom:1px solid var(--hair);padding:0 0 3px;
  cursor:pointer;color:var(--soft)}
.copybtn:hover{color:var(--ink);border-bottom-color:var(--soft)}

/* ---- shared section furniture ---- */
section{padding-top:26px;margin-top:34px;border-top:1px solid var(--hair)}
.head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  margin-bottom:20px}
.head h2{font-size:15px;font-weight:600;letter-spacing:-.005em}
.head span{font-size:12.5px;color:var(--faint)}

/* ---- row 2: color notes ---- */
.notes{display:grid;grid-template-columns:1.25fr 1fr;gap:44px;align-items:start}
.notes p{font-size:16px;line-height:1.74;color:#25272B;max-width:60ch}
.notes p + p{margin-top:15px}
.lightnote{font-size:13.5px;line-height:1.6;color:var(--soft);
  padding-left:18px;border-left:2px solid var(--hair);margin-top:22px}
.readout{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hair);
  border:1px solid var(--hair);border-radius:2px}
.readout div{background:var(--page);padding:15px 16px 16px}
.readout em{font-style:normal;display:block;font-size:11px;color:var(--faint);
  letter-spacing:.05em;margin-bottom:6px}
.readout b{display:block;font-weight:600;font-size:17px;letter-spacing:-.015em}
.readout small{display:block;font-size:12px;color:var(--soft);margin-top:3px}

/* ---- row 3: suggestions | popular comparisons ---- */
.halves{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.swatches{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.swatches .swatch{display:block}
.swatches .sw{display:block;height:74px;border-radius:2px;
  box-shadow:inset 0 0 0 1px rgba(16,17,20,.06);transition:box-shadow .12s}
.swatches .n{display:block;font-size:12px;margin-top:9px;line-height:1.4;color:var(--soft)}
.swatches .m{display:block;font-size:11.5px;color:var(--faint)}
a.swatch:hover .sw{box-shadow:0 0 0 2px var(--ink)}
a.swatch:hover .n{text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--faint)}
.subhead{font-size:12px;color:var(--faint);letter-spacing:.04em;
  margin:26px 0 12px}

.cmp{display:flex;flex-direction:column}
.cmp a{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;
  padding:13px 0;border-bottom:1px solid var(--hair)}
.cmp a:first-child{border-top:1px solid var(--hair)}
.cmp .pair{display:flex}
.cmp .pair i{display:block;width:26px;height:26px;border-radius:2px;
  box-shadow:inset 0 0 0 1px rgba(16,17,20,.08)}
.cmp .pair i:last-child{margin-left:-7px}
.cmp .t{font-size:13.5px;line-height:1.4}
.cmp .t small{display:block;color:var(--faint);font-size:12px;margin-top:1px}
.cmp .de{font-size:12.5px;color:var(--soft)}
.cmp a:hover .t{text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--faint)}

.pinline{font-size:12.5px;color:var(--faint);padding-top:10px}
.pinline a{border-bottom:1px solid var(--hair);color:var(--soft)}
.pinline a:hover{color:var(--ink);border-bottom-color:var(--soft)}

.calc{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px}
.calc label{display:block;font-size:12px;color:var(--faint);letter-spacing:.04em}
.calc input{display:block;width:100%;font:inherit;font-size:19px;font-weight:600;
  letter-spacing:-.02em;color:var(--ink);background:none;border:0;
  border-bottom:1px solid var(--hair);padding:6px 0 7px;margin-top:5px;
  border-radius:0;-moz-appearance:textfield}
.calc input:focus{outline:0;border-bottom-color:var(--ink)}
.calc i{display:block;font-style:normal;font-size:11.5px;color:var(--faint);margin-top:5px}
.result{border:1px solid var(--hair);border-radius:2px;padding:20px 22px 22px}
.rrow{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:11px 0;border-bottom:1px solid var(--hair);font-size:13.5px;color:var(--faint)}
.rrow b{font-weight:600;font-size:16px;color:var(--ink);letter-spacing:-.015em}
.rrow.big b{font-size:26px}
.rrow:last-of-type{border-bottom:0}
.rnote{font-size:12.5px;line-height:1.6;color:var(--soft);margin-top:12px}

footer{margin-top:56px;border-top:1px solid var(--hair);padding:22px 0 60px;
  font-size:12.5px;line-height:1.66;color:var(--faint)}
footer p{max-width:70ch}

@media (max-width:920px){
  .top,.notes,.halves{grid-template-columns:1fr;gap:30px}
  .idcard .chip{height:100px}
  .swatches{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:680px){
  .wrap{padding:0 20px}
  .readout{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
table.cmp-table{width:100%;border-collapse:collapse;font-size:14px;table-layout:fixed}
table.cmp-table th{text-align:left;font-weight:600;font-size:13px;
  padding:0 18px 10px 0;border-bottom:1px solid var(--ink);vertical-align:bottom}
table.cmp-table td{padding:11px 18px 11px 0;border-bottom:1px solid var(--hair);
  vertical-align:top;overflow-wrap:anywhere}
table.cmp-table th:last-child,table.cmp-table td:last-child{padding-right:0}
table.cmp-table td:first-child,table.cmp-table th:first-child{color:var(--faint);width:20%}
a.more{font-size:13.5px;color:var(--soft);border-bottom:1px solid var(--hair)}
a.more:hover{color:var(--ink);border-bottom-color:var(--soft)}

.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(154px,1fr));gap:16px}
.tiles .tile{display:block}
.tiles .sw{display:block;height:88px;border-radius:2px;
  box-shadow:inset 0 0 0 1px rgba(16,17,20,.06);transition:box-shadow .12s}
.tiles .n{display:block;font-size:13.5px;margin-top:9px;line-height:1.35}
.tiles .m{display:block;font-size:12px;color:var(--faint);margin-top:2px}
a.tile:hover .sw{box-shadow:0 0 0 2px var(--ink)}
a.tile:hover .n{text-decoration:underline;text-underline-offset:3px}
.pager{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px;padding-top:18px;
  border-top:1px solid var(--hair);font-size:13.5px}
.pager a{color:var(--faint)}
.pager a:hover{color:var(--ink)}
.pager [aria-current]{font-weight:600}
.topbar a{border:0}
.brand a{border-bottom:1px solid var(--hair)}
.brand a:hover{border-bottom-color:var(--soft);color:var(--ink)}

.status{font-size:13px;color:var(--faint);margin-top:18px}
.picker{display:grid;grid-template-columns:1fr 1fr;gap:36px;margin-top:20px}
.picker label{display:block;font-size:11px;color:var(--faint);letter-spacing:.05em;
  margin-bottom:7px}
.picker input{width:100%;font:inherit;font-size:16px;padding:9px 0;background:none;
  border:0;border-bottom:1px solid var(--hair);border-radius:0}
.picker input:focus{outline:0;border-bottom-color:var(--ink)}
.opts{max-height:264px;overflow:auto}
.opts .opt{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  padding:8px 0;background:none;border:0;border-bottom:1px solid var(--hair);
  cursor:pointer;font:inherit}
.opts .opt:hover{background:var(--tint)}
.opts .sw{width:30px;height:30px;flex:none;border-radius:2px;
  box-shadow:inset 0 0 0 1px rgba(16,17,20,.08)}
.opts b{display:block;font-weight:400;font-size:13.5px}
.opts small{display:block;font-size:12px;color:var(--faint)}
.card{margin-top:16px}
.card .big{padding:22px;border-radius:2px;min-height:118px;display:flex;
  flex-direction:column;justify-content:flex-end}
.card .big b{font-size:22px;font-weight:600;letter-spacing:-.02em}
.card .big span{font-size:12.5px;opacity:.78;margin-top:4px}
.card dl{display:grid;grid-template-columns:auto 1fr;margin-top:4px}
.card dt,.card dd{padding:9px 0;border-bottom:1px solid var(--hair);font-size:13.5px}
.card dt{color:var(--faint)}
.card dd{text-align:right}
.card .more{display:inline-block;margin-top:14px}
@media (max-width:760px){.picker{grid-template-columns:1fr;gap:26px}}

.calc select{display:block;width:100%;font:inherit;font-size:16px;font-weight:600;
  letter-spacing:-.01em;color:var(--ink);background:none;border:0;
  border-bottom:1px solid var(--hair);padding:7px 0 8px;margin-top:5px;
  border-radius:0;cursor:pointer}
.calc select:focus{outline:0;border-bottom-color:var(--ink)}

.card .viewport{margin:0 0 14px}
.card .viewport img{width:100%;height:100%;object-fit:cover;display:block}

/* ---- home ---- */
.hero{padding:64px 0 0;border-bottom:1px solid var(--hair)}
.hero h1{font-size:clamp(2.2rem,4.6vw,3.2rem);font-weight:600;letter-spacing:-.032em;
  line-height:1.04;max-width:15ch}
.hero .sub{margin-top:18px;max-width:58ch;font-size:17px;line-height:1.66;color:var(--soft)}
.strip{display:flex;margin-top:48px;height:96px}
.strip a{flex:1;display:block;transition:flex .18s ease}
.strip a:hover{flex:2.4}
@media (max-width:680px){.strip{height:64px}.hero{padding-top:38px}}

.brands{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.brandcard{display:block;padding:16px 18px 18px;border:1px solid var(--hair);
  border-radius:2px;transition:border-color .12s}
.brandcard:hover{border-color:var(--ink)}
.brandcard .bar{display:flex;height:44px;border-radius:2px;overflow:hidden}
.brandcard .bar i{flex:1}
.brandcard .bn{display:block;font-size:15px;font-weight:600;margin-top:14px;
  letter-spacing:-.012em}
.brandcard .bc{display:block;font-size:12.5px;color:var(--faint);margin-top:2px}

.promo{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start;
  padding:34px 0 8px;border-top:1px solid var(--ink)}
.promo h2{font-size:22px;font-weight:600;letter-spacing:-.02em}
.promo p{margin-top:14px;color:var(--soft);max-width:46ch;line-height:1.68}
.cta{display:inline-block;margin-top:6px;background:var(--ink);color:var(--page);
  font-size:14px;padding:11px 20px;border-radius:2px}
.cta:hover{opacity:.86}

.fams{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair);
  border:1px solid var(--hair);border-radius:2px}
.fams a{display:flex;justify-content:space-between;gap:12px;background:var(--page);
  padding:14px 16px;font-size:13.5px}
.fams a:hover{background:var(--tint)}
.fams small{color:var(--faint)}

.explain{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.explain b{font-size:14px;font-weight:600}
.explain p{margin-top:8px;font-size:13.5px;line-height:1.62;color:var(--soft)}

@media (max-width:900px){
  .brands,.fams,.explain{grid-template-columns:repeat(2,1fr)}
  .promo{grid-template-columns:1fr;gap:30px}
}
@media (max-width:600px){
  .brands,.fams,.explain{grid-template-columns:1fr}
}

/* ---- hex picker ---- */
.pk{display:grid;grid-template-columns:300px 1fr;gap:40px;align-items:start}
.pk-swatch{height:190px;border-radius:2px;box-shadow:inset 0 0 0 1px rgba(16,17,20,.08)}
.pk-input{display:block;margin-top:14px;position:relative}
.pk-input input[type=color]{position:absolute;inset:0;width:100%;height:100%;opacity:0;
  cursor:pointer;border:0;padding:0}
.pk-input span{display:block;text-align:center;background:var(--ink);color:var(--page);
  font-size:14px;padding:12px;border-radius:2px}
.pk-input:hover span{opacity:.86}
.pk-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.pk-row input,.pk-row select{width:100%;font:inherit;font-size:14px;padding:9px 0;
  background:none;border:0;border-bottom:1px solid var(--hair);border-radius:0}
.pk-row input:focus,.pk-row select:focus{outline:0;border-bottom-color:var(--ink)}
.pk-presets{display:flex;gap:8px;margin-top:16px}
.pk-presets button{flex:1;height:30px;border:0;border-radius:2px;cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(16,17,20,.1)}
.pk-presets button:hover{box-shadow:0 0 0 2px var(--ink)}
.pk-meta{margin-top:16px;font-size:13px;color:var(--faint)}
.pk-meta b{font-weight:600;color:var(--ink)}
.pk-right .tiles{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:14px}
.pk-right .tiles .sw{height:70px}
@media (max-width:860px){.pk{grid-template-columns:1fr;gap:26px}.pk-swatch{height:130px}}

.idactions{display:flex;gap:18px;flex-wrap:wrap;align-items:baseline}
.cmplist{position:fixed;left:0;right:0;bottom:0;background:var(--ink);color:var(--page);
  z-index:20;box-shadow:0 -8px 30px -20px rgba(16,17,20,.7)}
.cmplist .wrap{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding-top:11px;padding-bottom:11px}
.cmplist .lbl{font-size:11px;letter-spacing:.06em;opacity:.62}
.cmplist .chip{display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:13px;
  color:var(--page);background:rgba(255,255,255,.09);border:0;border-radius:2px;
  padding:6px 10px;cursor:pointer}
.cmplist .chip:hover{background:rgba(255,255,255,.18)}
.cmplist .chip i{width:14px;height:14px;border-radius:2px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.cmplist .go{margin-left:auto;background:var(--page);color:var(--ink);font-size:13px;
  padding:8px 16px;border-radius:2px}
.cmplist .hint{margin-left:auto;font-size:12.5px;opacity:.6}
.cmplist .clear{font:inherit;font-size:12.5px;background:none;border:0;color:var(--page);
  opacity:.6;cursor:pointer}
.cmplist .clear:hover{opacity:1}
body{padding-bottom:0}

/* ---- multi-color comparison ---- */
.shots-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.shots-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.shots-4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.table-scroll{overflow-x:auto;width:100%}
.table-scroll > table{width:100%;min-width:100%}
table.cmp-table th .th-sw,table.cmp-table td .th-sw{display:inline-block;width:14px;
  height:14px;border-radius:2px;margin-right:8px;vertical-align:-2px;flex:none;
  box-shadow:inset 0 0 0 1px rgba(16,17,20,.12)}
table.cmp-table th{overflow-wrap:anywhere}
table.cmp-table .th-cell{display:flex;align-items:flex-start;gap:0}
table.matrix td{text-align:right;font-variant-numeric:tabular-nums}
table.matrix th{text-align:right}
table.matrix th:first-child,table.matrix td:first-child{text-align:left}
table.matrix td.self{color:var(--faint)}
table.matrix td.near{font-weight:600}
@media (max-width:820px){
  .shots-3,.shots-4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .shots-2,.shots-3,.shots-4{grid-template-columns:1fr}
}

/* ---- room shape ---- */
.calc-shape{grid-column:1 / -1}
.calc-shape .lbl{display:block;font-size:11px;color:var(--faint);letter-spacing:.05em;
  margin-bottom:9px}
.shapes{display:flex;gap:12px}
.shapes button{display:flex;align-items:center;gap:10px;font:inherit;font-size:13.5px;
  color:var(--soft);background:none;border:1px solid var(--hair);border-radius:2px;
  padding:10px 16px;cursor:pointer;transition:border-color .12s,color .12s}
.shapes button:hover{color:var(--ink)}
.shapes button[aria-pressed="true"]{border-color:var(--ink);color:var(--ink);font-weight:600}
.shapes svg{width:44px;height:32px;flex:none}

/* ---- search ---- */
.searchform{display:flex;align-items:center;gap:8px;flex:1 1 auto;max-width:420px;
  border-bottom:1px solid var(--hair)}
.searchform input{flex:1;min-width:0;font:inherit;font-size:13.5px;padding:7px 0;
  background:none;border:0;border-radius:0}
.searchform input:focus{outline:0}
.searchform:focus-within{border-bottom-color:var(--ink)}
.searchform button{display:flex;align-items:center;justify-content:center;font:inherit;
  background:none;border:0;color:var(--faint);cursor:pointer;padding:4px}
.searchform button:hover{color:var(--ink)}
.searchform button svg{width:18px;height:18px}

.searchform.big,.searchform.hero-search{max-width:none;border-bottom-width:2px;
  border-bottom-color:var(--ink)}
.searchform.big input,.searchform.hero-search input{font-size:19px;padding:12px 0}
.searchform.big button,.searchform.hero-search button{font-size:14px;font-weight:600;
  color:var(--ink);padding:8px 4px}
.searchform.big{margin-top:22px;max-width:560px}
.hexdot{display:inline-block;width:14px;height:14px;border-radius:2px;
  vertical-align:-2px;margin-right:7px;box-shadow:inset 0 0 0 1px rgba(16,17,20,.12)}

/* ---- hero with the splash behind it ---- */
.hero-inner{position:relative}
.hero-text{position:relative;z-index:1}
.hero-search{max-width:560px;margin-top:30px}
.splash{position:absolute;right:-40px;top:-90px;width:min(620px,58%);height:auto;
  z-index:0;pointer-events:none;opacity:.9}
.splash g{mix-blend-mode:multiply}
.sp-a{fill:#F2B705;opacity:.5}
.sp-b{fill:#3E7CB1;opacity:.42;transform:rotate(-24deg);transform-origin:50% 50%}
.sp-c{fill:#D1495B;opacity:.34;transform:rotate(18deg);transform-origin:50% 50%}
.sp-drops{fill:#2A9D8F;opacity:.5}
@media (max-width:900px){
  .splash{position:static;width:100%;max-width:420px;opacity:.55;margin:0 0 -30px auto;
    display:block}
}
@media (prefers-reduced-motion:no-preference){
  .splash{transition:opacity .3s}
}

.trending{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:18px;
  max-width:600px}
.tr-label{font-size:11px;color:var(--faint);letter-spacing:.06em;margin-right:6px}
.trending a{display:inline-block;font-size:13px;color:var(--soft);
  border:1px solid var(--hair);border-radius:999px;padding:6px 13px;line-height:1;
  transition:border-color .12s,color .12s,background .12s}
.trending a:hover,.trending a:focus-visible{color:var(--ink);border-color:var(--ink);
  background:var(--tint)}

.calc .check{display:flex;align-items:center;gap:9px;align-self:end;padding-bottom:8px}
.calc .check input{width:16px;height:16px;accent-color:var(--ink);margin:0;flex:none}
.calc .check span{font-size:13.5px;color:var(--ink)}
.calc .check i{margin:0 0 0 auto}
.rrow.ceil small{display:block;color:var(--faint);font-size:12px;margin-top:2px}

table.guide-table td{vertical-align:middle}
table.guide-table .th-cell{align-items:center;gap:0}
table.guide-table .th-cell small{display:block;color:var(--faint);font-size:12px;margin-top:1px}
table.guide-table a{color:inherit}
table.guide-table a:hover span:not(.th-sw){text-decoration:underline;text-underline-offset:3px}

/* ---- glossary tooltips ---- */
.term{position:relative;border-bottom:1px dotted var(--faint);cursor:help;
  outline-offset:3px}
.term::after{content:attr(data-tip);position:absolute;left:0;top:calc(100% + 9px);
  z-index:30;width:max(240px,22rem);max-width:min(88vw,360px);
  background:var(--ink);color:var(--page);font-size:12.5px;font-weight:400;
  letter-spacing:0;line-height:1.5;text-transform:none;text-align:left;
  padding:11px 13px;border-radius:2px;
  box-shadow:0 12px 30px -14px rgba(16,17,20,.6);
  opacity:0;visibility:hidden;transform:translateY(-3px);
  transition:opacity .12s,transform .12s,visibility .12s;pointer-events:none}
.term::before{content:"";position:absolute;left:11px;top:calc(100% + 3px);z-index:31;
  border:5px solid transparent;border-bottom-color:var(--ink);
  opacity:0;visibility:hidden;transition:opacity .12s,visibility .12s}
.term:hover::after,.term:focus::after,.term:focus-visible::after,
.term:hover::before,.term:focus::before,.term:focus-visible::before{
  opacity:1;visibility:visible;transform:translateY(0)}

/* near the right edge the bubble would run off screen */
td:last-child .term::after,th:last-child .term::after,
.readout div:nth-child(even) .term::after{left:auto;right:0}
td:last-child .term::before,th:last-child .term::before,
.readout div:nth-child(even) .term::before{left:auto;right:11px}

.readout em .term{border-bottom-color:var(--hair)}
@media (max-width:600px){
  .term::after{position:fixed;left:12px;right:12px;top:auto;bottom:12px;width:auto;
    max-width:none;transform:none}
  .term::before{display:none}
}

/* ---- square cards ---- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:18px}
.card-sq{display:block}
.sq-art{display:grid;grid-template-columns:1fr 1fr;aspect-ratio:1;border-radius:2px;
  overflow:hidden;box-shadow:inset 0 0 0 1px rgba(16,17,20,.07);
  transition:box-shadow .12s,transform .12s}
.sq-art.solid{display:block}
.sq-art i{display:block}
.card-sq:hover .sq-art{box-shadow:0 0 0 2px var(--ink);transform:translateY(-2px)}
.sq-label{display:block;font-size:13.5px;line-height:1.35;margin-top:11px;color:var(--ink)}
.sq-label small{display:block;font-size:12px;color:var(--faint);margin-top:2px}
.card-sq:hover .sq-label{text-decoration:underline;text-underline-offset:3px}
/* small squares, five to a row, beside the guide list */
.fams.stack{grid-template-columns:1fr}
.fam-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.fam-cards .card-sq{min-width:0}
.fam-cards .sq-art{aspect-ratio:1}
.fam-cards .sq-label{font-size:12px;margin-top:7px;line-height:1.3;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.fam-cards .sq-label small{font-size:11px;margin-top:1px}
@media (max-width:600px){
  .cards{grid-template-columns:repeat(2,1fr);gap:14px}
  .fam-cards{grid-template-columns:repeat(4,1fr);gap:9px}
}

/* the wall texture switch sits next to room and light, so the row wraps */
.controls{align-items:flex-start}
.controls .seg{flex-wrap:wrap;row-gap:6px}
/* ---- save button ---- */
.copybtn.fav{display:inline-flex;align-items:center;gap:7px}
.copybtn.fav .heart{color:var(--faint);font-size:14px;line-height:1;
  transition:color .15s,transform .15s}
.copybtn.fav.on .heart{color:#C0392B;transform:scale(1.15)}
.copybtn.fav[disabled]{opacity:.5;cursor:default}

/* ---- account pages ---- */
/* ---- sign in / create account: a card, not a bare form ---- */
.loginpage{max-width:400px;margin:56px auto 40px}

.loginswatches{display:flex;gap:6px;justify-content:center;margin-bottom:24px}
.loginswatches i{width:22px;height:22px;border-radius:3px;
  box-shadow:inset 0 0 0 1px rgba(16,17,20,.1)}

.logincard{background:var(--page);border:1px solid var(--hair);border-radius:6px;
  padding:36px 32px 32px;box-shadow:0 24px 60px -36px rgba(16,17,20,.3)}
.logincard h1{font-size:25px;font-weight:600;letter-spacing:-.02em;text-align:center}

.login .sub{color:var(--soft);font-size:13.5px;margin-top:8px;text-align:center;
  line-height:1.5}
.login label small{color:var(--faint);text-transform:none;letter-spacing:0;
  font-size:11px;margin-left:4px}

.logincard form{margin-top:26px}
.logincard label{display:block;font-size:11px;color:var(--faint);letter-spacing:.05em;
  margin-bottom:20px}
.logincard input{display:block;width:100%;font:inherit;font-size:16px;padding:9px 0;
  margin-top:7px;background:none;border:0;border-bottom:1px solid var(--hair);
  transition:border-color .15s}
.logincard input:focus{outline:0;border-bottom-color:var(--ink)}
.logincard button{width:100%;font:inherit;font-size:14px;font-weight:600;
  background:var(--ink);color:var(--page);border:0;border-radius:3px;padding:13px;
  cursor:pointer;transition:opacity .15s;margin-top:6px}
.logincard button:hover{opacity:.88}
.logincard button:active{opacity:.78}
.logincard .err{margin-top:18px}

.login .swap{margin-top:22px;font-size:13.5px;color:var(--soft);text-align:center}

@media (max-width:460px){
  .logincard{padding:30px 22px 26px}
}

/* ---- saved colors ---- */
.favhead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  padding-top:34px}
.favhead h1{font-size:28px;font-weight:600;letter-spacing:-.022em}
.favsub{color:var(--soft);font-size:13.5px;margin-top:6px}
.favwho{font-size:12.5px;color:var(--faint)}

.favtabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;
  border-bottom:1px solid var(--hair);padding-bottom:14px}
.favtabs a{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--soft);
  border:1px solid var(--hair);border-radius:999px;padding:6px 13px;line-height:1;
  transition:border-color .12s,color .12s,background .12s}
.favtabs a span{font-size:11.5px;color:var(--faint)}
.favtabs a:hover{border-color:var(--ink);color:var(--ink)}
.favtabs a.on{background:var(--ink);border-color:var(--ink);color:var(--page)}
.favtabs a.on span{color:rgba(255,255,255,.65)}

/* the toolbar follows the page, because the selection is made further down */
.favbar{position:sticky;top:0;z-index:6;display:flex;align-items:center;gap:14px;
  flex-wrap:wrap;margin:20px 0 22px;padding:11px 14px;background:var(--page);
  border:1px solid var(--hair);border-radius:3px;
  box-shadow:0 10px 24px -20px rgba(16,17,20,.5)}
.favbar .pick{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--soft)}
.favbar .pick input{width:15px;height:15px;accent-color:var(--ink)}
.favbar .picked{font-size:12.5px;color:var(--faint);min-width:94px}
.favbar .acts{display:flex;align-items:center;gap:8px;margin-left:auto;flex-wrap:wrap}
.favbar button,.favbar select{font:inherit;font-size:13px;padding:7px 14px;
  background:var(--page);color:var(--ink);border:1px solid var(--hair);border-radius:2px;
  cursor:pointer;transition:border-color .12s,background .12s,color .12s}
.favbar button:hover:not([disabled]),.favbar select:hover:not([disabled]){border-color:var(--ink)}
.favbar button[disabled],.favbar select[disabled]{opacity:.4;cursor:default}
.favbar .danger:hover:not([disabled]){border-color:#B23A2E;color:#B23A2E}

.favgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}

.favcard{position:relative;display:flex;align-items:center;gap:13px;padding:11px;
  background:var(--page);border:1px solid var(--hair);border-radius:3px;cursor:pointer;
  transition:border-color .12s,box-shadow .12s,transform .12s}
.favcard:hover{border-color:var(--soft);transform:translateY(-1px);
  box-shadow:0 12px 24px -20px rgba(16,17,20,.55)}
.favcard.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.favcard input{position:absolute;opacity:0;pointer-events:none}

.favswatch{position:relative;width:58px;height:58px;border-radius:3px;flex:none;
  box-shadow:inset 0 0 0 1px rgba(16,17,20,.12)}
.favswatch .tick{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;font-size:20px;color:#fff;opacity:0;
  background:rgba(16,17,20,.45);border-radius:3px;transition:opacity .12s}
.favcard.on .tick{opacity:1}

.favmeta{display:flex;flex-direction:column;gap:2px;min-width:0}
.favmeta b{font-size:14px;font-weight:600;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.favmeta small{font-size:12px;color:var(--soft)}
.favmeta .dim{color:var(--faint);font-size:11.5px}

.favopen{position:absolute;right:10px;top:10px;font-size:15px;color:var(--faint);
  line-height:1;padding:3px 5px;border-radius:2px;opacity:0;transition:opacity .12s}
.favcard:hover .favopen{opacity:1}
.favopen:hover{color:var(--ink);background:var(--tint)}

.favempty{margin-top:40px;color:var(--soft);max-width:52ch}

.favdlg{border:0;border-radius:4px;padding:26px;max-width:380px;width:calc(100% - 32px);
  box-shadow:0 30px 60px -30px rgba(16,17,20,.6)}
.favdlg::backdrop{background:rgba(16,17,20,.35)}
.favdlg h3{font-size:18px;font-weight:600;letter-spacing:-.015em}
.favdlg .dim{color:var(--faint);font-size:12.5px;margin-top:6px}
.favdlg label{display:block;font-size:11px;color:var(--faint);letter-spacing:.05em;
  margin-top:18px}
.favdlg input[type=text]{display:block;width:100%;font:inherit;font-size:15px;
  padding:9px 0;margin-top:6px;background:none;border:0;border-bottom:1px solid var(--hair)}
.favdlg input[type=text]:focus{outline:0;border-bottom-color:var(--ink)}
.dlgacts{display:flex;justify-content:flex-end;gap:10px;margin-top:24px}
.dlgacts button{font:inherit;font-size:13.5px;padding:9px 18px;border-radius:2px;
  border:1px solid var(--hair);background:var(--page);color:var(--ink);cursor:pointer}
.dlgacts .primary{background:var(--ink);border-color:var(--ink);color:var(--page)}

@media (max-width:600px){
  .favgrid{grid-template-columns:1fr}
  .favbar .acts{margin-left:0;width:100%}
  .favbar button,.favbar select{flex:1 1 auto}
}

/* ---- header ---- */
.topnav{display:flex;align-items:center;gap:20px;margin-left:auto;flex:none}
.topnav a{position:relative;font-size:13px;color:var(--soft);white-space:nowrap;
  transition:color .12s}
.topnav a:hover{color:var(--ink)}
.topnav a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;
  background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .16s}
.topnav a:hover::after{transform:scaleX(1)}
.topnav .who{display:inline-flex;align-items:center;gap:7px;color:var(--ink);
  border:1px solid var(--hair);border-radius:999px;padding:5px 13px}
.topnav .who::after{display:none}
.topnav .who:hover{border-color:var(--ink)}
.topbar .topnote{font-size:12.5px;color:var(--faint);margin-left:18px;flex:none}
.topbar .mark b{letter-spacing:-.015em}

/* ---- bottom bar, phones and tablets ---- */
.tabbar{display:none}

@media (max-width:1024px){
  /* the header keeps the wordmark; everything else moves to the thumb */
  .topbar .searchform,.topbar .topnav{display:none}

  /* The logo stays in the normal flex flow (left) and the page label (topnote)
     sits on the right. Neither is taken out of the flow, so they can never
     overlap; a long label is cut with an ellipsis instead of running under
     the logo. */
  .topbar .wrap{justify-content:space-between;gap:14px}
  .topbar .mark{position:static;transform:none;flex:none}
  .topbar .mark .logo{height:34px}
  .topbar .topnote{flex:0 1 auto;min-width:0;margin-left:auto;text-align:right;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  /* no label on this page: the logo can take the centre of the bar */
  .topbar .wrap:not(:has(.topnote)){justify-content:center}

  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;
    align-items:stretch;background:var(--page);
    border-top:1px solid var(--hair);
    padding-bottom:env(safe-area-inset-bottom);
    box-shadow:0 -10px 30px -22px rgba(16,17,20,.55)}

  .tabbar a{position:relative;flex:7;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:4px;padding:9px 2px 8px;
    color:var(--faint);font-size:10.5px;letter-spacing:.01em;
    transition:color .12s}
  .tabbar a svg{width:23px;height:23px}
  .tabbar a:active,.tabbar a:hover{color:var(--ink)}

  /* search is the one people reach for, so it is wider and darker */
  .tabbar .mid{flex:10;color:var(--ink);font-weight:600}
  .tabbar .mid svg{width:26px;height:26px}
  .tabbar .mid::before{content:"";position:absolute;top:0;left:12%;right:12%;height:2px;
    background:var(--ink)}

  .tabbar .badge{position:absolute;top:5px;left:calc(50% + 6px);min-width:16px;height:16px;
    display:flex;align-items:center;justify-content:center;font-style:normal;font-size:10px;
    line-height:1;color:var(--page);background:var(--ink);border-radius:999px;padding:0 4px}

  /* nothing should end up underneath the bar */
  body{padding-bottom:64px}
  /* the tab bar owns the bottom 64px on narrow screens, so the compare list
     rides just above it instead of sitting underneath */
  .cmplist{bottom:64px}
}

/* ---- account dashboard ---- */
.panel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:16px;margin-top:26px}
.panel{display:flex;flex-direction:column;gap:5px;padding:18px;background:var(--page);
  border:1px solid var(--hair);border-radius:3px;color:var(--ink);
  transition:border-color .12s,transform .12s,box-shadow .12s}
a.panel:hover{border-color:var(--ink);transform:translateY(-1px);
  box-shadow:0 14px 26px -22px rgba(16,17,20,.55)}
.panel b{font-size:14.5px;font-weight:600;letter-spacing:-.01em}
.panel span{font-size:13px;color:var(--soft)}
.panel small{font-size:12px;color:var(--faint);line-height:1.45;margin-top:4px}
.panel.off{opacity:.55}
.signout{margin-top:28px;font-size:13.5px}
.signout a{color:var(--soft)}
.signout a:hover{color:#B23A2E}

/* ---- while a render is being built ---- */
.viewport{position:relative}

.shotload{position:absolute;inset:0;overflow:hidden;border-radius:inherit;
  background:#F2F0EC;display:flex;align-items:flex-end;justify-content:center}

.shotload .painter{display:block;height:100%}
.shotload .painter svg{height:100%;width:auto}

/* every part that was orange is the paint, so it takes the page's colour */
.shotload .pc-wall{fill:var(--c)}
.shotload .pc-drum{fill:var(--c)}
.shotload .pc-drips{fill:var(--c);stroke:var(--c)}

/* the paw, the pole and the roller travel together */
.shotload .pc-arm{animation:pcRoll 2.5s ease-in-out infinite}

.shotload .word{position:absolute;right:16px;bottom:14px;font-size:11px;
  letter-spacing:.09em;text-transform:uppercase;color:rgba(16,17,20,.4)}

@keyframes pcRoll{
  0%   {transform:translateY(0)}
  50%  {transform:translateY(-90px)}
  100% {transform:translateY(0)}
}

@media (prefers-reduced-motion:reduce){
  .shotload .pc-arm{animation:none}
}
@media (max-width:600px){
  .shotload .word{font-size:10px;right:10px;bottom:10px}
}

/* the catalog talking about one of its own */
.notes .insight{margin-top:14px;padding-top:14px;border-top:1px solid var(--hair);
  color:var(--soft)}

.footlinks{margin-top:12px}
.footlinks a{color:var(--soft);border-bottom:1px solid var(--hair)}
.footlinks a:hover{color:var(--ink);border-bottom-color:var(--soft)}

/* ---- cookie consent ---- */
.consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:50;
  max-width:460px;margin:0 auto;padding:16px 18px;background:var(--ink);
  color:var(--page);border-radius:4px;
  box-shadow:0 20px 50px -20px rgba(16,17,20,.6);
  display:flex;flex-direction:column;gap:12px}
.consent p{font-size:13px;line-height:1.5;color:rgba(255,255,255,.86)}
.consent p a{color:var(--page);border-bottom:1px solid rgba(255,255,255,.4)}
.consent p a:hover{border-bottom-color:var(--page)}
.consent-acts{display:flex;gap:8px;justify-content:flex-end}
.consent-acts button{font:inherit;font-size:13px;padding:8px 16px;border-radius:2px;
  border:1px solid rgba(255,255,255,.3);background:none;color:var(--page);cursor:pointer}
.consent-acts button:hover{border-color:var(--page)}
.consent-acts .primary{background:var(--page);color:var(--ink);border-color:var(--page)}
.consent-acts .primary:hover{opacity:.88}

@media (max-width:1024px){
  /* stay above the bottom tab bar on phones */
  .consent{bottom:76px}
}
/* --- pc-faq: the schema-visible FAQ block inside "About this color" ---
   Append to style.css. Uses the site's own CSS variables when they exist
   (--line, --soft, --faint, --ink) and falls back to plain neutral values
   when they don't, so this won't look broken either way. */

.pc-faq {
    margin-top: 18px;
    padding-top: 12px;
    border-top: 1px solid var(--line, rgba(0, 0, 0, .08));
}

.pc-faq details {
    border-bottom: 1px solid var(--line, rgba(0, 0, 0, .08));
}

.pc-faq details:last-child {
    border-bottom: none;
}

.pc-faq summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 2px;
    font-size: 14px;
    font-weight: 500;
    color: var(--soft, #55606e);
    user-select: none;
}

.pc-faq summary::-webkit-details-marker {
    display: none;
}

.pc-faq summary::before {
    content: '\203A';
    display: inline-block;
    flex: none;
    width: 12px;
    font-size: 16px;
    line-height: 1;
    color: var(--faint, #99a1ab);
    transition: transform .15s ease;
}

.pc-faq details[open] summary::before {
    transform: rotate(90deg);
}

.pc-faq details[open] summary {
    color: var(--ink, #1a1d21);
}

.pc-faq p {
    margin: 0 0 14px 20px;
    padding-right: 8px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--soft, #667085);
}

/* --- shot-label: name/brand overlay on compare.php's side-by-side images ---
   Without this, two or more room renders sitting next to each other give no
   visual way to tell which wall is which color except by memorizing the
   heading above. The figure needs position:relative for the overlay to dock
   to its corner; .viewport is reused from color.php's hero shot, which never
   had an absolutely-positioned child before, so adding this here is safe. */

.viewport {
    position: relative;
}

.shot-label {
    position: absolute;
    left: 10px;
    bottom: 10px;
    display: flex;
    align-items: center;
    gap: 7px;
    max-width: calc(100% - 20px);
    padding: 7px 11px;
    border-radius: 8px;
    background: rgba(20, 20, 22, .62);
    backdrop-filter: blur(3px);
    color: #fff;
    font-size: 13px;
    line-height: 1.25;
}

.shot-label .dot {
    flex: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .5);
}

.shot-label .name {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shot-label .meta {
    color: rgba(255, 255, 255, .72);
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =====================================================================
   Added October 2026 - previously printed inline by PHP.
   ===================================================================== */

/* shared: hairline box with a light shadow (readout, about, pairing cards) */
.readout,.about-box,.pcard{box-shadow:0 12px 28px -22px rgba(16,17,20,.35)}

/* ---- about this color: compact, collapsible ---- */
.about-box{border:1px solid var(--hair);border-radius:2px;background:var(--page);padding:15px 18px 0}
.about-box .about-body{position:relative;max-height:112px;overflow:hidden}
.about-box .about-body::after{content:"";position:absolute;left:0;right:0;bottom:0;height:52px;
  background:linear-gradient(rgba(255,255,255,0),var(--page));pointer-events:none}
.about-box.open .about-body{max-height:none}
.about-box.open .about-body::after{display:none}
.about-box .about-body p{font-size:14px;line-height:1.66;max-width:none}
.about-box .about-body p + p{margin-top:11px}
.about-box .about-body .insight{margin-top:11px;padding-top:11px}
.about-box .lightnote{margin-top:12px;font-size:13px;line-height:1.55;padding-left:12px}
.about-box .lightnote:empty{display:none}
.about-toggle{display:block;width:100%;font:inherit;font-size:12px;letter-spacing:.05em;
  color:var(--soft);background:none;border:0;border-top:1px solid var(--hair);
  margin-top:12px;padding:11px 0 12px;cursor:pointer;text-align:left}
.about-toggle:hover{color:var(--ink)}
.about-toggle::after{content:" \2193"}
.about-box.open .about-toggle::after{content:" \2191"}

/* ---- FAQ: two columns of one-line questions ---- */
.faq-sec{border-top:0;margin-top:30px;padding-top:0}
.faq-box{border:1px solid var(--hair);border-radius:2px;background:var(--page);padding:15px 18px 4px;
  box-shadow:0 12px 28px -22px rgba(16,17,20,.35)}
.faq-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 32px;align-items:start}
.faq-col details{border-top:1px solid var(--hair)}
.faq-col summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:9px;
  padding:10px 0;font-size:13.5px;color:var(--soft);user-select:none}
.faq-col summary::-webkit-details-marker{display:none}
.faq-col summary::before{content:"+";flex:none;width:12px;font-size:15px;line-height:1;
  color:var(--faint);transition:transform .15s}
.faq-col details[open] summary::before{transform:rotate(45deg)}
.faq-col summary span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.faq-col summary:hover,.faq-col details[open] summary{color:var(--ink)}
.faq-col details[open] summary span{white-space:normal}
.faq-col p{margin:0 0 12px 21px;font-size:13.5px;line-height:1.6;color:var(--soft)}
@media (max-width:760px){.faq-cols{grid-template-columns:1fr}
  .faq-col + .faq-col details:first-child{border-top:1px solid var(--hair)}}

/* ---- verified line under the spec table ---- */
.verified{margin-top:10px;font-size:12.5px;color:var(--faint)}
.verified span{color:#2E7D4F;font-weight:600;margin-right:3px}

/* ---- pairing: colors that work with it | closest match at other brands ---- */
.pair-sec{border-top:0;margin-top:0;padding-top:0}
.pair-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
.pcard{min-width:0;display:flex;flex-direction:column;border:1px solid var(--hair);
  border-radius:2px;background:var(--page);padding:15px 18px 6px}
.pcard-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px}
.pcard-h h2{font-size:15px;font-weight:600;letter-spacing:-.005em}
.pcard-h span{font-size:12px;color:var(--faint)}
.pal{display:flex;height:34px;border-radius:2px;overflow:hidden;margin-bottom:6px;
  box-shadow:inset 0 0 0 1px rgba(16,17,20,.06)}
.pal i{flex:1}
.pal i.self{flex:2}
.mlist{display:flex;flex-direction:column}
.mrow{display:grid;grid-template-columns:52px minmax(0,1fr) auto auto;align-items:center;
  gap:12px;padding:9px 0;border-top:1px solid var(--hair)}
.mlist .mrow:first-child{border-top:0}
.mrow.hrow{grid-template-columns:30px minmax(0,1fr) auto}
.msw{display:flex;height:30px;border-radius:2px;overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(16,17,20,.08)}
.msw i{flex:1}
.hsw{width:30px;height:30px;border-radius:2px;box-shadow:inset 0 0 0 1px rgba(16,17,20,.08)}
.mt{min-width:0;line-height:1.35}
.mt b{display:block;font-weight:400;font-size:13.5px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.mt small{display:block;color:var(--faint);font-size:12px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.mt:hover b{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--faint)}
.hrole{font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);
  text-align:right;white-space:nowrap}
.mq{font-size:11.5px;font-weight:600;padding:3px 8px;border-radius:2px;white-space:nowrap}
.mq i{font-style:normal;font-weight:400;opacity:.75;margin-left:3px}
.mq.q1{background:#E6F2EA;color:#1F6B3A}
.mq.q2{background:#E9F0F8;color:#245A8A}
.mq.q3{background:#F8F1E3;color:#86590F}
.mq.q4{background:var(--tint);color:var(--soft)}
.mc{font-size:12px;color:var(--soft);border-bottom:1px solid var(--hair);padding-bottom:1px}
.mc:hover{color:var(--ink);border-bottom-color:var(--soft)}
@media (max-width:920px){.pair-grid{grid-template-columns:1fr}}
@media (max-width:560px){.mrow{grid-template-columns:46px minmax(0,1fr) auto}.mc{display:none}}

/* ---- color codes, Pantone / RAL, shades and tints ---- */
.conv{width:100%;border-collapse:collapse;font-size:13.5px}
.conv td{padding:8px 0;border-bottom:1px solid var(--hair)}
.conv td:first-child{color:var(--faint);width:30%}
.conv td:last-child{text-align:right;color:#25272B}
.sys{width:100%;border-collapse:collapse;font-size:13.5px}
.sys td{padding:7px 0;border-bottom:1px solid var(--hair);vertical-align:middle}
.sys td:first-child{width:34px}
.sys td:last-child{text-align:right}
.sys .sw{display:inline-block;width:22px;height:22px;border-radius:2px;vertical-align:middle;
  box-shadow:inset 0 0 0 1px rgba(16,17,20,.08)}
.sys b{font-weight:600}
.sys small{color:var(--faint);font-size:12px}
.ts{display:grid;grid-template-columns:repeat(9,1fr);gap:6px}
.ts a{display:block;font-size:11px;text-align:center;color:var(--soft)}
.ts a span{display:block;height:56px;border-radius:2px;margin-bottom:6px;
  box-shadow:inset 0 0 0 1px rgba(16,17,20,.06);transition:box-shadow .12s}
.ts a:hover span{box-shadow:0 0 0 2px var(--ink)}
.ts a.base span{box-shadow:0 0 0 2px var(--ink)}
.ts small{display:block;color:var(--faint);font-size:10.5px}
.fine{font-size:12px;color:var(--faint);margin-top:10px;line-height:1.55}
@media (max-width:640px){.ts{grid-template-columns:repeat(5,1fr)}.ts a span{height:42px}}

/* ---- retired colours ---- */
.tile.retired .sw,.swatch.retired .sw{position:relative;overflow:hidden;
  filter:saturate(.85) brightness(.97)}
.tile.retired .sw::after,.swatch.retired .sw::after{content:"RETIRED";position:absolute;
  top:12px;right:-30px;transform:rotate(35deg);background:rgba(28,28,30,.82);color:#fff;
  font:600 9px/1 Archivo,system-ui,sans-serif;letter-spacing:.12em;padding:4px 32px}
.retired-ribbon{position:absolute;top:14px;right:14px;z-index:4;display:flex;align-items:center;
  gap:7px;background:rgba(255,255,255,.88);backdrop-filter:blur(6px);color:#2B2B2B;
  border-radius:999px;padding:6px 13px 6px 9px;font-size:12px;font-weight:500;line-height:1.2;
  box-shadow:0 1px 4px rgba(0,0,0,.12)}
.retired-ribbon svg{width:18px;height:18px;opacity:.75}
.viewport.is-retired img#shot{filter:saturate(.9)}
.retired-note{margin-top:10px;padding:12px 14px;border:1px solid var(--hair);border-radius:2px;
  background:var(--tint);font-size:13.5px;line-height:1.55}
.retired-note b{font-weight:600}

/* ---- this color's gallery ---- */
.gal{display:grid;grid-template-columns:repeat(8,1fr);gap:6px}
.gal-i{position:relative;display:block;border-radius:2px;overflow:hidden;background:var(--tint);
  aspect-ratio:4/3}
.gal-i img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.gal-i:hover img{transform:scale(1.04)}
.gal-i span{position:absolute;left:4px;bottom:4px;max-width:calc(100% - 8px);font-size:10px;
  line-height:1.2;color:#fff;background:rgba(20,20,22,.58);backdrop-filter:blur(3px);
  padding:2px 5px;border-radius:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  opacity:0;transition:opacity .15s}
.gal-i:hover span,.gal-i:focus-visible span{opacity:1}
.gal .more{display:none}
.gal.all .more{display:block}
.gal-all{margin-top:14px;font:inherit;font-size:13px;color:var(--soft);background:none;border:0;
  border-bottom:1px solid var(--hair);padding:0 0 3px;cursor:pointer}
.gal-all:hover{color:var(--ink);border-bottom-color:var(--soft)}

/* ---- rooms in other colors of the family ---- */
.fr{display:grid;grid-template-columns:repeat(8,1fr);gap:10px}
.fr-i{display:block;min-width:0}
.fr-i img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:2px;
  background:var(--tint);transition:box-shadow .12s}
.fr-i:hover img{box-shadow:0 0 0 2px var(--ink)}
.fr-t{display:grid;grid-template-columns:9px minmax(0,1fr);column-gap:6px;margin-top:6px;
  align-items:center}
.fr-t i{width:9px;height:9px;border-radius:2px;box-shadow:inset 0 0 0 1px rgba(16,17,20,.12)}
.fr-t b{font-weight:400;font-size:12px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fr-t small{grid-column:2;font-size:11px;line-height:1.3;color:var(--faint);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.fr-i:hover b{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--faint)}
@media (max-width:920px){.gal,.fr{grid-template-columns:repeat(5,1fr)}}
@media (max-width:560px){.gal,.fr{grid-template-columns:repeat(3,1fr)}}

/* ---- lightbox ---- */
.lb{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100vw;
  height:100vh;display:none;align-items:center;justify-content:center}
.lb[open]{display:flex}
.lb::backdrop{background:rgba(12,12,14,.86)}
.lb figure{margin:0;max-width:min(1200px,92vw)}
.lb img{display:block;max-width:100%;max-height:82vh;border-radius:2px}
.lb figcaption{margin-top:10px;color:rgba(255,255,255,.75);font-size:13px;text-align:center}
.lb button{position:absolute;background:rgba(255,255,255,.1);color:#fff;border:0;cursor:pointer;
  font-size:30px;line-height:1;width:46px;height:46px;border-radius:50%}
.lb button:hover{background:rgba(255,255,255,.22)}
.lb-x{top:18px;right:18px}
.lb-p{left:18px;top:50%;transform:translateY(-50%)}
.lb-n{right:18px;top:50%;transform:translateY(-50%)}
@media (max-width:600px){.lb-p,.lb-n{top:auto;bottom:18px;transform:none}}

/* ---- home hero: the cat painting the wall ---- */
.hero-art{position:absolute;right:0;top:-30px;width:min(340px,34%);aspect-ratio:4/5;z-index:0;
  border-radius:4px;overflow:hidden;box-shadow:0 30px 60px -34px rgba(16,17,20,.45)}
.hero-art .hp{display:block;width:100%;height:100%}
.hp-arm{transform-origin:510px 360px;animation:hpRoll 1.15s ease-in-out infinite alternate}
@keyframes hpRoll{from{transform:rotate(0)}to{transform:rotate(-14deg)}}
.hp-tail{transform-origin:425px 745px;animation:hpTail 2.6s ease-in-out infinite alternate}
@keyframes hpTail{from{transform:rotate(-3deg)}to{transform:rotate(7deg)}}
.hp-eyes{transform-origin:507px 308px;animation:hpBlink 6s infinite}
@keyframes hpBlink{0%,94%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
.hp-drip{animation:hpDrip 1.5s ease-in infinite}
.hp-drip.d2{animation-delay:.7s}
@keyframes hpDrip{0%{transform:translateY(0);opacity:1}80%{opacity:1}100%{transform:translateY(46px);opacity:0}}
.hp-chip{position:absolute;left:12px;bottom:12px;right:12px;display:flex;align-items:center;gap:9px;
  max-width:max-content;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);color:var(--ink);
  border-radius:999px;padding:6px 14px 6px 7px;font-size:12.5px;line-height:1.25;
  box-shadow:0 6px 18px -10px rgba(16,17,20,.5);transition:opacity .2s,transform .2s}
.hp-chip.swap{opacity:0;transform:translateY(4px)}
.hp-chip i{flex:none;width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(16,17,20,.15)}
.hp-chip span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--soft)}
.hp-chip small{display:block;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.hp-chip b{font-weight:600;color:var(--ink)}
.hp-chip:hover b{text-decoration:underline;text-underline-offset:3px}
@media (min-width:901px){.hero-art ~ .hero-text{padding-right:calc(min(340px,34%) + 44px)}}
@media (max-width:900px){
  .hero-art{position:relative;top:0;width:100%;max-width:280px;margin:0 auto 26px}
}

/* ---- Zeytin ---- */
.hp-name{position:absolute;top:12px;left:12px;font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;color:rgba(255,255,255,.9);background:rgba(16,17,20,.42);
  backdrop-filter:blur(4px);padding:4px 9px;border-radius:999px;cursor:default}
footer .zeytin{margin-top:10px;color:var(--soft)}
footer .zeytin i{font-style:normal;color:var(--faint)}

/* ---- about Zeytin ---- */
.zt{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:56px;align-items:start;
  padding:46px 0 10px}
.zt-art{position:sticky;top:24px;margin:0;aspect-ratio:4/5;border-radius:4px;overflow:hidden;
  box-shadow:0 30px 60px -34px rgba(16,17,20,.45)}
.zt-art svg{display:block;width:100%;height:100%}
.zt-text{max-width:62ch}
.zt h1{font-size:clamp(2rem,4vw,2.8rem);font-weight:600;letter-spacing:-.03em;line-height:1.05}
.zt p{font-size:17px;line-height:1.78;color:#25272B;margin-top:18px}
.zt .zt-lede{font-size:18px;color:var(--soft);margin-top:14px}
.zt .zt-beat{font-size:24px;font-weight:600;letter-spacing:-.015em;color:var(--ink);margin-top:30px}
.zt .zt-end{font-style:italic;color:var(--soft)}
.zt .zt-cta{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:30px}
.zt .zt-cta .cta{margin:0}
footer .zeytin a{color:var(--soft);border-bottom:1px solid var(--hair)}
footer .zeytin a:hover{color:var(--ink);border-bottom-color:var(--soft)}
@media (max-width:820px){
  .zt{grid-template-columns:1fr;gap:28px;padding-top:28px}
  .zt-art{position:relative;top:0;max-width:260px}
}

/* ---- Zeytin chasing a ball of yarn ---- */
.zt-chase{position:relative;height:110px;overflow:hidden;border-bottom:1px solid var(--hair);margin-top:18px}
.zt-runner{position:absolute;bottom:0;left:100%;display:flex;align-items:flex-end;
  animation:ztRun 6.5s linear infinite}
@keyframes ztRun{0%{left:100%}70%{left:-340px}100%{left:-340px}}
.zt-yarn{width:38px;height:38px;margin-bottom:1px;animation:ztBounce .38s ease-out infinite alternate}
.zt-yarn-spin{animation:ztSpin .6s linear infinite}
@keyframes ztSpin{to{transform:rotate(-360deg)}}
@keyframes ztBounce{from{transform:translateY(0)}to{transform:translateY(-14px)}}
.zt-thread{width:60px;height:40px;margin-left:-6px}
.zt-cat{width:190px;height:105px;margin-left:-4px;animation:ztGallop .3s ease-in-out infinite alternate}
@keyframes ztGallop{from{transform:translateY(0) rotate(0)}to{transform:translateY(-9px) rotate(-3deg)}}
.zt-legs.b{animation:ztLegs .3s steps(1) infinite}
.zt-legs.a{animation:ztLegs .3s steps(1) infinite reverse}
@keyframes ztLegs{0%{opacity:1}50%{opacity:0}}
.zt-tailr{transform-origin:148px 50px;animation:ztTail .3s ease-in-out infinite alternate}
@keyframes ztTail{from{transform:rotate(-6deg)}to{transform:rotate(8deg)}}
@media (prefers-reduced-motion:reduce){.zt-runner{left:30%}.zt-legs.b{opacity:0}}

/* ---- Zeytin peeking up from the bottom edge ---- */
.zt-peek{position:fixed;bottom:0;left:6%;z-index:35;pointer-events:none;line-height:0;
  transform:translateY(105%)}
.zt-peek.r{left:auto;right:6%}
.zt-peek.go{animation:ztPeek 4.2s ease-in-out forwards}
.zt-peek.go .zt-pupils{animation:ztLook 4.2s ease-in-out}
.zt-peek.r svg{transform:scaleX(-1)}
@keyframes ztPeek{0%{transform:translateY(105%)}14%{transform:translateY(8%)}
  20%{transform:translateY(14%)}80%{transform:translateY(14%)}100%{transform:translateY(105%)}}
@keyframes ztLook{0%,22%{transform:translateX(0)}32%,44%{transform:translateX(-6px)}
  54%,66%{transform:translateX(6px)}76%,100%{transform:translateX(0)}}
@media (max-width:1024px){.zt-peek{bottom:64px}}   /* sit above the tab bar */
@media (max-width:600px){.zt-peek svg{width:84px;height:65px}}

/* ---- paint calculator: result sits at the bottom, Zeytin does the sums above it ---- */
.halves.calc-halves{align-items:stretch}
.calc-right{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:0}
.calc-right .result{width:100%}
.zc{display:block;margin-bottom:-1px}
.zc-tap{animation:zcTap 1.9s ease-in-out infinite}
.zc.busy .zc-tap{animation-duration:.55s}
@keyframes zcTap{0%{transform:translate(0,0)}6%{transform:translate(-3px,6px)}12%{transform:translate(0,0)}
  18%{transform:translate(-14px,6px)}24%{transform:translate(-8px,0)}30%{transform:translate(4px,17px)}
  36%{transform:translate(0,0)}100%{transform:translate(0,0)}}
.zc-eyes{animation:zcBlink 5s infinite;transform-origin:120px 82px}
@keyframes zcBlink{0%,95%,100%{transform:scaleY(1)}97%{transform:scaleY(.15)}}
@media (max-width:920px){.calc-right{margin-top:10px}}

/* ---- Zeytin's pick today (home) ---- */
.zp-sec{border-top:0;margin-top:0;padding-top:40px}
.zp{display:grid;grid-template-columns:220px minmax(0,1fr);gap:28px;align-items:stretch;
  border:1px solid var(--hair);border-radius:4px;padding:16px;background:var(--page);
  box-shadow:0 12px 28px -22px rgba(16,17,20,.35)}
.zp-sw{position:relative;display:block;min-height:170px;border-radius:2px;
  box-shadow:inset 0 0 0 1px rgba(16,17,20,.06)}
.zp-paw{position:absolute;right:10px;bottom:8px;opacity:.85;transform:rotate(-18deg)}
.zp-body{display:flex;flex-direction:column;justify-content:center;padding:4px 8px 4px 0}
.zp-k{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--faint)}
.zp h2{font-size:26px;font-weight:600;letter-spacing:-.02em;margin-top:6px;line-height:1.15}
.zp h2 a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--faint)}
.zp-m{font-size:13px;color:var(--faint);margin-top:2px}
.zp-n{font-size:14.5px;line-height:1.65;color:#25272B;margin-top:10px;max-width:62ch}
.zp-a{display:flex;align-items:center;gap:20px;margin-top:14px}
.zp-a .cta{margin:0;font-size:13px;padding:9px 16px}
@media (max-width:640px){.zp{grid-template-columns:1fr}.zp-sw{min-height:120px}}

/* ---- light modes: Zeytin poses in the corner of the render ---- */
.pcz-light{position:absolute;right:10px;bottom:6px;z-index:3;pointer-events:none;line-height:0;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.25))}
.pcz-light g[class^="p-"]{opacity:0;transition:opacity .45s}
.pcz-light[data-m="ambient"] .p-ambient,.pcz-light[data-m="afternoon"] .p-afternoon,
.pcz-light[data-m="morning"] .p-morning,.pcz-light[data-m="night"] .p-night{opacity:1}
.pcz-z text{animation:pczZ 2.4s ease-in-out infinite;opacity:0}
.pcz-z text:nth-child(2){animation-delay:.6s}.pcz-z text:nth-child(3){animation-delay:1.2s}
@keyframes pczZ{0%{opacity:0;transform:translateY(6px)}30%{opacity:.9}100%{opacity:0;transform:translateY(-8px)}}
@media (max-width:600px){.pcz-light svg{width:64px;height:54px}}

/* ---- compare: Zeytin's verdict ---- */
.pcz-ref{display:flex;align-items:center;gap:18px;margin-top:28px;padding:12px 18px 12px 10px;
  border:1px solid var(--hair);border-radius:4px;background:var(--page);
  box-shadow:0 12px 28px -22px rgba(16,17,20,.35)}
.pcz-ref svg{flex:none}
.pcz-look{animation:pczLook 4s ease-in-out infinite}
@keyframes pczLook{0%,15%{transform:translateX(-2.6px)}35%,60%{transform:translateX(2.6px)}80%,100%{transform:translateX(-2.6px)}}
.pcz-tail{transform-origin:124px 108px;animation:pczTail 2.8s ease-in-out infinite alternate}
@keyframes pczTail{from{transform:rotate(-4deg)}to{transform:rotate(6deg)}}
.pcz-chipl{transform-origin:30px 110px;transform:rotate(-6deg)}
.pcz-chipr{transform-origin:170px 110px;transform:rotate(6deg)}
.pcz-say{position:relative;font-size:17px;font-weight:600;letter-spacing:-.01em;line-height:1.4}
.pcz-say small{display:block;font-size:11px;font-weight:400;letter-spacing:.06em;
  text-transform:uppercase;color:var(--faint);margin-bottom:4px}
@media (max-width:560px){.pcz-ref svg{width:130px;height:75px}.pcz-say{font-size:15px}}

/* ---- 404: Zeytin painted over this page ---- */
.nf{border-top:0;padding-top:30px;text-align:center}
.nf .pcz-404{display:block;margin:0 auto;max-width:100%;height:auto}
.nf h1{font-size:clamp(1.7rem,3.6vw,2.4rem);font-weight:600;letter-spacing:-.025em;margin-top:8px}
.nf-sub{color:var(--soft);margin:10px auto 0;max-width:56ch}
.nf .searchform.big{margin:24px auto 0}
.nf-pop{margin-top:34px;text-align:left}
.nf-home{margin-top:26px}
/* only one Zeytin at a time: the corner one steps away while the loader cat is painting */
.pcz-light{transition:opacity .25s}
.viewport:has(.shotload) .pcz-light{opacity:0;visibility:hidden}

/* ---- header: Meet Zeytin, her head peeking over the edge ---- */
.topnav .zn{display:inline-flex;align-items:flex-end;gap:7px}
.topnav .zn::after{display:none}
.zn-cat{display:block;width:34px;height:22px;overflow:hidden;position:relative;top:2px}
.zn-cat svg{display:block;transform:translateY(4px);transition:transform .25s ease}
.zn:hover .zn-cat svg,.zn:focus-visible .zn-cat svg{transform:translateY(0)}
.zn:hover .zn-pupils{animation:znLook 1.2s ease-in-out}
@keyframes znLook{0%,100%{transform:translateX(0)}30%{transform:translateX(-5px)}65%{transform:translateX(5px)}}
.zn-t{white-space:nowrap}
.zn:hover .zn-t{color:var(--ink)}

/* ---- contact ---- */
.ct{border-top:0;padding-top:40px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:56px;align-items:start}
.ct h1{font-size:clamp(1.9rem,3.6vw,2.5rem);font-weight:600;letter-spacing:-.025em}
.ct-intro p{margin-top:14px;color:var(--soft);line-height:1.7;max-width:46ch}
.ct-form{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px;border:1px solid var(--hair);border-radius:4px;
  padding:22px;background:var(--page);box-shadow:0 12px 28px -22px rgba(16,17,20,.35)}
.ct-form .full{grid-column:1 / -1}
.ct-form label{display:block;font-size:11.5px;letter-spacing:.05em;color:var(--faint)}
.ct-form input,.ct-form select,.ct-form textarea{display:block;width:100%;margin-top:6px;font:inherit;font-size:15px;
  color:var(--ink);background:none;border:0;border-bottom:1px solid var(--hair);padding:8px 0;border-radius:0}
.ct-form textarea{border:1px solid var(--hair);border-radius:2px;padding:10px 12px;resize:vertical;line-height:1.55}
.ct-form input:focus,.ct-form select:focus,.ct-form textarea:focus{outline:0;border-color:var(--ink)}
.ct-form .err{display:block;font-style:normal;color:#B23A2E;font-size:12px;margin-top:5px;letter-spacing:0}
.ct-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ct-about{font-size:13px;color:var(--soft)}
.ct-acts{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.ct-acts button{font:inherit;font-size:14px;font-weight:600;background:var(--ink);color:var(--page);border:0;
  border-radius:2px;padding:12px 22px;cursor:pointer}
.ct-acts button:hover{opacity:.88}
.ct-acts small{font-size:12px;color:var(--faint)}
.ct-acts small a{border-bottom:1px solid var(--hair)}
.ct-done{border:1px solid var(--hair);border-left:3px solid #6B7A3A;border-radius:4px;padding:22px;background:var(--page)}
.ct-done b{font-size:17px}
.ct-done p{margin-top:8px;color:var(--soft)}
@media (max-width:820px){.ct{grid-template-columns:1fr;gap:26px}.ct-form{grid-template-columns:1fr}}

/* FAQ: a long one-line question must never widen the page (single column on phones) */
.faq-col{min-width:0}
.faq-col p{overflow-wrap:anywhere}
@media (max-width:760px){.faq-cols{grid-template-columns:minmax(0,1fr)}}
.faq-box{min-width:0;overflow:hidden}

/* mobile tab bar: Zeytin */
.tabbar .tz svg{width:23px;height:23px;color:var(--ink)}
.tabbar a{min-width:0}
.tabbar a span{white-space:nowrap}

/* contact: signed-in note */
.ct-me{font-size:13px;color:var(--soft);background:var(--tint);padding:9px 12px;border-radius:2px}