/* =============================================================
   AMETMOTORS homepage — home.css
   Design ported from the v2 reference, mapped onto the BEM classes from the
   template parts. Scoped under #amethome (Blocksy header/footer untouched).
   Mobile-first · CSS variables · shared rules (no duplication) · no inline CSS.
   CWV: aspect-ratio media (no CLS), content-visibility below the fold,
   reduced-motion honored, no @import of libraries.

   Deploy note: set Page 29 to Blocksy Full-Width so bands span; 'Prompt' is
   enqueued once by the plugin (display=swap) — this file only references it.
   ============================================================= */

/* ---------------------------------------------------------------
   Design tokens
   --------------------------------------------------------------- */
#amethome {
	--orange:#EE7A22;
	--orange-hi:#ff8f3d;
	--bg:#0d0f12;
	--bg2:#14171c;
	--card:#191d23;
	--line:#2a2f37;
	--line-ui:#7f8896;               /* a11y: ~3.9:1 UI border */
	--txt:#f2f0ec;
	--muted:#b8bcc4;
	--ok:#4caf7d;
	--no:#e05c5c;

	--radius:16px;
	--pill:999px;                    /* buttons, inputs, tags */
	--maxw:1080px;
	--gap:18px;                      /* default grid gap */
	--accent-soft:rgba(238,122,34,.14); /* tag / eyebrow / badge fill */

	--font:'Prompt', system-ui, -apple-system, 'Segoe UI', sans-serif;

	background:var(--bg);
	color:var(--txt);
	font-family:var(--font);
	font-size:18px;
	line-height:1.65;
	-webkit-font-smoothing:antialiased;
	overflow-x:hidden;
	overflow:clip;
	overflow-wrap:anywhere;
}
#amethome *,
#amethome *::before,
#amethome *::after { box-sizing:border-box; }
#amethome img { max-width:100%; display:block; }
#amethome a { color:var(--orange-hi); }

/* ---------------------------------------------------------------
   Shared surfaces (single source of truth — no duplication)
   --------------------------------------------------------------- */

/* Card surface used by every panel/card/item. Per-element rules below add
   only their own padding/layout. */
#amethome .amet-card,
#amethome .amet-quiz__card,
#amethome .amet-problems__item,
#amethome .amet-benefits__item,
#amethome .amet-compare__col,
#amethome .amet-steps__item,
#amethome .amet-personas__item,
#amethome .amet-reviews__item,
#amethome .amet-cancant__col,
#amethome .amet-cta__card,
#amethome .amet-faq__item {
	background:var(--card);
	border:1px solid var(--line);
	border-radius:var(--radius);
}

/* Tinted band (bg2 + hairline top/bottom) shared by checker + picks. */
#amethome .amet-checker,
#amethome .amet-quiz {
	background:var(--bg2);
	border-top:1px solid var(--line);
	border-bottom:1px solid var(--line);
}

/* Pill/tag chip shared by hero eyebrow, CTA badge, product badge. */
#amethome .amet-hero__eyebrow,
#amethome .amet-cta__badge,
#amethome .amet-quiz__badge {
	background:var(--accent-soft);
	color:var(--orange-hi);
	border-radius:var(--pill);
	font-weight:600;
}

/* Grid base (1 column, mobile-first) shared by all section grids. Column
   counts are set per-section in the RESPONSIVE block. */
#amethome .amet-quiz__grid,
#amethome .amet-problems__grid,
#amethome .amet-benefits__grid,
#amethome .amet-personas__grid,
#amethome .amet-reviews__grid,
#amethome .amet-cta__grid,
#amethome .amet-compare__cols,
#amethome .amet-cancant__cols {
	display:grid;
	gap:var(--gap);
	grid-template-columns:1fr;
}

/* ---------------------------------------------------------------
   Layout primitives
   --------------------------------------------------------------- */
#amethome .amet-section { padding:64px 0; }
#amethome .amet-logical-block { position:relative; }
#amethome .amet-logical-block--choose,
#amethome .amet-logical-block--products,
#amethome .amet-logical-block--scope {
	background:var(--bg2);
	border-block:1px solid var(--line);
}
#amethome .amet-logical-block > .amet-section + .amet-section { padding-top:16px; }
#amethome .amet-section--marker-only { padding:0; }
#amethome .amet-section--marker-only:has(.amet-products__mount > *) { padding:64px 0; }
#amethome .amet-section__inner,
#amethome .amet-hero__inner {
	max-width:var(--maxw);
	margin-inline:auto;
	padding-inline:20px;
}

