/*
Theme Name: Write Buddy
Theme URI: #
Author: HAMONI Inc.
Author URI: #
Description: One-page landing theme for the Write Buddy WordPress plugin. Header/hero/features/pricing/FAQ/footer, with an EN/JA/KO/ZH language switcher.
Version: 1.0.0
Requires at least: 6.6
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: write-buddy-theme
*/

/* ------------------------------------------------------------------------
   Reset & base
   ---------------------------------------------------------------------- */
/* Warm, all-light palette. --wb-bg-dark/--wb-bg-dark-alt/--wb-text-on-dark(-muted)/
   --wb-border-dark keep their original (dark-theme-era) names so no selector
   elsewhere in this file had to change, but they now resolve to warm, light
   values — there are no dark sections left in this theme. */
:root {
	--wb-bg: #ffffff;
	--wb-bg-alt: #fff3e7;
	--wb-bg-dark: #fff1e0;
	--wb-bg-dark-alt: #ffffff;
	--wb-text: #402a18;
	--wb-text-muted: #8a7360;
	--wb-text-on-dark: #402a18;
	--wb-text-on-dark-muted: #8a7360;
	--wb-border: #f2ddc3;
	--wb-border-dark: #f2ddc3;
	--wb-accent: #f4720d;
	--wb-accent-2: #fdba74;
	--wb-gradient: linear-gradient( 135deg, #fb923c 0%, #f4720d 100% );
	--wb-radius-lg: 20px;
	--wb-radius-md: 14px;
	--wb-radius-sm: 8px;
	--wb-shadow: 0 8px 30px rgba( 180, 100, 40, 0.1 );
	--wb-max-width: 1160px;
	--wb-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	/* .wb-header's own side inset (its distance from the viewport edge) —
	   the mobile drawer reads this too, so the two always match without
	   the same number needing to be kept in sync in two places. */
	--wb-header-inset: 16px;
}

@media ( max-width: 640px ) {
	:root {
		--wb-header-inset: 8px;
	}
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body.write-buddy-landing {
	margin: 0;
	font-family: var( --wb-font );
	color: var( --wb-text );
	background: var( --wb-bg );
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	display: block;
}

a {
	color: inherit;
}

.wb-container {
	max-width: var( --wb-max-width );
	margin: 0 auto;
	padding: 0 24px;
}

section {
	padding: 96px 0;
}

@media ( max-width: 640px ) {
	section {
		padding: 64px 0;
	}
}

.wb-eyebrow {
	display: inline-block;
	font-size: clamp( 0.68rem, calc( 0.61rem + 0.3vw ), 0.88rem );
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var( --wb-accent );
	background: rgba( 244, 114, 13, 0.1 );
	padding: 6px 14px;
	border-radius: 999px;
	margin-bottom: 20px;
}

.wb-section-head {
	max-width: 640px;
	margin: 0 auto 56px;
	text-align: center;
}

.wb-section-head h2 {
	font-size: clamp( 1.8rem, 3vw, 2.4rem );
	margin: 0 0 12px;
	letter-spacing: -0.01em;
}

@media ( min-width: 861px ) {
	#features .wb-section-head {
		max-width: 900px;
	}

	#features .wb-section-head h2 {
		white-space: nowrap;
	}
}

.wb-section-head p {
	color: var( --wb-text-muted );
	font-size: clamp( 0.892rem, calc( 0.8rem + 0.394vw ), 1.155rem );
	margin: 0;
}

.wb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: inherit;
	font-size: clamp( 0.807rem, calc( 0.724rem + 0.357vw ), 1.045rem );
	font-weight: 600;
	padding: 12px 22px;
	border-radius: 999px;
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.wb-btn:hover {
	transform: translateY( -1px );
}

.wb-btn--primary {
	background: var( --wb-gradient );
	color: #fff;
	box-shadow: 0 3px 10px rgba( 244, 114, 13, 0.3 );
}

.wb-btn--secondary {
	background: transparent;
	color: var( --wb-text );
	border-color: var( --wb-border );
}

.wb-btn--on-dark {
	background: transparent;
	color: var( --wb-text-on-dark );
	border-color: var( --wb-border-dark );
}

.wb-btn--sm {
	padding: 8px 16px;
	font-size: clamp( 0.722rem, calc( 0.648rem + 0.319vw ), 0.935rem );
}

/* ------------------------------------------------------------------------
   i18n toggling — each translatable block/inline unit exists once per
   language; only the block matching <body data-lang="xx"> is shown.
   ---------------------------------------------------------------------- */
[data-i18n] {
	display: none;
}

body.write-buddy-landing[data-lang="en"] [data-i18n="en"],
body.write-buddy-landing[data-lang="ja"] [data-i18n="ja"],
body.write-buddy-landing[data-lang="ko"] [data-i18n="ko"],
body.write-buddy-landing[data-lang="zh"] [data-i18n="zh"] {
	display: var( --wb-i18n-display, block );
}

span[data-i18n],
a[data-i18n],
button[data-i18n] {
	--wb-i18n-display: inline;
}

/* The only li[data-i18n] usage (pricing features) uses a custom ::before
   bullet with list-style:none, so "flex" (not "list-item") is the display
   it actually needs when shown. */
li[data-i18n] {
	--wb-i18n-display: flex;
}

/* ------------------------------------------------------------------------
   Header
   ---------------------------------------------------------------------- */
.wb-header {
	position: sticky;
	top: 16px;
	z-index: 100;
	width: calc( 100% - ( var( --wb-header-inset ) * 2 ) );
	/* Deliberately wider than --wb-max-width (1160px) — more breathing room
	   for the nav row than the rest of the page's content column needs.
	   .wb-header__inner gets the same value below, so the extra width
	   actually reaches the nav instead of just padding the header shell. */
	max-width: 1320px;
	margin: 16px auto 0;
	border: 1px solid var( --wb-border );
	border-radius: var( --wb-radius-lg );
	box-shadow: 0 8px 24px rgba( 64, 42, 24, 0.1 );
}

@media ( max-width: 640px ) {
	/* Also narrower than .wb-container's usual 24px side padding, for the
	   same reason as --wb-header-inset shrinking here (see :root) — more of
	   that reclaimed width actually reaches the logo/nav content instead of
	   just the header's own inset. */
	.wb-header__inner {
		padding-left: 16px;
		padding-right: 16px;
	}
}

/*
 * WordPress's admin toolbar (visible only to logged-in users) pushes the
 * whole page down by 32px (desktop) / 46px (<=782px, WP's own breakpoint)
 * via a margin-top on <html>, and sits fixed at the real viewport top with
 * a very high z-index. Our sticky header needs the same offset (plus its
 * own 16px floating gap), or it scrolls up underneath the toolbar instead
 * of sticking just below it.
 */
body.write-buddy-landing.admin-bar .wb-header {
	top: 48px;
}

@media ( max-width: 782px ) {
	body.write-buddy-landing.admin-bar .wb-header {
		top: 62px;
	}
}

