/* =========================================================================
   Atashk Child — main.css
   Red + white ranking site. Mobile-first. All theme colors are CSS variables:
   change --c-red in ONE place to recolor the whole site.
   ========================================================================= */

:root {
	/* --- Brand colors (single source of truth) --- */
	--c-red:        #D0021B; /* primary — extract from Boda logo when available */
	--c-red-dark:   #B70218; /* ~12% darker, hover */
	--c-red-tint:   #FDF2F4; /* 5% tint, section backgrounds */
	--c-white:      #FFFFFF;
	--c-off-white:  #F7F7F8;
	--c-text:       #1A1A1A;

	/* --- Derived --- */
	--c-border:  #E6E6E9;
	--c-muted:   #6B6B70;
	--c-gold:    #E8B008; /* star fill */
	--c-boda-base: #4B2E83; /* deep purple base behind the Boda logo (art is near-white on transparent) */
	--c-trust:      #16A34A; /* green trust dot */
	--c-text-muted: #6B6B70; /* muted footer / trust text */

	--radius:    12px;
	--radius-sm: 8px;
	--shadow:    0 2px 8px rgba(0,0,0,.06);
	--shadow-lg: 0 8px 28px rgba(208,2,27,.12);
	--maxw:      1120px;

	--font-cjk: "Noto Sans TC","Noto Sans SC","PingFang HK","PingFang TC","PingFang SC",
		"Microsoft JhengHei","Microsoft YaHei","Hiragino Sans GB",-apple-system,
		BlinkMacSystemFont,"Segoe UI",Roboto,"Heiti TC",sans-serif;
}

/* --- Base --- */
body {
	font-family: var(--font-cjk);
	color: var(--c-text);
	background: var(--c-white);
	line-height: 1.75; /* CJK readability */
}
.atashk-page { max-width: var(--maxw); margin: 0 auto; padding: 0 16px; }
.atashk-page h1, .atashk-page h2, .atashk-page h3 { line-height: 1.4; color: var(--c-text); }
.atashk-page h2 { font-size: 1.5rem; margin: 1.6em 0 .6em; padding-left: 12px; border-left: 5px solid var(--c-red); }
.atashk-prose p { margin: 0 0 1em; }
.atashk-prose strong { color: var(--c-red-dark); }
a { color: var(--c-red-dark); }

/* --- Site header (GeneratePress masthead) --- */
.site-header { background: var(--c-white); border-bottom: 1px solid var(--c-border); }
.site-header .inside-header { padding: 14px 16px; }
/* Logo replaces the text site title (generate_settings[hide_title]). The
   .main-title rules below are kept so the text title still looks right if it
   is ever switched back on. */
.site-logo { display: flex; align-items: center; margin: 0; }
.site-logo a { display: block; line-height: 0; }
.site-header .site-logo img.header-image {
	height: 34px; width: auto; max-width: none; display: block;
}
.main-title { margin: 0; font-size: 1.5rem; line-height: 1.2; }
.main-title a { color: var(--c-red); font-weight: 800; text-decoration: none; letter-spacing: .01em; }
.main-title a:hover { color: var(--c-red-dark); }
.site-description { display: none; } /* tagline hidden */

