/* ==========================================================================
   SECONDARY IMAGES  (projects.html: the zig-zag rows under the app window)

   HTML: one <template data-sec="<module id>"> per module in projects.html,
   copied into #secs by js/secondary-image.js. Each row: .zz > .sec (mini app
   window, P00 in product.css) > .sec-body > .si-card, plus its text .det (P00).
   All classes here start with .si- so nothing clashes with other CSS.

   Same rules as README.md "Developer rules": colours and fonts only from the
   tokens in cubix-style.css "01. Global", desktop sizes in design px
   (calc(N * var(--u))), README breakpoints only. Each section has a
   "RESPONSIVE -> move to cubix-responsive.css" block at the end of the file.

   Animations: every widget animates in when its row scrolls into view
   (.sec gets .aos-animate from the AOS engine in js/product.js). Items that
   come in one after another get their place (--i) from js/secondary-image.js.

   Contents
   S00. Shared card parts   (card, header, status colours, pop-in, tabs, buttons)
   S01. KPI tiles           (.si-kpis)
   S02. Room / table tiles  (.si-rooms)
   S03. Status bar + chips  (.si-stack, .si-chips, .si-floors)
   S04. List rows           (.si-list, .si-av, .si-tag, .si-pill)
   S05. Bar chart           (.si-bars, .si-axis)
   S06. Line chart          (.si-line)
   S07. Donut + legend      (.si-donut, .si-legend)
   S08. Horizontal bars     (.si-hbars)
   S09. Month calendar      (.si-cal)
   S10. Switches            (.si-toggles)
   S11. Form fields         (.si-form)
   S12. Phone message       (.si-phone)
   S13. Task board          (.si-board)
   S14. Table               (.si-table)
   S15. Steps               (.si-steps)
   S16. Bill / statement    (.si-bill)
   S17. Headline number     (.si-hero)
   S18. Two columns         (.si-duo)
   S19. Chat bubbles        (.si-chat)
   S20. Checklist           (.si-check)
   ========================================================================== */


/* ==========================================================================
   S00. Shared card parts
   ========================================================================== */

/* one white card that fills the mini window's body */
.sec .si-card{
	display: flex;
	flex-direction: column;
	gap: calc(12 * var(--u));
	min-width: 0;
	padding: calc(16 * var(--u));
	background: var(--color-white);
	border: 1px solid rgba(var(--color-primary-rgb), 0.06);
	border-radius: calc(12 * var(--u));
	box-shadow: 0 1px 2px rgba(var(--color-primary-rgb), 0.04);
	font-family: var(--font-body);
	font-size: calc(12 * var(--u));
	line-height: 1.3;
	color: var(--color-primary);
	font-variant-numeric: tabular-nums;
}
.si-card ul{list-style: none; margin: 0; padding: 0}
.si-card b{font-weight: 700}
.si-card small{font-size: inherit}

/* card header: title (with an optional icon) left, a small grey chip right */
.si-head{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: calc(8 * var(--u));
}
.si-head b{
	display: flex;
	align-items: center;
	gap: calc(7 * var(--u));
	font-size: calc(13 * var(--u));
}
.si-head b i{color: var(--color-accent); font-size: calc(12 * var(--u))}
.si-head > span{
	flex: none;
	padding: calc(3 * var(--u)) calc(9 * var(--u));
	border-radius: 99px;
	background: var(--color-light);
	font-size: calc(10 * var(--u));
	color: var(--color-text);
}
/* a small grey line under a header or between parts */
.si-note{font-size: calc(10.5 * var(--u)); color: var(--color-text)}
.si-note b{color: var(--color-primary)}
.si-note.is-box{
	padding: calc(8 * var(--u)) calc(11 * var(--u));
	border-radius: calc(8 * var(--u));
	background: rgba(var(--color-accent-rgb), 0.1);
}

/* Status colours, used by every card part. --st = the colour (rgb numbers), --sa = its strength.
   free = blue, reserved = navy, in (checked in / busy / active) = pink (strips use the brand gradient),
   dirty = grey, off (out of order / inactive) = light grey. */
.si-card .is-free    {--st: var(--color-accent-rgb)}
.si-card .is-reserved{--st: var(--color-primary-rgb)}
.si-card .is-in      {--st: var(--color-accent-2-rgb)}
.si-card .is-dirty   {--st: var(--color-black-rgb); --sa: 0.5}
.si-card .is-off     {--st: var(--color-black-rgb); --sa: 0.25}

/* Pop-in: the items of a .si-pop list fade up one after another */
.sec .si-pop > *{opacity: 0; transform: translateY(calc(10 * var(--u)))}
.sec.aos-animate .si-pop > *{
	animation: si-pop 0.5s cubic-bezier(.2, .7, .2, 1) forwards;
	animation-delay: calc(300ms + var(--i, 0) * 60ms);
}
@keyframes si-pop{to{opacity: 1; transform: none}}

/* segmented tabs (one active) */
.si-tabs{
	align-self: flex-start;
	display: inline-flex;
	gap: calc(2 * var(--u));
	padding: calc(3 * var(--u));
	border-radius: 99px;
	background: var(--color-light);
	font-size: calc(10 * var(--u));
	color: var(--color-text);
}
.si-tabs span{padding: calc(3 * var(--u)) calc(10 * var(--u)); border-radius: 99px}
.si-tabs .on{background: var(--color-white); color: var(--color-primary); font-weight: 700; box-shadow: 0 1px 3px rgba(var(--color-primary-rgb), 0.12)}

/* app buttons inside a picture (part of the picture, not the site's .btn-default) */
.si-btns{display: flex; flex-wrap: wrap; gap: calc(6 * var(--u))}
.si-btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: calc(6 * var(--u));
	padding: calc(6 * var(--u)) calc(12 * var(--u));
	border-radius: calc(7 * var(--u));
	background: var(--color-light);
	font-size: calc(10.5 * var(--u));
	font-weight: 700;
	color: var(--color-primary);
	white-space: nowrap;
}
.si-btn.is-main{background: var(--gradient-brand) border-box; color: var(--color-white)}
.si-btn.is-dark{background: var(--color-primary); color: var(--color-white)}
.si-btn.is-wide{width: 100%; padding: calc(9 * var(--u))}
.si-btn i{font-size: calc(10 * var(--u))}