/* Skip render work below the fold (CWV). */
#amethome .amet-benefits,
#amethome .amet-compare,
#amethome .amet-steps,
#amethome .amet-personas,
#amethome .amet-reviews,
#amethome .amet-cancant,
#amethome .amet-cta,
#amethome .amet-faq,
#amethome .amet-footcta { content-visibility:auto; contain-intrinsic-size:1px 600px; }

/* ---------------------------------------------------------------
   Typography
   --------------------------------------------------------------- */
#amethome h1,
#amethome h2,
#amethome h3,
#amethome h4,
#amethome h5,
#amethome h6 { color:var(--txt); }
#amethome .amet-hero__title { font-size:clamp(2rem,6vw,3.4rem); line-height:1.2; font-weight:700; }
#amethome .amet-section__title { font-size:clamp(1.5rem,4vw,2.2rem); line-height:1.3; font-weight:600; margin-bottom:14px; }
#amethome h3 { font-size:1.15rem; font-weight:600; }
#amethome .amet-section__intro,
#amethome .amet-hero__subtitle { color:var(--muted); font-size:clamp(1.05rem,2.5vw,1.3rem); margin-top:14px; }
#amethome small { font-size:1rem; }

/* ---------------------------------------------------------------
   Buttons
   --------------------------------------------------------------- */
#amethome .amet-btn {
	display:inline-flex; align-items:center; justify-content:center; gap:8px;
	padding:16px 30px; min-height:44px;
	border-radius:var(--pill); border:0; cursor:pointer;
	font-family:inherit; font-weight:600; font-size:1.05rem; text-decoration:none; text-align:center;
	transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
	max-width:100%;
}
#amethome .amet-btn:active { transform:scale(.97); }
#amethome .amet-btn--primary { background:var(--orange); color:#161006; box-shadow:0 6px 24px rgba(238,122,34,.35); }
#amethome .amet-btn--primary:hover { background:var(--orange-hi); }
#amethome .amet-btn--ghost { background:transparent; color:var(--txt); border:2px solid var(--line-ui); }
#amethome .amet-btn--ghost:hover { border-color:var(--orange); }

/* ---------------------------------------------------------------
   Focus + motion (a11y)
   --------------------------------------------------------------- */
#amethome a:focus-visible,
#amethome button:focus-visible,
#amethome input:focus-visible,
#amethome summary:focus-visible { outline:3px solid var(--orange-hi); outline-offset:3px; border-radius:6px; }

#amethome .amet-fade { opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease; }
#amethome .amet-fade.is-visible { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) {
	#amethome .amet-fade { opacity:1; transform:none; transition:none; }
	#amethome { scroll-behavior:auto; }
}

/* ===============  1 · HERO  =============== */
#amethome .amet-hero {
	padding:72px 0 56px;
	background:radial-gradient(ellipse 80% 60% at 50% -10%, rgba(238,122,34,.15), transparent);
}
#amethome .amet-hero__eyebrow { display:inline-block; padding:4px 14px; font-size:1rem; font-weight:500; margin-bottom:14px; }
#amethome .amet-hero__cta { display:flex; gap:14px; flex-wrap:wrap; margin-top:30px; }
#amethome .amet-hero__badges { display:flex; gap:var(--gap); flex-wrap:wrap; margin-top:26px; color:var(--muted); font-size:1rem; list-style:none; padding:0; }
#amethome .amet-hero__badge { display:flex; gap:7px; align-items:center; }

/* ===============  2 · DTC CHECKER  =============== */
/* [amet_dtc] renders its own markup inside the mount; we style the band +
   inputs defensively. */
#amethome .amet-checker__mount input[type="text"],
#amethome .amet-checker__mount input:not([type]) {
	padding:16px 20px; border-radius:var(--pill); border:2px solid var(--line-ui);
	background:var(--bg); color:var(--txt); font-family:inherit; font-size:1.05rem;
}
#amethome .amet-checker__mount input:focus { outline:none; border-color:var(--orange); }
#amethome .amet-checker__disclaimer { color:var(--muted); font-size:1rem; margin-top:18px; }

