/**
 * ALLOut Security — Single product page.
 *
 * Numbers here are measured from the design handoff, not chosen. Where the
 * handoff gives a value, that value is what is written.
 *
 * SCOPING. Every selector sits under `.aos-product`. This sheet shares a page
 * with BeTheme, the customer portal and WP-Client, and BeTheme's own rules are
 * frequently more specific than a single class — `.column_column ul` beats
 * `.aos-product__benefits` on its own. Where a rule below looks over-qualified,
 * that is why, and it is deliberate.
 *
 * ═══════════════════════════════════════════════════════════════════════════
 * CONTENT WIDTH COMES FROM `.container`. NEVER FROM THIS FILE.
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * The pattern is: the section is full-bleed and carries the background; a child
 * carrying `.container` holds the content. The navy Get started band is the
 * clearest example — the colour runs edge to edge, the copy lines up with every
 * other section on the site.
 *
 * NOT max-width, NOT margin: 0 auto, and above all NOT horizontal padding. The
 * live mobile gutter is 33px and it is set on `.container` in a generated
 * stylesheet that is not in this repository. A wrapper that carries `.container`
 * and then declares its own `padding: 0 24px` overrides that gutter and the
 * content goes flush to the glass on a phone — invisible on a desktop browser
 * above about 616px, which is where it gets missed.
 *
 * Hand-rolling the width also drifts. This template did it — 1200px and 24px,
 * copied from the design handoff — and the result was content that sat a few
 * pixels off from every neighbouring section, on a page that shares its layout
 * with the theme's own. One source of truth, and it is the theme's.
 *
 * So: `.aos-product__container` is a hook for the rules in this file. It is
 * always written alongside `.container` in the markup, and the theme decides how
 * wide it is.
 *
 * TOKENS. Colours, shadows and the container width come from the design system
 * (ALLOut Blocks, assets/css/design-base.css) and none are redefined here. The
 * two radius tokens ARE overridden, on the wrapper rather than on :root, because
 * this template is a 4px template and the handoff says so explicitly.
 *
 * EVERY var() CARRIES A FALLBACK, and that is not belt-and-braces. A custom
 * property that was never defined does not fall back to an inherited value — the
 * whole declaration is thrown away, silently. This template shipped asking for
 * --navy-100, --border-default and --shadow-xs, all three named in the handoff's
 * palette and none of them actually present in design-base.css. The result was
 * step copy on the navy band rendering in whatever colour it inherited, benefit
 * rows with no divider, and cards with no shadow — three bugs with no error
 * anywhere, found by reading the page rather than by anything failing.
 *
 * The tokens have since been added. The fallbacks stay: this stylesheet loads on
 * pages the plugin may not have printed its base CSS on, and a second copy of the
 * palette in the fallback slot is cheap compared with invisible text.
 *
 * @author ALLOut Security
 * @link   https://alloutsecurity.com
 */

.aos-product {
	/*
	 * The handoff sets these on :root. Doing that here would restyle every
	 * other block on any page this template shares, so they are set on the
	 * wrapper — same effect for this page, no reach beyond it.
	 */
	--radius-md: 4px;
	--radius-lg: 4px;
}

/* -----------------------------------------------------------------------
 * Shared shell
 * -------------------------------------------------------------------- */

/* WIDTH IS THE THEME'S JOB. See the file header — `.aos-product__container` is
   a hook for the rules below and nothing else. It sets no width, no centring and
   above all no horizontal padding; every element carrying it also carries
   `.container`, and that is what decides how wide the content is. */
.aos-product .aos-product__container {
	width: 100%;
}

/* THE CLEARFIX HAS TO GO WHERE WE CHANGE `display`.
   `.container:after` is a real box — be.css:818 gives it `content:" "`,
   `display:block` and `width:100%`. On a block wrapper that is invisible and
   does its job of containing floats. On a FLEX wrapper it becomes a flex item,
   so the sticky bar gains a phantom child and one more 28px gap after the last
   jump link. On a GRID wrapper it becomes a grid item, so the label-column
   layout gains a third cell that wraps to a second row and adds a 56px gap of
   nothing beneath every Overview and Benefits section.
   Removed only on the two wrappers whose display we change, and only because
   neither contains a float for it to clear. */
