/* Altminds home. Tokens from the "Altminds Grove" design (Alt POS brochure palette). */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/poppins-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/poppins-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/poppins-600.woff2") format("woff2"); }

:root {
	--bg: #faf7ef;
	--bg-2: #f5efde;
	--surface: #fffcf5;
	--ink: #1f2a20;
	--muted: #5a6656;
	--line: #e3dac3;
	--green: #4d694e;
	--green-deep: #3e573f;
	--accent: #d0925a;
	--accent-deep: #8e5a2b;
	--on-green: #faf7ef;
	--on-green-muted: #d6dfcc;
	--green-line: rgba(250, 247, 239, .2);
	--font: "Poppins", sans-serif;
	--r-sm: 6px;
	--r-md: 14px;
	--r-pill: 999px;
	--wrap: 1200px;
	--gutter: clamp(16px, 4vw, 32px);
	--sec: clamp(64px, 9vw, 112px);
	--shadow: 0 24px 60px -24px rgba(46, 60, 40, .3), 0 2px 6px rgba(46, 60, 40, .07);
}

:where(body.am *, body.am *::before, body.am *::after) { box-sizing: border-box; }
:where(body.am h1, body.am h2, body.am h3, body.am p, body.am ul, body.am dl, body.am dd, body.am figure) { margin: 0; padding: 0; }
:where(body.am ul) { list-style: none; }
:where(body.am img) { display: block; max-width: 100%; height: auto; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body.am {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font);
	font-size: 16px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
body.am a { color: inherit; }
body.am :focus-visible { outline: 3px solid var(--accent-deep); outline-offset: 3px; border-radius: 4px; }

.am-wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

body.am h1, body.am h2, body.am h3 { font-family: var(--font); font-weight: 600; color: inherit; letter-spacing: -0.02em; }
body.am h2 { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.12; }
body.am h3 { font-size: 19px; line-height: 1.3; letter-spacing: -0.01em; }

/* Buttons */
.am-btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 48px; padding: 0 26px;
	border-radius: var(--r-pill);
	font: 500 15px/1 var(--font);
	text-decoration: none; white-space: nowrap;
	transition: transform .15s ease, background-color .15s ease, border-color .15s ease;
}
.am-btn:active { transform: translateY(1px); }
body.am .am-btn--primary { background: var(--green); color: var(--on-green); }
body.am .am-btn--primary:hover { background: var(--green-deep); }
body.am .am-btn--ghost { border: 1.5px solid var(--green); color: var(--green); }
body.am .am-btn--ghost:hover { background: var(--green); color: var(--on-green); }

/* Header: sticky, slides away on scroll down and back on scroll up (see home.js). */
.am-head { position: sticky; top: 0; z-index: 50; background: rgba(250, 247, 239, .9); backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: transform .35s cubic-bezier(.2, .7, .2, 1), border-color .2s ease; }
.am-head.is-scrolled { border-bottom-color: var(--line); }
.am-head.is-hidden { transform: translateY(calc(-100% - 40px)); }
.admin-bar .am-head { top: 32px; }
@media (max-width: 782px) { .admin-bar .am-head { top: 0; } }
.am-head__row { display: flex; align-items: center; gap: 32px; height: 72px; }
/* The logo PNG is one flat colour, so use it as a mask and paint it in the brand green. */
.am-logo__mark { display: block; width: 150px; height: 35px; background: var(--green); -webkit-mask: url("img/logo.png") no-repeat left center / contain; mask: url("img/logo.png") no-repeat left center / contain; }
.am-foot .am-logo__mark { width: 130px; height: 31px; background: var(--on-green); }
.am-nav { display: flex; gap: 28px; margin-left: auto; }
body.am .am-nav a { font-size: 15px; font-weight: 500; text-decoration: none; color: var(--ink); }
body.am .am-nav a:hover { color: var(--green); }
.am-head__cta { min-height: 42px; padding: 0 20px; font-size: 14px; }
.am-menu { display: none; margin-left: auto; position: relative; }
.am-menu summary { list-style: none; cursor: pointer; width: 44px; height: 44px; display: grid; place-content: center; gap: 5px; }
.am-menu summary::-webkit-details-marker { display: none; }
.am-menu summary span { display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; }
.am-menu__panel { position: absolute; right: 0; top: 52px; width: min(280px, 86vw); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px; display: grid; gap: 4px; box-shadow: var(--shadow); }
body.am .am-menu__panel a:not(.am-btn) { padding: 10px 12px; text-decoration: none; font-weight: 500; border-radius: var(--r-sm); }
body.am .am-menu__panel a:not(.am-btn):hover { background: var(--bg); }
.am-menu__panel .am-btn { margin-top: 8px; }

