/* ==========================================================================
   psyselling — psyselling.com
   Static site. No external requests: no CDN, no webfont service, no analytics.

   Identity: "Aura" — an open luminous ring, and a Liquid Glass surface
   language. Light throughout. Colour comes from a red spectrum
   (magenta → vermillion → amber) used in gradients, glows and one
   full-bleed field per page, never as flat fills.

   Contrast note: the bright spectrum colours are for GRAPHICS ONLY.
   Red text always uses --deep, which clears WCAG AA on paper.
   ========================================================================== */

/* TYPEFACE
   The site ships on the system stack below, which loads nothing at all.
   No Google Fonts, no CDN, no external request of any kind — this is what
   keeps the site free of a consent banner and out of reach of the Austrian
   and German Google-Fonts rulings.

   To switch to Schibsted Grotesk (SIL Open Font License), self-hosted:
     1. Download the family, convert the four weights to .woff2
     2. Save them in assets/fonts/ as
        psy-sans-400.woff2 · psy-sans-500.woff2
        psy-sans-600.woff2 · psy-sans-900.woff2
     3. Remove the comment markers around the block below
   Never replace this with a <link> to fonts.googleapis.com.

@font-face {
	font-family: "Psy Sans";
	src: url("../fonts/psy-sans-400.woff2") format("woff2");
	font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
	font-family: "Psy Sans";
	src: url("../fonts/psy-sans-500.woff2") format("woff2");
	font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
	font-family: "Psy Sans";
	src: url("../fonts/psy-sans-600.woff2") format("woff2");
	font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
	font-family: "Psy Sans";
	src: url("../fonts/psy-sans-900.woff2") format("woff2");
	font-weight: 900; font-style: normal; font-display: swap;
}
*/

:root {
	/* Paper */
	--paper:   #fbfaf9;
	--card:    #ffffff;
	--tint:    #f6f2f0;
	--hair:    #e8e2de;
	--hair-2:  #d9d1cc;

	/* Ink */
	--ink:     #141110;
	--ink-2:   #3a3330;
	/* Body copy in its muted role. Clears 4.5:1 on paper, white AND tint —
	   it is real running text, so it has to pass on every surface it sits on. */
	--mute:    #736963;
	/* Captions and metadata only — short, non-essential strings. Never
	   running text: this does not clear AA. */
	--mute-2:  #857b75;

	/* The spectrum — graphics, gradients, glows. */
	--red:     #ff3b2f;
	--coral:   #ff6b4a;
	--magenta: #ff2d78;
	--amber:   #ffab2e;

	/* Text-safe red. Every red word on paper uses this. */
	--deep:    #c01020;
	--deep-2:  #9c0a1a;

	--sweep: linear-gradient(100deg, var(--magenta), var(--red) 52%, var(--amber));

	/* Call-to-action gradient. Deliberately darker than --sweep: both stops
	   clear 5:1 against white text, so button labels stay AA-legible.
	   Never swap this for --sweep — the amber end drops to ~2:1. */
	--cta: linear-gradient(100deg, #c01020, #d13314);

	--font: "Psy Sans", system-ui, -apple-system, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;

	--wrap: 78rem;
	--gut: clamp(1.25rem, 4vw, 3.5rem);

	--r-sm: 14px;
	--r:    22px;
	--r-lg: 30px;

	--dur: 0.75s;
	--ease: cubic-bezier(0.22, 1, 0.36, 1);

	--glass: rgba(255, 255, 255, 0.58);
	--glass-edge: rgba(255, 255, 255, 0.78);
	--shadow: 0 18px 50px rgba(20, 17, 16, 0.07);
	--shadow-lg: 0 28px 80px rgba(20, 17, 16, 0.10);
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font);
	font-size: clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
	line-height: 1.68;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; }