/* small coloured change badge: "+8%" */
.si-up{
	display: inline-block;
	padding: calc(2 * var(--u)) calc(6 * var(--u));
	border-radius: 99px;
	background: rgba(var(--color-accent-rgb), 0.15);
	font-size: calc(9.5 * var(--u));
	font-weight: 700;
	color: var(--color-accent);
}
.si-up.is-down{background: rgba(var(--color-accent-2-rgb), 0.12); color: var(--color-accent-2)}

/* a "live" dot that pulses softly */
.si-live{
	display: inline-block;
	width: calc(7 * var(--u));
	height: calc(7 * var(--u));
	border-radius: 50%;
	background: var(--color-accent-2);
	animation: si-live 2s ease-in-out infinite;
}
@keyframes si-live{50%{box-shadow: 0 0 0 calc(4 * var(--u)) rgba(var(--color-accent-2-rgb), 0.15)}}


/* ==========================================================================
   S01. KPI tiles
   <ul class="si-kpis"><li><i class="fa-solid ..."></i><b>10<small>/10</small></b><span>label</span></li>
   .c2 / .c4 = 2 / 4 columns (default 3). .is-hi = the highlighted tile (brand gradient).
   ========================================================================== */
.si-kpis{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: calc(10 * var(--u));
}
.si-kpis.c2{grid-template-columns: repeat(2, 1fr)}
.si-kpis.c4{grid-template-columns: repeat(4, 1fr)}
.si-kpis li{
	display: grid;
	align-content: start;
	gap: calc(5 * var(--u));
	min-width: 0;
	padding: calc(12 * var(--u));
	border: 1px solid rgba(var(--color-primary-rgb), 0.08);
	border-radius: calc(10 * var(--u));
	background: var(--color-white);
}
.si-kpis i{
	display: grid;
	place-items: center;
	width: calc(30 * var(--u));
	height: calc(30 * var(--u));
	border-radius: calc(8 * var(--u));
	background: rgba(var(--color-accent-rgb), 0.12);
	color: var(--color-accent);
	font-size: calc(13 * var(--u));
}
.si-kpis b{font-size: calc(22 * var(--u)); letter-spacing: -0.02em; line-height: 1.1; white-space: nowrap}
.si-kpis b small{margin-left: calc(1 * var(--u)); font-size: calc(14 * var(--u)); font-weight: 600; color: var(--color-text)}
.si-kpis span{font-size: calc(10.5 * var(--u)); color: var(--color-text)}
.si-kpis em{justify-self: start; font-style: normal; font-size: calc(9.5 * var(--u)); color: var(--color-text)}
/* the gradient is painted under the border too (border-box), so no coloured lines show at the edges */
.si-kpis li.is-hi{
	background: var(--gradient-brand) border-box;
	border-color: transparent;
	color: var(--color-white);
	box-shadow: 0 calc(8 * var(--u)) calc(18 * var(--u)) calc(-8 * var(--u)) rgba(var(--color-accent-2-rgb), 0.5);
}
.si-kpis li.is-hi i{background: rgba(var(--color-white-rgb), 0.2); color: var(--color-white)}
.si-kpis li.is-hi small,
.si-kpis li.is-hi span,
.si-kpis li.is-hi em{color: rgba(var(--color-white-rgb), 0.85)}
.si-kpis li.is-hi .si-up{background: rgba(var(--color-white-rgb), 0.2); color: var(--color-white)}


/* ==========================================================================
   S02. Room / table tiles
   <ul class="si-rooms"><li class="is-free"><em>type</em><b>room</b><span>guest</span><u>status</u></li>
   .c2 / .c4 = 2 / 4 columns (default 5). .is-names = longer names (tables, halls): smaller title.
   An optional <i class="fa-solid ..."> in a tile sits in its top right corner.
   ========================================================================== */