/*
 * The frosted-glass effect lives on a ::before instead of directly on
 * .wb-header: `backdrop-filter` (like `filter`/`transform`) makes an element
 * a containing block for its `position: fixed` descendants. Since the
 * mobile menu drawer (.wb-nav, see the max-width:860px block below) becomes
 * `position: fixed` when open and lives inside .wb-header, applying
 * backdrop-filter directly to .wb-header trapped the drawer inside the
 * ~72px header box instead of the viewport, squashing it to nearly no
 * height. A ::before has no descendants, so it can't cause that problem.
 */
.wb-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: rgba( 255, 255, 255, 0.85 );
	backdrop-filter: saturate( 180% ) blur( 12px );
}

.wb-header__inner {
	/* Overrides .wb-container's max-width:1160px — matches .wb-header's own
	   wider max-width so the extra room actually reaches the nav row. */
	max-width: 1320px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	height: 72px;
}

.wb-logo {
	display: flex;
	align-items: center;
	text-decoration: none;
	flex-shrink: 0;
}

.wb-logo__img {
	height: clamp( 39.1px, calc( 34.24px + 1.296vw ), 52.9px );
	width: auto;
	display: block;
}

/* Below 1160px the logo shrinks much more aggressively than the formula
   above — freeing up room for the nav row, which otherwise overflows the
   header on tablet widths (861-1159px, where the full nav is visible but
   the header itself isn't as wide as true desktop). */
@media ( max-width: 1159px ) {
	.wb-logo__img {
		/* Floor raised from 26px to 34px — at phone widths the logo was
		   reading smaller/less prominent than the language pill next to it. */
		height: clamp( 34px, calc( 31.13px + 0.765vw ), 40px );
	}
}

.wb-nav {
	display: flex;
	align-items: center;
	gap: 28px;
}

