/*
 * SmartAI POS — client CSS  (v2, 2026-09-12)
 * Goes in: theme/agency-child/assets/css/client.css
 *
 * Rebranded from the v1 warm-orange palette to the app design system
 * (navy / emerald / orange accent). See assets/style-tile.md v2.
 *
 * Tokens only for brand colours — every one comes from theme.json, so a
 * palette change still rebrands the whole site. The near-black navies used
 * for device chrome are literals on purpose: they are shading of the dark
 * slot, not brand colours, and exposing them as editor slots would invite
 * someone to change them independently and break the device illusion.
 *
 * Contents: shared bits · hero panel · POS terminal · KDS board ·
 * offline flow diagram · tier table · dense detail list · photo band ·
 * animation · mobile.
 *
 * These are the components the block editor cannot express. All body text
 * stays in real blocks so the client can edit it.
 */

/* ---------- shared ---------- */

.sai-eyebrow {
	font-family: 'Barlow Condensed', sans-serif;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .16em;
	font-size: .84rem;
	color: #C24700; /* darkened accent — #FF5C00 on white is 2.9:1 and fails AA */
}

.sai-dark .sai-eyebrow {
	color: var(--wp--preset--color--accent);
}

/* Filled buttons use the darker emerald. White on #059669 measures 3.77:1
   and fails AA for 16px label text; #047857 measures 5.49:1. */
.sai-btn-primary,
.wp-block-button__link {
	background: #047857;
	color: #fff;
	border-radius: 8px;
}

.sai-btn-primary:hover,
.wp-block-button__link:hover {
	background: #036B4E;
}

:where(a, button, summary, input, select, textarea):focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(255, 92, 0, .4);
	border-radius: 8px;
}

.sai-ticks {
	list-style: none;
	padding-left: 0;
	margin-top: 20px;
}

.sai-ticks li {
	padding-left: 28px;
	position: relative;
	margin-bottom: 11px;
}

.sai-ticks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .6em;
	width: 10px;
	height: 10px;
	background: var(--wp--preset--color--primary);
	border-radius: 3px;
}

/* ---------- hero ---------- */

.sai-hero {
	position: relative;
	overflow: hidden;
}

.sai-stage {
	position: relative;
	padding: 38px 0 34px;
}

/* Dark panel hugs the terminal and bleeds off the right of the viewport.
   Clipped by .sai-hero overflow, so it never causes horizontal scroll. */
.sai-stage::before {
	content: "";
	position: absolute;
	z-index: 0;
	top: 0;
	bottom: 0;
	left: -44px;
	right: -100vw;
	background: var(--wp--preset--color--dark);
	border-radius: 24px 0 0 24px;
}

.sai-accent {
	position: absolute;
	left: -22px;
	top: 6px;
	width: 88px;
	height: 88px;
	border-radius: 14px;
	background: var(--wp--preset--color--accent);
	opacity: .2;
	z-index: 1;
}

.sai-cap {
	position: relative;
	z-index: 3;
	font-size: .84rem;
	margin-top: 16px;
	color: #8D9AAE;
}

/* ---------- POS terminal ---------- */

.sai-rig {
	position: relative;
	z-index: 3;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 18px;
}

.sai-pos {
	position: relative;
	flex: 1;
	max-width: 430px;
}

.sai-pos-body {
	position: relative;
	background: #16243A;
	border-radius: 20px;
	padding: 13px 13px 26px;
	box-shadow: 0 30px 60px -26px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .08);
}

.sai-cam {
	position: absolute;
	top: 6px;
	left: 50%;
	transform: translateX(-50%);
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #2B3D57;
}

.sai-chin {
	position: absolute;
	left: 50%;
	bottom: 9px;
	transform: translateX(-50%);
	font-family: 'Barlow Condensed', sans-serif;
	font-size: .62rem;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: #4A5A72;
}

.sai-screen {
	position: relative;
	background: #101D2F;
	border-radius: 11px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, .06);
}

.sai-screen-bar {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 11px 14px;
	background: #0B1726;
	border-bottom: 1px solid rgba(255, 255, 255, .10);
}

