/*
 * ALLOut Security — Resource Gate.
 *
 * The lead-capture state of a gated resource: the form on the left, the locked
 * player on the right. Enqueued by functions/resource-gate.php, on gated single
 * posts only, and only while the visitor is actually locked out — an entitled
 * visitor gets the video and never downloads this file.
 *
 * SCOPE. Everything is under `.aos-gate`. Nothing here can reach the header, the
 * footer, the page header band or any other form on the site, which is what makes
 * it safe to enqueue site-wide later if briefs and white papers follow.
 *
 * WHY THIS IS A FILE AND NOT INLINE CSS IN THE SHORTCODE.
 * A shortcode's inline <style> lands mid-document, after BeTheme's stylesheets, so
 * it wins ties on document order — but it also means the CSS is re-sent on every
 * request and can never be cached. This is enqueued with `style` (the child
 * stylesheet) as a dependency instead, which puts it after BeTheme AND after
 * style.css in the head. Ties are still won; the file is cached.
 *
 * SPECIFICITY IS DELIBERATE, NOT DEFENSIVE HABIT.
 * BeTheme styles bare `button`, `p`, `a`, `input` and `.column_column ul` directly.
 * A single-class rule loses to `.column_column ul` even though it looks stronger to
 * read, so selectors here carry the `.aos-gate` root and, in the Gravity Forms
 * section, `.gform_wrapper` as well. Where an !important appears it is because
 * Gravity Forms' own stylesheet uses one on that property; nowhere else.
 *
 * NO HERO IS STYLED HERE, ON PURPOSE.
 * The design handoff draws a navy hero with breadcrumb, eyebrow, title and excerpt.
 * The page already has one — includes/content-singwebinars.php prints BeBuilder
 * header 1464, or stands down for an ALLOut Blocks Page Header, above this content.
 * Rendering the handoff's hero as well is two header bands stacked on one page, the
 * exact fault allout_block_header_placed() exists to prevent. The eyebrow survives
 * as the small red-ruled label above the form card.
 *
 * FONTS. Poppins and Mulish are self-hosted by ALLOut Blocks and printed by
 * Allout_Blocks_Design::base_style(), which the renderer emits ahead of this
 * markup. They are NOT imported from fonts.googleapis.com — the theme dequeues
 * every Google Fonts stylesheet and strips the dns-prefetch hint, and the site's
 * CSP sends font-src 'self', so a remote font URL is refused by the browser
 * whatever the CSS asks for. The stacks below fall back to the system faces if
 * ALLOut Blocks is off, which is the only thing lost in that case.
 *
 * @package Betheme Child Theme
 * @author  ALLOut Security
 * @link    https://alloutsecurity.com
 */

/* ==========================================================================
   0. SCOPE + TOKENS

   Declared locally rather than read from :root. ALLOut Blocks puts its tokens on
   `.aos-blk` and prints them inside the first block that renders — this page is
   not a block and cannot rely on one having rendered above it. Same arrangement
   as portal-hub.css and the trial tooltip. Values are the design system's own,
   kept in step by hand.
   ========================================================================== */

.aos-gate{
	--aos-red-300:#F58E97;
	--aos-red-400:#F0555F;
	--aos-red-500:#E8323F;
	--aos-red-600:#D11F2C;
	--aos-red-700:#AE1822;

	--aos-navy-200:#A9B7D6;
	--aos-navy-700:#14224A;
	--aos-navy-900:#081634;

	--aos-blue-500:#2B4FC9;
	--aos-blue-600:#081634;

	--aos-gray-200:#E3E7EF;
	--aos-gray-300:#D2D8E4;
	--aos-gray-400:#AAB2C4;
	--aos-gray-500:#7B8499;
	--aos-gray-700:#3E4658;

	--aos-font-display:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
	--aos-font-body:'Mulish',system-ui,-apple-system,'Segoe UI',sans-serif;

	--aos-radius-card:4px;    /* form card — squared per sign-off */
	--aos-radius-media:4px;  /* video panel */
	--aos-radius-control:8px;

	--aos-shadow-card:0 4px 16px rgba(14,28,64,.08);
	--aos-shadow-focus:0 0 0 3px rgba(61,99,216,.35);
	--aos-shadow-primary:0 2px 8px rgba(232,50,63,.28);

	/* No --aos-shell / --aos-gutter here on purpose. This block does not set its
	   own horizontal insets at all — the surrounding container owns the sides.
	   @see the layout note below. */

	font-family:var(--aos-font-body);
	color:var(--aos-gray-700);
}