::selection { background: var(--red); color: #fff; }

:focus-visible { outline: 3px solid var(--deep); outline-offset: 3px; border-radius: 4px; }

.skip {
	position: absolute; left: -9999px; top: 0; z-index: 200;
	padding: 0.9rem 1.4rem; border-radius: 0 0 var(--r-sm) 0;
	background: var(--ink); color: #fff; font-weight: 600; text-decoration: none;
}
.skip:focus { left: 0; }

.sr {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 {
	margin: 0; font-weight: 600; line-height: 1.04;
	letter-spacing: -0.04em; text-wrap: balance;
}

.display {
	font-size: clamp(2.6rem, 8.5vw, 7.5rem);
	font-weight: 900; line-height: 0.95; letter-spacing: -0.06em;
}
.h2 { font-size: clamp(1.9rem, 4.6vw, 3.6rem); font-weight: 900; letter-spacing: -0.055em; }
.h3 { font-size: clamp(1.2rem, 2vw, 1.6rem); letter-spacing: -0.035em; line-height: 1.16; }
.h4 { font-size: clamp(1.02rem, 1.35vw, 1.18rem); letter-spacing: -0.025em; line-height: 1.26; }

/* Gradient headline. Used once or twice per page, never on a whole heading. */
.sweep {
	background: var(--sweep);
	-webkit-background-clip: text; background-clip: text;
	color: transparent;
	font-style: normal;
}

.eyebrow {
	margin: 0 0 1.4rem;
	font-size: clamp(0.66rem, 0.82vw, 0.73rem);
	font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
	color: var(--deep);
}

.lead { font-size: clamp(1.06rem, 1.45vw, 1.3rem); line-height: 1.55; color: var(--ink-2); }
.muted { color: var(--mute); }
.hot { color: var(--deep); }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

.prose { max-width: 44rem; }
.prose h2 { margin: 3rem 0 1.1rem; font-size: clamp(1.35rem, 2.3vw, 1.9rem); font-weight: 600; }
.prose h3 { margin: 2.2rem 0 0.8rem; font-size: clamp(1.1rem, 1.55vw, 1.28rem); font-weight: 600; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose ul, .prose ol { margin: 0 0 1.15em; padding-left: 1.25rem; }
.prose li { margin-bottom: 0.45em; }
.prose a { color: var(--deep); text-underline-offset: 3px; }
.prose small { display: block; margin-top: 2.5rem; font-size: 0.86rem; color: var(--mute-2); }

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.wrap--narrow { max-width: 56rem; }

.section { padding-block: clamp(4.5rem, 10vh, 9rem); }
.section--raised { background: var(--card); }
.section--tint { background: var(--tint); }
.section--flush { padding-block: 0; }

/* The loud one — a drifting luminous field. Once per page. */
.section--glow {
	position: relative;
	overflow: hidden;
	background: var(--ink);
	color: #fff;
	isolation: isolate;
}
.section--glow::before {
	content: "";
	position: absolute; inset: -25%;
	z-index: -1;
	background:
		radial-gradient(40% 48% at 20% 26%, rgba(255, 45, 120, .85), transparent 62%),
		radial-gradient(38% 44% at 76% 18%, rgba(255, 59, 47, .85), transparent 64%),
		radial-gradient(46% 50% at 62% 88%, rgba(255, 171, 46, .70), transparent 66%);
	animation: drift 30s ease-in-out infinite alternate;
}
@keyframes drift {
	from { transform: translate3d(-2%, -1%, 0) scale(1); }
	to   { transform: translate3d(3%, 2%, 0) scale(1.1); }
}
.section--glow .eyebrow { color: rgba(255, 255, 255, .8); }
.section--glow .lead { color: rgba(255, 255, 255, .92); }
.section--glow .muted { color: rgba(255, 255, 255, .78); }

.rule { height: 1px; background: var(--hair); border: 0; margin: 0; }

.stack > * + * { margin-top: 1.5rem; }
.mt-l { margin-top: clamp(2.5rem, 5vw, 4.5rem); }
.mt-m { margin-top: clamp(1.75rem, 3vw, 2.75rem); }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.hdr {
	position: sticky; top: 0; z-index: 100;
	background: rgba(251, 250, 249, 0.72);
	backdrop-filter: blur(18px) saturate(170%);
	-webkit-backdrop-filter: blur(18px) saturate(170%);
	border-bottom: 1px solid transparent;
	transition: background .3s, border-color .3s;
}
.hdr.is-stuck { background: rgba(251, 250, 249, 0.9); border-bottom-color: var(--hair); }

.hdr__in { display: flex; align-items: center; gap: 1.5rem; min-height: 4.6rem; }

.logo {
	display: inline-flex; align-items: center; gap: 0.5rem;
	text-decoration: none; color: var(--ink); flex: 0 0 auto;
	font-size: 1.32rem; font-weight: 600; letter-spacing: -0.055em; line-height: 1;
}
.logo__mark { width: 1.7rem; height: 1.7rem; flex: 0 0 auto; }
.logo__ring { transform-origin: 60px 60px; animation: spin 16s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.nav { display: flex; align-items: center; gap: clamp(0.8rem, 1.4vw, 1.5rem); margin-left: auto; }
/* :not(.btn) matters — without it this rule (0-1-1) outranks .btn (0-1-0)
   and repaints the call-to-action's label with the nav link colour. */
.nav a:not(.btn) {
	font-size: 0.89rem; font-weight: 500; text-decoration: none;
	color: var(--ink-2); white-space: nowrap; transition: color .2s;
}
.nav a:not(.btn):hover, .nav a:not(.btn)[aria-current="page"] { color: var(--deep); }

.nav__lang {
	padding-left: clamp(0.8rem, 1.4vw, 1.5rem);
	border-left: 1px solid var(--hair);
	font-weight: 600 !important; letter-spacing: 0.08em; font-size: 0.77rem !important;
}

.burger {
	display: none; margin-left: auto; width: 2.75rem; height: 2.75rem; padding: 0;
	background: var(--glass); border: 1px solid var(--hair); border-radius: 999px;
	color: var(--ink); cursor: pointer;
	backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.burger span {
	display: block; width: 1.05rem; height: 1.5px; margin: 0.28rem auto;
	background: currentColor; border-radius: 2px; transition: transform .3s, opacity .3s;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(0.435rem) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-0.435rem) rotate(-45deg); }

@media (max-width: 62rem) {
	.burger { display: block; }
	.nav {
		position: fixed; inset: 4.6rem 0 auto 0;
		flex-direction: column; align-items: stretch; gap: 0; margin: 0;
		padding: 0.5rem var(--gut) 2rem;
		background: rgba(251, 250, 249, 0.96);
		backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
		border-bottom: 1px solid var(--hair);
		max-height: calc(100dvh - 4.6rem); overflow-y: auto;
	}
	.nav[hidden] { display: none; }
	.nav a { padding: 0.95rem 0; font-size: 1.05rem; border-bottom: 1px solid var(--hair); }
	.nav__lang { padding-left: 0; border-left: 0; }
	.nav .btn { margin-top: 1.25rem; justify-content: center; border-bottom: 0; }
}

/* --------------------------------------------------------------------------
   Buttons — pills
   -------------------------------------------------------------------------- */

.btn {
	display: inline-flex; align-items: center; gap: 0.5rem;
	padding: 0.95rem 1.85rem; border-radius: 999px;
	border: 1px solid transparent; background: var(--cta); color: #fff;
	font-family: var(--font); font-size: 0.94rem; font-weight: 600;
	text-decoration: none; cursor: pointer;
	/* No transform on hover: a control must not move under the cursor. */
	transition: box-shadow .22s, filter .22s, background .22s, color .22s, border-color .22s;
}
/* Hover inverts the pill rather than tinting it: white ground, deep red
   label, red hairline. Both states are explicit, so the label can never
   end up close in value to what is behind it. */
.btn:hover, .btn:focus-visible {
	background: #fff;
	background-image: none;
	color: var(--deep-2);
	border-color: var(--deep);
	box-shadow: 0 8px 22px rgba(192, 16, 32, .22);
}
.btn:active { background: var(--tint); }

.btn--ghost {
	background: var(--glass); color: var(--ink);
	border-color: rgba(20, 17, 16, 0.14);
	backdrop-filter: blur(14px) saturate(160%);
	-webkit-backdrop-filter: blur(14px) saturate(160%);
}
.btn--ghost:hover {
	border-color: rgba(20, 17, 16, 0.3);
	box-shadow: var(--shadow); filter: none;
}

/* On the luminous field a white pill is the legible primary, and the
   inversion runs the other way: white to red. */
.section--glow .btn { background: #fff; border-color: #fff; color: var(--deep-2); }
.section--glow .btn:hover, .section--glow .btn:focus-visible {
	background: var(--cta); border-color: transparent; color: #fff;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .22);
}
.section--glow .btn:active { background: var(--deep-2); }
.section--glow .btn--ghost {
	background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.5); color: #fff;
}
.section--glow .btn--ghost:hover { background: rgba(255, 255, 255, 0.26); box-shadow: none; }

.btn--sm { padding: 0.6rem 1.15rem; font-size: 0.84rem; }

.btns { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.arrow {
	display: inline-flex; align-items: center; gap: 0.4rem;
	font-weight: 600; font-size: 0.91rem; text-decoration: none; color: var(--deep);
}
.arrow::after { content: "\2192"; transition: transform .25s; }
.arrow:hover::after { transform: translateX(5px); }
.section--glow .arrow { color: #fff; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
	position: relative; display: flex; align-items: flex-end;
	min-height: min(84svh, 52rem);
	padding-block: clamp(4.5rem, 11vh, 8rem) clamp(3rem, 7vh, 5rem);
	overflow: hidden; isolation: isolate;
}
.hero::before {
	content: ""; position: absolute; inset: -20%; z-index: -2;
	background:
		radial-gradient(34% 40% at 16% 20%, rgba(255, 45, 120, .30), transparent 62%),
		radial-gradient(30% 36% at 82% 12%, rgba(255, 59, 47, .28), transparent 64%),
		radial-gradient(40% 44% at 68% 86%, rgba(255, 171, 46, .26), transparent 66%);
	animation: drift 30s ease-in-out infinite alternate;
}
.hero__in { position: relative; z-index: 2; width: 100%; }
.hero__grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 62rem) { .hero__grid { grid-template-columns: 1.55fr 1fr; align-items: end; } }
.hero .display { margin-bottom: 1.5rem; }

/* The aside sits on glass so it holds against the drifting field behind it. */
.hero__aside {
	padding: clamp(1.15rem, 2vw, 1.6rem);
	background: var(--glass);
	border: 1px solid var(--glass-edge);
	border-radius: var(--r);
	box-shadow: var(--shadow);
	backdrop-filter: blur(18px) saturate(170%);
	-webkit-backdrop-filter: blur(18px) saturate(170%);
}

.hero__ring {
	position: absolute; right: -14vw; top: 50%;
	width: min(58vw, 42rem); transform: translateY(-50%);
	z-index: -1; opacity: .5; pointer-events: none;
}
@media (min-width: 62rem) { .hero__ring { right: -9vw; width: min(40vw, 34rem); opacity: .85; } }
.hero__ring .logo__ring { animation-duration: 42s; }

.hero--page { min-height: auto; align-items: flex-start;
	padding-block: clamp(4rem, 10vh, 7rem) clamp(2.5rem, 6vh, 4.5rem); }
.hero--page .display { font-size: clamp(2.2rem, 6.5vw, 5rem); }

.crumb {
	margin: 0 0 1.4rem; font-size: 0.72rem; font-weight: 600;
	letter-spacing: 0.2em; text-transform: uppercase; color: var(--mute-2);
}
.crumb a { text-decoration: none; }
.crumb a:hover { color: var(--deep); }

/* --------------------------------------------------------------------------
   Glass surfaces
   -------------------------------------------------------------------------- */

.card {
	padding: clamp(1.4rem, 2.3vw, 2.1rem);
	background: var(--glass);
	border: 1px solid var(--glass-edge);
	border-radius: var(--r);
	box-shadow: var(--shadow);
	backdrop-filter: blur(18px) saturate(170%);
	-webkit-backdrop-filter: blur(18px) saturate(170%);
}
.section--raised .card, .section--tint .card { background: var(--card); border-color: var(--hair); }
.section--glow .card {
	background: rgba(255, 255, 255, 0.14);
	border-color: rgba(255, 255, 255, 0.28);
	box-shadow: none;
}

.card__n {
	display: block; margin-bottom: 0.9rem;
	font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--deep);
}
.section--glow .card__n { color: rgba(255, 255, 255, .85); }
.card .h3, .card .h4 { margin-bottom: 0.65rem; }
.card p { font-size: 0.96rem; color: var(--mute); }
.section--glow .card p { color: rgba(255, 255, 255, .88); }

.card--link { text-decoration: none; color: inherit; display: block;
	transition: transform .24s var(--ease), box-shadow .24s, border-color .24s; }
.card--link:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(255, 59, 47, .4); }

/* --------------------------------------------------------------------------
   Photography — one portrait, used sparingly. Images are monochrome so they
   never compete with the red spectrum.
   -------------------------------------------------------------------------- */

.portrait {
	border-radius: var(--r);
	overflow: hidden;
	background: var(--tint);
	box-shadow: var(--shadow);
}
.portrait img { width: 100%; height: auto; }

/* Publisher's jacket copy. Marked as a quotation so it reads as the
   publisher's words about the book, not as the site's own claims. */
.quote {
	margin: 0;
	padding-left: clamp(1rem, 2vw, 1.5rem);
	border-left: 3px solid var(--magenta);
	font-size: clamp(1.02rem, 1.35vw, 1.18rem);
	line-height: 1.6;
	color: var(--ink-2);
}
.quote p { margin-bottom: 1em; }
.quote cite {
	display: block; margin-top: 0.4rem;
	font-size: 0.82rem; font-style: normal;
	letter-spacing: 0.06em; text-transform: uppercase; color: var(--mute-2);
}

/* The book is shown as a physical object — the mockup carries its own
   perspective, spine and cast shadow, so the container adds nothing. A flat
   white cover on a near-white page reads as page furniture, not as a book. */
.book { max-width: 24rem; }
.book img { width: 100%; height: auto; }

.byline {
	display: flex; align-items: center; gap: 0.85rem;
	margin-top: 1.4rem; padding-top: 1.2rem;
	border-top: 1px solid var(--hair);
}
.byline img { width: 3.2rem; height: 3.2rem; border-radius: 12px; flex: 0 0 auto; }
.byline b { display: block; font-weight: 600; font-size: 0.93rem; letter-spacing: -0.025em; }
.byline span { font-size: 0.83rem; color: var(--mute); line-height: 1.4; }

/* Numbered capability list */
.skills { border-top: 1px solid var(--hair); }
.section--glow .skills { border-top-color: rgba(255, 255, 255, .3); }
.skill {
	display: grid; gap: 0.4rem 2rem;
	padding-block: clamp(1.4rem, 2.8vw, 2.2rem);
	border-bottom: 1px solid var(--hair);
}
.section--glow .skill { border-bottom-color: rgba(255, 255, 255, .22); }
@media (min-width: 48rem) { .skill { grid-template-columns: 4.5rem 1fr 1.35fr; align-items: baseline; } }
.skill__n {
	font-size: 1rem; font-weight: 900; letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	background: var(--sweep); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.section--glow .skill__n { background: none; color: #fff; }
.skill p { font-size: 0.97rem; margin: 0; color: var(--mute); }
.section--glow .skill p { color: rgba(255, 255, 255, .88); }

/* Stat strip */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
@media (min-width: 48rem) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { padding: clamp(1.4rem, 2.6vw, 2rem); background: var(--tint); border-radius: var(--r-sm); }
.stat__n {
	font-size: clamp(2.4rem, 5vw, 3.8rem); font-weight: 900;
	line-height: 0.9; letter-spacing: -0.06em; font-variant-numeric: tabular-nums;
	background: var(--sweep); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat__l {
	margin-top: 0.7rem; font-size: 0.7rem; font-weight: 600;
	letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute);
}

/* Grids */
.grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
@media (min-width: 42rem) { .grid--2, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) {
	.grid--3 { grid-template-columns: repeat(3, 1fr); }
	.grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.split { display: grid; gap: clamp(2rem, 4.5vw, 4rem); }
@media (min-width: 62rem) {
	.split { grid-template-columns: 1fr 1.25fr; align-items: start; }
	.split--even { grid-template-columns: 1fr 1fr; }
	.split__sticky { position: sticky; top: 7rem; }
}

.pull {
	margin: 0; font-size: clamp(1.8rem, 5vw, 3.8rem); font-weight: 900;
	line-height: 1.0; letter-spacing: -0.06em; text-wrap: balance;
}

/* Situation pills */
.chips { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.chip {
	padding: 0.7rem 1.2rem; border-radius: 999px;
	background: var(--glass); border: 1px solid var(--glass-edge);
	backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
	font-size: 0.91rem; color: var(--ink-2);
}
.section--raised .chip, .section--tint .chip { background: var(--tint); border-color: var(--hair); }

/* Price */
.price { display: grid; gap: clamp(1.75rem, 3.5vw, 3rem); }
@media (min-width: 62rem) { .price { grid-template-columns: 1fr 1fr; } }
.price__tag {
	font-size: clamp(3rem, 8vw, 6.2rem); font-weight: 900;
	line-height: 0.88; letter-spacing: -0.07em; font-variant-numeric: tabular-nums;
	background: var(--sweep); -webkit-background-clip: text; background-clip: text; color: transparent;
}

.deflist { margin: 0; }
.deflist__row {
	display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1.5rem;
	padding-block: 0.85rem; border-bottom: 1px solid var(--hair); font-size: 0.94rem;
}
.section--glow .deflist__row { border-bottom-color: rgba(255, 255, 255, .22); }
.deflist__row dt { font-weight: 600; margin: 0; }
.deflist__row dd { margin: 0; color: var(--mute); text-align: right; }
.section--glow .deflist__row dd { color: rgba(255, 255, 255, .82); }

.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li { position: relative; padding-left: 1.7rem; margin-bottom: 0.75rem; font-size: 0.96rem; }
.ticks li::before {
	content: ""; position: absolute; left: 0; top: 0.56em;
	width: 0.7rem; height: 0.34rem;
	border-left: 2px solid var(--red); border-bottom: 2px solid var(--red);
	transform: rotate(-45deg);
}
.section--glow .ticks li::before { border-color: #fff; }

/* Accordion */
.acc { border-top: 1px solid var(--hair); }
.acc__item { border-bottom: 1px solid var(--hair); }
.acc__btn {
	display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
	width: 100%; padding: clamp(1.05rem, 2vw, 1.5rem) 0;
	background: none; border: 0; color: inherit;
	font-family: var(--font); font-size: clamp(1rem, 1.5vw, 1.2rem); font-weight: 600;
	letter-spacing: -0.03em; line-height: 1.3; text-align: left; cursor: pointer;
}
.acc__btn:hover { color: var(--deep); }
.acc__btn::after {
	content: "+"; flex: 0 0 auto; font-size: 1.45rem; line-height: 1; font-weight: 400;
	color: var(--deep); transition: transform .3s;
}
.acc__btn[aria-expanded="true"]::after { transform: rotate(45deg); }
.acc__panel { padding-bottom: 1.5rem; max-width: 48rem; color: var(--mute); }
.acc__panel p { font-size: 0.97rem; }
.acc__panel a { color: var(--deep); }

/* Form */
.form { display: grid; gap: 1rem; }
.field { display: grid; gap: 0.4rem; }
.field label {
	font-size: 0.71rem; font-weight: 600; letter-spacing: 0.14em;
	text-transform: uppercase; color: var(--mute);
}
.field input, .field textarea, .field select {
	width: 100%; padding: 0.9rem 1.1rem;
	background: var(--card); border: 1px solid var(--hair); border-radius: var(--r-sm);
	color: var(--ink); font-family: inherit; font-size: 1rem;
	transition: border-color .2s, box-shadow .2s;
}
.field input:focus, .field textarea:focus, .field select:focus {
	border-color: var(--red); box-shadow: 0 0 0 4px rgba(255, 59, 47, .12);
}
.field textarea { min-height: 9rem; resize: vertical; }
.field--check { display: grid; grid-template-columns: auto 1fr; gap: 0.7rem; align-items: start; }
.field--check input { width: 1.1rem; height: 1.1rem; margin-top: 0.28rem; accent-color: var(--red); }
.field--check label {
	font-size: 0.87rem; font-weight: 400; letter-spacing: 0;
	text-transform: none; line-height: 1.5; color: var(--ink-2);
}
.field--check label a { color: var(--deep); }
.form__note { font-size: 0.83rem; color: var(--mute-2); }

/* Decorative field, hidden from people and from assistive technology. */
.hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto; width: 1px; height: 1px; overflow: hidden;
}

.ferr {
	padding: 0.95rem 1.15rem;
	background: var(--card);
	border: 1px solid var(--deep);
	border-left-width: 3px;
	border-radius: var(--r-sm);
	color: var(--deep-2);
	font-size: 0.92rem;
}

.formdone {
	padding: clamp(1.5rem, 3vw, 2.25rem);
	background: var(--glass);
	border: 1px solid var(--glass-edge);
	border-radius: var(--r);
	box-shadow: var(--shadow);
	backdrop-filter: blur(18px) saturate(170%);
	-webkit-backdrop-filter: blur(18px) saturate(170%);
}
.formdone p { color: var(--mute); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.ftr {
	padding-block: clamp(3.5rem, 7vh, 5.5rem) 2.5rem;
	background: var(--tint); border-top: 1px solid var(--hair); font-size: 0.91rem;
}
.ftr__grid { display: grid; gap: clamp(2rem, 4vw, 3rem); }
@media (min-width: 48rem) { .ftr__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
/* Footer column labels are h2 for a clean heading outline (h4 after an h2
   skipped a level on almost every page), styled back down to a small label. */
.ftr .ftr__h {
	margin: 0 0 1rem; font-size: 0.68rem; font-weight: 600;
	line-height: 1.3; letter-spacing: 0.18em; text-transform: uppercase;
	color: var(--deep);
}
.ftr ul { list-style: none; margin: 0; padding: 0; }
.ftr li { margin-bottom: 0.55rem; }
.ftr a { color: var(--mute); text-decoration: none; transition: color .2s; }
.ftr a:hover { color: var(--deep); }
.ftr__legal {
	margin-top: clamp(2.5rem, 4.5vw, 3.5rem); padding-top: 1.6rem;
	border-top: 1px solid var(--hair);
	display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; justify-content: space-between;
	font-size: 0.81rem; color: var(--mute-2);
}

/* Neutral information, not a warning — so no red accent. Used for
   language availability, which is a fact about the offer, not a caveat. */
.note {
	padding: clamp(1rem, 2vw, 1.4rem) clamp(1.1rem, 2.2vw, 1.6rem);
	background: var(--tint);
	border-left: 3px solid var(--hair-2);
	border-radius: var(--r-sm);
	font-size: 0.92rem;
	color: var(--ink-2);
}
.note strong { font-weight: 600; }
.section--tint .note { background: var(--card); }

.disclaimer {
	padding: clamp(1.2rem, 2.2vw, 1.6rem);
	background: var(--card); border: 1px solid var(--hair);
	border-left: 3px solid var(--red); border-radius: var(--r-sm);
	font-size: 0.87rem; color: var(--ink-2);
}
.disclaimer a { color: var(--deep); }


/* --------------------------------------------------------------------------
   Reveal — scoped to .js so the page is fully readable without JavaScript.
   -------------------------------------------------------------------------- */

.js .rv { opacity: 0; transform: translateY(1.1rem);
	transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.js .rv.is-in { opacity: 1; transform: none; }
.rv--d1 { transition-delay: .06s; }
.rv--d2 { transition-delay: .12s; }
.rv--d3 { transition-delay: .18s; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.js .rv { opacity: 1; transform: none; transition: none; }
	*, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}

/* --------------------------------------------------------------------------
   Phone
   -------------------------------------------------------------------------- */

@media (max-width: 48rem) {
	/* Touch targets. 44px is the smallest reliably hittable control;
	   the small pill button is 36px at desktop size. */
	.nav .btn, .btn--sm { min-height: 44px; padding-block: 0.75rem; }
	.chip { min-height: 44px; display: inline-flex; align-items: center; }

	/* Footer links are a list of small targets sitting close together —
	   the easiest place on the site to mis-tap. */
	.ftr li { margin-bottom: 0.1rem; }
	.ftr a { display: inline-block; padding-block: 0.65rem; }

	/* Definition rows wrap to two lines on a narrow screen. Right-aligning
	   the value then leaves it stranded on its own line, so align left and
	   tighten the gap instead. */
	.deflist__row { gap: 0.15rem; }
	.deflist__row dd { text-align: left; }

	/* The hero ring becomes a background wash rather than an object. */
	.hero__ring { right: -26vw; width: min(80vw, 30rem); opacity: 0.3; }

	/* Long unbroken strings — email addresses, ISBNs — must not push the
	   page sideways. */
	.prose, .deflist__row, .card { overflow-wrap: anywhere; }
}

@media print {
	.hdr, .ftr, .burger, .hero__ring { display: none !important; }
	body { background: #fff; color: #000; }
	.section--glow { background: #fff !important; color: #000 !important; }
	.section--glow::before, .hero::before { display: none !important; }
	.card { box-shadow: none; border: 1px solid #ccc; background: #fff; }
}