.wb-nav__links {
	display: flex;
	align-items: center;
	gap: 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.wb-nav__links a {
	text-decoration: none;
	font-size: clamp( 0.782rem, calc( 0.701rem + 0.346vw ), 1.012rem );
	font-weight: 500;
	color: var( --wb-text-muted );
}

.wb-nav__links a:hover {
	color: var( --wb-text );
}

/* "Product Screens" stays out of the desktop inline nav (already tight
   with 5 other items) but should still show up in the mobile drawer,
   which reuses this exact <ul> — hidden here, then un-hidden inside the
   max-width:860px block below where the drawer is the only way this
   list is ever shown. */
.wb-nav__item--drawer-only {
	display: none;
}

/* The nav items plus the longer "Start Free Trial Now" / "今すぐ無料
   トライアル"-style CTA copy no longer fit comfortably at the narrow end
   of the desktop (non-hamburger) range — tighten the gaps, cap the font
   size, and shrink the CTA button only in that band so nothing wraps
   mid-word; wider screens keep the more generous default spacing. Split
   into two sub-bands so the cramped-looking, smallest text/gap combo
   only kicks in right at the tightest edge (861-949px) — from 950px up
   there's enough room to loosen both back up a bit. */
@media ( min-width: 861px ) and ( max-width: 949px ) {
	.wb-nav {
		gap: 6px;
	}

	.wb-nav__links {
		gap: 6px;
	}

	.wb-nav__links a {
		font-size: 0.66rem;
	}

	.wb-header__actions .wb-btn--sm.wb-header-cta {
		padding: 8px 12px;
		font-size: 0.66rem;
	}
}

@media ( min-width: 950px ) and ( max-width: 1100px ) {
	.wb-nav {
		gap: 12px;
	}

	.wb-nav__links {
		gap: 12px;
	}

	.wb-nav__links a {
		font-size: 0.72rem;
	}

	.wb-header__actions .wb-btn--sm.wb-header-cta {
		padding: 8px 12px;
		font-size: 0.72rem;
	}
}

.wb-lang-dropdown {
	position: relative;
}

.wb-lang-dropdown__trigger {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	gap: 4px;
	border: 1px solid var( --wb-border );
	background: var( --wb-bg-alt );
	font-family: inherit;
	font-size: clamp( 0.663rem, calc( 0.594rem + 0.293vw ), 0.858rem );
	font-weight: 600;
	padding: 6px 10px;
	border-radius: 999px;
	cursor: pointer;
	color: var( --wb-text );
	white-space: nowrap;
}

.wb-lang-dropdown__chevron {
	width: 12px;
	height: 12px;
	flex-shrink: 0;
	transition: transform 0.15s ease;
}

.wb-lang-dropdown.is-open .wb-lang-dropdown__chevron {
	transform: rotate( 180deg );
}

.wb-lang-dropdown__menu {
	display: none;
	position: absolute;
	top: calc( 100% + 8px );
	right: 0;
	min-width: 140px;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: #fff;
	border: 1px solid var( --wb-border );
	border-radius: var( --wb-radius-sm );
	box-shadow: var( --wb-shadow );
	z-index: 10;
}

.wb-lang-dropdown.is-open .wb-lang-dropdown__menu {
	display: block;
}

.wb-lang-dropdown__menu a {
	display: block;
	padding: 8px 12px;
	border-radius: 6px;
	font-size: clamp( 0.765rem, calc( 0.686rem + 0.338vw ), 0.99rem );
	font-weight: 500;
	text-decoration: none;
	color: var( --wb-text );
}

.wb-lang-dropdown__menu a:hover {
	background: var( --wb-bg-alt );
}

.wb-lang-dropdown__menu a[aria-current="true"] {
	color: var( --wb-accent );
	font-weight: 700;
}

.wb-header__actions {
	display: flex;
	align-items: center;
	gap: 16px;
}

.wb-nav-toggle {
	display: none;
	border: none;
	background: transparent;
	border-radius: var( --wb-radius-sm );
	width: 40px;
	height: 40px;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.wb-nav-toggle span,
.wb-nav-toggle span::before,
.wb-nav-toggle span::after {
	display: block;
	width: 18px;
	height: 2px;
	border-radius: 1px;
	background: var( --wb-accent );
	position: relative;
	transition: transform 0.3s cubic-bezier( 0.4, 0, 0.2, 1 ), opacity 0.2s ease;
}

.wb-nav-toggle span::before,
.wb-nav-toggle span::after {
	content: "";
	position: absolute;
	left: 0;
	transform: translateY( -6px );
}

.wb-nav-toggle span::after {
	transform: translateY( 6px );
}

/* Hamburger -> X. JS toggles aria-expanded on click, so no extra class is needed. */
.wb-nav-toggle[aria-expanded="true"] span {
	background: transparent;
}

.wb-nav-toggle[aria-expanded="true"] span::before {
	transform: translateY( 0 ) rotate( 45deg );
}

.wb-nav-toggle[aria-expanded="true"] span::after {
	transform: translateY( 0 ) rotate( -45deg );
}

@media ( max-width: 860px ) {
	.wb-nav__links {
		display: none;
	}

	.wb-nav-toggle {
		display: flex;
	}

	/* .wb-nav collapses to display:none at this width, so with only .wb-logo,
	   .wb-header__actions and .wb-nav-toggle left, justify-content:space-between
	   would float the dropdown alone in the middle of the header. Pushing it
	   flush against the toggle button reads better. */
	.wb-header__actions {
		margin-left: auto;
	}

	/* Tighter than the 24px .wb-header__inner gap used at wider widths —
	   with only the lang dropdown and the toggle left on the right, 24px
	   reads as an oversized, disconnected gap between the two. */
	.wb-header__inner {
		gap: 10px;
	}

	.wb-header__actions .wb-btn--sm.wb-header-cta {
		display: none;
	}

	/* Floats as its own rounded card below the header, matching .wb-header's
	   look (same border/radius/shadow/side-inset, and an 8px gap under it)
	   instead of a plain edge-to-edge rectangle. Sharing --wb-header-inset
	   with .wb-header means the two always line up without the same number
	   needing to be kept in sync in two places. */
	body.write-buddy-landing.wb-menu-open .wb-nav {
		display: flex;
		position: fixed;
		top: 96px;
		right: var( --wb-header-inset );
		bottom: 16px;
		left: var( --wb-header-inset );
		background: #fff;
		border: 1px solid var( --wb-border );
		border-radius: var( --wb-radius-lg );
		box-shadow: 0 8px 24px rgba( 64, 42, 24, 0.1 );
		flex-direction: column;
		align-items: stretch;
		padding: 24px;
		gap: 20px;
		overflow-y: auto;
	}

	/* Same reasoning as the .wb-header admin-bar rule above: the drawer's
	   fixed "top: 96px" (72px header + 16px floating gap + 8px gap under
	   the header) assumes the header sits flush at the real viewport top,
	   which isn't true when the WP admin toolbar is showing. */
	body.write-buddy-landing.admin-bar.wb-menu-open .wb-nav {
		top: calc( 72px + 16px + 8px + 32px );
	}

	body.write-buddy-landing.wb-menu-open .wb-nav__links {
		display: flex;
		flex-direction: column;
		gap: 18px;
	}

	body.write-buddy-landing.wb-menu-open .wb-nav__links a {
		font-size: clamp( 0.935rem, calc( 0.838rem + 0.413vw ), 1.21rem );
	}

	.wb-nav__item--drawer-only {
		display: block;
	}

	/*
	 * The language dropdown lives in .wb-header__actions, which is now a
	 * sibling of .wb-nav (not nested inside it) specifically so it stays
	 * visible in the header bar at every width — only the CTA button inside
	 * it still hides here (see the display:none rule above), reappearing as
	 * a floating button while the drawer is open, below.
	 */
	body.write-buddy-landing.wb-menu-open .wb-header-cta {
		display: flex;
		position: fixed;
		left: 24px;
		right: 24px;
		bottom: 24px;
		z-index: 101;
	}

	body.write-buddy-landing .wb-nav {
		display: none;
	}
}

/* WP's admin toolbar is 46px tall (not 32px) at its own <=782px breakpoint. */
@media ( max-width: 782px ) {
	body.write-buddy-landing.admin-bar.wb-menu-open .wb-nav {
		top: calc( 72px + 16px + 8px + 46px );
	}
}

@media ( min-width: 861px ) {
	.wb-nav {
		display: flex;
	}
}

/* ------------------------------------------------------------------------
   Hero
   ---------------------------------------------------------------------- */
.wb-hero {
	position: relative;
	background: var( --wb-bg-dark ) url( 'assets/img/fv-background.svg' ) no-repeat -90px -120px / 90%;
	color: var( --wb-text-on-dark );
	/* Pulled up by exactly the floating header's own reserved space (16px
	   margin + 72px height = 88px), with padding-top increased by the same
	   amount to compensate — so the hero's cream background extends up
	   behind the header (header sits on top via its own z-index:100)
	   instead of showing body's background there. Content position is
	   unaffected; only the background reaches further up. */
	margin-top: -88px;
	padding: 184px 0 0;
	overflow: hidden;
}

/* Tablet + SP: the background squiggle sits lower than on PC. */
@media ( max-width: 1159px ) {
	.wb-hero {
		background-position: -90px 20px;
	}
}

/* Decorative mascot. Below 1160px it perches on top of the hero screenshot
   (see landing-content.php — it's the first child of .wb-hero__shot),
   peeking out above the screenshot's top edge with its lower half hidden
   behind the screenshot (.wb-hero__shot-clip paints in front via the higher
   z-index below — see the max-width:1159px block). At 1160px+ it goes back
   to floating beside the copy near the CTA buttons instead — restored to
   its original position, so .wb-hero__shot deliberately stays
   position:static there and lets .wb-hero (below) be the containing block
   again. */
.wb-hero__mascot {
	display: block;
	position: absolute;
	z-index: 0;
	pointer-events: none;
	/* Fluid width: 148px at a 375px-wide phone, scaling continuously up to
	   260px at a 1160px+ viewport — one continuous ratio instead of a
	   148/210/260px jump at each breakpoint. */
	width: clamp( 148px, calc( 94.5px + 14.27vw ), 260px );
}

.wb-hero__mascot img {
	width: 100%;
	height: auto;
	display: block;
}

@media ( max-width: 1159px ) {
	.wb-hero__shot {
		position: relative;
	}

	.wb-hero__mascot {
		/* Peek tied to the same width formula (scaled by a constant -0.7
		   ratio) instead of its own independently-tuned clamp() — so how
		   far it pokes out stays a constant proportion of its own size at
		   every width from 375px to 1159px, with no breakpoint jump (the
		   phone tier and the tablet tier used to use different formulas
		   that didn't quite line up at the 641px seam). */
		top: calc( clamp( 148px, calc( 94.5px + 14.27vw ), 260px ) * -0.7 );
		right: clamp( 10px, calc( 7.134px + 0.764vw ), 16px );
	}

	.wb-hero__shot-clip {
		z-index: 1;
	}
}

@media ( min-width: 1160px ) {
	.wb-hero__mascot {
		top: 280px;
		right: max( -20px, calc( ( 100% - var( --wb-max-width ) ) / 2 - 60px ) );
	}
}

@media ( max-width: 640px ) {
	.wb-hero {
		padding: 152px 0 0;
	}
}

.wb-hero__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 56px;
	text-align: center;
}

.wb-hero h1 {
	font-size: clamp( 2.2rem, 5vw, 3.4rem );
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin: 0 0 20px;
}

.wb-hero__subtitle {
	max-width: 640px;
	margin: 0 auto 32px;
	color: var( --wb-text-on-dark-muted );
	font-size: clamp( 0.935rem, calc( 0.838rem + 0.413vw ), 1.21rem );
}

.wb-hero__ctas {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 18px;
}

.wb-hero__ctas .wb-btn {
	min-width: 230px;
}

.wb-hero__note {
	color: var( --wb-text-on-dark-muted );
	font-size: clamp( 0.722rem, calc( 0.648rem + 0.319vw ), 0.935rem );
	margin-bottom: 56px;
}

/* Placed after the plain .wb-hero__note rule above (same specificity, needs
   to come later in source order to actually win). One continuous formula
   from 85px (375px wide) to 155px (1159px wide) — matches the mascot's own
   continuous peek formula above so there's no seam at 640/641px either,
   instead of the phone and tablet tiers each having their own flat value.
   Buffer against the mascot's peek stays positive throughout (roughly
   7-35px), tightest around 500-640px wide. */
@media ( max-width: 1159px ) {
	.wb-hero__note {
		margin-bottom: clamp( 85px, calc( 51.518px + 8.929vw ), 155px );
	}
}

.wb-hero__shot {
	max-width: 100%;
}

/* ------------------------------------------------------------------------
   Screenshots (real images — hero shot + the 4 .wb-shot-card figures)
   ---------------------------------------------------------------------- */
.wb-shot-img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.wb-shot-card .wb-shot-img {
	border-radius: var( --wb-radius-lg ) var( --wb-radius-lg ) 0 0;
}

/* Clips the hero shot to ~55% of its own height, so its bottom ~45%
   bleeds out of view under the hero section — an intentional crop, not a
   layout bug. */
.wb-hero__shot-clip {
	position: relative;
	aspect-ratio: 16 / 5.5;
	border-radius: var( --wb-radius-lg ) var( --wb-radius-lg ) 0 0;
	overflow: hidden;
	box-shadow: 0 24px 50px rgba( 180, 100, 40, 0.22 );
	/* The real screenshot's own background is white, same as the section
	   right below the hero — without this, the bleed crop has no visible
	   edge and reads as one continuous white area instead of an
	   intentional fade. Dissolves the bottom of the screenshot into the
	   hero's own cream background instead of cutting it off sharply. */
	border: 1px solid rgba( 64, 42, 24, 0.08 );
}

.wb-hero__shot-clip::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient( to bottom, transparent 60%, var( --wb-bg-dark ) 100% );
	pointer-events: none;
}

