/* Takebase theme. A port of site/takebase-site/index.html (landing) and terms.html /
   404.html (document pages) onto core block markup. Tokens come from theme.json; the
   short names below only alias the presets so the rules read like the original sheet.

   Image URLs in here are content-hashed: htdocs/.htaccess caches images for a year and
   this file's ?ver only busts the stylesheet itself, so a changed image gets a new name. */

:root {
	color-scheme: dark;
	--bg: var(--wp--preset--color--bg);
	--elev: var(--wp--preset--color--elev);
	--card: var(--wp--preset--color--card);
	--sunken: var(--wp--preset--color--sunken);
	--rule: var(--wp--preset--color--rule);
	--hair: var(--wp--preset--color--hair);
	--fg: var(--wp--preset--color--fg);
	--dim: var(--wp--preset--color--dim);
	--faint: var(--wp--preset--color--faint);
	--accent: var(--wp--preset--color--accent);
	--tint: var(--wp--preset--color--tint);
	--maxw: var(--wp--custom--maxw);
	--gut: var(--wp--custom--gut);
	--radius: var(--wp--custom--radius);
	--pill: var(--wp--custom--pill);
	--fs-label: var(--wp--preset--font-size--label);
	--fs-eyebrow: var(--wp--preset--font-size--eyebrow);
	--fs-micro: var(--wp--preset--font-size--micro);
	--fs-small: var(--wp--preset--font-size--small);
	--fs-answer: var(--wp--preset--font-size--answer);
	--fs-body: var(--wp--preset--font-size--body);
	--fs-title: var(--wp--preset--font-size--title);
	--fs-sub: var(--wp--preset--font-size--sub);
	--fs-lead: var(--wp--preset--font-size--lead);
	--fs-row: var(--wp--preset--font-size--row);
	--fs-section: var(--wp--preset--font-size--section);
	--fs-cta: var(--wp--preset--font-size--cta);
	--fs-price: var(--wp--preset--font-size--price);
	--fs-display: var(--wp--preset--font-size--display);
}