.aos-gate,
.aos-gate *,
.aos-gate *::before,
.aos-gate *::after{box-sizing:border-box;}


/* ==========================================================================
   1. LAYOUT — two columns, form first

   The collapse needs no media query:
     repeat(auto-fit, minmax(min(100%, 400px), 1fr))
   Two tracks while each can hold 400px, one below that.

   The min(100%, …) is what stops the track overflowing a narrow viewport. Do NOT
   simplify it to minmax(400px, 1fr) — that reintroduces sideways scrolling on
   phones, which is what the auto-fit was chosen to avoid.

   NO HORIZONTAL SHELL OF ITS OWN. The gate is placed by a shortcode, so it always
   renders inside a builder section that already carries the theme's container —
   including the 33px mobile gutter that comes from a generated stylesheet not in
   this repository. Setting a max-width, auto margins or side padding here stacks
   a second set of insets on top of that one, which is why the block used to sit
   visibly narrower than everything around it.

   So: vertical rhythm only. The sides belong to whatever the page wraps this in,
   on every breakpoint.
   ========================================================================== */

.aos-gate__body{
	padding:30px 0 40px;
}

/* The builder column the gate is dropped into.
 *
 * `.form-wrapper-gate` is a class added by hand to the BeBuilder column on the
 * page — it is not emitted by any template in this theme, so it matches nothing
 * until someone puts it there. BeTheme gives every .mcb-column-inner a bottom
 * margin for stacking; directly above the gate that reads as dead space on top
 * of the padding above.
 *
 * THE ONE RULE IN THIS FILE NOT UNDER `.aos-gate`. The file header says
 * everything is scoped to that root, and this is the deliberate exception: the
 * element being corrected is the theme's wrapper AROUND the gate, which the gate
 * root cannot reach from inside. The custom class keeps the blast radius to
 * columns somebody has explicitly marked.
 *
 * Desktop only, per the 899px line every other breakpoint in this file uses. On
 * phones the columns stack and that margin is the gap between them — removing it
 * there would run the gate straight into whatever sits above.
 */
@media (min-width:900px){
	.form-wrapper-gate .mcb-column-inner{
		margin:0;
	}
}

.aos-gate__cols{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));
	gap:clamp(30px,4vw,52px);
	align-items:start;
}

.aos-gate__col{min-width:0;}


/* ==========================================================================
   2. EYEBROW

   All that survives of the handoff's hero. The short red rule before it is a
   ::before, not markup. Uppercasing is done here, so the label is written in
   sentence case in PHP and reads properly to a screen reader.
   ========================================================================== */

.aos-gate__eyebrow{
	display:flex;
	align-items:center;
	gap:10px;
	margin:0 0 12px;
	font-size:11px;
	font-weight:800;
	letter-spacing:.14em;
	text-transform:uppercase;
	color:var(--aos-red-600);
}

.aos-gate__eyebrow::before{
	content:'';
	flex:none;
	width:22px;
	height:2px;
	border-radius:2px;
	background:var(--aos-red-500);
}


/* ==========================================================================
   3. FORM CARD
   ========================================================================== */

.aos-gate__card{
	background:#fff;
	border:1px solid var(--aos-gray-200);
	border-radius:var(--aos-radius-card);
	box-shadow:var(--aos-shadow-card);
	padding:clamp(22px,3vw,30px);
}

/* Card radius is 4px while the media panel is 12px. That difference is
   deliberate, and there is no red top accent on this card — it was drawn, then
   cut at sign-off. */

.aos-gate__card-title{
	font-family:var(--aos-font-display);
	font-size:clamp(19px,2vw,23px);
	line-height:1.25;
	font-weight:700;
	letter-spacing:-.012em;
	color:var(--aos-navy-700);
	margin:0 0 7px;
	text-wrap:pretty;
}