.si-rooms{
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: calc(8 * var(--u));
}
.si-rooms.c4{grid-template-columns: repeat(4, 1fr)}
.si-rooms.c2{grid-template-columns: repeat(2, 1fr)}
.si-rooms li{
	position: relative;
	display: grid;
	gap: calc(2 * var(--u));
	min-width: 0;
	padding: calc(8 * var(--u)) calc(8 * var(--u)) 0;
	border: 1px solid rgba(var(--st), calc(var(--sa, 1) * 0.3));
	border-radius: calc(8 * var(--u));
	background: rgba(var(--st), calc(var(--sa, 1) * 0.06));
	overflow: hidden;
}
.si-rooms em{font-style: normal; font-size: calc(8.5 * var(--u)); font-weight: 700; letter-spacing: 0.06em; color: var(--color-text)}
.si-rooms b{font-size: calc(16 * var(--u)); letter-spacing: 0.04em; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis}
.si-rooms.is-names b{font-size: calc(12 * var(--u)); letter-spacing: 0}
.si-rooms span{
	min-height: 1.3em;
	font-size: calc(9.5 * var(--u));
	color: var(--color-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.si-rooms li > i{
	position: absolute;
	top: calc(8 * var(--u));
	right: calc(8 * var(--u));
	font-size: calc(10 * var(--u));
	color: rgba(var(--st), max(var(--sa, 1), 0.55));
}
/* status strip along the bottom of the tile, painted edge to edge */
.si-rooms u{
	margin: calc(5 * var(--u)) calc(-8 * var(--u)) 0;
	padding: calc(3 * var(--u)) calc(8 * var(--u));
	background: rgba(var(--st), var(--sa, 1));
	font-size: calc(8 * var(--u));
	font-weight: 700;
	letter-spacing: 0.06em;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--color-white);
}
.si-rooms .is-in u{background: var(--gradient-brand)}


/* ==========================================================================
   S03. Status bar + chips
   <div class="si-stack"><i class="is-in" style="--v:42"></i>...</div>  (--v = count; the segments
     share the bar in that ratio and grow in)
   <ul class="si-chips"><li class="is-in"><i></i>label<b>count</b></li>
   <ul class="si-floors"><li><span>Floor 1</span><div class="si-stack">...</div><b>total</b></li>
   ========================================================================== */
.si-stack{
	display: flex;
	gap: calc(3 * var(--u));
	height: calc(12 * var(--u));
	margin: calc(4 * var(--u)) 0;
	border-radius: 99px;
	overflow: hidden;
}
.si-stack i{
	flex: 0 1 0;
	min-width: 0;
	background: rgba(var(--st), var(--sa, 1));
	transition: flex-grow 0.9s cubic-bezier(.2, .7, .2, 1) 0.3s;
}
.si-stack .is-in{background: var(--gradient-brand)}
.sec.aos-animate .si-stack i{flex-grow: var(--v)}

.si-chips{display: flex; flex-wrap: wrap; gap: calc(8 * var(--u))}
.si-chips li{
	display: inline-flex;
	align-items: center;
	gap: calc(6 * var(--u));
	padding: calc(6 * var(--u)) calc(11 * var(--u));
	border-radius: 99px;
	background: rgba(var(--st, var(--color-primary-rgb)), calc(var(--sa, 1) * 0.1));
	font-size: calc(11 * var(--u));
	font-weight: 600;
}
.si-chips li i{
	width: calc(8 * var(--u));
	height: calc(8 * var(--u));
	border-radius: 50%;
	background: rgba(var(--st, var(--color-primary-rgb)), var(--sa, 1));
}
.si-chips .is-in i{background: var(--gradient-brand)}
.si-chips b{margin-left: calc(2 * var(--u))}
.si-chips li.on{box-shadow: inset 0 0 0 1px rgba(var(--color-primary-rgb), 0.6)}

/* the same bar per row, thinner, with the row's total */
.si-floors{
	display: grid;
	gap: calc(9 * var(--u));
	padding-top: calc(12 * var(--u));
	border-top: 1px solid rgba(var(--color-primary-rgb), 0.06);
}
.si-floors.is-plain{padding-top: 0; border-top: 0; gap: calc(12 * var(--u))}
.si-floors li{
	display: grid;
	grid-template-columns: calc(70 * var(--u)) 1fr calc(24 * var(--u));
	align-items: center;
	gap: calc(10 * var(--u));
	font-size: calc(10.5 * var(--u));
	color: var(--color-text);
}
.si-floors .si-stack{height: calc(8 * var(--u)); margin: 0; gap: calc(2 * var(--u))}
.si-floors b{text-align: right; color: var(--color-primary)}


/* ==========================================================================
   S04. List rows
   <ul class="si-list"><li><span class="si-av">AB</span><p><b>name</b><span>detail</span></p>
     <em class="si-tag">tag</em><u class="si-pill is-free">status</u></li>
   An icon avatar: <span class="si-av is-icon"><i class="fa-solid ..."></i></span>
   ========================================================================== */
.si-list li{
	display: flex;
	align-items: center;
	gap: calc(10 * var(--u));
	padding: calc(9 * var(--u)) 0;
	border-top: 1px solid rgba(var(--color-primary-rgb), 0.06);
}
.si-list li:first-child{border-top: 0; padding-top: calc(2 * var(--u))}
.si-av{
	flex: none;
	display: grid;
	place-items: center;
	width: calc(30 * var(--u));
	height: calc(30 * var(--u));
	border-radius: 50%;
	background: var(--gradient-brand);
	font-size: calc(10 * var(--u));
	font-weight: 700;
	color: var(--color-white);
}
.si-av.is-icon{border-radius: calc(8 * var(--u)); background: rgba(var(--color-accent-rgb), 0.12); color: var(--color-accent); font-size: calc(12 * var(--u))}
.si-list p{flex: 1; min-width: 0; display: grid; gap: calc(2 * var(--u)); margin: 0}
.si-list p b{font-size: calc(12 * var(--u)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis}
.si-list p span{font-size: calc(10 * var(--u)); color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis}
.si-list > li > b{flex: none; font-size: calc(12 * var(--u))}
.si-tag{
	flex: none;
	padding: calc(3 * var(--u)) calc(8 * var(--u));
	border-radius: calc(6 * var(--u));
	background: var(--color-light);
	font-size: calc(9.5 * var(--u));
	font-style: normal;
	font-weight: 700;
}
.si-pill{
	flex: none;
	display: inline-block;
	min-width: calc(66 * var(--u));
	padding: calc(4 * var(--u)) calc(10 * var(--u));
	border-radius: 99px;
	background: rgba(var(--st, var(--color-primary-rgb)), calc(var(--sa, 1) * 0.12));
	font-size: calc(9.5 * var(--u));
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	color: rgba(var(--st, var(--color-primary-rgb)), max(var(--sa, 1), 0.6));
}


/* ==========================================================================
   S05. Bar chart
   <div class="si-bars"><b><i style="--h:60%"></i></b>...</div>  one <b> per column,
     a second <i class="b"> in a <b> = grouped bars (navy), .hi on a <b> = the peak (brand gradient)
   <div class="si-axis"><span>Mon</span>...</div>  labels under the columns
   <div class="si-keys"><span><i></i>Revenue</span><span class="b"><i></i>Expense</span></div>  legend
   ========================================================================== */
.si-bars{
	display: flex;
	align-items: flex-end;
	gap: calc(8 * var(--u));
	height: calc(130 * var(--u));
	padding-top: calc(6 * var(--u));
	border-bottom: 1px solid rgba(var(--color-primary-rgb), 0.1);
	background: linear-gradient(rgba(var(--color-primary-rgb), 0.05) 1px, transparent 1px) 0 0 / 100% 25%;
}
.si-bars > b{flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: calc(3 * var(--u)); height: 100%}
.si-bars i{
	flex: 1;
	max-width: calc(24 * var(--u));
	height: var(--h);
	border-radius: calc(4 * var(--u)) calc(4 * var(--u)) 0 0;
	background: rgba(var(--color-accent-rgb), 0.45);
	transform: scaleY(0);
	transform-origin: bottom;
}
.si-bars i.b{background: rgba(var(--color-primary-rgb), 0.8)}
.si-bars .hi i:not(.b){background: linear-gradient(0deg, var(--color-accent), var(--color-accent-2))}
.sec.aos-animate .si-bars i{
	animation: si-grow-y 0.8s cubic-bezier(.2, .7, .2, 1) forwards;
	animation-delay: calc(300ms + var(--i, 0) * 50ms);
}
@keyframes si-grow-y{to{transform: scaleY(1)}}
.si-axis{display: flex; gap: calc(8 * var(--u)); margin-top: calc(-6 * var(--u))}
.si-axis span{flex: 1; text-align: center; font-size: calc(9.5 * var(--u)); color: var(--color-text); white-space: nowrap}
.si-keys{display: flex; flex-wrap: wrap; gap: calc(14 * var(--u)); font-size: calc(10 * var(--u)); color: var(--color-text)}
.si-keys span{display: inline-flex; align-items: center; gap: calc(5 * var(--u))}
.si-keys i{width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: calc(2 * var(--u)); background: rgba(var(--color-accent-rgb), 0.6)}
.si-keys .b i{background: rgba(var(--color-primary-rgb), 0.8)}
.si-keys .c i{background: var(--color-accent-2)}
.si-keys .d i{background: rgba(var(--color-black-rgb), 0.3)}


/* ==========================================================================
   S06. Line chart
   <div class="si-line"><svg viewBox="0 0 300 100" preserveAspectRatio="none">
     <path class="a" d="..."/> (area)  <path class="l" d="..."/> (line)  <path class="l2"/> (2nd line)
     <path class="avg" d="M0 60H300"/> (dashed average)</svg>
     <i class="si-dot" style="left:60%;top:20%"></i></div>  (peak dot)
   The chart draws in from left to right.
   ========================================================================== */
.si-line{
	position: relative;
	background: linear-gradient(rgba(var(--color-primary-rgb), 0.05) 1px, transparent 1px) 0 0 / 100% 25%;
	border-bottom: 1px solid rgba(var(--color-primary-rgb), 0.1);
}
.si-line svg{
	display: block;
	width: 100%;
	height: calc(120 * var(--u));
	overflow: visible;
	clip-path: inset(-10% 100% -10% 0);
	transition: clip-path 1.3s cubic-bezier(.4, 0, .2, 1) 0.3s;
}
.sec.aos-animate .si-line svg{clip-path: inset(-10% -2% -10% 0)}
.si-line path{fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round}
.si-line .a{fill: rgba(var(--color-accent-rgb), 0.14); stroke: none}
.si-line .a2{fill: rgba(var(--color-accent-2-rgb), 0.08); stroke: none}
.si-line .l{stroke: var(--color-accent); stroke-width: 2.2}
.si-line .l2{stroke: var(--color-accent-2); stroke-width: 2.2}
.si-line .l3{stroke: rgba(var(--color-primary-rgb), 0.7); stroke-width: 1.8}
.si-line .avg{stroke: rgba(var(--color-primary-rgb), 0.35); stroke-width: 1.2; stroke-dasharray: 4 4}
.si-dot{
	position: absolute;
	width: calc(10 * var(--u));
	height: calc(10 * var(--u));
	margin: calc(-5 * var(--u)) 0 0 calc(-5 * var(--u));
	border: calc(2 * var(--u)) solid var(--color-white);
	border-radius: 50%;
	background: var(--color-accent-2);
	box-shadow: 0 0 0 calc(4 * var(--u)) rgba(var(--color-accent-2-rgb), 0.18);
	opacity: 0;
	transform: scale(0);
	transition: opacity 0.4s, transform 0.4s cubic-bezier(.3, 1.6, .5, 1);
	transition-delay: 1.3s;
}
.sec.aos-animate .si-dot{opacity: 1; transform: none}
.si-dot b{
	position: absolute;
	bottom: calc(100% + 8 * var(--u));
	left: 50%;
	transform: translateX(-50%);
	padding: calc(3 * var(--u)) calc(7 * var(--u));
	border-radius: calc(5 * var(--u));
	background: var(--color-primary);
	font-size: calc(9.5 * var(--u));
	color: var(--color-white);
	white-space: nowrap;
}


/* ==========================================================================
   S07. Donut + legend
   <div class="si-split"><div class="si-donut" style="--p1:59;--p2:16;--p3:13;--p4:12"><b>59,527</b><span>Total</span></div>
     <ul class="si-legend"><li><i></i>Rooms<b>59%</b></li>...</ul></div>
   Up to 4 parts (blue, pink, navy, grey); the rest of the ring stays light. The ring sweeps round.
   ========================================================================== */
@property --si-sw{syntax: "<number>"; inherits: true; initial-value: 0}
.si-split{display: flex; align-items: center; gap: calc(22 * var(--u))}
.si-donut{
	position: relative;
	flex: none;
	display: grid;
	place-content: center;
	width: calc(132 * var(--u));
	height: calc(132 * var(--u));
	border-radius: 50%;
	text-align: center;
	--s1: calc(var(--p1, 0) * var(--si-sw) * 1%);
	--s2: calc((var(--p1, 0) + var(--p2, 0)) * var(--si-sw) * 1%);
	--s3: calc((var(--p1, 0) + var(--p2, 0) + var(--p3, 0)) * var(--si-sw) * 1%);
	--s4: calc((var(--p1, 0) + var(--p2, 0) + var(--p3, 0) + var(--p4, 0)) * var(--si-sw) * 1%);
	background: conic-gradient(var(--color-accent) 0 var(--s1), var(--color-accent-2) 0 var(--s2), var(--color-primary) 0 var(--s3), rgba(var(--color-black-rgb), 0.25) 0 var(--s4), var(--color-light) 0);
	transition: --si-sw 1.3s cubic-bezier(.4, 0, .2, 1) 0.3s;
}
.sec.aos-animate .si-donut{--si-sw: 1}
.si-donut::before{content: ""; position: absolute; inset: calc(17 * var(--u)); border-radius: 50%; background: var(--color-white)}
.si-donut b,
.si-donut span{position: relative}
.si-donut b{font-size: calc(17 * var(--u)); letter-spacing: -0.02em}
.si-donut span{font-size: calc(9.5 * var(--u)); color: var(--color-text)}
.si-legend{flex: 1; min-width: 0; display: grid; gap: calc(9 * var(--u))}
.si-legend li{display: flex; align-items: center; gap: calc(8 * var(--u)); font-size: calc(11 * var(--u))}
.si-legend li i{flex: none; width: calc(9 * var(--u)); height: calc(9 * var(--u)); border-radius: 50%; background: var(--color-accent)}
.si-legend li:nth-child(2) i{background: var(--color-accent-2)}
.si-legend li:nth-child(3) i{background: var(--color-primary)}
.si-legend li:nth-child(4) i{background: rgba(var(--color-black-rgb), 0.25)}
.si-legend li:nth-child(5) i{background: var(--color-light)}
.si-legend li b{margin-left: auto}
.si-legend li small{color: var(--color-text); margin-left: calc(4 * var(--u))}


/* ==========================================================================
   S08. Horizontal bars
   <ul class="si-hbars"><li><span>label</span><u><i style="--v:62%"></i></u><b>62</b></li>
   .is-in / .is-reserved / ... on an <li> colours its bar; default = brand gradient. Bars slide in.
   ========================================================================== */
.si-hbars{display: grid; gap: calc(11 * var(--u))}
.si-hbars li{
	display: grid;
	grid-template-columns: calc(96 * var(--u)) 1fr calc(44 * var(--u));
	align-items: center;
	gap: calc(10 * var(--u));
	font-size: calc(11 * var(--u));
}
.si-hbars span{color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis}
.si-hbars u{display: block; height: calc(9 * var(--u)); border-radius: 99px; background: var(--color-light); overflow: hidden}
.si-hbars u i{
	display: block;
	width: var(--v);
	height: 100%;
	border-radius: inherit;
	background: var(--gradient-brand);
	transform: scaleX(0);
	transform-origin: left;
}
.si-hbars li[class] u i{background: rgba(var(--st), var(--sa, 1))}
.si-hbars b{text-align: right}
.sec.aos-animate .si-hbars u i{
	animation: si-grow-x 0.9s cubic-bezier(.2, .7, .2, 1) forwards;
	animation-delay: calc(300ms + var(--i, 0) * 80ms);
}
@keyframes si-grow-x{to{transform: scaleX(1)}}


/* ==========================================================================
   S09. Month calendar
   <div class="si-cal"><span>Sun</span>...<p><small>1</small><i class="is-reserved">Crystal · Wedding</i></p>...</div>
   <p class="out"> = day outside the month, <p class="today"> = today. Events pop in one after another.
   ========================================================================== */
.si-cal{
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: calc(3 * var(--u));
}
.si-cal > span{padding-bottom: calc(3 * var(--u)); text-align: center; font-size: calc(9 * var(--u)); font-weight: 700; color: var(--color-text)}
.si-cal p{
	display: grid;
	align-content: start;
	gap: calc(2 * var(--u));
	min-width: 0;
	min-height: calc(46 * var(--u));
	margin: 0;
	padding: calc(3 * var(--u));
	border-radius: calc(5 * var(--u));
	background: rgba(var(--color-primary-rgb), 0.03);
}
.si-cal p small{font-size: calc(8.5 * var(--u)); color: var(--color-text); text-align: right}
.si-cal p.out small{opacity: 0.4}
.si-cal p.today small{
	justify-self: end;
	display: grid;
	place-items: center;
	width: calc(15 * var(--u));
	height: calc(15 * var(--u));
	border-radius: 50%;
	background: var(--color-accent-2);
	color: var(--color-white);
}
.si-cal p i{
	display: block;
	padding: calc(2 * var(--u)) calc(4 * var(--u));
	border-radius: calc(3 * var(--u));
	background: rgba(var(--st, var(--color-primary-rgb)), max(var(--sa, 1), 0.85));
	font-size: calc(7.5 * var(--u));
	font-style: normal;
	font-weight: 600;
	color: var(--color-white);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	opacity: 0;
	transform: scale(0.8);
}
.si-cal p i.is-in{background: var(--gradient-brand)}
.sec.aos-animate .si-cal p i{
	animation: si-pop 0.4s cubic-bezier(.3, 1.4, .5, 1) forwards;
	animation-delay: calc(300ms + var(--i, 0) * 25ms);
}


/* ==========================================================================
   S10. Switches
   <ul class="si-toggles"><li><span>label</span><i class="on">SMS</i><i>Email</i></li>
   or a row of plain switches: <div class="si-switches"><i class="on"></i>...</div>
   Switches with .on flip on one after another when the row scrolls in.
   ========================================================================== */
.si-toggles li{
	display: flex;
	align-items: center;
	gap: calc(12 * var(--u));
	padding: calc(9 * var(--u)) 0;
	border-top: 1px solid rgba(var(--color-primary-rgb), 0.06);
	font-size: calc(11.5 * var(--u));
}
.si-toggles li:first-child{border-top: 0; padding-top: 0}
.si-toggles li > span{flex: 1; min-width: 0; display: flex; align-items: center; gap: calc(8 * var(--u))}
.si-toggles li > span > i{color: var(--color-accent); width: calc(14 * var(--u)); text-align: center}
.si-toggles li > i{
	display: flex;
	align-items: center;
	gap: calc(6 * var(--u));
	font-size: calc(9.5 * var(--u));
	font-style: normal;
	color: var(--color-text);
}
/* the switch itself */
.si-toggles li > i::before,
.si-switches i{
	content: "";
	flex: none;
	width: calc(28 * var(--u));
	height: calc(16 * var(--u));
	border-radius: 99px;
	/* the white knob is a round gradient, so the knob slides by moving the background */
	background: radial-gradient(circle, var(--color-white) 55%, transparent 60%) 0 50% / calc(16 * var(--u)) calc(16 * var(--u)) no-repeat rgba(var(--color-black-rgb), 0.15);
	transition: background-color 0.4s, background-position 0.4s cubic-bezier(.3, 1.4, .5, 1);
	transition-delay: calc(400ms + var(--i, 0) * 120ms);
}
.sec.aos-animate .si-toggles li > i.on::before,
.sec.aos-animate .si-switches i.on{background-color: var(--color-accent-2); background-position: 100% 50%}
.si-switches{display: flex; justify-content: space-around; gap: calc(6 * var(--u))}
.si-switches i{display: block}


/* ==========================================================================
   S11. Form fields
   <div class="si-form"><label><small>Field</small><span>value <i class="fa-solid fa-chevron-down"></i></span></label>
   .c2 = two columns, .wide on a <label> = full width, .is-area = a text box, .is-empty = placeholder.
   ========================================================================== */
.si-form{display: grid; gap: calc(10 * var(--u))}
.si-form.c2{grid-template-columns: 1fr 1fr}
.si-form label{display: grid; gap: calc(4 * var(--u)); min-width: 0; margin: 0}
.si-form label.wide{grid-column: 1 / -1}
.si-form small{font-size: calc(9 * var(--u)); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text)}
.si-form label > span{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: calc(6 * var(--u));
	min-height: calc(30 * var(--u));
	padding: calc(6 * var(--u)) calc(10 * var(--u));
	border: 1px solid rgba(var(--color-primary-rgb), 0.12);
	border-radius: calc(7 * var(--u));
	font-size: calc(11 * var(--u));
	white-space: nowrap;
	overflow: hidden;
}
.si-form label > span i{font-size: calc(9 * var(--u)); color: var(--color-text)}
.si-form .is-area > span{display: block; min-height: calc(46 * var(--u)); line-height: 1.7; white-space: normal}
.si-form .is-empty > span{color: var(--color-text)}
/* placeholder chips inside a field: {guest_name} */
.si-var{
	display: inline-block;
	padding: 0 calc(5 * var(--u));
	border-radius: calc(4 * var(--u));
	background: rgba(var(--color-accent-rgb), 0.15);
	color: var(--color-accent);
	font-weight: 600;
}


/* ==========================================================================
   S12. Phone message
   <div class="si-phone"><div><small>Hotel</small><p>message</p><span>10:42</span></div></div>
   A small phone; the message bubble pops in.
   ========================================================================== */
.si-phone{
	align-self: center;
	width: calc(220 * var(--u));
	padding: calc(10 * var(--u));
	border-radius: calc(26 * var(--u));
	background: var(--color-primary);
	box-shadow: 0 calc(14 * var(--u)) calc(30 * var(--u)) calc(-14 * var(--u)) rgba(var(--color-primary-rgb), 0.6);
}
.si-phone > div{
	display: grid;
	gap: calc(8 * var(--u));
	min-height: calc(220 * var(--u));
	padding: calc(22 * var(--u)) calc(12 * var(--u)) calc(14 * var(--u));
	border-radius: calc(18 * var(--u));
	background: var(--color-light);
	align-content: start;
}
.si-phone small{text-align: center; font-size: calc(9.5 * var(--u)); font-weight: 700}
.si-phone p{
	justify-self: start;
	max-width: 90%;
	margin: 0;
	padding: calc(9 * var(--u)) calc(11 * var(--u));
	border-radius: calc(12 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u)) calc(3 * var(--u));
	background: var(--color-white);
	font-size: calc(10.5 * var(--u));
	line-height: 1.45;
	box-shadow: 0 1px 2px rgba(var(--color-primary-rgb), 0.08);
	opacity: 0;
	transform: translateY(calc(10 * var(--u))) scale(0.9);
	transform-origin: bottom left;
}
.si-phone p + p{background: var(--gradient-brand); color: var(--color-white); justify-self: end; border-radius: calc(12 * var(--u)) calc(12 * var(--u)) calc(3 * var(--u)) calc(12 * var(--u)); transform-origin: bottom right}
.sec.aos-animate .si-phone p{animation: si-pop 0.5s cubic-bezier(.3, 1.4, .5, 1) forwards; animation-delay: 0.5s}
.sec.aos-animate .si-phone p + p{animation-delay: 1.2s}
.si-phone > div > span{font-size: calc(8.5 * var(--u)); color: var(--color-text)}