/* ---- base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; letter-spacing: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul { list-style: none; padding: 0; }
mark.has-inline-color { background-color: transparent; }

.wp-site-blocks { display: flex; flex-direction: column; min-height: 100vh; }
.wp-site-blocks > * { margin-block: 0; }
.site-main { flex: 1 0 auto; }
.site-header, .site-footer, .cta { flex-shrink: 0; }

.wrap { max-width: var(--maxw); width: 100%; margin: 0 auto; padding-inline: var(--gut); }
.sunken { background: var(--sunken); }
section[id] { scroll-margin-top: 24px; }

/* ---- type scale ---- */
.eyebrow {
	font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase;
	color: var(--accent); line-height: 1.2; margin-bottom: 20px;
}
.h1 { font-size: var(--fs-display); font-weight: 700; line-height: 1.02; letter-spacing: -.02em; overflow-wrap: break-word; }
.h2 { font-size: var(--fs-section); font-weight: 700; line-height: 1.08; letter-spacing: -.02em; }
.h-row { font-size: var(--fs-row); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
.body { font-size: var(--fs-body); line-height: 1.6; color: var(--dim); }
.micro { font-size: var(--fs-micro); line-height: 1.5; color: var(--dim); }

/* ---- header ---- */
.nav { height: 80px; display: flex; align-items: center; gap: 32px; border-bottom: 1px solid var(--hair); position: relative; }
.brand { font-size: 18px; font-weight: 600; line-height: 1.6; }
.brand a {
	display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--fg);
	text-transform: lowercase;
}
.brand a::before {
	content: ""; flex: none; width: 40px; height: 40px;
	background: url(../img/mark.b96575def7.svg) center / contain no-repeat;
}
.nav .nav__links { margin-left: auto; }
.nav__links .wp-block-navigation__container { display: flex; flex-wrap: nowrap; align-items: center; gap: 28px; }
.nav__links .wp-block-navigation-item { font-size: var(--fs-small); line-height: 1.6; color: var(--dim); }
.nav__links .wp-block-navigation-item:hover { color: var(--accent); }
.nav__links .wp-block-navigation-item__content { text-decoration: none; white-space: nowrap; }
.nav__links .wp-block-navigation-item.is-cta { color: #000; }
/* Language switcher: two letters each, at the right-hand end of the nav row. Prints
   nothing until WPML has a second language, so the rule can ship ahead of the copy. */
.langs { display: flex; align-items: center; gap: 12px; font-size: var(--fs-small); line-height: 1.6; }
.nav .langs { margin-left: 4px; }
.langs a { color: var(--dim); text-decoration: none; }
.langs a:hover { color: var(--accent); }
.langs__on { color: var(--fg); font-weight: 600; }

.nav__links .wp-block-navigation-item.is-cta .wp-block-navigation-item__content {
	display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 20px;
	border: 1px solid transparent; border-radius: var(--pill); background: var(--accent);
	font-size: var(--fs-small); font-weight: 600;
}

/* ---- buttons ---- */
.wp-block-buttons > .wp-block-button > .wp-block-button__link {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 14px 26px; border: 1px solid transparent; border-radius: var(--pill);
	background: var(--accent); color: #000;
	font-size: var(--fs-body); font-weight: 600; line-height: 1.6; text-decoration: none;
}
.wp-block-buttons > .wp-block-button.is-style-outline > .wp-block-button__link {
	padding: 14px 26px; border: 1px solid var(--rule); background: transparent; color: var(--fg); font-weight: 500;
}
.wp-block-buttons > .wp-block-button.btn--sm > .wp-block-button__link { height: 40px; padding: 0 20px; font-size: var(--fs-small); }
.btns { display: flex; flex-wrap: wrap; gap: 12px; }

/* Both store badges are images, sized by height and never stretched by the flex row:
   the two lockups have different proportions, so only a shared height lines them up. */
.storebadge { align-self: center; display: inline-flex; }
.storebadge img { height: 48px; width: auto; display: block; }

/* ---- hero ---- */
.hero { padding-block: 96px 80px; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 536px); gap: 48px; align-items: center; }
.hero__sub { font-size: var(--fs-sub); line-height: 1.55; color: var(--dim); max-width: 34ch; margin-top: 24px; }
.hero__btns { margin-top: 32px; }
.hero__micro { margin-top: 20px; }
.hero__by {
	margin-top: 24px; display: flex; align-items: center; gap: 10px;
	font-size: var(--fs-micro); line-height: 1.45; color: var(--dim); flex-wrap: wrap;
}
.hero__by .wp-block-image { flex: none; }
.hero__by img { width: 28px; height: 28px; border-radius: var(--pill); }
.hero__by a { color: var(--accent); text-decoration: none; }
.hero__by a:hover { text-decoration: underline; }
.hero__shot { justify-self: end; }

/* ---- hero crossfade: the shots sit in one grid cell and only opacity moves, so the
   column never changes height. With no script the first one is the only one shown. ---- */
.fader { display: grid; justify-items: center; gap: 22px; width: 100%; max-width: 395px; }
.fader__stack { display: grid; width: 100%; }
.fader__item { grid-area: 1 / 1; opacity: 0; transition: opacity .7s ease; }
.fader__item.is-on { opacity: 1; }

/* The screenshots are full-screen device captures with square corners, so the screen's
   rounding and a hairline edge come from here. The two radii are the same length in
   pixels on a 740x1600 capture, so the corners stay circular at any width. */
.phone img, .shot img { border-radius: 11.5% / 5.3%; box-shadow: 0 0 0 1px var(--rule), 0 18px 40px rgba(0, 0, 0, .45); }

/* ---- sections ---- */
.pad { padding-block: 120px; }
.head { max-width: 56ch; margin-bottom: 64px; }
.head .body { margin-top: 20px; }
.head .body a { color: var(--accent); text-decoration: none; }
.head .body a:hover { text-decoration: underline; }
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.card { background: var(--card); border: 1px solid var(--hair); border-radius: var(--radius); padding: 28px 24px 30px; }
.card__art { margin-bottom: 24px; }
.card__art img { display: block; width: 100%; height: auto; aspect-ratio: 384 / 216; }
.card__n { font-size: 44px; font-weight: 700; line-height: 1; color: var(--accent); margin-bottom: 20px; }
.card h3 { font-size: var(--fs-title); font-weight: 600; line-height: 1.25; margin-bottom: 10px; }
.card p { font-size: var(--fs-body); line-height: 1.6; color: var(--dim); }

/* ---- feature slider: one section, one slide per feature ----------------------
   The track is a scroll-snap row and works with no script at all; slides.js adds the
   dots and the arrows. Each slide keeps the anchor its own section used to have, so an
   old /#comments link still lands on it. ---- */