.aos-gate__card-sub{
	font-size:13.5px;
	line-height:1.55;
	color:var(--aos-gray-500);
	margin:0 0 24px;
}

.aos-gate__card-sub a,
.aos-gate__fine a{color: #de494b;text-decoration:none;font-weight: 500;}

.aos-gate__card-sub a:hover,
.aos-gate__fine a:hover{color:var(--aos-blue-600);text-decoration:underline;}

.aos-gate__req{color:var(--aos-red-600);}

.aos-gate__fine{
	font-size:11.5px;
	line-height:1.5;
	color:var(--aos-gray-500);
}


/* ==========================================================================
   4. LOCKED PLAYER

   A fixed 16:9 box holding poster, scrim and lock. It is a static panel, not a
   control: there is nothing to click, because the form beside it is the way in.
   The play glyph inside the ring says what is behind the lock, and the ring is a
   <span>, so nothing here is a focus stop.
   ========================================================================== */

.aos-gate__media{
	border:1px solid var(--aos-gray-200);
	border-radius:var(--aos-radius-media);
	background:var(--aos-navy-900);
	overflow:hidden;
	box-shadow:var(--aos-shadow-card);
}

.aos-gate__frame{
	position:relative;
	aspect-ratio:16/9;
	display:flex;
	align-items:center;
	justify-content:center;
}

/* object-fit: cover crops from the centre. Featured images below 16:9 are
   cropped, not letterboxed — upload at 1600×900 or larger. */
.aos-gate__poster{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
	margin:0;
	border-radius:0;
}

/* Darkens the poster so the lock label stays legible over any image. */
.aos-gate__scrim{
	position:absolute;
	inset:0;
	background:linear-gradient(180deg,rgba(8,22,52,.5) 0%,rgba(8,22,52,.78) 100%);
}

.aos-gate__lock{
	position:relative;
	z-index:1;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:13px;
	text-align:center;
	padding:0 16px;
}

.aos-gate__lock-ring{
	display:flex;
	align-items:center;
	justify-content:center;
	width:62px;
	height:62px;
	border-radius:50%;
	background:rgba(255,255,255,.12);
	border:1px solid rgba(255,255,255,.28);
}

.aos-gate__lock-label{
	font-size:11.5px;
	font-weight:800;
	letter-spacing:.13em;
	text-transform:uppercase;
	color:#fff;
}


/* ==========================================================================
   5. GRAVITY FORMS MAPPING

   Gravity Forms renders the fields; everything below makes its markup look like
   the reference form in the handoff. Assumes GF 2.5+ (gform_wrapper /
   gform_fields / gfield), which is what the site runs, and the `orbital` theme
   that functions/gravity-forms/ui.php forces site-wide.

   The !important flags in this section are answering GF's own — its grid, field
   margins and choice-list resets are declared with them, and a plain rule loses
   to them regardless of specificity.
   ========================================================================== */

.aos-gate .gform_wrapper{margin:0;}

/* GF ships its own grid and per-field margins. Neutralise both, then re-impose
   the card's gap rhythm — so reordering fields in the form editor can never
   break the spacing. */
.aos-gate .gform_wrapper .gform_fields{
	display:grid !important;
	grid-template-columns:repeat(2,1fr) !important;
	gap:18px !important;
	grid-column-gap:18px !important;
}

.aos-gate .gform_wrapper .gfield{
	/* margin:0 !important; */
	/* padding:0 !important; */
	/* grid-column:1/-1; */
	/* min-width:0; */
}

/* HALF-WIDTH FIELDS — two on one row.

   Three class names are honoured so this works whichever way the form was built:
     .gfield--width-half  GF 2.5+ "Field Width" setting (nothing to type)
     .gf_left_half / .gf_right_half  the legacy ready classes
     .aos-half            the custom class named in the design handoff
   With none of them set every field is full width, which is a plain layout, not
   a broken one. */
.aos-gate .gform_wrapper .gfield--width-half,
.aos-gate .gform_wrapper .gfield.gf_left_half,
.aos-gate .gform_wrapper .gfield.gf_right_half,
.aos-gate .gform_wrapper .gfield.aos-half{grid-column:span 1;}

@media (max-width:479px){
	.aos-gate .gform_wrapper .gform_fields{grid-template-columns:1fr !important;}
	.aos-gate .gform_wrapper .gfield{grid-column:1/-1 !important;}
}

/* Labels */
.aos-gate .gform_wrapper .gfield_label,
.aos-gate .gform_wrapper legend.gfield_label{
	display: block !important;
	font-family:var(--aos-font-body);
	font-size: 13px !important;
	font-weight: 700 !important;
	color:var(--aos-navy-700);
	margin: 0 0 6px !important;
	padding: 0 !important;
}

.aos-gate .gform_wrapper .gfield_required{color:var(--aos-red-600);}
.aos-gate .gform_wrapper .gfield_required_text{display:none;}

/* Text inputs */
.aos-gate .gform_wrapper input[type="text"],
.aos-gate .gform_wrapper input[type="email"],
.aos-gate .gform_wrapper input[type="tel"],
.aos-gate .gform_wrapper input[type="url"],
.aos-gate .gform_wrapper input[type="number"],
.aos-gate .gform_wrapper select,
.aos-gate .gform_wrapper textarea{
	width:100%;
	max-width:100%;
	font-family:var(--aos-font-body);
	font-size:15px;
	line-height:1.4;
	color:var(--aos-navy-700);
	background:#fff;
	border:1px solid var(--aos-gray-300);
	border-radius:var(--aos-radius-control);
	padding:12px 14px;
	transition:border-color .15s ease,box-shadow .15s ease;
}

.aos-gate .gform_wrapper input::placeholder,
.aos-gate .gform_wrapper textarea::placeholder{color:var(--aos-gray-400);}

.aos-gate .gform_wrapper input[type="text"]:hover,
.aos-gate .gform_wrapper input[type="email"]:hover,
.aos-gate .gform_wrapper input[type="tel"]:hover,
.aos-gate .gform_wrapper select:hover,
.aos-gate .gform_wrapper textarea:hover{border-color:var(--aos-gray-400);}

.aos-gate .gform_wrapper input:focus,
.aos-gate .gform_wrapper select:focus,
.aos-gate .gform_wrapper textarea:focus{
	outline:none;
	border-color:var(--aos-blue-500);
	box-shadow:var(--aos-shadow-focus);
}

/* Name and other complex fields: sub-inputs side by side, sub-labels off — the
   placeholders carry the meaning. If a sub-field has no placeholder set in the
   form editor it renders as a blank box, so set them. */
.aos-gate .gform_wrapper .ginput_complex{
	display:grid !important;
	grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr)) !important;
	gap:14px !important;
}

