/* ==========================================================================
   Tonubi — component styles
   Swiss grid · modernist geometry · luxury minimalism
   Rule: flat colour only. No gradients, no glows, no drop shadows.

   Everything lives in the `components` layer so Tailwind utilities
   (e.g. `hidden md:flex`) can always override these defaults.
   ========================================================================== */

@layer theme, base, components, utilities;

@layer components {
	:root {
		--paper: #f6f4ef;
		--paper-2: #eeebe3;
		--bone: #fbfaf7;
		--ink: #082955;
		--ink-2: #0c3366;
		--deep: #061f41;
		--mute: #5a6a82;
		--teal: #13c6ba;
		--line: rgba(8, 41, 85, 0.12);
		--ease: cubic-bezier(0.22, 1, 0.36, 1);
	}

	html {
		scroll-behavior: smooth;
		-webkit-text-size-adjust: 100%;
	}
	@media (prefers-reduced-motion: reduce) {
		html {
			scroll-behavior: auto;
		}
	}

	body {
		font-feature-settings: 'ss01', 'cv11';
		text-rendering: optimizeLegibility;
	}
	section[id],
	[id='waitlist'] {
		scroll-margin-top: 72px;
	}
	em {
		font-style: italic;
	}

	:focus-visible {
		outline: 2px solid var(--teal);
		outline-offset: 3px;
	}

	.skip-link {
		position: absolute;
		left: 1rem;
		top: -100px;
		z-index: 100;
		background: var(--ink);
		color: var(--paper);
		padding: 0.75rem 1rem;
		font-size: 0.875rem;
	}
	.skip-link:focus {
		top: 1rem;
	}

	.eyebrow {
		font-size: 11px;
		font-weight: 500;
		letter-spacing: 0.18em;
		text-transform: uppercase;
	}

	.section {
		padding-block: clamp(6rem, 12vw, 11rem);
	}
	.section-title {
		font-size: clamp(2.25rem, 4.6vw, 4.25rem);
		font-weight: 300;
		line-height: 1.02;
		letter-spacing: -0.035em;
	}

	/* ---------- Header ------------------------------------------------------ */
	.site-header {
		background: rgba(246, 244, 239, 0);
		border-bottom: 1px solid transparent;
		transition:
			background-color 0.4s var(--ease),
			border-color 0.4s var(--ease);
	}
	.site-header.is-scrolled {
		background: rgba(246, 244, 239, 0.92);
		border-bottom-color: var(--line);
		-webkit-backdrop-filter: saturate(140%) blur(10px);
		backdrop-filter: saturate(140%) blur(10px);
	}
	.nav-link {
		position: relative;
		padding-block: 0.25rem;
	}
	.nav-link::after {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		bottom: -2px;
		height: 1px;
		background: currentColor;
		transform: scaleX(0);
		transform-origin: right;
		transition: transform 0.5s var(--ease);
	}
	.nav-link:hover::after,
	.nav-link.is-active::after {
		transform: scaleX(1);
		transform-origin: left;
	}

	.menu-toggle {
		position: relative;
		width: 44px;
		height: 44px;
		border: 1px solid var(--line);
		border-radius: 999px;
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 5px;
	}
	.menu-toggle span {
		display: block;
		width: 16px;
		height: 1.5px;
		background: var(--ink);
		transition: transform 0.4s var(--ease);
	}
	.menu-toggle[aria-expanded='true'] {
		border-color: rgba(246, 244, 239, 0.3);
	}
	.menu-toggle[aria-expanded='true'] span {
		background: var(--paper);
	}
	.menu-toggle[aria-expanded='true'] span:first-child {
		transform: translateY(3.25px) rotate(45deg);
	}
	.menu-toggle[aria-expanded='true'] span:last-child {
		transform: translateY(-3.25px) rotate(-45deg);
	}

	.mobile-menu {
		position: fixed;
		inset: 0;
		z-index: 40;
		background: var(--ink);
		color: var(--paper);
	}
	.menu-open .site-header {
		background: var(--ink);
		border-bottom-color: rgba(246, 244, 239, 0.1);
	}
	.menu-open .site-header img {
		filter: brightness(0) invert(1);
	}
	.menu-open {
		overflow: hidden;
	}

	/* ---------- Buttons & links -------------------------------------------- */
	.btn-primary,
	.btn-light,
	.btn-outline {
		display: inline-flex;
		align-items: center;
		gap: 0.75rem;
		height: 44px;
		padding-inline: 1.35rem;
		border-radius: 999px;
		font-size: 13px;
		font-weight: 500;
		letter-spacing: 0.01em;
		white-space: nowrap;
		transition:
			background-color 0.35s var(--ease),
			color 0.35s var(--ease),
			border-color 0.35s var(--ease);
		will-change: transform;
	}
	.btn-lg {
		height: 56px;
		padding-inline: 1.9rem;
		font-size: 14px;
	}
	.btn-primary {
		background: var(--ink);
		color: var(--paper);
		border: 1px solid var(--ink);
	}
	.btn-primary:hover {
		background: var(--deep);
	}
	.btn-light {
		background: var(--paper);
		color: var(--ink);
		border: 1px solid var(--paper);
	}
	.btn-light:hover {
		background: var(--bone);
	}
	.btn-outline {
		border: 1px solid rgba(8, 41, 85, 0.25);
		color: var(--ink);
	}
	.btn-outline:hover {
		background: var(--ink);
		color: var(--paper);
		border-color: var(--ink);
	}
	.btn-light[disabled],
	.btn-primary[disabled] {
		opacity: 0.6;
		cursor: progress;
	}

	.link-underline {
		background: none;
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 5px;
		text-decoration-color: currentColor;
		transition:
			text-decoration-color 0.3s,
			text-underline-offset 0.3s var(--ease);
	}
	.link-underline:hover {
		text-underline-offset: 3px;
		text-decoration-color: var(--teal);
	}

	.footer-link {
		color: rgba(246, 244, 239, 0.85);
		transition: color 0.3s;
	}
	.footer-link:hover {
		color: var(--teal);
	}

	/* ---------- Hero -------------------------------------------------------- */
	.hero {
		min-height: 100svh;
	}
	.hero-canvas {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
	}
	.hero-grid {
		position: absolute;
		inset: 0;
		max-width: 1440px;
		margin-inline: auto;
		padding-inline: 1.5rem;
		display: grid;
		grid-template-columns: repeat(6, 1fr);
		pointer-events: none;
	}
	@media (min-width: 768px) {
		.hero-grid {
			padding-inline: 2.5rem;
		}
	}
	.hero-grid span {
		border-left: 1px solid rgba(8, 41, 85, 0.06);
	}
	.hero-grid span:last-child {
		border-right: 1px solid rgba(8, 41, 85, 0.06);
	}

	.hero-line {
		display: block;
		overflow: hidden;
		padding-bottom: 0.08em;
		margin-bottom: -0.08em;
	}
	.hero-line > span {
		display: inline-block;
		will-change: transform;
	}

	/* Phones */
	.phone-stage {
		position: relative;
		height: 560px;
		margin: 0;
	}
	@media (min-width: 1024px) {
		.phone-stage {
			height: 100%;
			min-height: 620px;
		}
	}
	.phone-wrap {
		position: absolute;
		will-change: transform;
	}
	.phone-a {
		left: 0;
		top: 70px;
		z-index: 1;
	}
	.phone-b {
		left: 50%;
		top: 0;
		z-index: 3;
		margin-left: -118px;
	}
	@media (max-width: 640px) {
		.phone-b {
			margin-left: -98px;
		}
	}
	.phone-c {
		right: 0;
		top: 120px;
		z-index: 2;
	}
	@media (min-width: 1024px) {
		.phone-a {
			left: -12%;
		}
		.phone-c {
			right: -4%;
		}
	}
	@media (max-width: 640px) {
		.phone-stage {
			height: 470px;
		}
		.phone-a {
			left: -6%;
			top: 60px;
		}
		.phone-c {
			right: -6%;
			top: 100px;
		}
	}

	.phone {
		width: 214px;
		aspect-ratio: 9 / 19.2;
		padding: 7px;
		border-radius: 42px;
		background: var(--deep);
		border: 1px solid rgba(8, 41, 85, 0.5);
	}
	.phone-b .phone {
		width: 236px;
	}
	@media (max-width: 640px) {
		.phone {
			width: 172px;
			border-radius: 34px;
		}
		.phone-b .phone {
			width: 196px;
		}
	}
	.phone-screen {
		position: relative;
		height: 100%;
		border-radius: 35px;
		overflow: hidden;
	}
	@media (max-width: 640px) {
		.phone-screen {
			border-radius: 28px;
		}
	}
	.island {
		position: absolute;
		top: 9px;
		left: 50%;
		transform: translateX(-50%);
		width: 72px;
		height: 20px;
		border-radius: 999px;
		background: #030f22;
		z-index: 2;
	}
	.status {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 11px 20px 0;
		font-size: 10px;
		font-weight: 600;
		letter-spacing: 0.02em;
	}
	.status-icons {
		display: inline-flex;
		gap: 3px;
		align-items: flex-end;
	}
	.status-icons i {
		display: block;
		width: 3px;
		background: currentColor;
		border-radius: 1px;
	}
	.status-icons i:nth-child(1) {
		height: 4px;
	}
	.status-icons i:nth-child(2) {
		height: 6px;
	}
	.status-icons i:nth-child(3) {
		height: 8px;
	}

	.phone-caption {
		position: absolute;
		left: 0;
		bottom: -8px;
		font-size: 11px;
		letter-spacing: 0.08em;
		color: var(--mute);
		text-transform: uppercase;
	}
	@media (min-width: 1024px) {
		.phone-caption {
			bottom: 24px;
		}
	}

	/* ---------- Marquee ----------------------------------------------------- */
	.marquee {
		overflow: hidden;
		padding-block: 1.6rem;
	}
	.marquee-track {
		display: flex;
		width: max-content;
		will-change: transform;
	}
	.marquee-group {
		display: flex;
		align-items: center;
		flex-shrink: 0;
	}
	.marquee-item {
		font-family: var(--font-serif, 'Instrument Serif', serif);
		font-style: italic;
		font-size: clamp(1.75rem, 3.4vw, 3rem);
		line-height: 1;
		padding-inline: 2rem;
		color: var(--ink);
	}
	.marquee-dot {
		width: 7px;
		height: 7px;
		border-radius: 999px;
		background: var(--teal);
		flex: none;
	}
	.no-anim .marquee-track,
	.no-js .marquee-track {
		animation: marquee 40s linear infinite;
	}
	@keyframes marquee {
		to {
			transform: translateX(-50%);
		}
	}
	@media (prefers-reduced-motion: reduce) {
		.marquee-track {
			animation: none !important;
		}
	}

	/* ---------- Studio ------------------------------------------------------ */
	.studio-card {
		background: var(--paper);
		padding: clamp(2rem, 4vw, 3.5rem);
		min-height: 380px;
		transition: background-color 0.5s var(--ease);
	}
	.studio-card:hover {
		background: var(--bone);
	}

	/* ---------- Steps ------------------------------------------------------- */
	.steps {
		padding-left: 3.25rem;
	}
	.steps-rail {
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		width: 1px;
		background: var(--line);
	}
	.steps-progress {
		position: absolute;
		inset: 0;
		background: var(--ink);
		transform-origin: top;
		transform: scaleY(0);
	}
	.no-anim .steps-progress,
	.no-js .steps-progress {
		transform: scaleY(1);
	}
	.step {
		position: relative;
		padding-block: 2.75rem;
		border-bottom: 1px solid var(--line);
	}
	.step:first-of-type {
		padding-top: 0;
	}
	.step-index {
		position: absolute;
		left: -3.25rem;
		top: 2.95rem;
		transform: translateX(-50%);
		width: 34px;
		height: 34px;
		margin-left: 0.5px;
		border-radius: 999px;
		display: grid;
		place-items: center;
		font-size: 11px;
		font-weight: 500;
		background: var(--paper);
		border: 1px solid var(--line);
		color: var(--mute);
		transition:
			background-color 0.4s var(--ease),
			color 0.4s var(--ease),
			border-color 0.4s var(--ease);
	}
	.step:first-of-type .step-index {
		top: 0.2rem;
	}
	.step.is-active .step-index {
		background: var(--ink);
		border-color: var(--ink);
		color: var(--paper);
	}

	/* ---------- Pricing ----------------------------------------------------- */
	.price-card {
		display: flex;
		flex-direction: column;
		padding: clamp(2rem, 3vw, 2.75rem);
		background: var(--paper);
		border: 1px solid var(--line);
		transition:
			border-color 0.4s var(--ease),
			transform 0.6s var(--ease);
	}
	.price-card:hover {
		border-color: rgba(8, 41, 85, 0.35);
	}
	.price-card .price-summary,
	.price-card .price-unit {
		color: var(--mute);
	}
	.price-card .price-features {
		color: var(--ink);
		flex: 1;
	}
	.price-card .price-features svg {
		color: var(--teal);
	}
	.price-card.is-featured {
		background: var(--ink);
		color: var(--paper);
		border-color: var(--ink);
	}
	.price-card.is-featured .price-summary,
	.price-card.is-featured .price-unit {
		color: rgba(246, 244, 239, 0.65);
	}
	.price-card.is-featured .price-features {
		color: var(--paper);
	}

	/* ---------- FAQ --------------------------------------------------------- */
	.faq {
		border-top: 1px solid var(--line);
	}
	.faq-item {
		border-bottom: 1px solid var(--line);
	}
	.faq-trigger {
		width: 100%;
		display: grid;
		grid-template-columns: 3rem 1fr 28px;
		align-items: center;
		gap: 1rem;
		padding-block: 1.75rem;
		text-align: left;
		cursor: pointer;
	}
	.faq-num {
		font-size: 12px;
		color: var(--mute);
	}
	.faq-q {
		font-size: clamp(1.15rem, 1.8vw, 1.5rem);
		font-weight: 400;
		letter-spacing: -0.015em;
		transition: color 0.3s;
	}
	.faq-trigger:hover .faq-q {
		color: var(--ink-2);
	}
	.faq-icon {
		position: relative;
		width: 28px;
		height: 28px;
		border: 1px solid var(--line);
		border-radius: 999px;
		transition:
			background-color 0.35s var(--ease),
			border-color 0.35s;
	}
	.faq-icon::before,
	.faq-icon::after {
		content: '';
		position: absolute;
		left: 50%;
		top: 50%;
		width: 10px;
		height: 1.5px;
		background: var(--ink);
		transform: translate(-50%, -50%);
		transition:
			transform 0.4s var(--ease),
			background-color 0.35s;
	}
	.faq-icon::after {
		transform: translate(-50%, -50%) rotate(90deg);
	}
	.faq-trigger[aria-expanded='true'] .faq-icon {
		background: var(--ink);
		border-color: var(--ink);
	}
	.faq-trigger[aria-expanded='true'] .faq-icon::before,
	.faq-trigger[aria-expanded='true'] .faq-icon::after {
		background: var(--paper);
	}
	.faq-trigger[aria-expanded='true'] .faq-icon::after {
		transform: translate(-50%, -50%) rotate(0deg);
	}
	.faq-panel {
		overflow: hidden;
	}
	.faq-a {
		padding: 0 3rem 2rem 4rem;
		max-width: 46rem;
		line-height: 1.75;
		color: var(--mute);
	}
	@media (max-width: 640px) {
		.faq-a {
			padding: 0 0 1.75rem 4rem;
		}
	}

	/* ---------- Waitlist form ---------------------------------------------- */
	.hp {
		position: absolute !important;
		left: -9999px;
		width: 1px;
		height: 1px;
		overflow: hidden;
	}
	.field-label {
		display: block;
		font-size: 11px;
		font-weight: 500;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		color: rgba(246, 244, 239, 0.6);
	}
	.field-input {
		width: 100%;
		margin-top: 0.9rem;
		padding: 0.6rem 0 0.9rem;
		background: transparent;
		border: 0;
		border-bottom: 1px solid rgba(246, 244, 239, 0.25);
		color: var(--paper);
		font-size: 1.25rem;
		font-weight: 300;
		letter-spacing: -0.01em;
		border-radius: 0;
		transition: border-color 0.35s var(--ease);
	}
	.field-input::placeholder {
		color: rgba(246, 244, 239, 0.3);
	}
	.field-input:focus {
		outline: none;
		border-bottom-color: var(--teal);
	}
	.field-input[aria-invalid='true'] {
		border-bottom-color: #f2a7a0;
	}

	.choice {
		position: relative;
		display: flex;
		align-items: center;
		gap: 0.85rem;
		cursor: pointer;
		padding: 0.95rem 1.1rem;
		border: 1px solid rgba(246, 244, 239, 0.16);
		border-radius: 14px;
		font-size: 14px;
		color: rgba(246, 244, 239, 0.85);
		transition:
			border-color 0.3s var(--ease),
			background-color 0.3s var(--ease);
	}
	.choice:hover {
		border-color: rgba(246, 244, 239, 0.35);
	}
	.choice input {
		appearance: none;
		-webkit-appearance: none;
		flex: none;
		width: 16px;
		height: 16px;
		border-radius: 999px;
		border: 1px solid rgba(246, 244, 239, 0.4);
		display: grid;
		place-items: center;
	}
	.choice input::after {
		content: '';
		width: 8px;
		height: 8px;
		border-radius: 999px;
		background: var(--teal);
		transform: scale(0);
		transition: transform 0.3s var(--ease);
	}
	.choice input:checked::after {
		transform: scale(1);
	}
	.choice:has(input:checked) {
		border-color: rgba(246, 244, 239, 0.5);
		background: rgba(246, 244, 239, 0.04);
		color: var(--paper);
	}
	.choice input:focus-visible {
		outline: 2px solid var(--teal);
		outline-offset: 3px;
	}

	.consent {
		display: flex;
		gap: 0.9rem;
		align-items: flex-start;
		font-size: 13px;
		line-height: 1.6;
		color: rgba(246, 244, 239, 0.7);
		cursor: pointer;
	}
	.consent input {
		appearance: none;
		-webkit-appearance: none;
		flex: none;
		margin-top: 3px;
		width: 18px;
		height: 18px;
		border: 1px solid rgba(246, 244, 239, 0.45);
		border-radius: 5px;
		display: grid;
		place-items: center;
		cursor: pointer;
	}
	.consent input:checked {
		background: var(--paper);
		border-color: var(--paper);
	}
	.consent input:checked::after {
		content: '';
		width: 9px;
		height: 5px;
		border-left: 1.5px solid var(--ink);
		border-bottom: 1.5px solid var(--ink);
		transform: translateY(-1px) rotate(-45deg);
	}
	.consent input[aria-invalid='true'] {
		border-color: #f2a7a0;
	}

	.waitlist-status {
		min-height: 1.5em;
		max-width: 26rem;
		color: rgba(246, 244, 239, 0.75);
	}
	.waitlist-status.is-ok {
		color: var(--teal);
	}
	.waitlist-status.is-error {
		color: #f2a7a0;
	}

	/* ---------- Footer ------------------------------------------------------ */
	.footer-wordmark {
		font-weight: 500;
		letter-spacing: -0.065em;
		line-height: 0.78;
		font-size: clamp(5rem, 35vw, 35rem);
		overflow: hidden;
		color: var(--ink);
		padding-block: 2.5rem 1.25rem;
		margin-left: -0.04em;
	}

	/* ---------- Legal pages ------------------------------------------------- */
	.legal h2 {
		font-size: clamp(1.5rem, 2.4vw, 2rem);
		font-weight: 400;
		letter-spacing: -0.02em;
		margin-top: 3.5rem;
		scroll-margin-top: 96px;
	}
	.legal h2:first-child {
		margin-top: 0;
	}
	.legal h3 {
		font-size: 1.05rem;
		font-weight: 600;
		margin-top: 2rem;
	}
	.legal p,
	.legal li {
		color: #34455e;
		line-height: 1.8;
	}
	.legal p {
		margin-top: 1rem;
	}
	.legal ul {
		margin-top: 1rem;
		padding-left: 1.25rem;
		list-style: disc;
	}
	.legal ul li {
		margin-top: 0.5rem;
		padding-left: 0.25rem;
	}
	.legal ul li::marker {
		color: var(--teal);
	}
	.legal a {
		color: var(--ink);
		text-decoration: underline;
		text-underline-offset: 4px;
		text-decoration-thickness: 1px;
	}
	.legal a:hover {
		text-decoration-color: var(--teal);
	}
	.legal strong {
		color: var(--ink);
		font-weight: 600;
	}
	.toc a {
		display: flex;
		gap: 0.75rem;
		padding-block: 0.45rem;
		font-size: 13px;
		color: var(--mute);
		transition: color 0.3s;
	}
	.toc a:hover,
	.toc a.is-active {
		color: var(--ink);
	}
	.toc a span {
		font-variant-numeric: tabular-nums;
		min-width: 1.5rem;
	}

	/* ---------- Entrance states (only when JS + motion are allowed) -------- */
	@media (prefers-reduced-motion: no-preference) {
		.js-anim [data-reveal] {
			opacity: 0;
			transform: translateY(28px);
		}
		.js-anim .hero-line > span {
			transform: translateY(110%);
		}
		.js-anim .hero-fade {
			opacity: 0;
		}
		.js-anim .phone-wrap {
			opacity: 0;
		}
	}
} /* end @layer components */