:root {
	--vw-unit: 1vw;
	--vh-unit: 1vh;
	--base-font-size: min(max(var(--vw-unit) * 3, 1.3rem), 2.2rem);

	--bg: oat;
	--oat: #F9F6EE;
	--espresso: #362D29;
	--espresso-80: rgba(54,45,41,.8);
	--steel: #475467;
	--sage: #C9D8CB;
	--foam: #F7D1C5;

	--txt: var(--espresso);
	--muted: #6B6E75;

	--radius: 16px;
	--shadow: 0 10px 30px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.05);
	--grid: #EDEAE2;
}

html {
	box-sizing: border-box;
}
*, *::before, *::after {
	font-family: "Inter", "Segoe UI", Roboto, sans-serif;
	box-sizing: inherit;
}

/* per CSS quirk here: https://issues.chromium.org/issues/40888693 */
details > * {
	box-sizing: border-box;
}

html, body{
	height:100%
}
body {
	margin:0;
	background:var(--oat);
	color:var(--txt);
	font: 400 16px/1.6 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	text-rendering:optimizeLegibility;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}
.wrap{max-width:1120px;margin:0 auto;padding:56px 20px}
a{color:inherit;text-underline-offset:2px}
button{font:inherit;color:inherit}

/* subtle paper/menu grid background */
main::before{
	content:"";
	position:fixed;inset:0;
	background:
		linear-gradient(transparent 31px, var(--grid) 32px) 0 0/100% 32px,
		linear-gradient(90deg, transparent 31px, var(--grid) 32px) 0 0/32px 100%;
	opacity:.35;pointer-events:none;
	mask-image: linear-gradient(180deg, rgba(0,0,0,.2), rgba(0,0,0,.6) 30%, rgba(0,0,0,.2) 70%, rgba(0,0,0,.05));
}
@media (prefers-reduced-transparency: reduce){
	main::before{display:none}
}

.brand {
	background-position: 0;
	background-size: 23rem;
	background-repeat: no-repeat;
	background-image: url(../images/logo.svg);
	min-width: 23rem;
	min-height: 3.6rem;
	font-size: 0.1px;
	color: rgba(0,0,0,0);
}

/* ---------- header ---------- */
header{position:sticky;top:0;background:color-mix(in oklab,var(--oat) 92%, transparent);backdrop-filter:saturate(1.2) blur(6px);z-index:10}
.header-inner{display:flex;align-items:center;gap:20px;justify-content:space-between;padding:14px 20px;max-width:1120px;margin:0 auto}

nav a{padding:8px 10px}
nav a:hover{background:color-mix(in oklab,var(--txt) 8%, transparent)}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding-block:36px}
@media (max-width:920px){.hero{grid-template-columns:1fr;gap:28px}}
.prehead{font-weight:600;color:var(--muted);margin-bottom:8px}
h1{font-family:serif;font-weight:700;letter-spacing:.01em;margin:0 0 10px;font-size:clamp(25px,3.8vw,45px);line-height:1.08}
.subhead{color:var(--steel);margin:10px 0 24px}

/* morphable primary input */
.hero-cta{display:flex;flex-direction:column;gap:12px}
.mode-toggle{
	display:inline-flex;gap:6px;background:color-mix(in oklab,var(--txt) 8%, transparent);
	padding:6px;
	width:max-content;
}
.mode-toggle button{
	padding:10px 14px;border:0;background:transparent;cursor:pointer
}
.mode-toggle button[aria-pressed="true"]{background:var(--oat);box-shadow:var(--shadow)}

.input-row{
	display:flex;gap:10px;align-items:center;flex-wrap:wrap
}
.input{
	flex:1 1 420px;display:flex;align-items:center;gap:10px;background:var(--oat);
	border:1px solid color-mix(in oklab,var(--txt) 12%, transparent);
	padding:14px 16px;box-shadow:var(--shadow)
}
.input input{
	all:unset;flex:1;min-width:140px;font:500 16px/1 Inter, sans-serif;color:var(--txt)
}
.btn{
	border:0;border-radius:12px;background:var(--espresso);color:#fff;padding:14px 18px;cursor:pointer;font-weight:600;box-shadow:var(--shadow)
}
.btn.secondary{background:transparent;color:var(--espresso);border:1px solid color-mix(in oklab,var(--txt) 20%, transparent)}

.pill{
	display:inline-flex;align-items:center;gap:8px;border:1px dashed color-mix(in oklab,var(--txt) 30%, transparent);
	border-radius:999px;padding:8px 12px;font-size:14px;color:var(--steel)
}

/* ---------- sections ---------- */
.section{padding-block:64px;border-top:1px solid color-mix(in oklab,var(--txt) 10%, transparent)}
.how{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:920px){.how{grid-template-columns:1fr}}
.step{
	background:var(--oat);border:1px solid color-mix(in oklab,var(--txt) 12%, transparent);
	padding:18px;box-shadow:var(--shadow);display:flex;gap:12px
}
.step .ico{width:34px;height:34px;border:2px solid var(--espresso)}
.step h3{margin:0 0 6px 0;font:600 16px/1.3 Inter, sans-serif}
.step p{margin:0;color:var(--steel)}

.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:920px){.grid4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:540px){.grid4{grid-template-columns:1fr}}

.tile{
	border:1px solid color-mix(in oklab,var(--txt) 12%, transparent);
	padding:16px;background:var(--oat);box-shadow:var(--shadow)
}
.tile .mini{height:92px;border:1px dashed color-mix(in oklab,var(--txt) 20%, transparent);margin-bottom:10px}

.diff{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:920px){.diff{grid-template-columns:1fr}}
.card{border:1px solid color-mix(in oklab,var(--txt) 12%, transparent);padding:18px;background:var(--oat);box-shadow:var(--shadow)}
.card h3{margin:0 0 8px 0}

.pricing{display:flex;gap:20px;flex-wrap:wrap}
.price{
	min-width:260px;border:1px solid color-mix(in oklab,var(--txt) 12%, transparent);padding:20px;background:var(--oat);box-shadow:var(--shadow)
}
.price h3{margin:0 0 6px 0}
.price p{margin:0;color:var(--steel)}

footer{padding:40px 20px;color:var(--steel)}
.footer-grid{max-width:1120px;margin:0 auto;display:flex;gap:24px;flex-wrap:wrap;justify-content:space-between;align-items:center}