.slides { position: relative; }
.slides__track {
	display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: 24px;
	overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
	scrollbar-width: none; -ms-overflow-style: none;
}
.slides__track::-webkit-scrollbar { display: none; }
.slide {
	scroll-snap-align: center; scroll-margin: 0;
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 56px; align-items: center;
	background: var(--card); border: 1px solid var(--hair); border-radius: var(--radius);
	padding: 48px 48px 48px 44px;
}
.h-slide { font-size: clamp(24px, 2.9vw, 34px); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; }
.slide .body { margin-top: 16px; }
.slide__shot { display: flex; justify-content: center; }
.phone img { width: 100%; max-width: 395px; }
.slides__nav { margin-top: 28px; display: flex; align-items: center; justify-content: center; gap: 20px; }
.slides__btn {
	flex: none; width: 40px; height: 40px; display: grid; place-items: center; padding: 0;
	border: 1px solid var(--rule); border-radius: var(--pill); background: transparent;
	color: var(--dim); cursor: pointer;
}
.slides__btn:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); }
.slides__btn:disabled { opacity: .35; cursor: default; }
.dots { display: flex; align-items: center; gap: 8px; }
.dots__dot {
	width: 8px; height: 8px; padding: 0; border: 0; border-radius: var(--pill);
	background: var(--rule); cursor: pointer; transition: width .25s ease, background-color .25s ease;
}
.dots__dot:hover { background: var(--faint); }
.dots__dot[aria-current="true"] { width: 26px; background: var(--accent); }
.ticks { margin-top: 28px; display: grid; gap: 14px; }
.ticks li { position: relative; padding-left: 20px; font-size: var(--fs-small); line-height: 1.4; color: var(--fg); }
.ticks li::before { content: ""; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; background: var(--accent); }

/* ---- three words: the diagram, then the three cards ---- */
.cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.model {
	display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
	gap: 20px; align-items: stretch; margin-bottom: 48px;
}
.model__step { display: grid; grid-template-rows: auto 1fr auto; gap: 12px; }
.model__kind {
	font-size: var(--fs-label); font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase;
	color: var(--accent); line-height: 1.6;
}
.model__box {
	display: grid; gap: 10px; align-content: start;
	background: var(--card); border: 1px solid var(--rule); border-radius: 14px; padding: 16px;
}
.model__arrow { align-self: center; display: flex; color: var(--faint); }
.model__hint { font-size: var(--fs-micro); line-height: 1.5; color: var(--dim); }
.model__id { display: flex; align-items: center; gap: 12px; }
.model__cover {
	flex: none; width: 40px; height: 40px; border-radius: 8px;
	background: linear-gradient(140deg, var(--accent), var(--tint));
}
.model__idtext { display: grid; gap: 2px; }
.model__idtext b { font-size: var(--fs-small); font-weight: 600; }
.model__idtext small, .model__row small { font-size: var(--fs-label); color: var(--faint); }
.model__people { display: flex; align-items: center; gap: 8px; padding-top: 2px; }
.model__face {
	flex: none; width: 24px; height: 24px; margin-right: -12px; border-radius: var(--pill);
	background: var(--rule); border: 1px solid var(--card);
	display: grid; place-items: center; font-size: 10px; font-weight: 600; color: var(--dim);
}
.model__face:last-of-type { margin-right: 4px; }
.model__people small { font-size: var(--fs-label); color: var(--faint); }
.model__row {
	display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 10px;
	background: var(--elev); border: 1px solid transparent; border-radius: 9px;
	font-size: var(--fs-micro); line-height: 1.3;
}
.model__row > span:first-child { flex: 1 1 auto; }
.model__row small { flex: none; margin-left: auto; }
.model__row b { flex: none; font-size: var(--fs-label); font-weight: 600; color: var(--faint); font-variant-numeric: tabular-nums; }
.model__row--on { border-color: var(--accent); }
.model__row--on b { color: var(--accent); }
.model__wave { flex: 1 1 auto; display: flex; align-items: center; gap: 2px; height: 16px; }
.model__wave i { flex: 1 1 0; min-width: 2px; max-width: 3px; border-radius: 2px; background: var(--wave); }
.model__row--on .model__wave i { background: var(--accent); }
.model__part { display: grid; gap: 8px; }
.model__part + .model__part { margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--hair); }
.model__label {
	font-size: var(--fs-label); font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
	color: var(--faint); line-height: 1.6;
}
.model__note { font-size: var(--fs-micro); line-height: 1.45; color: var(--dim); }
.model__pin { display: flex; gap: 8px; font-size: var(--fs-micro); line-height: 1.45; color: var(--dim); }
.model__pin b { flex: none; color: var(--pin); font-weight: 600; font-variant-numeric: tabular-nums; }
.lead { font-size: var(--fs-lead); font-weight: 400; line-height: 1.35; letter-spacing: -.01em; margin-top: 24px; }
.spec { margin-top: 8px; border-top: 1px solid var(--hair); }
.spec__row {
	display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 32px;
	padding: 20px 0; border-bottom: 1px solid var(--hair);
}
.spec__k { font-size: var(--fs-small); font-weight: 600; line-height: 1.4; }
.spec__v { font-size: var(--fs-small); line-height: 1.55; color: var(--dim); }