/* Hero: centred message with a gradient headline, then the drifting gallery. */
.am-hero { padding: clamp(56px, 8vw, 104px) 0 0; overflow-x: clip; }
.am-hero__inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
body.am .am-hero__title {
	font-size: clamp(38px, 5.2vw, 72px); line-height: 1.08; letter-spacing: -0.035em; font-weight: 600; max-width: 17ch; padding-bottom: .08em;
	background: linear-gradient(95deg, var(--green-deep) 10%, var(--green) 45%, #a8703a 95%);
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
.am-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0; margin-bottom: -.34em; }
.am-w > span { display: inline-block; padding-bottom: .34em; transform: translateY(114%); opacity: 0; transition: transform .9s cubic-bezier(.2, .75, .2, 1), opacity .9s ease; }
/* Each word is its own clip box, so repaint the headline gradient across the full title width. */
body.am .am-hero__title .am-w > span { background: linear-gradient(95deg, var(--green-deep) 10%, var(--green) 45%, #a8703a 95%); background-size: var(--am-title-w, 1000px) 100%; background-position: var(--am-x, 0) 0; -webkit-background-clip: text; background-clip: text; color: transparent; }
body.am .am-hero__title.is-split { background: none; }
.am-hero__title.is-in .am-w > span { transform: none; opacity: 1; }
.am-lead { margin-top: 24px; font-size: clamp(16px, 1.35vw, 19px); color: var(--muted); max-width: 52ch; }
.am-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
.am-stats { display: flex; justify-content: center; gap: clamp(28px, 6vw, 88px); margin-top: clamp(40px, 5vw, 56px); }
.am-stats li { display: grid; justify-items: center; gap: 4px; }
.am-stats strong { font-size: clamp(30px, 3.2vw, 44px); line-height: 1; font-weight: 600; color: var(--green); font-variant-numeric: tabular-nums; }
.am-stats span { font-size: 13px; color: var(--muted); max-width: 16ch; }

.am-gallery { margin-top: clamp(48px, 6vw, 80px); display: grid; gap: 16px; padding-bottom: clamp(56px, 7vw, 96px); }
.am-gallery__row { display: flex; gap: 16px; width: max-content; will-change: transform; }
.am-gallery__row img { height: clamp(170px, 22vw, 300px); width: auto; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); box-shadow: 0 2px 5px rgba(46, 60, 40, .08); object-fit: cover; }
.am-gallery__row:nth-child(2) { margin-left: -12vw; }

.am-frame { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow); }
.am-frame__bar { display: flex; gap: 6px; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.am-frame__bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }

/* Marquee: app names in their icon colours, industries and integrations in the second row. */
.am-marquee { background: var(--bg-2); border-block: 1px solid var(--line); padding-block: 28px; display: grid; gap: 18px; overflow: hidden; }
.am-marquee__row { display: flex; width: max-content; }
.am-marquee__track { display: flex; align-items: center; gap: 16px; padding-right: 16px; animation: am-slide 42s linear infinite; }
.am-marquee__row--rev .am-marquee__track { animation-duration: 35s; animation-direction: reverse; gap: 44px; padding-right: 44px; }
.am-marquee:hover .am-marquee__track { animation-play-state: paused; }
@keyframes am-slide { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.am-pill { padding: 10px 22px; border-radius: var(--r-pill); font-weight: 600; font-size: 17px; white-space: nowrap; }
.am-pill--erp { background: #ffffff; color: #2e4a36; box-shadow: inset 0 0 0 2px #456c4f; }
.am-pill--pos { background: #325b3e; color: #ffffff; }
.am-pill--pay { background: #5c60ac; color: #ffffff; }
.am-pill--school { background: #fae065; color: #1c1b17; }
.am-pill--payrollers { background: #59519d; color: #ffffff; }
.am-pill--ctrl { background: #cd90ab; color: #2b1520; }
.am-word { font-size: clamp(20px, 2.2vw, 28px); font-weight: 600; letter-spacing: -0.02em; color: var(--green-deep); white-space: nowrap; }
.am-word::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 44px; border-radius: 50%; background: var(--accent); vertical-align: middle; }

/* Statement card with highlighted words. */
.am-statement { padding-top: var(--sec); }
.am-statement__card {
	background: var(--green); color: var(--on-green); border-radius: 36px; text-align: center;
	padding: clamp(48px, 8vw, 112px) clamp(24px, 8vw, 120px);
	font-size: clamp(26px, 3.6vw, 48px); line-height: 1.35; font-weight: 500; letter-spacing: -0.02em;
}
.am-statement__card mark { background: linear-gradient(95deg, #f5efde, #f1d9bd); color: var(--green-deep); padding: 0 .28em .04em; border-radius: .28em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* Section heads */
.am-sechead { max-width: 640px; margin-bottom: clamp(36px, 4vw, 56px); }
.am-sechead p { margin-top: 16px; color: var(--muted); font-size: 17px; }

/* Products: full-width app cards that stack on top of each other while scrolling. */
.am-products { padding-block: var(--sec); }
.am-stack { display: grid; gap: 24px; }

/* Each product wears the colours of its own app icon (Alt ERP, Alt Pay, Alt Schools, Alt POS). */
.am-app--erp { --app: #456c4f; --app-deep: #2e4a36; --app-bg: #ffffff; --app-ink: #1f2a20; --app-muted: #5a6656; --app-chip-bg: #e6eee7; --app-chip-ink: #2e4a36; }
.am-app--pay { --app: #5c60ac; --app-deep: #44478a; --app-bg: #5c60ac; --app-ink: #ffffff; --app-muted: #e3e4f4; --app-chip-bg: #ffffff; --app-chip-ink: #44478a; }
.am-app--school { --app: #fae065; --app-deep: #1c1b17; --app-bg: #fae065; --app-ink: #1c1b17; --app-muted: #3f3a24; --app-chip-bg: #1c1b17; --app-chip-ink: #fae065; }
.am-app--pos { --app: #325b3e; --app-deep: #17341f; --app-bg: #325b3e; --app-ink: #ffffff; --app-muted: #d7e4d9; --app-chip-bg: #ffffff; --app-chip-ink: #17341f; }

.am-stack__card {
	display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 56px); align-items: center;
	min-height: min(620px, 78vh); padding: clamp(28px, 4vw, 56px); overflow: hidden;
	border-radius: 48px; background: var(--app-bg); color: var(--app-ink);
	box-shadow: 0 -12px 40px -24px rgba(46, 60, 40, .35);
}
.am-stack__card.am-app--erp { border: 2px solid var(--app); }
body.am .am-stack__card h3 { font-size: clamp(26px, 2.8vw, 38px); line-height: 1.15; letter-spacing: -0.025em; color: inherit; }
body.am .am-stack__card.am-app--erp h3 { color: var(--app-deep); }
.am-ticks { margin-top: 24px; display: grid; gap: 12px; }
.am-ticks li { position: relative; padding-left: 30px; color: var(--app-muted); font-size: 16px; }
.am-ticks li::before { content: ""; position: absolute; left: 0; top: .45em; width: 16px; height: 9px; border-left: 2.5px solid var(--app-ink); border-bottom: 2.5px solid var(--app-ink); transform: rotate(-45deg); opacity: .8; }
.am-app--erp .am-ticks li::before { border-color: var(--app); }
.am-stack__media { position: relative; }
.am-stack__media .am-frame { border-color: color-mix(in srgb, var(--app-deep) 25%, transparent); }
.am-stack__media--phone { display: flex; justify-content: center; }
.am-phone { width: min(250px, 62%); border-radius: 30px; border: 8px solid var(--app-deep); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .45); }
[data-am-float] { will-change: transform; }

.am-chip { display: inline-block; margin-bottom: 16px; padding: 6px 14px; border-radius: var(--r-pill); background: var(--app-chip-bg); color: var(--app-chip-ink); font-size: 12px; font-weight: 600; line-height: 1.2; letter-spacing: .02em; }

@media (min-width: 1001px) {
	.am-stack { gap: 0; }
	.am-stack__card { position: sticky; margin-bottom: 38vh; }
	.am-stack__card:nth-child(1) { top: 96px; }
	.am-stack__card:nth-child(2) { top: 120px; }
	.am-stack__card:nth-child(3) { top: 144px; }
	.am-stack__card:nth-child(4) { top: 168px; margin-bottom: 0; }
	.admin-bar .am-stack__card:nth-child(1) { top: 128px; }
	.admin-bar .am-stack__card:nth-child(2) { top: 152px; }
	.admin-bar .am-stack__card:nth-child(3) { top: 176px; }
	.admin-bar .am-stack__card:nth-child(4) { top: 200px; }
}

/* Reveal on scroll. Hidden only once JS has confirmed it can reveal them again. */
.am-motion .rv { opacity: 0; transform: translateY(36px); transition: opacity .9s ease, transform .9s cubic-bezier(.2, .75, .2, 1); }
.am-motion .rv.is-in { opacity: 1; transform: none; }
.am-motion .am-why__list .rv:nth-child(2n) { transition-delay: .12s; }
.am-motion .am-ind__list .rv:nth-child(2) { transition-delay: .06s; }
.am-motion .am-ind__list .rv:nth-child(3) { transition-delay: .12s; }
.am-motion .am-ind__list .rv:nth-child(4) { transition-delay: .18s; }
.am-motion .am-ind__list .rv:nth-child(5) { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
	.am-marquee__track { animation: none; }
	.am-marquee__row { width: auto; flex-wrap: wrap; justify-content: center; }
	.am-marquee__track[aria-hidden="true"] { display: none; }
	.am-marquee__track { flex-wrap: wrap; justify-content: center; row-gap: 12px; }
	.am-gallery__row { width: auto; overflow: hidden; }
	.am-head { transition: none; }
}

/* Why band */
.am-why { background: var(--green); color: var(--on-green); padding-block: var(--sec); }
body.am .am-why .am-btn--primary { background: var(--on-green); color: var(--green-deep); }
body.am .am-why .am-btn--primary:hover { background: var(--bg-2); }
.am-why__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 88px); align-items: start; }
.am-why__intro { position: sticky; top: 120px; }
.am-why__intro p { margin: 16px 0 32px; color: var(--on-green-muted); font-size: 17px; }
.am-why__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
.am-why__list div { padding: 26px 0; border-top: 1px dashed var(--green-line); }
.am-why__list dt { font-weight: 600; font-size: 17px; }
.am-why__list dt::before { content: ""; display: block; width: 28px; height: 3px; background: var(--accent); border-radius: 2px; margin-bottom: 16px; }
.am-why__list dd { margin-top: 8px; color: var(--on-green-muted); font-size: 15px; }

/* Industries */
.am-ind { padding-block: var(--sec); background: var(--bg-2); }
.am-ind__list { border-top: 1px solid var(--line); }
.am-ind__list li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px 40px; padding: 28px 0; border-bottom: 1px solid var(--line); }
body.am .am-ind__list h3 { font-size: clamp(20px, 2vw, 26px); color: var(--green-deep); }
/* Industry rows carry the colour of the app that serves them. */
.am-ind--erp { --app: #456c4f; --app-text: #2e4a36; --app-tint: rgba(69, 108, 79, .12); }
.am-ind--pos { --app: #325b3e; --app-text: #325b3e; --app-tint: rgba(50, 91, 62, .12); }
.am-ind--pay { --app: #5c60ac; --app-text: #44478a; --app-tint: rgba(92, 96, 172, .12); }
.am-ind--school { --app: #fae065; --app-text: #1c1b17; --app-tint: rgba(250, 224, 101, .4); }
.am-ind__list li[class*="am-ind--"] { border-left: 6px solid var(--app); padding-left: 24px; background: linear-gradient(90deg, var(--app-tint), transparent 55%); }
body.am .am-ind__list li[class*="am-ind--"] h3 { color: var(--app-text); }
.am-ind__list p { color: var(--muted); max-width: 60ch; }

/* About */
.am-about { padding-block: var(--sec); }
.am-about__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 88px); align-items: end; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: clamp(28px, 5vw, 64px); }
.am-big { font-size: clamp(88px, 13vw, 176px); font-weight: 600; line-height: .9; letter-spacing: -0.05em; color: var(--green); }
.am-big__cap { margin-top: 18px; color: var(--muted); max-width: 30ch; }
body.am .am-about h2 { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.25; }
.am-about__copy p { margin-top: 18px; color: var(--muted); max-width: 60ch; }

/* Contact */
.am-contact { background: var(--bg-2); padding-block: var(--sec); border-top: 1px solid var(--line); }
.am-contact__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 88px); align-items: start; }
body.am .am-contact h2 { color: var(--green-deep); }
.am-contact__copy p { margin: 18px 0 32px; font-size: 17px; max-width: 46ch; color: var(--muted); }
/* Offices sit on a docket-style card, echoing the Alt POS brochure. */
.am-offices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; background: var(--surface); border: 2px dashed #b9ae92; border-radius: var(--r-sm); padding: 28px; }
.am-office h3 { font-size: 17px; margin-bottom: 8px; color: var(--accent-deep); }
.am-office p { font-size: 15px; color: var(--ink); }
.am-office p + p { margin-top: 10px; }
body.am .am-offices a { text-decoration: none; }
body.am .am-offices a:hover { text-decoration: underline; }
.am-mail { grid-column: 1 / -1; padding-top: 20px; border-top: 1px dashed var(--line); font-size: 20px; font-weight: 600; color: var(--green); }

/* Footer */
.am-foot { background: var(--green-deep); color: var(--on-green-muted); padding-top: 64px; font-size: 15px; }
.am-foot__grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
.am-foot__grid > div p { margin-top: 16px; max-width: 32ch; }
.am-foot ul { display: grid; gap: 10px; }
body.am .am-foot a { text-decoration: none; }
body.am .am-foot a:hover { color: var(--on-green); }
.am-foot__base { margin-top: 48px; padding-block: 24px; border-top: 1px dashed var(--green-line); font-size: 13px; }

/* Responsive */
@media (max-width: 1000px) {
	.am-nav, .am-head__cta { display: none; }
	.am-menu { display: block; }
	.am-stack__card { grid-template-columns: 1fr; min-height: 0; border-radius: 32px; }
	.am-why__grid, .am-contact__grid, .am-about__grid { grid-template-columns: 1fr; }
	.am-why__intro { position: static; }
}
@media (max-width: 640px) {
	.am-stack__card { border-radius: 24px; padding: 24px; }
	.am-stats { gap: 20px; }
	.am-statement__card { border-radius: 24px; }
	.am-why__list, .am-offices { grid-template-columns: 1fr; }
	.am-ind__list li { grid-template-columns: 1fr; gap: 8px; }
	.am-foot__grid { grid-template-columns: 1fr; }
	.am-hero__actions .am-btn { flex: 1 1 100%; }
}

/* Fewer-images pass: text-only cards and a 5th sticky step. */
.am-stack__card--solo{grid-template-columns:1fr;}
.am-stack__card--solo .am-stack__text{max-width:64ch;align-self:center;}
@media (min-width:1001px){
.am-stack__card:nth-child(4){top:168px;margin-bottom:38vh;}
.am-stack__card:nth-child(5){top:192px;margin-bottom:0;}
.admin-bar .am-stack__card:nth-child(5){top:224px;}
}

/* Contact: give the office docket more room. */
.am-offices{padding:clamp(28px,3vw,40px);gap:32px;}
.am-office p{font-size:16px;line-height:1.55;}
.am-office h3{font-size:18px;}
.am-mail{font-size:21px;}
@media (min-width:1001px){.am-contact__grid{grid-template-columns:minmax(0,4fr) minmax(0,7fr);}}

/* Footer: App Store and Google Play badges. */
.am-foot__apps{margin-top:26px;}
.am-foot__apps-label{display:block;font-size:12px;letter-spacing:.09em;text-transform:uppercase;margin-bottom:12px;}
.am-store{display:flex;flex-wrap:wrap;gap:12px;}
body.am .am-store__btn{display:inline-flex;align-items:center;gap:10px;padding:10px 18px;border:1px solid var(--green-line);border-radius:999px;color:var(--on-green);line-height:1.15;transition:background .25s ease,border-color .25s ease;}
body.am .am-store__btn:hover{background:rgba(255,255,255,.09);border-color:var(--on-green);}
.am-store__ico{width:22px;height:22px;flex:none;}
.am-store__btn>span{display:grid;font-size:15px;font-weight:600;white-space:nowrap;}
.am-store__btn small{font-size:11px;font-weight:400;letter-spacing:.04em;color:var(--on-green-muted);white-space:nowrap;}
@media (prefers-reduced-motion:reduce){body.am .am-store__btn{transition:none;}}

/* Footer link columns with headings. */
.am-foot__col h3{font-size:15px;font-weight:600;color:var(--on-green);margin-bottom:16px;}

/* Keep the phone card the same height as the rest of the stack (phone cap). */
@media (min-width:1001px){.am-stack__media--phone .am-phone{max-height:426px;width:auto;}}

/* Legal pages (terms, privacy) rendered into the preview. */
.am-legal{background:var(--bg);padding-block:var(--sec);}
.am-legal__head{max-width:70ch;margin-bottom:clamp(32px,4vw,56px);}
body.am .am-legal__head h1{font-size:clamp(34px,5vw,58px);line-height:1.08;letter-spacing:-0.03em;color:var(--green-deep);}
.am-legal__head p{margin-top:14px;color:var(--muted);font-size:17px;}
.am-legal__body{max-width:78ch;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:clamp(24px,4vw,56px);box-shadow:var(--shadow);}
body.am .am-legal__body h2{font-size:clamp(23px,2.6vw,31px);line-height:1.2;letter-spacing:-0.02em;color:var(--green-deep);margin:44px 0 14px;padding-top:26px;border-top:1px dashed var(--line);}
body.am .am-legal__body h2:first-child{margin-top:0;padding-top:0;border-top:0;}
body.am .am-legal__body h3{font-size:21px;line-height:1.25;color:var(--green);margin:32px 0 12px;}
body.am .am-legal__body h4,body.am .am-legal__body h5,body.am .am-legal__body h6{font-size:17px;font-weight:600;color:var(--accent-deep);margin:26px 0 10px;}
.am-legal__body p{margin:0 0 16px;font-size:16px;line-height:1.7;color:var(--ink);}
.am-legal__body ul,.am-legal__body ol{margin:0 0 20px;padding-left:0;list-style:none;display:grid;gap:9px;}
.am-legal__body li{position:relative;padding-left:24px;font-size:16px;line-height:1.65;color:var(--ink);}
.am-legal__body ul li::before{content:"";position:absolute;left:4px;top:.66em;width:7px;height:7px;border-radius:50%;background:var(--accent);}
.am-legal__body ol{counter-reset:am-ol;}
.am-legal__body ol li{counter-increment:am-ol;}
.am-legal__body ol li::before{content:counter(am-ol) ".";position:absolute;left:0;color:var(--accent-deep);font-weight:600;}
body.am .am-legal__body a{color:var(--green);word-break:break-word;}
.am-legal__body b,.am-legal__body strong{color:var(--green-deep);}
@media (max-width:640px){.am-legal__body{border-radius:var(--r-sm);}}

@media (min-width:1001px){.am-stack__card:last-child{margin-bottom:0;}}

/* Card lead-in line and a button that wears the card's own app colour. */
.am-stack__sub{font-size:17px;font-weight:600;color:var(--app-ink);margin:0 0 14px;}
body.am .am-stack__card .am-btn--app{background:var(--app-chip-bg);color:var(--app-chip-ink);margin-top:10px;}
body.am .am-stack__card .am-btn--app:hover{opacity:.88;}
.am-stack__card--solo .am-stack__text p:last-of-type{margin-bottom:4px;}

/* Product sub-pages (Alt Schools and friends). */
.am-page__hero{background:var(--app-bg);color:var(--app-ink);padding:clamp(104px,11vw,150px) 0 clamp(56px,7vw,96px);}
body.am .am-page__hero h1{font-size:clamp(32px,5vw,58px);line-height:1.07;letter-spacing:-0.03em;color:var(--app-ink);max-width:22ch;}
.am-page__lead{font-size:clamp(17px,1.8vw,20px);font-weight:600;color:var(--app-ink);margin-top:16px;opacity:.92;}
.am-page__intro{max-width:72ch;margin-top:20px;}
.am-page__intro p{font-size:17px;line-height:1.7;color:var(--app-muted);margin-bottom:14px;}
.am-page__body{background:var(--bg);padding-block:var(--sec);}
.am-page__body .am-wrap{max-width:900px;}
.am-page__back{display:inline-flex;align-items:center;gap:8px;margin-top:28px;font-size:15px;font-weight:500;}
body.am .am-page__back{color:var(--green);text-decoration:none;}
body.am .am-page__back:hover{text-decoration:underline;}

/* Card with a tag rail across the bottom. */
.am-stack__card--tagged{grid-template-columns:minmax(0,7fr) minmax(0,5fr);row-gap:clamp(12px,1.3vw,18px);}
.am-tags{display:flex;margin-top:18px;flex-wrap:wrap;justify-content:center;gap:8px 10px;list-style:none;margin:0;padding:14px 0 0;border-top:1px solid color-mix(in srgb, var(--app-deep) 18%, transparent);}
.am-tags li{padding:7px 13px;border-radius:var(--r-pill);background:color-mix(in srgb, #fff 62%, transparent);border:1px solid color-mix(in srgb, var(--app-deep) 22%, transparent);color:var(--app-deep);font-size:13px;font-weight:600;line-height:1.2;}
.am-stack__card--tagged .am-phone{aspect-ratio:736 / 1600;}
@media (min-width:1001px){.am-stack__card--tagged .am-phone{width:min(186px,60%);}}
@media (max-width:1000px){.am-stack__card--tagged{grid-template-columns:1fr;}}

/* Keep every card, and the tag rail, inside a short viewport (tag rail fits on short screens). */
@media (min-width:1001px){
.am-stack__card{height:clamp(600px,85vh,660px);min-height:0;}
.am-stack__card--tagged{padding:clamp(24px,3vw,40px);}
.am-stack__card--tagged .am-phone{width:min(168px,58%);}
}
.am-stack__card--tagged .am-stack__text p{margin-bottom:12px;}
.am-stack__card--tagged .am-stack__sub{margin-bottom:10px;}
body.am .am-stack__card--tagged .am-btn--app{margin-top:6px;}
.am-stack__card--tagged .am-tags{margin-top:12px;gap:7px 8px;}
.am-stack__card--tagged .am-tags li{padding:6px 11px;}

/* Tighter type on the tagged card so the whole tag rail stays on screen (tagged card trims). */
body.am .am-stack__card--tagged h3{font-size:clamp(24px,2.4vw,31px);line-height:1.14;}
.am-stack__card--tagged .am-chip{margin-bottom:12px;}
.am-stack__card--tagged .am-stack__text p{font-size:15px;line-height:1.6;}
.am-stack__card--tagged .am-stack__sub{font-size:16px;}
body.am .am-stack__card--tagged .am-btn--app{min-height:44px;}
.am-stack__card--tagged .am-tags li{font-size:12.5px;}

/* Tag rail: six on the first line, five on the second. */
.am-tags li.am-tags__br{flex-basis:100%;height:0;min-height:0;margin:0;padding:0;border:0;background:none;box-shadow:none;}
@media (min-width:1001px){.am-stack__card--tagged{grid-template-columns:minmax(0,8fr) minmax(0,4fr);}}
@media (max-width:1000px){.am-tags li.am-tags__br{display:none;}}

/* Alt Schools product page. */
.as-sec{padding-block:var(--sec);}
.as-sec--alt{background:var(--bg-2);}
.as-head{max-width:64ch;margin-bottom:clamp(28px,4vw,48px);}
body.am .as-head h2{font-size:clamp(27px,3.4vw,42px);line-height:1.13;letter-spacing:-0.025em;color:var(--green-deep);}
.as-head p{margin-top:14px;font-size:17px;line-height:1.65;color:var(--muted);}
.as-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:clamp(16px,1.8vw,22px);}
.as-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:clamp(22px,2.4vw,30px);box-shadow:var(--shadow);}
.as-card__icon{display:block;font-size:26px;line-height:1;margin-bottom:12px;}
body.am .as-card h3{font-size:20px;line-height:1.25;color:var(--green-deep);margin-bottom:8px;}
.as-card p{font-size:15px;line-height:1.6;color:var(--muted);margin-bottom:14px;}
.as-list{list-style:none;margin:0;padding:0;display:grid;gap:8px;}
.as-list li{position:relative;padding-left:20px;font-size:15px;line-height:1.55;color:var(--ink);}
.as-list li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--accent);}
.as-flow{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-bottom:22px;}
.as-flow span{padding:10px 20px;border-radius:var(--r-pill);background:var(--green);color:var(--on-green);font-size:15px;font-weight:600;}
.as-flow i{font-style:normal;font-weight:700;color:var(--accent-deep);}
.as-split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4vw,56px);align-items:center;}
.as-apps{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(16px,1.8vw,22px);margin-bottom:26px;}
.as-shot{display:flex;justify-content:center;}
.as-shot img{width:min(230px,70%);border-radius:30px;border:8px solid var(--green-deep);box-shadow:0 30px 60px -30px rgba(0,0,0,.45);}
.as-note{font-size:15px;color:var(--muted);}
.as-tags{display:flex;flex-wrap:wrap;gap:9px 10px;list-style:none;margin:22px 0 0;padding:0;}
.as-tags li{padding:8px 15px;border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--line);color:var(--green-deep);font-size:14px;font-weight:600;line-height:1.2;}
.as-cta{background:var(--green-deep);color:var(--on-green-muted);border-radius:var(--r-md);padding:clamp(32px,5vw,64px);text-align:center;}
body.am .as-cta h2{font-size:clamp(27px,3.4vw,42px);line-height:1.13;letter-spacing:-0.025em;color:var(--on-green);}
.as-cta p{max-width:60ch;margin:16px auto 26px;font-size:17px;line-height:1.65;}
body.am .as-cta .am-btn--primary{background:var(--on-green);color:var(--green-deep);}
body.am .as-cta .am-btn--primary:hover{background:var(--bg-2);}
.as-sign{margin-top:28px;text-align:center;font-size:clamp(16px,1.8vw,19px);font-weight:600;color:var(--green-deep);}
body.am .as-store .am-store__btn{border-color:var(--line);color:var(--green-deep);}
body.am .as-store .am-store__btn small{color:var(--muted);}
body.am .as-store .am-store__btn:hover{background:var(--bg-2);border-color:var(--green);}
.as-store .am-foot__apps-label{color:var(--muted);}
@media (max-width:900px){.as-split{grid-template-columns:1fr;}}

/* Alt Schools page: staggered reveals. */
.am-motion .as-grid .rv:nth-child(2){transition-delay:.07s;}
.am-motion .as-grid .rv:nth-child(3){transition-delay:.14s;}
.am-motion .as-grid .rv:nth-child(4){transition-delay:.06s;}
.am-motion .as-grid .rv:nth-child(5){transition-delay:.13s;}
.am-motion .as-grid .rv:nth-child(6){transition-delay:.20s;}
.am-motion .as-apps .rv:nth-child(2){transition-delay:.09s;}
.am-motion .as-split .as-shot.rv{transition-delay:.12s;}
.am-motion .as-store.rv{transition-delay:.08s;}
.am-motion .as-sign.rv{transition-delay:.1s;}

/* Alt Schools page: its own reveal, independent of the home reveal system. */
.as-anim .as-rv{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.75,.2,1);}
.as-anim .as-rv.as-in{opacity:1;transform:none;}
.as-anim .as-grid .as-rv:nth-child(2),.as-anim .as-grid .as-rv:nth-child(5){transition-delay:.08s;}
.as-anim .as-grid .as-rv:nth-child(3),.as-anim .as-grid .as-rv:nth-child(6){transition-delay:.16s;}
.as-anim .as-apps .as-rv:nth-child(2){transition-delay:.1s;}
.as-anim .as-shot.as-rv{transition-delay:.14s;}
.as-anim .as-store.as-rv{transition-delay:.1s;}
.as-anim .as-sign.as-rv{transition-delay:.12s;}
@media (prefers-reduced-motion:reduce){.as-anim .as-rv{opacity:1;transform:none;transition:none;}}

/* WordPress swaps emoji for images; keep them text-sized. */
img.emoji{display:inline-block;width:1em;height:1em;margin:0 .05em 0 .1em;vertical-align:-0.1em;background:none;padding:0;border:0;}

/* Alt Schools page: richer motion. */
.as-anim .as-rv{opacity:0;transform:translateY(26px) scale(.99);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1);}
.as-anim .as-rv.as-in{opacity:1;transform:none;}
.as-card{transition:transform .32s cubic-bezier(.2,.8,.2,1),box-shadow .32s ease,border-color .32s ease;}
.as-card:hover{transform:translateY(-5px);box-shadow:0 34px 70px -30px rgba(46,60,40,.42),0 3px 10px rgba(46,60,40,.08);border-color:color-mix(in srgb, var(--green) 40%, var(--line));}
.as-anim .as-card .as-list li{opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0)*45ms + .12s);}
.as-anim .as-card.as-in .as-list li{opacity:1;transform:none;}
.as-anim .as-flow.as-rv > *{opacity:0;transform:translateY(10px) scale(.96);transition:opacity .45s ease,transform .45s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0)*70ms);}
.as-anim .as-flow.as-in > *{opacity:1;transform:none;}
.as-anim .as-tags.as-rv li{opacity:0;transform:translateY(10px) scale(.95);transition:opacity .45s ease,transform .45s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0)*40ms);}
.as-anim .as-tags.as-in li{opacity:1;transform:none;}
.as-tags li{transition:background-color .25s ease,border-color .25s ease,color .25s ease;}
.as-tags li:hover{background:var(--green);border-color:var(--green);color:var(--on-green);}
.as-shot img{animation:as-bob 6s ease-in-out infinite;}
@keyframes as-bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}
.as-anim .as-cta.as-rv{transform:translateY(26px) scale(.975);}
.as-anim .as-cta.as-in{transform:none;}
.as-w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.1em;margin-bottom:-.1em;}
.as-w > i{display:inline-block;font-style:normal;transform:translateY(110%);transition:transform .85s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0)*60ms);}
.as-ready .as-w > i{transform:none;}
@media (prefers-reduced-motion:reduce){.as-anim .as-rv,.as-anim .as-card .as-list li,.as-anim .as-flow.as-rv > *,.as-anim .as-tags.as-rv li{opacity:1;transform:none;transition:none;}.as-w > i{transform:none;transition:none;}.as-shot img{animation:none;}.as-card:hover{transform:none;}}