.wb-hero__shot-clip .wb-shot-img {
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 0;
}

@media ( max-width: 640px ) {
	.wb-hero__inner {
		gap: 28px;
	}

	.wb-hero__ctas {
		flex-direction: column;
		align-items: stretch;
	}

	.wb-hero__ctas .wb-btn {
		width: 100%;
	}

	/* Show more of the screenshot on small screens — less bottom bleed than desktop. */
	.wb-hero__shot-clip {
		aspect-ratio: 16 / 8;
	}
}

/* ------------------------------------------------------------------------
   Section mascots (decorative)
   ---------------------------------------------------------------------- */
/* Shared by the features/screenshots/pricing decorative mascots.
   Mobile-first: an in-flow badge, pinned to the same side (left/right) it
   floats on at desktop — always visible, and since it's in normal flow it
   only ever adds height, never overlaps the grid/card content around it.
   At 1160px+, each variant switches to floating in the outer gutter that
   .wb-section-head's own 640px max-width already leaves clear on each side
   of the container. */
.wb-section-mascot {
	display: block;
	position: static;
	pointer-events: none;
}

.wb-section-mascot img {
	width: 100%;
	height: auto;
	display: block;
}

/* Fluid widths: 66px at a 375px-wide phone, scaling continuously up to
   170/180px at a 1160px+ viewport — one continuous ratio instead of a
   66/88/170(or 180)px jump at each breakpoint. Applies unconditionally so
   it stays continuous across the position:static -> absolute switch below. */
.wb-section-mascot--features,
.wb-section-mascot--pricing {
	width: clamp( 66px, calc( 16.32px + 13.25vw ), 170px );
}

.wb-section-mascot--screenshots {
	width: clamp( 66px, calc( 11.54px + 14.52vw ), 180px );
}

/* features/hero float left/top at desktop, so their in-flow mobile/tablet
   badge leads the section, aligned to the same left edge as .wb-container's
   own padding. */
.wb-section-mascot--features {
	margin: 0 auto 24px 24px;
}

/* screenshots floats right at desktop, so its in-flow badge also leads the
   section but aligned right instead. */
.wb-section-mascot--screenshots {
	margin: 0 24px 24px auto;
}

/* pricing floats bottom-right at desktop — matched here by placing the
   markup after the pricing card (see landing-content.php) and aligning
   right, so it trails the content on the same side instead of leading it. */
.wb-section-mascot--pricing {
	margin: 24px 24px 0 auto;
}

@media ( min-width: 1160px ) {
	.wb-section-mascot {
		position: absolute;
		top: 64px;
		margin: 0;
		z-index: 0;
	}

	.wb-section-mascot--features {
		left: max( 12px, calc( ( 100% - var( --wb-max-width ) ) / 2 - 20px ) );
	}

	.wb-section-mascot--screenshots {
		top: 90px;
		right: max( 12px, calc( ( 100% - var( --wb-max-width ) ) / 2 + 30px ) );
		/* Layered behind the screenshot cards (not just placed lower on the
		   page) — #screenshots gets its own stacking context below so this
		   only ever loses to siblings inside that section, never to
		   unrelated page content. */
		z-index: -1;
	}

	.wb-section-mascot--pricing {
		top: auto;
		bottom: 20px;
		right: max( 12px, calc( ( 100% - var( --wb-max-width ) ) / 2 - 20px ) );
	}
}

/* ------------------------------------------------------------------------
   Features
   ---------------------------------------------------------------------- */
#features {
	position: relative;
	overflow: hidden;
}

.wb-features-grid {
	position: relative;
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 24px;
}

@media ( max-width: 900px ) {
	.wb-features-grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( max-width: 640px ) {
	.wb-features-grid {
		grid-template-columns: 1fr;
	}
}

/* Below 1160px (SP + tablet): the mascot perches on top of the first card
   (same idea as the hero mascot over the FV screenshot — same width formula
   too, per request). It's position:absolute, so it's excluded from grid
   placement and doesn't become a 4th grid item. PC (1160px+) is untouched —
   .wb-section-mascot--features keeps its normal floating-near-heading
   behavior there. */
.wb-features-grid__mascot {
	display: none;
	pointer-events: none;
}

.wb-features-grid__mascot img {
	width: 100%;
	height: auto;
	display: block;
}

@media ( max-width: 1159px ) {
	.wb-section-mascot--features {
		display: none;
	}

	.wb-features-grid__mascot {
		display: block;
		position: absolute;
		left: 12px;
		z-index: 0;
		/* Same fluid width formula as .wb-hero__mascot, per request. */
		width: clamp( 148px, calc( 94.5px + 14.27vw ), 260px );
	}

	/* Opaque cards need to paint in front of the mascot (z-index:0 above),
	   the same trick as .wb-hero__shot-clip over the hero mascot. */
	.wb-feature-card {
		position: relative;
		z-index: 1;
	}
}

@media ( max-width: 640px ) {
	.wb-features-grid__mascot {
		top: -85px;
	}

	/* Enough clearance above the grid for the mascot's 85px peek. */
	#features .wb-section-head {
		margin-bottom: 110px;
	}
}