.sai-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #27394F;
}

.sai-screen-tt {
	margin-left: 8px;
	font-size: .78rem;
	color: #8D9AAE;
	font-family: 'Barlow Condensed', sans-serif;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.sai-live {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	margin-right: 6px;
	animation: sai-pulse 1.6s ease-in-out infinite;
}

.sai-screen-body {
	padding: 13px;
	color: #E4E9F0;
}

.sai-feed {
	position: relative;
	height: 142px;
	overflow: hidden;
}

.sai-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 12px;
	background: var(--wp--preset--color--secondary);
	border-radius: 8px;
	margin-bottom: 7px;
	font-size: .87rem;
}

.sai-pill {
	font-size: .7rem;
	font-weight: 600;
	padding: 3px 9px;
	border-radius: 20px;
	font-family: 'Barlow Condensed', sans-serif;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.sai-pill-live {
	background: rgba(255, 92, 0, .18);
	color: #FF8A44;
}

.sai-pill-done {
	background: rgba(5, 150, 105, .2);
	color: #34D399;
}

.sai-new {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	animation: sai-ticket 9s ease-in-out infinite;
}

.sai-queue {
	animation: sai-shift 9s ease-in-out infinite;
}

.sai-kpis {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin-top: 12px;
}

.sai-kpi {
	background: var(--wp--preset--color--secondary);
	border-radius: 8px;
	padding: 11px 12px;
}

.sai-kpi span {
	display: block;
	font-size: .7rem;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: #8D9AAE;
	font-family: 'Barlow Condensed', sans-serif;
}

.sai-kpi b {
	font-size: 1.3rem;
	font-weight: 600;
	font-family: 'Barlow Condensed', sans-serif;
	display: block;
}

.sai-roll {
	height: 1.32em;
	overflow: hidden;
}

.sai-roll b {
	animation: sai-roll 9s steps(1) infinite;
}

.sai-sparks {
	display: flex;
	align-items: flex-end;
	gap: 3px;
	height: 34px;
	margin-top: 12px;
}

.sai-sparks i {
	flex: 1;
	background: var(--wp--preset--color--primary);
	opacity: .8;
	border-radius: 2px 2px 0 0;
	animation: sai-grow 1.1s cubic-bezier(.2, .7, .3, 1) both;
}

.sai-neck {
	width: 52px;
	height: 34px;
	margin: 0 auto;
	background: linear-gradient(180deg, #16243A, #101D2F);
	clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%);
}

.sai-base {
	width: 170px;
	height: 13px;
	margin: 0 auto;
	border-radius: 0 0 9px 9px;
	background: linear-gradient(180deg, #18283F, #0C1728);
	box-shadow: 0 12px 22px -10px rgba(0, 0, 0, .75);
}

.sai-term {
	width: 86px;
	flex: 0 0 auto;
}

.sai-term-body {
	background: #16243A;
	border-radius: 12px;
	padding: 9px 9px 12px;
	box-shadow: 0 18px 34px -18px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .07);
}

.sai-term-screen {
	background: #101D2F;
	border-radius: 6px;
	padding: 8px 7px;
	text-align: center;
	border: 1px solid rgba(255, 255, 255, .06);
}

.sai-term-screen b {
	display: block;
	font-family: 'Barlow Condensed', sans-serif;
	font-size: .95rem;
	color: #E4E9F0;
}

.sai-term-screen span {
	font-size: .55rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #8D9AAE;
	font-family: 'Barlow Condensed', sans-serif;
}

.sai-keys {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 4px;
	margin-top: 8px;
}

.sai-keys i {
	height: 9px;
	border-radius: 2px;
	background: #22334B;
}

.sai-keys i.go {
	background: rgba(5, 150, 105, .65);
}

.sai-term-base {
	width: 60px;
	height: 8px;
	margin: 0 auto;
	border-radius: 0 0 6px 6px;
	background: #0C1728;
}

.sai-floor {
	position: absolute;
	left: 8%;
	right: 8%;
	bottom: -16px;
	height: 26px;
	border-radius: 50%;
	background: radial-gradient(ellipse at center, rgba(0, 0, 0, .5), transparent 70%);
	z-index: 1;
}

/* ---------- KDS board ---------- */

.sai-kds {
	background: #101D2F;
	border: 1px solid rgba(255, 255, 255, .10);
	border-radius: 16px;
	overflow: hidden;
}

.sai-kds-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 16px;
	background: #0B1726;
	border-bottom: 1px solid rgba(255, 255, 255, .10);
	font-family: 'Barlow Condensed', sans-serif;
	text-transform: uppercase;
	letter-spacing: .1em;
	font-size: .78rem;
	color: #8D9AAE;
}