/* ==========================================================================
   S13. Task board
   <div class="si-board"><div><span>To do <b>3</b></span><p class="is-in"><b>title</b><small>meta</small></p>...</div>...</div>
   Columns side by side (.c3 = 3 columns, default 4); the cards drop in one after another.
   ========================================================================== */
.si-board{display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(8 * var(--u))}
.si-board.c3{grid-template-columns: repeat(3, 1fr)}
.si-board > div{
	display: grid;
	align-content: start;
	gap: calc(6 * var(--u));
	min-width: 0;
	padding: calc(8 * var(--u));
	border-radius: calc(8 * var(--u));
	background: rgba(var(--color-primary-rgb), 0.04);
}
.si-board > div > span{display: flex; justify-content: space-between; font-size: calc(10 * var(--u)); font-weight: 700}
.si-board > div > span b{color: var(--color-text); font-weight: 600}
.si-board p{
	display: grid;
	gap: calc(4 * var(--u));
	margin: 0;
	padding: calc(7 * var(--u));
	border-left: calc(3 * var(--u)) solid rgba(var(--st, var(--color-accent-rgb)), max(var(--sa, 1), 0.6));
	border-radius: calc(6 * var(--u));
	background: var(--color-white);
	box-shadow: 0 1px 2px rgba(var(--color-primary-rgb), 0.08);
	opacity: 0;
	transform: translateY(calc(-8 * var(--u)));
}
.si-board p b{font-size: calc(10 * var(--u)); line-height: 1.25}
.si-board p small{font-size: calc(8.5 * var(--u)); color: var(--color-text)}
.sec.aos-animate .si-board p{
	animation: si-pop 0.5s cubic-bezier(.2, .7, .2, 1) forwards;
	animation-delay: calc(300ms + var(--i, 0) * 70ms);
}