@media ( min-width: 641px ) and ( max-width: 1159px ) {
	.wb-features-grid__mascot {
		/* Smaller-scale peek than the hero's — capped so the gap below
		   doesn't need to grow as wide. */
		top: clamp( -145px, calc( 11.622px - 13.514vw ), -75px );
	}

	/* Capped max width so the gap never gets as wide as the hero's — just
	   enough clearance for the mascot's (smaller) peek above the grid. */
	#features .wb-section-head {
		margin-bottom: clamp( 100px, calc( 1.004px + 15.444vw ), 180px );
	}
}

.wb-feature-card {
	background: var( --wb-bg-alt );
	border: 1px solid var( --wb-border );
	border-radius: var( --wb-radius-md );
	padding: 28px;
}

.wb-feature-card__icon {
	width: clamp( 37.4px, calc( 32.75px + 1.239vw ), 50.6px );
	height: clamp( 37.4px, calc( 32.75px + 1.239vw ), 50.6px );
	border-radius: 12px;
	background: var( --wb-gradient );
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 18px;
}

.wb-feature-card__icon svg {
	width: clamp( 18.7px, calc( 16.38px + 0.62vw ), 25.3px );
	height: clamp( 18.7px, calc( 16.38px + 0.62vw ), 25.3px );
	stroke: #fff;
}

.wb-feature-card h3 {
	margin: 0 0 8px;
	font-size: clamp( 0.918rem, calc( 0.823rem + 0.406vw ), 1.188rem );
}

.wb-feature-card p {
	margin: 0;
	color: var( --wb-text-muted );
	font-size: clamp( 0.799rem, calc( 0.716rem + 0.353vw ), 1.034rem );
}

/* ------------------------------------------------------------------------
   BYOK callout
   ---------------------------------------------------------------------- */
.wb-byok {
	position: relative;
	overflow: hidden;
	/* Same squiggle as the hero background, mirrored left-right — top-right
	   copy flipped horizontally, bottom-left copy flipped both horizontally
	   and vertically (net: vertical-only, since it was already 180°
	   flipped) — each nudged past their corner so they bleed slightly off
	   the edge (clipped cleanly by overflow:hidden above). */
	background:
		url( 'assets/img/fv-background-fliph.svg' ) no-repeat top -140px right -30px / 420px,
		url( 'assets/img/fv-background-flipv.svg' ) no-repeat bottom -140px left -30px / 420px,
		var( --wb-bg-alt );
}

/* Scaled down for tablet — at the full 420px PC size, the two corner
   copies would be wide enough to overlap each other (and most of the
   card) in this narrower, shorter section. */
@media ( max-width: 1159px ) {
	.wb-byok {
		background:
			url( 'assets/img/fv-background-fliph.svg' ) no-repeat top -100px right -20px / 320px,
			url( 'assets/img/fv-background-flipv.svg' ) no-repeat bottom -100px left -20px / 320px,
			var( --wb-bg-alt );
	}
}

/* Scaled down further for SP. */
@media ( max-width: 640px ) {
	.wb-byok {
		background:
			url( 'assets/img/fv-background-fliph.svg' ) no-repeat top -65px right -10px / 220px,
			url( 'assets/img/fv-background-flipv.svg' ) no-repeat bottom -65px left -10px / 220px,
			var( --wb-bg-alt );
	}
}

.wb-byok__card {
	background: var( --wb-bg );
	border: 1px solid var( --wb-border );
	border-radius: var( --wb-radius-lg );
	padding: 48px;
	max-width: 800px;
	margin: 0 auto;
	text-align: center;
}

.wb-byok__card h2 {
	font-size: clamp( 1.445rem, calc( 1.295rem + 0.638vw ), 1.87rem );
	margin: 0 0 16px;
}

.wb-byok__card p {
	color: var( --wb-text-muted );
	font-size: clamp( 0.85rem, calc( 0.762rem + 0.376vw ), 1.1rem );
	max-width: 620px;
	margin: 0 auto 28px;
}

.wb-provider-chips {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 32px;
	flex-wrap: wrap;
}

.wb-provider-chip {
	display: flex;
	align-items: center;
	justify-content: center;
}

.wb-provider-chip img {
	height: clamp( 20.4px, calc( 17.86px + 0.676vw ), 27.6px );
	width: auto;
	display: block;
}

@media ( max-width: 640px ) {
	.wb-byok__card {
		padding: 32px 20px;
	}
}

/* ------------------------------------------------------------------------
   Screenshots showcase
   ---------------------------------------------------------------------- */
#screenshots {
	position: relative;
	z-index: 0;
	overflow: hidden;
}

.wb-shots-grid {
	position: relative;
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: 24px;
}

@media ( max-width: 640px ) {
	.wb-shots-grid {
		grid-template-columns: 1fr;
	}
}

/* Below 1160px (SP + tablet): the mascot perches on top of the first card,
   same idea and same scale as the features section's version. PC (1160px+)
   is untouched — .wb-section-mascot--screenshots keeps its normal
   floating-near-heading behavior there. */
.wb-shots-grid__mascot {
	display: none;
	pointer-events: none;
}

.wb-shots-grid__mascot img {
	width: 100%;
	height: auto;
	display: block;
}

@media ( max-width: 1159px ) {
	.wb-section-mascot--screenshots {
		display: none;
	}

	.wb-shots-grid__mascot {
		display: block;
		position: absolute;
		right: 12px;
		z-index: 0;
		/* Same fluid width formula as .wb-hero__mascot, per the features
		   section's precedent. */
		width: clamp( 148px, calc( 94.5px + 14.27vw ), 260px );
	}

	/* Opaque cards need to paint in front of the mascot (z-index:0 above). */
	.wb-shot-card {
		position: relative;
		z-index: 1;
	}
}

@media ( max-width: 640px ) {
	.wb-shots-grid__mascot {
		top: -85px;
	}

	/* Enough clearance above the grid for the mascot's 85px peek. */
	#screenshots .wb-section-head {
		margin-bottom: 110px;
	}
}

@media ( min-width: 641px ) and ( max-width: 1159px ) {
	.wb-shots-grid__mascot {
		/* Same reduced-scale peek as the features section's tablet tier. */
		top: clamp( -145px, calc( 11.622px - 13.514vw ), -75px );
	}

	/* Capped max width, matching the features section's tablet tier. */
	#screenshots .wb-section-head {
		margin-bottom: clamp( 100px, calc( 1.004px + 15.444vw ), 180px );
	}
}

.wb-shot-card {
	border: 1px solid var( --wb-border );
	border-radius: var( --wb-radius-lg );
	overflow: hidden;
	background: var( --wb-bg );
}

.wb-shot-card figcaption {
	padding: 16px 20px;
	font-size: clamp( 0.765rem, calc( 0.686rem + 0.338vw ), 0.99rem );
	color: var( --wb-text-muted );
}