.sai-kds-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	padding: 14px;
}

.sai-tkt {
	background: var(--wp--preset--color--secondary);
	border-radius: 10px;
	padding: 12px;
	border-top: 3px solid var(--wp--preset--color--primary);
}

.sai-tkt.late {
	border-top-color: var(--wp--preset--color--accent);
}

.sai-tkt-h {
	display: flex;
	justify-content: space-between;
	font-family: 'Barlow Condensed', sans-serif;
	font-size: .88rem;
	color: #fff;
	margin-bottom: 8px;
	letter-spacing: .04em;
}

.sai-tkt-h i {
	font-style: normal;
	color: #8D9AAE;
}

.sai-tkt.late .sai-tkt-h i {
	color: #FF8A44;
}

.sai-tkt ul {
	list-style: none;
	font-size: .84rem;
	color: #AFBACA;
	padding-left: 0;
}

.sai-tkt li {
	padding: 3px 0;
	border-bottom: 1px dashed rgba(255, 255, 255, .07);
}

.sai-tkt li:last-child {
	border: 0;
}

.sai-tkt li em {
	font-style: normal;
	color: var(--wp--preset--color--primary);
	display: block;
	font-size: .78rem;
	padding-left: 8px;
}

/* ---------- offline flow diagram ---------- */

.sai-flow {
	background: var(--wp--preset--color--light);
	border: 1px solid #E8EDF4;
	border-radius: 16px;
	padding: 26px;
}

.sai-flow-step {
	display: grid;
	grid-template-columns: 38px 1fr;
	gap: 16px;
	position: relative;
	padding-bottom: 26px;
}

.sai-flow-step:last-child {
	padding-bottom: 0;
}

.sai-flow-step::before {
	content: "";
	position: absolute;
	left: 18px;
	top: 38px;
	bottom: 4px;
	width: 2px;
	background: #E8EDF4;
}

.sai-flow-step:last-child::before {
	display: none;
}

.sai-flow-n {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-family: 'Barlow Condensed', sans-serif;
	font-weight: 700;
	background: var(--wp--preset--color--white);
	border: 2px solid var(--wp--preset--color--primary);
	color: #047857;
	z-index: 1;
}

.sai-flow-step.off .sai-flow-n {
	border-color: var(--wp--preset--color--accent);
	color: #C24700;
}

.sai-flow h4 {
	font-size: 1.12rem;
	margin-bottom: 3px;
}

.sai-flow p {
	font-size: .96rem;
	color: #6B7280;
	margin: 0;
}

.sai-flow-tag {
	font-family: 'Barlow Condensed', sans-serif;
	text-transform: uppercase;
	letter-spacing: .12em;
	font-size: .72rem;
	color: #9CA3AF;
	display: block;
	margin-bottom: 2px;
}

/* ---------- tier table ---------- */

.sai-tblwrap {
	overflow-x: auto; /* page body never scrolls horizontally */
}

.sai-tiers {
	width: 100%;
	border-collapse: collapse;
	margin-top: 34px;
	font-size: .98rem;
}

.sai-tiers th,
.sai-tiers td {
	padding: 13px 16px;
	text-align: left;
	border-bottom: 1px solid #E8EDF4;
}

.sai-tiers thead th {
	font-family: 'Barlow Condensed', sans-serif;
	text-transform: uppercase;
	letter-spacing: .11em;
	font-size: .78rem;
	color: #9CA3AF;
	border-bottom: 2px solid #E8EDF4;
}

