/* Note Inc. software demos: a dark console holding five light, working apps */
.sw {
  color: var(--silver);
  background:
    radial-gradient(50% 50% at 85% 0%, rgba(189, 235, 255, 0.12), transparent 60%),
    radial-gradient(45% 55% at 0% 100%, rgba(184, 147, 79, 0.16), transparent 60%),
    linear-gradient(170deg, #0F3229 0%, #07130F 100%);
}
.sw__eyebrow { margin: 0 0 0.8em; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: #D9BC7A; }
.sw__lede { color: #D5DCE4; max-width: 60ch; }

.sw__console {
  display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 18px;
  padding: 14px; border-radius: 26px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(201, 166, 96, 0.28);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.sw__tabs { display: flex; flex-direction: column; gap: 6px; }
.sw__tab {
  display: grid; gap: 2px; text-align: left; cursor: pointer;
  padding: 14px 16px; border-radius: 16px; border: 1px solid transparent;
  background: none; color: var(--silver); font: inherit;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.sw__tab b { font-weight: 600; font-size: 0.98rem; color: #EEF2F6; }
.sw__tab span { font-size: 0.8rem; opacity: 0.75; line-height: 1.4; }
.sw__tab:hover { background: rgba(255, 255, 255, 0.05); }
.sw__tab[aria-selected="true"] {
  background: linear-gradient(135deg, rgba(217, 188, 122, 0.22), rgba(217, 188, 122, 0.06));
  border-color: rgba(217, 188, 122, 0.55);
  box-shadow: inset 3px 0 0 #D9BC7A;
}
.sw__stage { min-width: 0; }
.sw__panel[hidden] { display: none; }
.sw__panel { animation: swIn 0.35s ease both; }
@keyframes swIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.sw__caps { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 0; padding: 0; list-style: none; }
.sw__caps li { padding: 7px 14px; border-radius: 999px; font-size: 0.84rem; color: #E6EBF0; border: 1px solid rgba(201, 209, 218, 0.28); background: rgba(255, 255, 255, 0.04); }

/* ---------- the app window ---------- */
.app {
  --a-ink: #0F1E1A; --a-mut: #66737E; --a-line: #E1E6EC; --a-bg: #F7F8FA; --a-acc: #0D2A24; --a-brass: #B8934F;
  border-radius: 18px; overflow: hidden; background: var(--a-bg); color: var(--a-ink);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
  font-size: 0.92rem; line-height: 1.5;
}
.app__bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: #E9EDF1; border-bottom: 1px solid var(--a-line); }
.app__dots { display: flex; gap: 6px; }
.app__dots i { width: 10px; height: 10px; border-radius: 50%; background: #C8D0D8; }
.app__bar b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; font-size: 0.8rem; color: var(--a-mut); text-align: center; padding: 3px 10px; border-radius: 8px; background: #fff; }
.app__bar em { font-style: normal; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #0E6B47; background: rgba(14, 107, 71, 0.1); padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.app__body { padding: clamp(14px, 2vw, 24px); min-height: 470px; }
.app__label { margin: 0 0 8px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--a-mut); }
.app__label + * { margin-bottom: 18px; }
.app__muted { color: var(--a-mut); margin: 0; }
.app__err { color: #B42318; font-size: 0.86rem; min-height: 1.3em; margin: 6px 0; }
.fine { font-size: 0.78rem; margin-top: 10px; }

:where(.app) button { font: inherit; color: inherit; }
.abtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 18px; border-radius: 12px; border: 1px solid var(--a-acc); cursor: pointer;
  background: var(--a-acc); color: #fff !important; font-weight: 600 !important; font-size: 0.9rem;
  transition: transform 0.15s ease, filter 0.15s ease, background 0.2s ease;
}
.abtn:hover:not(:disabled) { filter: brightness(1.2); transform: translateY(-1px); }
.abtn:disabled { opacity: 0.4; cursor: not-allowed; }
.abtn--ghost { background: #fff; color: var(--a-acc) !important; border-color: var(--a-line); }
.abtn--sm { padding: 7px 12px; font-size: 0.82rem; border-radius: 10px; }
.abtn.is-added { background: #0E6B47; border-color: #0E6B47; }
.linkbtn { background: none; border: 0; padding: 8px 4px; cursor: pointer; color: var(--a-mut) !important; text-decoration: underline; font-size: 0.84rem; }
.btnrow { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.ibtn { width: 32px; height: 32px; border-radius: 10px; border: 1px solid var(--a-line); background: #fff; cursor: pointer; font-size: 1.1rem; line-height: 1; }
.ibtn:disabled { opacity: 0.3; cursor: default; }

.fld { display: grid; gap: 4px; margin-bottom: 12px; }
.fld > span { display: flex; justify-content: space-between; font-size: 0.78rem; font-weight: 600; color: var(--a-mut); }
.fld input, .fld select, .promo input, .cr__add input, .cr__search {
  width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--a-line); background: #fff;
  font: inherit; font-size: 0.92rem; color: var(--a-ink);
}
.fld input:focus, .fld select:focus, .promo input:focus, .cr__add input:focus, .cr__search:focus { outline: 2px solid rgba(184, 147, 79, 0.6); outline-offset: 0; border-color: var(--a-brass); }
.fld input[type="range"] { padding: 0; border: 0; background: none; accent-color: var(--a-acc); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.opt { display: grid; gap: 1px; width: 100%; text-align: left; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--a-line); background: #fff; cursor: pointer; margin-bottom: 6px; }
.opt span { font-size: 0.8rem; color: var(--a-mut); }
.opt[aria-checked="true"] { border-color: var(--a-acc); box-shadow: inset 0 0 0 1px var(--a-acc); background: #F1F6F4; }

/* ok state */
.ok { padding: 8px 0; }
.ok__tick { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #0E6B47; margin-bottom: 12px; animation: pop 0.4s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
.ok__tick::after { content: ""; width: 16px; height: 9px; border: 3px solid #fff; border-top: 0; border-right: 0; transform: translateY(-2px) rotate(-45deg); }
.ok__big { font-family: var(--display); font-size: 1.6rem; line-height: 1.15; margin: 0 0 6px; }
.ok p { margin: 0 0 8px; }
@keyframes pop { from { transform: scale(0.4); opacity: 0; } to { transform: none; opacity: 1; } }
.spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.4); border-top-color: #fff; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- bookings ---------- */
.bk { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(16px, 2.4vw, 32px); }
.cal { background: #fff; border: 1px solid var(--a-line); border-radius: 14px; padding: 10px; }
.cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.cal__dow, .cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; text-align: center; }
.cal__dow span { font-size: 0.7rem; font-weight: 600; color: var(--a-mut); padding: 4px 0; }
.cal__d { aspect-ratio: 1; border-radius: 9px; border: 0; background: #F1F6F4; cursor: pointer; font-size: 0.85rem; font-weight: 600; }
.cal__d:disabled { background: none; color: #B8C0C8; font-weight: 400; cursor: default; text-decoration: line-through; text-decoration-color: rgba(0, 0, 0, 0.12); }
.cal__d:hover:not(:disabled) { background: #DCEBE5; }
.cal__d.is-today { box-shadow: inset 0 0 0 1px var(--a-brass); }
.cal__d.is-on { background: var(--a-acc); color: #fff; }
.slot__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
.slot { padding: 8px 4px; border-radius: 10px; border: 1px solid var(--a-line); background: #fff; cursor: pointer; font-size: 0.84rem; font-weight: 600; }
.slot:hover:not(:disabled) { border-color: var(--a-acc); }
.slot:disabled { background: #F0F2F4; color: #B3BBC3; border-color: transparent; cursor: default; text-decoration: line-through; }
.slot.is-on { background: var(--a-acc); color: #fff; border-color: var(--a-acc); }
.bk__slots { margin-bottom: 16px; }
.bk__sum { padding: 10px 12px; background: #fff; border: 1px dashed var(--a-line); border-radius: 12px; font-size: 0.88rem; margin: 2px 0 8px; }

/* ---------- quotes ---------- */
.qt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: clamp(16px, 2.4vw, 32px); }
.fld output { color: var(--a-ink); font-weight: 700; }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.seg label { cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label span { display: grid; gap: 1px; padding: 9px 10px; border-radius: 12px; border: 1px solid var(--a-line); background: #fff; font-weight: 600; font-size: 0.86rem; }
.seg em, .chk em { font-style: normal; font-weight: 400; font-size: 0.76rem; color: var(--a-mut); }
.seg input:checked + span { border-color: var(--a-acc); box-shadow: inset 0 0 0 1px var(--a-acc); background: #F1F6F4; }
.seg input:focus-visible + span, .chk input:focus-visible + span { outline: 2px solid var(--a-brass); }
.checks { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.chk { display: block; cursor: pointer; }
.chk input { position: absolute; opacity: 0; pointer-events: none; }
.chk span { display: grid; gap: 1px; padding: 9px 10px 9px 34px; border-radius: 12px; border: 1px solid var(--a-line); background: #fff; font-weight: 600; font-size: 0.86rem; position: relative; }
.chk span::before { content: ""; position: absolute; left: 11px; top: 12px; width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid #AEB7C0; background: #fff; }
.chk input:checked + span { border-color: var(--a-acc); background: #F1F6F4; }
.chk input:checked + span::before { background: var(--a-acc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 7.5l2.5 2.5L11 4.5' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E") center/12px no-repeat; border-color: var(--a-acc); }
.qt__out { background: #fff; border: 1px solid var(--a-line); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; }
.qt__lines { list-style: none; margin: 0 0 10px; padding: 0; flex: 1; }
.qt__lines li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid #F0F2F4; font-size: 0.86rem; }
.qt__lines b { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.qt__tot { display: flex; justify-content: space-between; align-items: baseline; margin: 6px 0; }
.qt__tot span { font-weight: 600; }
.qt__big { font-family: var(--display); font-weight: 400; font-size: 2rem; font-variant-numeric: tabular-nums; }
.qt__dep { font-size: 0.8rem; margin-bottom: 12px; }

/* ---------- store ---------- */
.st { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: clamp(14px, 2vw, 24px); }
.st__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.prod { background: #fff; border: 1px solid var(--a-line); border-radius: 16px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.prod__img { aspect-ratio: 4 / 3; border-radius: 12px; background: radial-gradient(circle at 50% 40%, #FFFFFF, #ECEFF2); display: grid; place-items: center; }
.prod__img svg { width: 62%; height: auto; transition: color 0.3s ease; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.15)); }
.prod__info { display: flex; justify-content: space-between; gap: 8px; font-size: 0.88rem; }
.prod__info b { font-weight: 600; }
.prod__opts { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px; }

.prod .swatch { display: flex; gap: 6px; }
.sw__c { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; background: var(--c); box-shadow: 0 0 0 1px var(--a-line); cursor: pointer; padding: 0; }
.sw__c[aria-checked="true"] { box-shadow: 0 0 0 2px var(--a-acc); }
.sz { display: flex; gap: 4px; }
.sz button { min-width: 30px; padding: 3px 6px; border-radius: 8px; border: 1px solid var(--a-line); background: #fff; cursor: pointer; font-size: 0.76rem; font-weight: 600; }
.sz button[aria-checked="true"] { background: var(--a-acc); color: #fff; border-color: var(--a-acc); }
.st__bag { background: #fff; border: 1px solid var(--a-line); border-radius: 16px; padding: 14px; align-self: start; }
.bag { list-style: none; margin: 0 0 12px; padding: 0; }
.bag li { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid #F0F2F4; }
.bag li > i { width: 14px; height: 14px; border-radius: 50%; box-shadow: 0 0 0 1px var(--a-line); }
.bag b { display: block; font-size: 0.86rem; font-weight: 600; }
.bag span { font-size: 0.76rem; color: var(--a-mut); }
.qty { display: flex; align-items: center; gap: 6px; }
.qty button { width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--a-line); background: #fff; cursor: pointer; line-height: 1; }
.qty span { min-width: 14px; text-align: center; font-weight: 600; color: var(--a-ink); font-size: 0.86rem; }
.promo { display: flex; gap: 6px; }
.promo__msg { font-size: 0.76rem; color: var(--a-mut); margin: 4px 0 8px; }
.sums { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; margin: 0 0 12px; font-size: 0.86rem; }
.sums dt { color: var(--a-mut); }
.sums dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.sums .big { font-weight: 700; color: var(--a-ink); font-size: 1rem; padding-top: 6px; border-top: 1px solid var(--a-line); }
.ship { font-size: 0.78rem; margin-bottom: 10px; }
.st__bag .abtn { width: 100%; }
.brand { font-style: normal; color: var(--a-acc); }

/* ---------- dashboard ---------- */
.db__top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.db__top .app__label { margin: 0 auto 0 0; }
.seg--sm { display: flex; gap: 0; background: #E9EDF1; border-radius: 10px; padding: 3px; margin: 0 !important; }
.seg--sm button { border: 0; background: none; padding: 5px 10px; border-radius: 8px; cursor: pointer; font-size: 0.8rem; font-weight: 600; color: var(--a-mut); }
.seg--sm button[aria-checked="true"] { background: #fff; color: var(--a-ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.kpi { background: #fff; border: 1px solid var(--a-line); border-radius: 14px; padding: 12px; display: grid; gap: 2px; min-width: 0; }
.kpi span { font-size: 0.74rem; color: var(--a-mut); font-weight: 600; }
.kpi b { font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpi em { font-style: normal; font-size: 0.72rem; }
.kpi em.up { color: #0E6B47; } .kpi em.down { color: #B42318; }
.db__main { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 12px; }
.chart { position: relative; background: #fff; border: 1px solid var(--a-line); border-radius: 14px; padding: 8px; }
.chart canvas { display: block; width: 100%; height: 280px; touch-action: pan-y; cursor: crosshair; }
.chart__tip { position: absolute; pointer-events: none; display: grid; gap: 0; padding: 7px 10px; border-radius: 10px; background: var(--a-acc); color: #fff; font-size: 0.74rem; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); white-space: nowrap; }
.chart__tip b { font-size: 0.95rem; }
.chart__tip[hidden] { display: none; }
.db__side { background: #fff; border: 1px solid var(--a-line); border-radius: 14px; padding: 12px; min-width: 0; }
.bars { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.bars li { display: grid; grid-template-columns: 1fr auto; font-size: 0.82rem; }
.bars b { font-weight: 600; font-variant-numeric: tabular-nums; }
.bars i { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--a-acc), #2F6B5A); width: var(--w); margin-top: 3px; transition: width 0.5s ease; }
.live { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #12B76A; margin-left: 6px; vertical-align: middle; animation: blink 1.6s ease-in-out infinite; }
@keyframes blink { 50% { opacity: 0.3; } }
.feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.feed li { display: grid; grid-template-columns: auto 1fr auto; gap: 6px; align-items: baseline; font-size: 0.76rem; padding: 6px 8px; border-radius: 9px; background: #F7F8FA; }
.feed li b { font-weight: 700; }
.feed li span { color: var(--a-mut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.feed li em { font-style: normal; font-weight: 700; color: #0E6B47; }
.feed li.is-new { animation: feedIn 0.6s ease both; }
@keyframes feedIn { from { opacity: 0; transform: translateY(-6px); background: #E3F4EC; } to { opacity: 1; transform: none; } }

/* ---------- pipeline ---------- */
.cr__top { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cr__stats { display: flex; gap: 8px; flex-wrap: wrap; }
.cr__stats div { background: #fff; border: 1px solid var(--a-line); border-radius: 12px; padding: 6px 12px; display: grid; }
.cr__stats span { font-size: 0.7rem; color: var(--a-mut); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.cr__stats b { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.cr__search { max-width: 220px; }
.cr__board { display: grid; grid-template-columns: repeat(4, minmax(170px, 1fr)); gap: 10px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; }
.col { background: #EEF1F4; border-radius: 14px; padding: 8px; min-height: 260px; scroll-snap-align: start; transition: background 0.2s ease, box-shadow 0.2s ease; }
.col.is-over { background: #E1EFE9; box-shadow: inset 0 0 0 2px var(--a-acc); }
.col header { display: grid; padding: 4px 6px 8px; }
.col header b { font-size: 0.86rem; }
.col header span { font-size: 0.74rem; color: var(--a-mut); }
.col__list { display: grid; gap: 6px; }
.col__empty { margin: 0; padding: 18px 8px; text-align: center; font-size: 0.76rem; color: #A3ADB7; border: 1px dashed #C9D1D9; border-radius: 10px; }
.deal { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 8px; align-items: center; background: #fff; border-radius: 11px; padding: 9px 8px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 0 0 1px var(--a-line); }
.deal__grip { width: 14px; height: 26px; cursor: grab; touch-action: none; background: radial-gradient(circle, #A3ADB7 1.3px, transparent 1.6px) 0 0 / 7px 7px; }
.deal__txt { display: grid; min-width: 0; }
.deal__txt b { font-size: 0.84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deal__txt span { font-size: 0.74rem; color: var(--a-mut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deal__txt em { font-style: normal; font-weight: 700; font-size: 0.8rem; color: #0E6B47; }
.deal__mv { display: flex; flex-direction: column; gap: 3px; }
.deal__mv button { width: 22px; height: 20px; border-radius: 6px; border: 1px solid var(--a-line); background: #fff; cursor: pointer; line-height: 1; font-size: 0.9rem; padding: 0; }
.deal.is-lifted { opacity: 0.35; }
.deal.is-flash { animation: flash 0.8s ease; }
@keyframes flash { from { box-shadow: 0 0 0 2px #12B76A; } }
.deal--ghost { position: fixed; left: 0; top: 0; z-index: 400; pointer-events: none; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3); font-family: var(--text); color: #0F1E1A; font-size: 0.92rem; }
.cr__add { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.cr__add input { flex: 1 1 130px; width: auto; }

/* ---------- small screens ---------- */
@media (max-width: 980px) {
  .sw__console { grid-template-columns: minmax(0, 1fr); padding: 10px; }
  .sw__tabs { flex-direction: row; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
  .sw__tab { flex: 0 0 auto; scroll-snap-align: start; padding: 10px 14px; }
  .sw__tab span { display: none; }
  .sw__tab[aria-selected="true"] { box-shadow: inset 0 -3px 0 #D9BC7A; }
  .db__main { grid-template-columns: minmax(0, 1fr); }
  .st { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .bk, .qt { grid-template-columns: minmax(0, 1fr); }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app__body { min-height: 0; }
  .chart canvas { height: 220px; }
}
@media (max-width: 480px) {
  .st__grid { grid-template-columns: minmax(0, 1fr); }
  .checks, .row2 { grid-template-columns: minmax(0, 1fr); }
  .seg:not(.seg--sm) { grid-template-columns: minmax(0, 1fr); }
  .app__bar em { display: none; }
  .cr__board { grid-template-columns: repeat(4, 78%); }
  .cr__search { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sw__panel, .ok__tick, .feed li.is-new, .deal.is-flash { animation: none; }
}