/* ==========================================================================
   S14. Table
   <div class="si-table"><p class="h"><span>Col</span>...</p><p><span>cell</span>...</p></div>
   Columns from --cols on .si-table (e.g. style="--cols:2fr 1fr 1fr"). Rows fade up (.si-pop).
   ========================================================================== */
.si-table{display: grid; font-size: calc(11 * var(--u))}
.si-table p{
	display: grid;
	grid-template-columns: var(--cols, repeat(4, 1fr));
	align-items: center;
	gap: calc(8 * var(--u));
	margin: 0;
	padding: calc(8 * var(--u)) calc(4 * var(--u));
	border-top: 1px solid rgba(var(--color-primary-rgb), 0.06);
}
.si-table p.h{border-top: 0; padding-top: 0; font-size: calc(9 * var(--u)); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text)}
.si-table span{min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis}
.si-table .r{text-align: right}
.si-table .c{text-align: center}
.si-table b{font-weight: 700}
/* a small input box in a cell (rate grid) */
.si-table .si-in{
	display: block;
	padding: calc(4 * var(--u)) 0;
	border: 1px solid rgba(var(--color-primary-rgb), 0.12);
	border-radius: calc(5 * var(--u));
	text-align: center;
}


/* ==========================================================================
   S15. Steps
   <ol class="si-steps"><li><i class="fa-solid ..."></i><b>64</b><span>Applied</span></li>...</ol>
   Boxes joined by arrows, popping in one after another (.si-pop). .on = highlighted step.
   ========================================================================== */