.sai-tiers td.c,
.sai-tiers th.c {
	text-align: center;
	width: 120px;
}

.sai-tiers tbody tr:hover {
	background: #F8FAFC;
}

.sai-tiers .yes {
	color: #047857;
	font-weight: 600;
}

.sai-tiers .no {
	color: #9CA3AF;
}

.sai-tiers .grp td {
	background: var(--wp--preset--color--light);
	font-family: 'Barlow Condensed', sans-serif;
	text-transform: uppercase;
	letter-spacing: .11em;
	font-size: .76rem;
	color: #6B7280;
	padding-top: 9px;
	padding-bottom: 9px;
}

.sai-tbl-note {
	margin-top: 20px;
	padding: 18px 22px;
	background: #D1FAE5;
	border-radius: 16px;
	border-left: 4px solid var(--wp--preset--color--primary);
	font-size: 1.02rem;
}

/* ---------- dense detail list ---------- */

.sai-detail {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0 48px;
	margin-top: 30px;
}

.sai-detail > div {
	display: grid;
	grid-template-columns: 170px 1fr;
	gap: 16px;
	padding: 15px 0;
	border-top: 1px solid #E8EDF4;
	font-size: .99rem;
}

.sai-detail b {
	font-family: 'Barlow Condensed', sans-serif;
	font-size: 1.1rem;
	font-weight: 600;
}

.sai-detail span {
	color: #6B7280;
}

/* ---------- system list (dark band) ---------- */

.sai-sysl {
	list-style: none;
	padding-left: 0;
}

.sai-sysl li {
	display: grid;
	grid-template-columns: 130px 1fr;
	gap: 18px;
	padding: 15px 0;
	border-top: 1px solid rgba(255, 255, 255, .10);
	font-size: 1rem;
}

.sai-sysl li:last-child {
	border-bottom: 1px solid rgba(255, 255, 255, .10);
}

.sai-sysl b {
	font-family: 'Barlow Condensed', sans-serif;
	font-size: 1.12rem;
	font-weight: 600;
	color: #fff;
	letter-spacing: .01em;
}

.sai-sysl span {
	color: #AFBACA;
}

/* ---------- photo band ---------- */

.sai-photos {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: 14px;
	margin-top: 32px;
}

.sai-ph {
	position: relative;
	border-radius: 12px;
	overflow: hidden;
	background: #E3E8EF;
	border: 1px dashed rgba(255, 92, 0, .55);
	min-height: 230px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 18px;
}

.sai-ph:first-child {
	min-height: 300px;
}

.sai-ph span {
	font-family: 'Barlow Condensed', sans-serif;
	text-transform: uppercase;
	letter-spacing: .1em;
	font-size: .82rem;
	color: #7A879A;
	line-height: 1.5;
}

/* ---------- theme.json bridge (2026-09-15) ----------
   Kadence is a classic theme and does not output theme.json's palette as CSS
   custom properties on the front end. WordPress still generates
   `.has-dark-background-color { background-color: var(--wp--preset--color--dark)
   !important }` — so the class resolved to an undefined variable, painted
   nothing, and its !important beat every rule we wrote.

   Declaring the variables here makes the preset classes work as designed, which
   is better than overriding them with literals: the palette stays token-driven,
   and a rebrand is still theme.json plus this block.
   Values must match build/theme.json. */
:root {
	--wp--preset--color--primary: #059669;
	--wp--preset--color--secondary: #13233A;
	--wp--preset--color--accent: #FF5C00;
	--wp--preset--color--dark: #0D1929;
	--wp--preset--color--light: #F2F4F8;
	--wp--preset--color--white: #FFFFFF;
}

/* ---------- WordPress section shells (2026-09-15) ----------
   Kadence is a classic theme and does not emit WordPress's
   .has-dark-background-color preset classes, so every section rendered
   transparent and the page collapsed into one flat white column.
   These rules paint the sections directly instead of depending on preset
   classes being generated. Colours are literals here on purpose: they are the
   same six values as theme.json, and a section that silently loses its
   background is worse than a rebrand that needs two files changed. */