.wb-shot-card figcaption strong {
	color: var( --wb-text );
	margin-bottom: 2px;
}

/* ------------------------------------------------------------------------
   Pricing
   ---------------------------------------------------------------------- */
.wb-pricing {
	position: relative;
	overflow: hidden;
	/* Same squiggle background treatment as .wb-byok — top-right copy
	   flipped horizontally, bottom-left flipped vertically, each nudged
	   past their corner so they bleed slightly off the edge. */
	background:
		url( 'assets/img/fv-background-fliph.svg' ) no-repeat top -140px right -30px / 420px,
		url( 'assets/img/fv-background-flipv.svg' ) no-repeat bottom -140px left -30px / 420px,
		var( --wb-bg-dark );
	color: var( --wb-text-on-dark );
}

@media ( max-width: 1159px ) {
	.wb-pricing {
		background:
			url( 'assets/img/fv-background-fliph.svg' ) no-repeat top -100px right -20px / 320px,
			url( 'assets/img/fv-background-flipv.svg' ) no-repeat bottom -100px left -20px / 320px,
			var( --wb-bg-dark );
	}
}

@media ( max-width: 640px ) {
	.wb-pricing {
		background:
			url( 'assets/img/fv-background-fliph.svg' ) no-repeat top -65px right -10px / 220px,
			url( 'assets/img/fv-background-flipv.svg' ) no-repeat bottom -65px left -10px / 220px,
			var( --wb-bg-dark );
	}
}

@media ( max-width: 1159px ) {
	/* Bigger mascot for this section only, below PC width — same fluid
	   width formula as the hero mascot, overriding the smaller shared
	   .wb-section-mascot--features/--pricing formula above. Shifted closer
	   to the right edge than the shared 24px margin too. */
	.wb-section-mascot--pricing {
		width: clamp( 148px, calc( 94.5px + 14.27vw ), 260px );
		margin-right: -8px;
	}

	/* Removes the section's own bottom padding so the mascot (last thing
	   in the section, trailing the pricing card) doesn't leave a big empty
	   gap below it before the next section starts. Pricing only — top
	   padding (spacing from the section above) is untouched. */
	.wb-pricing {
		padding-bottom: 0;
	}
}

.wb-pricing-badge {
	display: block;
	margin: 0 0 20px;
	text-align: center;
}

.wb-pricing-badge__pill {
	display: inline-block;
	background: rgba( 244, 114, 13, 0.14 );
	color: var( --wb-accent );
	font-size: clamp( 0.697rem, calc( 0.625rem + 0.308vw ), 0.902rem );
	font-weight: 700;
	padding: 6px 16px;
	border-radius: 999px;
}

.wb-billing-toggle {
	display: flex;
	justify-content: center;
	gap: 6px;
	background: var( --wb-bg-dark-alt );
	border: 1px solid var( --wb-border-dark );
	border-radius: 999px;
	padding: 5px;
	max-width: 420px;
	margin: 0 auto 40px;
}

.wb-billing-toggle button {
	flex: 1;
	border: none;
	background: transparent;
	color: var( --wb-text-on-dark-muted );
	font-family: inherit;
	font-weight: 600;
	font-size: clamp( 0.748rem, calc( 0.671rem + 0.331vw ), 0.968rem );
	padding: 10px 12px;
	border-radius: 999px;
	cursor: pointer;
}

.wb-billing-toggle button[aria-pressed="true"] {
	background: var( --wb-gradient );
	color: #fff;
}

/* Mobile (SP): toggle + single active price. Desktop (PC): three prices side by side. */
.wb-price-columns {
	display: none;
}

.wb-price-toggle-view {
	display: block;
}

@media ( min-width: 861px ) {
	.wb-price-columns {
		display: grid;
		grid-template-columns: repeat( 3, minmax( 190px, 1fr ) );
		gap: 20px;
		margin-bottom: 28px;
	}

	.wb-price-toggle-view {
		display: none;
	}
}

.wb-price-column {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	border: 1px solid var( --wb-border-dark );
	border-radius: var( --wb-radius-md );
	/* Less side padding than before (was 28px) — gives the description text
	   more width to work with before it wraps. */
	padding: 36px 16px;
	background: var( --wb-bg-dark-alt );
}

.wb-price-column__period {
	margin: 0 0 14px;
	font-size: clamp( 0.68rem, calc( 0.61rem + 0.3vw ), 0.88rem );
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var( --wb-text-on-dark-muted );
}

.wb-price-column__amount {
	margin: 0;
	font-size: clamp( 2.04rem, calc( 1.829rem + 0.901vw ), 2.64rem );
	font-weight: 800;
	letter-spacing: -0.01em;
	white-space: nowrap;
	color: var( --wb-text-on-dark );
}

.wb-price-column__currency {
	font-size: clamp( 0.935rem, calc( 0.838rem + 0.413vw ), 1.21rem );
	font-weight: 700;
	vertical-align: top;
	position: relative;
	top: 0.3em;
	margin-right: 1px;
}

.wb-price-column__unit {
	font-size: clamp( 0.722rem, calc( 0.648rem + 0.319vw ), 0.935rem );
	font-weight: 500;
	color: var( --wb-text-on-dark-muted );
	margin-left: 2px;
}

.wb-price-column__desc {
	margin: 10px 0 24px;
	font-size: clamp( 0.731rem, calc( 0.655rem + 0.323vw ), 0.946rem );
	line-height: 1.5;
	/* Reserves space for 2 lines so the card height (and CTA position) stays
	   consistent whether a language's text wraps to 1 line or 2. */
	min-height: calc( 1.5em * 2 );
	color: var( --wb-text-on-dark-muted );
	flex-grow: 1;
}

.wb-price-column__cta {
	width: 100%;
}

.wb-price-column__buy-now {
	width: 100%;
	margin-top: 10px;
}


.wb-pricing-card {
	max-width: 440px;
	margin: 0 auto;
	background: var( --wb-bg-dark-alt );
	border: 1px solid var( --wb-border-dark );
	border-radius: var( --wb-radius-lg );
	padding: 44px;
	text-align: center;
}

@media ( min-width: 861px ) {
	.wb-pricing-card {
		max-width: 800px;
	}
}

.wb-pricing-card__plan {
	font-size: clamp( 0.85rem, calc( 0.762rem + 0.376vw ), 1.1rem );
	font-weight: 700;
	color: var( --wb-text-on-dark-muted );
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 12px;
}

.wb-pricing-card__price {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 8px;
	margin-bottom: 6px;
}

.wb-pricing-card__amount {
	font-size: clamp( 2.72rem, calc( 2.438rem + 1.202vw ), 3.52rem );
	font-weight: 800;
	letter-spacing: -0.02em;
}

.wb-pricing-card__period {
	color: var( --wb-text-on-dark-muted );
	font-size: clamp( 0.85rem, calc( 0.762rem + 0.376vw ), 1.1rem );
}

.wb-pricing-card__sub {
	color: var( --wb-text-on-dark-muted );
	font-size: clamp( 0.748rem, calc( 0.671rem + 0.331vw ), 0.968rem );
	margin-bottom: 28px;
}

