:root {
	--paper: #F6F5F0;
	--panel: #FFFFFF;
	--ink: #2B2F36;
	--ink-soft: #5C6470;
	--ink-muted: #8B9098;
	--pulse: #6E8CA0;
	--pulse-dark: #4E6B7E;
	--sage: #8FA888;
	--sand: #D9C08C;
	--sand-dark: #8A7548;
	--line: #DEDAD0;
	--radius: 12px;
	--space-1: 8px;
	--space-2: 16px;
	--space-3: 24px;
	--space-4: 32px;
	--space-6: 48px;
	--space-8: 64px;
}

* {
	box-sizing:border-box;
}

html {
	scroll-behavior:smooth;
}

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

body {
	margin:0;
	background:var(--paper);
	color:var(--ink);
	font-family:'IBM Plex Sans', sans-serif;
	font-size:16px;
	line-height:1.6;
}

h1,h2,h3 {
	font-family:'Space Grotesk', sans-serif;
	font-weight:500;
	margin:0;
	letter-spacing:-0.01em;
}

p{margin:0;}

a{color:inherit; text-decoration:none;}

.wrap{max-width:960px; margin:0 auto; padding:0 var(--space-3);}

.eyebrow{
	font-size:12px;
	text-transform:uppercase;
	letter-spacing:0.08em;
	color:var(--ink-muted);
	font-weight:500;
}

/* nav */
nav{
	display:flex; align-items:center; justify-content:space-between;
	padding:var(--space-2) 0;
	border-bottom:0.5px solid var(--line);
}
.logo{display:block;padding-top: 8px;}
.nav-links{display:flex; gap:var(--space-4); font-size:14px; color:var(--ink-soft);}
.nav-links a:hover{color:var(--ink);}

button, .btn {
	display: inline-block;
	font-family: 'IBM Plex Sans', sans-serif;
	font-size: 14px;
	font-weight: 500;
	padding: 10px 20px;
	border-radius: var(--radius);
	border: 0.5px solid transparent;
	cursor: pointer;
}

.btn:focus-visible{outline:2px solid var(--pulse-dark); outline-offset:2px;}
.btn-primary{background:var(--pulse); color:#fff;}
.btn-primary:hover{background:var(--pulse-dark);}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line);}
.btn-ghost:hover{border-color:var(--ink-muted);}

@media (max-width:640px){ .nav-links{display:none;} }


nav.topnav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 0;
	border-bottom: 0.5px solid var(--line);
	margin-bottom: 24px;
}

nav.topnav .logo {
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 600;
	font-size: 17px;
	display: flex;
	align-items: center;
}

nav.topnav a {
	color: var(--ink-soft);
	font-size: 14px;
	margin-left: 18px;
}


/* hero */
.hero{padding:var(--space-8) 0 var(--space-6); text-align:center;}
.hero h1{font-size:clamp(28px, 4vw, 40px); line-height:1.25; max-width:640px; margin:var(--space-2) auto 0;}
.hero p.sub{font-size:16px; color:var(--ink-soft); max-width:480px; margin:var(--space-3) auto var(--space-4);}
.hero-actions{display:flex; gap:var(--space-2); justify-content:center; align-items:center; flex-wrap:wrap;}
.hero-note{font-size:13px; color:var(--ink-muted); margin-top:var(--space-2);}

/* pulse strip — signature element */
.pulse-frame{margin-top:var(--space-8); padding:var(--space-4) var(--space-3) var(--space-3); background:var(--panel); border-radius:var(--radius); border:0.5px solid var(--line);}
.pulse{display:flex; justify-content:space-between; align-items:flex-end; gap:6px;}
.pulse-day{display:flex; flex-direction:column; align-items:center; gap:8px; flex:1;}
.beats{display:flex; flex-direction:column-reverse; align-items:center; gap:4px; min-height:78px; justify-content:flex-start;}
.beat{border-radius:50%; flex-shrink:0;}
.beat.b-full{width:10px; height:10px; background:var(--pulse);}
.beat.b-soft{width:9px; height:9px; background:var(--pulse); opacity:0.55;}
.beat.b-pm{width:9px; height:9px; background:var(--ink-soft);}
.beat.b-faint{width:6px; height:6px; background:var(--line);}
.beat.b-supper{width:15px; height:15px; background:var(--sage);}
.day-label{font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-muted);}
.pulse-caption{text-align:center; font-size:13px; color:var(--ink-soft); margin-top:var(--space-3);}

section{padding:var(--space-8) 0; border-top:0.5px solid var(--line);}
.section-head{text-align:center; max-width:480px; margin:0 auto var(--space-6);}
.section-head h2{font-size:24px; margin-top:var(--space-1);}