.aos-gate .gform_wrapper .ginput_complex > span{
	padding:0 !important;
	margin:0 !important;
	min-width:0;
}

.aos-gate .gform_wrapper .ginput_complex label{display:none !important;}

/* Radio buttons drawn as selectable chips.

   The input stays a real radio — keyboard and screen-reader behaviour are
   untouched — and only the label around it is styled. GF renders the input and
   the label as siblings inside .gchoice, so the input is positioned over the
   label's left padding rather than moved in the DOM. */
.aos-gate .gform_wrapper .gfield_radio{
	display:flex !important;
	flex-wrap:wrap;
	gap:10px;
}

.aos-gate .gform_wrapper .gfield_radio .gchoice{
	position:relative;
	display:inline-flex;
	margin:0 !important;
}

.aos-gate .gform_wrapper .gfield_radio .gchoice input{
	position:absolute;
	left:16px;
	top:50%;
	transform:translateY(-50%);
	margin:0;
	width:15px;
	height:15px;
	accent-color:var(--aos-red-600);
}

.aos-gate .gform_wrapper .gfield_radio .gchoice label{
	display:inline-flex;
	align-items:center;
	margin:0;
	padding:10px 16px 10px 41px;
	background:#fff;
	border:1px solid var(--aos-gray-300);
	border-radius:var(--aos-radius-control);
	font-size:14.5px;
	font-weight:700;
	color:var(--aos-navy-700);
	cursor:pointer;
	transition:border-color .15s ease,color .15s ease;
}

