/* Solid buttons, Dieter Rams treatment: a quiet physical key in the existing colours.
   Night: warm off-white key, Ink label. Light: Ink key, white label.
   A tight rounded rectangle, a faintly convex face, a fine top highlight and a darker
   lower skirt that the key travels onto when pressed. Loaded last; overrides earlier .key rules. */
:root{
  --key-face-top:#FBF9F4;--key-face:#F4F1E9;--key-face-bottom:#E6E0D2;--key-label:#12222B;
  --key-skirt:#B8AE98;--key-highlight:rgba(255,255,255,.95);--key-shade:rgba(0,0,0,.55);--key-hover:#FFFFFF;
}
:root[data-theme="light"]{
  --key-face-top:#26323D;--key-face:#17212B;--key-face-bottom:#111921;--key-label:#FFFFFF;
  --key-skirt:#05080B;--key-highlight:rgba(255,255,255,.14);--key-shade:rgba(12,19,26,.38);--key-hover:#2A3743;
}
/* The event handoff runs on a light phone screen in both themes, so its key stays Ink. */
.capture-primary{
  --key-face-top:#26323D;--key-face:#17212B;--key-face-bottom:#111921;--key-label:#FAFAFA;
  --key-skirt:#05080B;--key-highlight:rgba(255,255,255,.14);--key-shade:rgba(12,19,26,.38);--key-hover:#2A3743;
}
.key,.capture-primary{
  border-radius:10px!important;
  border:0!important;
  background:linear-gradient(180deg,var(--key-face-top) 0%,var(--key-face) 46%,var(--key-face-bottom) 100%)!important;
  color:var(--key-label)!important;
  letter-spacing:.01em;
  box-shadow:inset 0 1px 0 var(--key-highlight),inset 0 -1px 0 rgba(0,0,0,.06),0 2px 0 var(--key-skirt),0 8px 16px -8px var(--key-shade)!important;
  transform:translateY(0);
  transition:transform 90ms cubic-bezier(.3,.7,.4,1),box-shadow 90ms cubic-bezier(.3,.7,.4,1),background-color .48s cubic-bezier(.4,0,.2,1),color .48s cubic-bezier(.4,0,.2,1)!important;
  filter:none!important;opacity:1!important;
}
.key::after{display:none!important}
.key:hover,.capture-primary:hover{
  background:linear-gradient(180deg,var(--key-hover) 0%,var(--key-face-top) 50%,var(--key-face) 100%)!important;
}
.key:active,.capture-primary:active{
  transform:translateY(2px)!important;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.22),inset 0 1px 0 var(--key-highlight),0 0 0 var(--key-skirt),0 2px 6px -4px var(--key-shade)!important;
}
.key:focus-visible,.capture-primary:focus-visible{outline:2px solid #A88135!important;outline-offset:4px!important}
:root[data-theme="light"] .key:focus-visible,:root[data-theme="light"] .capture-primary:focus-visible{outline-color:#5D4D27!important}
@media (prefers-reduced-motion:reduce){.key,.capture-primary{transition:none!important}.key:active,.capture-primary:active{transform:none!important}}
/* Outline (secondary) buttons share the key's rounded rectangle; their flowing trace follows this radius. */
.btn{border-radius:10px!important;--trace-radius:9px}
/* Header corners follow the squared keys: the docked bar sits concentrically around its 10px key. */
.dock__bar{border-radius:calc(var(--dock-p,0) * 18px)!important}
.menu-btn,.pack-menu-toggle{border-radius:12px!important}
.menu-panel{border-radius:16px!important}
.menu-panel a{border-radius:10px!important}
/* Three ways to work: back to cards. Light-first raised cards in the squared language,
   diagram on top, copy below, the action pinned to the foot of each card. */
html .home-refined .ways-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:56px;perspective:1200px}
html .home-refined .way{display:flex;flex-direction:column;gap:14px;padding:28px;min-height:380px;border:1px solid var(--hair);border-radius:16px;background:var(--dusk,#FFFFFF);box-shadow:0 1px 2px rgba(23,33,43,.04),0 14px 34px -20px rgba(23,33,43,.22)}
html .home-refined .way:last-child{border-bottom:1px solid var(--hair)}
html .home-refined .way::after{display:block}
html .home-refined .way .orbit{order:-1;grid-column:auto;grid-row:auto;width:100%;max-width:none;height:112px;margin:0 0 4px}
html .home-refined .way-title,html .home-refined .way-copy{grid-column:auto;grid-row:auto}
html .home-refined .way h3{font-size:clamp(24px,2vw,30px);max-width:none}
html .home-refined .way .who{margin-top:6px}
html .home-refined .way-copy{display:flex;flex-direction:column;gap:14px;flex:1}
html .home-refined .way p{font-size:16px;max-width:none}
html .home-refined .way .more{margin-top:auto;align-self:flex-start}
@media (max-width:900px){html .home-refined .ways-grid{grid-template-columns:minmax(0,1fr)}html .home-refined .way{min-height:0}html .home-refined .way .orbit{height:96px;width:240px;max-width:100%}}
/* Light only: each logo family shows its Paper plate alone, across the row. */
.pack-page .logo-family-row .asset-pair,.pack-page .asset-pair{grid-template-columns:minmax(0,1fr)!important}
.pack-page .boards{grid-template-columns:minmax(0,1fr)!important}
/* Barcode section dividers: back on every page (the refined homepage had hidden them). */
html .home-refined .aisle-code{display:grid}