.si-steps{display: flex; align-items: stretch; gap: calc(18 * var(--u)); margin: 0; padding: 0; list-style: none}
.si-steps li{
	position: relative;
	flex: 1;
	display: grid;
	justify-items: center;
	align-content: center;
	gap: calc(4 * var(--u));
	min-width: 0;
	padding: calc(12 * var(--u)) calc(6 * var(--u));
	border-radius: calc(10 * var(--u));
	background: rgba(var(--color-accent-rgb), 0.08);
	text-align: center;
}
.si-steps li + li::before{
	content: "\203A";
	position: absolute;
	left: calc(-14 * var(--u));
	top: 50%;
	transform: translateY(-50%);
	font-size: calc(16 * var(--u));
	color: var(--color-text);
}
.si-steps i{color: var(--color-accent); font-size: calc(14 * var(--u))}
.si-steps b{font-size: calc(18 * var(--u))}
.si-steps span{font-size: calc(9.5 * var(--u)); color: var(--color-text)}
.si-steps li.on{background: var(--gradient-brand) border-box; color: var(--color-white)}
.si-steps li.on i,
.si-steps li.on span{color: rgba(var(--color-white-rgb), 0.9)}


/* ==========================================================================
   S16. Bill / statement
   <div class="si-bill"><p><span>Line</span><b>amount</b></p>...<p class="t"><span>Total</span><b>...</b></p></div>
   .sub = a sub-total row, .neg = a minus amount (grey). Rows fade up (.si-pop).
   <div class="si-paid"><u><i style="--v:40%"></i></u><span>...</span></div>  paid so far (bar slides in)
   ========================================================================== */