.aos-gate .gform_wrapper .gfield_radio .gchoice label:hover{
	border-color:var(--aos-red-400);
	color:var(--aos-red-700);
}

.aos-gate .gform_wrapper .gfield_radio .gchoice:focus-within label{
	border-color:var(--aos-blue-500);
	box-shadow:var(--aos-shadow-focus);
}

/* :has() is progressive. Where it is unsupported the chip simply keeps its
   resting border while the radio dot still shows the selection — no visual
   break, and nothing else depends on it. */
.aos-gate .gform_wrapper .gfield_radio .gchoice:has(input:checked) label{
	border-color:var(--aos-red-500);
	color:var(--aos-red-700);
}

/* Consent + checkboxes */
.aos-gate .gform_wrapper input[type="checkbox"]{
	margin:3px 0 0;
	width:15px;
	height:15px;
	accent-color:var(--aos-red-600);
}

.aos-gate .gform_wrapper .gfield--type-consent .gchoice,
.aos-gate .gform_wrapper .gfield_checkbox .gchoice{
	display:grid;
	grid-template-columns:16px 1fr;
	gap:11px;
	align-items:start;
	margin:0;
}

.aos-gate .gform_wrapper .gfield--type-consent .gfield_consent_label,
.aos-gate .gform_wrapper .gfield--type-consent .gchoice label,
.aos-gate .gform_wrapper .gfield_checkbox .gchoice label{
	font-size:13.5px;
	font-weight:500;
	line-height:1.55;
	color:var(--aos-gray-500);
}