.wb-pricing-card__features {
	list-style: none;
	padding: 0;
	margin: 0 0 32px;
	text-align: left;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.wb-pricing-card__features li {
	align-items: flex-start;
	gap: 10px;
	font-size: clamp( 0.799rem, calc( 0.716rem + 0.353vw ), 1.034rem );
	color: var( --wb-text-on-dark );
}

.wb-pricing-card__features li::before {
	content: "";
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	border-radius: 50%;
	background: var( --wb-gradient );
}

.wb-pricing-card .wb-btn--primary {
	width: 100%;
}

.wb-pricing-card__buy-now {
	display: block;
	margin-top: 14px;
	color: var( --wb-accent );
	font-size: clamp( 0.748rem, calc( 0.671rem + 0.331vw ), 0.968rem );
	text-decoration: underline;
}

.wb-pricing-card__buy-now:hover {
	color: var( --wb-text-on-dark );
}

@media ( max-width: 640px ) {
	.wb-pricing-card {
		padding: 32px 20px;
	}
}

.wb-pricing-note {
	/* Matches .wb-pricing-card's own max-width (800px at 861px+) — without
	   this, the note spans the full (1160px) container, wide enough to
	   reach behind .wb-section-mascot--pricing's bottom-right position on
	   desktop and overlap its last line of text. */
	max-width: 800px;
	margin: 24px auto 0;
	text-align: center;
	color: var( --wb-text-on-dark-muted );
	font-size: clamp( 0.722rem, calc( 0.648rem + 0.319vw ), 0.935rem );
}

/* ------------------------------------------------------------------------
   FAQ
   ---------------------------------------------------------------------- */
.wb-faq-list {
	max-width: 760px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.wb-faq-item {
	border: 1px solid var( --wb-border );
	border-radius: var( --wb-radius-md );
	padding: 4px 24px;
}

.wb-faq-item summary {
	cursor: pointer;
	list-style: none;
	padding: 20px 0;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.wb-faq-item summary::-webkit-details-marker {
	display: none;
}

.wb-faq-item summary::after {
	content: "+";
	font-size: clamp( 1.19rem, calc( 1.067rem + 0.526vw ), 1.54rem );
	color: var( --wb-text-muted );
	flex-shrink: 0;
}

.wb-faq-item[open] summary::after {
	content: "\2212";
}

.wb-faq-item p {
	margin: 0 0 20px;
	color: var( --wb-text-muted );
}

/* ------------------------------------------------------------------------
   Footer
   ---------------------------------------------------------------------- */
.wb-footer {
	background: var( --wb-bg-dark );
	color: var( --wb-text-on-dark-muted );
	padding: 64px 0 32px;
}

.wb-footer__top {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	gap: 32px;
	padding-bottom: 40px;
	border-bottom: 1px solid var( --wb-border-dark );
	margin-bottom: 24px;
}

.wb-footer__brand .wb-logo {
	color: var( --wb-text-on-dark );
	margin-bottom: 10px;
}

.wb-footer__brand p {
	max-width: 280px;
	font-size: clamp( 0.765rem, calc( 0.686rem + 0.338vw ), 0.99rem );
	margin: 0;
}

.wb-footer__links {
	display: flex;
	gap: 56px;
	flex-wrap: wrap;
}

.wb-footer__links-col ul {
	list-style: none;
	padding: 0;
	margin: 12px 0 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.wb-footer__links-col a {
	text-decoration: none;
	font-size: clamp( 0.765rem, calc( 0.686rem + 0.338vw ), 0.99rem );
	color: var( --wb-text-on-dark-muted );
}

.wb-footer__links-col a:hover {
	color: var( --wb-text-on-dark );
}

.wb-footer__links-col-title {
	font-size: clamp( 0.68rem, calc( 0.61rem + 0.3vw ), 0.88rem );
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var( --wb-text-on-dark );
	margin: 0;
}

.wb-footer__cta {
	flex-shrink: 0;
}

.wb-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px;
	font-size: clamp( 0.722rem, calc( 0.648rem + 0.319vw ), 0.935rem );
}

.wb-footer__bottom a {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ------------------------------------------------------------------------
   Legal pages (Terms of Service, Privacy Policy)
   ---------------------------------------------------------------------- */
.wb-legal {
	padding: 72px 0 96px;
}

/* Guide pages get their top spacing from .wb-guide-head's own padding
   instead (see below), so .wb-legal's own top padding would just add an
   extra, redundant gap on top of it. */
.wb-legal--has-guide-head {
	padding-top: 0;
}

.wb-legal__inner {
	max-width: 760px;
}

/* The gap between .wb-guide-head and the article — set here on
   .wb-legal__inner's own top instead of on .wb-guide-head's bottom
   padding. Scoped to guide pages only (via the modifier class on <main>),
   so Terms/Privacy's plain layout is untouched. */
.wb-legal--has-guide-head .wb-legal__inner {
	margin-top: 48px;
}

.wb-legal__inner > h1 {
	font-size: clamp( 1.8rem, 3vw, 2.4rem );
	margin: 0 0 8px;
	letter-spacing: -0.01em;
}

.wb-legal__notice {
	display: inline-block;
	margin-bottom: 40px;
	padding: 10px 16px;
	border-radius: var( --wb-radius-sm );
	background: var( --wb-bg-alt );
	color: var( --wb-text-muted );
	font-size: clamp( 0.748rem, calc( 0.671rem + 0.331vw ), 0.968rem );
}

.wb-legal__content {
	line-height: 1.8;
	color: var( --wb-text );
}

.wb-legal__content h2 {
	font-size: clamp( 1.062rem, calc( 0.952rem + 0.469vw ), 1.375rem );
	margin: 40px 0 14px;
	letter-spacing: -0.01em;
}

.wb-legal__content h2:first-child {
	margin-top: 0;
}

.wb-legal__content h3 {
	font-size: clamp( 0.892rem, calc( 0.8rem + 0.394vw ), 1.155rem );
	margin: 24px 0 10px;
}

.wb-legal__content p {
	margin: 0 0 16px;
}

.wb-legal__content ul,
.wb-legal__content ol {
	margin: 0 0 16px;
	padding-left: 1.4em;
}

.wb-legal__content li {
	margin-bottom: 8px;
}

.wb-legal__content li > ol,
.wb-legal__content li > ul {
	margin-top: 8px;
}

.wb-legal__content a {
	color: var( --wb-accent );
	text-decoration: underline;
	text-underline-offset: 2px;
}

.wb-legal__content strong {
	color: var( --wb-text );
}

.wb-legal__content .wb-legal__todo {
	color: #b45309;
	background: rgba( 244, 114, 13, 0.12 );
	padding: 2px 8px;
	border-radius: 4px;
	font-size: 0.85em;
	font-weight: 600;
}

.wb-legal__content code {
	background: var( --wb-bg-alt );
	padding: 2px 6px;
	border-radius: 4px;
	font-size: 0.9em;
}

.wb-legal__content ol > li > ul {
	margin-top: 6px;
	margin-bottom: 0;
}

/* ------------------------------------------------------------------------
   User guide decoration — light touch on top of the plain .wb-legal layout
   also used for Terms/Privacy: a full-bleed light-orange band behind the
   eyebrow + title + back link, edge to edge like .wb-hero's own background.
   Pulled up by the floating header's own reserved space (16px margin + 72px
   height = 88px), with padding-top increased by the same amount to
   compensate — so this band's background extends up behind the header
   (header sits on top via its own z-index:100) instead of showing the page
   background there. Exact same technique as .wb-hero uses for the same
   reason (see style.css's Hero section).
   ---------------------------------------------------------------------- */
.wb-guide-head {
	background: var( --wb-bg-dark );
	margin-top: -88px;
	padding: 144px 0 40px;
}

/* Matches .wb-legal__inner's own max-width, so the band's text lines up
   with the article's left edge below instead of each being centered
   independently within a different-width column. */
.wb-guide-head .wb-container {
	max-width: 760px;
}

.wb-guide-head__back {
	/* flex, not inline-flex — .wb-eyebrow right after it is also
	   inline-level, and two inline-level elements in a row sit side by side
	   instead of stacking. */
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 16px;
	color: var( --wb-text-muted );
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
}

.wb-guide-head__back:hover {
	color: var( --wb-accent );
}

.wb-guide-head .wb-eyebrow {
	margin-bottom: 14px;
}

.wb-guide-head h1 {
	margin: 0;
	font-size: clamp( 2rem, 4vw, 2.8rem );
	letter-spacing: -0.02em;
	line-height: 1.15;
}

.wb-guide-head__tagline {
	margin: 10px 0 0;
	color: var( --wb-text-muted );
	font-size: 1rem;
}

/* Character page's head band is centered (title sits directly above the
   portrait, no eyebrow badge) and taller, since the portrait + one-line
   intro (post_excerpt, see page.php) render inside it too — same
   full-bleed background, no seam between the title and the image. */
.wb-guide-head--character {
	position: relative;
	padding-bottom: 100px;
	text-align: center;
}

.wb-guide-head--character .wb-container {
	max-width: 640px;
}

/* A soft wave along the bottom edge instead of a hard rectangle cutoff —
   same technique as 2ndbuzz-lp's .sectionAbout__inner::after (the PROBLEM
   section on that theme's front page): an inline SVG painted in the
   page's own background color (--wb-bg), sized via percentage
   padding-bottom (not a fixed height) so the curve's depth scales with
   the band's width instead of looking flatter on wide screens/taller on
   narrow ones. */
.wb-guide-head--character::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: -2px;
	right: -2px;
	width: calc( 100% + 4px );
	padding-bottom: 8%;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M0,0 C35,20 65,20 100,0 L100,20 L0,20 Z'/%3E%3C/svg%3E" );
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: bottom;
	pointer-events: none;
}

@media ( max-width: 640px ) {
	.wb-guide-head--character {
		padding-bottom: 64px;
	}

	.wb-guide-head--character::after {
		padding-bottom: 14%;
	}
}

/* ------------------------------------------------------------------------
   Mascot character introduction page (/{lang}/character/) — name/image/
   description stacked vertically inside .wb-guide-head's own full-bleed
   band (see .wb-guide-head--character above; .wb-character__hero itself
   carries no background of its own, so there's no seam between the title
   and the portrait), then a grid of individual fact cards below, followed
   by a closing bio paragraph.
   ---------------------------------------------------------------------- */
.wb-character {
	line-height: 1.8;
	color: var( --wb-text );
}

.wb-character__hero {
	margin-top: 20px;
}

.wb-character__hero img {
	display: block;
	width: 100%;
	max-width: 260px;
	height: auto;
	margin: 0 auto 20px;
}

.wb-character__hero-text {
	max-width: 620px;
	margin: 0 auto;
	text-align: center;
}

.wb-character__hero-text p {
	margin: 0 0 12px;
	color: var( --wb-text-muted );
	font-size: 1.05rem;
}

.wb-character__hero-text p:last-child {
	margin-bottom: 0;
}

/* Profile table (name-tag style): one rounded card, each fact a row with
   a fixed-width label on the left and its value on the right, separated
   by a dashed rule — like a nursery/school 名札 profile card. */
.wb-character__cards {
	margin: 0 0 32px;
	padding: 4px 24px;
	background: var( --wb-bg );
	border: 2px solid var( --wb-accent-2 );
	border-radius: var( --wb-radius-lg );
}

.wb-character__card-item {
	display: flex;
	gap: 20px;
	padding: 16px 0;
	border-bottom: 2px dashed var( --wb-accent-2 );
}

.wb-character__card-item:last-child {
	border-bottom: none;
}

.wb-character__card-item dt {
	flex: 0 0 130px;
	font-weight: 700;
	color: var( --wb-text );
}

.wb-character__card-item dd {
	flex: 1;
	margin: 0;
	text-align: left;
	color: var( --wb-text-muted );
}

@media ( max-width: 640px ) {
	.wb-character__card-item {
		flex-direction: column;
		gap: 4px;
	}

	.wb-character__card-item dt {
		flex: 0 0 auto;
	}
}

@media ( max-width: 640px ) {
	.wb-character__hero {
		padding: 32px 20px 28px;
	}

	.wb-character__hero img {
		max-width: 200px;
	}
}

/* ------------------------------------------------------------------------
   Goods/merch section, appended below the fact table on the character
   page (/{lang}/character/#goods) — just a portrait and a "Coming Soon"
   line until real merch content exists. Not a standalone page.
   ---------------------------------------------------------------------- */
.wb-character__goods {
	margin-top: 72px;
	text-align: center;
}

/* Breaks out of .wb-legal__inner's 760px column to run edge-to-edge,
   same "50% / -50vw" full-bleed trick used for it — everything else in
   this section (image, "Coming Soon") stays inside the normal column. */
.wb-character__goods-title {
	display: flex;
	box-sizing: border-box;
	align-items: center;
	gap: 20px;
	width: 100vw;
	margin: 0 0 28px;
	margin-left: calc( 50% - 50vw );
	padding: 0 24px;
	font-size: clamp( 1.375rem, calc( 1.1rem + 1vw ), 1.8rem );
	font-weight: 800;
	letter-spacing: 0.01em;
	background: var( --wb-gradient );
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.wb-character__goods-title::before,
.wb-character__goods-title::after {
	content: '';
	flex: 1;
	border-top: 4px dotted var( --wb-accent-2 );
}

.wb-character__goods img {
	display: block;
	width: 100%;
	max-width: 200px;
	height: auto;
	margin: 0 auto 20px;
}

.wb-character__goods p {
	margin: 0;
	color: var( --wb-text-muted );
	font-size: clamp( 1.4rem, 3vw, 1.9rem );
	font-weight: 700;
	letter-spacing: 0.02em;
}