/* Product card carrying a fuller block of copy plus a Know more button. */
body.am .am-stack__card--copy h3{font-size:clamp(24px,2.4vw,31px);line-height:1.14;}
.am-stack__card--copy .am-chip{margin-bottom:12px;}
.am-stack__card--copy .am-stack__text p{font-size:15px;line-height:1.6;margin-bottom:12px;}
.am-stack__card--copy .am-stack__sub{font-size:16px;margin-bottom:10px;}
body.am .am-stack__card--copy .am-btn--app{min-height:44px;margin-top:6px;}
@media (min-width:1001px){.am-stack__card--copy{padding:clamp(24px,3vw,40px);}}

/* Tag rail on the copy-heavy card. */
.am-stack__card--copy .am-tags{margin-top:12px;gap:7px 8px;border-top-color:color-mix(in srgb, var(--app-ink) 22%, transparent);}
.am-stack__card--copy .am-tags li{padding:6px 11px;font-size:12.5px;}

@media (min-width:1001px){.am-stack__card--copy{grid-template-columns:minmax(0,8fr) minmax(0,4fr);}}

/* Numbered feature cards and the payroll outsourcing band. */
.as-num{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 9px;border-radius:var(--r-pill);background:color-mix(in srgb, var(--green) 12%, transparent);color:var(--green-deep);font-size:13px;font-weight:700;letter-spacing:.04em;margin-bottom:14px;}
.as-out{background:var(--green-deep);color:var(--on-green-muted);border-radius:var(--r-md);padding:clamp(30px,4.5vw,60px);}
body.am .as-out h2{color:var(--on-green);font-size:clamp(27px,3.4vw,42px);line-height:1.13;letter-spacing:-0.025em;}
.as-out__lead{font-size:clamp(18px,2vw,22px);font-weight:600;color:var(--on-green);margin:14px 0 16px;}
.as-out p{font-size:17px;line-height:1.7;max-width:72ch;}
.as-out__sign{margin-top:22px;padding-top:20px;border-top:1px dashed rgba(250,247,239,.25);font-size:clamp(17px,1.9vw,20px);font-weight:600;color:var(--on-green);}

/* Payrollers card: the tag rail spans the whole card so it can sit 5 / 5 / 4. */
.am-stack__card--copy.am-app--pay{row-gap:clamp(14px,1.6vw,20px);}
.am-stack__card--copy.am-app--pay .am-tags{grid-column:1/-1;margin-top:0;padding-top:16px;justify-content:center;gap:9px 10px;}
@media (min-width:1001px){.am-stack__card--copy.am-app--pay .am-phone{max-height:330px;}}