.sai-hero,
.sai-dark,
.sai-canvas {
	padding-block: clamp(3.5rem, 7vw, 6rem);
	padding-inline: 24px;
}

/* Inner content sits on the same measure as the static preview, whatever
   width Kadence gives the section. */
.sai-hero > *,
.sai-dark > *,
.sai-canvas > * {
	max-width: 1160px;
	margin-left: auto;
	margin-right: auto;
}

/* !important matches the specificity of WordPress's own preset background
   classes, which also carry it. Without this the two fight and the winner
   depends on stylesheet order. */
.sai-dark {
	background: var(--wp--preset--color--dark) !important;
	color: #E4E9F0;
}

.sai-dark h1,
.sai-dark h2,
.sai-dark h3,
.sai-dark h4 {
	color: #fff;
}

.sai-dark p {
	color: #C2CBD8;
}

.sai-dark a {
	color: #34D399;
}

/* The three-fact strip is a thin band, not a full section. */
/* A shade darker than .sai-dark so the strip separates from the section above
   it. Overrides the preset class, hence !important. */
.sai-facts {
	background: #0A1420 !important;
	padding-block: 28px;
	border-top: 1px solid rgba(255, 255, 255, .10);
}

.sai-facts h3 {
	margin-bottom: 2px;
}

.sai-facts p {
	color: #8D9AAE;
}

.sai-canvas {
	background: var(--wp--preset--color--light) !important;
}

.sai-ctaband {
	text-align: center;
}

.sai-ctaband .wp-block-buttons {
	justify-content: center;
}

/* Kadence adds its own padding to any group it thinks has a background.
   Ours is set above; this stops the two stacking into a double gap. */
.sai-dark.has-background,
.sai-canvas.has-background {
	padding-inline: 24px;
}

/* Aside cards on the contact page. .sai-canvas gives them their tint; these
   rules stop them inheriting full section padding and stack them with a gap. */
.sai-aside {
	padding: 26px !important;
	border: 1px solid #E8EDF4;
	border-radius: 16px;
	margin-bottom: 18px;
}

.sai-aside > * {
	max-width: none;
}

.sai-aside .sai-terms {
	margin-top: 8px;
}

/* ---------- core-block variants (2026-09-15) ----------
   The page content is built from core blocks so it stays editable in
   WordPress. These rules style what those blocks output, rather than the
   hand-written markup the static preview used. See build/import/01-home.xml
   for the rule about what is a block and what stays Custom HTML. */

/* Term lists — core/list with a <strong> lead. Replaces the <dl> markup from
   the preview: a person can edit these words in the block editor, which they
   could not do inside a Custom HTML block. */
.sai-terms {
	list-style: none;
	padding-left: 0;
	margin: 24px 0 0;
}

.sai-terms li {
	padding: 15px 0;
	border-top: 1px solid #E8EDF4;
	font-size: .99rem;
	color: #55606F;
}

.sai-terms li:last-child {
	border-bottom: 1px solid #E8EDF4;
}

.sai-terms li strong {
	display: block;
	font-family: 'Barlow Condensed', sans-serif;
	font-size: 1.12rem;
	font-weight: 600;
	color: #0A0E1A;
	letter-spacing: .01em;
	margin-bottom: 2px;
}

.sai-dark .sai-terms li {
	border-top-color: rgba(255, 255, 255, .10);
	color: #AFBACA;
}

.sai-dark .sai-terms li:last-child {
	border-bottom-color: rgba(255, 255, 255, .10);
}

.sai-dark .sai-terms li strong {
	color: #fff;
}

/* Tier table — core/table wraps the table in a <figure>, so the class lands on
   the figure and the rules below reach the table inside it.
   Known limit: the core block emits <th> for the header row but <td> for the
   first column, where the preview used <th scope="row">. Accepted trade —
   this table's values change often and editability matters more. */
.sai-tiers {
	margin: 34px 0 0;
}

