/* Campus Nivas website: the design, on top of GeneratePress.
   Colours come from Customise > Colours (GeneratePress global colours), with the Campus Nivas colours as
   fallbacks. Sections are block groups with a class (hero, nv-section, bento, card ...); the
   classes are listed in docs/editing.md. */

:root {
	--nv-navy: var(--contrast, #0F172A);
	--nv-ink: var(--contrast-2, #1F2937);
	--nv-slate: var(--contrast-3, #64748B);
	--nv-line: var(--base, #E2E8F0);
	--nv-bg: var(--base-2, #F8FAFC);
	--nv-white: var(--base-3, #FFFFFF);
	--nv-teal: var(--accent, #0F766E);
	--nv-teal-dark: var(--accent-2, #115E59);
	--nv-bright: var(--accent-3, #14B8A6);
	--nv-mint: var(--mint, #CCFBF1);
	--nv-mint-50: var(--mint-2, #F0FDFA);
	--nv-amber: var(--amber, #B45309);
	--nv-radius: 16px;
	--nv-shadow: 0 24px 60px -20px rgba(15, 23, 42, .25), 0 2px 6px rgba(15, 23, 42, .06);
	--nv-shadow-soft: 0 14px 40px -18px rgba(15, 23, 42, .22);
	--nv-gutter: 24px;
	--nv-wrap: 1132px; /* content width inside a section */
	--nv-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F766E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E");
}

html { scroll-behavior: smooth; scroll-padding-top: 90px; }
/* Fonts and heading weights are set in Customise > Typography (GeneratePress). */
body { -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { color: var(--nv-navy); }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 3px solid var(--nv-bright); outline-offset: 2px; }

/* --- Full-width pages ------------------------------------------------------------------------
   Pages with "Content container: Full width" in GeneratePress' Layout box carry their own
   sections, edge to edge. */
.full-width-content .site.grid-container { max-width: none; }
.full-width-content.one-container .site-content,
.full-width-content .site-content,
.full-width-content .inside-article { padding: 0; }
.full-width-content .site-main,
.full-width-content .inside-article,
.full-width-content .entry-content,
.full-width-content .entry-content:not(:first-child) { margin: 0; }

/* Inside the Campus Nivas sections, spacing comes from the rules below, not from the defaults. */
:is(.nv-section, .hero, .page-hero, .nv-footer, .subnav) :where(*) { margin: 0; }
:is(.nv-section, .hero, .page-hero) :where(ul, ol) { padding: 0; }

/* A section: full width, content centred at 1132px. */
.nv-section, .hero, .page-hero {
	padding-inline: max(var(--nv-gutter), calc((100% - var(--nv-wrap)) / 2));
}
.nv-section { padding-block: 96px; }
.nv-section.alt { background: var(--nv-bg); }
.nv-section.pt-tight { padding-top: 56px; }

/* --- Text pieces --------------------------------------------------------------------------- */
.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--nv-teal); }
.pill { display: inline-flex; align-items: center; gap: 6px; width: fit-content; font-size: 12.5px; font-weight: 600; line-height: 1.5; padding: 4px 10px; border-radius: 99px; background: var(--nv-mint-50); color: var(--nv-teal); border: 1px solid var(--nv-mint); }
.pill.addon { background: #FFFBEB; color: var(--nv-amber); border-color: #FDE68A; }
.lead { color: var(--nv-slate); }

/* Lists with a tick before each line. */
.checks { list-style: none; display: grid; gap: 12px; margin-top: 24px; }
.checks li { position: relative; padding-left: 34px; }
.checks li::before { content: ""; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%; background: var(--nv-mint) var(--nv-check) center / 13px no-repeat; }

/* --- Buttons --------------------------------------------------------------------------------
   The block editor's Button block. Style "Ghost" (in the block's Styles) is white with a border. */
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
/* The filled colour is GeneratePress' button colour (Customise > Colours > Buttons); this sets the shape. */
.wp-block-button a.wp-block-button__link {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 13px 22px; border-radius: 10px; border: 1px solid transparent;
	font-size: 15px; font-weight: 600; line-height: 1.4; text-decoration: none;
	transition: background .15s, box-shadow .15s, color .15s;
}
.wp-block-button a.wp-block-button__link:hover,
.wp-block-button a.wp-block-button__link:focus { box-shadow: 0 6px 18px -6px rgba(15, 118, 110, .6); }
.wp-block-button.is-style-ghost a.wp-block-button__link,
.wp-block-button.is-style-ghost a.wp-block-button__link:hover,
.wp-block-button.is-style-ghost a.wp-block-button__link:focus { background: #fff; color: var(--nv-navy); border-color: var(--nv-line); }
.wp-block-button.is-style-ghost a.wp-block-button__link:hover { border-color: #CBD5E1; box-shadow: none; }
.wp-block-buttons.center, .wp-block-buttons.ctas { justify-content: center; }
/* A centred button under a row of cards (Request a quote, on Pricing) stands clear of them. */
.nv-section .wp-block-buttons.center { margin-top: 32px; }

/* --- Header: GeneratePress menu as the header (GP Premium Menu Plus), sticky ------------------ */
.main-navigation { border-bottom: 1px solid var(--nv-line); }
.main-navigation.navigation-stick, .main-navigation.is_stuck { background: var(--nv-white); box-shadow: none; }
/* The same side margin as the page's sections (GeneratePress' own rule for this is more specific).
   It covers the menu as it sticks too, when GP Premium changes its id. */
#site-navigation .inside-navigation.grid-container, #sticky-navigation .inside-navigation.grid-container,
nav.main-navigation.has-branding .inside-navigation.grid-container { padding-left: var(--nv-gutter); padding-right: var(--nv-gutter); }
#site-navigation .navigation-branding, #sticky-navigation .navigation-branding, nav.main-navigation .navigation-branding { margin-left: 0; }
.navigation-branding .site-logo img, .navigation-branding img { height: 68px; width: auto; padding: 17px 0; }
.navigation-branding .main-title a { color: var(--nv-navy); font-size: 20px; font-weight: 800; letter-spacing: -.02em; text-decoration: none; }
.navigation-branding > div + .main-title { margin-left: 10px; }
.main-navigation .main-nav ul li a { font-size: 15px; font-weight: 500; }
.main-navigation .main-nav > ul > li:not(.nv-menu-button) > a { position: relative; }
.main-navigation .main-nav > ul > li:not(.nv-menu-button) > a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 18px; height: 2px; background: transparent; }
.main-navigation .main-nav > ul > li.current-menu-item:not(.menu-item-type-custom) > a::after,
.main-navigation .main-nav > ul > li.current_page_parent > a::after { background: var(--nv-teal); }
.main-navigation .main-nav > ul > li.menu-item-type-custom.current-menu-item > a { color: var(--nv-ink); }

/* "Book a demo": a menu item with the CSS class nv-menu-button (Appearance > Menus). */
.main-navigation .main-nav ul li.nv-menu-button > a {
	margin-left: 10px; padding: 10px 18px; line-height: 1.4; border-radius: 10px;
	background: var(--nv-teal); color: #fff; font-weight: 600;
}
.main-navigation .main-nav ul li.nv-menu-button > a:hover { background: var(--nv-teal-dark); color: #fff; }

@media (max-width: 768px) {
	/* The menu button shows the three lines only; its "Menu" label stays for screen readers. */
	.main-navigation .menu-toggle .mobile-menu { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	nav.main-navigation.has-branding .menu-toggle, nav.main-navigation .menu-toggle { width: 40px; height: 40px; padding: 0; margin: 0; border: 0; border-radius: 12px; background: var(--nv-mint-50); color: var(--nv-teal); font-size: 20px; line-height: 1; display: grid; place-items: center; }
	nav.main-navigation .menu-toggle:hover, nav.main-navigation .menu-toggle:focus, nav.main-navigation.toggled .menu-toggle { background: var(--nv-mint); color: var(--nv-teal-dark); }
	.main-navigation.toggled .main-nav > ul { padding: 8px 0 16px; border-top: 1px solid var(--nv-line); }
	.main-navigation.toggled .main-nav ul li a { line-height: 1.4; padding: 12px 0; }
	.main-navigation .main-nav > ul > li > a::after { display: none; }
	.main-navigation.toggled .main-nav ul li.nv-menu-button > a { display: inline-flex; margin: 8px 0 0; padding: 10px 18px; }
	.navigation-branding .site-logo img, .navigation-branding img { height: 60px; padding: 14px 0; }
}

/* --- Hero (home page top) -------------------------------------------------------------------- */
.hero { background: radial-gradient(1200px 500px at 50% -10%, var(--nv-mint-50), transparent 70%), var(--nv-white); padding-top: 72px; text-align: center; overflow: hidden; }
.hero h1 { font-size: clamp(2.3rem, 5vw, 3.6rem); font-weight: 800; max-width: 880px; margin: 14px auto 0; }
.hero h1 em { font-style: normal; color: var(--nv-teal); }
.hero .lead { font-size: clamp(1.05rem, 1.6vw, 1.25rem); max-width: 720px; margin: 20px auto 0; }
.hero .ctas { margin-top: 32px; }
.ticks { list-style: none; display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; margin-top: 22px; color: var(--nv-slate); font-size: 14.5px; }
.ticks li { display: inline-flex; align-items: center; gap: 7px; }
.ticks li::before { content: ""; width: 18px; height: 18px; flex: none; background: var(--nv-check) center / 18px no-repeat; }
.showcase { position: relative; max-width: 1080px; margin: 56px auto 0; }
.showcase .window { border-radius: 14px 14px 0 0; overflow: hidden; background: #fff; box-shadow: var(--nv-shadow); border: 1px solid var(--nv-line); border-bottom: 0; }
/* The window's title bar with its three dots. */
.showcase .window::before {
	content: ""; display: block; height: 34px; border-bottom: 1px solid var(--nv-line);
	background:
		radial-gradient(circle at 19.5px 17px, #CBD5E1 5.5px, transparent 6px),
		radial-gradient(circle at 37.5px 17px, #CBD5E1 5.5px, transparent 6px),
		radial-gradient(circle at 55.5px 17px, #CBD5E1 5.5px, transparent 6px),
		#F1F5F9;
}
.showcase .window img { display: block; width: 100%; }
.showcase .phone { position: absolute; right: -40px; bottom: -60px; width: 220px; }
.wp-block-image.phone { border-radius: 30px; padding: 8px; background: var(--nv-navy); box-shadow: var(--nv-shadow); }
.wp-block-image.phone img { display: block; border-radius: 23px; }

/* --- A page's own top --------------------------------------------------------------------- */
.page-hero { background: radial-gradient(900px 380px at 50% -20%, var(--nv-mint-50), transparent 70%), var(--nv-white); padding-top: 64px; padding-bottom: 40px; text-align: center; }
.page-hero h1 { font-size: clamp(2.1rem, 4.4vw, 3.1rem); font-weight: 800; max-width: 860px; margin: 12px auto 0; }
.page-hero .lead { font-size: clamp(1.05rem, 1.5vw, 1.2rem); max-width: 720px; margin: 18px auto 0; }
.page-hero .wp-block-buttons { margin-top: 28px; }

/* --- Section heading --------------------------------------------------------------------------- */
.section-head { text-align: center; max-width: 760px; margin: 0 auto 56px; }
.section-head h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin-top: 10px; text-wrap: balance; }
.section-head p:not(.eyebrow) { color: var(--nv-slate); font-size: 1.1rem; margin-top: 16px; text-wrap: balance; }

/* Icons: a group with the class nv-i-<name> shows that icon in a tinted square (icons.css). */
[class*="nv-i-"]::before { content: ""; display: block; flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--nv-mint-50) var(--nv-icon) center / 22px no-repeat; }

/* --- Four promises ---------------------------------------------------------------------------- */
.promises { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.promise { background: #fff; border: 1px solid var(--nv-line); border-radius: var(--nv-radius); padding: 26px 24px; }
.promise h3 { font-size: 1.08rem; margin-top: 16px; }
.promise p { color: var(--nv-slate); font-size: 15px; margin-top: 8px; }

/* --- Cards ---------------------------------------------------------------------------------
   A card's heading is its link; the whole card is clickable. Sizes: s2, s3, s4 (of 6 columns). */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 36px 24px; }
.card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--nv-line); border-radius: 22px; padding: 28px; overflow: hidden; transition: transform .18s, box-shadow .18s, border-color .18s; }
.card:hover { transform: translateY(-3px); box-shadow: var(--nv-shadow-soft); border-color: #99F6E4; }
.card.s2 { grid-column: span 2; } .card.s3 { grid-column: span 3; } .card.s4 { grid-column: span 4; }
.card h3 { font-size: 1.2rem; margin-top: 18px; }
.card h3 a { color: inherit; text-decoration: none; }
.card h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.card p { color: var(--nv-slate); font-size: 15px; margin-top: 8px; }
.card .pill { position: absolute; top: 37px; right: 28px; margin: 0; }
.card .text .pill { top: 9px; right: 0; }
.card .more { margin-top: 16px; font-weight: 600; font-size: 14.5px; color: var(--nv-teal); }
.card .more::after { content: " →"; transition: margin .15s; }
.card:hover .more::after { margin-left: 4px; }
.card .shot-in { margin: auto -28px -28px; padding: 20px 0 0 28px; background: linear-gradient(135deg, var(--nv-mint-50), #E6F7F4); }
.card :is(p, .more):has(+ .shot-in) { margin-bottom: 24px; }
.card .shot-in img { display: block; border-radius: 12px 0 0 0; box-shadow: var(--nv-shadow-soft); border: 1px solid var(--nv-line); border-right: 0; border-bottom: 0; }
.card.split { flex-direction: row; gap: 24px; align-items: stretch; }
.card.split .text { position: relative; flex: 1; display: flex; flex-direction: column; }
.card.split .phone-in { width: 42%; max-width: 210px; margin: 0 -10px -46px 0; align-self: flex-end; border-radius: 26px 26px 0 0; padding: 7px 7px 0; background: var(--nv-navy); }
.card.split .phone-in img { display: block; border-radius: 20px 20px 0 0; }
.card.dark { background: linear-gradient(135deg, var(--nv-teal), var(--nv-teal-dark)); border-color: transparent; color: #fff; }
.card.dark h3, .card.dark .more { color: #fff; }
.card.dark p { color: #D5F5EF; }
.card.dark::before { background-color: rgba(255, 255, 255, .12); filter: brightness(0) invert(1); }

/* --- Feature rows (Features page) --------------------------------------------------------- */
.subnav { position: sticky; top: 68px; z-index: 10; background: var(--nv-white); border-bottom: 1px solid var(--nv-line); padding: 10px max(var(--nv-gutter), calc((100% - var(--nv-wrap)) / 2)); }
/* The chips stick just under the sticky menu: 68px on a computer, 60px on a phone, plus WordPress'
   admin bar when signed in (32px; 46px on tablets; on phones it scrolls away). */
.admin-bar .subnav { top: 100px; }
@media (min-width: 769px) and (max-width: 782px) { .admin-bar .subnav { top: 114px; } }
@media (max-width: 768px) {
	.subnav { top: 60px; padding-top: 8px; padding-bottom: 8px; }
	.admin-bar .subnav { top: 106px; }
	.subnav a { padding: 6px 12px; font-size: 13.5px; }
}
@media (max-width: 600px) { .admin-bar .subnav { top: 60px; } }
.subnav p { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.subnav a { flex: none; padding: 7px 14px; border-radius: 99px; border: 1px solid var(--nv-line); background: #fff; color: var(--nv-ink); text-decoration: none; font-size: 14px; font-weight: 500; }
.subnav a:hover { border-color: var(--nv-teal); color: var(--nv-teal); }
.feature { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; scroll-margin-top: 140px; }
.feature + .feature { margin-top: 120px; }

/* Each feature in its own band, white or a soft mint tint ("soft"), with a glow and a dot grid
   behind the picture. */
.nv-section.feature-band {
	--nv-glow-x: 82%;
	position: relative; isolation: isolate; overflow: hidden; padding-block: 88px;
	background-color: var(--nv-white);
	background-image: radial-gradient(680px 440px at var(--nv-glow-x) 50%, rgba(20, 184, 166, .12), transparent 70%);
}
.nv-section.feature-band:has(.flip) { --nv-glow-x: 18%; }
.nv-section.feature-band.soft { background-color: #F2FAF8; border-block: 1px solid #E1F3EE; }
.feature-band .shot::after {
	content: ""; position: absolute; z-index: -1; top: -26px; right: -26px; width: 150px; height: 150px;
	background-image: radial-gradient(rgba(15, 118, 110, .30) 1.5px, transparent 1.7px); background-size: 14px 14px;
}
.feature-band .flip .shot::after { right: auto; left: -26px; }
.feature-band .shot { box-shadow: 0 30px 60px -36px rgba(15, 118, 110, .45); }
.feature-band .feature-text h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
.feature.flip { grid-template-columns: 7fr 5fr; }
.feature.flip .feature-text { order: 2; }
.tags { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.feature h2 { font-size: clamp(1.6rem, 2.8vw, 2.15rem); margin-top: 14px; }
.feature-text > p { color: var(--nv-slate); font-size: 1.06rem; margin-top: 16px; }
.shot { position: relative; background: linear-gradient(135deg, var(--nv-mint-50), #E6F7F4); border-radius: 24px; padding: 28px; border: 1px solid #DDF5EF; }
.shot img { display: block; border-radius: 12px; box-shadow: var(--nv-shadow); border: 1px solid var(--nv-line); background: #fff; }
.shot .wp-block-image + .wp-block-image { margin-top: 18px; }
/* On the Features, hostel and co-living pages each screenshot is a close-up: it starts in from the
   box's top-left corner, a little larger than fits, and runs off the right and bottom edges, so
   there's more to see. Any picture swapped in gets the same look. */
.feature .shot { padding: 44px 40px; }
.feature .shot:not(.narrow) { padding: 48px 0 0 48px; }
.feature .shot:not(.narrow) .wp-block-image { overflow: hidden; max-height: 520px; border-radius: 12px 0 0 0; background: #fff; border: 1px solid var(--nv-line); border-width: 1px 0 0 1px; }
/* The last picture meets the box's rounded bottom-right corner (24px less its 1px border). */
.feature .shot:not(.narrow) .wp-block-image:last-child { border-bottom-right-radius: 23px; }
.feature .shot:not(.narrow) img { width: 135%; max-width: none; border: 0; border-radius: 0; box-shadow: none; }
/* Two pictures in a stack: the first is cut only at the right, and both are shorter. */
.feature .shot.stack .wp-block-image { max-height: 300px; }
.feature .shot.stack .wp-block-image:not(:last-child) { border-bottom-width: 1px; border-bottom-left-radius: 12px; }
.feature .shot.stack .wp-block-image:last-child { max-height: 240px; }
.feature .shot.stack .wp-block-image + .wp-block-image { margin-top: 22px; }
.shot.narrow { max-width: 460px; justify-self: center; }
.phones { display: flex; gap: 18px; justify-content: center; align-items: flex-end; background: linear-gradient(135deg, var(--nv-mint-50), #E6F7F4); border: 1px solid #DDF5EF; border-radius: 24px; padding: 36px 28px 0; overflow: hidden; }
.phones .phone { width: 31%; max-width: 210px; border-radius: 26px 26px 0 0; padding: 7px 7px 0; box-shadow: none; }
.phones .phone img { border-radius: 20px 20px 0 0; }
.phones .phone:nth-child(2) { transform: translateY(-24px); }

/* --- Feature tabs (home page) ----------------------------------------------------------------
   WordPress' own Tabs block, with the class feature-tabs. The tabs are on the left, each a bold
   title and a line, and the chosen tab's screenshot is on the right, cut off at the right and
   bottom. A tab's "tab-more" link sits under the tabs. The tabs are buttons, so GeneratePress'
   button colours are undone here. The space under the tabs is the cards' row gap. */
.wp-block-tabs.feature-tabs { position: relative; display: grid; grid-template-columns: 380px 1fr; margin-top: 48px; margin-bottom: 36px; background: var(--nv-white); border: 1px solid var(--nv-line); border-radius: 24px; overflow: hidden; box-shadow: var(--nv-shadow-soft); }
.feature-tabs .wp-block-tab-list { flex-direction: column; flex-wrap: nowrap; gap: 0; padding-bottom: 72px; border-right: 1px solid var(--nv-line); }
.feature-tabs .wp-block-tab-list button {
	width: 100%; margin: 0; padding: 26px 32px; border: 0; border-bottom: 1px solid var(--nv-line); border-radius: 0;
	background: none; color: var(--nv-slate); font-size: 15px; font-weight: 400; line-height: 1.55; text-align: left; box-shadow: none;
}
.feature-tabs .wp-block-tab-list button:is(:hover, :focus) { background: var(--nv-bg); color: var(--nv-slate); }
.feature-tabs .wp-block-tab-list button strong { display: block; margin-bottom: 6px; color: var(--nv-navy); font-size: 18px; font-weight: 700; }
/* The chosen tab. WordPress' script marks it; the server sends every panel hidden and no tab
   chosen, so until the script has run the first tab and its panel show. */
.feature-tabs :is(.wp-block-tab-list button[aria-selected=true], .wp-block-tab-list:not(:has([aria-selected=true])) > button:first-child) { background: var(--nv-mint-50); }
.feature-tabs :is(.wp-block-tab-list button[aria-selected=true], .wp-block-tab-list:not(:has([aria-selected=true])) > button:first-child) strong { color: var(--nv-teal); }
.feature-tabs :is(.wp-block-tab-list button[aria-selected=true], .wp-block-tab-list:not(:has([aria-selected=true])) > button:first-child)::before {
	content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 4px; border: 0; background: var(--nv-teal); pointer-events: none;
}
.feature-tabs .wp-block-tab-panels, .feature-tabs .wp-block-tab-panel { display: grid; padding: 0; }
.feature-tabs .wp-block-tab-panels:not(:has(> .wp-block-tab-panel:not([hidden]))) > .wp-block-tab-panel:first-child { display: grid !important; }
.feature-tabs .shot { display: grid; min-height: 440px; padding: 48px 0 0 48px; border: 0; border-radius: 0; }
.feature-tabs .shot .wp-block-image { position: relative; margin: 0; overflow: hidden; background: #fff; border: 1px solid var(--nv-line); border-width: 1px 0 0 1px; border-radius: 12px 0 0 0; }
/* The picture fills its frame from the top-left corner, 135% wide, whatever its shape. */
.feature-tabs .shot img { position: absolute; top: 0; left: 0; width: 135%; max-width: none; min-height: 100%; object-fit: cover; object-position: left top; border: 0; border-radius: 0; box-shadow: none; }
.feature-tabs .tab-more { position: absolute; left: 32px; bottom: 24px; margin: 0; font-size: 14.5px; font-weight: 600; }
.feature-tabs .tab-more a { color: var(--nv-teal); text-decoration: none; }
.feature-tabs .tab-more a::after { content: " →"; }
.feature-tabs .tab-more a:hover { text-decoration: underline; }

/* --- Feature chapters (Features page) --------------------------------------------------------
   Each chapter is a section of class "chapter" with a layout of its own:
   - "sticky-split": a heading that stays on the left while feature cards ("tile") scroll by on the right;
   - "journey": numbered steps ("stage") on a line;
   - "dark-band": two phone apps side by side ("duo", "duo-item"), then a feature row;
   - "spotlight": a big picture with a card over it, then a "pair" of tiles.
   Each feature has an HTML anchor (beds, rent ...), so a link to /features/#rent scrolls to it. */
.chapter .section-head { margin-bottom: 56px; }
.split-intro :is(h2, p) { text-wrap: balance; }
.chapter :is(.section-head, .split-intro) > .eyebrow { display: inline-block; padding: 5px 14px; border-radius: 99px; background: var(--nv-mint-50); border: 1px solid var(--nv-mint); }
.chapter [id] { scroll-margin-top: 70px; }
:is(.chapter, .mosaic) h3 { font-size: clamp(1.35rem, 2.2vw, 1.65rem); line-height: 1.25; margin-top: 10px; }
:is(.chapter, .mosaic) .feature-text > p { font-size: 1rem; margin-top: 12px; }
:is(.chapter, .mosaic) .checks { gap: 10px 28px; margin-top: 20px; font-size: 15px; }
/* Pictures in cards, steps and spotlights (here and on the landing pages): a close-up from the
   top-left corner, cut off at the right and bottom, filling a strip whose height the layout sets. */
:is(.tile, .stage, .spotlight, .lang-row) .shot:not(.narrow) { display: grid; padding: 36px 0 0 40px; }
:is(.tile, .stage, .spotlight, .lang-row) .shot:not(.narrow) .wp-block-image { position: relative; max-height: none; margin: 0; overflow: hidden; background: #fff; border: 1px solid var(--nv-line); border-width: 1px 0 0 1px; border-radius: 12px 0 0 0; }
:is(.tile, .stage, .spotlight, .lang-row) .shot:not(.narrow) img { position: absolute; top: 0; left: 0; width: 135%; max-width: none; min-height: 100%; object-fit: cover; object-position: left top; border: 0; border-radius: 0; box-shadow: none; }
:is(.tile, .stage, .spotlight) .shot.stack { grid-template-rows: 3fr 2fr; row-gap: 16px; }
:is(.tile, .stage, .spotlight) .shot.stack .wp-block-image:not(:last-child) { border-bottom-width: 1px; border-bottom-left-radius: 12px; }

/* Split: the heading, words and a numbered list of links stay put while the cards scroll. */
.sticky-split { display: grid; grid-template-columns: 340px 1fr; gap: 64px; align-items: start; }
.split-intro { position: sticky; top: 160px; }
.admin-bar .split-intro { top: 192px; }
.split-intro h2 { font-size: clamp(1.8rem, 3.2vw, 2.4rem); margin-top: 16px; }
.split-intro > p { color: var(--nv-slate); font-size: 1.06rem; margin-top: 16px; }
.toc { list-style: none; margin-top: 32px; border-top: 1px solid var(--nv-line); counter-reset: toc; }
.toc li { counter-increment: toc; border-bottom: 1px solid var(--nv-line); }
.toc a { display: flex; align-items: center; gap: 14px; padding: 14px 0; color: var(--nv-ink); font-weight: 600; text-decoration: none; }
.toc a::before { content: counter(toc, decimal-leading-zero); font-size: 13px; color: var(--nv-teal); }
.toc a::after { content: "→"; margin-left: auto; color: var(--nv-slate); transition: transform .18s; }
.toc a:hover { color: var(--nv-teal); }
.toc a:hover::after { color: var(--nv-teal); transform: translateX(4px); }
.split-list { display: grid; gap: 28px; }
.tile { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--nv-line); border-radius: 24px; overflow: hidden; box-shadow: var(--nv-shadow-soft); }
.tile .feature-text { padding: 36px 40px 0; }
.sticky-split .tile .checks { grid-template-columns: 1fr 1fr; }
.tile .shot { flex: 1 0 auto; min-height: 300px; margin-top: 32px; border: 0; border-top: 1px solid #DDF5EF; border-radius: 0; }

/* Journey: a teal line through numbered circles, each step's words beside its picture. */
.journey { position: relative; display: grid; gap: 64px; counter-reset: stage; }
.journey::before { content: ""; position: absolute; top: 24px; bottom: 24px; left: 23px; width: 2px; background: linear-gradient(var(--nv-teal), var(--nv-mint)); }
.stage { display: grid; grid-template-columns: 48px 5fr 6fr; gap: 0 40px; align-items: start; counter-increment: stage; }
.stage::before {
	content: counter(stage); grid-column: 1; grid-row: 1; position: relative; z-index: 1; display: grid; place-items: center; width: 48px; height: 48px;
	border-radius: 50%; background: var(--nv-teal); color: #fff; font-size: 18px; font-weight: 700; box-shadow: 0 0 0 8px var(--nv-bg);
}
.stage .feature-text { grid-column: 2; padding-top: 10px; }
.stage .shot { grid-column: 3; height: 360px; box-shadow: 0 30px 60px -36px rgba(15, 118, 110, .45); }

/* Dark band: navy into teal, the two apps in glass cards with their phones fanned out. */
.nv-section.dark-band {
	position: relative; overflow: hidden; color: #E2E8F0;
	background: radial-gradient(900px 480px at 88% 0%, rgba(20, 184, 166, .30), transparent 60%), radial-gradient(700px 420px at 0% 100%, rgba(20, 184, 166, .18), transparent 60%), linear-gradient(160deg, #0B1324, #0F2F2C 60%, #115E59);
}
.dark-band :is(h2, h3) { color: #fff; }
.dark-band .section-head p:not(.eyebrow) { color: #CBD5E1; }
.dark-band .section-head > .eyebrow { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); }
.dark-band .eyebrow { color: #5EEAD4; }
.dark-band .feature-text > p { color: #CBD5E1; }
.dark-band .checks li { color: #E2E8F0; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.duo-item, .dark-band .lang-row { border-radius: 24px; overflow: hidden; background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)); border: 1px solid rgba(255, 255, 255, .12); }
.duo-item { display: flex; flex-direction: column; }
.duo-item .feature-text { padding: 36px 36px 0; }
.duo-item .phones { flex: 1 0 330px; padding: 48px 24px 0; gap: 0; align-items: flex-start; background: none; border: 0; border-radius: 0; }
.duo-item .phones .phone { width: 34%; max-width: 180px; background: #1E293B; box-shadow: 0 0 0 1px rgba(255, 255, 255, .16), 0 30px 60px -20px rgba(0, 0, 0, .7); }
.duo-item .phones .phone:nth-child(1) { transform: rotate(-7deg) translate(14px, 22px); }
.duo-item .phones .phone:nth-child(2) { position: relative; z-index: 1; transform: translateY(-8px); }
.duo-item .phones .phone:nth-child(3) { transform: rotate(7deg) translate(-14px, 22px); }
.duo-item .feature-text { padding-bottom: 8px; }
/* Languages: the three names large, in a mint shimmer, beside the Marathi screen. */
.dark-band .lang-row { margin-top: 28px; gap: 0; align-items: stretch; }
.lang-row .feature-text { align-self: center; padding: 44px; }
.lang-row .tags .eyebrow { font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 700; letter-spacing: 0; text-transform: none; background: linear-gradient(90deg, #5EEAD4, #CCFBF1); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dark-band .lang-row .shot { background: none; border: 0; border-radius: 0; box-shadow: none; }
.chapter .lang-row .shot:not(.narrow) { padding: 44px 0 0; }

/* Spotlight: a white card over the left of a large mint panel; the picture starts beside the card. */
.spotlight { display: grid; grid-template-columns: repeat(12, 1fr); align-items: center; }
.spotlight .shot { grid-column: 5 / -1; grid-row: 1; height: 500px; }
.chapter .spotlight .shot:not(.narrow) { padding: 48px 0 0 calc(25% + 48px); }
.spotlight .feature-text { grid-column: 1 / 7; grid-row: 1; position: relative; z-index: 1; padding: 40px; background: #fff; border: 1px solid var(--nv-line); border-radius: 24px; box-shadow: var(--nv-shadow); }
.pair { display: grid; grid-template-columns: 7fr 5fr; gap: 28px; margin-top: 28px; }
.pair .tile .shot { min-height: 260px; }
/* The poster card: teal, with the poster tilted at the bottom. */
.tile.poster-tile { background: linear-gradient(150deg, var(--nv-teal), var(--nv-teal-dark)); border-color: transparent; }
.poster-tile h3 { color: #fff; }
.poster-tile .eyebrow { color: var(--nv-mint); }
.poster-tile .feature-text > p { color: #CCFBF1; }
.poster-tile .checks li { color: #fff; }
.poster-tile .shot.narrow { display: grid; justify-items: center; align-items: start; max-width: none; justify-self: stretch; min-height: 0; height: 250px; margin-top: auto; padding: 40px 0 0; overflow: hidden; background: none; border: 0; }
.poster-tile .shot.narrow .wp-block-image { width: 250px; transform: rotate(-5deg); }
.poster-tile .shot.narrow img { border: 0; border-radius: 14px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .55); }
.poster-tile .feature-text { padding-bottom: 8px; }

/* --- Landing pages (hostel, co-living) -------------------------------------------------------
   Pieces for pages made for one kind of owner. Each is a group with a class:
   - "page-hero hero-split": the page top with words on the left ("hero-text") and phones on the
     right ("hero-visual") with callouts ("chips", each a paragraph "chip") over them;
   - "page-hero hero-app": the page top with three phones rising from the bottom;
   - "day" with "moment"s: a day in five moments, each with an icon class (nv-i-food ...) and a
     "time" paragraph;
   - "mosaic" of "tile"s in a narrow/wide checkerboard; "gate-tile" is a card with phones;
   - "numbers" with "number"s (a "big" paragraph, then a line), in a "trust" band;
   - "faq-split": "faq-intro" on the left that stays put, the "faq" on the right;
   - "sides" with two "side"s ("side owner" is teal), joined by an arrow;
   - "stays" with "stay"s, each with a bar showing how long the stay is;
   - a "showcase" with one "window" picture, and a "checks spread" list under it;
   - "loop" with "loop-step"s, numbered, with a path back to the start. */

/* Page top: words beside phones. */
.page-hero.hero-split {
	display: grid; grid-template-columns: 6fr 5fr; gap: 48px; align-items: center; padding-top: 64px; padding-bottom: 0; overflow: hidden; text-align: left;
	background: radial-gradient(760px 520px at 82% 40%, rgba(20, 184, 166, .16), transparent 70%), radial-gradient(900px 380px at 0% -20%, var(--nv-mint-50), transparent 70%), var(--nv-white);
}
.hero-split .hero-text { padding-bottom: 72px; }
.hero-split h1 { max-width: none; margin: 14px 0 0; font-size: clamp(2.1rem, 4vw, 3rem); }
.hero-split .lead { max-width: 560px; margin: 18px 0 0; }
.hero-split .wp-block-buttons.ctas, .hero-split .ticks { justify-content: flex-start; }
.hero-visual { position: relative; align-self: end; }
.hero-visual .phones { height: 480px; gap: 20px; padding: 44px 32px 0; align-items: flex-start; border-bottom: 0; border-radius: 28px 28px 0 0; }
.hero-visual .phones .phone { width: 44%; max-width: 220px; box-shadow: var(--nv-shadow); }
.hero-visual .phones .phone:nth-child(2) { transform: translateY(44px); }
.chips { position: absolute; inset: 0; pointer-events: none; }
.chip {
	position: absolute; display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--nv-line);
	box-shadow: var(--nv-shadow); color: var(--nv-ink); font-size: 13.5px; font-weight: 600; white-space: nowrap;
}
.chip::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--nv-amber); }
.chip:nth-child(1) { top: 84px; left: -44px; }
.chip:nth-child(2) { top: 236px; right: -12px; }
.chip:nth-child(2)::before { background: var(--nv-teal); }
.chip:nth-child(3) { bottom: 64px; left: -20px; }
.chip:nth-child(3)::before { background: var(--nv-bright); }

/* A day: cards hanging from a dotted line, each with its icon in a circle on the line. */
.day { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; padding-top: 23px; }
.day::before { content: ""; position: absolute; top: 23px; left: 10%; right: 10%; height: 2px; background: repeating-linear-gradient(90deg, var(--nv-teal) 0 8px, transparent 8px 16px); opacity: .45; }
.moment { position: relative; padding: 0 20px 24px; text-align: center; background: #fff; border: 1px solid var(--nv-line); border-radius: 20px; }
.moment::before { position: relative; z-index: 1; width: 46px; height: 46px; margin: -23px auto 16px; border-radius: 50%; background-color: #fff; border: 2px solid var(--nv-mint); box-shadow: 0 0 0 6px var(--nv-bg); }
.moment .time { color: var(--nv-teal); font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.moment h3 { font-size: 1.05rem; margin-top: 6px; text-wrap: balance; }
.moment p:not(.time) { color: var(--nv-slate); font-size: 14.5px; margin-top: 8px; }

/* Mosaic: cards in a checkerboard, narrow then wide, then wide then narrow, for any number of
   cards. Each card's picture grows to fill its row. */
.mosaic { display: grid; grid-template-columns: repeat(12, 1fr); gap: 28px; }
.mosaic > .tile { grid-column: span 7; }
.mosaic > .tile:is(:nth-child(4n+1), :nth-child(4n)) { grid-column: span 5; }
.mosaic .tile .shot { min-height: 240px; }
/* A card with phones (the gate register): their tops show, the rest runs off the bottom. */
.tile.gate-tile { background: linear-gradient(180deg, #fff 45%, var(--nv-mint-50)); }
.gate-tile .phones { flex: 1 0 300px; gap: 16px; margin-top: 28px; padding: 36px 24px 0; align-items: flex-start; background: none; border: 0; border-radius: 0; }
.gate-tile .phones .phone { width: 47%; max-width: 220px; }
.gate-tile .phones .phone:nth-child(2) { transform: translateY(28px); }

/* Big numbers, on the teal band. */
.numbers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.number { padding: 28px 24px; border-radius: var(--nv-radius); background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); }
.number .big { font-size: clamp(3rem, 6vw, 4.5rem); font-weight: 800; line-height: 1; letter-spacing: -.03em; background: linear-gradient(180deg, #fff, #99F6E4); -webkit-background-clip: text; background-clip: text; color: transparent; }
.number p:not(.big) { color: #D5F5EF; font-size: 15px; margin-top: 12px; }

/* Questions with their heading beside them. */
.faq-split { display: grid; grid-template-columns: 4fr 7fr; gap: 64px; align-items: start; }
.faq-intro { position: sticky; top: 120px; }
.admin-bar .faq-intro { top: 152px; }
.faq-intro h2 { font-size: clamp(1.8rem, 3.2vw, 2.4rem); margin-top: 12px; }
.faq-intro p:not(.eyebrow) { color: var(--nv-slate); margin-top: 16px; }
.faq-intro a { color: var(--nv-teal); font-weight: 600; text-decoration: none; }
.faq-intro a::after { content: " →"; }
.faq-split .faq { max-width: none; margin: 0; }

/* Page top: three phones rising from the bottom, the middle one highest. */
.page-hero.hero-app {
	padding-bottom: 0; overflow: hidden;
	background: radial-gradient(760px 420px at 50% 100%, rgba(20, 184, 166, .22), transparent 70%), radial-gradient(900px 380px at 50% -20%, var(--nv-mint-50), transparent 70%), var(--nv-white);
}
.hero-app .phones { height: 400px; max-width: 800px; gap: 28px; margin: 56px auto 0; padding: 0 24px; align-items: flex-start; background: none; border: 0; border-radius: 0; }
.hero-app .phones .phone { width: 30%; max-width: 230px; box-shadow: var(--nv-shadow); }
.hero-app .phones .phone:nth-child(1) { transform: translateY(64px) rotate(-5deg); }
.hero-app .phones .phone:nth-child(2) { transform: none; }
.hero-app .phones .phone:nth-child(3) { transform: translateY(64px) rotate(5deg); }

/* Two sides: a white card and a teal one, with an arrow between them. */
.sides { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.sides::after {
	content: "⇄"; position: absolute; z-index: 1; top: 50%; left: 50%; display: grid; place-items: center; width: 56px; height: 56px; transform: translate(-50%, -50%);
	border-radius: 50%; background: #fff; border: 1px solid var(--nv-line); box-shadow: var(--nv-shadow-soft); color: var(--nv-teal); font-size: 24px;
}
.side { padding: 40px; border-radius: 24px; background: #fff; border: 1px solid var(--nv-line); box-shadow: var(--nv-shadow-soft); }
.side h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); margin-top: 12px; }
.side .checks { gap: 12px; }
.side.owner { background: linear-gradient(150deg, var(--nv-teal), var(--nv-teal-dark)); border-color: transparent; }
.side.owner h3, .side.owner .checks li { color: #fff; }
.side.owner .eyebrow { color: var(--nv-mint); }

/* Kinds of stay: the bar under each grows with the length of the stay. */
.stays { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 80px; }
.stay { position: relative; padding: 24px 24px 30px; border-radius: 20px; background: #fff; border: 1px solid var(--nv-line); overflow: hidden; }
.stay::after { content: ""; position: absolute; left: 24px; bottom: 16px; width: var(--nv-len, 20%); height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--nv-bright), var(--nv-teal)); }
.stay:nth-child(1) { --nv-len: 12%; }
.stay:nth-child(2) { --nv-len: 32%; }
.stay:nth-child(3) { --nv-len: 58%; }
.stay:nth-child(4) { --nv-len: calc(100% - 48px); }
.stay .big { color: var(--nv-navy); font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; }
.stay p:not(.big) { color: var(--nv-slate); font-size: 15px; margin-top: 6px; }
.stays ~ .feature h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); }

/* A big screenshot in a window, in a section. */
.nv-section .showcase { margin-top: 0; }
.nv-section .showcase .window { position: relative; max-height: 500px; border-bottom: 1px solid var(--nv-line); border-radius: 14px; }
.nv-section .showcase .window::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; background: linear-gradient(rgba(255, 255, 255, 0), #fff); }
.checks.spread { grid-template-columns: repeat(3, 1fr); gap: 16px 28px; max-width: 1080px; margin: 32px auto 0; }

/* Loop: numbered steps on a line, with a dashed path from the last back to the first. */
.loop { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; padding-bottom: 44px; counter-reset: loop; }
.loop::before { content: ""; position: absolute; top: 20px; left: 8%; right: 8%; height: 2px; background: var(--nv-mint); }
.loop::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: 0; height: 36px; border: 2px dashed #99F6E4; border-top: 0; border-radius: 0 0 36px 36px; }
.loop-step { position: relative; padding: 0 4px; text-align: center; counter-increment: loop; }
.loop-step::before {
	content: counter(loop); position: relative; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; margin: 0 auto 14px;
	border-radius: 50%; background: var(--nv-teal); color: #fff; font-weight: 700; box-shadow: 0 0 0 6px var(--nv-bg);
}
.loop-step:last-child::before { content: "↺"; background: var(--nv-bright); font-size: 20px; }
.loop-step h3 { font-size: 1.02rem; }
.loop-step p { color: var(--nv-slate); font-size: 14px; margin-top: 6px; }

/* --- Dark band ------------------------------------------------------------------------------ */
.nv-section.trust { background: linear-gradient(135deg, var(--nv-teal), var(--nv-teal-dark)); color: #fff; }
.trust .section-head h2 { color: #fff; }
.trust .section-head p, .trust .eyebrow { color: var(--nv-mint); }
.trust .section-head p:not(.eyebrow) { color: var(--nv-mint); }
.trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.trust-item { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--nv-radius); padding: 26px; }
.trust-item h3 { color: #fff; font-size: 1.08rem; }
.trust-item p { color: #D5F5EF; font-size: 15px; margin-top: 10px; }

/* --- Also included --------------------------------------------------------------------------- */
.included { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 1040px; margin: 0 auto; }
.included p { background: #fff; border: 1px solid var(--nv-line); border-radius: 14px; padding: 16px 18px; color: var(--nv-slate); font-size: 14.5px; line-height: 1.5; transition: border-color .15s, box-shadow .15s; }
.included p:hover { border-color: #99F6E4; box-shadow: var(--nv-shadow-soft); }
/* With an icon class (nv-i-...): the icon on the left, the words beside it. */
.included p[class*="nv-i-"] { display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; align-items: start; }
.included p[class*="nv-i-"]::before { grid-row: span 2; width: 40px; height: 40px; border-radius: 11px; background-size: 20px; }
.included strong { display: block; color: var(--nv-navy); font-weight: 600; font-size: 16px; margin-bottom: 2px; }

/* --- Tables (comparison, prices) ---------------------------------------------------------------- */
.compare-wrap { max-width: 920px; margin: 0 auto; overflow-x: auto; background: #fff; border: 1px solid var(--nv-line); border-radius: var(--nv-radius); }
.wp-block-table.compare { margin: 0; }
.wp-block-table.compare table { width: 100%; table-layout: auto; border-collapse: collapse; font-size: 15px; border: 0; }
.wp-block-table.compare :is(th, td) { padding: 14px 18px; text-align: left; border: 0; border-bottom: 1px solid var(--nv-line); vertical-align: top; }
.wp-block-table.compare tbody tr:last-child :is(th, td) { border-bottom: 0; }
.wp-block-table.compare thead { border: 0; }
.wp-block-table.compare thead th { font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--nv-slate); font-weight: 600; }
.wp-block-table.compare thead th:nth-child(2) { color: var(--nv-teal); }
.wp-block-table.compare tbody th { font-weight: 500; color: var(--nv-navy); width: 42%; min-width: 170px; }
.wp-block-table.compare td { color: var(--nv-slate); }
.wp-block-table.compare td:nth-of-type(1) { color: var(--nv-navy); font-weight: 600; }
.wp-block-table.compare:not(.prices) td:nth-of-type(1)::before { content: "✓\00a0"; color: var(--nv-teal); }
.compare-note { text-align: center; color: var(--nv-slate); font-size: 14px; margin-top: 18px; }
.nv-section .compare-note { margin-top: 18px; }

/* "Prices for every size of PG": a Details block under the plan cards. */
.price-sizes { margin-top: 40px; text-align: center; }
.price-sizes summary { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; padding: 10px 18px; border: 1px solid var(--nv-line); border-radius: 99px; background: #fff; color: var(--nv-navy); font-weight: 600; font-size: 15px; }
.price-sizes summary::-webkit-details-marker { display: none; }
.price-sizes summary::after { content: "+"; color: var(--nv-teal); font-size: 20px; line-height: 1; }
.price-sizes[open] summary::after { content: "–"; }
.price-sizes > p { color: var(--nv-slate); font-size: 15px; margin-top: 16px; }
.price-sizes .compare-wrap { max-width: none; margin-top: 16px; }
.wp-block-table.prices table { min-width: 680px; }
.wp-block-table.prices tbody th { width: 30%; }
.wp-block-table.prices :is(td, thead th) { text-align: right; white-space: nowrap; }
.wp-block-table.prices td { color: var(--nv-navy); font-weight: 600; }
.wp-block-table.prices thead th:nth-child(2) { color: var(--nv-slate); }

/* --- Pricing ------------------------------------------------------------------------------------ */
/* The beds slider (assets/js/pricing.js puts it above the plan cards). */
.beds-pick { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; margin: 0 auto 44px; background: #fff; border: 1px solid var(--nv-line); border-radius: 14px; padding: 14px 22px; max-width: 560px; }
.beds-pick label { font-weight: 600; color: var(--nv-navy); }
.beds-pick input { flex: 1; min-width: 180px; accent-color: var(--nv-teal); }
.beds-pick output { min-width: 84px; text-align: right; color: var(--nv-slate); }
.beds-pick output b { color: var(--nv-navy); font-size: 1.2rem; }
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; text-align: left; }
.plan { background: #fff; border: 1px solid var(--nv-line); border-radius: 20px; padding: 32px 28px; display: flex; flex-direction: column; position: relative; }
.plan.best { border: 2px solid var(--nv-teal); box-shadow: var(--nv-shadow); }
.plan .badge, .pack .badge { position: absolute; top: -13px; left: 28px; background: var(--nv-teal); color: #fff; font-size: 12.5px; font-weight: 600; line-height: 1.5; padding: 4px 12px; border-radius: 99px; }
.plan .badge.offer { background: var(--nv-amber); }
.plan h2 { font-size: 1.25rem; }
.plan .for { color: var(--nv-slate); font-size: 15px; margin-top: 6px; }
.list-price { color: var(--nv-slate); font-size: 14px; margin-top: 18px; }
.price { margin-top: 22px; color: var(--nv-slate); font-size: 15px; }
.list-price + .price { margin-top: 2px; }
.price strong { color: var(--nv-navy); font-size: 2.6rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.2; }
.price-note { color: var(--nv-slate); font-size: 14px; margin-top: 4px; }
.setup-line { color: var(--nv-navy); font-size: 13.5px; font-weight: 600; margin-top: 6px; }
.plan .checks { margin: 24px 0 28px; flex: 1; align-content: start; }
.plan .checks li { font-size: 15px; }
.plan .checks.addons { gap: 18px; }
.plan .addons li { padding-left: 0; padding-right: 76px; color: var(--nv-slate); font-size: 14px; }
.addons li::before { display: none; }
.addons li strong { display: block; color: var(--nv-navy); font-size: 15px; }
.addons li em { position: absolute; top: 0; right: 0; font-style: normal; font-weight: 700; color: var(--nv-navy); font-size: 15px; white-space: nowrap; }
.plan .wp-block-button, .pack .wp-block-button { flex: 1; }
.plan .wp-block-button a.wp-block-button__link, .pack .wp-block-button a.wp-block-button__link { width: 100%; }
.pricing-notes { text-align: center; color: var(--nv-slate); font-size: 15px; margin-top: 32px; display: grid; gap: 6px; }
p.pricing-notes { display: block; }

/* --- Services and packs (Grow, Pricing) ----------------------------------------------------- */
.services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.service { position: relative; background: #fff; border: 1px solid var(--nv-line); border-radius: 18px; padding: 22px 24px; transition: border-color .15s, box-shadow .15s; }
.service:hover { border-color: #99F6E4; box-shadow: var(--nv-shadow-soft); }
.service::before { width: 40px; height: 40px; border-radius: 11px; }
.service .price-tag { position: absolute; top: 28px; right: 24px; background: var(--nv-mint-50); border: 1px solid var(--nv-mint); color: var(--nv-teal); border-radius: 99px; padding: 5px 12px; font-size: 13.5px; line-height: 1.4; white-space: nowrap; }
.price-tag strong { color: var(--nv-navy); font-size: 15.5px; }
.service h2 { font-size: 1.1rem; margin-top: 14px; }
.service > p:not(.price-tag) { color: var(--nv-slate); font-size: 14.5px; margin-top: 4px; }
.service > p.also { color: var(--nv-teal); font-weight: 600; font-size: 13.5px; }
.service .checks { margin-top: 14px; gap: 7px; }
.service .checks li { font-size: 14px; padding-left: 28px; }
.service .checks li::before { width: 18px; height: 18px; top: 2px; background-size: 11px; }
.packs { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 32px; align-items: stretch; }
.pack { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--nv-line); border-radius: 24px; padding: 36px 32px; }
.pack h3 { font-size: clamp(1.4rem, 2.4vw, 1.75rem); margin-top: 10px; }
.pack > p:not(.eyebrow):not(.badge):not(.pack-price):not(.worth) { color: var(--nv-slate); margin-top: 10px; }
.pack .checks { flex: 1; align-content: start; margin: 22px 0 24px; }
.pack .checks li { font-size: 15px; }
.pack-price { color: var(--nv-slate); }
.pack-price strong { color: var(--nv-navy); font-size: 2.4rem; font-weight: 800; letter-spacing: -.03em; }
.pack .worth { color: var(--nv-slate); font-size: 14px; margin: 2px 0 20px; }
.pack .badge { left: 32px; background: var(--nv-bright); color: var(--nv-navy); font-weight: 700; }
.pack.dark { background: var(--nv-navy) radial-gradient(600px 300px at 90% 0%, rgba(20, 184, 166, .35), transparent 70%); border-color: transparent; color: #CBD5E1; }
.pack.dark h3, .pack.dark .pack-price strong { color: #fff; }
.pack.dark > p, .pack.dark > p:not(.eyebrow):not(.badge):not(.pack-price):not(.worth), .pack.dark .worth, .pack.dark .pack-price { color: #CBD5E1; }
.pack.dark .eyebrow { color: var(--nv-bright); }
.pack.dark .checks li { color: #E2E8F0; }
.pack.dark .wp-block-button a.wp-block-button__link { background: var(--nv-bright); color: var(--nv-navy); }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: step; }
.step { background: #fff; border: 1px solid var(--nv-line); border-radius: var(--nv-radius); padding: 26px; }
.step::before { counter-increment: step; content: counter(step); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--nv-teal); color: #fff; font-weight: 700; }
.step h3 { font-size: 1.08rem; margin-top: 16px; }
.step p { color: var(--nv-slate); font-size: 15px; margin-top: 8px; }

/* --- Questions (Details blocks) -------------------------------------------------------------- */
.faq { max-width: 820px; margin: 0 auto; }
.faq .wp-block-details { border-bottom: 1px solid var(--nv-line); padding: 4px 0; }
.faq summary { cursor: pointer; list-style: none; padding: 18px 40px 18px 0; position: relative; font-weight: 600; color: var(--nv-navy); font-size: 1.05rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 12px; font-size: 26px; font-weight: 400; color: var(--nv-teal); }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--nv-slate); padding: 0 40px 20px 0; }

/* --- The demo box at the bottom of each page ---------------------------------------------------
   Its button and contact line are the "Book a demo on WhatsApp" synced pattern. */
.nv-section.cta { text-align: center; }
.cta-box { background: var(--nv-navy) radial-gradient(600px 300px at 85% 0%, rgba(20, 184, 166, .35), transparent 70%); color: #fff; border-radius: 28px; padding: 64px 32px; }
.cta-box h2 { color: #fff; font-size: clamp(1.8rem, 3.4vw, 2.5rem); }
.cta-box > p:not(.contact-line) { color: #CBD5E1; font-size: 1.1rem; margin: 16px auto 30px; max-width: 600px; }
.cta-box a:not(.wp-block-button__link) { color: #fff; }
.cta-box .wp-block-buttons { justify-content: center; }
.cta-box .wp-block-button a.wp-block-button__link { background: var(--nv-bright); color: var(--nv-navy); }
.cta-box .wp-block-button a.wp-block-button__link:hover { background: #2DD4BF; color: var(--nv-navy); }
.contact-line { margin-top: 22px; color: #CBD5E1; font-size: 15px; }
.contact-line a { color: #fff; }

/* --- Footer (GP Premium Element "Site footer") --------------------------------------------- */
.site-footer { background: var(--nv-white); }
.nv-footer { padding: 48px max(var(--nv-gutter), calc((100% - var(--nv-wrap)) / 2)); color: var(--nv-slate); font-size: 14.5px; border-top: 1px solid var(--nv-line); }
.nv-footer .foot { display: grid; grid-template-columns: 1.3fr 1fr 1.3fr 1.2fr; gap: 32px; }
.nv-footer .brand a { display: inline-flex; align-items: center; gap: 10px; color: var(--nv-navy); font-weight: 800; font-size: 17px; text-decoration: none; }
.nv-footer .brand a::before { content: ""; width: 28px; height: 28px; background: url("../img/logo.svg") center / contain no-repeat; }
.nv-footer .foot-about p + p { margin-top: 10px; max-width: 360px; }
.nv-footer h4 { margin-bottom: 10px; color: var(--nv-navy); font-size: 14px; letter-spacing: 0; }
.nv-footer ul { list-style: none; padding: 0; display: grid; gap: 6px; }
.nv-footer ul a { color: var(--nv-slate); text-decoration: none; }
.nv-footer ul a:hover { color: var(--nv-teal); }
.nv-footer .copy { grid-column: 1 / -1; border-top: 1px solid var(--nv-line); padding-top: 18px; }

/* --- Blog ------------------------------------------------------------------------------------ */
.blog .site-main, .archive .site-main { max-width: 820px; margin-inline: auto; }
.blog .site-main article, .archive .site-main article { margin-bottom: 16px; }
.blog .site-main .inside-article, .archive .site-main .inside-article { border: 1px solid var(--nv-line); border-radius: 16px; padding: 22px 24px; background: #fff; transition: border-color .15s, box-shadow .15s; }
.blog .site-main .inside-article:hover, .archive .site-main .inside-article:hover { border-color: #99F6E4; box-shadow: var(--nv-shadow-soft); }
.blog .entry-title, .archive .entry-title { font-size: 1.3rem; }
.blog .entry-title a, .archive .entry-title a { color: var(--nv-navy); text-decoration: none; }
.blog .entry-summary, .archive .entry-summary { color: var(--nv-slate); margin-top: 8px; }
.entry-meta { color: var(--nv-slate); font-size: 14px; }
.single-post .inside-article { max-width: 760px; margin-inline: auto; }
.single-post .entry-title { font-size: clamp(2rem, 4vw, 2.7rem); font-weight: 800; }
.single-post .entry-content h2 { font-size: 1.45rem; margin: 40px 0 10px; }
.single-post .entry-content h3 { font-size: 1.1rem; margin: 26px 0 6px; }
.single-post .entry-content :is(p, li) { font-size: 1.05rem; line-height: 1.7; }
.single-post .entry-content p { margin: 14px 0; }
.single-post .entry-content :is(ul, ol) { margin: 10px 0 10px 22px; }
.single-post .entry-content li { margin: 6px 0; }
.note { background: var(--nv-mint-50); border: 1px solid var(--nv-mint); border-radius: 14px; padding: 16px 20px; margin: 26px 0; }
.single-post .entry-content .note p { margin: 6px 0; }
.small { font-size: 14px; color: var(--nv-slate); }
.downloads { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; margin: 18px 0; }
.download { position: relative; border: 1px solid var(--nv-line); border-radius: 14px; padding: 16px 18px; background: #fff; }
.download:hover { border-color: #99F6E4; box-shadow: var(--nv-shadow-soft); }
.single-post .entry-content .download p { margin: 0; font-size: 14px; color: var(--nv-slate); }
.download p:first-child a { color: var(--nv-navy); text-decoration: none; font-size: 1rem; }
.download p:first-child a::after { content: ""; position: absolute; inset: 0; }

/* --- Smaller screens ------------------------------------------------------------------------- */
@media (max-width: 980px) {
	.promises { grid-template-columns: repeat(2, 1fr); }
	.feature, .feature.flip { grid-template-columns: 1fr; gap: 36px; }
	.feature.flip .feature-text { order: 0; }
	.trust-grid, .plans, .included, .services, .steps { grid-template-columns: 1fr 1fr; }
	.packs { grid-template-columns: 1fr; }
	.bento { grid-template-columns: repeat(2, 1fr); }
	.card.s2, .card.s3 { grid-column: span 1; }
	.card.s4 { grid-column: span 2; }
	.nv-footer .foot { grid-template-columns: 1fr 1fr; }
	.showcase .phone { display: none; }
	/* Feature tabs: the tabs one under another above the picture, the link under it. */
	.wp-block-tabs.feature-tabs { grid-template-columns: 1fr; }
	.feature-tabs .wp-block-tab-list { padding-bottom: 0; border-right: 0; }
	.feature-tabs .tab-more { position: static; padding: 14px 24px; border-top: 1px solid var(--nv-line); }
	/* Feature chapters: one column; the split heading no longer stays put; the spotlight card
	   sits over the bottom of its picture. */
	.sticky-split { grid-template-columns: 1fr; gap: 40px; }
	.split-intro { position: static; }
	.stage { grid-template-columns: 48px 1fr; gap: 28px; }
	.stage .shot { grid-column: 2; grid-row: 2; height: 320px; }
	.duo, .pair { grid-template-columns: 1fr; }
	.chapter .lang-row .shot:not(.narrow) { height: 340px; padding: 0 0 0 44px; }
	.spotlight .shot { grid-column: 1 / -1; grid-row: 1; height: 380px; }
	.chapter .spotlight .shot:not(.narrow) { padding: 36px 0 0 36px; }
	.spotlight .feature-text { grid-column: 1 / -1; grid-row: 2; margin: -64px 20px 0; }
	/* Landing pages: one column; the day in two columns, the loop in three. */
	.page-hero.hero-split { grid-template-columns: 1fr; gap: 0; padding-top: 48px; }
	.hero-split .hero-text { padding-bottom: 40px; }
	.hero-visual { width: 100%; max-width: 520px; justify-self: center; }
	.chip:nth-child(1), .chip:nth-child(3) { left: -8px; }
	.day { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
	.day::before { display: none; }
	.moment:last-child { grid-column: 1 / -1; }
	.mosaic { grid-template-columns: 1fr; }
	.mosaic > .tile:nth-child(n) { grid-column: auto; }
	.mosaic .tile .shot { min-height: 300px; }
	.numbers { grid-template-columns: repeat(2, 1fr); }
	.faq-split { grid-template-columns: 1fr; gap: 32px; }
	.faq-intro { position: static; }
	.hero-app .phones { height: 320px; gap: 16px; }
	.sides { grid-template-columns: 1fr; }
	.sides::after { transform: translate(-50%, -50%) rotate(90deg); }
	.stays { grid-template-columns: repeat(2, 1fr); margin-bottom: 56px; }
	.checks.spread { grid-template-columns: 1fr; }
	.loop { grid-template-columns: repeat(3, 1fr); row-gap: 32px; padding-bottom: 0; }
	.loop::before, .loop::after { display: none; }
}
@media (max-width: 680px) {
	:root { --nv-gutter: 16px; }
	.nv-section, .nv-section.feature-band { padding-block: 64px; }
	.nv-section.feature-band, .nv-section.feature-band:has(.flip) { --nv-glow-x: 50%; }
	.feature-band .shot::after { display: none; }
	.promises, .trust-grid, .plans, .included, .services, .steps, .bento { grid-template-columns: 1fr; }
	.bento { gap: 24px; }
	.card.s2, .card.s3, .card.s4 { grid-column: span 1; }
	.card.split { flex-direction: column; }
	.card.split .phone-in { width: 60%; margin: 8px auto -46px; align-self: center; }
	.hero { padding-top: 48px; }
	.shot, .feature .shot { padding: 16px; }
	.feature .shot:not(.narrow) { padding: 20px 0 0 20px; }
	/* Feature tabs: smaller. */
	.wp-block-tabs.feature-tabs { margin-bottom: 24px; }
	.feature-tabs .wp-block-tab-list button { padding: 16px 20px; font-size: 14px; }
	.feature-tabs .wp-block-tab-list button strong { margin-bottom: 2px; font-size: 16px; }
	.feature-tabs .shot { min-height: 240px; padding: 20px 0 0 20px; }
	.feature-tabs .tab-more { padding: 12px 20px; }
	/* Feature chapters: tighter. */
	.chapter .section-head { margin-bottom: 32px; }
	:is(.tile, .duo-item) .feature-text { padding: 26px 22px 0; }
	.sticky-split .tile .checks { grid-template-columns: 1fr; }
	:is(.tile, .stage, .spotlight) .shot:not(.narrow) { padding: 22px 0 0 22px; }
	.tile .shot { min-height: 220px; margin-top: 24px; }
	.journey { gap: 48px; }
	.journey::before { left: 17px; }
	.stage { grid-template-columns: 36px 1fr; gap: 20px 16px; }
	.stage::before { width: 36px; height: 36px; font-size: 15px; box-shadow: 0 0 0 6px var(--nv-bg); }
	.stage .feature-text { padding-top: 4px; }
	.stage .shot { height: 240px; }
	.duo-item .phones { flex-basis: 250px; padding: 32px 8px 0; }
	.lang-row .feature-text { padding: 28px 22px; }
	.chapter .lang-row .shot:not(.narrow) { height: 240px; padding: 0 0 0 22px; }
	.spotlight .shot { height: 280px; }
	.chapter .spotlight .shot:not(.narrow) { padding: 22px 0 0 22px; }
	.spotlight .feature-text { margin: -40px 10px 0; padding: 26px 22px; }
	.poster-tile .shot.narrow { height: 220px; }
	.poster-tile .shot.narrow .wp-block-image { width: 210px; }
	/* Landing pages: tighter; the third callout over the hero phones is left out. */
	.hero-visual .phones { height: 380px; gap: 12px; padding: 32px 16px 0; }
	.chip { padding: 8px 12px; font-size: 12.5px; }
	.chip:nth-child(2) { right: -4px; }
	.chip:nth-child(3) { display: none; }
	.day { grid-template-columns: 1fr; }
	.moment:last-child { grid-column: auto; }
	.gate-tile .phones { flex-basis: 260px; padding: 28px 12px 0; }
	.mosaic .tile .shot { min-height: 220px; }
	.number { padding: 20px 18px; }
	.hero-app .phones { height: 250px; gap: 10px; margin-top: 40px; padding: 0 8px; }
	.hero-app .phones .phone:nth-child(1) { transform: translateY(40px) rotate(-5deg); }
	.hero-app .phones .phone:nth-child(3) { transform: translateY(40px) rotate(5deg); }
	.side { padding: 28px 22px; }
	.stays { gap: 12px; }
	.stay { padding: 18px 18px 28px; }
	.stay .big { font-size: 1.3rem; }
	.stay::after { left: 18px; bottom: 12px; }
	.stay:nth-child(4) { --nv-len: calc(100% - 36px); }
	.loop { grid-template-columns: repeat(2, 1fr); }
	.phones { padding: 24px 12px 0; gap: 10px; }
	.plan { margin-top: 10px; }
	.nv-footer .foot { grid-template-columns: 1fr; }
	.downloads { grid-template-columns: 1fr; }
	/* Compare table: each feature takes the full width, with its two answers under the column titles. */
	.wp-block-table.compare:not(.prices) :is(table, thead, tbody) { display: block; }
	.wp-block-table.compare:not(.prices) tr { display: grid; grid-template-columns: 1fr 1fr; }
	.wp-block-table.compare:not(.prices) thead th:first-child { display: none; }
	.wp-block-table.compare:not(.prices) thead th { padding-block: 12px; border-bottom: 1px solid var(--nv-line); }
	.wp-block-table.compare:not(.prices) :is(th, td) { padding-inline: 16px; }
	.wp-block-table.compare:not(.prices) tbody th { grid-column: 1 / -1; width: auto; min-width: 0; padding-bottom: 6px; border-bottom: 0; }
	.wp-block-table.compare:not(.prices) tbody td { padding-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.wp-block-button__link, .card { transition: none; }
	.card:hover { transform: none; }
}

/* --- Home page ---------------------------------------------------------------------------------
   Calm and roomy: a big heading over the product with three figures floating on it, the four
   promises as a light strip, three large screenshots beside their words (alternating sides), then
   short tiles for everything else. */
.hero { padding-top: 88px; background: radial-gradient(900px 520px at 50% 0%, rgba(20, 184, 166, .13), transparent 65%), radial-gradient(1400px 700px at 50% 120%, var(--nv-mint-50), transparent 70%), var(--nv-white); }
.hero h1 { font-size: clamp(2.6rem, 5.6vw, 4.2rem); line-height: 1.04; letter-spacing: -.025em; max-width: 860px; }
.hero .lead { max-width: 640px; }
.hero .hero-visual { position: relative; align-self: auto; max-width: 1080px; margin: 64px auto 0; }
.hero .hero-visual .showcase { margin: 0; }
.hero .chips .chip { inset: auto; font-size: 14px; padding: 12px 16px; border-radius: 16px; animation: nv-float 6s ease-in-out infinite; }
.hero .chips .chip:nth-child(1) { top: 16%; left: -56px; }
.hero .chips .chip:nth-child(2) { top: 6%; right: 120px; animation-delay: -2s; }
.hero .chips .chip:nth-child(3) { top: 52%; left: -28px; animation-delay: -4s; }
@keyframes nv-float { 50% { transform: translateY(-8px); } }

/* The four promises: a strip with thin lines between them, no boxes. */
.nv-section.strip { padding-block: 48px; background: var(--nv-white); border-bottom: 1px solid var(--nv-line); }
.strip .promises { gap: 0; }
.strip .promise { display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; align-content: start; background: none; border: 0; border-radius: 0; padding: 4px 28px; }
.strip .promise:first-child { padding-left: 0; }
.strip .promise + .promise { border-left: 1px solid var(--nv-line); }
.strip .promise::before { grid-row: span 2; }
.strip .promise h3 { margin: 2px 0 0; font-size: 1rem; }
.strip .promise p { margin-top: 4px; font-size: 14.5px; line-height: 1.5; }

/* Big screenshots beside their words, on alternating sides. */
.showreel { display: grid; gap: 120px; }
.reel { display: grid; grid-template-columns: 5fr 7fr; gap: 72px; align-items: center; }
.reel:nth-child(even) { grid-template-columns: 7fr 5fr; }
.reel:nth-child(even) .reel-text { order: 2; }
.reel-text h3 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); line-height: 1.15; letter-spacing: -.015em; margin-top: 16px; text-wrap: balance; }
.reel-text > p:not(.pill, .more) { color: var(--nv-slate); font-size: 1.06rem; margin-top: 14px; }
.reel-text .checks { margin-top: 24px; gap: 12px; }
.reel-text .more { margin-top: 28px; font-weight: 600; }
.reel-text .more a { color: var(--nv-teal); text-decoration: none; }
.reel-text .more a::after { content: " →"; }
.reel .shot { padding: 40px; border: 0; border-radius: 32px; background: radial-gradient(420px 300px at 85% 10%, rgba(20, 184, 166, .22), transparent 70%), linear-gradient(135deg, var(--nv-mint-50), #DFF6F1); }
.reel .shot img { width: 100%; border-radius: 14px; }

/* Everything else: short tiles. The two app tiles are wide, with their phones; the rest are a title and one line. */
#more-features .bento { gap: 24px; }
#more-features .card { padding: 26px; }
#more-features .card.s2 { display: grid; grid-template-columns: 44px 1fr; column-gap: 16px; align-content: start; }
#more-features .card.s2::before { grid-row: span 3; }
#more-features .card.s2 > * { grid-column: 2; }
#more-features .card.s2 h3 { margin-top: 0; font-size: 1.05rem; }
#more-features .card.s2 p { margin-top: 4px; font-size: 14.5px; }
#more-features .card.s2 .pill { position: static; grid-column: 2; margin: 0 0 8px; }
#more-features .card.split { min-height: 300px; padding-bottom: 0; }
#more-features .card.split .text { padding-bottom: 28px; }
#more-features .card.split h3 { font-size: 1.45rem; }
#more-features .card.split p { font-size: 15.5px; max-width: 260px; }
#more-features .card.split .phone-in { margin-bottom: -60px; }
#more-features .card.dark { background: radial-gradient(500px 300px at 90% 0%, rgba(20, 184, 166, .45), transparent 70%), linear-gradient(135deg, #0F172A, #134E4A); }
#more-features .wp-block-buttons { justify-content: center; margin-top: 44px; }

/* Made for: three bold panels in the brand colours, each with a big arrow, lifting on hover.
   The whole panel is the link; a "more" line from older page text is left out. */
#made-for .bento { gap: 24px; }
#made-for .card {
	min-height: 300px; padding: 36px; border: 0; border-radius: 28px; color: #fff; justify-content: flex-end;
	background: radial-gradient(420px 260px at 100% 0%, rgba(94, 234, 212, .35), transparent 70%), linear-gradient(150deg, #0F766E, #134E4A);
	box-shadow: 0 30px 60px -30px rgba(15, 118, 110, .6);
}
#made-for .card:nth-child(2) { background: radial-gradient(420px 260px at 100% 0%, rgba(20, 184, 166, .35), transparent 70%), linear-gradient(150deg, #0F172A, #1E3A3A); box-shadow: 0 30px 60px -30px rgba(15, 23, 42, .6); }
#made-for .card:nth-child(3) { background: radial-gradient(420px 260px at 100% 0%, rgba(255, 255, 255, .28), transparent 70%), linear-gradient(150deg, #14B8A6, #0F766E); }
#made-for .card:hover { transform: translateY(-6px); border-color: transparent; box-shadow: 0 40px 70px -30px rgba(15, 118, 110, .7); }
#made-for .card::before { position: absolute; top: 36px; left: 36px; width: 56px; height: 56px; border-radius: 16px; background-color: rgba(255, 255, 255, .14); background-size: 28px; filter: brightness(0) invert(1); }
#made-for .card::after {
	content: "→"; position: absolute; top: 36px; right: 36px; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
	background: #fff; color: var(--nv-teal); font-size: 22px; font-weight: 700; transition: transform .2s;
}
#made-for .card:hover::after { transform: translateX(4px) rotate(-45deg); }
#made-for .card h3 { margin-top: 0; font-size: clamp(1.35rem, 2vw, 1.6rem); line-height: 1.2; color: #fff; }
#made-for .card p { margin-top: 10px; font-size: 15.5px; color: rgba(255, 255, 255, .82); }
#made-for .card .more { display: none; }
#made-for .section-head { margin-bottom: 48px; }

/* Lighter dark band: fewer words, no boxes. */
.trust .trust-item { background: none; border: 0; border-top: 1px solid rgba(255, 255, 255, .18); border-radius: 0; padding: 22px 0 0; }
.trust .trust-grid { gap: 36px 48px; }

@media (max-width: 980px) {
	.hero .chips { display: none; }
	.strip .promises { grid-template-columns: 1fr 1fr; row-gap: 28px; }
	.strip .promise:nth-child(3) { border-left: 0; padding-left: 0; }
	.reel, .reel:nth-child(even) { grid-template-columns: 1fr; gap: 36px; }
	.reel:nth-child(even) .reel-text { order: 0; }
	.showreel { gap: 80px; }
}
@media (max-width: 680px) {
	.strip .promises { grid-template-columns: 1fr; }
	.strip .promise, .strip .promise + .promise { border-left: 0; padding: 0; }
	.reel .shot { padding: 18px; border-radius: 22px; }
	#more-features .card.split { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) { .hero .chips .chip { animation: none; } }

/* --- Features page: roomier, with each screenshot shown whole in a soft frame ------------------
   (Before, screenshots were close-ups cut off at the right and bottom; whole pictures read calmer.) */
.chapter.nv-section { padding-block: 120px; }
:is(.tile, .stage, .spotlight, .lang-row, .feature) .shot:not(.narrow) { display: block; height: auto; min-height: 0; padding: 32px; }
:is(.tile, .stage, .spotlight, .lang-row, .feature) .shot:not(.narrow) .wp-block-image { position: static; max-height: none; overflow: visible; margin: 0; background: none; border: 0; border-radius: 0; }
:is(.tile, .stage, .spotlight, .lang-row, .feature) .shot:not(.narrow) img { position: static; width: 100%; max-width: 100%; min-height: 0; height: auto; object-fit: initial; border: 1px solid var(--nv-line); border-radius: 12px; box-shadow: var(--nv-shadow-soft); }
:is(.tile, .stage, .spotlight, .lang-row, .feature) .shot.stack .wp-block-image + .wp-block-image { margin-top: 18px; }
.split-list { gap: 40px; }
.tile .feature-text { padding: 40px 44px 0; }
.sticky-split .tile .checks { grid-template-columns: repeat(3, auto); justify-content: start; gap: 10px 24px; }
.tile .shot { margin-top: 28px; }
.journey { gap: 96px; }
@media (min-width: 981px) { .stage { grid-template-columns: 48px 4fr 7fr; } }
.stage .shot { height: auto; }
/* A tall screenshot (the room check) is shown from the top, no taller than the others. */
.stage .shot:not(.narrow) img { max-height: 400px; object-fit: cover; object-position: left top; }
.spotlight .shot { height: auto; }
.chapter .spotlight .shot:not(.narrow) { padding: 48px 48px 48px calc(25% + 48px); }
.chapter .lang-row .shot:not(.narrow) { padding: 40px 40px 40px 0; }
.pair .tile .shot { min-height: 0; }
@media (max-width: 980px) {
	.sticky-split .tile .checks { grid-template-columns: 1fr; }
	.chapter .spotlight .shot:not(.narrow) { padding: 24px; }
	.chapter .lang-row .shot:not(.narrow) { padding: 0 24px 24px; }
}
@media (max-width: 680px) {
	.chapter.nv-section { padding-block: 72px; }
	:is(.tile, .stage, .spotlight, .lang-row, .feature) .shot:not(.narrow) { padding: 16px; }
	.tile .feature-text { padding: 28px 24px 0; }
}

/* === Brand teal (theme 1.0.16) ===================================================================
   The look the owner chose: a teal header running into a teal page top with a curved bottom edge,
   white type on it, pill buttons, bold numbered cards and a dark band of big numbers. */
:root {
	--nv-teal-hero: radial-gradient(700px 500px at 85% 20%, rgba(153, 246, 228, .32), transparent 60%), radial-gradient(600px 600px at 0% 100%, rgba(15, 23, 42, .32), transparent 60%), linear-gradient(135deg, #0F766E, #115E59 55%, #134E4A);
	--nv-tick-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2399F6E4' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E");
}

/* Pill buttons everywhere. */
.wp-block-button a.wp-block-button__link { border-radius: 999px; padding: 14px 26px; font-weight: 700; }

/* Header: teal, white links, a white "Book a demo" pill. */
body .main-navigation, body .main-navigation.navigation-stick, body .main-navigation.is_stuck, body #sticky-navigation { background: #0F766E; border-bottom: 0; }
body .main-navigation .main-nav ul li a, body .navigation-branding .main-title a, body .main-navigation .menu-bar-items { color: #fff; }
body .main-navigation .main-nav ul li:not(.nv-menu-button):hover > a,
body .main-navigation .main-nav ul li:not(.nv-menu-button)[class*="current-menu-"] > a { color: #CCFBF1; background: transparent; }
body .main-navigation .main-nav > ul > li.current-menu-item:not(.menu-item-type-custom) > a::after,
body .main-navigation .main-nav > ul > li.current_page_parent > a::after { background: #99F6E4; }
body .main-navigation .main-nav > ul > li.menu-item-type-custom.current-menu-item > a { color: #fff; }
body .main-navigation .main-nav ul li.nv-menu-button > a { border-radius: 999px; background: #fff; color: #0F766E; font-weight: 700; padding: 10px 20px; }
body .main-navigation .main-nav ul li.nv-menu-button > a:hover { background: #CCFBF1; color: #115E59; }
.navigation-branding .site-logo img { border-radius: 10px; }

/* Home page top: words on the left, the app tilted on the right running off the edge. */
.hero { position: relative; overflow: hidden; padding-top: 64px; padding-bottom: 150px; color: #fff; background: var(--nv-teal-hero); }
/* Words in a hero-text group and pictures in a hero-visual group: side by side. */
.hero:has(> .hero-text) { display: grid; grid-template-columns: 1fr 1.12fr; gap: 48px; align-items: center; text-align: left; }
/* A home page from an older theme (its pieces not in those two groups): centred, the app below. */
.hero:not(:has(> .hero-text)) { text-align: center; padding-top: 80px; }
.hero:not(:has(> .hero-text)) h1 { max-width: 900px; margin: 20px auto 0; font-size: clamp(2.4rem, 5vw, 4rem); }
.hero:not(:has(> .hero-text)) .lead { max-width: 680px; margin: 20px auto 0; }
.hero:not(:has(> .hero-text)) :is(.wp-block-buttons.ctas, .ticks) { justify-content: center; }
.hero:not(:has(> .hero-text)) .showcase { position: relative; z-index: 1; max-width: 1000px; margin: 56px auto 0; }
.hero:not(:has(> .hero-text)) .showcase .window { transform: perspective(1800px) rotateX(10deg); transform-origin: 50% 100%; }
.hero:not(:has(> .hero-text)) .showcase .phone { left: auto; right: -30px; bottom: -50px; width: 190px; }
.hero::after { content: ""; position: absolute; left: -5%; right: -5%; bottom: -1px; height: 110px; background: var(--nv-white); border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.hero .hero-text { position: relative; z-index: 1; }
:is(.hero, .hero-pricing, .hero-app) .eyebrow { display: inline-block; padding: 6px 14px; border-radius: 99px; background: rgba(255, 255, 255, .14); color: #fff; letter-spacing: .04em; text-transform: none; font-size: 13.5px; }
.hero h1 { margin: 20px 0 0; max-width: none; font-size: clamp(2.8rem, 5.4vw, 4.6rem); line-height: 1.02; letter-spacing: -.035em; color: #fff; }
.hero h1 em { color: #fff; background: linear-gradient(transparent 62%, rgba(153, 246, 228, .45) 62%); }
.hero .lead { margin: 22px 0 0; max-width: 520px; color: #CCFBF1; }
.hero .wp-block-buttons.ctas, .hero .ticks { justify-content: flex-start; }
.hero .ticks { color: #99F6E4; }
:is(.hero, .hero-pricing, .hero-app) .ticks li::before { background-image: var(--nv-tick-light); }
.hero .hero-visual { position: relative; z-index: 1; max-width: none; margin: 0 -140px 0 0; align-self: center; }
.hero .showcase { margin: 0; }
.hero .showcase .window { border-radius: 18px; border: 8px solid rgba(255, 255, 255, .18); box-shadow: 0 50px 100px -30px rgba(0, 0, 0, .55); transform: perspective(1600px) rotateY(-12deg) rotateX(4deg); }
.hero .showcase .phone { left: -36px; right: auto; bottom: -64px; width: 190px; }

/* Buttons on teal: white, or a white outline. */
:is(.hero, .hero-pricing, .hero-app) .wp-block-button:not(.is-style-ghost) a.wp-block-button__link { background: #fff; color: #0F766E; box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .35); }
:is(.hero, .hero-pricing, .hero-app) .wp-block-button:not(.is-style-ghost) a.wp-block-button__link:hover { background: #CCFBF1; }
:is(.hero, .hero-pricing, .hero-app) .wp-block-button.is-style-ghost a.wp-block-button__link { background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, .5); }
:is(.hero, .hero-pricing, .hero-app) .wp-block-button.is-style-ghost a.wp-block-button__link:hover { border-color: #fff; }

/* Each page's own top. Home is the teal one with the curve; the others differ, so each page feels
   like its own place: Features light with a blueprint grid, Pricing dark navy, Grow warm cream with
   amber, Hostel light beside the warden's phones, Co-living deep navy into teal with phones rising. */
.page-hero { position: relative; overflow: hidden; }
.page-hero :is(.hero-text, .hero-visual) { position: relative; z-index: 1; }
.page-hero .chips { z-index: 2; }
.page-hero h1 { letter-spacing: -.03em; }

.page-hero.hero-features {
	padding-top: 80px; padding-bottom: 72px;
	background:
		radial-gradient(700px 360px at 50% 0%, rgba(20, 184, 166, .16), transparent 70%),
		linear-gradient(rgba(15, 118, 110, .07) 1px, transparent 1px) 0 0 / 40px 40px,
		linear-gradient(90deg, rgba(15, 118, 110, .07) 1px, transparent 1px) 0 0 / 40px 40px,
		var(--nv-white);
}
.page-hero.hero-features::after { content: ""; position: absolute; inset: auto 0 0; height: 120px; background: linear-gradient(transparent, var(--nv-white)); }
.hero-features .eyebrow { display: inline-block; padding: 6px 14px; border-radius: 99px; background: var(--nv-mint-50); border: 1px solid var(--nv-mint); }
.hero-features h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); }

.page-hero.hero-pricing {
	padding-top: 88px; padding-bottom: 96px; color: #fff;
	background: radial-gradient(700px 400px at 15% 0%, rgba(20, 184, 166, .35), transparent 65%), radial-gradient(600px 400px at 90% 100%, rgba(20, 184, 166, .22), transparent 65%), #0B1324;
}
.hero-pricing h1 { color: #fff; }
.hero-pricing .lead { color: #CBD5E1; }

.page-hero.hero-grow {
	padding-top: 80px; padding-bottom: 80px;
	background: radial-gradient(600px 360px at 12% 10%, rgba(251, 191, 36, .22), transparent 70%), radial-gradient(700px 420px at 90% 30%, rgba(20, 184, 166, .18), transparent 70%), linear-gradient(180deg, #FFFBF2, var(--nv-white));
}
.hero-grow .eyebrow { display: inline-block; padding: 6px 14px; border-radius: 99px; background: #FEF3C7; border: 1px solid #FDE68A; color: #B45309; }
.hero-grow h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); }

.page-hero.hero-app { padding-bottom: 0; color: #fff; background: radial-gradient(800px 420px at 50% 0%, rgba(45, 212, 191, .3), transparent 65%), linear-gradient(160deg, #0B1324, #0F2F2C 60%, #115E59); }
.hero-app h1 { color: #fff; }
.hero-app .lead { color: #CBD5E1; }
.hero-app .ticks { color: #99F6E4; }

/* Section headings: heavier, tighter. */
.section-head h2 { font-weight: 800; letter-spacing: -.03em; line-height: 1.08; }
.eyebrow { font-weight: 800; letter-spacing: .12em; }

/* 01 · 02 · 03: three tall cards, mint, dark and teal, each with its screenshot rising from the bottom. */
#features.nv-section { padding-top: 40px; }
.jobs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.job { position: relative; display: flex; flex-direction: column; min-height: 500px; padding: 36px 36px 0; border-radius: 28px; background: #F0FDFA; overflow: hidden; }
.job:nth-child(2) { background: linear-gradient(160deg, #0F172A, #134E4A); }
.job:nth-child(3) { background: linear-gradient(160deg, #14B8A6, #0F766E); }
.job .num { font-size: 64px; font-weight: 800; letter-spacing: -.05em; line-height: 1; color: #99F6E4; }
.job:nth-child(2) .num { color: #2DD4BF; }
.job:nth-child(3) .num { color: #CCFBF1; }
.job h3 { font-size: 1.5rem; letter-spacing: -.015em; margin-top: 16px; }
.job > p:not(.num, .more) { color: #475569; margin-top: 10px; line-height: 1.55; }
.job:not(:first-child) h3 { color: #fff; }
.job:nth-child(2) > p:not(.num, .more) { color: #CBD5E1; }
.job:nth-child(3) > p:not(.num, .more) { color: #E6FFFA; }
.job .more { margin-top: 16px; font-weight: 700; }
.job .more a { color: var(--nv-teal); text-decoration: none; }
.job:not(:first-child) .more a { color: #fff; }
.job .more a::after { content: " →"; }
.job { padding-bottom: 12px; }
.job .shot { margin: auto -44px -8px; padding: 24px 0 0; background: none; border: 0; border-radius: 0; }
.job .shot img { display: block; width: 100%; max-width: none; border: 0; border-radius: 0; box-shadow: none; background: none; transition: transform .35s ease; }
.job:hover .shot img { transform: translateY(-6px) scale(1.02); }

/* The dark band of big numbers, in a rounded box. */
.nv-section.band-section { padding-block: 24px 96px; }
.band { position: relative; overflow: hidden; border-radius: 36px; padding: 80px 72px; background: #0F172A; color: #fff; }
.band::before { content: ""; position: absolute; width: 640px; height: 640px; right: -220px; top: -320px; border-radius: 50%; background: radial-gradient(#14B8A6, transparent 65%); opacity: .5; }
.band .section-head { position: relative; text-align: left; max-width: 720px; margin: 0 0 52px; }
.band .section-head h2 { color: #fff; }
.band .section-head p:not(.eyebrow) { color: #94A3B8; }
.band .eyebrow { color: #5EEAD4; }
.band .numbers { position: relative; }
.band .number { padding: 0; background: none; border: 0; border-radius: 0; }
.band .number .big { font-size: clamp(2.4rem, 4vw, 3.2rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; color: #5EEAD4; }
.band .number p:not(.big) { color: #94A3B8; margin-top: 6px; }

@media (max-width: 980px) {
	.hero, .hero:has(> .hero-text) { grid-template-columns: 1fr; gap: 0; padding-bottom: 120px; }
	.hero .hero-visual { margin: 24px 0 0; }
	.hero .showcase .window { transform: none; }
	.hero .showcase .phone { left: auto; right: 8px; width: 130px; bottom: -40px; }
	.jobs { grid-template-columns: 1fr; }
	.job { min-height: 0; }
	.band { padding: 56px 32px; }
}
@media (max-width: 680px) {
	.hero::after { height: 56px; }
	.hero .showcase .phone { display: none; }
	.band .numbers { grid-template-columns: 1fr 1fr; }
	body .main-navigation .menu-toggle, body nav.main-navigation.has-branding .menu-toggle { background: rgba(255, 255, 255, .16); color: #fff; }
	body .main-navigation.toggled .main-nav > ul { border-top-color: rgba(255, 255, 255, .18); }
}
/* The phone menu, open: the same teal as the header, links with thin lines between them, and
   "Book a demo" as a full-width white pill. (GeneratePress paints the open list white.) */
@media (max-width: 768px) {
	body .main-navigation .main-nav ul, body .main-navigation.toggled .main-nav > ul { background: #0F766E; }
	body .main-navigation.toggled .main-nav > ul { padding: 4px 0 20px; }
	body .main-navigation.toggled .main-nav ul li:not(.nv-menu-button) { border-bottom: 1px solid rgba(255, 255, 255, .14); }
	body .main-navigation.toggled .main-nav ul li a { padding: 15px 0; font-size: 16.5px; font-weight: 600; color: #fff; }
	body .main-navigation.toggled .main-nav ul li.nv-menu-button > a { display: flex; justify-content: center; margin: 18px 0 0; padding: 14px 20px; background: #fff; color: #0F766E; }
}

/* Header, refined: links as soft pills that light up on hover; the page you're on as a brighter pill;
   a hairline under the bar; "Book a demo" a white pill with an arrow. */
@media (min-width: 769px) {
	body .main-navigation { box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .12); }
	body .main-navigation.is_stuck, body #sticky-navigation { box-shadow: 0 10px 30px -12px rgba(4, 47, 46, .6); }
	body .main-navigation .main-nav > ul { gap: 4px; align-items: center; }
	body .main-navigation .main-nav > ul > li:not(.nv-menu-button) > a { line-height: 1; padding: 11px 16px; margin: 0; border-radius: 999px; font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, .86); transition: background .15s, color .15s; }
	body .main-navigation .main-nav > ul > li:not(.nv-menu-button) > a::after { display: none; }
	body .main-navigation .main-nav > ul > li:not(.nv-menu-button):hover > a { background: rgba(255, 255, 255, .1); color: #fff; }
	body .main-navigation .main-nav > ul > li.current-menu-item:not(.menu-item-type-custom) > a,
	body .main-navigation .main-nav > ul > li.current_page_parent > a { background: rgba(255, 255, 255, .16); color: #fff; }
	body .main-navigation .main-nav ul li.nv-menu-button > a { margin-left: 14px; padding: 12px 22px; line-height: 1; box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .4); }
	body .main-navigation .main-nav ul li.nv-menu-button > a::after { content: "→"; margin-left: 8px; transition: margin .15s; }
	body .main-navigation .main-nav ul li.nv-menu-button > a:hover::after { margin-left: 12px; }
	.navigation-branding .main-title a { letter-spacing: -.02em; }
}

/* === Motion (theme 1.0.19) ======================================================================
   Pure CSS, no script. On load: the home top rises in, its highlight draws, the app swings into
   its tilt and the phone pops up and floats. While scrolling: sections and cards fade and rise
   into place (in browsers with scroll-driven animations; others simply show them). Everything uses
   the separate translate / scale properties, so hover effects (which use transform) still work.
   Visitors who ask for less motion get none. */
@keyframes nv-up { from { opacity: 0; translate: 0 28px; } to { opacity: 1; translate: 0 0; } }
@keyframes nv-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes nv-swing { from { opacity: 0; translate: 80px 30px; } to { opacity: 1; translate: 0 0; } }
@keyframes nv-pop { 0% { opacity: 0; scale: .7; translate: 0 40px; } 70% { opacity: 1; scale: 1.04; translate: 0 -4px; } 100% { opacity: 1; scale: 1; translate: 0 0; } }
@keyframes nv-bob { 50% { translate: 0 -10px; } }
@keyframes nv-mark { to { background-size: 100% 100%; } }
@keyframes nv-rise { from { opacity: 0; translate: 0 48px; scale: .98; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes nv-count { from { opacity: 0; scale: .6; } to { opacity: 1; scale: 1; } }

@media (prefers-reduced-motion: no-preference) {
	/* The home top, in order. */
	.hero .hero-text > * { animation: nv-up .8s cubic-bezier(.2, .7, .2, 1) both; }
	.hero .hero-text > :nth-child(2) { animation-delay: .08s; }
	.hero .hero-text > :nth-child(3) { animation-delay: .16s; }
	.hero .hero-text > :nth-child(4) { animation-delay: .24s; }
	.hero .hero-text > :nth-child(5) { animation-delay: .32s; }
	.hero h1 em { background: linear-gradient(transparent 62%, rgba(153, 246, 228, .45) 62%) no-repeat 0 0 / 0% 100%; animation: nv-mark .9s .7s cubic-bezier(.6, 0, .2, 1) forwards; }
	.hero .showcase .window { animation: nv-swing 1.1s .15s cubic-bezier(.2, .7, .2, 1) both; }
	.hero .showcase .phone { animation: nv-pop .8s .75s cubic-bezier(.2, .7, .2, 1) both, nv-bob 6s 1.6s ease-in-out infinite; }

	/* Other pages' tops: words rise in, pictures follow. */
	.page-hero > :not(.hero-visual), .page-hero .hero-text > * { animation: nv-up .8s cubic-bezier(.2, .7, .2, 1) both; }
	.page-hero > :nth-child(2), .page-hero .hero-text > :nth-child(2) { animation-delay: .08s; }
	.page-hero > :nth-child(3), .page-hero .hero-text > :nth-child(3) { animation-delay: .16s; }
	.page-hero > :nth-child(4), .page-hero .hero-text > :nth-child(4) { animation-delay: .24s; }
	.page-hero .hero-visual, .page-hero .phones { animation: nv-up 1s .3s cubic-bezier(.2, .7, .2, 1) both; }
	.page-hero .chip { animation: nv-in .6s both, nv-bob 6s ease-in-out infinite; }
	.page-hero .chip:nth-child(1) { animation-delay: .8s, 1.4s; }
	.page-hero .chip:nth-child(2) { animation-delay: 1s, 2.6s; }
	.page-hero .chip:nth-child(3) { animation-delay: 1.2s, 3.8s; }

	/* The 01-03 pictures drift a little, each at its own time. */
	.job .shot .wp-block-image { animation: nv-bob 7s ease-in-out infinite; }
	.job:nth-child(2) .shot .wp-block-image { animation-delay: -2.3s; }
	.job:nth-child(3) .shot .wp-block-image { animation-delay: -4.6s; }
}

/* While scrolling: each block rises into place as it comes into view. */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		:is(.nv-section, .nv-footer) :is(
			.section-head, .split-intro, .job, .band, .card, .tile, .stage, .duo-item, .lang-row, .spotlight, .pair > *,
			.included > *, .moment, .mosaic > *, .step, .side, .stay, .loop-step, .plan, .service, .pack, .compare-wrap,
			.faq details, .faq-intro, .cta-box, .feature, .number, .promise, .trust-item, .download, .post-card, .price-sizes
		) {
			animation: nv-rise linear both;
			animation-timeline: view();
			animation-range: entry 0% cover 22%;
		}
		/* In a row of cards, each one a little after the one before it. */
		:is(.jobs, .bento, .mosaic, .included, .plans, .services, .numbers, .day, .stays, .loop, .duo, .trust-grid) > :nth-child(3n + 2) { animation-range: entry 6% cover 27%; }
		:is(.jobs, .bento, .mosaic, .included, .plans, .services, .numbers, .day, .stays, .loop, .duo, .trust-grid) > :nth-child(3n + 3) { animation-range: entry 12% cover 32%; }
		/* The band's big numbers grow in. */
		.band .number .big { animation: nv-count linear both; animation-timeline: view(); animation-range: entry 10% cover 30%; }
		/* Big pictures in feature rows slide up a touch slower than their words. */
		:is(.tile, .stage, .spotlight, .feature) .shot { animation: nv-rise linear both; animation-timeline: view(); animation-range: entry 10% cover 35%; }
	}
}

/* Home: "Be one of our first 25 PGs". A warm card, words and buttons on the left, four perks on the right. */
.founding { position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr 1.15fr; gap: 48px; align-items: center; padding: 56px; border-radius: 28px;
	background: radial-gradient(520px 320px at 0% 0%, rgba(251, 191, 36, .22), transparent 70%), radial-gradient(620px 380px at 100% 100%, rgba(20, 184, 166, .16), transparent 70%), #FFFBF2;
	border: 1px solid #FDE68A; }
.founding-text .eyebrow { display: inline-block; padding: 6px 14px; border-radius: 99px; background: #FEF3C7; border: 1px solid #FDE68A; color: #B45309; }
.founding-text h2 { margin-top: 18px; font-size: clamp(1.9rem, 3.4vw, 2.6rem); letter-spacing: -.03em; text-wrap: balance; }
.founding-text > p { margin-top: 14px; color: var(--nv-slate); font-size: 1.06rem; }
.founding-text .ctas { margin-top: 28px; justify-content: flex-start; }
.perks { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.perk { padding: 24px; border-radius: 20px; background: #fff; border: 1px solid rgba(15, 23, 42, .06); box-shadow: 0 14px 34px -22px rgba(15, 23, 42, .35); transition: transform .2s; }
.perk:hover { transform: translateY(-4px); }
.perk .icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--nv-mint-50); color: var(--nv-teal); }
.perk h3 { margin-top: 14px; font-size: 1.05rem; }
.perk p { margin-top: 6px; color: var(--nv-slate); font-size: .95rem; }
@media (max-width: 900px) {
	.founding { grid-template-columns: 1fr; padding: 36px 24px; gap: 32px; }
}
@media (max-width: 520px) {
	.perks { grid-template-columns: 1fr; }
	.founding-text .eyebrow { font-size: 11.5px; letter-spacing: .04em; padding: 6px 12px; }
}
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.founding, .perk { animation: nv-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 22%; }
		.perks > :nth-child(2n) { animation-range: entry 6% cover 27%; }
	}
}

/* Why Campus Nivas: its own top, mint with a soft teal glow, words centred. */
.page-hero.hero-why { padding-top: 80px; padding-bottom: 72px; text-align: center;
	background: radial-gradient(700px 380px at 50% 0%, rgba(20, 184, 166, .22), transparent 70%), linear-gradient(180deg, #F0FDFA, #fff); }
.hero-why .eyebrow { display: inline-block; padding: 6px 14px; border-radius: 99px; background: #fff; border: 1px solid #CCFBF1; }
.hero-why h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); max-width: 820px; margin-inline: auto; }
.hero-why .lead { max-width: 640px; margin-inline: auto; }
.hero-why .ctas { justify-content: center; }

/* Tablet widths: a tighter menu, so the links and "Book a demo" fit beside the logo. */
@media (min-width: 769px) and (max-width: 1100px) {
	body .main-navigation .main-nav > ul { gap: 0; }
	body .main-navigation .main-nav > ul > li:not(.nv-menu-button) > a { padding: 10px 10px; font-size: 14px; }
	body .main-navigation .main-nav ul li.nv-menu-button > a { margin-left: 6px; padding: 10px 16px; }
	body .main-navigation .main-nav ul li.nv-menu-button > a::after { display: none; }
	.navigation-branding .main-title { font-size: 20px; }
}