/*
 * Global components: the floating glass nav (header.php) and the site footer
 * (footer.php). Converted 1:1 from the approved Site Header / Site Footer
 * components; edit here and every page changes.
 */

/* ===== Accessibility: skip link + main landmark =====
 * The skip link is the first focusable element on every page; it is off-screen
 * until it receives keyboard focus, so it changes nothing visually for mouse
 * users. #main is the focus target (tabindex=-1) and never shows an outline box. */
main { display: block; }
#main:focus { outline: none; }
.skip-link {
	position: fixed;
	top: -100px;
	left: 16px;
	z-index: 1000;
	padding: 12px 18px;
	background: #16042E;
	color: #fff;
	font-family: 'Roboto', system-ui, sans-serif;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	border-radius: 0 0 12px 12px;
	box-shadow: 0 10px 30px -8px rgba(10, 2, 24, 0.6);
	transition: top .18s ease;
}
.skip-link:focus { top: 0; }

/* ===== Floating glass nav ===== */
nav.glassnav {
	background: rgba(22, 4, 46, 0.55);
	border: 1px solid rgba(255, 255, 255, 0.14);
	box-shadow: 0 18px 44px -16px rgba(10, 2, 24, 0.55);
	transition: background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
nav.glassnav.navlight {
	background: rgba(255, 255, 255, 0.72);
	border-color: rgba(26, 8, 48, 0.10);
	box-shadow: 0 18px 44px -16px rgba(22, 4, 46, 0.18);
}
.nlink { color: #C8BCE8; text-decoration: none; border-radius: 999px; transition: color .25s ease, background .2s ease; }
.nlink:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
nav.navlight .nlink { color: #574a6e; }
nav.navlight .nlink:hover { color: #16042E; background: rgba(22, 4, 46, 0.06); }
/* Active state: the nav link for the page we're on takes the purple accent in
 * both nav themes (the higher-specificity :hover rules keep it purple on hover). */
.nlink.nlink-active, .nlink.nlink-active:hover { color: #9385FF; }
nav.navlight .nlink.nlink-active, nav.navlight .nlink.nlink-active:hover { color: #6D5DF3; }
/* ===== Animated logo (inc/animated-logo.php) =====
 * Colour is owned here so it flips for free with whatever theme context wraps
 * the logo. The wrapper carries the ink colour (the mark uses currentColor and
 * the "tarim" letters inherit it) and the spark/V5 colour via --al-spark.
 * Geometry + hover behaviour is the vanilla-JS port at the foot of site.js. */
.atarim-logo .al-stage { color: inherit; transition: color .25s ease; }
.atarim-logo .al-mark path,
.atarim-logo .al-spark path { transition: fill .25s ease; }
.atarim-logo .al-v5 { color: var(--al-spark, #9385FF); transition: color .25s ease; }
/* Motion (the global prefers-reduced-motion rule in tokens.css kills these). */
.atarim-logo .al-word { transition: max-width 640ms cubic-bezier(.16, 1, .3, 1); }
.atarim-logo .al-inner span { transition: opacity 640ms cubic-bezier(.16, 1, .3, 1), transform 640ms cubic-bezier(.16, 1, .3, 1); }
.atarim-logo .al-spark { transition: transform 730ms cubic-bezier(.34, 1.56, .64, 1); }
/* Static lockup (the header): shown fully open, so nothing may animate, not
 * even the first measure that moves the spark from its rest spot to the i. */
.atarim-logo.al-static .al-word,
.atarim-logo.al-static .al-inner span,
.atarim-logo.al-static .al-spark { transition: none !important; }
/* Header nav: ink + spark flip on the .glassnav / .navlight theme probe. */
.nbrand { color: #fff; --al-spark: #9385FF; }
nav.navlight .nbrand { color: #16042E; --al-spark: #6D5DF3; }
/* Help app bar: inherit the help theme tokens (flip with data-theme). */
.hc-root .hc-brand { color: var(--ink); --al-spark: var(--violet); }
.fy-drop { position: relative; }
/* "For you" mega-dropdown. The panel is a top-level sibling of the nav (see
 * header.php), positioned + toggled by site.js, so its backdrop blur is live.
 * IMPORTANT: never animate opacity on the glass card — browsers suppress
 * backdrop-filter while opacity < 1, which flashes "tint then blur". The panel
 * toggles opacity instantly; only the card's margin-top animates the slide-in. */
.fy-panel { position: fixed; z-index: 61; padding-top: 10px; opacity: 0; pointer-events: none; font-family: 'Roboto', system-ui, sans-serif; }
.fy-panel.open { opacity: 1; pointer-events: auto; }
.fy-card {
	background: rgba(22, 4, 46, 0.60);
	border: 1px solid rgba(255, 255, 255, 0.14);
	box-shadow: 0 26px 56px -22px rgba(10, 2, 24, 0.6);
	margin-top: 6px;
	transition: margin-top .18s ease, background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.fy-panel.open .fy-card { margin-top: 0; }
.fy-panel.fylight .fy-card { background: rgba(255, 255, 255, 0.72); border-color: rgba(26, 8, 48, 0.10); box-shadow: 0 26px 56px -22px rgba(22, 4, 46, 0.30), 0 2px 8px rgba(22, 4, 46, 0.06); }
/* The row carries the base ink itself (not just its child spans) so anything that
 * flattens link descendants to `inherit` still lands on the panel's own colour
 * instead of the UA link blue. */
.fy-item { color: #C8BCE8; transition: background .18s ease, color .35s ease; }
.fy-panel.fylight .fy-item { color: #6f6388; }
.fy-item:hover { background: rgba(255, 255, 255, 0.08); }
.fy-panel.fylight .fy-item:hover { background: #f4f0fb; }
.fy-tile { background: rgba(255, 255, 255, 0.08); }
.fy-panel.fylight .fy-tile { background: #f4f0fb; }
.fy-title { color: #ffffff; }
.fy-panel.fylight .fy-title { color: #16042E; }
/* Active "For you" item: tinted row + purple title in both panel themes. */
.fy-item.fy-active { background: rgba(147, 133, 255, 0.12); }
.fy-panel.fylight .fy-item.fy-active { background: #f1edfd; }
.fy-item.fy-active .fy-title { color: #9385FF; }
.fy-panel.fylight .fy-item.fy-active .fy-title { color: #6D5DF3; }
.fy-sub { color: #C8BCE8; }
.fy-panel.fylight .fy-sub { color: #6f6388; }

/* Primary CTA (mint pill). Label "Start Free" is the sentence-case exception. */
.btn-mint { background: #3ED696; color: #16042E; text-decoration: none; transition: background .16s ease; }
.btn-mint:hover { background: #35c98a; }

/* ===== Site footer ===== */
.flink { color: #998CC2; text-decoration: none; transition: color .2s ease; }
.flink:hover { color: #fff; }
/* Active state: the footer link for the page we're on takes the purple accent. */
.flink.flink-active,
.flink.flink-active:hover { color: #9385FF; }

/* ============================================================
 * RESPONSIVE LAYER (global: shell, product-mockup fit, nav, footer).
 * Desktop >=1280px is untouched. See docs/theme-guide.md.
 * ============================================================ */

/* The page shell drops its desktop min-width below 1280 so nothing forces a
 * horizontal scrollbar. */
@media (max-width: 1280px) { .atarim-page { min-width: 0 !important; } }

/* ===== Responsive product-mockup fit (generic, reusable) =====
 * The wrappers (.mk-scroll/.mk-fit-box) are layout-neutral on desktop via
 * display:contents, so >=1280 renders the embed at native size exactly as
 * authored. Below 1280, site.js scales each .mk-fit to fit its container and
 * sizes .mk-fit-box to the scaled box; on phones the embed is rendered larger
 * than the viewport inside .mk-scroll, which becomes a horizontal swipe area. */
.mk-scroll, .mk-fit-box { display: contents; }
@media (max-width: 1279px) {
	.mk-scroll { display: flex; justify-content: center; width: 100% !important; overflow-x: auto !important; overflow-y: hidden; -webkit-overflow-scrolling: touch; margin: 28px 0 0; }
	.mk-fit-box { display: block; flex: 0 0 auto; }
	.mk-fit { transform-origin: top left; margin: 0 !important; will-change: transform; }
	/* keep the scroll-reveal opacity but stop hpRise from animating away the JS scale transform */
	.mk-fit.hp-on { animation: none !important; }
}
@media (max-width: 767px) { .mk-scroll { justify-content: flex-start; } }

/* ===== Nav: hamburger at tablet and below (<=1023) =====
 * The full link set needs ~900px; at tablet widths it wrapped onto two lines
 * ("For you", "The Shift" and "Start Free" all broke), so the drawer takes over
 * from 1023 down. On phones the pill widens to the 16px content gutter so it
 * lines up with the boxes below it (the inline calc keeps 24px each side). */
.nav-burger { display: none; }
@media (max-width: 767px) {
	#siteNav { width: calc(100% - 32px) !important; }
}
@media (max-width: 1023px) {
	#siteNav .nav-desktop, #siteNav .nav-cta { display: none !important; }
	.nav-burger { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: none; background: transparent; cursor: pointer; color: #fff; padding: 0; }
	nav.navlight .nav-burger { color: #16042E; }
	.nav-mobile {
		position: absolute; top: calc(100% + 10px); left: 0; right: 0;
		display: flex; flex-direction: column; gap: 2px; padding: 10px;
		border-radius: 18px; background: rgba(22, 4, 46, 0.92);
		backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5);
		border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 22px 50px -18px rgba(10, 2, 24, 0.6);
		opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .18s ease, transform .18s ease;
	}
	.nav-mobile.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
	.nav-mobile a { color: #C8BCE8; text-decoration: none; font-size: 15px; padding: 11px 14px; border-radius: 11px; }
	.nav-mobile a:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
	.nav-mobile a.nm-active, .nav-mobile a.nm-active:hover { color: #9385FF; }
	.nav-mobile .nm-label { font-size: 11.5px; color: #998CC2; padding: 12px 14px 4px; }
	.nav-mobile .nm-cta { background: #3ED696; color: #16042E; font-weight: 700; text-align: center; margin-top: 8px; }
	.nav-mobile .nm-cta:hover { background: #35c98a; color: #16042E; }
}
@media (min-width: 1024px) { .nav-mobile { display: none; } }

/* ===== Footer: 6 columns -> 3 (tablet) -> 2 (mobile) ===== */
@media (max-width: 1023px) {
	.sf-pad { padding-left: 24px !important; padding-right: 24px !important; }
	.sf-cols { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 767px) {
	.sf-pad { padding-left: 16px !important; padding-right: 16px !important; }
	.sf-cols { grid-template-columns: repeat(2, 1fr) !important; gap: 22px !important; }
}


/* ===== Shared: SOP-flowchart tooltips + floating error glyph =====
 * Used by the homepage workflows section and the Trust page (and any page that
 * embeds the chatbot-vs-SOP comparison). .wf-step shows its .wf-tip on hover;
 * errFloat bobs the error icon on the generic-chatbot card. */
@keyframes errFloat {
	0%, 100% { transform: translateY(-50%); }
	50% { transform: translateY(calc(-50% - 6px)); }
}
.wf-step { position: relative; cursor: default; }
.wf-tip {
	position: absolute; left: 50%; bottom: calc(100% + 9px);
	transform: translateX(-50%) translateY(5px);
	z-index: 40; width: max-content; max-width: 230px; text-align: left;
	background: #16042E; color: #fff; font-size: 12px; font-weight: 400; line-height: 1.5;
	padding: 9px 12px; border-radius: 11px; box-shadow: 0 16px 34px -12px rgba(22, 4, 46, 0.55);
	opacity: 0; pointer-events: none; transition: opacity .16s ease, transform .16s ease;
}
.wf-step:hover .wf-tip { opacity: 1; transform: translateX(-50%) translateY(0); }
.wf-tip::after {
	content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
	border: 6px solid transparent; border-top-color: #16042E;
}

/* Form inputs at 16px so iOS Safari never zooms on focus (Website Specification:
   mobile form inputs). The per-form rules already set 16px, but Gravity Forms'
   orbital theme CSS enqueues after ours and overrides text controls to 14px, so
   this global override needs !important to win. Text controls only; the pill
   submit buttons keep their own type. */
.gform_wrapper .ginput_container input,
.gform_wrapper .ginput_container textarea,
.gform_wrapper .ginput_container select {
	font-size: 16px !important;
}

/* =====================================================================
 * URL capture field (Gravity Forms) — GLOBAL COMPONENT
 *
 * Promoted out of home.css for design round 6 (Sep 2026), which puts a
 * "Paste your URL" field on Home, Product, For Agencies, The Shift and
 * Trust. The rules are unchanged; only their home moved, so the homepage
 * renders byte-identically (site.css loads on every page).
 *
 * Two variants, swapped at 1023px by the .hp-gform-desktop/.hp-gform-mobile
 * pair below: id 1 is the website-only pill (desktop), id 4 is the stacked
 * email + website card (tablet and mobile).
 * ===================================================================== */
/* ===== Hero capture form (Gravity Forms id 1, embedded in the hero) =====
 * The form records entries in Gravity Forms; here it is restyled back to the
 * original hero pill: a white rounded field with the URL input flush-left and
 * the purple submit button inline on the right. Scoped to .hp-gform so it never
 * leaks to any other Gravity Form on the site. */
.hp-gform .gform_wrapper { margin: 0; }
.hp-gform .gform_heading,
.hp-gform .gform_required_legend { display: none !important; }

.hp-gform form {
	display: flex; align-items: center; gap: 10px;
	background: #fff; border-radius: 24px; corner-shape: squircle; padding: 8px 8px 8px 20px;
	box-shadow: 0 16px 40px rgba(0,0,0,0.35); margin: 0;
}
.hp-gform .gform-body, .hp-gform .gform_body { flex: 1; min-width: 0; margin: 0; }
.hp-gform .gform_fields { display: block !important; grid-template-columns: none !important; grid-gap: 0 !important; }
.hp-gform .gfield { margin: 0 !important; padding: 0 !important; }
.hp-gform .gfield_label,
.hp-gform legend.gfield_label {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.hp-gform .ginput_container { margin: 0 !important; }
.hp-gform .ginput_container input {
	width: 100%; border: none !important; outline: none; background: transparent;
	font-family: inherit; font-size: 16px; color: #16042E; padding: 0;
	text-align: left; box-shadow: none !important; height: auto;
}
.hp-gform .ginput_container input::placeholder { color: #6b6785; }

.hp-gform .gform_footer { margin: 0 !important; padding: 0 !important; display: flex; width: auto; }
.hp-gform .gform_footer .gform_button,
.hp-gform input[type="submit"].gform_button {
	margin: 0 !important; width: auto !important;
	padding: 13px 22px !important; border-radius: 24px !important; corner-shape: squircle; border: none !important;
	background: #6D5DF3 !important; color: #fff !important;
	font-family: inherit !important; font-size: 15px !important; font-weight: 700 !important;
	cursor: pointer; white-space: nowrap; transition: background .16s ease;
}
.hp-gform .gform_footer .gform_button:hover,
.hp-gform input[type="submit"].gform_button:hover { background: #8a7af5 !important; }
.hp-gform .gform_ajax_spinner { margin-left: 8px; }

/* Validation + confirmation sit on the dark hero, so keep them legible. */
.hp-gform .gform_confirmation_message { color: #fff; font-size: 16px; line-height: 1.5; }
.hp-gform .validation_message,
.hp-gform .gform_validation_errors {
	color: #fff; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18);
	border-radius: 12px; padding: 8px 12px; margin-top: 10px; font-size: 13px; text-align: left;
}

/* Mobile: let the pill wrap and go full width. */
@media (max-width: 639px) {
	.hp-gform form { flex-wrap: wrap; width: 100%; }
	.hp-gform .gform_footer .gform_button { width: 100%; }
}


/* ===== Hero capture · tablet + mobile variant (Gravity Forms id 4: email + website) =====
 * Desktop shows the website-only pill (id 1, .hp-gform-desktop); at <=1023px it is
 * hidden and this stacked white card takes over (Vito's request, task #3). */
.hp-gform-desktop { display: block; }
.hp-gform-mobile { display: none; }
@media (max-width: 1023px) {
	.hp-gform-desktop { display: none !important; }
	.hp-gform-mobile { display: block !important; }
}

.hp-gform-m .gform_wrapper { margin: 0; }
.hp-gform-m .gform_heading,
.hp-gform-m .gform_required_legend { display: none !important; }
.hp-gform-m form {
	display: block; margin: 0;
	background: #fff; border-radius: 24px; corner-shape: squircle; padding: 14px;
	box-shadow: 0 16px 40px rgba(0,0,0,0.35);
}
.hp-gform-m .gform-body, .hp-gform-m .gform_body { margin: 0; }
/* gap carries !important on purpose: `grid-gap` is an alias of `gap`, and the
 * old `grid-gap:0 !important` here silently zeroed the spacing between the
 * email and website fields. */
.hp-gform-m .gform_fields {
	display: flex !important; flex-direction: column; gap: 10px !important;
	grid-template-columns: none !important;
}
.hp-gform-m .gfield { margin: 0 !important; padding: 0 !important; }
.hp-gform-m .gfield_label,
.hp-gform-m legend.gfield_label {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.hp-gform-m .ginput_container { margin: 0 !important; }
/* Gravity Forms' orbital theme CSS loads after ours with equal specificity and
 * squares these fields off (3px radius, 0 12px padding, white fill), so the
 * field shape carries !important. */
.hp-gform-m .ginput_container input {
	width: 100%; font-family: inherit; font-size: 16px; color: #16042E;
	background: #faf9fe !important; border: 1px solid rgba(26,8,48,0.16) !important;
	border-radius: 13px !important; corner-shape: squircle; padding: 13px 15px !important;
	height: auto !important; line-height: 1.3 !important;
	outline: none; box-shadow: none !important;
	transition: border-color .15s ease, background .15s ease;
}
.hp-gform-m .ginput_container input::placeholder { color: #6b6785; }
.hp-gform-m .ginput_container input:focus { border-color: #6D5DF3 !important; background: #fff !important; }
.hp-gform-m .gform_footer { margin: 10px 0 0 !important; padding: 0 !important; }
.hp-gform-m .gform_footer .gform_button,
.hp-gform-m input[type="submit"].gform_button {
	width: 100% !important; margin: 0 !important;
	padding: 14px 22px !important; border-radius: 16px !important; corner-shape: squircle; border: none !important;
	background: #6D5DF3 !important; color: #fff !important;
	font-family: inherit !important; font-size: 15px !important; font-weight: 700 !important;
	cursor: pointer; transition: background .16s ease;
}
.hp-gform-m .gform_footer .gform_button:hover { background: #8a7af5 !important; }
.hp-gform-m .gform_confirmation_message { color: #fff; font-size: 16px; line-height: 1.5; }
.hp-gform-m .validation_message,
.hp-gform-m .gform_validation_errors {
	color: #fff; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18);
	border-radius: 12px; padding: 8px 12px; margin-top: 10px; font-size: 13px; text-align: left;
}

/* Light-section variant. The base pill is tuned for a dark stage (heavy drop
 * shadow, white-on-dark validation); on a white hero it needs a hairline
 * border and dark-on-light messages instead. Round 6 puts a URL field on the
 * light Trust hero, which is the first light-section use. */
.hp-gform-light form,
.hp-gform-m.hp-gform-light form {
	border: 1px solid rgba(26,8,48,0.12);
	box-shadow: 0 24px 54px -24px rgba(22,4,46,0.28);
}
.hp-gform-light .gform_confirmation_message,
.hp-gform-m.hp-gform-light .gform_confirmation_message { color: #16042E; }
.hp-gform-light .validation_message,
.hp-gform-light .gform_validation_errors,
.hp-gform-m.hp-gform-light .validation_message,
.hp-gform-m.hp-gform-light .gform_validation_errors {
	color: #16042E; background: rgba(26,8,48,0.05); border-color: rgba(26,8,48,0.14);
}

/* ===== Responsive sweep, pass 2 (Sep 2026) =====
 * Footer: the seven social links sat in a non-wrapping row that needed ~400px,
 * so on 360-390 phones the last ones ran off-screen. They wrap there. */
@media (max-width: 767px) {
	.sf-socials { flex-wrap: wrap; row-gap: 10px; }
}
/* Default page template (page.php: the legal pages and any page without its
 * own template) had no responsive layer: 40px side padding on phones and long
 * URLs in the policy text that ran off-screen. */
.pg-default-body { overflow-wrap: break-word; }
@media (max-width: 1023px) {
	.pg-default { padding-left: 24px !important; padding-right: 24px !important; }
}
@media (max-width: 767px) {
	.pg-default { padding: 124px 16px 72px !important; }
}
/* Content authored inside a default page (e.g. /ai-settings-showcase/) can
 * bring its own two-column grids; stack them on phones so they fit. */
@media (max-width: 600px) {
	.pg-default-body .two-col, .pg-default-body .constraints { grid-template-columns: minmax(0, 1fr) !important; }
}