.aos-product .aos-product__bar-inner.container::after,
.aos-product .aos-product__split.container::after {
	display: none;
}

.aos-product .aos-product__section {
	background: #fff;
	padding: 52px 0 54px;
}

.aos-product .aos-product__section--tint {
	background: var(--gray-50, #F7F8FB);
	border-top: 1px solid var(--border-subtle, #E3E7EF);
	border-bottom: 1px solid var(--border-subtle, #E3E7EF);
	padding: 44px 0 50px;
}

.aos-product .aos-product__section--navy {
	background: var(--navy-900, #081634);
	padding: 52px 0 56px;
}

/* Red at 700. The section headings are the page's accent — the red is what the
   eye finds when it scans, and the weight is what the old pages carried. 600 was
   tried and put back. Written as the palette token rather than the hex it
   resolves to, so a change to the red changes these with everything else. The
   --light variant below still wins on the navy band, where red on navy would not
   carry. */
.aos-product .aos-product__h2 {
	margin: 0;
	font-family: var(--font-display, 'Poppins'), sans-serif;
	font-weight: 700;
	font-size: 26px;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--red-500, #E8323F);
}

.aos-product .aos-product__h2--wide {
	margin: 0 0 22px;
}

.aos-product .aos-product__h2--light {
	color: #fff;
	margin: 0 0 26px;
}

/* Visually hidden, still read aloud. Used by the table marks. */
.aos-product .aos-product__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	white-space: nowrap;
	border: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
}

.aos-product a:focus-visible,
.aos-product button:focus-visible {
	outline: 2px solid #2b4fc9;
	outline-offset: 2px;
}

/* -----------------------------------------------------------------------
 * Section 3 — sticky product bar
 * -------------------------------------------------------------------- */

.aos-product .aos-product__bar {
	position: sticky;
	top: 0;
	z-index: 20;
	background: #fff;
	border-bottom: 1px solid var(--border-subtle, #E3E7EF);
}

/* The bar itself is full-bleed so its white background and hairline reach the
   edges; this row carries `.container` and holds the content in line with every
   other section. No width or padding here — same reason as above. */
.aos-product .aos-product__bar-inner {
	height: 70px;
	display: flex;
	align-items: center;
	gap: 28px;
	/*
	 * The bar scrolls itself rather than widening the page. Paired with
	 * min-width:0 on the nav so the flex item is allowed to be narrower than
	 * its content — without that, this overflow moves to the page and every
	 * breakpoint gains a horizontal scrollbar.
	 */
	overflow-x: auto;
	scrollbar-width: none;
}

.aos-product .aos-product__bar-inner::-webkit-scrollbar {
	display: none;
}

.aos-product .aos-product__lockup {
	flex: none;
	align-self: stretch;
	display: flex;
	align-items: center;
	gap: 12px;
	padding-right: 26px;
	border-right: 1px solid var(--border-subtle, #E3E7EF);
}

/* 60px inside a 70px bar. The icon is the product's own artwork and reads as
   the thing it is at that size; at 42px it was a decoration beside the name.
   The two numbers are a pair — the bar has 5px of air above and below the icon,
   so neither moves far without the other. */
.aos-product .aos-product__lockup-icon {
	width: 60px;
	height: auto;
	flex: none;
}

.aos-product .aos-product__lockup-name {
	font-family: var(--font-display, 'Poppins'), sans-serif;
	font-weight: 700;
	font-size: 17px;
	color: var(--text-strong, #14224A);
	white-space: nowrap;
}

.aos-product .aos-product__jump {
	display: flex;
	align-items: center;
	gap: 28px;
	min-width: 0;
}

.aos-product .aos-product__jump-link {
	font-size: 13.5px;
	font-weight: 700;
	color: var(--navy-700, #14224A);
	text-decoration: none;
	white-space: nowrap;
}

.aos-product .aos-product__jump-link:hover,
.aos-product .aos-product__jump-link:focus {
	color: var(--red-600, #D11F2C);
}

/* -----------------------------------------------------------------------
 * Sections 4, 5 and 6 — the label column
 *
 * Their bodies must all start on the same x. One grid, used three times.
 *
 * Key Features and Related Products are NOT in this list, whatever is inside
 * them: the design lays those two full width with the heading above the body,
 * and that is a property of the block rather than of its contents.
 * -------------------------------------------------------------------- */

.aos-product .aos-product__split {
	display: grid;
	grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
	gap: 56px;
	align-items: start;
}

.aos-product .aos-product__prose {
	max-width: 780px;
}

.aos-product .aos-product__prose p {
	margin: 0 0 16px;
	font-size: 17px;
	line-height: 1.6;
	color: var(--text-body, #3E4658);
	text-wrap: pretty;
}

.aos-product .aos-product__prose p:last-child {
	margin: 0;
}

/* -----------------------------------------------------------------------
 * Section 4 — the overview's own markup
 *
 * The field takes real HTML and always did; this sheet only ever styled `p`.
 * Everything else — a list, a subheading, a link, a table pasted out of the old
 * page — arrived with no rule of its own, so BeTheme styled it instead, and
 * `.column_column ul` is more specific than anything a single class can say.
 * That is the whole of "the markup does not work".
 *
 * These rules are qualified with `.aos-product__prose` on purpose: two classes
 * plus an element beats BeTheme's descendant selectors without resorting to
 * !important, and they reach nothing outside this one block of copy.
 * -------------------------------------------------------------------- */

/*
 * The overview's prose sits in the right-hand column of a two-column grid, so it
 * is already measured. Key Features is full width by design, and text there has
 * nothing else holding it in — 780px of copy under a full-width heading reads as
 * a column that lost its neighbour. Same rules, no measure.
 */
.aos-product .aos-product__prose--wide {
	max-width: none;
}

.aos-product .aos-product__prose > *:first-child {
	margin-top: 0;
}

.aos-product .aos-product__prose > *:last-child {
	margin-bottom: 0;
}

.aos-product .aos-product__prose h2,
.aos-product .aos-product__prose h3,
.aos-product .aos-product__prose h4 {
	margin: 26px 0 10px;
	font-family: var(--font-display, 'Poppins'), sans-serif;
	font-weight: 700;
	line-height: 1.25;
	color: var(--text-strong, #14224A);
}

.aos-product .aos-product__prose h2 { font-size: 21px; }
.aos-product .aos-product__prose h3 { font-size: 18px; }
.aos-product .aos-product__prose h4 { font-size: 16px; }

.aos-product .aos-product__prose ul,
.aos-product .aos-product__prose ol {
	margin: 0 0 16px;
	padding: 0 0 0 22px;
	font-size: 17px;
	line-height: 1.6;
	color: var(--text-body, #3E4658);
}

.aos-product .aos-product__prose ul { list-style: disc; }
.aos-product .aos-product__prose ol { list-style: decimal; }

.aos-product .aos-product__prose li {
	margin: 0 0 7px;
	padding: 0;
	background: none;   /* BeTheme draws list bullets as a background image */
}

.aos-product .aos-product__prose li:last-child {
	margin-bottom: 0;
}

.aos-product .aos-product__prose strong,
.aos-product .aos-product__prose b {
	font-weight: 800;
	color: var(--text-strong, #14224A);
}

.aos-product .aos-product__prose a {
	color: var(--red-500, #E8323F);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.aos-product .aos-product__prose a:hover {
	color: var(--red-600, #D11F2C);
}

.aos-product .aos-product__prose img {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius-md, 4px);
}

/* A table pasted into the overview is not the comparison table and must not
   inherit its chrome — but it still has to stay inside the column on a phone. */
.aos-product .aos-product__prose table {
	display: block;
	width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
	margin: 0 0 16px;
	font-size: 15px;
}

.aos-product .aos-product__prose th,
.aos-product .aos-product__prose td {
	padding: 8px 12px;
	border: 1px solid var(--border-subtle, #E3E7EF);
	text-align: left;
	vertical-align: top;
}

.aos-product .aos-product__prose blockquote {
	margin: 0 0 16px;
	padding: 4px 0 4px 16px;
	border-left: 3px solid var(--red-500, #E8323F);
	color: var(--text-body, #3E4658);
}

/* -----------------------------------------------------------------------
 * Section 5 — modules
 *
 * The ringed icons the old World page carried under its overview. A flex row
 * rather than a grid: three modules should sit together at the start of the
 * line, not stretch to fill thirds of it, and a fourth should wrap under the
 * first rather than resize the other three.
 * -------------------------------------------------------------------- */

.aos-product .aos-product__modules {
	display: flex;
	flex-wrap: wrap;
	gap: 34px 44px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.aos-product .aos-product__module {
	margin: 0;
	padding: 0;
	background: none;   /* as above: BeTheme's bullet is a background image */
	list-style: none;
}

.aos-product .aos-product__module-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	width: 132px;
	text-decoration: none;
	color: inherit;
}

/*
 * The icon speaks for itself, at the size it was drawn.
 *
 * This started as a drawn ring — a 2px red border on a fixed 92px circle with
 * the icon scaled to 46px inside it — replacing the red-outline PNG the old page
 * used per module. The border and both fixed sizes were taken back out by hand:
 * the product icons are already circular artwork at 128px, so a ring around them
 * was a second circle round a circle, and scaling them to 46px threw away most
 * of what makes them readable.
 *
 * What is left is a backdrop, not a ring. No width, no height — the box takes
 * the icon's own size — and the border-radius with the white fill only matter
 * where the artwork is transparent behind its edge. The hover tint below still
 * lands on it, which is why it stays a box at all rather than being deleted.
 *
 * The only number left anywhere near this is the 132px link width — 112px on a
 * phone — which is what puts three modules on a row and two on a handset. The
 * icon fits inside that on its own, through max-width rather than through a
 * second set of pixel sizes that would have to be kept in step with it.
 */
.aos-product .aos-product__module-ring {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #fff;
	transition: background-color 0.18s ease, box-shadow 0.18s ease;
}

.aos-product .aos-product__module-icon {
	max-width: 100%;
	height: auto;
	object-fit: contain;
}

.aos-product .aos-product__module-name {
	font-family: var(--font-display, 'Poppins'), sans-serif;
	font-weight: 700;
	font-size: 15px;
	line-height: 1.3;
	text-align: center;
	color: var(--text-strong, #14224A);
	text-wrap: balance;
}

/* Hover and focus belong to the anchor only — a module with no link is a label
   and must not pretend otherwise. */
.aos-product a.aos-product__module-link:hover .aos-product__module-ring,
.aos-product a.aos-product__module-link:focus-visible .aos-product__module-ring {
	background: rgba(232, 50, 63, 0.06);
	box-shadow: var(--shadow-xs, 0 1px 2px rgba(8,22,52,.04));
}

.aos-product a.aos-product__module-link:hover .aos-product__module-name {
	color: var(--red-500, #E8323F);
}

.aos-product a.aos-product__module-link:focus-visible {
	outline: 2px solid var(--red-500, #E8323F);
	outline-offset: 4px;
	border-radius: var(--radius-md, 4px);
}

/* -----------------------------------------------------------------------
 * Section 6 — benefits
 * -------------------------------------------------------------------- */

.aos-product .aos-product__benefits {
	max-width: 780px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.aos-product .aos-product__benefit {
	display: grid;
	grid-template-columns: 34px 1fr;
	gap: 0 18px;
	align-items: baseline;
	padding: 14px 0;
	border-bottom: 1px solid var(--border-default, #D6DBE6);
	margin: 0;
	list-style: none;
}

.aos-product .aos-product__benefit:last-child {
	border-bottom: 0;
}

.aos-product .aos-product__benefit-num {
	font-family: var(--font-display, 'Poppins'), sans-serif;
	font-weight: 800;
	font-size: 12px;
	letter-spacing: 0.06em;
	color: var(--red-600, #D11F2C);
}

.aos-product .aos-product__benefit-text {
	font-size: 17px;
	line-height: 1.5;
	font-weight: 500;
	color: var(--navy-700, #14224A);
	text-wrap: pretty;
}

/* -----------------------------------------------------------------------
 * Section 7 — key features table
 * -------------------------------------------------------------------- */

.aos-product .aos-product__table-shell {
	border: 1px solid var(--border-subtle, #E3E7EF);
	border-radius: var(--radius-md, 4px);
	overflow: hidden;
	box-shadow: var(--shadow-card, 0 4px 16px rgba(14,28,64,.08));
	background: #fff;
}

.aos-product .aos-product__table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
	margin: 0;
	/* The theme gives every bare table a 5px radius and a 15px bottom margin.
	   The rounding on this one belongs to the shell, which is the element that
	   clips it — leaving the table its own would round a corner inside a corner
	   at a different radius from the rest of the page. */
	border-radius: 0;
}

/*
 * BETHEME STYLES BARE `table`, `th` AND `td`, AND IT REACHES IN HERE.
 *
 * Nothing else on this page is at risk — every other rule in this file is a
 * two-class selector on a class only we use, and the theme has no rule that
 * out-ranks one. The table is the exception, because the theme styles the
 * ELEMENTS, and an element rule wins any property this file does not set:
 *
 *   table th, table td   1px solid borders on every cell   be.css:3866
 *   table th             an inset shadow and #f9f9f9       be.css:3867
 *   table tr:first-child td   another inset shadow         be.css:3869
 *   table tr:nth-child(2n) td faint striping               be.css:3870
 *   table                border-radius: 5px                be.css:3865
 *
 * `border-color` is never set with them, so the borders take `currentColor` —
 * white lines across the navy header, navy lines through the body. And the row
 * NAME cells are `th`, not `td`, so they were picking up the header shadow too.
 * The striping landed on the middle column alone, because that is the only one
 * with no background of its own: the effect is a table that looks half-finished
 * rather than one that looks wrong, which is why it survived review.
 *
 * Cleared explicitly instead of raising every rule to out-specify each of them
 * one at a time. Specificity here is (0,2,1) — enough to beat all five, since a
 * pseudo-class counts as a class and `tr:nth-child(2n) td` is only (0,1,3) —
 * and the cell rules below are scoped through .aos-product__table to reach
 * (0,3,0), so they win against THIS block rather than against the theme.
 *
 * The one BeTheme rule that still outranks all of it is
 * `body.table-hover:not(.woocommerce-page) table tr:hover td` at (0,3,4), which
 * sets a transition and nothing else. Left alone deliberately.
 */
.aos-product .aos-product__table th,
.aos-product .aos-product__table td {
	border: 0;
	background: none;
	box-shadow: none;
	border-radius: 0;
	vertical-align: middle;
}

.aos-product .aos-product__table .aos-product__th {
	background: var(--navy-900, #081634);
	margin: 0;
}

.aos-product .aos-product__table .aos-product__th--feature {
	width: 38%;
	text-align: left;
	padding: 15px 20px;
	color: #fff;
	font-family: var(--font-display, 'Poppins'), sans-serif;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.02em;
}

.aos-product .aos-product__table .aos-product__th--std {
	width: 31%;
	text-align: center;
	padding: 15px 18px;
	color: var(--navy-200, #A9B7D6);
	font-family: var(--font-body, 'Mulish'), sans-serif;
	font-weight: 800;
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.aos-product .aos-product__table .aos-product__th--ours {
	width: 31%;
	text-align: center;
	padding: 15px 18px;
	background: var(--navy-800, #0E1C40);
	color: #fff;
	font-family: var(--font-body, 'Mulish'), sans-serif;
	font-weight: 800;
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	border-top: 3px solid var(--red-500, #E8323F);
}

.aos-product .aos-product__table tbody tr {
	border-top: 1px solid var(--border-subtle, #E3E7EF);
}

.aos-product .aos-product__table .aos-product__cell-name {
	padding: 14px 20px;
	text-align: left;
	font-size: 14.5px;
	font-weight: 700;
	color: var(--navy-700, #14224A);
	background: transparent;
}

.aos-product .aos-product__table .aos-product__cell-mark {
	padding: 14px 18px;
	text-align: center;
	font-size: 20px;
	line-height: 1;
}

/*
 * --gray-400 on white is the design's own choice for the "standard JDE cannot"
 * mark. It clears AA only under the large-text exemption, which a 20px/700
 * glyph qualifies for — and the cell also carries the word in text for anyone
 * who is not reading the glyph.
 */
.aos-product .aos-product__table .aos-product__cell-mark--std {
	color: var(--gray-400, #AAB2C4);
	font-weight: 700;
}

.aos-product .aos-product__table .aos-product__cell-mark--ours {
	color: var(--red-500, #E8323F);
	font-weight: 800;
	background: rgba(232, 50, 63, 0.04);
	border-left: 1px solid var(--border-subtle, #E3E7EF);
}

/*
 * A cell that says something instead of ticking.
 *
 * "Only 9.3+" against standard JD Edwards and "7.3+" against ALLOut is a real
 * row on the World table, and the difference between them is the point of it.
 * The type is smaller than a glyph and heavier, so a row of words does not read
 * as louder than the rows of marks around it, and it keeps the column colour it
 * is standing in — grey-blue on the left, red on the right — so the eye still
 * groups the two columns the way the marks do.
 *
 * The gray-400 the mark uses is too light to carry actual words at 14.5px: it
 * only clears AA under the large-text exemption, which a glyph qualifies for and
 * this does not. The standard column therefore darkens to navy-700 for text.
 */
.aos-product .aos-product__table .aos-product__cell-note {
	display: inline-block;
	font-size: 14.5px;
	line-height: 1.35;
	font-weight: 700;
	letter-spacing: 0;
}

.aos-product .aos-product__table .aos-product__cell-mark--std .aos-product__cell-note {
	color: var(--navy-700, #14224A);
}

.aos-product .aos-product__table .aos-product__cell-mark--ours .aos-product__cell-note {
	color: var(--red-500, #E8323F);
	font-weight: 800;
}

/* -----------------------------------------------------------------------
 * Section 8 — related products
 *
 * EVERY CARD IS THE SAME WIDTH, WHATEVER ROW IT LANDS ON.
 *
 * This was flex — `flex: 1 1 280px` with `max-width: 380px` — on the reasoning
 * that the max-width would stop a card alone on the last row stretching across
 * the page. It stops it stretching all the way, and nothing more: with four
 * cards in a 931px column the first three share the line at 297px each and the
 * fourth grows to its 380px ceiling on a line of its own. Three cards one size
 * and a fourth 28% wider, which reads as a mistake because it is one.
 *
 * A grid of fixed tracks cannot do that. `auto-fill` — not `auto-fit` — keeps
 * the empty tracks on a short row, so the lone fourth card occupies one track
 * of exactly the width the three above it have, and the rest of the line stays
 * empty. That is what the max-width was reaching for.
 *
 * No max-width now: the track governs the width, and capping the card below its
 * own track would only strand it against the left of an empty space.
 *
 * THE TRACK IS 340px AND NOT 280px BECAUSE OF WHAT IS IN IT. The card is not a
 * box of text: 26px of padding each side, then the name competing for the line
 * with a 52px icon and an 18px gap beside it. At a 280px track that left about
 * 163px for the name, and "SecurityPlus" at 21px Poppins very nearly fills it —
 * so the products whose names are a word longer wrapped onto a second line and
 * the row of cards stopped matching. 340px leaves room for the names that
 * actually exist rather than for the shortest one.
 * -------------------------------------------------------------------- */

.aos-product .aos-product__cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
	gap: 20px;
	align-items: stretch;
}

.aos-product .aos-product__card {
	min-width: 0;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--border-subtle, #E3E7EF);
	border-radius: var(--radius-md, 4px);
	padding: 28px 26px 22px;
	box-shadow: var(--shadow-xs, 0 1px 2px rgba(8,22,52,.04));
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.aos-product .aos-product__card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-card, 0 4px 16px rgba(14,28,64,.08));
}

.aos-product .aos-product__card-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 18px;
	margin-bottom: 24px;
}

.aos-product .aos-product__card-id {
	min-width: 0;
	display: block;
}

.aos-product .aos-product__card-eyebrow {
	display: block;
	margin-bottom: 8px;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--red-600, #D11F2C);
}

.aos-product .aos-product__card-name {
	display: block;
	font-family: var(--font-display, 'Poppins'), sans-serif;
	font-weight: 700;
	font-size: 21px;
	line-height: 1.2;
	color: var(--text-strong, #14224A);
}

.aos-product .aos-product__card-icon {
	width: 52px;
	height: auto;
	flex: none;
}

.aos-product .aos-product__card-foot {
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	border-top: 1px solid var(--border-subtle, #E3E7EF);
	padding-top: 16px;
	font-size: 14px;
	font-weight: 700;
	color: var(--navy-700, #14224A);
}

.aos-product .aos-product__card-foot .aos-i {
	color: var(--red-600, #D11F2C);
	flex: none;
}

/* -----------------------------------------------------------------------
 * Section 9 — get started
 * -------------------------------------------------------------------- */

.aos-product .aos-product__steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 28px;
}

.aos-product .aos-product__step-num {
	display: block;
	font-family: var(--font-display, 'Poppins'), sans-serif;
	font-weight: 800;
	font-size: 34px;
	line-height: 1;
	color: var(--red-400, #F0555F);
	margin-bottom: 18px;
}

.aos-product .aos-product__step-title {
	margin: 0 0 10px;
	font-family: var(--font-display, 'Poppins'), sans-serif;
	font-weight: 700;
	font-size: 19px;
	line-height: 1.25;
	color: #fff;
}

/*
 * 16px on a navy band, and it stays 16px. The audience is corporate IT and
 * audit staff, skewing older; this is the one block on the page where the type
 * size is an accessibility decision rather than a visual one.
 */
.aos-product .aos-product__step-body {
	margin: 0;
	font-family: var(--font-body, 'Mulish'), sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: var(--navy-100, #D6DEEC);
	text-wrap: pretty;
}

.aos-product .aos-product__actions {
	margin-top: 32px;
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.aos-product .aos-product__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 18px;
	border-radius: var(--radius-md, 4px);
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	border: 1.5px solid rgba(255, 255, 255, 0.5);
	box-shadow: none;
	font-family: var(--font-body, 'Mulish'), sans-serif;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.aos-product .aos-product__btn:hover {
	background: rgba(255, 255, 255, 0.18);
	border-color: rgba(255, 255, 255, 0.8);
	color: #fff;
}

/* -----------------------------------------------------------------------
 * Narrow screens
 *
 * The handoff flags two things that genuinely need a breakpoint. Everything
 * else reflows on its own through flex-wrap and auto-fit.
 * -------------------------------------------------------------------- */

@media (max-width: 760px) {

	/*
	 * The label column squeezes the body before it gives up its own 260px, so
	 * below this it stacks: heading above copy, tighter gap.
	 */
	.aos-product .aos-product__split {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

	.aos-product .aos-product__section {
		padding: 40px 0 42px;
	}

	.aos-product .aos-product__section--tint,
	.aos-product .aos-product__section--navy {
		padding: 36px 0 40px;
	}
}

@media (max-width: 640px) {

	/*
	 * A fixed-layout table with a 38% first column runs out of room here. It
	 * scrolls inside its own shell rather than being allowed to widen the page.
	 */
	.aos-product .aos-product__table-shell {
		overflow-x: auto;
	}

	.aos-product .aos-product__table {
		min-width: 520px;
	}

	/*
	 * Two modules to a row on a phone, not one.
	 *
	 * At 132px an item plus the 44px gap needs 308px, and the live mobile gutter
	 * leaves about 254px on a 320px screen — so the row breaks after every single
	 * module and a set of three becomes a column three screens tall. 112px and a
	 * 24px gap fit two across with room to spare.
	 */
	.aos-product .aos-product__modules {
		gap: 26px 24px;
	}

	.aos-product .aos-product__module-link {
		width: 112px;
	}

	/*
	 * No sizes here either, for the same reason they came out above: the icon is
	 * artwork and it is shown at the size it was drawn. The 112px link width is
	 * what keeps two to a row, and `max-width: 100%` is what keeps a 128px icon
	 * inside it — the icon shrinks because the column is narrow, not because a
	 * number in a media query said 40px.
	 */

}