/* ---- FAQ: one H3 and its answer paragraphs per row, no wrapper around the answer
   (the FAQPage schema reads that shape), so the question spans every answer row. ---- */
.faq { margin-top: 8px; border-top: 1px solid var(--hair); }
.faq__row {
	display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); column-gap: 32px;
	padding: 24px 0; border-bottom: 1px solid var(--hair);
}
.faq__row > h3 { grid-column: 1; grid-row: 1 / span 12; font-size: var(--fs-body); font-weight: 600; line-height: 1.4; letter-spacing: -.01em; }
.faq__row > p { grid-column: 2; font-size: var(--fs-answer); line-height: 1.65; color: var(--dim); }
.faq__row > p + p { margin-top: 14px; }
.faq__row > p strong { color: var(--fg); font-weight: 600; }
.faq__row > p a { color: var(--accent); text-decoration: none; }
.faq__row > p a:hover { text-decoration: underline; }

.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }
.duo h3 { font-size: clamp(22px, 2.4vw, 28px); font-weight: 700; line-height: 1.2; letter-spacing: -.01em; margin-bottom: 14px; }
.duo p { font-size: var(--fs-body); line-height: 1.65; color: var(--dim); }
.duo p + p { margin-top: 16px; }
.duo a { color: var(--accent); text-decoration: none; }
.duo a:hover { text-decoration: underline; }

.ladder { background: var(--card); border: 1px solid var(--hair); border-radius: var(--radius); padding: 36px 32px; }
.ladder .steps { gap: 18px; }
.ladder .steps li { font-size: var(--fs-body); line-height: 1.5; }
.ladder .steps li strong { color: var(--fg); font-weight: 600; }
.ladder__end {
	margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--hair);
	font-size: var(--fs-body); line-height: 1.6; color: var(--dim);
}

/* ---- in practice ---- */
.thenow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.thenow__col { background: var(--card); border: 1px solid var(--hair); border-radius: var(--radius); padding: 32px 28px; }
.thenow__col--now { border-color: var(--accent); }
.thenow h3 { font-size: var(--fs-title); font-weight: 600; line-height: 1.25; margin-bottom: 22px; }
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; counter-reset: s; }
.steps li { position: relative; padding-left: 32px; font-size: var(--fs-small); line-height: 1.45; color: var(--fg); counter-increment: s; }
.steps li::before {
	content: counter(s); position: absolute; left: 0; top: 0; width: 20px;
	font-size: 13px; font-weight: 600; line-height: 1.6; color: var(--faint);
}
.thenow__col--now .steps li::before { color: var(--accent); }
.after { margin-top: 48px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.after__lead { font-size: var(--fs-lead); font-weight: 400; line-height: 1.35; letter-spacing: -.01em; }
.after__body { display: grid; gap: 20px; }
.after__body p { font-size: var(--fs-body); line-height: 1.65; color: var(--dim); }

/* ---- tiles ---- */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 48px; }
.tile__art { margin-bottom: 16px; }
.tile__art img { display: block; width: 160px; max-width: 100%; height: auto; aspect-ratio: 128 / 96; }
.tile h3 { font-size: var(--fs-title); font-weight: 600; line-height: 1.25; margin-bottom: 8px; }
.tile p { font-size: var(--fs-small); line-height: 1.5; color: var(--dim); }
.tile h3 mark {
	display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: var(--pill);
	background: var(--tint); color: var(--accent);
	font-size: var(--fs-label); font-weight: 600; letter-spacing: .4px; text-transform: uppercase;
	vertical-align: middle; white-space: nowrap;
}