/* ERP card sits on white, so its button needs a solid fill. */
body.am .am-app--erp .am-btn--app{background:var(--app);color:#ffffff;}
body.am .am-app--erp .am-btn--app:hover{background:var(--app-deep);opacity:1;}

/* ERP hero sits on white, so it needs a defining edge. */
.am-page__hero--light{border-bottom:1px solid var(--line);}

/* ALT ERP page: its own visual language. */
.erp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(16px,1.8vw,22px);}
.erp-grid--two{grid-template-columns:repeat(auto-fit,minmax(340px,1fr));}
.erp-card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:clamp(22px,2.4vw,28px) clamp(22px,2.4vw,28px) clamp(22px,2.4vw,28px) clamp(26px,2.8vw,34px);box-shadow:var(--shadow);overflow:hidden;transition:transform .32s cubic-bezier(.2,.8,.2,1),box-shadow .32s ease,border-color .32s ease;}
.erp-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--green);}
.as-anim .erp-card::before{transform:scaleY(0);transform-origin:top;transition:transform .7s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0)*60ms + .12s);}
.as-anim .erp-card.as-in::before{transform:scaleY(1);}
.erp-card:hover{transform:translateY(-5px);box-shadow:0 34px 70px -30px rgba(46,60,40,.42),0 3px 10px rgba(46,60,40,.08);border-color:color-mix(in srgb, var(--green) 40%, var(--line));}
body.am .erp-card h3{font-size:20px;line-height:1.25;color:var(--green-deep);margin-bottom:8px;}
.erp-card p{font-size:15px;line-height:1.65;color:var(--muted);}
.erp-chain{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:10px;list-style:none;margin:0;padding:0;}
.erp-chain li{padding:11px 19px;border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--line);color:var(--green-deep);font-size:15px;font-weight:600;line-height:1.2;box-shadow:0 8px 22px -16px rgba(46,60,40,.5);}
.erp-chain li.erp-chain__arrow{padding:0 2px;border:0;background:none;box-shadow:none;color:var(--accent-deep);font-size:17px;font-weight:700;}
.as-anim .erp-chain.as-rv li{opacity:0;transform:translateY(10px) scale(.95);transition:opacity .45s ease,transform .45s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0)*55ms);}
.as-anim .erp-chain.as-in li{opacity:1;transform:none;}
.erp-int{display:grid;justify-items:center;gap:14px;text-align:center;margin-top:clamp(24px,3vw,36px);}
.erp-int__panel{width:min(620px,100%);border-radius:var(--r-md);padding:clamp(20px,2.4vw,28px) clamp(22px,3vw,34px);}
.erp-int__panel--pos{background:#325b3e;color:#ffffff;}
.erp-int__panel--erp{background:var(--surface);border:2px solid var(--green);color:var(--green-deep);}
body.am .erp-int__panel h3{font-size:clamp(20px,2.2vw,26px);line-height:1.2;color:inherit;margin-bottom:6px;}
.erp-int__panel p{font-size:15px;line-height:1.55;opacity:.92;margin:0;}
.erp-int__arrow{font-size:24px;line-height:1;color:var(--accent-deep);}
.as-anim .erp-int__arrow{animation:erp-drop 2.4s ease-in-out infinite;}
@keyframes erp-drop{0%,100%{transform:translateY(0);opacity:.75;}50%{transform:translateY(6px);opacity:1;}}
.erp-close{background:var(--green-deep);color:var(--on-green-muted);border-radius:var(--r-md);padding:clamp(34px,5vw,64px);text-align:center;}
body.am .erp-close h2{color:var(--on-green);font-size:clamp(28px,3.6vw,46px);line-height:1.12;letter-spacing:-0.025em;}
.erp-close p{margin-top:16px;font-size:clamp(17px,1.9vw,20px);font-weight:600;color:var(--on-green);}
@media (prefers-reduced-motion:reduce){.as-anim .erp-card::before{transform:scaleY(1);transition:none;}.as-anim .erp-chain.as-rv li{opacity:1;transform:none;transition:none;}.as-anim .erp-int__arrow{animation:none;}.erp-card:hover{transform:none;}}

/* erp-chain vertical on small screens, with the arrows turned to point down. */
@media (max-width:640px){
.erp-chain{flex-direction:column;align-items:stretch;gap:6px;}
.erp-chain li{text-align:center;}
.erp-chain li.erp-chain__arrow{font-size:0;line-height:1;}
.erp-chain li.erp-chain__arrow::after{content:"\2193";display:block;font-size:17px;}
}


/* All four stack cards share one height, sized to the ERP card; the denser cards are trimmed to fit it. */
@media (min-width:1001px){
.am-stack__card .am-stack__text p{margin-bottom:9px;line-height:1.55;}
.am-stack__card .am-stack__sub{margin-bottom:8px;}
.am-stack__card .am-chip{margin-bottom:10px;}
body.am .am-stack__card .am-btn--app{margin-top:4px;}
.am-stack__card .am-tags{padding-top:10px;margin-top:10px;gap:6px 8px;}
.am-stack__card .am-tags li{padding:5px 10px;}
}
@media (min-width:1001px) and (max-width:1400px){
.am-stack__card .am-stack__text p{line-height:1.5;margin-bottom:8px;}
.am-stack__card .am-tags{padding-top:8px;margin-top:8px;gap:5px 7px;}
.am-stack__card .am-tags li{padding:4px 9px;font-size:12px;}
}


/* ---- Alt Schools gallery card: logo, centred title, three app screens, tags, Know more ---- */
@font-face{font-family:'Caveat';src:url('fonts/caveat-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;}

.am-stack__card--gallery{display:flex;flex-direction:column;align-items:center;gap:0;text-align:center;}
.am-gal__head{align-self:flex-start;display:flex;align-items:center;}
.am-gal__logo{width:clamp(46px,4.2vw,60px);height:auto;border-radius:15px;display:block;box-shadow:0 10px 24px -14px rgba(28,27,23,.55);}
.am-gal__intro{margin-top:clamp(8px,1.2vw,16px);max-width:34ch;}
body.am .am-stack__card--gallery h3{font-size:clamp(25px,2.6vw,34px);line-height:1.12;}
.am-stack__card--gallery .am-stack__sub{margin:6px 0 0;font-size:15px;font-weight:500;color:var(--app-muted);}

.am-gal__shots{list-style:none;margin:clamp(12px,1.6vw,20px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,32px);width:100%;max-width:620px;}
.am-gal__shots figure{margin:0;display:flex;flex-direction:column;align-items:center;}
.am-gal__screen{display:block;width:100%;max-width:150px;aspect-ratio:736 / 980;overflow:hidden;border-radius:18px;border:5px solid var(--app-deep);background:var(--app-deep);box-shadow:0 18px 34px -20px rgba(28,27,23,.6);transition:transform .35s cubic-bezier(.2,.75,.2,1),box-shadow .35s ease;}
.am-gal__screen img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center;}
.am-gal__shots figcaption{margin-top:10px;font-size:12.5px;line-height:1.45;color:var(--app-muted);max-width:23ch;}
.am-gal__shots figcaption b{display:block;font-size:13.5px;font-weight:600;color:var(--app-ink);margin-bottom:2px;}

.am-stack__card--gallery .am-tags{margin-top:clamp(10px,1.4vw,16px);width:100%;}
body.am .am-stack__card--gallery .am-btn--app{margin-top:clamp(10px,1.4vw,16px);}

/* "Know more" in the handwritten face. */
.am-btn--script{font-family:'Caveat','Segoe Script',cursive;font-size:24px;font-weight:600;letter-spacing:.01em;padding:0 30px;}

/* Screens rise in one after another, and lift when pointed at. */
.am-motion .am-gal__shots.rv.is-in .am-gal__screen{animation:am-gal-rise .7s cubic-bezier(.2,.75,.2,1) backwards;}
.am-motion .am-gal__shots.rv.is-in li:nth-child(2) .am-gal__screen{animation-delay:.11s;}
.am-motion .am-gal__shots.rv.is-in li:nth-child(3) .am-gal__screen{animation-delay:.22s;}
@keyframes am-gal-rise{from{opacity:0;transform:translateY(26px) scale(.96);}to{opacity:1;transform:none;}}
.am-gal__screen:hover{transform:translateY(-8px);box-shadow:0 28px 46px -22px rgba(28,27,23,.72);}
.am-motion .am-gal__intro.rv{transition-delay:.06s;}
.am-motion .am-gal__shots.rv{transition-delay:.1s;}
.am-motion .am-stack__card--gallery .am-tags.rv{transition-delay:.16s;}
.am-motion .am-stack__card--gallery .am-btn--script.rv{transition-delay:.2s;}

@media (max-width:1000px){
.am-gal__shots{max-width:560px;margin-left:auto;margin-right:auto;}
.am-gal__screen{max-width:160px;}
}
@media (max-width:640px){
.am-gal__shots{grid-template-columns:1fr;gap:26px;max-width:320px;}
.am-gal__screen{max-width:190px;}
.am-gal__shots figcaption{max-width:28ch;}
.am-btn--script{font-size:22px;}
}
@media (prefers-reduced-motion:reduce){
.am-gal__screen{transition:none;}
.am-motion .am-gal__shots.rv.is-in .am-gal__screen{animation:none;}
.am-gal__screen:hover{transform:none;}
}

/* Taller cards need shallower sticky offsets so each one still lands inside the viewport. */
@media (min-width:1001px){
.am-stack__card:nth-child(1){top:84px;}
.am-stack__card:nth-child(2){top:96px;}
.am-stack__card:nth-child(3){top:108px;}
.am-stack__card:nth-child(4){top:120px;}
.admin-bar .am-stack__card:nth-child(1){top:116px;}
.admin-bar .am-stack__card:nth-child(2){top:128px;}
.admin-bar .am-stack__card:nth-child(3){top:140px;}
.admin-bar .am-stack__card:nth-child(4){top:152px;}
}


/* ---- Gallery card fit pass: keep the whole card inside one shared card height ---- */
@media (min-width:1001px){
.am-stack__card--gallery{padding:clamp(22px,2.6vw,38px);}
.am-gal__intro{max-width:640px;margin-top:clamp(8px,1vw,14px);}
.am-gal__shots{max-width:680px;margin-top:clamp(10px,1.3vw,18px);}
/* Screens track the viewport height so a short laptop screen still fits the whole card. */
.am-gal__screen{max-width:clamp(112px,14vh,150px);}
.am-gal__shots figcaption{max-width:none;font-size:12px;line-height:1.42;margin-top:9px;}
.am-gal__shots figcaption b{font-size:13px;}
.am-stack__card--gallery .am-tags{margin-top:clamp(10px,1.2vw,16px);padding-top:12px;gap:5px 7px;}
.am-stack__card--gallery .am-tags li{padding:4px 9px;font-size:12px;}
body.am .am-stack__card--gallery .am-btn--app{margin-top:clamp(10px,1.2vw,16px);}
body.am .am-stack__card--gallery h3{font-size:clamp(25px,2.4vw,32px);}
}


/* Alt Schools lockup: the app mark with its name set in the page face. */
.am-gal__head{gap:10px;}
.am-gal__logo{width:clamp(40px,3.4vw,50px);border-radius:0;box-shadow:none;}
.am-gal__name{font-size:clamp(15px,1.4vw,17px);font-weight:600;letter-spacing:-0.01em;color:var(--app-ink);}


/* Logo stays at the top-left; the rest of the card sits optically centred in what is left. */
.am-gal__intro{margin-top:auto;padding-top:clamp(8px,1vw,14px);}
.am-stack__card--gallery .am-btn--script{margin-bottom:auto;}


/* Tighter card, title sits closer to the logo, screens read larger. */
@media (min-width:1001px){
.am-gal__intro{margin-top:clamp(6px,0.8vw,12px);padding-top:0;}
.am-gal__screen{max-width:clamp(128px,16.5vh,168px);}
.am-gal__shots{max-width:740px;}
}


/* Reclaim the last few pixels so the larger screens still clear the shorter card. */
@media (min-width:1001px){
.am-gal__screen{max-width:clamp(126px,16vh,162px);}
.am-gal__shots{margin-top:clamp(8px,1vw,14px);}
.am-gal__shots figcaption{margin-top:7px;}
.am-stack__card--gallery .am-tags{margin-top:clamp(8px,1vw,12px);padding-top:10px;}
body.am .am-stack__card--gallery .am-btn--app{margin-top:clamp(8px,1vw,12px);}
}


/* Tag rail on one line: the pills scale with the card so all eleven always fit. */
@media (min-width:1001px){
.am-stack__card--gallery .am-tags{flex-wrap:nowrap;justify-content:center;gap:0 clamp(5px,0.5vw,7px);min-width:0;}
.am-stack__card--gallery .am-tags li{padding:.36em .8em;font-size:clamp(9px,0.8vw,11.5px);white-space:nowrap;flex:0 0 auto;}
.am-stack__card--gallery .am-tags li.am-tags__br{display:none;}
/* The row that frees up goes back into the screens. */
.am-gal__screen{max-width:clamp(150px,19vh,196px);}
}


/* Know more takes the slot the second tag row used to occupy, on the old row rhythm. */
@media (min-width:1001px){
body.am .am-stack__card--gallery .am-btn--app{margin-top:8px;}
}


/* ---- Stack rhythm: a pinned card clears the viewport, and the next one only
   arrives once the current one has been read. ---- */
@media (min-width:1001px){
.am-stack__card{height:clamp(580px,calc(88vh - 110px),660px);margin-bottom:58vh;}
.am-stack__card:nth-child(1){top:64px;}
.am-stack__card:nth-child(2){top:76px;}
.am-stack__card:nth-child(3){top:88px;}
.am-stack__card:nth-child(4){top:100px;margin-bottom:0;}
.admin-bar .am-stack__card:nth-child(1){top:96px;}
.admin-bar .am-stack__card:nth-child(2){top:108px;}
.admin-bar .am-stack__card:nth-child(3){top:120px;}
.admin-bar .am-stack__card:nth-child(4){top:132px;}
.am-stack__card:last-child{margin-bottom:0;}
/* Screens follow the shorter card so the gallery still fits inside it. */
.am-gal__screen{max-width:clamp(126px,17vh,196px);}
}


/* ---- Schools gallery, column layout: icon + name + copy on top, screen beneath,
   a rule between each column. ---- */
.am-gal__shots{text-align:left;align-items:stretch;max-width:880px;}
.am-gal__shots li{display:flex;}
.am-gal__shots figure{width:100%;align-items:stretch;}
.am-gal__label{display:flex;align-items:center;gap:9px;}
.am-gal__ico{flex:0 0 auto;width:27px;height:27px;border-radius:8px;background:var(--app-chip-bg);color:var(--app-chip-ink);display:inline-flex;align-items:center;justify-content:center;}
.am-gal__shots figcaption b{display:inline;font-size:15px;font-weight:600;color:var(--app-ink);margin:0;letter-spacing:-0.01em;}
.am-gal__desc{display:block;margin-top:9px;font-size:12.5px;line-height:1.5;color:var(--app-muted);}
.am-gal__shots .am-gal__screen{margin-top:auto;align-self:center;}

@media (min-width:1001px){
.am-gal__shots{gap:0;max-width:880px;}
.am-gal__shots li{padding:0 clamp(12px,1.6vw,24px);}
.am-gal__shots li:first-child{padding-left:0;}
.am-gal__shots li:last-child{padding-right:0;}
.am-gal__shots li + li{border-left:1px solid color-mix(in srgb, var(--app-deep) 20%, transparent);}
.am-gal__shots .am-gal__screen{margin-top:clamp(14px,1.8vw,22px);}
.am-gal__screen{max-width:clamp(118px,15.5vh,178px);}
.am-gal__shots figcaption{margin-top:0;}
}

@media (max-width:1000px){
.am-gal__shots li{padding:0;border-left:0;}
.am-gal__shots .am-gal__screen{margin-top:16px;align-self:flex-start;}
}


/* The column layout frees height; give it back to the screens. */
@media (min-width:1001px){
.am-gal__screen{max-width:clamp(130px,17.5vh,192px);}
}


/* ---- Product lockup: each card wears its own app mark. Sized by height so the
   tall Payrollers "P" and the wide "A" marks read at the same weight. ---- */
.am-gal__logo{width:auto;height:clamp(30px,2.6vw,38px);border-radius:0;box-shadow:none;}
.am-gal__head{display:flex;align-items:center;gap:10px;margin-bottom:clamp(10px,1.2vw,16px);}
.am-stack__card--gallery .am-gal__head{margin-bottom:0;}
.am-stack__text .am-gal__head{align-self:auto;}


/* ---- Cards no longer stack over one another: each one scrolls in its own space
   with a real gap, and rises into view instead of covering the card above. ---- */
@media (min-width:1001px){
.am-stack{gap:clamp(22px,2.6vw,36px);}
.am-stack__card{position:static;top:auto;margin-bottom:0;}
.am-stack__card:nth-child(1),
.am-stack__card:nth-child(2),
.am-stack__card:nth-child(3),
.am-stack__card:nth-child(4),
.am-stack__card:last-child{top:auto;margin-bottom:0;}
}

/* Each card rises and fades as it enters, so the section still reads as motion. */
.am-motion .am-stack__card.rv{opacity:0;transform:translateY(42px);transition:opacity .75s ease,transform .75s cubic-bezier(.2,.75,.2,1);}
.am-motion .am-stack__card.rv.is-in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
.am-motion .am-stack__card.rv{opacity:1;transform:none;transition:none;}
}


/* ---- Stacking deck, built the way atlas.kitchen does it: sticky cards whose top
   offset steps down the page, so each covered card keeps a visible ledge, and a
   matching step-down in margin-bottom so every card arrives after the same scroll. ---- */
@media (min-width:1001px){
.am-stack{gap:clamp(300px,52vh,420px);}
.am-stack__card{position:sticky;height:clamp(580px,calc(88vh - 150px),656px);}
.am-stack__card:nth-child(1){top:36px;margin-bottom:90px;}
.am-stack__card:nth-child(2){top:66px;margin-bottom:60px;}
.am-stack__card:nth-child(3){top:96px;margin-bottom:30px;}
.am-stack__card:nth-child(4){top:126px;margin-bottom:0;}
.admin-bar .am-stack__card:nth-child(1){top:68px;}
.admin-bar .am-stack__card:nth-child(2){top:98px;}
.admin-bar .am-stack__card:nth-child(3){top:128px;}
.admin-bar .am-stack__card:nth-child(4){top:158px;}
/* A card covering the one below needs its own edge to read against. */
.am-stack__card{box-shadow:0 -18px 50px -28px rgba(46,60,40,.45);}
/* The deck slides; the cards themselves must not fade or shift. */
.am-motion .am-stack__card.rv{opacity:1;transform:none;transition:none;}
}


/* On a short screen the 30px step would push the last cards past the fold, so the
   deck closes up: a smaller ledge, but every card still lands inside the viewport. */
@media (min-width:1001px) and (max-height:760px){
.am-stack__card:nth-child(1){top:24px;}
.am-stack__card:nth-child(2){top:42px;}
.am-stack__card:nth-child(3){top:60px;}
.am-stack__card:nth-child(4){top:78px;}
.admin-bar .am-stack__card:nth-child(1){top:56px;}
.admin-bar .am-stack__card:nth-child(2){top:74px;}
.admin-bar .am-stack__card:nth-child(3){top:92px;}
.admin-bar .am-stack__card:nth-child(4){top:110px;}
}


/* Fourteen tags will not read on one line, so the Payrollers rail wraps instead. */
@media (min-width:1001px){
.am-stack__card--gallery .am-tags--wrap{flex-wrap:wrap;gap:5px 7px;}
.am-stack__card--gallery .am-tags--wrap li{font-size:11px;padding:4px 9px;}
}


/* ---- Gallery head becomes a bar: mark on the left, Know more on the right.
   The height that frees up goes straight into the screens. ---- */
.am-stack__card--gallery .am-gal__head{width:100%;align-self:stretch;justify-content:space-between;gap:16px;}
body.am .am-stack__card--gallery .am-gal__head .am-btn--app{margin:0;flex:0 0 auto;}

@media (min-width:1001px){
/* Slack sits above the screens and below the tags, so the block stays centred. */
.am-stack__card--gallery .am-gal__shots{margin-top:auto;}
.am-stack__card--gallery .am-tags{margin-bottom:auto;}
/* Screens as large as the card will allow. */
.am-gal__shots{max-width:980px;}
.am-gal__screen{max-width:clamp(185px,27vh,265px);border-width:6px;border-radius:22px;}
.am-gal__shots figcaption{font-size:13px;}
.am-gal__shots figcaption b{font-size:14px;}
}

@media (max-width:1000px){
.am-stack__card--gallery .am-gal__head{flex-wrap:wrap;}
}

/* Mark and name stay together on the left; only the button is pushed right. */
.am-stack__card--gallery .am-gal__name{margin-right:auto;}


/* ---- Wide variant: Alt ERP's screens are tablet and desktop captures, not phones,
   so they sit in a landscape window that spans the full card. ---- */
.am-gal__shots--wide .am-gal__screen{aspect-ratio:5 / 4;border-radius:14px;border-width:4px;}
@media (min-width:1001px){
.am-gal__shots--wide{max-width:1060px;}
.am-gal__shots--wide .am-gal__screen{max-width:clamp(240px,44vh,340px);}
}
@media (max-width:1000px){
.am-gal__shots--wide .am-gal__screen{max-width:420px;}
}


/* ================= Gallery card, tightened pass =================
   Copy sits straight under the head bar, the screens take the room that
   frees up, and the tag rail drops to a thin pipe-separated line. */
@media (min-width:1001px){
/* 1. Text rides up: no auto gap above the columns, slack falls below the tags. */
.am-stack__card--gallery .am-gal__shots{margin-top:clamp(8px,1vw,14px);}
.am-stack__card--gallery .am-tags{margin-bottom:auto;}
.am-stack__card--gallery{padding:clamp(18px,2vw,30px);}
.am-gal__shots li{padding:0 clamp(8px,1vw,16px);}

/* 2. Bigger screens. */
.am-gal__shots{max-width:1060px;}
.am-gal__screen{max-width:clamp(210px,31vh,300px);}
.am-gal__shots--wide .am-gal__screen{max-width:clamp(250px,48vh,340px);}
}

/* 3. Tags become a pipe-separated line instead of pills. */
.am-stack__card--gallery .am-tags{gap:0;padding-top:clamp(8px,1vw,12px);}
.am-stack__card--gallery .am-tags li{
	background:none;border:0;border-radius:0;
	padding:1px clamp(7px,0.7vw,11px);
	font-size:clamp(9.5px,0.78vw,11px);font-weight:500;line-height:1.5;
	color:var(--app-muted);
}
.am-stack__card--gallery .am-tags li + li{border-left:1px solid color-mix(in srgb, var(--app-ink) 26%, transparent);}
.am-stack__card--gallery .am-tags li.am-tags__br{display:none;}

/* 5. Thinner frames. */
.am-gal__screen{border-width:2px;border-radius:16px;}
.am-gal__shots--wide .am-gal__screen{border-width:2px;border-radius:10px;}

/* 4. Hover: the pointed-at screen lifts and grows while the others step back. */
.am-gal__screen{transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease,opacity .35s ease;}
.am-gal__shots figure{transition:opacity .35s ease;}
@media (hover:hover) and (min-width:1001px){
.am-gal__shots:hover figure{opacity:.45;}
.am-gal__shots li:hover figure{opacity:1;}
.am-gal__shots li:hover .am-gal__screen{transform:translateY(-14px) scale(1.07);box-shadow:0 34px 56px -26px rgba(0,0,0,.6);}
}
.am-gal__screen:hover{transform:none;}

@media (prefers-reduced-motion:reduce){
.am-gal__screen,.am-gal__shots figure{transition:none;}
.am-gal__shots:hover figure{opacity:1;}
.am-gal__shots li:hover .am-gal__screen{transform:none;}
}


/* The pipe rail is narrow enough that Payrollers' fourteen tags now fit one line too. */
@media (min-width:1001px){
.am-stack__card--gallery .am-tags--wrap{flex-wrap:wrap;gap:2px 0;}
.am-stack__card--gallery .am-tags--wrap li{font-size:clamp(9px,0.72vw,10.5px);padding:1px clamp(5px,0.55vw,9px);}
/* Trim the portrait screens back inside the card. */
.am-gal__screen{max-width:clamp(205px,30vh,292px);}
}

/* Payrollers carries a second tag line, so its screens run a shade shorter. */
@media (min-width:1001px){
.am-app--pay .am-gal__screen{max-width:clamp(198px,28.5vh,276px);}
}


/* ===== Taller screens, brighter tag rail, less air under it ===== */
@media (min-width:1001px){
/* Less room below the tags, and tighter joins above them. */
.am-stack__card--gallery{padding-bottom:clamp(12px,1.3vw,20px);}
.am-stack__card--gallery .am-tags{margin-top:clamp(6px,0.7vw,10px);padding-top:clamp(7px,0.8vw,10px);}
.am-gal__desc{line-height:1.45;}

/* The reclaimed height goes into the portrait screens, which now run taller. */
.am-gal__screen{aspect-ratio:736 / 1040;max-width:clamp(228px,29.5vh,287px);}
.am-app--pay .am-gal__screen{max-width:clamp(214px,28vh,272px);}
}

/* Tag rail reads brighter: full ink, heavier, a touch larger, stronger rules. */
.am-stack__card--gallery .am-tags li{
	color:var(--app-ink);font-weight:600;
	font-size:clamp(10.5px,0.84vw,12px);opacity:.92;
}
.am-stack__card--gallery .am-tags li + li{border-left-color:color-mix(in srgb, var(--app-ink) 45%, transparent);}
.am-stack__card--gallery .am-tags{border-top-color:color-mix(in srgb, var(--app-ink) 24%, transparent);}
@media (min-width:1001px){
.am-stack__card--gallery .am-tags--wrap li{font-size:clamp(10px,0.78vw,11.5px);}
}

/* The landscape screens need less height than the portrait ones, so the ERP and POS
   blocks centre in what is left instead of leaving it all under the tag rail. */
@media (min-width:1001px){
.am-app--erp .am-gal__shots,.am-app--pos .am-gal__shots,.am-app--screens .am-gal__shots{margin-top:auto;}
.am-app--erp .am-tags,.am-app--pos .am-tags{margin-bottom:10px;}
}


/* ===== Office block: the two columns line up on every edge ===== */
.am-office{display:flex;flex-direction:column;}
.am-office__addr{margin:0;}
/* Phone blocks sit on one baseline even though the addresses differ in length. */
.am-office__tel{list-style:none;margin:18px 0 0;padding:0;}
.am-office__tel li{display:grid;grid-template-columns:5.2em 1fr;align-items:baseline;column-gap:10px;font-size:inherit;}
.am-office__tel li + li{margin-top:6px;}
.am-office__tel span{color:var(--ink-muted,#6b6455);font-weight:500;}
body.am .am-office__tel a{color:var(--ink);font-variant-numeric:tabular-nums;}

@media (min-width:721px){
.am-office__tel{margin-top:auto;padding-top:18px;}
/* A dashed rule between the offices, matching the card's own edge. */
.am-offices .am-office + .am-office{padding-left:clamp(20px,2.4vw,34px);border-left:1px dashed #cfc5aa;}
}

/* The email closes the card on the same left edge as the addresses. */
.am-mail{margin-top:4px;}


/* ================= Mobile pass =================
   Desktop is untouched: everything below is phone/tablet only. */

@media (max-width:1000px){
/* Gallery copy was set for a three-across desktop column and reads too small
   once each block has the full width of a phone. */
.am-gal__desc{font-size:14.5px;line-height:1.55;margin-top:8px;}
.am-gal__shots figcaption b{font-size:16.5px;}
.am-gal__label{gap:11px;}
.am-gal__ico{width:31px;height:31px;border-radius:9px;}
.am-gal__ico svg{width:17px;height:17px;}

/* The screenshots are the point of these cards; let them fill the column. */
.am-gal__screen{max-width:96%;}
.am-gal__shots--wide .am-gal__screen{max-width:100%;}
.am-gal__shots{max-width:none;}

/* Tag rail: readable, and it may wrap freely. */
.am-stack__card--gallery .am-tags{flex-wrap:wrap;gap:2px 0;justify-content:flex-start;}
.am-stack__card--gallery .am-tags li{font-size:13px;padding:2px 10px;}
.am-stack__card--gallery .am-tags li:first-child{padding-left:0;}

/* Head bar: mark and name left, button below on the narrowest phones. */
.am-stack__card--gallery .am-gal__head{gap:12px 16px;}
.am-gal__logo{height:clamp(30px,7vw,40px);}
.am-gal__name{font-size:17px;}
}

@media (max-width:640px){
/* A slightly wider side gutter so nothing sits on the screen edge. */
.am-wrap{padding-left:20px;padding-right:20px;}
.am-gal__screen{max-width:min(262px,88%);}

/* Tap targets: footer and contact links were 21-29px tall. */
.am-foot a,
.am-offices a,
.am-mail a{display:inline-flex;align-items:center;min-height:44px;}
.am-foot li + li{margin-top:0;}
.am-office__tel li{grid-template-columns:5.4em 1fr;align-items:center;}
.am-office__tel li + li{margin-top:0;}
.am-logo{min-height:44px;display:inline-flex;align-items:center;}
}


/* ============================================================
   Screenshots show in full.
   The window used to be a fixed 736:1040 box with object-fit:cover,
   which cropped roughly a third off every phone capture. Now the
   frame takes the picture's own shape and nothing is cut.
   ============================================================ */
.am-gal__screen{aspect-ratio:auto;width:auto;max-width:100%;}
.am-gal__screen img{width:auto;max-width:100%;height:auto;object-fit:contain;object-position:center;}

@media (min-width:1001px){
/* A full portrait capture is ~2.2x as tall as it is wide, so the card
   needs more height to carry it at a readable size. */
.am-stack__card{height:clamp(580px,calc(92vh - 135px),760px);}
.am-gal__screen img{height:clamp(230px,calc(46vh - 35px),455px);}
.am-app--pay .am-gal__screen img{height:clamp(224px,calc(44.5vh - 34px),440px);}
/* The landscape captures are already the right shape; they just fill the column. */
.am-gal__shots--wide .am-gal__screen{aspect-ratio:auto;width:100%;max-width:clamp(250px,48vh,340px);}
.am-gal__shots--wide .am-gal__screen img{width:100%;height:auto;}
}

@media (max-width:1000px){
.am-gal__screen{width:min(262px,88%);}
.am-gal__screen img{width:100%;height:auto;}
.am-gal__shots--wide .am-gal__screen{width:100%;max-width:100%;}
}
@media (max-width:640px){
.am-gal__screen{width:min(250px,92%);}
}


/* ============================================================
   The screenshot takes whatever height the card actually has.
   Previously the image height was its own vh clamp, which left
   ~105px dead under the tag rail. Deriving it from the card
   height instead hands that space to the picture.
   ============================================================ */
@media (min-width:1001px){
.am-stack__card{--ch:clamp(580px,calc(92vh - 135px),760px);height:var(--ch);}
/* 258px is everything else in the card: head, labels, copy, tags, padding. */
.am-gal__screen img{height:max(200px,calc(var(--ch) - 258px));}
/* Payrollers carries a second tag line, so it keeps a little more back. */
.am-app--pay .am-gal__screen img{height:max(192px,calc(var(--ch) - 274px));}
/* No auto gap under the rail on the portrait cards; the picture fills it now. */
.am-stack__card--gallery .am-tags{margin-bottom:0;}
.am-app--erp .am-tags,.am-app--pos .am-tags{margin-bottom:10px;}
.am-stack__card--gallery{padding-bottom:clamp(10px,1.1vw,16px);}
}

/* The landscape screens are shorter than the portrait ones, so their columns
   stretch to fill the card and the picture centres in what is left. The tag
   rail then sits the same distance off the bottom as on the phone cards. */
@media (min-width:1001px){
.am-app--erp .am-gal__shots,.am-app--pos .am-gal__shots,.am-app--screens .am-gal__shots{margin-top:clamp(8px,1vw,14px);flex:1 1 auto;min-height:0;}
.am-gal__shots--wide figure{height:100%;}
.am-gal__shots--wide .am-gal__screen{margin-top:auto;margin-bottom:auto;}
}


/* ============================================================
   Isometric cube ground.
   A seamless 58.9 x 102 SVG tile of tumbling blocks, laid behind
   the footer. Kept faint and masked so the links stay first.
   ============================================================ */
.am-foot{position:relative;isolation:isolate;overflow:hidden;}
.am-foot::before{
	content:"";position:absolute;inset:-60px -20px;z-index:-1;pointer-events:none;
	background-image:url("img/cubes-light.svg");
	background-size:118px 204px;
	opacity:.16;
	mask-image:radial-gradient(120% 90% at 78% 12%,#000 10%,transparent 76%);
	-webkit-mask-image:radial-gradient(120% 90% at 78% 12%,#000 10%,transparent 76%);
	animation:am-cubes 90s linear infinite;
}
@keyframes am-cubes{to{background-position:118px 204px}}
.am-foot > *{position:relative;}

@media (max-width:640px){
.am-foot::before{background-size:86px 149px;opacity:.13;}
}

@media (prefers-reduced-motion:reduce){
.am-foot::before{animation:none;}
}


/* ============================================================
   Isometric cube ground, behind the hero.
   Two layers on the same tile: a still grid that wakes up on
   load, and a light sweep that travels across the lines every
   few seconds. Masked so it never reaches the headline or the
   screenshots underneath.
   ============================================================ */
.am-hero{position:relative;isolation:isolate;}

.am-hero::before,
.am-hero::after{
	content:"";position:absolute;left:-8vw;right:-8vw;top:0;bottom:26%;
	z-index:-1;pointer-events:none;
}

/* The grid itself. */
.am-hero::before{
	background-image:url("img/cubes-dark.svg");
	background-size:126px 218px;
	opacity:.09;
	-webkit-mask-image:radial-gradient(92% 74% at 50% 24%,#000 6%,transparent 74%);
	mask-image:radial-gradient(92% 74% at 50% 24%,#000 6%,transparent 74%);
	animation:am-hero-cubes-wake 1.9s cubic-bezier(.2,.8,.2,1) .25s both;
}
@keyframes am-hero-cubes-wake{
	from{opacity:0;transform:scale(1.07)}
	to{opacity:.09;transform:none}
}

/* A band of light that runs along the same lines. */
@supports ((mask-composite:intersect) or (-webkit-mask-composite:source-in)){
.am-hero::after{
	background-image:linear-gradient(104deg,
		transparent 36%,
		rgba(62,87,63,.55) 45%,
		rgba(168,112,58,.5) 51%,
		transparent 60%);
	background-size:240% 100%;background-repeat:no-repeat;
	-webkit-mask-image:url("img/cubes-dark.svg"),radial-gradient(92% 74% at 50% 24%,#000 6%,transparent 74%);
	mask-image:url("img/cubes-dark.svg"),radial-gradient(92% 74% at 50% 24%,#000 6%,transparent 74%);
	-webkit-mask-size:126px 218px,100% 100%;
	mask-size:126px 218px,100% 100%;
	-webkit-mask-repeat:repeat,no-repeat;
	mask-repeat:repeat,no-repeat;
	-webkit-mask-composite:source-in;
	mask-composite:intersect;
	opacity:.62;
	animation:am-hero-cubes-sweep 13s linear 1.2s infinite;
}
@keyframes am-hero-cubes-sweep{
	from{background-position:170% 0}
	to{background-position:-70% 0}
}
}

@media (max-width:900px){
.am-hero::before,.am-hero::after{bottom:32%;}
.am-hero::before{background-size:92px 159px;opacity:.075;}
@keyframes am-hero-cubes-wake{from{opacity:0;transform:scale(1.05)}to{opacity:.075;transform:none}}
.am-hero::after{-webkit-mask-size:92px 159px,100% 100%;mask-size:92px 159px,100% 100%;opacity:.5;}
}

@media (prefers-reduced-motion:reduce){
.am-hero::before{animation:none;opacity:.09;transform:none;}
.am-hero::after{display:none;}
}


/* ============================================================
   Anchor targets sit below the sticky header, so a jump from
   "Start now" / "Book a demo" does not land under the bar.
   ============================================================ */
#products,#why,#contact{scroll-margin-top:clamp(84px,10vh,104px);}


/* ============================================================
   Products dropdown in the header.
   No script: the panel opens on hover and on keyboard focus,
   and the trigger is still a plain link to the product stack,
   so a tap on a phone-sized pointer device always does
   something sensible.
   ============================================================ */
.am-nav__drop{position:relative;display:flex;align-items:center;}
body.am .am-nav__drop > .am-nav__top{display:inline-flex;align-items:center;gap:6px;}
.am-nav__chev{transition:transform .28s cubic-bezier(.2,.8,.2,1);opacity:.6;}
.am-nav__drop:hover .am-nav__chev,
.am-nav__drop:focus-within .am-nav__chev{transform:rotate(180deg);opacity:1;}

.am-nav__menu{
	position:absolute;left:50%;top:calc(100% + 14px);transform:translate(-50%,-8px);
	width:min(340px,92vw);padding:8px;
	background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
	box-shadow:var(--shadow);
	display:grid;gap:2px;
	opacity:0;visibility:hidden;pointer-events:none;
	transition:opacity .2s ease,transform .28s cubic-bezier(.2,.8,.2,1),visibility .2s;
	z-index:60;
}
/* A hit bridge, so the pointer can cross the gap without closing it. */
.am-nav__menu::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px;}

.am-nav__drop:hover .am-nav__menu,
.am-nav__drop:focus-within .am-nav__menu{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);}

body.am .am-nav__menu a{
	display:flex;align-items:center;gap:12px;
	padding:10px 11px;border-radius:var(--r-sm);text-decoration:none;
	transition:background .18s ease,transform .22s cubic-bezier(.2,.8,.2,1);
}
body.am .am-nav__menu a:hover{background:var(--bg);transform:translateX(3px);}
.am-nav__menu img{width:26px;height:26px;object-fit:contain;flex:0 0 auto;}
.am-nav__menu span{display:grid;gap:1px;min-width:0;}
body.am .am-nav__menu b{font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.25;}
body.am .am-nav__menu small{font-size:12px;color:var(--muted,#6b7268);line-height:1.3;}

body.am .am-nav__menu .am-nav__all{
	margin-top:4px;padding-top:11px;border-top:1px solid var(--line);border-radius:0;
	font-size:13px;font-weight:600;color:var(--green);gap:6px;
}
body.am .am-nav__menu .am-nav__all:hover{background:transparent;transform:none;}
.am-nav__all i{font-style:normal;transition:transform .25s cubic-bezier(.2,.8,.2,1);}
body.am .am-nav__menu .am-nav__all:hover i{transform:translateX(4px);}

/* Each row arrives a beat after the one above it. */
.am-nav__menu > a{opacity:0;transform:translateY(-4px);transition:opacity .22s ease,transform .26s cubic-bezier(.2,.8,.2,1),background .18s ease;}
.am-nav__drop:hover .am-nav__menu > a,
.am-nav__drop:focus-within .am-nav__menu > a{opacity:1;transform:none;}
.am-nav__menu > a:nth-child(1){transition-delay:.02s}
.am-nav__menu > a:nth-child(2){transition-delay:.06s}
.am-nav__menu > a:nth-child(3){transition-delay:.10s}
.am-nav__menu > a:nth-child(4){transition-delay:.14s}
.am-nav__menu > a:nth-child(5){transition-delay:.18s}

/* Mobile panel: the four products sit under Products. */
.am-menu__sub{display:grid;gap:2px;margin:2px 0 6px;padding-left:12px;border-left:2px solid var(--line);}
body.am .am-menu__panel .am-menu__sub a{font-size:14px;font-weight:500;padding:9px 12px;color:var(--ink);}

@media (prefers-reduced-motion:reduce){
.am-nav__menu,.am-nav__menu > a,.am-nav__chev,.am-nav__all i{transition:none;}
}


/* ============================================================
   WhatsApp, parked bottom-right.
   Above the sticky header, out of the way of the footer, and
   it says what it is before you commit to tapping it.
   ============================================================ */
.am-wa{
	position:fixed;right:clamp(14px,2vw,24px);bottom:clamp(14px,2vw,24px);z-index:80;
	display:flex;align-items:center;gap:0;
	text-decoration:none;
}
.am-wa__btn{
	position:relative;flex:0 0 auto;
	width:clamp(52px,4.4vw,58px);aspect-ratio:1;border-radius:50%;
	background:#25d366;color:#fff;
	display:grid;place-items:center;
	box-shadow:0 12px 28px -10px rgba(18,63,34,.55),0 2px 6px rgba(0,0,0,.18);
	transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease;
}
.am-wa__btn svg{width:56%;height:56%;display:block;}

/* A slow ring, so it reads as live without nagging. */
.am-wa__btn::before{
	content:"";position:absolute;inset:0;border-radius:50%;
	border:2px solid #25d366;opacity:0;
	animation:am-wa-ring 3.2s cubic-bezier(.2,.7,.4,1) infinite 1.5s;
}
@keyframes am-wa-ring{
	0%{opacity:.55;transform:scale(1)}
	70%{opacity:0;transform:scale(1.55)}
	100%{opacity:0;transform:scale(1.55)}
}

/* The label unrolls out of the button on hover. */
.am-wa__label{
	order:-1;overflow:hidden;white-space:nowrap;
	max-width:0;opacity:0;
	background:var(--surface,#fffcf5);color:var(--ink,#1f2a20);
	font-size:13px;font-weight:600;line-height:1;
	border-radius:999px;
	box-shadow:0 10px 24px -14px rgba(31,42,32,.5);
	transition:max-width .45s cubic-bezier(.2,.8,.2,1),opacity .3s ease,padding .45s cubic-bezier(.2,.8,.2,1),margin .45s cubic-bezier(.2,.8,.2,1);
	padding:0;margin:0;
}
@media (hover:hover){
.am-wa:hover .am-wa__label,
.am-wa:focus-visible .am-wa__label{max-width:200px;opacity:1;padding:11px 15px;margin-right:10px;}
.am-wa:hover .am-wa__btn{transform:translateY(-3px) scale(1.05);
	box-shadow:0 18px 36px -12px rgba(18,63,34,.6),0 2px 6px rgba(0,0,0,.2);}
.am-wa:hover .am-wa__btn::before{animation-play-state:paused;opacity:0;}
}
.am-wa:focus-visible .am-wa__btn{outline:3px solid var(--green,#4d694e);outline-offset:3px;}

@media (prefers-reduced-motion:reduce){
.am-wa__btn,.am-wa__label{transition:none;}
.am-wa__btn::before{animation:none;display:none;}
}

/* The intro runs to two paragraphs now; the old single-paragraph
   margins left too big a gap between them. */
.am-why__intro p{margin:16px 0 0;}
.am-why__intro p + p{margin-top:14px;}
.am-why__intro p:last-of-type{margin-bottom:32px;}

/* ============================================================
   Why Altminds, on its own.
   The six-reason column is gone, so the band is one measured
   column of copy rather than a narrow sticky rail beside an
   empty half.
   ============================================================ */
.am-why__grid--solo{grid-template-columns:1fr;}
.am-why__grid--solo .am-why__intro{position:static;max-width:64ch;}
body.am .am-why__grid--solo .am-why__intro p{font-size:clamp(16px,1.35vw,18.5px);line-height:1.62;}
body.am .am-why__grid--solo .am-why__intro h2{margin-bottom:4px;}
@media (max-width:860px){
.am-why__grid--solo .am-why__intro{max-width:none;}
}

/* The email sits under both offices, so it is centred on the card
   rather than hanging off the left column. (am-mail centred) */
.am-mail{text-align:center;}


/* ============================================================
   WhatsApp: it travels with the scroll.
   Still always on screen, but it is no longer nailed down — it
   lags behind the scroll by a little and eases back when you
   stop, so it visibly moves as you move the page.
   --wy is written by script; without it the button simply sits
   where it always did.
   ============================================================ */
.am-wa{
	transform:translateY(var(--wy,0px));
	transition:transform .7s cubic-bezier(.16,.9,.24,1);
	will-change:transform;
}
/* While the page is actually moving, it follows almost at once;
   the slow ease above is what brings it home afterwards. */
.am-wa.is-moving{transition:transform .12s linear;}

@media (prefers-reduced-motion:reduce){
.am-wa{transform:none;transition:none;}
}


/* ============================================================
   Contact form.
   Same cream surface, hairline and pill button as the rest of
   the page; the field underline is the only thing that moves.
   ============================================================ */
.am-form{display:grid;gap:clamp(14px,1.6vw,18px);margin-top:clamp(22px,2.6vw,32px);max-width:560px;}
.am-form__row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.4vw,18px);}

.am-field{display:grid;gap:6px;min-width:0;}
.am-field > span{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);}
.am-field input,
.am-field select,
.am-field textarea{
	width:100%;font:inherit;font-size:15px;color:var(--ink);
	background:var(--surface);
	border:1px solid var(--line);
	border-radius:var(--r-sm,10px);
	padding:11px 13px;
	transition:border-color .25s ease,box-shadow .25s ease,background .25s ease;
}
.am-field textarea{resize:vertical;min-height:104px;line-height:1.55;}
.am-field select{appearance:none;cursor:pointer;
	background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
	background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;
	background-size:5px 5px,5px 5px;background-repeat:no-repeat;
	padding-right:34px;}
.am-field input:hover,.am-field select:hover,.am-field textarea:hover{border-color:var(--green);}
.am-field input:focus,.am-field select:focus,.am-field textarea:focus{
	outline:none;border-color:var(--green);
	box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 18%,transparent);
}
/* Only complain once the reader has actually interacted with it.
   :placeholder-shown was wrong here — these fields carry no
   placeholder, so every empty required field flagged itself red
   the moment the page loaded. */
.am-field input:user-invalid,
.am-field textarea:user-invalid{border-color:#b4543f;}

.am-form__foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:2px;}
.am-form__send{min-width:160px;}
.am-form__note{margin:0;font-size:13px;line-height:1.5;color:var(--muted);flex:1 1 200px;}
.am-form__note.is-ok{color:var(--green);font-weight:600;}
.am-form__note.is-bad{color:#a8452f;font-weight:600;}

.am-form.is-sending .am-form__send{opacity:.65;pointer-events:none;}
.am-form.is-sent .am-form__send{background:var(--green-deep);}

@media (max-width:600px){
.am-form__row{grid-template-columns:1fr;}
.am-form__send{width:100%;}
/* 16px keeps iOS from zooming the page when a field takes focus. */
.am-field input,.am-field select,.am-field textarea{font-size:16px;}
}

@media (prefers-reduced-motion:reduce){
.am-field input,.am-field select,.am-field textarea{transition:none;}
}

/* The left contact column now carries the form, so it takes a fairer
   share of the band than it did when it held only a heading. */
@media (min-width:901px){
/* Enough for the form's two-up rows, while the offices card keeps
   the width its phone numbers need to stay on one line. */
.am-contact__grid{grid-template-columns:minmax(0,4.4fr) minmax(0,6fr);}
}
.am-office__tel a{white-space:nowrap;}


/* ============================================================
   Contact, restacked.
   The offices used to sit in a column beside the form, which
   squeezed both. They now run underneath it, and the band is a
   single centred measure: heading, form card, addresses.
   ============================================================ */
.am-contact__stack{display:grid;justify-items:center;gap:clamp(24px,3.2vw,40px);}
.am-contact__stack > *{width:100%;max-width:760px;}

.am-contact__head{text-align:center;}
body.am .am-contact__head p{margin:14px auto 0;max-width:52ch;font-size:17px;color:var(--muted);}

/* The form is a card now, so it reads as the thing to do here
   rather than as loose fields on the band. */
.am-contact__stack .am-form{
	margin-top:0;max-width:760px;
	background:var(--surface);
	border:1px solid var(--line);
	border-radius:var(--r-md);
	padding:clamp(22px,3vw,38px);
	box-shadow:var(--shadow);
}
/* Against the card the fields need to sit back, not match it. */
.am-contact__stack .am-field input,
.am-contact__stack .am-field select,
.am-contact__stack .am-field textarea{background-color:var(--bg);border-radius:10px;padding:12px 14px;}
.am-field input::placeholder,
.am-field textarea::placeholder{color:color-mix(in srgb,var(--muted) 58%,transparent);}
.am-field > span{display:flex;align-items:baseline;gap:4px;}
.am-field em{font-style:normal;color:var(--accent-deep);}

/* The note used to sit beside the button and crowd it; it belongs
   on its own line underneath. */
.am-form__foot{display:grid;justify-items:start;gap:12px;margin-top:6px;}
.am-form__note{max-width:52ch;flex:none;}

.am-contact__stack .am-offices{max-width:760px;}

@media (max-width:760px){
.am-contact__stack .am-form{padding:clamp(18px,4vw,24px);}
.am-form__foot{justify-items:stretch;}
.am-form__note{text-align:center;max-width:none;}
}


/* ============================================================
   Why Altminds: centred.
   With the six-reason column gone the copy hugged the left edge
   and left half the green band empty. One centred measure reads
   as deliberate, and matches the contact band below it.
   ============================================================ */
.am-why__grid--solo{justify-items:center;text-align:center;}
.am-why__grid--solo .am-why__intro{max-width:58ch;margin-inline:auto;}
body.am .am-why__grid--solo .am-why__intro h2{text-wrap:balance;margin-bottom:6px;}
body.am .am-why__grid--solo .am-why__intro p{margin-left:auto;margin-right:auto;max-width:56ch;text-wrap:pretty;}
body.am .am-why__grid--solo .am-why__intro p:last-of-type{margin-bottom:34px;}

@media (max-width:640px){
.am-why__grid--solo .am-why__intro{max-width:none;}
body.am .am-why__grid--solo .am-why__intro p{max-width:none;}
}


/* ============================================================
   Product marks in the Products menu.
   These are now the real app icons, so they are square tiles in
   each product's own colour rather than four versions of the
   same glyph. Rounded like an app icon, with a hairline ring so
   the white ERP tile has an edge against the cream panel.
   ============================================================ */
.am-nav__menu img{
	width:30px;height:30px;
	object-fit:cover;
	border-radius:8px;
	box-shadow:inset 0 0 0 1px rgba(31,42,32,.10),0 0 0 1px rgba(31,42,32,.07);
}
body.am .am-nav__menu a{gap:12px;}


/* ============================================================
   Contact: form on the left, addresses on the right.
   The heading stays centred across both, and below 980px the
   two simply stack again — form first, addresses under it.
   ============================================================ */
@media (min-width:981px){
.am-contact__stack{
	grid-template-columns:minmax(0,6fr) minmax(0,5fr);
	column-gap:clamp(32px,4vw,56px);
	align-items:start;justify-items:stretch;
}
.am-contact__stack > *{max-width:none;}
.am-contact__head{grid-column:1 / -1;max-width:760px;justify-self:center;}
.am-contact__stack .am-form{max-width:none;}
.am-contact__stack .am-offices{max-width:none;}
}

/* Side by side the right column is too narrow for two offices —
   the Singapore address broke over four lines. One under the
   other, each gets the full width and the dashed rule moves from
   between them to above. */
@media (min-width:981px){
.am-contact__stack .am-offices{grid-template-columns:1fr;gap:0;}
.am-contact__stack .am-offices .am-office + .am-office{
	padding-left:0;border-left:0;
	margin-top:22px;padding-top:22px;border-top:1px dashed #cfc5aa;
}
.am-contact__stack .am-office__tel{margin-top:14px;padding-top:0;}
}


/* ============================================================
   Footer: Facebook and Instagram.
   Two outlined round buttons under the app-store pair, in the
   same cream-on-green the rest of the footer uses. They open in
   a new tab, so the reader does not lose the page.
   ============================================================ */
.am-foot .am-social{display:flex;gap:10px;margin-top:clamp(16px,2vw,22px);padding:0;list-style:none;}
body.am .am-social a{
	display:inline-flex;align-items:center;justify-content:center;
	width:40px;height:40px;border-radius:999px;
	border:1px solid var(--green-line);
	color:var(--on-green-muted);text-decoration:none;
	transition:background-color .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
}
body.am .am-social a:hover,
body.am .am-social a:focus-visible{
	background:rgba(250,247,239,.10);
	border-color:var(--on-green);color:var(--on-green);
	transform:translateY(-1px);
}
body.am .am-social svg{display:block;}

@media (prefers-reduced-motion:reduce){
body.am .am-social a{transition:none;}
body.am .am-social a:hover{transform:none;}
}


/* ============================================================
   Contact form, second pass.
   The boxed fields are gone. Each field is now a single hairline
   that a green rule draws across on focus, the label lifts and
   turns green with it, and the fields arrive in sequence when the
   band scrolls in. Quieter at rest, and it tells you where you
   are while you fill it.
   ============================================================ */

/* --- Fields: rule, not box --- */
.am-contact__stack .am-field{position:relative;gap:4px;}
.am-contact__stack .am-field > span{
	font-size:11.5px;letter-spacing:.08em;
	transition:color .25s ease,transform .3s cubic-bezier(.2,.8,.2,1);
	transform-origin:left bottom;
}
.am-contact__stack .am-field:focus-within > span{color:var(--green);transform:translateY(-1px);}

.am-contact__stack .am-field input,
.am-contact__stack .am-field select,
.am-contact__stack .am-field textarea{
	background-color:transparent;
	border:0;border-bottom:1px solid var(--line);
	border-radius:0;
	padding:9px 2px;
	box-shadow:none;
	transition:border-color .25s ease,background-color .25s ease;
}
.am-contact__stack .am-field textarea{min-height:92px;padding-bottom:12px;}
.am-contact__stack .am-field select{padding-right:26px;background-position:calc(100% - 9px) 50%,calc(100% - 4px) 50%;}

.am-contact__stack .am-field input:hover,
.am-contact__stack .am-field select:hover,
.am-contact__stack .am-field textarea:hover{border-bottom-color:color-mix(in srgb,var(--green) 55%,var(--line));}
.am-contact__stack .am-field input:focus,
.am-contact__stack .am-field select:focus,
.am-contact__stack .am-field textarea:focus{
	outline:none;border-bottom-color:var(--line);
	box-shadow:none;background-color:color-mix(in srgb,var(--green) 4%,transparent);
}

/* The green rule that draws across the field on focus. */
.am-contact__stack .am-field::after{
	content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
	background:var(--green);border-radius:2px;
	transform:scaleX(0);transform-origin:left;
	transition:transform .38s cubic-bezier(.2,.85,.25,1);
	pointer-events:none;
}
.am-contact__stack .am-field:focus-within::after{transform:scaleX(1);}

/* Once something is in it, the rule stays — faintly. */
.am-contact__stack .am-field input:not(:placeholder-shown),
.am-contact__stack .am-field textarea:not(:placeholder-shown){border-bottom-color:color-mix(in srgb,var(--green) 70%,var(--line));}

.am-contact__stack .am-field input:user-invalid,
.am-contact__stack .am-field textarea:user-invalid{border-bottom-color:#b4543f;}
.am-contact__stack .am-field:has(:user-invalid)::after{background:#b4543f;}

/* --- The send button carries an arrow now --- */
.am-form__send{gap:0;}
.am-form__send::after{
	content:"\2192";margin-left:10px;display:inline-block;
	transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.am-form__send:hover::after{transform:translateX(5px);}
.am-form.is-sending .am-form__send::after{animation:am-send-go 1s ease-in-out infinite;}
@keyframes am-send-go{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}

/* --- Fields arrive in sequence with the card --- */
.am-motion .am-form.rv .am-form__row,
.am-motion .am-form.rv > .am-field,
.am-motion .am-form.rv .am-form__foot{
	opacity:0;transform:translateY(14px);
	transition:opacity .55s ease,transform .6s cubic-bezier(.2,.8,.2,1);
}
.am-form.is-in .am-form__row,
.am-form.is-in > .am-field,
.am-form.is-in .am-form__foot,
.am-motion .am-form.rv.is-in .am-form__row,
.am-motion .am-form.rv.is-in > .am-field,
.am-motion .am-form.rv.is-in .am-form__foot{opacity:1;transform:none;}
.am-form.is-in .am-form__row:nth-of-type(1){transition-delay:.10s;}
.am-form.is-in .am-form__row:nth-of-type(2){transition-delay:.20s;}
.am-form.is-in > .am-field{transition-delay:.30s;}
.am-form.is-in .am-form__foot{transition-delay:.40s;}

@media (max-width:600px){
.am-contact__stack .am-field input,
.am-contact__stack .am-field select,
.am-contact__stack .am-field textarea{font-size:16px;}
}

@media (prefers-reduced-motion:reduce){
.am-contact__stack .am-field::after{transition:none;}
.am-form__send::after{transition:none;}
.am-form.is-sending .am-form__send::after{animation:none;}
.am-motion .am-form.rv .am-form__row,
.am-motion .am-form.rv > .am-field,
.am-motion .am-form.rv .am-form__foot{opacity:1;transform:none;transition:none;}
}


/* ============================================================
   Contact: the two cards end level.
   They used to be 37px apart at the foot. Both now stretch to
   the taller one; the message field takes up the slack on the
   left, and the email address sits at the foot of the card on
   the right. Each side arrives its own way — the form rises
   field by field, the addresses come in from the right.
   ============================================================ */
@media (min-width:981px){
.am-contact__stack{align-items:stretch;}

/* Left: the message field absorbs whatever height is spare. */
.am-contact__stack .am-form{grid-template-rows:auto auto minmax(0,1fr) auto;}
.am-contact__stack .am-form > .am-field{min-height:0;}
.am-contact__stack .am-field textarea{height:100%;min-height:92px;}
/* The address column runs to the same height, so the two dashed
   rules beside it end level with the form on every page. */
.am-contact__stack .am-offices{align-self:stretch;}

/* Right: stack the offices, email last and hard against the foot. */
.am-contact__stack .am-offices{display:flex;flex-direction:column;}
.am-contact__stack .am-mail{margin-top:auto;}
}

/* --- The addresses arrive from the right, one after the other,
       so the two halves do not animate identically. --- */
.am-motion .am-offices.rv .am-office{
	opacity:0;transform:translateX(20px);
	transition:opacity .6s ease,transform .66s cubic-bezier(.2,.8,.2,1);
}
.am-motion .am-offices.rv .am-mail{
	opacity:0;transform:translateY(12px);
	transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1);
}
.am-motion .am-offices.rv.is-in .am-office,
.am-motion .am-offices.rv.is-in .am-mail{opacity:1;transform:none;}
.am-motion .am-offices.rv.is-in .am-office:nth-of-type(1){transition-delay:.14s;}
.am-motion .am-offices.rv.is-in .am-office:nth-of-type(2){transition-delay:.28s;}
.am-motion .am-offices.rv.is-in .am-mail{transition-delay:.42s;}

@media (prefers-reduced-motion:reduce){
.am-motion .am-offices.rv .am-office,
.am-motion .am-offices.rv .am-mail{opacity:1;transform:none;transition:none;}
}


/* ============================================================
   Social buttons in their own brand colours.
   Facebook blue and the Instagram gradient, on every page, so
   they read as the real marks rather than two outlines.
   ============================================================ */
body.am .am-foot .am-social a{border-color:transparent;color:#fff;}
body.am .am-foot .am-social a[href*="facebook"]{background:#1877f2;}
body.am .am-foot .am-social a[href*="instagram"]{
	background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285aeb 90%);
}
body.am .am-foot .am-social a:hover,
body.am .am-foot .am-social a:focus-visible{
	border-color:transparent;color:#fff;
	transform:translateY(-2px);
	box-shadow:0 6px 16px -6px rgba(0,0,0,.45);
}


/* ============================================================
   Message box back to a sensible height.
   Letting it swallow all the spare height made it a tall empty
   well. The rows now share the slack evenly instead, so the two
   cards still end level and nothing looks stretched.
   And the two halves arrive from opposite sides: the form from
   the left, the addresses from the right.
   ============================================================ */
@media (min-width:981px){
.am-contact__stack .am-form{grid-template-rows:auto auto auto auto;align-content:space-between;}
.am-contact__stack .am-field textarea{height:92px;min-height:92px;}
}

.am-motion .am-form.rv .am-form__row,
.am-motion .am-form.rv > .am-field,
.am-motion .am-form.rv .am-form__foot{transform:translateX(-22px);}
.am-motion .am-offices.rv .am-mail{transform:translateX(20px);}

@media (prefers-reduced-motion:reduce){
.am-motion .am-form.rv .am-form__row,
.am-motion .am-form.rv > .am-field,
.am-motion .am-form.rv .am-form__foot,
.am-motion .am-offices.rv .am-mail{transform:none;}
}


/* ============================================================
   Form typography, and every field now required.
   Labels are set smaller and wider-tracked so they read as
   labels; the answers themselves are a size up and a weight
   heavier, so what you type is the loudest thing in the card.
   ============================================================ */
.am-contact__stack .am-field > span{
	font-size:10.5px;font-weight:700;letter-spacing:.13em;
	color:color-mix(in srgb,var(--ink) 58%,transparent);
}
.am-contact__stack .am-field:focus-within > span{color:var(--green);}
.am-field em{font-size:.95em;color:var(--accent-deep);opacity:.9;}

.am-contact__stack .am-field input,
.am-contact__stack .am-field select,
.am-contact__stack .am-field textarea{
	font-size:16px;font-weight:500;line-height:1.5;
	letter-spacing:-0.004em;color:var(--ink);
	padding:10px 2px;
}
.am-contact__stack .am-field input[type="tel"]{font-variant-numeric:tabular-nums;letter-spacing:.01em;}
.am-contact__stack .am-field textarea{line-height:1.6;}
.am-field input::placeholder,
.am-field textarea::placeholder{
	font-weight:400;font-size:15px;
	color:color-mix(in srgb,var(--muted) 52%,transparent);
}
/* The select shows its prompt in the placeholder tone until a
   product is actually chosen. */
.am-contact__stack .am-field select:invalid{color:color-mix(in srgb,var(--muted) 62%,transparent);font-weight:400;font-size:15px;}
.am-contact__stack .am-field select option{color:var(--ink);font-weight:500;}
.am-contact__stack .am-field select:user-invalid{border-bottom-color:#b4543f;}

.am-form__note{font-size:13.5px;line-height:1.55;letter-spacing:-0.002em;}
.am-form__send{font-size:15.5px;font-weight:600;letter-spacing:.005em;}

@media (max-width:600px){
.am-contact__stack .am-field input,
.am-contact__stack .am-field select,
.am-contact__stack .am-field textarea{font-size:16px;}
}


/* ============================================================
   The philosophy line, marked.
   It is the sentence the company is built on, so it is lifted
   out of the paragraph: full cream instead of the muted body
   tone, heavier, and sitting on a warm highlight that follows
   it across a line break.
   ============================================================ */
body.am .am-why__quote{
	font-weight:600;
	color:var(--on-green);
	background:color-mix(in srgb,var(--accent) 26%,transparent);
	box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 26%,transparent);
	border-radius:3px;
	letter-spacing:.005em;
	-webkit-box-decoration-break:clone;
	box-decoration-break:clone;
}


/* ============================================================
   Footer base line.
   The copyright now sits above the dashed rule and centred, so
   the footer closes on a centred line rather than trailing off
   to the left underneath it.
   ============================================================ */
.am-foot__base{
	border-top:0;
	border-bottom:1px dashed var(--green-line);
	padding-block:22px 18px;
	text-align:center;
}
.am-foot__base p{margin:0;}
body.am .am-social svg{display:block;}


/* ============================================================
   Why Altminds: the six reasons are back.
   They sit under the centred intro rather than beside it, two
   across on a wide screen, so the band keeps the centred shape
   it has now and the reasons read as a list, left aligned.
   ============================================================ */
.am-why__grid--solo .am-why__list{
	text-align:left;
	width:100%;max-width:980px;
	margin-top:clamp(30px,4vw,50px);
	column-gap:clamp(32px,4vw,56px);
}
.am-why__grid--solo .am-why__intro{margin-bottom:0;}
body.am .am-why__grid--solo .am-why__intro p:last-of-type{margin-bottom:30px;}
.am-why__list dt{letter-spacing:-0.005em;}
.am-why__list dd{max-width:44ch;}

@media (max-width:860px){
.am-why__grid--solo .am-why__list{max-width:none;}
.am-why__list dd{max-width:none;}
}


/* ============================================================
   Why Altminds: reasons left, the story right.
   The six reasons take the wide left column and the intro sits
   beside them on the right, held in place while they scroll
   past. The reasons come in from the left one after another;
   the intro arrives from the right, so the two sides read as
   two separate movements.
   DOM order is intro first, so the columns are placed rather
   than reordered — the intro still comes first for a reader
   without CSS.
   ============================================================ */
@media (min-width:901px){
.am-why__grid--solo{
	grid-template-columns:minmax(0,7fr) minmax(0,4.4fr);
	column-gap:clamp(36px,4.6vw,72px);
	align-items:start;justify-items:stretch;text-align:left;
}
.am-why__grid--solo .am-why__intro{
	grid-column:2;grid-row:1;
	max-width:none;text-align:left;margin:0;
	position:sticky;top:clamp(96px,11vh,128px);
}
.am-why__grid--solo .am-why__list{
	grid-column:1;grid-row:1;
	max-width:none;width:100%;margin-top:0;
	text-align:left;
}
body.am .am-why__grid--solo .am-why__intro p{margin-left:0;margin-right:0;max-width:42ch;}
body.am .am-why__grid--solo .am-why__intro h2{text-align:left;}
.am-why__list dd{max-width:none;}
}

/* --- The reasons slide in from the left, in turn --- */
.am-motion .am-why__list > .rv{
	opacity:0;transform:translateX(-26px);
	transition:opacity .6s ease,transform .68s cubic-bezier(.2,.8,.2,1);
}
.am-motion .am-why__list > .rv.is-in{opacity:1;transform:none;}
.am-motion .am-why__list > .rv:nth-child(1).is-in{transition-delay:.04s;}
.am-motion .am-why__list > .rv:nth-child(2).is-in{transition-delay:.12s;}
.am-motion .am-why__list > .rv:nth-child(3).is-in{transition-delay:.20s;}
.am-motion .am-why__list > .rv:nth-child(4).is-in{transition-delay:.28s;}
.am-motion .am-why__list > .rv:nth-child(5).is-in{transition-delay:.36s;}
.am-motion .am-why__list > .rv:nth-child(6).is-in{transition-delay:.44s;}

/* --- The intro comes the other way --- */
.am-motion .am-why__intro.rv{
	opacity:0;transform:translateX(26px);
	transition:opacity .7s ease,transform .75s cubic-bezier(.2,.8,.2,1);
}
.am-motion .am-why__intro.rv.is-in{opacity:1;transform:none;}

@media (prefers-reduced-motion:reduce){
.am-motion .am-why__list > .rv,
.am-motion .am-why__intro.rv{opacity:1;transform:none;transition:none;}
}


/* ============================================================
   Why Altminds, calmer.
   Two columns of six short blocks read as clutter. The reasons
   are one numbered column now — number, heading, line — with a
   single hairline between each, so the eye goes straight down
   instead of hunting around a grid.
   The numbers come from a CSS counter, so the markup is
   untouched and they renumber themselves if the list changes.
   ============================================================ */
.am-why__list{counter-reset:am-why;}
.am-why__list > div{
	counter-increment:am-why;
	display:grid;
	grid-template-columns:auto minmax(0,1fr);
	column-gap:clamp(16px,2vw,28px);
	align-items:start;
	padding:clamp(20px,2.3vw,28px) 0;
	border-top:1px solid var(--green-line);
}
.am-why__list > div:first-child{border-top:0;padding-top:0;}

.am-why__list > div::before{
	content:counter(am-why,decimal-leading-zero);
	grid-column:1;grid-row:1 / span 2;
	font-size:clamp(19px,2vw,26px);font-weight:700;line-height:1.05;
	color:var(--accent);opacity:.7;
	font-variant-numeric:tabular-nums;
	padding-top:1px;
}
.am-why__list dt{grid-column:2;grid-row:1;font-size:17.5px;}
.am-why__list dt::before{content:none;display:none;}
.am-why__list dd{grid-column:2;grid-row:2;margin-top:7px;max-width:52ch;font-size:15.5px;line-height:1.62;}

@media (min-width:901px){
.am-why__grid--solo{grid-template-columns:minmax(0,6.2fr) minmax(0,5fr);}
.am-why__grid--solo .am-why__list{grid-template-columns:1fr;gap:0;}
}
@media (max-width:900px){
.am-why__list{grid-template-columns:1fr;gap:0;}
}

/* --- Rows rise in turn; the numeral follows a beat later --- */
.am-motion .am-why__list > .rv{
	opacity:0;transform:translateY(18px);
	transition:opacity .6s ease,transform .66s cubic-bezier(.2,.8,.2,1);
}
.am-motion .am-why__list > .rv.is-in{opacity:1;transform:none;}
.am-motion .am-why__list > .rv:nth-child(1).is-in{transition-delay:.04s;}
.am-motion .am-why__list > .rv:nth-child(2).is-in{transition-delay:.12s;}
.am-motion .am-why__list > .rv:nth-child(3).is-in{transition-delay:.20s;}
.am-motion .am-why__list > .rv:nth-child(4).is-in{transition-delay:.28s;}
.am-motion .am-why__list > .rv:nth-child(5).is-in{transition-delay:.36s;}
.am-motion .am-why__list > .rv:nth-child(6).is-in{transition-delay:.44s;}
.am-motion .am-why__list > .rv::before{
	opacity:0;transform:translateX(-8px);
	transition:opacity .5s ease,transform .55s cubic-bezier(.2,.8,.2,1);
	transition-delay:.16s;
}
.am-motion .am-why__list > .rv.is-in::before{opacity:.7;transform:none;}

/* --- The intro simply rises, so the two sides do not mirror --- */
.am-motion .am-why__intro.rv{
	opacity:0;transform:translateY(24px);
	transition:opacity .7s ease,transform .78s cubic-bezier(.2,.8,.2,1);
}
.am-motion .am-why__intro.rv.is-in{opacity:1;transform:none;}

@media (prefers-reduced-motion:reduce){
.am-motion .am-why__list > .rv,
.am-motion .am-why__list > .rv::before,
.am-motion .am-why__intro.rv{opacity:1;transform:none;transition:none;}
.am-motion .am-why__list > .rv::before{opacity:.7;}
}


/* ============================================================
   Social marks, proper.
   Facebook blue, the Instagram gradient and LinkedIn blue, each
   with its own white glyph. Classes rather than href matching,
   so the colour does not depend on the link.
   ============================================================ */
body.am .am-foot .am-social a{border-color:transparent;color:#fff;}
body.am .am-foot .am-social a.am-social__fb{background:#1877f2;}
body.am .am-foot .am-social a.am-social__li{background:#0a66c2;}
body.am .am-foot .am-social a.am-social__ig{
	background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285aeb 90%);
}
body.am .am-foot .am-social a:hover,
body.am .am-foot .am-social a:focus-visible{
	border-color:transparent;color:#fff;
	transform:translateY(-2px);
	box-shadow:0 6px 16px -6px rgba(0,0,0,.45);
}


/* ============================================================
   Book a demo, in place.
   The demo buttons on the product pages used to throw the
   reader back to the home page. They now open the same form
   over the page they are already reading, with that product
   already chosen. Without JS the buttons still follow their
   href, so nothing is lost.
   ============================================================ */
.am-modal{
	width:min(640px,calc(100vw - 32px));max-width:none;
	max-height:calc(100vh - 48px);
	padding:0;border:0;border-radius:16px;
	background:transparent;overflow:visible;
	color:var(--ink);
}
.am-modal::backdrop{background:rgba(23,33,24,.55);backdrop-filter:blur(3px);}
.am-modal__box{
	position:relative;
	max-height:calc(100vh - 48px);overflow:auto;
	background:var(--surface);
	border:1px solid var(--line);border-radius:16px;
	box-shadow:0 40px 90px -30px rgba(23,33,24,.6);
	padding:clamp(22px,3.4vw,38px);
	text-align:left;
}
/* The box borrows the contact stylesheet for its fields, so the
   band styling that comes with it has to be switched off here. */
.am-modal__box.am-contact{background:var(--surface);padding-block:clamp(22px,3.4vw,38px);}
.am-modal__box.am-contact .am-form{
	background:transparent;border:0;box-shadow:none;padding:0;border-radius:0;
}
body.am .am-modal__title{margin:0;font-size:clamp(23px,2.6vw,30px);line-height:1.15;color:var(--green-deep);letter-spacing:-0.02em;}
body.am .am-modal__lead{margin:10px 0 clamp(18px,2.4vw,26px);font-size:16px;line-height:1.6;color:var(--muted);max-width:46ch;}

.am-modal__x{
	position:absolute;top:10px;right:10px;
	width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;
	border:0;border-radius:999px;background:transparent;color:var(--muted);
	font-size:26px;line-height:1;cursor:pointer;
	transition:background-color .18s ease,color .18s ease;
}
.am-modal__x:hover,.am-modal__x:focus-visible{background:var(--bg-2);color:var(--ink);}

/* Opening move: the box lifts in, the backdrop washes in behind. */
@media (prefers-reduced-motion:no-preference){
.am-modal[open]{animation:am-modal-in .28s cubic-bezier(.2,.8,.2,1);}
.am-modal[open]::backdrop{animation:am-modal-fade .28s ease;}
}
@keyframes am-modal-in{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@keyframes am-modal-fade{from{opacity:0}to{opacity:1}}

@media (max-width:600px){
.am-modal{width:calc(100vw - 20px);}
.am-modal__box{padding:22px 18px;}
.am-modal__x{top:6px;right:6px;}
}


/* ============================================================
   Social marks, flat.
   The brand-coloured discs are gone. These are the plain
   monochrome glyphs, set in cream on the green footer with a
   hairline ring, so they sit with the app-store buttons above
   them instead of shouting over the whole footer.
   ============================================================ */
body.am .am-foot .am-social a,
body.am .am-foot .am-social a.am-social__fb,
body.am .am-foot .am-social a.am-social__ig,
body.am .am-foot .am-social a.am-social__li{
	background:none;
	border:1px solid var(--green-line);
	color:var(--on-green);
}
body.am .am-foot .am-social a:hover,
body.am .am-foot .am-social a:focus-visible{
	background:rgba(250,247,239,.12);
	border-color:var(--on-green);
	color:var(--on-green);
	transform:translateY(-2px);
	box-shadow:none;
}


/* ============================================================
   Footer base row: social on the left, copyright on the right.
   The two sit on one line facing each other, with the dashed
   rule under them. On a phone they stack and centre.
   ============================================================ */
.am-foot__base{
	display:flex;align-items:center;justify-content:space-between;
	gap:16px 24px;flex-wrap:wrap;
	text-align:left;
}
.am-foot__base p{margin:0;margin-left:auto;text-align:right;}
.am-foot .am-foot__base .am-social{margin:0;}

@media (max-width:600px){
.am-foot__base{justify-content:center;text-align:center;}
.am-foot__base p{margin-left:0;text-align:center;width:100%;}
.am-foot .am-foot__base .am-social{justify-content:center;width:100%;}
}


/* ============================================================
   Footer base row: room to breathe.
   The social icons were sitting right under the column above
   them, and the dashed rule ran flush with the bottom of the
   page. Both now have space around them.
   ============================================================ */
.am-foot__base{
	margin-top:clamp(14px,1.6vw,22px);
	padding-top:clamp(14px,1.4vw,18px);
	padding-bottom:clamp(18px,1.8vw,22px);
}
.am-foot{padding-bottom:18px;}

@media (max-width:600px){
.am-foot__base{margin-top:14px;padding-top:16px;padding-bottom:18px;gap:14px;}
.am-foot{padding-bottom:14px;}
}


/* ============================================================
   Contact block, matched to the Contact Us page.
   The address card carries each office's registered name, and
   sales and support get a card of their own under them.
   ============================================================ */
.am-contact__stack .am-office__co{
	margin:0 0 6px;font-size:14px;font-weight:600;letter-spacing:.01em;color:var(--ink);
}
.am-contact__stack .am-office--mail .am-office__addr{font-size:14.5px;color:var(--muted);line-height:1.55;}
.am-contact__stack .am-office--mail .am-mail{
	grid-column:auto;margin:12px 0 0;padding-top:0;border-top:0;
	font-size:17px;text-align:left;
}
@media (min-width:981px){
.am-contact__stack .am-offices .am-office + .am-office{margin-top:20px;padding-top:20px;}
.am-contact__stack .am-mail{margin-top:12px;}
}
@media (max-width:980px){
.am-contact__stack .am-offices{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:600px){
.am-contact__stack .am-offices{grid-template-columns:1fr;}
}


/* The address card grew to four blocks, so stretching the form to
   match it spread the rows far apart. The two columns now keep
   their own height and the form keeps its own rhythm. */
@media (min-width:981px){
.am-contact__stack{align-items:start;}
.am-contact__stack .am-form{align-content:start;grid-template-rows:none;}
.am-contact__stack .am-field textarea{height:92px;}
}


/* Alt Screens card colours. */
.am-app--screens{--app:#2bb3f3;--app-deep:#1489c6;--app-bg:#2bb3f3;--app-ink:#ffffff;--app-muted:#dff2fe;--app-chip-bg:#ffffff;--app-chip-ink:#1079b2;}
body.am .am-app--screens .am-btn--app{background:#1079b2;color:#ffffff;}
body.am .am-app--screens .am-btn--app:hover{background:#0b5f8d;opacity:1;}


/* Alt Screens card: the three shots are different shapes, so they
   share one box and fill it, which keeps the row even and stops
   the card ending in empty space. */
/* Alt Screens shots follow the same box as the other wide cards. */


/* Alt Screens card: the three figures line up on the same rule,
   whatever the caption does, and the shots keep one width. */


/* Alt Screens: room under the shots before the tag rail. */


/* The address card ends on one email line. */
.am-mail span{display:block;font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:rgba(31,42,32,.55);margin-bottom:5px;}
.am-contact__stack .am-mail{grid-column:1 / -1;margin:0;padding-top:20px;border-top:1px dashed var(--line);text-align:center;font-size:20px;font-weight:600;}
@media (min-width:981px){.am-contact__stack .am-mail{margin-top:20px;text-align:left;}}

/* The popup form keeps the same card size as the page forms:
   a 514px field column (516 card minus its 1px borders), so Name/Company sit at 248px there too. */
.am-modal__box.am-contact .am-form{max-width:514px;margin-inline:auto;}
.am-modal__box.am-contact .am-modal__title,.am-modal__box.am-contact .am-modal__lead{max-width:514px;margin-inline:auto;}
.am-modal__box.am-contact .am-modal__lead{margin-top:10px;}


/* ============================================================
   Five cards in the deck, not four.
   Alt Screens joined the stack, which left the last card with no
   sticky top (so it slid over the pinned card above it) and the
   fourth with no margin left to scroll through. The ledge now
   steps down five times, and the margin steps down with it so
   every card still arrives after the same amount of scroll.
   ============================================================ */
@media (min-width:1001px){
.am-stack__card:nth-child(1){top:36px;margin-bottom:120px;}
.am-stack__card:nth-child(2){top:66px;margin-bottom:90px;}
.am-stack__card:nth-child(3){top:96px;margin-bottom:60px;}
.am-stack__card:nth-child(4){top:126px;margin-bottom:30px;}
.am-stack__card:nth-child(5){top:156px;margin-bottom:0;}
.am-stack__card:last-child{margin-bottom:0;}
.admin-bar .am-stack__card:nth-child(1){top:68px;}
.admin-bar .am-stack__card:nth-child(2){top:98px;}
.admin-bar .am-stack__card:nth-child(3){top:128px;}
.admin-bar .am-stack__card:nth-child(4){top:158px;}
.admin-bar .am-stack__card:nth-child(5){top:188px;}
}
/* Short screens keep a smaller ledge so the fifth card still lands
   inside the fold. */
@media (min-width:1001px) and (max-height:760px){
.am-stack__card:nth-child(1){top:24px;}
.am-stack__card:nth-child(2){top:42px;}
.am-stack__card:nth-child(3){top:60px;}
.am-stack__card:nth-child(4){top:78px;}
.am-stack__card:nth-child(5){top:96px;}
.admin-bar .am-stack__card:nth-child(1){top:56px;}
.admin-bar .am-stack__card:nth-child(2){top:74px;}
.admin-bar .am-stack__card:nth-child(3){top:92px;}
.admin-bar .am-stack__card:nth-child(4){top:110px;}
.admin-bar .am-stack__card:nth-child(5){top:128px;}
}

/* The last card has no gap after it, so without a tail on the deck it
   unpins the moment it lands. This keeps it on screen long enough to
   be read before the section moves on. */
@media (min-width:1001px){
/* The dwell has to sit after the card, not on it: a sticky grid item
   cannot move beyond its own margin box, so the room goes to the deck
   as an extra empty row. */
.am-stack__card:nth-child(5),.am-stack__card:last-child{margin-bottom:0;}
.am-stack::after{content:"";display:block;height:clamp(140px,26vh,240px);}
}


/* ============================================================
   One form height everywhere.
   The Contact Us form carries a reCAPTCHA and the home one does
   not, which left the home card ending ~125px above the address
   beside it. The card now takes the full height of its row and
   the message box absorbs the difference, so both pages show a
   form of the same height, level with the address card.
   ============================================================ */
@media (min-width:981px){
/* The form keeps the Contact Us metrics exactly (message box 92px);
   only the address column grows to meet it, so the two cards end
   level without either one being stretched out of shape. */
.am-contact__stack .am-field textarea{height:92px;min-height:92px;}
/* The address column runs to the same height, so the two dashed
   rules beside it end level with the form on every page. */
.am-contact__stack .am-offices{align-self:stretch;}
}


/* ---- The home form now carries the same reCAPTCHA as the Contact Us
   page, so the two forms are identical: same fields, same checkbox,
   same height. The box arrives with the rest of the form. ---- */
.am-contact__stack .am-form__captcha{margin-top:2px;}
.am-contact__stack .am-form__captcha .g-recaptcha{display:inline-block;}
.am-motion .am-contact__stack .am-form.rv > .am-form__captcha{opacity:0;transform:translateX(-22px);transition:opacity .7s ease,transform .75s cubic-bezier(.2,.8,.2,1);}
.am-motion .am-contact__stack .am-form.rv.is-in > .am-form__captcha{opacity:1;transform:none;transition-delay:.35s;}
@media (max-width:420px){
.am-contact__stack .am-form__captcha{transform-origin:left top;scale:.92;}
}
@media (prefers-reduced-motion:reduce){
.am-motion .am-contact__stack .am-form.rv > .am-form__captcha{opacity:1;transform:none;transition:none;}
}


/* ---- The address column, matched line for line to the Contact Us
   page so both pages read the same and the two cards come out the
   same height. ---- */
.am-contact__stack .am-office h3{font-size:18px;line-height:1.2;margin:0 0 8px;}
.am-contact__stack .am-office__co{line-height:1.5;}
.am-contact__stack .am-office__addr{margin-top:0;line-height:1.55;}
.am-contact__stack .am-office__tel{margin-top:18px;line-height:1.5;}
.am-contact__stack .am-office__tel li + li{margin-top:6px;}
.am-contact__stack .am-offices .am-office + .am-office{margin-top:22px;padding-top:22px;}