.aos-gate .gform_wrapper .gfield--type-consent a,
.aos-gate .gform_wrapper .gfield_checkbox a{color: #de494b;text-decoration:none;}

.aos-gate .gform_wrapper .gfield--type-consent a:hover,
.aos-gate .gform_wrapper .gfield_checkbox a:hover{color:var(--aos-blue-600);text-decoration:underline;}

/* SUBMIT BUTTON.

   The design system's primary fill is red-500 (#E8323F). This uses red-600
   (#D11F2C) instead — a deliberate carry-over from the ALLOut button-system
   handoff, where red-500 fails WCAG AA against white text and red-600 passes.
   Hover and active step down to red-700. If the button system is ever revised,
   this is the one value to re-sync.

   BeTheme styles bare `button` and `input[type=submit]`, hence the wrapper on
   every selector. */
.aos-gate .gform_wrapper .gform_footer{
	margin:18px 0 0;
	padding:0;
}

.aos-gate .gform_wrapper .gform_footer input[type="submit"],
.aos-gate .gform_wrapper .gform_footer button.gform_button,
.aos-gate .gform_wrapper .gform_button{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:100%;
	min-height:46px;
	padding:12px 22px;
	font-family:var(--aos-font-body);
	font-size:16px;
	font-weight:700;
	line-height:1;
	text-transform:none;
	letter-spacing:0;
	color:#fff;
	background:var(--aos-red-600);
	border:1px solid var(--aos-red-600);
	border-radius:var(--aos-radius-control);
	box-shadow:var(--aos-shadow-primary);
	cursor:pointer;
	transition:background .16s ease,border-color .16s ease,transform .16s ease;
}

.aos-gate .gform_wrapper .gform_footer input[type="submit"]:hover,
.aos-gate .gform_wrapper .gform_footer button.gform_button:hover,
.aos-gate .gform_wrapper .gform_button:hover{
	background:var(--aos-red-700);
	border-color:var(--aos-red-700);
	color:#fff;
}

.aos-gate .gform_wrapper .gform_footer input[type="submit"]:active,
.aos-gate .gform_wrapper .gform_button:active{transform:translateY(1px);}

.aos-gate .gform_wrapper .gform_footer input[type="submit"]:focus-visible,
.aos-gate .gform_wrapper .gform_button:focus-visible{
	outline:none;
	box-shadow:var(--aos-shadow-focus);
}

/* Validation */
.aos-gate .gform_wrapper .gfield_error input,
.aos-gate .gform_wrapper .gfield_error select,
.aos-gate .gform_wrapper .gfield_error textarea{border-color:var(--aos-red-500);}

.aos-gate .gform_wrapper .gfield_validation_message,
.aos-gate .gform_wrapper .validation_message{
	margin:6px 0 0;
	padding:0;
	border:0;
	background:none;
	font-size:12.5px;
	font-weight:600;
	color:var(--aos-red-700);
}

.aos-gate .gform_wrapper .gform_validation_errors{
	margin:0 0 18px;
	padding:12px 14px;
	border:1px solid var(--aos-red-300);
	border-radius:var(--aos-radius-control);
	background:#FFF1F2;
	box-shadow:none;
}

.aos-gate .gform_wrapper .gform_validation_errors h2,
.aos-gate .gform_wrapper .gform_validation_errors .gform_submission_error{
	font-family:var(--aos-font-body);
	font-size:13.5px;
	font-weight:700;
	color:var(--aos-red-700);
	margin:0;
}

/* GF's own legal note, where the form prints one */
.aos-gate .gform_wrapper .gform_fields + .gform_footer + .grecaptcha-note,
.aos-gate .gform_wrapper .gfield--type-captcha{
	font-size:11.5px;
	color:var(--aos-gray-500);
}

/* The confirmation GF swaps in after an AJAX submit, so the "thank you" does not
   land as unstyled text in the middle of the card. */
.aos-gate .gform_confirmation_wrapper{
	font-size:15px;
	line-height:1.6;
	color:var(--aos-gray-700);
}


/* ==========================================================================
   6. MOTION
   ========================================================================== */

@media (prefers-reduced-motion:reduce){
	.aos-gate *,
	.aos-gate *::before,
	.aos-gate *::after{
		transition:none !important;
		animation:none !important;
	}
}


/* ==========================================================================
   7. THE DOCUMENT PANEL

   The locked state of a gated download, as opposed to a gated video. Everything
   above is shared: the shell, the form card, the whole Gravity Forms mapping and
   the lock ring. Only what sits inside the panel changes.

   Written as a MODIFIER, not a replacement. .aos-gate__media--doc overrides the
   three properties of the video panel that are wrong for a document and inherits
   the rest, so the two panels cannot drift apart — restyle the media box above
   and both follow.

   WHY THE PANEL IS NOT 16:9. A PDF cover is portrait, roughly 1:1.414. Cropping
   one into a widescreen box with object-fit:cover takes the title off the top of
   it, which is the one part of a cover worth showing on a page that is asking
   somebody to fill in a form to read it. The frame stands up instead and the
   cover is contained, whole, on the navy ground.
   ========================================================================== */

/* The navy ground is inherited from .aos-gate__media — not restated here, so
   changing it there moves both panels. */

.aos-gate__media--doc .aos-gate__frame{
	aspect-ratio:auto;
	flex-direction:column;
	gap:22px;
	padding:clamp(26px,3.4vw,40px) clamp(20px,3vw,32px);
}

/* The cover sheet. max-height keeps a tall scan from pushing the panel past the
   form card beside it; the form is the taller of the two and should stay so. */
.aos-gate__cover{
	display:block;
	width:auto;
	max-width:min(100%,240px);
	max-height:330px;
	object-fit:contain;
	margin:0;
	border-radius:2px;
	box-shadow:0 10px 30px rgba(0,0,0,.34);
}

/* Static, like the video panel's — the form is the way in, so there is nothing
   here to click and nothing to tab to. */
.aos-gate__media--doc .aos-gate__lock{
	gap:10px;
}

.aos-gate__media--doc .aos-gate__lock-ring{
	width:46px;
	height:46px;
}

.aos-gate__file-meta{
	font-size:11px;
	letter-spacing:.06em;
	text-transform:uppercase;
	color:rgba(255,255,255,.62);
	font-variant-numeric:tabular-nums;
}

/* On a phone the columns have already stacked, and a full-height cover under a
   full-height form is a lot of scrolling before anything can be done about it. */
@media (max-width:767px){
	.aos-gate__cover{
		max-width:min(100%,180px);
		max-height:240px;
	}
}


/* ==========================================================================
   8. THE RECALL CARD

   "Welcome back" — offered above the form to a visitor who has already given us
   these details this session.

   It is rendered with the `hidden` attribute and un-hidden by JavaScript, so a
   client that cannot press the button is never shown the offer. Do not style
   away that hidden state: [hidden] must keep working or the card appears for
   people who cannot use it.

   Quiet on purpose. This is a shortcut past the form, not a second call to
   action competing with the submit button — so it is a tinted panel with a
   text-weight control, and the red belongs to the button below it.
   ========================================================================== */

.aos-gate__recall{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:10px 16px;
	margin:0 0 22px;
	padding:14px 16px;
	border:1px solid var(--aos-gray-200);
	border-left:3px solid var(--aos-red-600);
	border-radius:var(--aos-radius-card);
	/* A literal, not a token: the palette above has no tint lighter than
	   --aos-gray-200, and this panel sits on white and must read as a step off
	   it rather than as a border. */
	background:#F5F7FB;
}

.aos-gate__recall[hidden]{display:none;}

.aos-gate__recall-body{flex:1 1 240px;min-width:0;}

.aos-gate__recall-lead{
	margin:0;
	font-size:13.5px;
	line-height:1.45;
	color:var(--aos-navy-700);
}

.aos-gate__recall-lead b{font-weight:700;}

.aos-gate__recall-sub{
	margin:3px 0 0;
	font-size:12px;
	line-height:1.45;
	color:var(--aos-gray-500);
}

.aos-gate__recall-actions{
	display:flex;
	align-items:center;
	gap:12px;
	flex-wrap:wrap;
}

.aos-gate__recall-go{
	appearance:none;
	cursor:pointer;
	font-family:var(--aos-font-body);
	font-size:12.5px;
	font-weight:700;
	line-height:1;
	padding:9px 14px;
	color:#fff;
	background:var(--aos-navy-700);
	border:1px solid var(--aos-navy-700);
	border-radius:var(--aos-radius-control);
	transition:background .15s ease,border-color .15s ease;
}

.aos-gate__recall-go:hover{
	background:var(--aos-navy-900);
	border-color:var(--aos-navy-900);
}

.aos-gate__recall-go[disabled]{opacity:.55;cursor:default;}
.aos-gate__recall-go[hidden]{display:none;}

.aos-gate__recall-forget{
	appearance:none;
	cursor:pointer;
	background:none;
	border:0;
	padding:0;
	font-family:var(--aos-font-body);
	font-size:12px;
	font-weight:500;
	color:var(--aos-gray-500);
	text-decoration:underline;
	text-underline-offset:2px;
}

.aos-gate__recall-forget:hover{color:var(--aos-navy-700);}

/* Empty until the script writes to it, so it must not reserve a line. */
.aos-gate__recall-status{
	flex:1 1 100%;
	margin:0;
	font-size:12px;
	line-height:1.45;
	color:var(--aos-gray-500);
}

.aos-gate__recall-status:empty{display:none;}

.aos-gate__recall-go:focus-visible,
.aos-gate__recall-forget:focus-visible{
	outline:2px solid var(--aos-blue-500);
	outline-offset:2px;
}


/* ==========================================================================
   9. THE STACKED LAYOUT — PHONES AND NARROW TABLETS ONLY

   NOTHING IN THIS SECTION APPLIES TO THE TWO-COLUMN LAYOUT. Every rule is
   inside one media query, and 900px is where the layout stops being two
   columns: the tracks are 400px each with a gap of up to 52px and the body's
   gutter either side, so two tracks stop fitting just under 900px. Above that
   the gate is exactly what it was.

   WHAT WAS WRONG BELOW IT. Once the columns stack, the locked panel goes UNDER
   the form. A visitor on a phone therefore lands on a wall of form fields with
   nothing to say what they are for, and has to scroll past all of them to reach
   the poster that explains it. The form was also still two fields wide, because
   the only rule that narrowed it keyed on a 479px WINDOW while the card it was
   narrowing sits in a track that has nothing to do with the window's width.

   WHAT HAPPENS INSTEAD. The panel is replaced by a compact brief above the
   form — cover thumbnail, what the resource is, what it is called, and the fact
   that the form is the way to it — so the first thing on screen answers "what
   am I filling this in for". Then one field per row.
   ========================================================================== */

/* Hidden by default: on the two-column layout the panel does this job. */
.aos-gate__brief{display:none;}

@media (max-width:899px){

	/* The gap closes up — the brief and the form are now a caption and the
	   thing it captions, not two columns.

	   No `order` reversal any more. The brief sits ahead of the form card in
	   the MARKUP, so the order it is read in matches the order it is seen in.
	   Moving it visually with order:-1 while it stayed second in the DOM meant
	   a screen reader met the whole form before being told what any of it was
	   for — the exact problem this card exists to solve, reintroduced for the
	   people least able to work around it. */
	.aos-gate__cols{gap:16px;}

	.aos-gate__media{display:none;}

	.aos-gate__brief{
		display:flex;
		gap:14px;
		align-items:center;
		/* Its own gap to the form card. They are siblings inside one column
		   now, not two grid items, so the grid's gap no longer separates
		   them — without this the brief sits flush against the card. */
		margin:0 0 16px;
		padding:12px 14px;
		border:1px solid var(--aos-gray-200);
		border-radius:var(--aos-radius-card);
		background:#fff;
		box-shadow:var(--aos-shadow-card);
	}

	/* Portrait for a document, 16:9 for a recording — the shape is a cue in
	   itself, before any of the words are read. flex:none so a long title can
	   never squeeze the thumbnail. */
	.aos-gate__brief-thumb{
		flex:none;
		display:block;
		margin:0;
		border-radius:3px;
		background:var(--aos-navy-900);
	}

	.aos-gate__brief--doc .aos-gate__brief-thumb{
		width:54px;
		height:76px;
		object-fit:contain;
	}

	.aos-gate__brief--video .aos-gate__brief-thumb{
		width:84px;
		height:48px;
		object-fit:cover;
	}

	.aos-gate__brief-text{
		display:flex;
		flex-direction:column;
		gap:3px;
		min-width:0;
	}

	.aos-gate__brief-kind{
		font-size:10.5px;
		font-weight:800;
		letter-spacing:.1em;
		text-transform:uppercase;
		color:var(--aos-gray-500);
	}

	/* Two lines, then an ellipsis. A long resource title must not push the form
	   off the first screen — which is the whole point of the card. */
	.aos-gate__brief-title{
		font-family:var(--aos-font-display);
		font-size:15px;
		font-weight:700;
		line-height:1.28;
		color:var(--aos-navy-700);
		display:-webkit-box;
		-webkit-line-clamp:2;
		-webkit-box-orient:vertical;
		overflow:hidden;
	}

	.aos-gate__brief-lock{
		display:inline-flex;
		align-items:center;
		gap:6px;
		margin-top:2px;
		font-size:12px;
		font-weight:700;
		color:var(--aos-red-600);
	}

	.aos-gate__brief-lock svg{flex:none;}

	/* ONE FIELD PER ROW. Section 5's two-column grid and its 479px query both
	   lose to this, and neither had to be edited to make that happen. */
	.aos-gate .gform_wrapper .gform_fields{
		grid-template-columns:1fr !important;
		gap:14px !important;
	}

	/* A grid item's automatic minimum size is its CONTENT, so a long placeholder
	   or a wide select pushes its track past the card and the form spills
	   sideways. No effect until something would have overflowed. */
	.aos-gate .gform_wrapper .gfield{
		min-width:0;
		grid-column:1/-1 !important;
	}

	/* clamp() narrows the card already, but its floor is set for a desktop
	   column; on a 360px screen the gutter either side of an input is worth
	   more as input. */
	.aos-gate__card{padding:18px 16px;}
	.aos-gate__body{padding:20px 0 26px;}
}