/* ===============  3 · FEATURED (plugin grid)  =============== */
#amethome .amet-products__mount { margin-top:20px; }
#amethome .amet-section--marker-only .amet-products__mount:empty { margin-top:0; }

/* ===============  4 · BEGINNER PICKS  =============== */
#amethome .amet-quiz__grid { margin-top:22px; }
#amethome .amet-quiz__card { overflow:hidden; }
#amethome .amet-quiz__link { display:block; padding:20px; color:var(--txt); text-decoration:none; position:relative; }
#amethome .amet-quiz__badge { position:absolute; top:14px; left:14px; z-index:2; padding:4px 12px; font-size:1rem; }
#amethome .amet-quiz__badge--sale { background:rgba(224,92,92,.16); color:#ff8a8a; }
#amethome .amet-quiz__thumb { aspect-ratio:4 / 3; background:var(--bg2); border-radius:12px; overflow:hidden; margin-bottom:16px; }
#amethome .amet-quiz__thumb img { width:100%; height:100%; object-fit:contain; }
#amethome .amet-quiz__name { margin-bottom:8px; }
#amethome .amet-quiz__price { color:var(--orange-hi); font-weight:600; }
#amethome .amet-quiz__price del,
#amethome .amet-quiz__price del * { color:var(--muted); font-size:1rem; font-weight:400; margin-right:6px; }
#amethome .amet-quiz__note { color:var(--muted); font-size:1rem; margin-top:16px; }

/* ===============  5+6 · PROBLEMS + BENEFITS  =============== */
#amethome .amet-problems__grid,
#amethome .amet-benefits__grid { margin-top:8px; }
#amethome .amet-problems__item { display:flex; gap:12px; align-items:flex-start; padding:22px; }
#amethome .amet-problems__item::before { content:"\26A0\FE0F"; flex-shrink:0; }
#amethome .amet-benefits__item { padding:24px; }
#amethome .amet-benefits__icon { font-size:1.8rem; display:block; margin-bottom:8px; }

/* ===============  7 · COMPARISON  =============== */
#amethome .amet-compare__cols { margin-top:10px; }
#amethome .amet-compare__col { padding:24px; }
#amethome .amet-compare__col--with { border-color:var(--orange); }
#amethome .amet-compare__label { margin-bottom:12px; }
#amethome .amet-compare__col--without .amet-compare__label { color:var(--no); }
#amethome .amet-compare__col--with .amet-compare__label { color:var(--ok); }
#amethome .amet-compare__steps { margin:0 0 0 20px; color:var(--muted); display:grid; gap:8px; }
#amethome .amet-compare__total { margin-top:14px; font-weight:700; }
#amethome .amet-compare__summary { font-size:clamp(1.3rem,3.5vw,1.8rem); font-weight:700; color:var(--orange); margin-top:18px; text-align:center; }
#amethome .amet-compare__disclaimer { color:var(--muted); font-size:1rem; margin-top:12px; }

/* ===============  8 · STEPS  =============== */
#amethome .amet-steps__list { display:flex; gap:14px; flex-wrap:wrap; margin-top:20px; list-style:none; padding:0; }
#amethome .amet-steps__item { padding:22px 26px; text-align:center; flex:1; min-width:180px; }
#amethome .amet-steps__num { color:var(--orange); font-size:1.5rem; font-weight:700; display:block; margin-bottom:6px; }

/* ===============  9 · PERSONAS  =============== */
#amethome .amet-personas__grid { margin-top:18px; list-style:none; padding:0; }
#amethome .amet-personas__item { padding:22px; text-align:center; display:flex; flex-direction:column; align-items:center; }
#amethome .amet-personas__icon { font-size:1.8rem; display:block; margin-bottom:8px; }
#amethome .amet-personas__text { color:var(--muted); }
#amethome .amet-personas__cta { margin-top:auto; padding:12px 20px; width:100%; }