.sai-tiers table {
	width: 100%;
	border-collapse: collapse;
	font-size: .98rem;
}

.sai-tiers th,
.sai-tiers td {
	padding: 13px 16px;
	text-align: left;
	border-bottom: 1px solid #E8EDF4;
	border-left: 0;
	border-right: 0;
}

.sai-tiers thead th {
	font-family: 'Barlow Condensed', sans-serif;
	text-transform: uppercase;
	letter-spacing: .11em;
	font-size: .78rem;
	color: #55606F;
	border-bottom: 2px solid #E8EDF4;
}

.sai-tiers td.c,
.sai-tiers th.c {
	text-align: center;
	width: 120px;
}

.sai-tiers tbody tr:hover {
	background: #F8FAFC;
}

.sai-tiers .yes {
	color: #047857;
	font-weight: 600;
}

.sai-tiers .no {
	color: #55606F;
}

.sai-tiers figcaption {
	font-family: 'Barlow Condensed', sans-serif;
	text-transform: uppercase;
	letter-spacing: .11em;
	font-size: .78rem;
	color: #55606F;
	text-align: left;
	margin-top: 10px;
}

/* Flow panel — now a core/group of tag + heading + paragraph rather than the
   preview's numbered steps. The numbers were dropped on purpose: the connector
   line implied a sequence in places where there wasn't one. */
.sai-flow > * + .sai-flow-tag {
	margin-top: 26px;
}

.sai-flow h3 {
	font-size: 1.12rem;
	margin: 0 0 3px;
}

.sai-flow p {
	font-size: .96rem;
	color: #55606F;
	margin: 0;
}

.sai-dark .sai-flow p {
	color: #C2CBD8;
}

/* FAQ — core/details block */
.sai-faq {
	border-bottom: 1px solid #E8EDF4;
	padding: 0;
}

.sai-faq summary {
	cursor: pointer;
	padding: 20px 0;
	font-family: 'Barlow Condensed', sans-serif;
	font-size: 1.26rem;
	font-weight: 600;
}

.sai-faq p {
	padding-bottom: 22px;
	color: #4A5364;
}

/* ---------- placeholder marker ---------- */

.sai-todo {
	outline: 1px dashed rgba(255, 92, 0, .65);
	outline-offset: 3px;
	border-radius: 4px;
	display: inline-block;
}

/* ---------- animation ---------- */

@keyframes sai-ticket {
	0% { transform: translateY(-130%); opacity: 0; }
	6% { transform: translateY(0); opacity: 1; }
	46% { transform: translateY(0); opacity: 1; }
	54% { opacity: 0; }
	100% { opacity: 0; }
}

@keyframes sai-shift {
	0%, 5% { transform: translateY(0); }
	10%, 48% { transform: translateY(52px); }
	56%, 100% { transform: translateY(0); }
}

@keyframes sai-roll {
	0%, 32% { transform: translateY(0); }
	33%, 65% { transform: translateY(-1.32em); }
	66%, 100% { transform: translateY(-2.64em); }
}

@keyframes sai-grow {
	from { height: 2px; }
}

@keyframes sai-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: .45; }
}

@keyframes sai-rise {
	from { opacity: 0; transform: translateY(18px); }
	to { opacity: 1; transform: none; }
}

.sai-reveal {
	animation: sai-rise .6s cubic-bezier(.2, .7, .3, 1) both;
}

@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
	}
}

/* ---------- mobile ---------- */

@media (max-width: 1000px) {

	.sai-stage::before {
		left: -24px;
		right: -24px;
		border-radius: 20px;
	}

	.sai-kds-grid {
		grid-template-columns: 1fr;
	}

	.sai-tkt:nth-child(n+3) {
		display: none;
	}

	.sai-detail,
	.sai-photos {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {

	.sai-term {
		display: none;
	}

	.sai-rig {
		gap: 0;
	}

	.sai-sysl li,
	.sai-detail > div {
		grid-template-columns: 1fr;
		gap: 2px;
	}

	.sai-ph,
	.sai-ph:first-child {
		min-height: 200px;
	}
}