.si-bill{display: grid; font-size: calc(11.5 * var(--u))}
.si-bill p{display: flex; justify-content: space-between; gap: calc(10 * var(--u)); margin: 0; padding: calc(7 * var(--u)) 0; border-top: 1px dashed rgba(var(--color-primary-rgb), 0.1)}
.si-bill p:first-child{border-top: 0}
.si-bill span{color: var(--color-text)}
.si-bill .neg b{color: var(--color-text); font-weight: 600}
.si-bill .sub{border-top-style: solid}
.si-bill .sub span{color: var(--color-primary); font-weight: 700}
.si-bill .t{margin-top: calc(4 * var(--u)); padding: calc(9 * var(--u)) calc(10 * var(--u)); border: 0; border-radius: calc(8 * var(--u)); background: var(--color-light)}
.si-bill .t span{color: var(--color-primary); font-weight: 700}
.si-bill .t b{font-size: calc(14 * var(--u))}
.si-paid{display: grid; gap: calc(5 * var(--u)); font-size: calc(10 * var(--u)); color: var(--color-text)}
.si-paid u{display: block; height: calc(8 * var(--u)); border-radius: 99px; background: var(--color-light); overflow: hidden}
.si-paid u i{display: block; width: var(--v); height: 100%; border-radius: inherit; background: var(--gradient-brand); transform: scaleX(0); transform-origin: left; transition: transform 1s cubic-bezier(.2, .7, .2, 1) 0.6s}
.sec.aos-animate .si-paid u i{transform: none}
.si-paid span{display: flex; justify-content: space-between}


/* ==========================================================================
   S17. Headline number
   <div class="si-hero"><small>REVENUE · 7 DAYS</small><b>1,265</b><span><em class="si-up">+12%</em> vs last week</span></div>
   ========================================================================== */
.si-hero{display: grid; gap: calc(4 * var(--u))}
.si-hero small{font-size: calc(9.5 * var(--u)); font-weight: 700; letter-spacing: 0.08em; color: var(--color-accent)}
.si-hero b{font-size: calc(32 * var(--u)); letter-spacing: -0.03em; line-height: 1.05}
.si-hero b small{font-size: calc(13 * var(--u)); letter-spacing: 0; color: var(--color-text); font-weight: 600}
.si-hero span{font-size: calc(10.5 * var(--u)); color: var(--color-text)}
.si-hero em{font-style: normal}


/* ==========================================================================
   S18. Two columns
   <div class="si-duo"><div>left parts</div><div>right parts</div></div>
   Two card parts side by side (e.g. a menu beside stock boxes); one column on small phones.
   ========================================================================== */
.si-duo{display: grid; grid-template-columns: 1fr 1fr; gap: calc(14 * var(--u)); align-items: start}
.si-duo > div{display: flex; flex-direction: column; gap: calc(10 * var(--u)); min-width: 0}


/* ==========================================================================
   S19. Chat bubbles
   <ul class="si-chat si-pop"><li>sent message<small>SMS · 10:42</small></li><li class="is-them">reply<small>...</small></li></ul>
   Sent messages on the right in the brand gradient, replies (.is-them) on the left; they pop in one by one.
   ========================================================================== */
.si-chat{display: grid; gap: calc(8 * var(--u))}
.si-chat li{
	justify-self: end;
	max-width: 86%;
	padding: calc(8 * var(--u)) calc(11 * var(--u));
	border-radius: calc(12 * var(--u)) calc(12 * var(--u)) calc(3 * var(--u)) calc(12 * var(--u));
	background: var(--gradient-brand);
	color: var(--color-white);
	font-size: calc(10.5 * var(--u));
	line-height: 1.45;
}
.si-chat li small{display: block; margin-top: calc(3 * var(--u)); font-size: calc(8.5 * var(--u)); color: rgba(var(--color-white-rgb), 0.85)}
.si-chat li.is-them{
	justify-self: start;
	border-radius: calc(12 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u)) calc(3 * var(--u));
	background: var(--color-light);
	color: var(--color-primary);
}
.si-chat li.is-them small{color: var(--color-text)}


/* ==========================================================================
   S20. Checklist
   <ul class="si-check si-pop"><li class="on"><i class="fa-solid fa-check"></i><span>task</span><em>owner</em></li>...</ul>
   .is-plain = no strike-through on done items. .on = done: the circle fills with the brand gradient (the tick pops in after its row) and the task is struck through.
   ========================================================================== */