/* ---- segmented control: a core/buttons block with className "segmented", one
   core/button (tagName button) per option, each carrying is-filter-<value>. The script
   in assets/js/segmented.js writes data-segment="<value>" on the enclosing section and
   the rules under it decide what each value shows. Without the script the control stays
   hidden and the section reads as it always did: every tile, the monthly price. ---- */
.segmented { display: none; }
.wp-block-buttons.segmented.is-ready {
	position: relative; isolation: isolate;
	display: inline-grid; grid-auto-flow: column; grid-auto-columns: auto; gap: 0;
	padding: 4px; border: 1px solid var(--rule); border-radius: var(--pill);
	background: linear-gradient(180deg, var(--elev) 0%, var(--card) 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 12px 32px rgba(0, 0, 0, .45);
}
.segmented.is-ready::before {
	content: ""; position: absolute; z-index: -1; top: 4px; bottom: 4px; left: 0;
	width: var(--seg-w, 0); transform: translateX(var(--seg-x, 0));
	border-radius: var(--pill); background: var(--accent);
	box-shadow: 0 0 0 1px rgba(255, 214, 10, .35), 0 6px 24px rgba(255, 214, 10, .28);
}
.segmented.is-placed::before {
	transition: transform .42s cubic-bezier(.3, 1.3, .5, 1), width .42s cubic-bezier(.3, 1.3, .5, 1);
}
.segmented > .wp-block-button { margin: 0; }
.wp-block-buttons.segmented > .wp-block-button > .wp-block-button__link {
	height: 40px; padding: 0 20px; border: 0; border-radius: var(--pill);
	background: transparent; color: var(--dim);
	font-size: var(--fs-small); font-weight: 600; line-height: 1; letter-spacing: -.005em; white-space: nowrap;
	cursor: pointer; transition: color .2s ease;
}
.wp-block-buttons.segmented > .wp-block-button > .wp-block-button__link:hover { color: var(--fg); }
.wp-block-buttons.segmented > .wp-block-button > .wp-block-button__link[aria-checked="true"] { color: #000; }
.wp-block-buttons.segmented > .wp-block-button > .wp-block-button__link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.segmented + .tiles { margin-top: 48px; }
.plan .segmented.is-ready { margin-top: 22px; align-self: flex-start; }
.plan .wp-block-buttons.segmented > .wp-block-button > .wp-block-button__link { height: 34px; padding: 0 18px; font-size: var(--fs-micro); }

/* What each value shows. */
[data-segment="android"] .is-iphone-only { display: none; }
section:not([data-segment="android"]) .is-android-only { display: none; }
[data-segment="iphone"] .tile h3 mark { display: none; }
[data-segment="annual"] .is-monthly,
section:not([data-segment="annual"]) .is-annual { display: none; }

/* The slider moves on its own; the view transition must not crossfade it as well. */
::view-transition-old(segmented-control) { display: none; }
::view-transition-new(segmented-control) { animation: none; }

/* ---- the three screenshots ---- */
.shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; align-items: start; margin-top: 88px; }
.shot img { width: 100%; max-width: 300px; height: auto; margin: 0 auto; }
.shot figcaption {
	margin: 20px auto 0; max-width: 300px; text-align: center;
	font-size: var(--fs-small); line-height: 1.5; color: var(--dim);
}
.shot figcaption strong { display: block; color: var(--fg); font-weight: 600; margin-bottom: 4px; }

/* ---- pricing ---- */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.plan {
	background: var(--card); border: 1px solid var(--hair); border-radius: var(--radius); padding: 36px 32px 32px;
	display: flex; flex-direction: column;
}
.plan--pro { border-color: var(--accent); }
.plan__name { font-size: var(--fs-title); font-weight: 600; line-height: 1.25; }
.plan__name mark {
	display: inline-block; margin-left: 10px; padding: 5px 9px; border-radius: 6px; vertical-align: 2px;
	background: var(--tint); color: var(--accent);
	font-size: var(--fs-label); font-weight: 600; letter-spacing: 1.2px;
}
.plan__price { display: flex; align-items: baseline; gap: 8px; margin-top: 18px; }
.plan__amount { font-size: var(--fs-price); font-weight: 700; line-height: 1; }
.plan__per { font-size: var(--fs-body); font-weight: 400; line-height: 1; color: var(--dim); }
.plan__note { font-size: var(--fs-small); color: var(--dim); margin-top: 8px; }
.plan__quota { font-size: var(--fs-body); line-height: 1.6; color: var(--dim); margin-top: 14px; }
.plan .ticks { margin-top: 24px; margin-bottom: 28px; }
.plan__cta { margin-top: auto; display: flex; }
.plan__cta > .wp-block-button { flex: 1 1 auto; }
.plan__cta > .wp-block-button > .wp-block-button__link { width: 100%; }
.plans__micro { margin-top: 24px; }

/* ---- who made it ---- */
.who__grid { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 64px; align-items: start; }
.who__photo img { border-radius: var(--radius); border: 1px solid var(--hair); }
.who__sig { font-size: var(--fs-micro); line-height: 1.5; color: var(--faint); margin-top: 20px; }
.who__lead { font-size: var(--fs-lead); font-weight: 400; line-height: 1.35; letter-spacing: -.01em; margin-top: 24px; }
.who__body { display: grid; gap: 20px; margin-top: 28px; }
.who__body p { font-size: var(--fs-body); line-height: 1.65; color: var(--dim); }
.who__body a, .who__sig a { color: var(--accent); text-decoration: none; }
.who__body a:hover, .who__sig a:hover { text-decoration: underline; }
.who__links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* ---- CTA band ---- */
.cta { background: var(--accent); color: #000; padding-block: 96px; overflow: hidden; }
.cta h2 { font-size: var(--fs-cta); font-weight: 700; line-height: 1.02; letter-spacing: -.025em; max-width: 18ch; }
.cta__sub { font-size: var(--fs-sub); line-height: 1.55; margin-top: 20px; max-width: 40ch; }
.cta .btns { margin-top: 32px; }
.cta__icon { margin-bottom: 32px; }
.cta__icon img { width: 96px; height: 96px; border-radius: 22.37%; box-shadow: 0 10px 30px rgba(0, 0, 0, .30); }
/* Full-bleed, outside .wrap, so the bars keep their 5px at any width. The tile is only
   seamless because 8 divides 1200 (see the vault's website page before touching it). */
.cta__wave {
	height: 76px; margin-top: 56px;
	background: url(../img/wave-cta.841d13e0f6.svg) repeat-x left center; background-size: 1200px 76px;
}
body:not(.home) .cta { padding-block: 88px; }
body:not(.home) .cta h2 { font-size: clamp(30px, 5.2vw, 56px); line-height: 1.04; max-width: 16ch; }

/* ---- footer ---- */
.site-footer { padding-top: 80px; padding-bottom: 40px; border-top: 1px solid var(--hair); }
body:not(.home) .site-footer { padding-top: 64px; }
.foot__top { display: grid; grid-template-columns: minmax(0, 1fr) repeat(2, minmax(0, auto)); gap: 48px; }
.foot__tagline { font-size: var(--fs-small); line-height: 1.5; color: var(--dim); margin-top: 14px; max-width: 26ch; }
.foot__col h3 {
	font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase;
	color: var(--faint); margin-bottom: 16px; line-height: 1.6;
}
.site-footer .foot__nav .wp-block-navigation__container { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.foot__nav .wp-block-navigation-item { font-size: var(--fs-small); line-height: 1.4; color: var(--dim); }
.foot__nav .wp-block-navigation-item:hover { color: var(--accent); }
.foot__nav .wp-block-navigation-item__content { text-decoration: none; }
.foot__contact { margin-top: 12px; font-size: var(--fs-small); line-height: 1.4; }
.foot__contact a { color: var(--dim); text-decoration: none; }
.foot__contact a:hover { color: var(--accent); }
.copyright { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }
.foot__made { color: var(--dim); }
.foot__made .heart { color: var(--accent); }
.copyright {
	margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--hair);
	font-size: var(--fs-micro); color: var(--faint);
	display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
/* The header's switcher again, in the footer's small print. It keeps the row
   and the colours it has up top and takes this line's size, so it reads as
   part of the copyright line rather than shouting over it. WPML's own footer
   switcher is off; two switchers is two things to style. */
.copyright .langs { font-size: inherit; gap: 10px; }
.copyright a { color: var(--dim); text-decoration: none; }
.copyright a:hover { color: var(--accent); }
/* The shared credit mu-plugin moves its mark into this row; match the static footer. */
.copyright .massruum-credit.is-inline { margin-left: 0; display: inline-flex; line-height: 0; }
.copyright .massruum-credit-link { color: var(--dim); opacity: .8; }
.copyright .massruum-credit-link:hover, .copyright .massruum-credit-link:focus-visible { opacity: 1; }

/* ---- document pages: /terms, /privacy, /delete-account ---- */
body:not(.home) .site-main { padding-block: 80px 96px; }
.prose { max-width: 44rem; margin-inline: auto; }
.prose h1 { font-size: clamp(32px, 5vw, 44px); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; margin: 0 0 10px; }
.prose h2 { font-size: var(--fs-title); font-weight: 600; line-height: 1.3; letter-spacing: -.01em; margin: 48px 0 12px; }
.prose h3 { font-size: var(--fs-body); font-weight: 600; line-height: 1.5; margin: 24px 0 6px; }
.prose p, .prose li { color: var(--fg); margin: 0 0 16px; font-size: var(--fs-body); line-height: 1.7; }
.prose .lede { color: var(--dim); font-size: 19px; line-height: 1.65; }
.prose .meta { font-size: var(--fs-micro); color: var(--faint); margin: 0 0 40px; }
.prose ul { list-style: disc; padding-left: 22px; margin: 0 0 16px; }
.prose ol { list-style: decimal; padding-left: 22px; margin: 0 0 16px; }
.prose li { margin: 0 0 8px; }
.prose a { color: var(--accent); }
.prose .wp-block-table { margin: 16px 0; overflow-x: auto; }
.prose .wp-block-table table { border-collapse: collapse; width: 100%; font-size: var(--fs-small); }
.prose .wp-block-table thead { border-bottom: 0; }
.prose .wp-block-table th, .prose .wp-block-table td {
	text-align: left; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--hair); vertical-align: top;
}
.prose .wp-block-table th { color: var(--dim); font-weight: 600; }
.listing .wp-block-post-title { font-size: var(--fs-title); font-weight: 600; line-height: 1.3; margin: 40px 0 4px; }
.listing .wp-block-post-title a { text-decoration: none; }
.listing .wp-block-post-date { font-size: var(--fs-micro); color: var(--faint); margin-bottom: 8px; }

/* ---- 404 ---- */
.notice .eyebrow { margin-bottom: 16px; }
.notice h1 { font-size: clamp(30px, 5.4vw, 52px); font-weight: 700; line-height: 1.06; letter-spacing: -.02em; max-width: 18ch; overflow-wrap: break-word; }
.notice .lede { font-size: clamp(17px, 1.7vw, 20px); line-height: 1.55; color: var(--dim); margin-top: 20px; max-width: 52ch; }
.notice .lede + .lede { margin-top: 16px; }
.notice .btns { margin-top: 32px; }
.pitch { margin-top: 72px; padding-top: 40px; border-top: 1px solid var(--hair); }
.pitch h2 { font-size: 22px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.notice .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 28px; }
.notice .card { padding: 24px 22px 26px; }
.notice .card h3 { font-size: var(--fs-body); line-height: 1.3; margin-bottom: 8px; }
.notice .card p { font-size: var(--fs-small); line-height: 1.55; }

/* ---- 900: rows go single column; the landing nav collapses to its CTA, document
   pages wrap the nav to a second row ---- */
@media (max-width: 900px) {
	.pad { padding-block: 80px; }
	.hero { padding-block: 64px 56px; }
	.hero__grid { grid-template-columns: minmax(0, 1fr); gap: 56px; align-items: start; }
	.hero__shot { justify-self: start; }
	.hero__sub { max-width: none; }
	.cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.slide { grid-template-columns: minmax(0, 1fr); gap: 36px; padding: 36px 32px; }
	.slide__shot { justify-content: flex-start; }
	.slide__shot img { max-width: 320px; }
	.model { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.model__arrow { justify-self: center; transform: rotate(90deg); }
	.who__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
	.who__photo img { max-width: 280px; }
	.tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
	.after { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.duo { grid-template-columns: minmax(0, 1fr); gap: 36px; }
	.spec__row { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 18px 0; }
	.faq__row { grid-template-columns: minmax(0, 1fr); padding: 22px 0; }
	.faq__row > h3 { grid-row: auto; margin-bottom: 8px; }
	.faq__row > p { grid-column: 1; }
	.shots { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; margin-top: 64px; }
	.plans { grid-template-columns: minmax(0, 1fr); }
	.foot__top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }

	.home .nav__links { display: none; }
	.home .nav { gap: 16px; }
	.home .nav .langs { margin-left: auto; }

	body:not(.home) .nav { height: auto; min-height: 0; padding-block: 14px; flex-wrap: wrap; gap: 12px 20px; }
	body:not(.home) .site-header .brand a { min-height: 40px; }
	body:not(.home) .nav .nav__links { flex-basis: 100%; margin-left: 0; }
	body:not(.home) .nav__links .wp-block-navigation__container { flex-wrap: wrap; gap: 20px; padding-top: 2px; }
	body:not(.home) .nav__links .wp-block-navigation-item { font-size: 14px; }
	body:not(.home) .nav__links .wp-block-navigation-item.is-cta { position: absolute; top: 14px; right: var(--gut); }
	body:not(.home) .site-main { padding-block: 56px 72px; }
	body:not(.home) .cta { padding-block: 72px; }
	.prose h2 { margin-top: 40px; }
	.notice .cards { grid-template-columns: minmax(0, 1fr); }
	.pitch { margin-top: 56px; }
}

/* ---- 600: the mobile board's scale, and the footer centres ---- */
@media (max-width: 600px) {
	:root { --gut: 20px; }
	body { font-size: 16px; }
	.pad { padding-block: 64px; }
	.head { margin-bottom: 40px; }
	.cards { grid-template-columns: minmax(0, 1fr); }
	.tiles { grid-template-columns: minmax(0, 1fr); }
	.tile__art img { margin-inline: auto; }
	.shots { grid-template-columns: minmax(0, 1fr); gap: 48px; }
	.wp-block-buttons.segmented.is-ready:not(.plan .segmented) { display: grid; grid-auto-columns: minmax(0, 1fr); width: 100%; }
	.wp-block-buttons.segmented:not(.plan .segmented) > .wp-block-button > .wp-block-button__link {
		width: 100%; padding: 0 6px; font-size: clamp(12px, 3.5vw, 15px);
	}
	.segmented + .tiles { margin-top: 36px; }
	.thenow { grid-template-columns: minmax(0, 1fr); }
	.thenow__col { padding: 28px 24px; }
	.ladder { padding: 28px 24px; }
	.slide { padding: 28px 24px; }
	.slides__track { gap: 16px; }

	.btns { gap: 10px; flex-direction: column; align-items: stretch; }
	.btns > .wp-block-button > .wp-block-button__link { width: 100%; }
	.cta__wave { height: 56px; background-size: auto 56px; }
	.cta__icon { margin-bottom: 24px; }
	.cta__icon img { width: 72px; height: 72px; }

	.home .nav { gap: 12px; }
	.home .brand { font-size: 16px; }
	.home .brand a::before { width: 32px; height: 32px; }
	.langs { gap: 8px; }

	body:not(.home) .nav__links .wp-block-navigation__container { gap: 16px; }
	body:not(.home) .nav__links .wp-block-navigation-item { font-size: 13px; }
	body:not(.home) .nav__links .wp-block-navigation-item.is-cta { font-size: var(--fs-small); }
	body:not(.home) .brand { font-size: 17px; }
	body:not(.home) .brand a::before { width: 34px; height: 34px; }
	.prose p, .prose li { font-size: 16px; }
	.prose .lede { font-size: 18px; }

	.site-footer { text-align: center; }
	.foot__top { grid-template-columns: minmax(0, 1fr); gap: 36px; justify-items: center; }
	.site-footer .brand a { justify-content: center; }
	.foot__tagline { max-width: none; }
	.site-footer .foot__nav .wp-block-navigation__container { align-items: center; }
	/* The copyright, the made-in-the-EU line and the studio mark, under each other. */
	.copyright { flex-direction: column; justify-content: center; gap: 14px; }
}

/* ---- page-change crossfade: header and footer hold still while the body fades ---- */
@view-transition { navigation: auto; }
::view-transition-old(*),
::view-transition-new(*) { animation-duration: .4s; animation-timing-function: ease; }
.site-header { view-transition-name: site-header; }
.site-footer { view-transition-name: site-footer; }

@media (prefers-reduced-motion: reduce) {
	@view-transition { navigation: none; }
	* { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}