/* --- Primary nav (red bar, one coherent flex row) --- */
.atashk-nav { background: var(--c-red); color: #fff; }
.atashk-nav__inner {
	max-width: var(--maxw); margin: 0 auto; padding: 0 8px;
	display: flex; align-items: center; flex-wrap: nowrap;
}
/* menu */
.atashk-nav__list { list-style: none; display: flex; flex-wrap: wrap; margin: 0; padding: 0; align-items: center; }
.atashk-nav__list > li { margin: 0; }
.atashk-nav__list > li > a {
	display: block; color: #fff; text-decoration: none; font-size: .95rem;
	padding: 12px 16px; line-height: 1.2; white-space: nowrap;
	border-bottom: 3px solid transparent; transition: background .15s;
}
.atashk-nav__list > li > a:hover,
.atashk-nav__list > li > a:focus { background: var(--c-red-dark); color: #fff; }
.atashk-nav__list > li > a.is-current { border-bottom-color: #fff; font-weight: 700; }

/* nav CTA pill — sits after the language switcher, desktop only */
.atashk-nav__cta { display: flex; align-items: center; margin-left: 8px; flex: 0 0 auto; }
@media (max-width: 768px) { .atashk-nav__cta { display: none; } }

/* language switcher — pinned far right, horizontal, no bullets */
.atashk-nav__lang {
	list-style: none; display: flex; align-items: center; gap: 0;
	margin: 0 4px 0 auto; padding: 0;
}
.atashk-nav__lang > li { margin: 0; }
.atashk-nav__lang > li + li { border-left: 1px solid rgba(255,255,255,.5); }
.atashk-nav__lang > li > a {
	display: block; color: #fff; text-decoration: none; opacity: .9;
	padding: 12px 12px; line-height: 1.2; min-width: 20px; text-align: center;
}
.atashk-nav__lang > li > a:hover { opacity: 1; background: var(--c-red-dark); }
.atashk-nav__lang > li.is-current > a { font-weight: 800; opacity: 1; text-decoration: underline; }

/* hamburger toggle — hidden on desktop */
.atashk-nav__toggle-cb { display: none; }
.atashk-nav__toggle { display: none; }
.atashk-nav__burger, .atashk-nav__burger::before, .atashk-nav__burger::after {
	display: block; width: 22px; height: 2px; background: #fff; position: relative; transition: .2s;
}
.atashk-nav__burger::before, .atashk-nav__burger::after { content: ""; position: absolute; left: 0; }
.atashk-nav__burger::before { top: -7px; }
.atashk-nav__burger::after { top: 7px; }

/* logo box (white, object-fit contain) */
.atashk-logobox {
	display: inline-flex; align-items: center; justify-content: center;
	width: 120px; height: 60px; background: #fff; border: 1px solid var(--c-border);
	border-radius: 8px; padding: 6px; box-sizing: border-box; flex: 0 0 auto;
}
.atashk-logobox--lg { width: 150px; height: 74px; }
.atashk-logobox--sm { width: 72px; height: 40px; padding: 4px; }
/* Boda logo art is near-white on transparent -> needs a purple base to read.
   Same dimensions/object-fit/border-radius as the (white) Wabo box so cards align. */
.atashk-logobox--boda { background: var(--c-boda-base); border-color: var(--c-boda-base); }
.atashk-logo { width: 100%; height: 100%; object-fit: contain; display: block; }

/* --- Nav: mobile (<=767px) — hamburger + absolute dropdown; the bar row
       keeps the toggle (left) and language switcher (right) always visible. --- */
@media (max-width: 767px) {
	.atashk-nav { position: relative; }
	.atashk-nav__inner { flex-wrap: nowrap; padding: 0; }
	.atashk-nav__toggle {
		display: flex; align-items: center; justify-content: center;
		width: 48px; height: 48px; cursor: pointer; order: 1; -webkit-tap-highlight-color: transparent;
	}
	.atashk-nav__lang { order: 2; margin: 0 4px 0 auto; }
	.atashk-nav__lang > li > a { padding: 14px 12px; min-height: 20px; } /* ~48px tap target */
	/* menu becomes an absolute dropdown so it never disturbs the bar row */
	.atashk-nav__list {
		order: 3; position: absolute; top: 100%; left: 0; right: 0; z-index: 50;
		flex-direction: column; background: var(--c-red); display: none;
		box-shadow: var(--shadow-lg); border-top: 1px solid rgba(255,255,255,.25);
	}
	.atashk-nav__toggle-cb:checked ~ .atashk-nav__list { display: flex; }
	.atashk-nav__list > li { width: 100%; }
	.atashk-nav__list > li > a {
		padding: 14px 16px; /* >=44px tap target */
		border-bottom: 1px solid rgba(255,255,255,.15); border-left: 0;
	}
	.atashk-nav__list > li > a.is-current { border-bottom: 1px solid rgba(255,255,255,.15); background: var(--c-red-dark); }
	/* GP's .inside-header is a flex row, so centre the logo with justify-content
	   (text-align alone would not move it). Matches how the text title used to sit. */
	.site-header .inside-header { padding: 12px 16px; text-align: center; justify-content: center; }
	.main-title { font-size: 1.3rem; }
}

/* --- Hero --- */
.atashk-hero { text-align: center; padding: 32px 0 8px; }
.atashk-hero h1 { font-size: 1.7rem; margin: 0 0 .5em; }
.atashk-hero__lead { color: var(--c-muted); max-width: 760px; margin: 0 auto; text-align: left; }

/* --- Buttons --- */
.atashk-btn {
	display: inline-block; text-align: center; font-weight: 700;
	padding: 13px 20px; border-radius: var(--radius-sm); text-decoration: none;
	transition: background .15s, color .15s; border: 2px solid var(--c-red); cursor: pointer;
}
.atashk-btn--primary { background: var(--c-red); color: #fff; }
.atashk-btn--primary:hover { background: var(--c-red-dark); border-color: var(--c-red-dark); color: #fff; }
.atashk-btn--outline { background: #fff; color: var(--c-red-dark); }
.atashk-btn--outline:hover { background: var(--c-red-tint); }
.atashk-btn--sm { padding: 9px 14px; font-size: .9rem; }
/* Nav-bar pill — white on red so it reads as a button, not a nav link. */
.atashk-btn--nav {
	background: #fff; color: var(--c-red); border-color: #fff;
	font-weight: 800; padding: 8px 16px; font-size: .9rem; white-space: nowrap;
}
.atashk-btn--nav:hover, .atashk-btn--nav:focus { background: var(--c-red-tint); color: var(--c-red-dark); border-color: var(--c-red-tint); }

/* --- Stars --- */
.atashk-stars { display: inline-flex; align-items: center; gap: 2px; }
.atashk-star { color: var(--c-border); font-size: 1.05rem; line-height: 1; }
.atashk-star.is-full { color: var(--c-gold); }
.atashk-star.is-half { position: relative; color: var(--c-border); }
.atashk-star.is-half::before { content: "★"; position: absolute; left: 0; width: 50%; overflow: hidden; color: var(--c-gold); }
.atashk-stars__num { margin-left: 6px; font-weight: 700; color: var(--c-text); font-size: .95rem; }

/* --- Ranking cards --- */
.atashk-rankcards { display: grid; grid-template-columns: 1fr; gap: 18px; margin: 22px 0; }
.atashk-card {
	position: relative; border: 1px solid var(--c-border); border-radius: var(--radius);
	background: #fff; padding: 22px 18px 18px; box-shadow: var(--shadow);
}
.atashk-card.is-top { border-color: var(--c-red); box-shadow: var(--shadow-lg); }
.atashk-card__badge {
	position: absolute; top: -14px; left: 18px; background: var(--c-red); color: #fff;
	font-weight: 800; padding: 4px 12px; border-radius: 20px; font-size: .95rem;
}
.atashk-card.is-top .atashk-card__badge { background: var(--c-red); }
.atashk-card__head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
/* logo sizing handled by .atashk-logobox / .atashk-logo */
.atashk-card__name { margin: 0 0 4px; font-size: 1.25rem; }
.atashk-card__facts { list-style: none; margin: 0 0 12px; padding: 12px 0; border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); display: grid; gap: 6px; }
.atashk-card__facts li { display: flex; justify-content: space-between; gap: 12px; }
.atashk-card__facts span { color: var(--c-muted); }
.atashk-card__facts strong { color: var(--c-text); text-align: right; }
.atashk-card__pros { margin: 0 0 16px; padding-left: 20px; }
.atashk-card__pros li { margin: 4px 0; }
.atashk-card__cta { display: grid; gap: 10px; }
.atashk-card__cta .atashk-btn { width: 100%; }

/* --- Tables --- */
.atashk-table-wrap { overflow-x: auto; }
.atashk-table { width: 100%; border-collapse: collapse; min-width: 480px; }
.atashk-table th, .atashk-table td { padding: 12px 14px; border: 1px solid var(--c-border); text-align: left; vertical-align: top; }
.atashk-table thead th { background: var(--c-red); color: #fff; }
.atashk-th-brand { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; }
.atashk-th-name { white-space: nowrap; }
.atashk-table tbody th[scope="row"] { background: var(--c-red-tint); color: var(--c-red-dark); white-space: nowrap; }
.atashk-table--facts { min-width: 0; }
.atashk-table--facts th[scope="row"] { width: 38%; }

/* --- Sections --- */
/* --- CTA banners (mid-content brand strip + dual-brand closer) --- */
.atashk-ctabar {
	display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap;
	margin: 26px 0; padding: 16px 18px;
	background: var(--c-red-tint); border: 1px solid var(--c-red);
	border-radius: var(--radius);
}
.atashk-ctabar__brand { display: flex; align-items: center; gap: 12px; flex: 1 1 240px; min-width: 0; }
.atashk-ctabar__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.atashk-ctabar__name { color: var(--c-red-dark); font-weight: 800; }
.atashk-ctabar__pitch { color: var(--c-text); font-size: .9rem; line-height: 1.4; }
.atashk-ctabar__heading { flex: 1 1 200px; margin: 0; font-weight: 800; font-size: 1.1rem; color: var(--c-red-dark); }
.atashk-ctabar__actions { display: flex; gap: 10px; flex-wrap: wrap; flex: 0 0 auto; }
.atashk-ctabar__actions .atashk-btn { flex: 1 1 auto; }
/* Mobile: stack and let the buttons span the full width. */
@media (max-width: 600px) {
	.atashk-ctabar { flex-direction: column; align-items: stretch; }
	.atashk-ctabar__actions { width: 100%; }
	.atashk-ctabar__actions .atashk-btn { width: 100%; }
}

/* Comparison-table CTA row */
.atashk-table__ctarow td { text-align: center; }
.atashk-table__ctarow .atashk-btn { width: 100%; }

/* --- Sticky mobile CTA bar (<=768px) --- */
.atashk-sticky { display: none; }
@media (max-width: 768px) {
	/* Space reserved server-side via the body class, so there is no shift when
	   the bar paints, and none when it hides over the footer. */
	body.atashk-has-sticky { padding-bottom: calc(57px + env(safe-area-inset-bottom, 0px)); }
	body.atashk-sticky-dismissed { padding-bottom: 0; }

	.atashk-sticky {
		display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
		background: #fff; border-top: 1px solid var(--c-border);
		box-shadow: 0 -2px 10px rgba(0,0,0,.10);
		padding-bottom: env(safe-area-inset-bottom, 0px);
		transition: transform .25s ease;
	}
	/* Fixed 56px so the reserved body padding below matches the bar exactly. */
	.atashk-sticky__inner {
		display: flex; align-items: center; gap: 10px;
		height: 56px; padding: 0 10px; box-sizing: border-box;
	}
	.atashk-sticky__logo { flex: 0 0 auto; }
	.atashk-sticky .atashk-logobox--sm { width: 52px; height: 30px; }
	.atashk-sticky__text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; line-height: 1.25; }
	.atashk-sticky__name { font-size: .82rem; font-weight: 800; color: var(--c-red-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.atashk-sticky__pitch { font-size: .76rem; color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.atashk-sticky .atashk-btn { flex: 0 0 auto; padding: 10px 16px; font-size: .9rem; }
	.atashk-sticky__close {
		flex: 0 0 auto; width: 30px; height: 30px; line-height: 1;
		background: none; border: 0; color: var(--c-muted); font-size: 1.4rem;
		cursor: pointer; padding: 0; -webkit-tap-highlight-color: transparent;
	}
	/* Slid away while the footer trust strip is on screen. */
	body.atashk-sticky-at-footer .atashk-sticky { transform: translateY(100%); }
	body.atashk-sticky-dismissed .atashk-sticky { display: none; }
}
@media (prefers-reduced-motion: reduce) { .atashk-sticky { transition: none; } }

.atashk-section { margin: 30px 0; }
.atashk-section--tint { background: var(--c-red-tint); border-radius: var(--radius); padding: 8px 20px 20px; }

/* --- Rating criteria grid --- */
.atashk-criteria { display: grid; grid-template-columns: 1fr; gap: 14px; }
.atashk-criteria__item { border: 1px solid var(--c-border); border-radius: var(--radius-sm); padding: 16px; background: var(--c-off-white); }
.atashk-criteria__item h3 { margin: 0 0 6px; color: var(--c-red-dark); font-size: 1.1rem; }
.atashk-criteria__item p { margin: 0; color: var(--c-muted); }

/* --- Category teasers --- */
.atashk-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.atashk-cats__item {
	display: flex; align-items: center; justify-content: center; text-align: center;
	min-height: 72px; padding: 14px; border: 1px solid var(--c-border); border-radius: var(--radius-sm);
	text-decoration: none; color: var(--c-text); font-weight: 600; background: #fff; transition: all .15s;
}
.atashk-cats__item:hover { border-color: var(--c-red); background: var(--c-red-tint); color: var(--c-red-dark); }

/* Image variant — transparent-background artwork drawn CONTAINED (never cropped)
   on a light themed base, dark label underneath. The artwork sits in the top 85%
   of the card and the label owns the bottom 15%, so the two never overlap. */
.atashk-cats__item--img {
	position: relative; overflow: hidden; isolation: isolate;
	min-height: 120px; padding: 0;
	background: linear-gradient(135deg, #fff, var(--c-red-tint));
}
.atashk-cats__art {
	position: absolute; left: 0; right: 0; top: 0; height: 85%; z-index: 0;
	display: flex; align-items: center; justify-content: center;
	transition: transform .3s ease;
}
.atashk-cats__art img {
	display: block; width: auto; height: auto;
	max-width: 86%; max-height: 100%; object-fit: contain;
}
.atashk-cats__label {
	position: absolute; left: 0; right: 0; bottom: 0; height: 15%; z-index: 1;
	display: flex; align-items: center; justify-content: center;
	padding: 0 8px; font-size: .85rem; line-height: 1.2;
	color: var(--c-text); font-weight: 700; text-align: center;
}
/* Must out-specify .atashk-cats__item:hover, which would otherwise repaint the base. */
.atashk-cats__item--img:hover,
.atashk-cats__item--img:focus-visible {
	border-color: var(--c-red);
	background: linear-gradient(135deg, #fff, var(--c-red-tint));
}
.atashk-cats__item--img:hover .atashk-cats__label,
.atashk-cats__item--img:focus-visible .atashk-cats__label { color: var(--c-red); }
.atashk-cats__item--img:hover .atashk-cats__art,
.atashk-cats__item--img:focus-visible .atashk-cats__art { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
	.atashk-cats__art { transition: none; }
	.atashk-cats__item--img:hover .atashk-cats__art,
	.atashk-cats__item--img:focus-visible .atashk-cats__art { transform: none; }
}

/* --- Mini ranking block --- */
.atashk-mini { margin: 24px 0; border: 1px solid var(--c-border); border-radius: var(--radius); padding: 16px; background: var(--c-off-white); }
.atashk-mini__title { margin: 0 0 12px; font-size: 1.2rem; border-left: 5px solid var(--c-red); padding-left: 12px; }
.atashk-mini__grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.atashk-mini__card { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px 12px; background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-sm); padding: 12px; }
.atashk-mini__card.is-top { border-color: var(--c-red); }
.atashk-mini__badge { grid-row: span 2; background: var(--c-red); color: #fff; font-weight: 800; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.atashk-mini__body { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.atashk-mini__name { font-weight: 700; }
.atashk-mini__cta { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.atashk-mini__cta .atashk-btn--primary { width: 100%; }

/* --- FAQ --- */
.atashk-faq { margin: 30px 0; }
.atashk-faq__list { margin: 0; }
.atashk-faq__item { border: 1px solid var(--c-border); border-radius: var(--radius-sm); padding: 14px 16px; margin: 0 0 10px; background: #fff; }
.atashk-faq__item dt { font-weight: 700; color: var(--c-red-dark); margin: 0 0 6px; }
.atashk-faq__item dd { margin: 0; color: var(--c-text); }

/* --- Brand page --- */
.atashk-brand__hero { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 24px 0 8px; position: relative; }
.atashk-brand__badge { background: var(--c-red); color: #fff; font-weight: 800; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
/* brand hero logo sizing handled by .atashk-logobox--lg */
.atashk-brand__hero h1 { font-size: 1.5rem; margin: 0 0 6px; }
.atashk-tldr { background: var(--c-red-tint); border: 1px solid var(--c-red); border-radius: var(--radius); padding: 8px 20px 20px; margin: 20px 0; }
.atashk-tldr h2 { border: 0; padding: 0; margin: 14px 0 8px; }
.atashk-tldr__cta { margin-top: 12px; }
.atashk-tldr__cta .atashk-btn { width: 100%; }

/* --- Pros / cons --- */
.atashk-proscons { display: grid; grid-template-columns: 1fr; gap: 14px; }
.atashk-proscons__col { border: 1px solid var(--c-border); border-radius: var(--radius-sm); padding: 8px 18px 16px; }
.atashk-proscons__pros { background: #F3FBF4; }
.atashk-proscons__cons { background: var(--c-off-white); }
.atashk-proscons h2 { border: 0; padding: 0; }
.atashk-proscons__pros li::marker { content: "✓ "; color: #1a8a37; }
.atashk-proscons__cons li::marker { content: "– "; color: var(--c-muted); }

/* --- Steps --- */
.atashk-steps__list { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.atashk-steps__list li { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px dashed var(--c-border); }
.atashk-steps__num { flex: 0 0 34px; height: 34px; background: var(--c-red); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; }
.atashk-steps__list p { margin: 4px 0 0; color: var(--c-muted); }
.atashk-steps__login { margin-top: 12px; }

/* --- Verdict --- */
.atashk-verdict { background: var(--c-off-white); border-radius: var(--radius); padding: 8px 20px 20px; }
.atashk-verdict__cta .atashk-btn { width: 100%; }

/* --- Funnel --- */
.atashk-funnel__blocks { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 20px 0; }
.atashk-funnel__block { position: relative; border: 1px solid var(--c-border); border-radius: var(--radius); padding: 20px; text-align: center; background: #fff; }
.atashk-funnel__block.is-top { border-color: var(--c-red); box-shadow: var(--shadow-lg); }
.atashk-funnel__rank { position: absolute; top: -12px; left: 20px; background: var(--c-red); color: #fff; font-weight: 800; padding: 3px 12px; border-radius: 20px; }
.atashk-funnel__block h2 { border: 0; padding: 0; justify-content: center; }
.atashk-funnel .atashk-logobox { margin: 6px auto; }
.atashk-funnel__cta { display: grid; gap: 10px; margin-top: 12px; }
.atashk-funnel__cta .atashk-btn--primary { width: 100%; }

/* --- Footer trust strip --- */
.atashk-trust { background: var(--c-off-white); border-top: 1px solid var(--c-border); padding: 22px 16px 6px; }
.atashk-trust__inner { max-width: var(--maxw); margin: 0 auto; text-align: center; }
.atashk-trust__badges { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; }
.atashk-trust__badges li { display: flex; align-items: center; gap: 7px; color: var(--c-text-muted); font-size: .85rem; }
.atashk-trust__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-trust); flex: 0 0 auto; }
.atashk-trust__pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; }
.atashk-trust__pills a { display: inline-block; border: 1px solid var(--c-border); border-radius: 10px; padding: 7px 15px; font-size: .85rem; color: var(--c-text-muted); text-decoration: none; transition: border-color .15s, color .15s; }
.atashk-trust__pills a:hover, .atashk-trust__pills a:focus { border-color: var(--c-red); color: var(--c-red-dark); }
.atashk-trust__disclosure { color: var(--c-text-muted); font-size: .78rem; line-height: 1.6; margin: 14px auto 4px; max-width: 660px; }

/* --- Responsible gambling line --- */
.atashk-rg { max-width: var(--maxw); margin: 0 auto; padding: 14px 16px; font-size: .82rem; color: var(--c-muted); border-top: 1px solid var(--c-border); text-align: center; }

@media (max-width: 480px) {
	/* badges wrap to a tidy 2x2 */
	.atashk-trust__badges { gap: 12px 0; }
	.atashk-trust__badges li { flex: 0 0 50%; justify-content: center; }
	.atashk-trust__pills a { padding: 10px 15px; } /* larger tap target */
}

/* --- Trust / legal pages: single column, readable measure (~760px) --- */
.atashk-legal .inside-article { max-width: 760px; margin-left: auto; margin-right: auto; }
.atashk-legal .entry-content { line-height: 1.85; }
.atashk-legal .entry-content h2 { font-size: 1.35rem; margin: 1.5em 0 .5em; padding-left: 12px; border-left: 5px solid var(--c-red); line-height: 1.4; }
.atashk-legal .entry-content ul, .atashk-legal .entry-content ol { padding-left: 1.4em; margin: 0 0 1em; }
.atashk-legal .entry-content li { margin: .4em 0; }
.atashk-legal .entry-content p { margin: 0 0 1em; }
.atashk-legal .entry-content a { color: var(--c-red-dark); }

/* =========================================================================
   Tablet / desktop
   ========================================================================= */
@media (min-width: 768px) {
	.site-header .site-logo img.header-image { height: 44px; }
	.atashk-hero h1 { font-size: 2.1rem; }
	.atashk-rankcards { grid-template-columns: 1fr 1fr; }
	.atashk-card__cta { grid-template-columns: 1fr 1fr; }
	.atashk-criteria { grid-template-columns: 1fr 1fr 1fr 1fr; }
	.atashk-cats { grid-template-columns: 1fr 1fr 1fr 1fr; }
	/* Narrower contexts (sibling categories) — grid modifier only, same cards. */
	.atashk-cats--cols-3 { grid-template-columns: repeat(3, 1fr); }
	.atashk-cats__item--img { min-height: 150px; }
	.atashk-cats__label { font-size: .95rem; }
	.atashk-mini__grid { grid-template-columns: 1fr 1fr; }
	.atashk-proscons { grid-template-columns: 1fr 1fr; }
	.atashk-funnel__blocks { grid-template-columns: 1fr 1fr; }
	.atashk-tldr__cta .atashk-btn, .atashk-verdict__cta .atashk-btn { width: auto; min-width: 260px; }
}