.si-check{display: grid; gap: calc(6 * var(--u))}
.si-check li{
	display: flex;
	align-items: center;
	gap: calc(8 * var(--u));
	min-width: 0;
	padding: calc(6 * var(--u)) calc(8 * var(--u));
	border-radius: calc(8 * var(--u));
	background: rgba(var(--color-primary-rgb), 0.03);
	font-size: calc(11 * var(--u));
}
.si-check li > i{
	flex: none;
	display: grid;
	place-items: center;
	width: calc(16 * var(--u));
	height: calc(16 * var(--u));
	border: 1.5px solid rgba(var(--color-primary-rgb), 0.25);
	border-radius: 50%;
	font-size: calc(8 * var(--u));
	color: transparent;
}
.si-check li.on > i{border-color: transparent; background: var(--gradient-brand); color: var(--color-white)}
.si-check li > span{min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis}
.si-check li.on > span{color: var(--color-text); text-decoration: line-through}
.si-check.is-plain li.on > span{color: inherit; text-decoration: none}   /* ticked, but the text stays readable (figures) */
.si-check li > em{flex: none; margin-left: auto; font-style: normal; font-size: calc(9.5 * var(--u)); color: var(--color-text)}
.sec .si-check li.on > i{transform: scale(0.3)}
.sec.aos-animate .si-check li.on > i{animation: si-tick 0.45s cubic-bezier(.3, 1.4, .5, 1) forwards; animation-delay: calc(700ms + var(--i, 0) * 60ms)}
@keyframes si-tick{to{transform: none}}


/* ==========================================================================
   RESPONSIVE  -> move to cubix-responsive.css (one block per section above)
   Below 1200px --u is 1px, so the sizes above already work as px.
   ========================================================================== */

/* S00. Shared card parts · RESPONSIVE: no movement for people who ask for less */
@media (prefers-reduced-motion: reduce){
	.sec .si-pop > *,
	.si-cal p i,
	.si-board p,
	.si-phone p,
	.si-check li.on > i,
	.si-dot{opacity: 1; transform: none; animation: none !important}
	.si-bars i,
	.si-hbars u i,
	.si-paid u i{transform: none; animation: none !important}
	.si-stack i{flex-grow: var(--v); transition: none}
	.si-line svg{clip-path: none; transition: none}
	.si-donut{--si-sw: 1; transition: none}
	.si-live{animation: none}
}
@media (max-width: 575.98px){
	.sec .si-card{padding: 12px; gap: 10px}
}

/* S01. KPI tiles · RESPONSIVE */
@media (max-width: 575.98px){
	.si-kpis,
	.si-kpis.c4{grid-template-columns: repeat(3, 1fr); gap: 6px}
	.si-kpis.c2{grid-template-columns: repeat(2, 1fr)}
	.si-kpis li{padding: 8px}
	.si-kpis i{width: 24px; height: 24px; font-size: 11px}
	.si-kpis b{font-size: 16px}
	.si-kpis span{font-size: 9.5px}
}

/* S02. Room / table tiles · RESPONSIVE: small phones show 8 tiles in 4 wider columns, so the status words fit */
@media (max-width: 575.98px){
	.si-rooms{grid-template-columns: repeat(4, 1fr); gap: 5px}
	.si-rooms li:nth-child(n+9){display: none}
	.si-rooms.c4{grid-template-columns: repeat(2, 1fr)}
	.si-rooms.c4 li:nth-child(n+7){display: none}
	.si-rooms li{padding: 6px 6px 0}
	.si-rooms b{font-size: 13px}
	.si-rooms u{margin: 4px -6px 0; padding: 2px 6px; font-size: 7px}
}

/* S03. Status bar + chips · RESPONSIVE */
@media (max-width: 575.98px){
	.si-floors li{grid-template-columns: 62px 1fr 22px}
}

/* S04. List rows · RESPONSIVE */
@media (max-width: 575.98px){
	.si-list li{gap: 8px}
	.si-list .si-tag{display: none}
	.si-pill{min-width: 0; padding: 3px 8px}
}

/* S05. Bar chart · RESPONSIVE */
@media (max-width: 575.98px){
	.si-bars,
	.si-axis{gap: 4px}
	.si-axis span{font-size: 8.5px}
}

/* S07. Donut + legend · RESPONSIVE */
@media (max-width: 575.98px){
	.si-split{gap: 14px}
	.si-donut{width: 104px; height: 104px}
	.si-donut::before{inset: 14px}
	.si-donut b{font-size: 13px}
	.si-legend li{font-size: 10px}
}

/* S08. Horizontal bars · RESPONSIVE */
@media (max-width: 575.98px){
	.si-hbars li{grid-template-columns: 80px 1fr 36px; gap: 8px}
}

/* S09. Month calendar · RESPONSIVE: only the first event of each day on small phones */
@media (max-width: 575.98px){
	.si-cal p{min-height: 38px}
	.si-cal p i + i{display: none}
	.si-cal p i{font-size: 6.5px; padding: 1px 3px}
}

/* S11. Form fields · RESPONSIVE: no change needed */

/* S13. Task board · RESPONSIVE: 3 columns on small phones */
@media (max-width: 575.98px){
	.si-board{grid-template-columns: repeat(3, 1fr)}
	.si-board > div:nth-child(n+4){display: none}
}

/* S14. Table · RESPONSIVE */
@media (max-width: 575.98px){
	.si-table{font-size: 10px}
	.si-table p{gap: 5px}
	.si-table .si-pill{min-width: 0; padding: 3px 2px; font-size: 7.5px}
}

/* S15. Steps · RESPONSIVE */
@media (max-width: 575.98px){
	.si-steps{gap: 12px}
	.si-steps li{padding: 8px 2px}
	.si-steps li + li::before{left: -10px}
	.si-steps b{font-size: 14px}
	.si-steps span{font-size: 8.5px}
}

/* S18. Two columns · RESPONSIVE: one column on small phones */
@media (max-width: 575.98px){
	.si-duo{grid-template-columns: 1fr; gap: 10px}
}

/* S19. Chat bubbles · RESPONSIVE: no change needed */

/* S20. Checklist · RESPONSIVE */
@media (max-width: 575.98px){
	.si-check li{padding: 5px 7px; font-size: 10.5px}
}