/* ===============  10 · REVIEWS  =============== */
#amethome .amet-reviews__grid { margin-top:18px; }
#amethome .amet-reviews__item { padding:24px; margin:0; }
#amethome .amet-reviews__stars { color:var(--orange); letter-spacing:2px; margin-bottom:10px; }
#amethome .amet-reviews__quote { color:var(--txt); margin:0 0 12px; }
#amethome .amet-reviews__by { color:var(--muted); font-size:1rem; font-weight:600; }
#amethome .amet-reviews__place { color:var(--muted); font-weight:400; margin-left:6px; }

/* ===============  11 · CAN / CAN'T  =============== */
#amethome .amet-cancant__cols { margin-top:10px; }
#amethome .amet-cancant__col { padding:24px; }
#amethome .amet-cancant__list { margin:0 0 0 22px; color:var(--muted); display:grid; gap:8px; }
#amethome .amet-cancant__col--can .amet-cancant__list,
#amethome .amet-cancant__col--cant .amet-cancant__list { list-style:none; margin-left:0; }
#amethome .amet-cancant__col--can .amet-cancant__list li::before { content:"\2713 "; color:var(--ok); font-weight:700; }
#amethome .amet-cancant__col--cant .amet-cancant__list li::before { content:"\2715 "; color:var(--no); font-weight:700; }
#amethome .amet-cancant__note { border-left:4px solid var(--orange); padding:14px 20px; background:rgba(238,122,34,.07); border-radius:0 var(--radius) var(--radius) 0; margin-top:20px; color:var(--muted); }

/* ===============  12 · FREE TOOLS CTA  =============== */
#amethome .amet-cta__grid { margin-top:18px; }
#amethome .amet-cta__card { padding:26px; }
#amethome .amet-cta__badge { display:inline-block; padding:4px 14px; font-size:1rem; margin-bottom:12px; }
#amethome .amet-cta__title { margin-bottom:8px; }
#amethome .amet-cta__text { color:var(--muted); margin-bottom:16px; }

/* ===============  13 · FAQ  =============== */
#amethome .amet-faq__list { margin-top:18px; }
#amethome .amet-faq__item { margin-bottom:12px; overflow:hidden; }
#amethome .amet-faq__q { padding:20px 24px; cursor:pointer; font-weight:600; list-style:none; position:relative; padding-right:48px; }
#amethome .amet-faq__q::-webkit-details-marker { display:none; }
#amethome .amet-faq__q::after { content:"+"; position:absolute; right:24px; top:16px; font-size:1.5rem; color:var(--orange); }
#amethome .amet-faq__item[open] .amet-faq__q::after { content:"\2013"; }
#amethome .amet-faq__a { padding:0 24px 20px; color:var(--muted); }

/* ===============  14 · FOOTER CTA  =============== */
#amethome .amet-footcta { text-align:center; background:radial-gradient(ellipse 70% 80% at 50% 120%, rgba(238,122,34,.12), transparent); }
#amethome .amet-footcta__title { font-size:clamp(1.6rem,4vw,2.4rem); margin-bottom:12px; }
#amethome .amet-footcta__text { color:var(--muted); margin-bottom:24px; }
#amethome .amet-footcta__actions { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }

/* ---------------------------------------------------------------
   RESPONSIVE (mobile-first: base = 1 col, add columns upward)
   --------------------------------------------------------------- */
@media (min-width:640px) {
	#amethome .amet-quiz__grid,
	#amethome .amet-reviews__grid,
	#amethome .amet-cta__grid { grid-template-columns:repeat(3,1fr); }
	#amethome .amet-personas__grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (min-width:760px) {
	#amethome .amet-problems__grid { grid-template-columns:repeat(2,1fr); }
	#amethome .amet-benefits__grid { grid-template-columns:repeat(3,1fr); }
	#amethome .amet-compare__cols,
	#amethome .amet-cancant__cols { grid-template-columns:1fr 1fr; }
}

@media (max-width:479px) {
	#amethome .amet-section { padding:48px 0; }
	#amethome .amet-hero { padding:56px 0 44px; }
	#amethome .amet-hero__cta,
	#amethome .amet-footcta__actions { align-items:stretch; flex-direction:column; }
	#amethome .amet-hero__cta .amet-btn,
	#amethome .amet-footcta__actions .amet-btn { width:100%; }
}