/* how it works */
.steps{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--space-4);}
.step .num{font-family:'Space Grotesk', sans-serif; font-size:13px; color:var(--pulse-dark); font-weight:600;}
.step h3{font-size:16px; margin:var(--space-1) 0 var(--space-1);}
.step p{font-size:14px; color:var(--ink-soft);}
@media (max-width:640px){ .steps{grid-template-columns:1fr; gap:var(--space-4);} }

/* features */
.features{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--space-3);}
.feature{background:var(--panel); border:0.5px solid var(--line); border-radius:var(--radius); padding:var(--space-3);}
.feature h3{font-size:15px; margin:0 0 4px;}
.feature p{font-size:13px; color:var(--ink-soft);}
@media (max-width:640px){ .features{grid-template-columns:1fr;} }

/* pricing */
.price-cards{display:flex; justify-content:center; align-items:stretch; gap:var(--space-3); flex-wrap:wrap;}
.price-card{position:relative; width:100%; max-width:300px; margin:0; background:var(--panel); border:0.5px solid var(--line); border-radius:var(--radius); padding:var(--space-4); text-align:center; display:flex; flex-direction:column;}
.price-card.is-featured{border-color:var(--pulse); box-shadow:0 0 0 1px var(--pulse);}
.tier-badge{align-self:center; display:inline-block; font-size:11px; font-weight:500; text-transform:uppercase; letter-spacing:0.06em; padding:4px 12px; border-radius:20px; margin-bottom:var(--space-2);}
.tier-badge-basic{background:#EDEBE3; color:var(--ink-soft);}
.tier-badge-premium{background:var(--pulse); color:#fff;}
.price-figure{font-family:'Space Grotesk', sans-serif; font-size:36px; font-weight:600;}
.price-figure span{font-family:'IBM Plex Sans', sans-serif; font-size:14px; color:var(--ink-muted); font-weight:400;}
.price-sub{font-size:12px; color:var(--ink-muted); margin:4px 0 var(--space-3);}
.price-list{flex:1; list-style:none; margin:0 0 var(--space-3); padding:0; text-align:left; font-size:13px; color:var(--ink-soft); display:flex; flex-direction:column; gap:6px;}
.price-list li{display:flex; gap:8px;}
.price-list li::before{content:"—"; color:var(--pulse-dark);}
.approval-note{display:flex; align-items:flex-start; gap:8px; margin-top:var(--space-2); padding:10px 12px; background:#F4EDDA; border-radius:var(--radius); text-align:left;}
.approval-note p{font-size:12px; color:var(--sand-dark);}

/* contact */
.contact-form{max-width:400px; margin:0 auto; display:flex; flex-direction:column; gap:12px;}

input, select, textarea {
	width: 100%;
	font-family: 'IBM Plex Sans', sans-serif;
	font-size: 14px;
	padding: 10px 14px;
	border-radius: var(--radius);
	border: 0.5px solid var(--line);
	background: var(--panel);
	color: var(--ink);
}

input:focus-visible, textarea:focus-visible{outline:2px solid var(--pulse-dark); outline-offset:1px;}
textarea{resize:vertical;}
.contact-alt{text-align:center; font-size:13px; color:var(--ink-muted); margin-top:var(--space-3);}

footer{padding:var(--space-4) 0; text-align:center; font-size:12px; color:var(--ink-muted);}


/*end home css*/


.card {
	background: var(--panel);
	border: 0.5px solid var(--line);
	border-radius: var(--radius);
	padding: 24px;
	margin: 24px 0;
}

.auth-card {
	max-width: 360px;
	margin: 60px auto;
}

label {
	display: block;
	font-size: 13px;
	color: var(--ink-soft);
	margin-bottom: 6px;
}

.error {
	background: #FBEAEA;
	color: #8A3A3A;
	border-radius: var(--radius);
	padding: 10px 14px;
	font-size: 13px;
	margin-bottom: 16px;
}

.notice {
	background: #F4EDDA;
	color: var(--sand-dark);
	border-radius: var(--radius);
	padding: 10px 14px;
	font-size: 13px;
	margin-bottom: 16px;
}

table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

th, td {
	text-align: left;
	padding: 8px 6px;
	border-bottom: 0.5px solid var(--line);
}

th {
	color: var(--ink-soft);
	font-weight: 500;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.badge {
	display: inline-block;
	font-size: 11px;
	padding: 2px 8px;
	border-radius: 20px;
}

.badge-active {
	background: #E1F0E5;
	color: #3B6A4A;
}

.badge-pending {
	background: #F4EDDA;
	color: var(--sand-dark);
}