:root {
	--bg: #f4f6f8;
	--card: #ffffff;
	--lightgrey: #a6b4c2;
	--grey: #454f59;
	--limegreen: #5ea85e;
	--line: #e5e7eb;
	--darkgrey: #262c33;
	--mid: #d9d9d9;
	--ink: #29323b;
	--muted: #66717c;
	--accent: #a42431;
	--sage: #6b8074;
	--white: #ffffff;
	--amber: #d39b3b;
	--blue: #5e7690;
	--slate: var(--grey);
	--modal-speed: 150ms;
}

* {
	box-sizing: border-box;
}

html {
	/* scroll-padding-top:	90px */
}

html.public-home {
	--ease: cubic-bezier(.22,1,.36,1);
}

body {
	margin: 0;
	font:	normal 1rem "Titillium Web", -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	line-height: 1.2rem;
	background: var(--bg);
	color: var(--grey);
	-webkit-font-smoothing: antialiased
}

a, p, h1, h2, h3, h4, h5, h6, input {
	font-family: "Titillium Web", -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	font-weight: normal;
	margin-block-start: 0;
    margin-block-end: 0;
	margin: 0px;
}

.add-shadow {
	box-shadow: 0px 0px 11px 20px var(--white);
}

.txtbtn {
	font-weight: 600;
	margin: 0px;
	background: none;
	border: none;
	color: var(--grey);
	text-decoration: none;
	cursor: pointer;
}
.txtbtn:hover {
	text-decoration: none;
}

.btn {
	background-color: var(--grey);
	border: none;
	color: var(--white);
	font: inherit;
	border-radius: 7px;
	margin: 0 10px;
	padding: 0 10px;
	text-align: center;
	height: 2.5em;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bg-blue {	background-color: var(--accent);				}

/* colours */
.black											{ color: var(--darkgrey)		}
.lgrey											{ color: var(--mid)		}
.grey											{ color: var(--grey)	}
.dgrey											{ color: var(--muted)		}
.lorange										{ color: color-mix(in srgb, var(--amber) 75%, var(--white))	}
.dorange										{ color: var(--amber)	}
.lgreen 										{ color: var(--limegreen)	}
.dgreen 										{ color: color-mix(in srgb, var(--limegreen) 45%, var(--ink))	}
.red											{ color: var(--accent)	}
.blue											{ color: var(--blue)	}
.ltblue											{ color: var(--blue)	}
.white											{ color: var(--white)	}

p {	font-size: 1rem;						}
h1 {	font-size: 2rem;						}
h2 {	font-size: 1.75rem;						}
h3 {	font-size: 1.5rem;						}
h4 {	font-size: 1.25rem;						}
h5 {	font-size: 1.1rem;						}
h6 {	font-size: 1rem;						}

.bold 											{	font-weight: 600 !important	}

.opacity-10pc 									{ 	opacity: 0.1;					}
.opacity-20pc 									{ 	opacity: 0.2;					}
.opacity-30pc 									{ 	opacity: 0.3;					}
.opacity-40pc 									{ 	opacity: 0.4;					}
.opacity-50pc 									{ 	opacity: 0.5;					}
.opacity-60pc 									{ 	opacity: 0.6;					}
.opacity-70pc 									{ 	opacity: 0.7;					}
.opacity-80pc 									{ 	opacity: 0.8;					}
.opacity-90pc 									{ 	opacity: 0.9;					}

.r {	font-weight: 600						}
.italic {	font-style: oblique;}
.topbar {
	height: 36px;
	width: 100%;
	background: var(--white);
	color: var(--darkgrey);
	display: flex;
	align-items: center;
	justify-content: center;
	position: sticky;
	top: 0;
	z-index: 1250;
}


.titlebar {
	width: 100%;
	background: var(--mid);
	border-bottom: 1px solid var(--mid);
	height: 48px;
	top: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	position: sticky;
	z-index: 1250;
	box-shadow: 0px 0px 11px 10px rgba(0,0,0,0.2);
}

.error, .success, .notification, .notice, .tip {
	padding: 0.38em 0 0.38em 0;
	width: 100%;
	max-width: 1280px;
	margin: 0.5em auto 0.5em auto;
	border-radius: 5px;
	text-align: center;
	font: 1em "Titillium Web", Arial, Helvetica, sans-serif;
}
.error { background: color-mix(in srgb, var(--accent) 12%, var(--white)); }
.success { background: var(--bg); }
.wrap, #timeline {
	width: 100%;
	box-sizing: border-box;
}

.day {
	position: relative;
	display: flow-root;
	box-sizing: border-box;
}

.day-date {
	width: 100%;
	height: 44px;
	font-size: 1em;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	border-bottom: 1px solid var(--darkgrey);
 }
.sticky {
	position: sticky;
}

.day-title {
	height: 50px;
	top: 90px;
	z-index: 1000;
	width: 96%;
	margin: 0 auto;
	display: flex;
	align-items: center;
	border-bottom: 2px solid var(--darkgrey);
	background: var(--bg, var(--white));
	color: var(--darkgrey);
	box-sizing: border-box;
	padding-top: 6px;
}

.day-title .left, .day-title .right {
	width: 8%;
	height: 40px;
	display: flex;
	align-items: center;
	box-sizing: border-box;
}

.day-title .middle {
	width: 84%;
	height: 40px;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	justify-content: center;
	font-size: 1rem;
	font-weight: 600;
	text-align: center;

	color: var(--darkgrey);
}

.day-title .right {
	display: flex;
}

#loading, #end {
	text-align: center;
	padding: 16px;
	box-sizing: border-box;
}

.list {
	width: 100%;
	margin: 0 auto !important;
	overflow: hidden;
	box-sizing: border-box;
}

.row {
	width: 100%;
	margin: auto;
	height: 36px;
	border-top: 1px solid var(--line);
}

.timeline-row {
			display: grid;
			grid-template-columns: 32px 60px minmax(0, 1fr) 80px;
			align-items: center;
			width: 100%;
			min-height: 44px;
			box-sizing: border-box;
		}

		.timeline-row > .timeline-icon {
			width: 32px;
		}
		.timeline-row > .timeline-time {
			width: 48px;
		}
		.timeline-row > .timeline-details,
		.timeline-row > .timeline-value {
			width: auto;
			height: 32px;
			vertical-align: middle;
			min-width: 0;
			float: none;
			margin: 0;
			box-sizing: border-box;
		}

		.timeline-icon {
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.timeline-icon img {
			width: 32px;
			height: 32px;
		}

		.timeline-time {
			font-weight:600;
			white-space: nowrap;
			text-align: center;
		}

		.timeline-details {
			font-size: 1rem;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.timeline-value {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			padding-right: 6px;
			white-space: nowrap;
		}

		.timeline-item {
			float: left;
			width: 100%;
		}

		.timeline-row {
			cursor: pointer;
			user-select: none;
		}

		.timeline-row.is-open {
			background: rgba(0, 0, 0, 0.035);
		}

		.timeline-expand {
			float: left;
			width: 100%;
			box-sizing: border-box;
			display: none;
			padding: 4px 0px 14px 0px;
		}

		.timeline-edit-form {
			float: left;
			width: 100%;
		}

		.timeline-edit-grid .input-group {
			font-size: 0.8em;
			font-weight: 600;
		}

		.timeline-edit-grid .textinput, .timeline-notes-label .textinput {
			padding:					6px;
			box-sizing:					border-box;
			font-size:					1em;
		}

		.timeline-notes-label {
			float:						left;
			width:						100%;
			margin-top:					5px;
			font-size:					0.8em;
			font-weight:				600;
		}

		.timeline-notes {
			resize: vertical;
			min-height: 58px;
		}

		.timeline-edit-actions {
			float: left;
			width: 100%;
			margin-top: 10px;
		}

		.btn-cancel-timeline-edit,
		.btn-delete-timeline-edit,
		.btn-copy-timeline-edit,
		.btn-save-timeline-edit {
			border: 0;
			border-radius: 10px;
			padding: 9px 14px;
			cursor: pointer;
			font-family: inherit;
		}

		.btn-cancel-timeline-edit {
			background: var(--bg);
			color: var(--darkgrey);
		}

		.btn-delete-timeline-edit {
			float: left;
			background: var(--bg);
			color: var(--accent);
		}

		.btn-save-timeline-edit {
			float: right;
		}

		.btn-copy-timeline-edit,
		.btn-save-timeline-edit {
			background: var(--darkgrey);
			color: var(--white)
		}

		.btn-copy-timeline-edit:disabled,
		.btn-save-timeline-edit:disabled {
			opacity: 0.65;
			cursor: wait;
		}

		.timeline-scale-wrap {
			display: flex;
			align-items: center;
			height: 42px;
		}

		.timeline-scale-img {
			display: block;
			width: auto;
			cursor: pointer;
		}

		.timeline-clear-end-time {
			margin-top: 4px;
			font-size: 11px;
			color: var(--muted);
			text-decoration: underline;
			cursor: pointer;
			width: fit-content;
		}

		.timeline-end-time-wrap.is-empty {
			opacity: 0.82;
		}

		.severityIcon {
			display: block;
			object-fit: contain;
			margin-left: auto;
		}


.icon {	float:left; width: 8%; height: 36px; display:flex; align-items:center; justify-content:center; float: left;											}
.time {	float:left; width: 12%; height: 36px; font-size: 0.9em; font-weight:600; display: flex; align-items: center; justify-content: center; float: left;	}
.details {	width: 60%; float: left; }
.title {	height: 36px; font-size: 0.9em; display: flex; align-items: center; justify-content: flex-start; float: left;				}
.value {	width: 20%; float: left; height: 36px; font-size: 0.9em; display: flex; align-items: center; justify-content: flex-end; float: right;				}
.notes {	width: 100%; float: left; color:var(--grey); font-size:12px;																						}

.severityWrap {
	width: 90%;
	height: 10px;
	background: var(--bg);
	border-radius: 999px;
	overflow: hidden;
}
.severityBar {
	height: 100%;
	background: var(--darkgrey);
	width: 0%;
}

.summary{
	margin-top: 10px;
	width: 90%;
	margin: 12px auto 0 auto;
	background: var(--darkgrey);
	color: var(--white);
	border-radius: 14px;
	padding: 6px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	text-align: center;
	font-weight: 900;
}

.summary .lbl {
	display: block;
	font-weight: 600;
	opacity: .85;
	font-size: 12px;
	margin-top: 3px;
}

/* Give the page space so content isn't covered by bottom nav */
.wrap {
	padding-bottom: 140px; /* room for nav + tray */
}

.bottomNav{
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	height: 80px;
	display: flex;
	align-items: center;
	padding-bottom: env(safe-area-inset-bottom);
	background: linear-gradient(to top, var(--white), var(--white), var(--white), transparent);
	opacity: 90%;
	z-index: 5000;
	display: flex;
	align-items: center;
}

.navItem{
	text-decoration: none;
	color: var(--grey);
	font-weight: 700;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	font-size: 18px;
	user-select: none;
}
.navItem span{
	font-size: 11px;
	font-weight: 700;
	color: var(--muted);

}
.navItem.isActive span{
	color: var(--grey);
}

/* Center + button */
.plusBtn{
	width: 58px;
	height: 58px;
	background-color: transparent;
	background-image: url('/images/icon-menu-add.svg');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	border-radius: 18px;
	border: none;
	cursor: pointer;
	margin: 0 auto;
	float: center;
	-webkit-tap-highlight-color: transparent;
}

.textinput {
	height: 36px;
	font-family: inherit;
	box-sizing: border-box;
	font-size: 1.00em;
	margin: 5px 0;
	border: 1px solid var(--mid);
	padding: 0 5px;
	background: var(--white);
	color: var(--grey);
	vertical-align: middle;
	transition: all 1s ease;
	border-radius: 7px;
}

.textinput:focus {
	outline: none;
	border-color: color-mix(in srgb, var(--muted) 79%, var(--white));
	background-color: var(--bg);
	transition: all 1s ease;
}

/* Backdrop */
.quickAddBackdrop{
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.22);
	opacity: 0;
	pointer-events: none;
	transition: opacity 160ms ease;
	z-index: 1100;
}
.quickAddBackdrop.isOpen{
	opacity: 1;
	pointer-events: auto;
}





/* Quick Add Tray */
.quickAddTray{
	width: 64px;
	position: fixed;
	right: 12px;
	bottom: 64px;
	border-radius: 18px;
	padding: 12px;
	opacity: 0;
	transform: translateY(10px);
	pointer-events: none;
	transition: opacity 160ms ease, transform 160ms ease;
	z-index: 1150;
}
.quickAddTray.isOpen{
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.qaAction{
	width: 64px;
	height: 64px;
	border: none;
	border-radius: 7px;
	padding: 5px;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: 10px;
	user-select: none;
	font-size: 0.5rem;
}
.qaAction span{
	font-size: 11px;
	font-weight: 800;
	color: var(--muted);
}
.qaAction:hover{
	background: var(--bg);
}






.mutedCenter{
	text-align:center;
	color:var(--grey);
	padding:10px 8px;
}

.error{
	background:color-mix(in srgb, var(--accent) 12%, var(--white));
	border:1px solid color-mix(in srgb, var(--accent) 30%, var(--white));
	color:color-mix(in srgb, var(--accent) 80%, var(--ink));
	padding:10px 12px;
	border-radius:12px;
}

/* Loader */
#loading{
	text-align:center;
	color:var(--muted);
	padding:16px;
	display:none;
}

/* Simple floating "to top" (nice on mobile) */
.fab{
	position:fixed;
	right:14px;
	bottom:14px;
	width:52px;
	height:52px;
	border-radius:18px;
	background:var(--darkgrey);
	color:var(--white);
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:22px;
	box-shadow:0 10px 20px rgba(0,0,0,.18);
	cursor:pointer;
	user-select:none;
	opacity:.92;
}
.fab:hover{ opacity:1; }

.nm {				margin:			0 !important			}
.np {				padding:		0 !important			}

.truncate {
	 white-space: nowrap;
	 overflow: hidden;
	 text-overflow: ellipsis;
}

.h-16px {	height: 16px	!important				}
.h-24px {	height: 24px	!important				}
.h-32px {	height: 32px	!important				}
.h-48px {	height: 48px	!important				}
.h-64px {	height: 64px	!important				}
.h-128px {	height: 128px	!important				}

.img-16px {	width: 16px;	height: 16px;			}
.img-24px {	width: 24px;	height: 24px;			}
.img-32px {	width: 32px;	height: 32px;			}
.img-48px {	width: 48px;	height: 48px;			}
.img-64px {	width: 64px;	height: 64px;			}

.rounded {	border-radius: 7px;						}
.round {	border-radius: 700px;					}

.align-l {	text-align: left !important				}
.align-r {	text-align: right !important			}
.align-c {	text-align: center !important			}
.align-t {	vertical-align: top !important			}
.align-b {	vertical-align: bottom !important		}
.align-m {	vertical-align: middle !important		}

.justify {	text-align: justify;								}

.flex {
	display: flex;
	justify-content: center;
	align-items: center;
}

/* Left + vertical center */
.flex-l {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

/* Right + vertical center */
.flex-r {
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

/* Vertical center only */
.flex-v {
	display: flex;
	align-items: center;
}

/* Horizontal center only */
.flex-h {
	display: flex;
	justify-content: center;
}


.h-01vh {	height: 1vh;						}
.h-02vh {	height: 2vh;						}
.h-03vh {	height: 3vh;						}
.h-04vh {	height: 4vh;						}
.h-05vh {	height: 5vh;						}
.h-06vh {	height: 6vh;						}
.h-07vh {	height: 7vh;						}
.h-08vh {	height: 8vh;						}
.h-09vh {	height: 9vh;						}
.h-10vh {	height: 10vh;						}
.h-11vh {	height: 11vh;						}
.h-12vh {	height: 12vh;						}
.h-13vh {	height: 13vh;						}
.h-14vh {	height: 14vh;						}
.h-15vh {	height: 15vh;						}
.h-16vh {	height: 16vh;						}
.h-17vh {	height: 17vh;						}
.h-18vh {	height: 18vh;						}
.h-19vh {	height: 19vh;						}
.h-20vh {	height: 20vh;						}
.h-21vh {	height: 21vh;						}
.h-22vh {	height: 22vh;						}
.h-23vh {	height: 23vh;						}
.h-24vh {	height: 24vh;						}
.h-25vh {	height: 25vh;						}
.h-26vh {	height: 26vh;						}
.h-27vh {	height: 27vh;						}
.h-28vh {	height: 28vh;						}
.h-29vh {	height: 29vh;						}
.h-30vh {	height: 30vh;						}
.h-31vh {	height: 31vh;						}
.h-32vh {	height: 32vh;						}
.h-33vh {	height: 33vh;						}
.h-34vh {	height: 34vh;						}
.h-35vh {	height: 35vh;						}
.h-36vh {	height: 36vh;						}
.h-37vh {	height: 37vh;						}
.h-38vh {	height: 38vh;						}
.h-39vh {	height: 39vh;						}
.h-40vh {	height: 40vh;						}
.h-41vh {	height: 41vh;						}
.h-42vh {	height: 42vh;						}
.h-43vh {	height: 43vh;						}
.h-44vh {	height: 44vh;						}
.h-45vh {	height: 45vh;						}
.h-46vh {	height: 46vh;						}
.h-47vh {	height: 47vh;						}
.h-48vh {	height: 48vh;						}
.h-49vh {	height: 49vh;						}
.h-50vh {	height: 50vh;						}
.h-51vh {	height: 51vh;						}
.h-52vh {	height: 52vh;						}
.h-53vh {	height: 53vh;						}
.h-54vh {	height: 54vh;						}
.h-55vh {	height: 55vh;						}
.h-56vh {	height: 56vh;						}
.h-57vh {	height: 57vh;						}
.h-58vh {	height: 58vh;						}
.h-59vh {	height: 59vh;						}
.h-60vh {	height: 60vh;						}
.h-61vh {	height: 61vh;						}
.h-62vh {	height: 62vh;						}
.h-63vh {	height: 63vh;						}
.h-64vh {	height: 64vh;						}
.h-65vh {	height: 65vh;						}
.h-66vh {	height: 66vh;						}
.h-67vh {	height: 67vh;						}
.h-68vh {	height: 68vh;						}
.h-69vh {	height: 69vh;						}
.h-70vh {	height: 70vh;						}
.h-71vh {	height: 71vh;						}
.h-72vh {	height: 72vh;						}
.h-73vh {	height: 73vh;						}
.h-74vh {	height: 74vh;						}
.h-75vh {	height: 75vh;						}
.h-76vh {	height: 76vh;						}
.h-77vh {	height: 77vh;						}
.h-78vh {	height: 78vh;						}
.h-79vh {	height: 79vh;						}
.h-80vh {	height: 80vh;						}
.h-81vh {	height: 81vh;						}
.h-82vh {	height: 82vh;						}
.h-83vh {	height: 83vh;						}
.h-84vh {	height: 84vh;						}
.h-85vh {	height: 85vh;						}
.h-86vh {	height: 86vh;						}
.h-87vh {	height: 87vh;						}
.h-88vh {	height: 88vh;						}
.h-89vh {	height: 89vh;						}
.h-90vh {	height: 90vh;						}
.h-91vh {	height: 91vh;						}
.h-92vh {	height: 92vh;						}
.h-93vh {	height: 93vh;						}
.h-94vh {	height: 94vh;						}
.h-95vh {	height: 95vh;						}
.h-96vh {	height: 96vh;						}
.h-97vh {	height: 97vh;						}
.h-98vh {	height: 98vh;						}
.h-99vh {	height: 99vh;						}
.h-100vh {	height: 100vh; 						}

.w-01vw {	width: 1vw 							}
.w-02vw {	width: 2vw 							}
.w-03vw {	width: 3vw							}
.w-04vw {	width: 4vw							}
.w-05vw {	width: 5vw							}
.w-06vw {	width: 6vw							}
.w-07vw {	width: 7vw							}
.w-08vw {	width: 8vw							}
.w-09vw {	width: 9vw							}
.w-10vw {	width: 10vw							}
.w-11vw {	width: 11vw							}
.w-12vw {	width: 12vw							}
.w-13vw {	width: 13vw							}
.w-14vw {	width: 14vw							}
.w-15vw {	width: 15vw							}
.w-16vw {	width: 16vw							}
.w-17vw {	width: 17vw							}
.w-18vw {	width: 18vw							}
.w-19vw {	width: 19vw							}
.w-20vw {	width: 20vw							}
.w-21vw {	width: 21vw							}
.w-22vw {	width: 22vw							}
.w-23vw {	width: 23vw							}
.w-24vw {	width: 24vw							}
.w-25vw {	width: 25vw							}
.w-26vw {	width: 26vw							}
.w-27vw {	width: 27vw							}
.w-28vw {	width: 28vw							}
.w-29vw {	width: 29vw							}
.w-30vw {	width: 30vw							}
.w-31vw {	width: 31vw							}
.w-32vw {	width: 32vw							}
.w-33vw {	width: 33vw							}
.w-34vw {	width: 34vw							}
.w-35vw {	width: 35vw							}
.w-36vw {	width: 36vw							}
.w-37vw {	width: 37vw							}
.w-38vw {	width: 38vw							}
.w-39vw {	width: 39vw							}
.w-40vw {	width: 40vw							}
.w-41vw {	width: 41vw							}
.w-42vw {	width: 42vw							}
.w-43vw {	width: 43vw							}
.w-44vw {	width: 44vw							}
.w-45vw {	width: 45vw							}
.w-46vw {	width: 46vw							}
.w-47vw {	width: 47vw							}
.w-48vw {	width: 48vw							}
.w-49vw {	width: 49vw							}
.w-50vw {	width: 50vw							}
.w-51vw {	width: 51vw							}
.w-52vw {	width: 52vw							}
.w-53vw {	width: 53vw							}
.w-54vw {	width: 54vw							}
.w-55vw {	width: 55vw							}
.w-56vw {	width: 56vw							}
.w-57vw {	width: 57vw							}
.w-58vw {	width: 58vw							}
.w-59vw {	width: 59vw							}
.w-60vw {	width: 60vw							}
.w-61vw {	width: 61vw							}
.w-62vw {	width: 62vw							}
.w-63vw {	width: 63vw							}
.w-64vw {	width: 64vw							}
.w-65vw {	width: 65vw							}
.w-66vw {	width: 66vw							}
.w-67vw {	width: 67vw							}
.w-68vw {	width: 68vw							}
.w-69vw {	width: 69vw							}
.w-70vw {	width: 70vw							}
.w-71vw {	width: 71vw							}
.w-72vw {	width: 72vw							}
.w-73vw {	width: 73vw							}
.w-74vw {	width: 74vw							}
.w-75vw {	width: 75vw							}
.w-76vw {	width: 76vw							}
.w-77vw {	width: 77vw							}
.w-78vw {	width: 78vw							}
.w-79vw {	width: 79vw							}
.w-80vw {	width: 80vw							}
.w-81vw {	width: 81vw							}
.w-82vw {	width: 82vw							}
.w-83vw {	width: 83vw							}
.w-84vw {	width: 84vw							}
.w-85vw {	width: 85vw							}
.w-86vw {	width: 86vw							}
.w-87vw {	width: 87vw							}
.w-88vw {	width: 88vw							}
.w-89vw {	width: 89vw							}
.w-90vw {	width: 90vw							}
.w-91vw {	width: 91vw							}
.w-92vw {	width: 92vw							}
.w-93vw {	width: 93vw							}
.w-94vw {	width: 94vw							}
.w-95vw {	width: 95vw							}
.w-96vw {	width: 96vw							}
.w-97vw {	width: 97vw							}
.w-98vw {	width: 98vw							}
.w-99vw {	width: 99vw							}
.w-100vw {	width: 100vw 						}

.w-01pc {	width: 1% !important				}
.w-02pc {	width: 2% !important				}
.w-03pc {	width: 3% !important				}
.w-04pc {	width: 4% !important				}
.w-05pc {	width: 5% !important				}
.w-06pc {	width: 6% !important				}
.w-07pc {	width: 7% !important				}
.w-08pc {	width: 8% !important				}
.w-09pc {	width: 9% !important				}
.w-10pc {	width: 10% !important				}
.w-11pc {	width: 11% !important				}
.w-12pc {	width: 12% !important				}
.w-13pc {	width: 13% !important				}
.w-14pc {	width: 14% !important				}
.w-15pc {	width: 15% !important				}
.w-16pc {	width: 16% !important				}
.w-17pc {	width: 17% !important				}
.w-18pc {	width: 18% !important				}
.w-19pc {	width: 19% !important				}
.w-20pc {	width: 20% !important				}
.w-21pc {	width: 21% !important				}
.w-22pc {	width: 22% !important				}
.w-23pc {	width: 23% !important				}
.w-24pc {	width: 24% !important				}
.w-25pc {	width: 25% !important				}
.w-26pc {	width: 26% !important				}
.w-27pc {	width: 27% !important				}
.w-28pc {	width: 28% !important				}
.w-29pc {	width: 29% !important				}
.w-30pc {	width: 30% !important				}
.w-31pc {	width: 31% !important				}
.w-32pc {	width: 32% !important				}
.w-33pc {	width: 33% !important				}
.w-34pc {	width: 34% !important				}
.w-35pc {	width: 35% !important				}
.w-36pc {	width: 36% !important				}
.w-37pc {	width: 37% !important				}
.w-38pc {	width: 38% !important				}
.w-39pc {	width: 39% !important				}
.w-40pc {	width: 40% !important				}
.w-41pc {	width: 41% !important				}
.w-42pc {	width: 42% !important				}
.w-43pc {	width: 43% !important				}
.w-44pc {	width: 44% !important				}
.w-45pc {	width: 45% !important				}
.w-46pc {	width: 46% !important				}
.w-47pc {	width: 47% !important				}
.w-48pc {	width: 48% !important				}
.w-49pc {	width: 49% !important				}
.w-50pc {	width: 50% !important				}
.w-51pc {	width: 51% !important				}
.w-52pc {	width: 52% !important				}
.w-53pc {	width: 53% !important				}
.w-54pc {	width: 54% !important				}
.w-55pc {	width: 55% !important				}
.w-56pc {	width: 56% !important				}
.w-57pc {	width: 57% !important				}
.w-58pc {	width: 58% !important				}
.w-59pc {	width: 59% !important				}
.w-60pc {	width: 60% !important				}
.w-61pc {	width: 61% !important				}
.w-62pc {	width: 62% !important				}
.w-63pc {	width: 63% !important				}
.w-64pc {	width: 64% !important				}
.w-65pc {	width: 65% !important				}
.w-66pc {	width: 66% !important				}
.w-67pc {	width: 67% !important				}
.w-68pc {	width: 68% !important				}
.w-69pc {	width: 69% !important				}
.w-70pc {	width: 70% !important				}
.w-71pc {	width: 71% !important				}
.w-72pc {	width: 72% !important				}
.w-73pc {	width: 73% !important				}
.w-74pc {	width: 74% !important				}
.w-75pc {	width: 75% !important				}
.w-76pc {	width: 76% !important				}
.w-77pc {	width: 77% !important				}
.w-78pc {	width: 78% !important				}
.w-79pc {	width: 79% !important				}
.w-80pc {	width: 80% !important				}
.w-81pc {	width: 81% !important				}
.w-82pc {	width: 82% !important				}
.w-83pc {	width: 83% !important				}
.w-84pc {	width: 84% !important				}
.w-85pc {	width: 85% !important				}
.w-86pc {	width: 86% !important				}
.w-87pc {	width: 87% !important				}
.w-88pc {	width: 88% !important				}
.w-89pc {	width: 89% !important				}
.w-90pc {	width: 90% !important				}
.w-91pc {	width: 91% !important				}
.w-92pc {	width: 92% !important				}
.w-93pc {	width: 93% !important				}
.w-94pc {	width: 94% !important				}
.w-95pc {	width: 95% !important				}
.w-96pc {	width: 96% !important				}
.w-97pc {	width: 97% !important				}
.w-98pc {	width: 98% !important				}
.w-99pc {	width: 99% !important				}
.w-100pc {	width: 100% !important				}

.w-04px {	width: 4px							}
.w-08px {	width: 8px							}
.w-12px {	width: 12px							}
.w-16px {	width: 16px							}
.w-20px {	width: 20px							}
.w-24px {	width: 24px							}
.w-32px {	width: 32px							}
.w-48px {	width: 48px							}
.w-64px {	width: 64px							}
.w-96px {	width: 96px							}
.w-128px {	width: 128px						}
.w-256px {	width: 256px						}

.float-l {	float: left		!important			}
.float-r {	float: right	!important			}
.float-t {	float: top		!important			}
.float-b {	float: bottom	!important			}
.float-c {	margin-left: auto; margin-right: auto !important;	}

.lm-00px {	margin-left:								0px						}
.lm-04px {	margin-left:								4px						}
.lm-08px {	margin-left:								8px						}
.lm-12px {	margin-left:								12px					}
.lm-16px {	margin-left:								16px					}
.lm-24px {	margin-left:								24px					}
.lm-32px {	margin-left:								32px					}

.rm-00px {	margin-right:								0px						}
.rm-04px {	margin-right:								4px						}
.rm-06px {	margin-right:								6px						}
.rm-08px {	margin-right:								8px						}
.rm-12px {	margin-right:								12px					}
.rm-16px {	margin-right:								16px					}
.rm-24px {	margin-right:								24px					}
.rm-32px {	margin-right:								32px					}

.bm-00px {	margin-bottom:								0px !important			}
.bm-04px {	margin-bottom:								4px !important			}
.bm-08px {	margin-bottom:								8px !important			}
.bm-12px {	margin-bottom:								12px !important			}
.bm-16px {	margin-bottom:								16px !important			}
.bm-24px {	margin-bottom:								24px !important			}
.bm-32px {	margin-bottom:								32px !important			}

.tm-00px {	margin-top:								0px !important				}
.tm-04px {	margin-top:								4px !important				}
.tm-06px {	margin-top:								6px !important				}
.tm-08px {	margin-top:								8px !important				}
.tm-12px {	margin-top:								12px !important				}
.tm-16px {	margin-top:								16px !important				}
.tm-24px {	margin-top:								24px !important				}
.tm-32px {	margin-top:								32px !important				}
.tm-64px {	margin-top:								64px !important				}
.tm-128px {	margin-top:								128px !important				}


.m-00px {	margin: 0px								}
.m-04px {	margin: 4px								}
.m-08px {	margin: 8px								}
.m-12px {	margin: 12px							}
.m-16px {	margin: 16px							}
.m-24px {	margin: 24px							}
.m-32px {	margin: 32px							}

.p-0px {	padding: 0px;								}
.p-12px {	padding: 12px;								}
.p-16px {	padding: 16px;								}

.fs-070rem									{	font-size: 0.70rem;	line-height: 0.90rem;				}
.fs-080rem									{	font-size: 0.80rem;	line-height: 1.00rem;				}
.fs-090rem									{	font-size: 0.90rem;	line-height: 1.25rem;				}
.fs-100rem									{	font-size: 1.00rem;	line-height: 1.50rem;				}
.fs-125rem									{	font-size: 1.25rem;	line-height: 1.00rem;				}
.fs-150rem									{	font-size: 1.50rem;	line-height: 2.50rem;				}
.fs-200rem									{	font-size: 2.00rem;	line-height: 2.00rem;				}
.fs-250rem									{	font-size: 2.50rem;	line-height: 3.50rem;				}
.fs-300rem									{	font-size: 3.00rem;	line-height: 3.50rem;				}
.fs-350rem									{	font-size: 3.50rem;	line-height: 3.50rem;				}

.hidden {
	display: none;
}

.border-1px 								{	border: 1px solid var(--grey) !important				}
.border-2px 								{	border: 2px solid var(--grey) !important				}


dialog {
	position: fixed;
	top: 96px;
	inset: 0;
	border: 0;
	outline: 0;
	padding: 0;
	margin: 0;
	width: 100vw;
	max-width: 100vw;
	height: 100dvh;
	max-height: 100dvh;
	overflow: hidden;
	background: transparent;
	box-shadow: none;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--modal-speed) ease-in-out;
}

dialog:focus, dialog:focus-visible {
	outline: 0;
}

dialog::backdrop {
	background: rgba(0, 0, 0, 0.65);
	opacity: 0;
	transition: opacity var(--modal-speed) ease-in-out;
}

dialog.modal-open {
	opacity: 1;
	pointer-events: auto;
}

dialog.modal-open::backdrop {
	opacity: 1;
}



.modal-box {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	background: var(--bg);
	box-sizing: border-box;
	border: 0;
	outline: 0;
	box-shadow: none;
	opacity: 0;
	transition: opacity var(--modal-speed) ease-in-out;
}

dialog.modal-open .modal-box {
	opacity: 1;
}

.modal-close, .menu {
	position: fixed;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 64px;
	height: 64px;
	background-color: transparent;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 64px;
	user-select: none;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	-webkit-tap-highlight-color: transparent;
	z-index: 2000;
}

.modal-close {
	background-image: url('/images/icon-down.svg');
}

.menu {
	background-image: url('/images/icon-up.svg');
}


.modal-close:focus,
.modal-close:focus-visible {
	outline: 0;
	box-shadow: none;
}

.modal-content {
	flex: 1;
	overflow-y: auto;
}

html.modal-is-open, body.modal-is-open {
	touch-action: none;
}















































#quick-add-most-used {
	margin-top: 16px;
}

.qa-item {
	border-bottom: 1px solid var(--line);
}

.qa-row {
	cursor: pointer;
	grid-template-columns: 32px minmax(0, 1fr) 80px;
	column-gap: 8px;
}
.quick-add-content [data-action="meal-review"] {
	grid-template-columns: 32px minmax(0, 1fr);
	column-gap: 8px;
}

.qa-name {
	font-weight: 700;
	color: var(--darkgrey);
}

.qa-meta {
	margin-top: 3px;
	font-size: 0.82rem;
	color: var(--muted);
	text-transform: capitalize;
}

.qa-last {
	font-size: 0.85rem;
	color: var(--grey);
	white-space: nowrap;
	padding-top: 2px;
}

.qa-expand {
	width: 96%;
	margin: 0 2%;
	display: none;
}

.qa-notes {
	min-height: 70px;
	resize: vertical;
}

.qa-empty {
	padding: 32px;
	color: var(--muted);
	text-align: center;
}
/* Standardized list item renderer */
.off-list-item {
	float: left;
	width: 100%;
}

.off-list-row {
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.qa-scale-wrap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	vertical-align: middle;
}

.qa-scale-img {
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	-webkit-tap-highlight-color: transparent;
}



/* Quick Add shares the same controls in its modal and desktop panel. */
#modal .modal-content { padding-bottom: calc(76px + env(safe-area-inset-bottom)); touch-action: pan-y; }
.quick-add-content { display: flow-root; }
.quick-add-content [hidden] { display: none !important; }
.quick-add-content .qa-tabs { display: flex; clear: both; width: 100%; }
.quick-add-content .qa-tabs button { flex: 1; min-height: 44px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.quick-add-content .qa-tabs button[aria-selected="true"] { border-bottom-color: currentColor; font-weight: 600; }
.quick-add-content #quick-add-results, .quick-add-content #quick-add-most-used { clear: both; height: auto; margin-top: 0; display: flow-root; }
.quick-add-content .qa-expand { width: 100%; margin: 0; }
.quick-add-content .qa-edit-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.quick-add-content .qa-edit-grid .textinput, .quick-add-content .qa-notes { width: 100%; min-width: 0; }
.quick-add-content .qa-feedback { clear: both; font-size: .9em; }
.quick-add-content .qa-save, .quick-add-content .qa-scale-img { min-height: 44px; }
.quick-add-content .qa-scale-img { width: 44px; object-fit: contain; }
.quick-add-content .qa-row:focus-visible, .quick-add-content button:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
.quick-add-content .w-100vw { width: 100%; }
.quick-add-inline .day-title { display: none; }
.quick-add-inline .h-08vh { height: auto; padding-bottom: 16px; }
.quick-add-inline #quick-add-search { width: 100%; }
@media (max-width: 600px) {
	.quick-add-inline .qa-row { grid-template-columns: 32px minmax(0, 1fr) max-content; column-gap: 8px; row-gap: 2px; width: 100%; height: auto; padding: 8px 0; }
	.quick-add-inline .qa-row > .timeline-icon { grid-column: 1; grid-row: 1 / span 2; }
	.quick-add-inline .qa-row > .timeline-details { grid-column: 2; grid-row: 1; white-space: normal; overflow-wrap: anywhere; }
	.quick-add-inline .qa-row .title { height: 32px; vertical-align: middle; float: none; }
	.quick-add-inline .qa-row > .timeline-value { grid-column: 3; grid-row: 1 / span 2; padding-right: 0; }
	.quick-add-inline .qa-edit-grid, .quick-add-inline .qa-edit-grid:has(.qa-end-time) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.quick-add-content .qa-edit-grid:has(.qa-end-time) { grid-template-columns: minmax(0,1fr) minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr); }
@media (max-width: 400px) {
	.quick-add-content .qa-edit-grid:has(.qa-end-time) { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

.timeline-layout.grid {
	display: block;
}

@media (min-width: 1200px) {
	.timeline-page .timeline-layout {
		display: grid;
		grid-template-columns: 460px minmax(0, 1fr);
		gap: 24px;
		align-items: start;
		width: calc(100% - 48px);
		max-width: 1200px;
		margin: 24px auto;
	}
	.timeline-layout > .wrap {
		min-width: 0;
		grid-column: 2;
		grid-row: 1;
	}
	.timeline-layout .day {
		margin-bottom: 20px;
	}
	#quick-add-panel {
		grid-column: 1;
		grid-row: 1;
		position: sticky;
		top: 120px;
		max-height: calc(100dvh - 144px);
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-gutter: stable;
	}
	#quick-add-panel .modal-content {
		overflow: visible;
	}
	#quick-add-panel .day-title,
	.timeline-page .bottomNav {
		display: none;
	}
	#quick-add-panel .h-08vh {
		height: auto;
		margin-bottom: 12px;
	}
	#quick-add-panel #quick-add-search {
		width: 100%;
	}
	#quick-add-panel .qa-edit-grid:has(.qa-end-time) {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.timeline-edit-actions .btn-copy-timeline-edit {
    float: right;
    margin: 0 6px 6px;
}
.timeline-edit-actions .btn-copy-timeline-edit[hidden] { display: none; }

/* Page styles consolidated from active page stylesheets. */

/* Shared presentation components; pages retain only their visual variants. */
.text-kicker {
	color: color-mix(in srgb, var(--muted) 79%, var(--white));
	font-size: .8rem;
	font-weight: 600;
	margin-top: 6px;
	text-transform: uppercase;
}
.icon-tile {
	display: grid;
	width: 42px;
	height: 42px;
	place-items: center;
	border-radius: 12px;
}
.row-between {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}
.caption-row {
	display: flex;
	align-items: center;
	gap: 7px;
	padding-top: 15px;
	font-size: 8px;
}
.button-plain {
	width: 100%;
	min-height: 44px;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

/* Shared components. Pages compose these classes; only specialised displays need their own rules. */
.card {
	display:						flow-root;
	min-width:						0;
	margin:							12px auto 0;
	padding:						12px 16px;
	border:							1px solid var(--line);
	border-radius:					12px;
	background:						var(--card);
}
.card > .disclosure-toggle {
	cursor: pointer;
	font-size: 1.1rem;
	font-weight: 600;
}
.card.is-open > .disclosure-toggle {
	margin-bottom: 16px;
}
.card p + p {
	margin-top: 8px;
}
.card a {
	color: var(--grey);
	text-underline-offset: 4px;
}
.card :focus-visible {
	background-color: var(--white);
}

[data-choice-row] {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.card-transparent {
	display: flow-root;
	min-width: 0;
	margin: 10px 0;
	padding: 0px 16px;
	border: none;
	border-radius: 8px;
	background: transparent;
}

.inline-form {
	display: inline;
	margin-left: 8px;
}
.link-button {
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--grey);
	font: inherit;
	text-decoration: underline;
	cursor: pointer;
}
.tone-dark {
	--card: var(--grey);
	--line: color-mix(in srgb, var(--white) 14.117647%, transparent);
	color: var(--white);
}

/*
.card-fields {
	display: grid;
	gap: 12px;
}
.card-fields > *, .grid > * {
	min-width: 0;
}
*/
.field {
	display: grid;
	gap: 5px;
	font-weight: 600;
}
.field[hidden] {
	display: none;
}
input[type="range"] {
	width: 100%;
	min-height: 44px;
	margin: 0;
	accent-color: var(--grey);
	cursor: pointer;
}

/* Meal amounts keep their portion picker inside the editable field. */
.meal-amount-title {
  font-size: 0.9rem;
  max-width: 95%;
  line-height: 32px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.meal-amount-unit { min-height: 48px; display: flex; align-items: flex-start; align-items: center; gap: 8px; text-indent: 8px; }
.meal-amount-field { position: relative; width: 106px; max-width: 80%; }
#meal-log-form .meal-amount-field input {
	min-height: 48px;
	padding: 6px;
	margin: 0;
	border: 1px solid var(--lightgrey);
	border-radius: 9px;
	background: var(--card);
	color: var(--grey);
	font: inherit;
	font-size: 16px;
	font-variant-numeric: tabular-nums;
}
.meal-portion-trigger {
	position: absolute;
	top: 2px;
	right: 2px;
	bottom: 2px;
	width: 44px;
	padding: 0;
	display: grid;
	place-items: center;
	border-radius: 7px;
}
.meal-portion-trigger[hidden] { display: none; }
.meal-portion-trigger:hover { background: var(--bg); }
.meal-portion-trigger:disabled { opacity: .4; cursor: default; }
.meal-portion-dialog {
	inset: 0;
	width: calc(100% - 32px);
	max-width: 360px;
	height: fit-content;
	max-height: calc(100dvh - 32px);
	margin: auto;
	padding: 20px;
	overflow: auto;
	opacity: 1;
	pointer-events: auto;
	transition: none;
	color: var(--grey);
	box-shadow: 0 12px 36px color-mix(in srgb, var(--ink) 16.078431%, transparent);
}
.meal-portion-dialog:not([open]) { display: none; }
.meal-portion-dialog::backdrop { opacity: 1; background: color-mix(in srgb, var(--ink) 33.333333%, transparent); transition: none; }
.meal-portion-line { display: flex; align-items: center; gap: 16px; }
.meal-portion-track { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.meal-portion-track span { font-size: .75rem; }
#meal-portion-dialog input[type="range"] { min-width: 0; min-height: 44px; flex: 1; padding: 0; border: 0; background: transparent; }
.meal-portion-line output { white-space: nowrap; font-variant-numeric: tabular-nums; }
.meal-portion-dialog .meal-portion-shortcuts { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 16px; }
.meal-portion-shortcuts button { border: 1px solid var(--line); border-radius: 8px; background: var(--bg); text-align: center; }
html:has(.meal-portion-dialog[open]), body:has(.meal-portion-dialog[open]) { overflow: hidden; }
.search-results {
	max-height: 260px;
	overflow-y: auto;
	margin-top: 4px;
	border: 1px solid var(--line);
	border-radius: 7px;
	background: var(--card);
}
.search-results[hidden] {
	display: none;
}
.search-results > div + div {
	border-top: 1px solid var(--line);
}
.search-results button {
	display: block;
	width: 100%;
	min-height: 44px;
	padding: 10px 12px;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}
.search-results button:hover, .search-results button:focus-visible {
	background: var(--bg);
}
.card :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select, textarea),
.card-transparent :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select, textarea) {
	width: 100%;
	min-height: 48px;
	min-width: 0;
	margin: 0;
	padding: 6px;
	border: 1px solid var(--lightgrey);
	border-radius: 7px;
	background: var(--card);
	font: inherit;
	font-weight: normal;
	float: left;
}
.card :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select) {
	min-height: 48px;
}
.card textarea {
	min-height: 80px;
	resize: vertical;
}
.card-fields .btn {
	margin: 0;
	min-height: 48px;
	height: auto;
	padding: 10px 14px;
	cursor: pointer;
}
.grid {
	display: grid;
	gap: 16px;
}
.grid-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-5 {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}
.grid-auto {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
}
.grid > .card {
	margin: 0;
}
@media (min-width: 1200px) {
	.grid-desktop-2 {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
		align-items: start;
	}
	.grid-desktop-2 > .card {
		min-width: 0;
	}
}
.card-fields .card-fields {
	margin-top: 0;
}
.actions > .btn {
	flex: 1;
}
.span-2 {
	grid-column: span 2;
}
.span-all {
	grid-column: 1 / -1;
}
.stack {
	display: grid;
	gap: 16px;
}
.stack > .card {
	margin: 0;
}
.actions, .field-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 16px 0;
}
.field-row :is(input, select) {
	flex: 1;
	width: auto;
	min-width: min(100%, 180px);
}
.content-extra-narrow {
	width: calc(100% - 24px);
	max-width: 320px;
}
.content-narrow {
	width: calc(100% - 24px);
	max-width: 480px;
	margin: 32px auto;
}
.content-medium {
	width: calc(100% - 32px);
	max-width: 800px;
	margin: 32px auto;
}
.divided > div {
	padding: 20px 0;
}
.divided > div + section {
	border-top: 1px solid var(--line);
}
.divided > .list-row {
	padding: 0;
}
.list-row > form {
	margin: 0;
}
.list-button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 0;
}
.list-button > span {
	min-width: 0;
	overflow-wrap: anywhere;
}
.list-button > img {
	flex: 0 0 auto;
}
.list-button:disabled {
	opacity: .5;
	cursor: default;
}
.note, .feedback {
	margin: 12px 0;
	padding: 12px;
	border: 1px solid var(--line);
	border-radius: 7px;
	background: var(--bg);
}
.feedback.is-error {
	border-color: color-mix(in srgb, var(--accent) 30%, var(--white));
	background: var(--bg);
	color: color-mix(in srgb, var(--accent) 80%, var(--ink));
}
.feedback.is-success {
	border-color: color-mix(in srgb, var(--sage) 45%, var(--white));
	background: var(--bg);
}
.status-label {
	display: inline-flex;
	padding: 2px 8px;
	border: 1px solid;
	border-radius: 999px;
	font-size: .85rem;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
}
.status-label.is-success {
	border-color: color-mix(in srgb, var(--sage) 45%, var(--white));
	background: var(--bg);
	color: color-mix(in srgb, var(--limegreen) 45%, var(--ink));
}
.status-label.is-warning {
	border-color: color-mix(in srgb, var(--amber) 45%, var(--white));
	background: color-mix(in srgb, var(--amber) 15%, var(--white));
	color: color-mix(in srgb, var(--amber) 50%, var(--ink));
}
.status-label.is-error {
	border-color: color-mix(in srgb, var(--accent) 30%, var(--white));
	background: var(--bg);
	color: color-mix(in srgb, var(--accent) 80%, var(--ink));
}
.status-label.is-neutral {
	border-color: var(--mid);
	background: var(--bg);
	color: var(--grey);
}
.muted {
	color: var(--muted);
	font-size: .9rem;
}
.wrap-anywhere {
	overflow-wrap: anywhere;
}
.back-link {
	margin-bottom: 20px;
}
.stat strong, .stat span {
	display: block;
}
.stat strong {
	font-size: 1.5rem;
}
.card-link {
	display: flex;
	align-items: center;
	gap: 12px;
	color: inherit;
	text-decoration: none;
	transition: border-color 180ms ease;
}
.card-link:hover {
	border-color: color-mix(in srgb, var(--muted) 79%, var(--white));
}
.card.card-media {
	padding: 0;
	overflow: hidden;
}
.column {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}
.column > .btn:last-child {
	margin-top: auto;
}
@media (max-width: 680px) {
	.card {
		padding: 10px 20px;
	}
	.grid-2, .grid-3 {
		grid-template-columns: minmax(0, 1fr);
	}
	.grid-5 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.span-2 {
		grid-column: auto;
	}
	.field-row {
		align-items: stretch;
		flex-direction: column;
	}
	.field-row :is(input, select) {
		flex: none;
		width: 100%;
	}
}

/* Standard card 											*/

.card .btn {
    background-color: var(--grey);
    border: none;
    font-size: 1.1em;
    color: var(--white);
    font: inherit;
    border-radius: 7px;
    margin: 10px 0;
    padding: 6px;
    text-align: center;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease-in-out, transform 180ms ease;
}


/* Standard main 							*/
.main {
	width: min(1200px, calc(100% - 24px));
	margin: 12px auto 0;
	color: var(--ink);
}

.main a {
	color: --var(grey);
	text-underline-offset: 4px;
}

.main a:focus-visible {
	text-decoration: underline;
}

/* Account pages — consolidated page styles */
.accounts-background {
	padding: 0;
	margin: 0;
	min-height: 100vh;
	background-color: var(--white) /* whatever color the image fades into */
}

.accounts-background::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	background-image: url("/images/food/food-bg-2.png");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 0.2;
	pointer-events: none;
}

.accounts-background::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	background-image: url("/images/food/food-bg-4-seamless.png");
	background-size: 50%;
	background-repeat: repeat;
	opacity: 0.2;
	pointer-events: none;
}

.center-center			{
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.frosted 		{	
	backdrop-filter: blur(10px)  brightness(1.1);
	-webkit-backdrop-filter: blur(10px) brightness(1.1);
}

input[type="text"],
input[type="email"],
input[type="password"],
input select {
	width: 100%;
	font-family: inherit;
	font-size: 1.1em;
	padding: 6px;
	height: 48px;
	float: left;
	background-color: var(--white);
	border: 1px solid var(--line);
	border-radius: 8px;
	margin: 6px 0;
}

.outbox-message {
	border-top: 1px solid var(--line);
	padding: 18px 0;
}

/* Dashboard */
.dashboard-shell {
	min-height: 100vh;
	background: linear-gradient(160deg, var(--bg) 0%, var(--bg) 52%, var(--bg) 100%);
}

.dashboard-shell .app-topbar {
	height: 50px;
	padding-right: max(24px, calc((100vw - 1200px) / 2));
	padding-left: max(24px, calc((100vw - 1200px) / 2));
	background: var(--white);
	border-bottom: 1px solid var(--lightgrey);
}

.dashboard-shell .titlebar {
	display: none;
}

.dashboard-icon {
	display: inline-block;
	width: 32px;
	height: 32px;
	flex: 0 0 auto;
}

.dashboard-hero {
	position: relative;
	align-items: center;
	padding: 12px;
	overflow: hidden;
	color: var(--white);
	animation: dashboard-enter 520ms cubic-bezier(.22,1,.36,1) both;
}

.dashboard-hero::after {
	position: absolute;
	right: 13%;
	bottom: -210px;
	width: 380px;
	height: 380px;
	border: 1px solid color-mix(in srgb, var(--white) 7.058824%, transparent);
	border-radius: 50%;
	box-shadow: 0 0 0 34px color-mix(in srgb, var(--white) 3.137255%, transparent), 0 0 0 70px color-mix(in srgb, var(--white) 1.960784%, transparent);
	content: "";
	pointer-events: none;
}

.dashboard-hero-copy,
.dashboard-week-summary {
	position: relative;
	z-index: 1;
}

.dashboard-eyebrow {
	color: var(--mid);
	line-height: 1.4;
}

.dashboard-eyebrow-dark {
	color: color-mix(in srgb, var(--muted) 79%, var(--white));
}

.dashboard-hero-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 22px;
	margin-top: 28px;
}

.dashboard-button {
	display: inline-flex;
	min-height: 48px;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 0 18px;
	border-radius: 10px;
	font-size: .94rem;
	font-weight: 650;
	text-decoration: none;
	transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.dashboard-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px #0002;
}

.dashboard-button-light {
	background: var(--white);
	color: var(--ink) !important;
}

.dashboard-button-light .dashboard-icon {
	width: 18px;
	height: 18px;
}

.dashboard-text-link {
	color: var(--white) !important;
	font-size: .94rem;
	font-weight: 550;
	text-decoration-color: color-mix(in srgb, var(--white) 40%, transparent);
}

.dashboard-week-summary {
	backdrop-filter: blur(8px);
}

.dashboard-week-summary p {
	margin-top: 17px;
	color: var(--mid);
	font-size: .82rem;
}

.dashboard-week-summary strong,
.dashboard-week-summary > span:last-child {
	display: block;
}

.dashboard-week-summary strong {
	margin-top: 4px;
	font-size: 1.35rem;
	font-weight: 620;
}

.dashboard-week-summary > span:last-child {
	margin-top: 7px;
	color: var(--mid);
	font-size: .76rem;
}

.dashboard-week-icon {
	border: 1px solid color-mix(in srgb, var(--white) 13.333333%, transparent);
	background: color-mix(in srgb, var(--white) 7.058824%, transparent);
	color: var(--white)
}

.dashboard-week-icon .dashboard-icon {
	width: 32px;
	height: 32px;
}

.dashboard-past24 {
	width: 100%;
	position: relative;
	animation: dashboard-enter 560ms 70ms cubic-bezier(.22,1,.36,1) both;
}

.dashboard-past24-period {
	margin-top: 5px !important;
	color: color-mix(in srgb, var(--muted) 79%, var(--white));
	font-size: .78rem;
}

.dashboard-past24-total {
	display: flex;
	align-items: baseline;
	gap: 7px;
	color: var(--grey);
}

.dashboard-past24-total strong {
	font-size: 2rem;
	font-weight: 650;

}

.dashboard-past24-total span {
	color: color-mix(in srgb, var(--muted) 79%, var(--white));
	font-size: .84rem;
}

.dashboard-past24-counts {
	margin-top: 17px;
}

.dashboard-past24-empty {
	margin-top: 13px !important;
	color: color-mix(in srgb, var(--muted) 79%, var(--white));
	font-size: .84rem;
}

.dashboard-past24-link {
	display: inline-flex;
	align-items: center;
	margin-top: 12px;
	color: var(--grey);
	font-size: .9rem;
	font-weight: 600;
	text-decoration: none;
}

.dashboard-past24-link .dashboard-icon {
	width: 16px;
	height: 16px;
}

.dashboard-section-heading,
.dashboard-panel-heading {
	align-items: end;
}

.dashboard-inline-link,
.dashboard-panel-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: .9rem;
	font-weight: 620;
	text-decoration: none;
}

.dashboard-inline-link .dashboard-icon,
.dashboard-panel-link .dashboard-icon {
	width: 17px;
	height: 17px;
}

.dashboard-counts {
	margin-top: 18px;
}

.dashboard-stat {
	min-width: 0;
	animation: dashboard-enter 520ms cubic-bezier(.22,1,.36,1) both;
}

.dashboard-stat:nth-child(2) { animation-delay: 35ms; }
.dashboard-stat:nth-child(3) { animation-delay: 70ms; }
.dashboard-stat:nth-child(4) { animation-delay: 105ms; }
.dashboard-stat:nth-child(5) { animation-delay: 140ms; }
.dashboard-stat:nth-child(6) { animation-delay: 175ms; }

.dashboard-stat-icon {
	width: 46px;
	height: 46px;
	border-radius: 11px;
	background: var(--bg);
	color: var(--grey);
}

.dashboard-stat-symptom .dashboard-stat-icon { background: var(--line); color: var(--accent); }
.dashboard-stat-food .dashboard-stat-icon { background: var(--bg); color: var(--sage); }
.dashboard-stat-medication .dashboard-stat-icon { background: var(--bg); color: var(--muted); }
.dashboard-stat-supplement .dashboard-stat-icon { background: var(--bg); color: color-mix(in srgb, var(--amber) 50%, var(--ink)); }
.dashboard-stat-metric .dashboard-stat-icon { background: var(--line); color: var(--blue); }
.dashboard-stat-lab .dashboard-stat-icon { background: var(--bg); color: var(--muted); }

.dashboard-stat-value,
.dashboard-stat-label,
.dashboard-stat-change {
	display: block;
}

.dashboard-stat-value {
	margin-top: 12px;
	color: var(--ink);
	font-size: 2rem;
	font-weight: 680;

	line-height: 1;
}

.dashboard-stat-label {
	margin-top: 7px;
	color: var(--grey);
	font-size: .84rem;
	font-weight: 620;
}

.dashboard-stat-change {
	margin-top: 4px;
	color: color-mix(in srgb, var(--muted) 79%, var(--white));
	font-size: .72rem;
}

.dashboard-days-total {
	display: flex;
	align-items: baseline;
	gap: 6px;
	color: var(--muted);
	font-size: .82rem;
}

.dashboard-days-total strong {
	color: var(--ink);
	font-size: 1.7rem;
	font-weight: 680;

}

.dashboard-panel-copy {
	margin-top: 8px !important;
	color: var(--muted);
	font-size: .85rem;
}

.dashboard-day-list {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 9px;
	margin: 23px 0 20px;
}

.dashboard-day {
	display: flex;
	min-width: 0;
	min-height: 92px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	border: 1px solid var(--line);
	border-radius: 13px;
	background: var(--bg);
	color: color-mix(in srgb, var(--muted) 79%, var(--white));
}

.dashboard-day span {
	font-size: .68rem;
	font-weight: 600;
}

.dashboard-day strong {
	color: var(--grey);
	font-size: 1.05rem;
	font-weight: 620;
}

.dashboard-day i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--mid);
}

.dashboard-day.is-logged {
	border-color: color-mix(in srgb, var(--limegreen) 30%, var(--white));
	background: var(--white);
}

.dashboard-day.is-logged i {
	background: var(--limegreen);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 9.803922%, transparent);
}

.dashboard-panel-link {
	color: var(--grey) !important;
}

.dashboard-highlight-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.dashboard-highlight-top .dashboard-icon {
	width: 32px;
	height: 32px;
	color: var(--sage);
}

.dashboard-highlight h2 {
	margin-top: 13px;
	color: var(--grey);
	font-size: .8rem;
	font-weight: 550;
}

.dashboard-highlight-meta {
	margin-top: 2px !important;
	color: var(--muted);
	font-size: .78rem;
}

.dashboard-tool {
	display: flex;
	min-width: 0;
	min-height: 88px;
	align-items: center;
	gap: 12px;
	color: var(--grey) !important;
	text-decoration: none;
	transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.dashboard-tool > span:nth-child(2) {
	min-width: 0;
}

.dashboard-tool strong,
.dashboard-tool small {
	display: block;
}

.dashboard-tool strong {
	font-size: .9rem;
	font-weight: 630;
}

.dashboard-tool small {
	margin-top: 3px;
	color: color-mix(in srgb, var(--muted) 79%, var(--white));
	font-size: .74rem;
	line-height: 1.35;
}

.dashboard-tool > .dashboard-icon {
	width: 16px;
	height: 16px;
	margin-left: auto;
	color: color-mix(in srgb, var(--muted) 79%, var(--white));
}

.dashboard-tool-icon {
	width: 40px;
	height: 40px;
	flex: 0 0 auto;
	border-radius: 12px;
}

.dashboard-tool-icon .dashboard-icon {
	width: 20px;
	height: 20px;
}

.dashboard-tool-food { background: var(--bg); color: var(--sage); }
.dashboard-tool-health { background: var(--line); color: var(--accent); }
.dashboard-tool-insights { background: var(--line); color: var(--blue); }

.dashboard-disclaimer {
	margin: 18px 4px 0 !important;
	color: color-mix(in srgb, var(--muted) 79%, var(--white));
	font-size: .76rem;
}

@keyframes dashboard-enter {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 680px) {

	.dashboard-shell .app-topbar {
		padding-right: 16px;
		padding-left: 16px;
	}

	.dashboard-week-summary {
		display: grid;
		grid-template-columns: 42px 1fr;
		align-items: center;
		column-gap: 13px;
	}
	.dashboard-week-icon {
		grid-row: span 3;
	}
	.dashboard-week-summary p,
	.dashboard-week-summary strong,
	.dashboard-week-summary > span:last-child {
		margin-top: 0;
	}
	.dashboard-week-summary strong {
		font-size: 1.1rem;
	}
	.dashboard-section {
	}
	.dashboard-past24 {
		margin-top: 15px;
	}
	.dashboard-past24-heading h2 {
		font-size: 1.2rem;
	}
	.dashboard-past24-counts {
		margin-top: 14px;
	}

	.dashboard-past24-total strong {
		font-size: 1.65rem;
	}
	.dashboard-counts {
		margin-top: 15px;
	}

	.dashboard-stat-value {
		font-size: 1.75rem;
	}
	.dashboard-stat-label {
		font-size: .78rem;
	}
	.dashboard-stat-change {
		font-size: .68rem;
	}
	.dashboard-section-heading h2,
	.dashboard-panel-heading h2 {
		font-size: 1.35rem;
	}
	.dashboard-rhythm,

	.dashboard-day-list {
		gap: 5px;
	}
	.dashboard-day {
		min-height: 78px;
		border-radius: 10px;
	}
	.dashboard-day span {
		font-size: .61rem;
	}

	.dashboard-tool {
		min-height: 75px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dashboard *,
	.dashboard *::before,
	.dashboard *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Admin area — consolidated page styles */

.admin-kind {
	font-weight: 700;
	text-transform: capitalize;
}

@media(max-width:560px) {

	.admin-actions>* {
		flex: 1;
	}

}

/* Reports — consolidated page styles */

.chart {
	margin: 20px 0;
	overflow-wrap: anywhere;
}
.chart svg {
	display: block;
	width: 100%;
	height: auto;
}
.symptom-trend {
	color: var(--sage);
}
.symptom-trend rect {
	fill: var(--bg);
}
.symptom-trend line {
	stroke: var(--line);
}
.symptom-trend text {
	fill: var(--grey);
}
.symptom-trend polyline {
	fill: none;
	stroke: currentColor;
}
.symptom-trend circle {
	fill: currentColor;
	stroke: var(--white);
}
.metric-chart {
	margin: 12px 0;
}
.metric-chart p {
	margin: 0 0 6px;
	font-weight: 600;
}
.metric-bar {
	display: grid;
	grid-template-columns: 88px 1fr auto;
	gap: 8px;
	align-items: center;
	margin: 5px 0;
}
.metric-bar i {
	display: block;
	min-width: 3px;
	height: 12px;
	background: var(--accent);
	border-radius: 3px;
}
.report-range {
	font-weight: 600;
}

/* Food library — consolidated page styles */

/* Health profile — consolidated page styles */

.health-checklist .disclosure-selected {
	margin: 0 0 16px;
	padding-left: 24px;
	overflow-wrap: anywhere;
}
.health-checklist .disclosure-selected li + li { margin-top: 4px; }

.health-list-note {
	margin: 8px 0;
	color: var(--muted);
}

.health-options {
	max-height: 290px;
	font-size: 0.9rem;
	overflow-y: auto;
	margin: 8px 0 14px;
	padding: 8px;
	border: 1px solid var(--line);
	border-radius: 5px;
}
.health-option {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: 7px 4px;
	cursor: pointer;
}
.health-option input {
	margin: 3px 0 0;
	accent-color: var(--grey);
}
.health-option[hidden] {
	display: none;
}

.health-custom-items {
	margin: 14px 0 0;
}
.health-custom-items li {
	padding: 8px 0;
	border-bottom: 1px solid var(--line);
}

.health-suggest {
	margin-top: 30px !important;
}
.health-suggest>p:not(.health-error) {
	margin-top: 0;
}

/* Public homepage — consolidated page styles */

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

button {
	font:inherit;
	cursor:pointer
}

a,button {
	-webkit-tap-highlight-color:transparent
}

a:focus-visible,button:focus-visible {
	outline:3px solid var(--accent);
	outline-offset:5px
}

::selection {
	background:var(--line);
	color:var(--ink)
}

.container {
	width:min(1200px,calc(100% - 80px));
	margin-inline:auto
}

.section-padding {
	padding-block:112px
}

.section-kicker,.micro-label {
	font:500 10px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;
}

.section-kicker {
	display:block;
	color:var(--muted);
	margin-bottom:25px
}

.micro-label {
	font-size:9px;
}

.text-muted {
	color:var(--muted)
}

.icon {
	display:inline-block;
	width:22px;
	height:22px;
	fill:none;
	stroke:currentColor;
	stroke-width:1.5;
	stroke-linecap:round;
	stroke-linejoin:round;
	flex-shrink:0
}

.icon-definitions {
	position:absolute;
	width:0;
	height:0;
	overflow:hidden
}

.skip-link {
	position:fixed;
	top:-100px;
	left:16px;
	padding:12px;
	background:var(--white);
	z-index:100
}

.skip-link:focus {
	top:12px
}

.site-header {
	position:sticky;
	top:0;
	z-index:30;
	background:color-mix(in srgb, var(--bg) 92.156863%, transparent);
	border-bottom:1px solid var(--line);
	backdrop-filter:blur(20px)
}

.nav-wrap {
	width:min(1320px,calc(100% - 64px));
	height:84px;
	margin:auto;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:28px
}

.brand {
	display:inline-flex;
	align-items:center;
	gap:9px;
	color:var(--slate);
	font:800 18px/.98 "Titillium Web",sans-serif;

	flex-shrink:0
}

.brand img {
	width:38px;
	height:38px
}

.brand strong {
	font-weight:800
}

.desktop-nav,.nav-actions {
	display:flex;
	align-items:center;
	gap:34px
}

.desktop-nav a,.sign-in {
	font-size:12px;
	font-weight:600
}

.desktop-nav a {
	position:relative
}

.desktop-nav a::after {
	content:'';
	position:absolute;
	height:1px;
	background:var(--accent);
	left:0;
	right:100%;
	bottom:-5px;
	transition:right .3s
}

.desktop-nav a:hover::after {
	right:0
}

.nav-actions {
	gap:25px
}

.uppercase {
	text-transform: uppercase;
}
.uppercase::placeholder {
	text-transform: initial;
}

.button {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:26px;
	min-height:56px;
	padding:9px 23px;
	border:1px solid var(--slate);
	border-radius:8px;
	color:var(--white);
	background:var(--slate);
	font-size:13px;
	font-weight:600;
	transition:background .25s,box-shadow .3s,transform .3s var(--ease)
}

.button:hover {
	background:var(--ink);
	box-shadow:0 8px 22px color-mix(in srgb, var(--ink) 12.54902%, transparent);
	transform:translateY(-2px)
}

.button .icon {
	width:19px;
	height:19px;
	transition:transform .3s
}

.button:hover .icon {
	transform:translateX(3px)
}

.button-small {
	min-height:42px;
	padding:7px 15px;
	gap:20px;
	font-size:12px
}

.button-arrow {
	width:29px;
	height:29px;
	background:color-mix(in srgb, var(--white) 8.235294%, transparent);
	border-radius:50%;
	display:grid;
	place-items:center
}

.button-outline {
	color:var(--slate);
	background:transparent;
	border-color:var(--mid)
}

.button-outline:hover {
	background:var(--line)
}

.button-light {
	background:var(--white);
	color:var(--slate);
	border-color:var(--white)
}

.button-light:hover {
	background:var(--line)
}

.button-light .button-arrow {
	background:var(--line);
	color:var(--accent)
}

.scroll-progress {
	position:absolute;
	bottom:-1px;
	left:0;
	right:0;
	height:2px;
	overflow:hidden
}

.scroll-progress span {
	display:block;
	height:100%;
	background:var(--accent);
	transform:scaleX(0);
	transform-origin:left
}

.site-mobile-menu {
	display: none;
}

.hero {
	position:relative;
	overflow:hidden;
	padding-top:48px;
	background:radial-gradient(ellipse at 50% 52%,var(--line) 0,transparent 60%),var(--bg)
}

.hero-grid {
	position:absolute;
	inset:0;
	opacity:.3;
	background-image:linear-gradient(var(--mid) 1px,transparent 1px),linear-gradient(90deg,var(--mid) 1px,transparent 1px);
	background-size:92px 92px;
	mask-image:linear-gradient(transparent 2%,var(--darkgrey) 50%,transparent 98%);
	pointer-events:none
}

.hero-halo {
	position:absolute;
	width:680px;
	height:680px;
	top:220px;
	left:calc(50% - 340px);
	border-radius:50%;
	background:var(--white);
	filter:blur(100px);
	opacity:.8;
	pointer-events:none
}

.hero-copy {
	position:relative;
	text-align:center;
	z-index:2
}

.eyebrow {
	display:inline-flex;
	align-items:center;
	gap:10px;
	font-size:11px;
	font-weight:500;

	border:1px solid var(--line);
	border-radius:30px;
	padding:7px 14px;
	background:color-mix(in srgb, var(--white) 50.196078%, transparent)
}

.status-dot {
	display:inline-block;
	width:6px;
	height:6px;
	border-radius:50%;
	background:var(--accent);
	flex-shrink:0
}

.status-dot.is-success {
	background: color-mix(in srgb, var(--limegreen) 45%, var(--ink));
}

.type-gradient {
	background:linear-gradient(110deg,color-mix(in srgb, var(--muted) 79%, var(--white)) 10%,var(--muted) 40%,color-mix(in srgb, var(--muted) 79%, var(--white)) 70%,var(--muted));
	background-size:220% auto;
	background-clip:text;
	-webkit-background-clip:text;
	color:transparent
}

.hero-copy>p {
	font-size:16px;
	line-height:1.8;
	max-width:630px;
	margin:18px auto 0;
	color:var(--muted)
}

.hero-actions {
	display:flex;
	gap:12px;
	justify-content:center;
	margin-top:22px
}

.hero-copy>p.hero-note {
	font-size:10px;

	margin-top:14px;
	color:var(--muted)
}

.product-stage {
	position:relative;
	max-width:1050px;
	padding:44px 50px 83px;
	perspective:1400px;
	margin-top:0;
	isolation:isolate
}

.product-shell {
	position:relative;
	background:var(--white);
	border:1px solid var(--mid);
	border-radius:13px;
	box-shadow:0 40px 70px -30px color-mix(in srgb, var(--ink) 31.372549%, transparent),0 3px 8px color-mix(in srgb, var(--ink) 2.745098%, transparent);
	transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));
	transition:transform .55s var(--ease);
	z-index:2;
	overflow:hidden
}

.window-bar {
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	padding:13px 17px;
	border-bottom:1px solid var(--line);
	background:var(--white);
	font:500 8px ui-monospace,monospace;

}

.window-dots {
	display:flex;
	gap:5px
}

.window-dots i {
	width:6px;
	height:6px;
	background:var(--mid);
	border-radius:50%
}

.sample-label {

	color:color-mix(in srgb, var(--muted) 79%, var(--white))
}

.product-window {
	display:grid;
	grid-template-columns:173px 1fr;
	min-height:365px
}

.preview-sidebar {
	position:relative;
	background:var(--bg);
	border-right:1px solid var(--line);
	padding:25px 16px 60px
}

.preview-brand {
	display:flex;
	align-items:center;
	gap:7px;
	font:800 10px "Titillium Web",sans-serif;
	margin-bottom:30px;

}

.preview-brand img {
	width:25px;
	height:25px
}

.preview-sidebar>span {
	font:9px ui-monospace,monospace;

	color:color-mix(in srgb, var(--muted) 79%, var(--white));
	padding:0 8px
}

.preview-sidebar>div:not(.preview-brand) {
	display:flex;
	align-items:center;
	gap:10px;
	padding:9px 8px;
	font-size:10px;
	color:color-mix(in srgb, var(--muted) 79%, var(--white));
	margin:3px 0;
	border-radius:5px
}

.preview-sidebar .icon {
	width:15px;
	height:15px
}

.preview-sidebar>div.selected {
	background:var(--line);
	color:var(--slate);
	font-weight:700
}

.selected i {
	margin-left:auto;
	width:4px;
	height:4px;
	background:var(--accent);
	border-radius:50%
}

.preview-sidebar .preview-settings {
	position:absolute;
	bottom:15px
}

.preview-main {
	padding:28px 32px 18px;
	min-width:0
}

.preview-heading {
	display:flex;
	align-items:center;
	justify-content:space-between;
	margin-bottom:25px
}

.preview-heading .micro-label {
	font-size:8px;
	color:color-mix(in srgb, var(--muted) 79%, var(--white))
}

.preview-heading h2 {
	font-size:27px;

	margin-top:8px;
	line-height:1.17
}

.preview-add {
	display:grid;
	place-items:center;
	color:var(--white);
	background:var(--slate);
	width:34px;
	height:34px;
	border-radius:7px
}

.preview-add .icon {
	width:18px;
	height:18px
}

.preview-day {
	display:flex;
	justify-content:space-between;
	gap:8px;
	font-size:10px;
	border-bottom:1px solid var(--mid);
	padding-bottom:10px
}

.preview-day>span {
	color:color-mix(in srgb, var(--muted) 79%, var(--white));
	font-size:9px
}

.preview-entry {
	display:flex;
	align-items:center;
	gap:13px;
	padding:15px 0;
	border-bottom:1px solid var(--bg)
}

.preview-entry time {
	font:9px ui-monospace,monospace;
	color:color-mix(in srgb, var(--muted) 79%, var(--white));
	flex-shrink:0
}

.entry-icon {
	width:28px;
	height:28px;
	border-radius:7px;
	display:grid;
	place-items:center;
	flex-shrink:0
}

.entry-icon .icon {
	width:15px;
	height:15px
}

.food-tone {
	background:var(--bg);
	color:var(--sage)
}

.symptom-tone {
	background:var(--line);
	color:var(--accent)
}

.note-tone {
	background:var(--line);
	color:var(--blue)
}

.preview-entry>div {
	min-width:0
}

.preview-entry strong,.preview-entry>div>span {
	display:block;
	white-space:nowrap;
	text-overflow:ellipsis;
	overflow:hidden
}

.preview-entry strong {
	font-size:10px;
	font-weight:600
}

.preview-entry>div>span {
	font-size:9px;
	color:color-mix(in srgb, var(--muted) 79%, var(--white));
	margin-top:2px
}

.entry-tag {
	margin-left:auto;
	font-size:8px;
	color:color-mix(in srgb, var(--muted) 79%, var(--white));
	border:1px solid var(--line);
	border-radius:4px;
	padding:2px 5px
}

.preview-foot {
	color:color-mix(in srgb, var(--muted) 79%, var(--white));
}

.preview-foot .status-dot {
	width:4px;
	height:4px;
	background:var(--sage)
}

.stage-orbit {
	position:absolute;
	inset:0 0 25px;
	border:1px solid color-mix(in srgb, var(--mid) 43.921569%, transparent);
	border-radius:50%;
	z-index:-1;
	pointer-events:none
}

.orbit-two {
	inset:-35px -55px -15px;
	border-style:dashed;
	opacity:.6
}

.floating-card {
	position:absolute;
	z-index:3;
}

.float-report {
	right:-12px;
	top:33px;
	width:205px;
	transform:rotate(5deg)
}

.float-report>.micro-label {
	font-size:7px;
	color:color-mix(in srgb, var(--muted) 79%, var(--white))
}

.float-report>div:not(.mini-bars) {
	display:flex;
	align-items:center;
	gap:16px;
	margin-top:6px
}

.float-report strong {
	font:500 39px "Titillium Web",sans-serif;

}

.float-report strong span {
	font-size:17px;
	color:var(--lightgrey)
}

.float-report p {
	font-size:10px;
	line-height:1.4
}

.float-report small {
	font-size:7px;
	color:color-mix(in srgb, var(--muted) 79%, var(--white))
}

.mini-bars {
	display:flex;
	align-items:end;
	gap:5px;
	height:42px;
	margin-top:11px
}

.mini-bars i {
	height:60%;
	background:var(--lightgrey);
	flex:1;
	border-radius:2px 2px 0 0;
	transform-origin:bottom
}

.mini-bars i:nth-child(2) {
	height:100%;
	background:color-mix(in srgb, var(--muted) 79%, var(--white))
}

.mini-bars i:nth-child(3),.mini-bars i:nth-child(7) {
	height:2px
}

.mini-bars i:nth-child(4) {
	height:76%
}

.mini-bars i:nth-child(5) {
	height:61%;
	background:var(--accent)
}

.mini-bars i:nth-child(6) {
	height:78%
}

.hero-photo {
	position:absolute;
	left:-22px;
	bottom:51px;
	width:164px;
	height:198px;
	padding:6px 6px 0;
	background:var(--white);
	border:1px solid var(--line);
	border-radius:10px;
	transform:rotate(-8deg);
	box-shadow:0 18px 35px color-mix(in srgb, var(--ink) 13.72549%, transparent);
	z-index:3;
	overflow:hidden
}

.hero-photo img {
	width:100%;
	height:158px;
	display:block;
	object-fit:cover;
	border-radius:5px;
	filter:saturate(.65)
}

.hero-photo figcaption {
	display:flex;
	align-items:center;
	justify-content:center;
	gap:6px;
	font-size:8px;
	height:29px
}

.hero-photo .status-dot {
	width:4px;
	height:4px
}

.stage-caption {
	position:absolute;
	bottom:32px;
	right:70px;
	font-size:10px;
	color:var(--muted)
}

.stage-caption>span {
	margin-right:12px;
	color:var(--accent)
}

.hero-bottom {
	padding:12px 0 27px;
	font:9px ui-monospace,monospace;

	color:var(--muted)
}

.hero-bottom a {
	display:flex;
	gap:18px;
	align-items:center;
	min-height:44px
}

.motion-toggle {
	display:inline-flex;
	gap:8px;
	align-items:center;
	min-height:36px;
	padding:7px 11px;
	background:color-mix(in srgb, var(--white) 60%, transparent);
	border:1px solid var(--line);
	border-radius:30px;
	color:var(--muted);
	font:10px "Titillium Web",sans-serif
}

.motion-toggle[hidden] {
	display:none
}

.motion-toggle[aria-pressed=true] span {
	color:var(--accent)
}

.topic-band {
	overflow:hidden;
	background:var(--line);
	border-block:1px solid var(--line);
	padding:23px 0
}

.topic-track {
	display:flex;
	width:max-content
}

.topic-track>div {
	display:flex;
	align-items:center;
	gap:43px;
	padding-right:43px;
	flex-shrink:0
}

.topic-track span {
	font:500 22px "Titillium Web",sans-serif;

	color:color-mix(in srgb, var(--muted) 79%, var(--white))
}

.topic-track i {
	font-size:15px;
	color:var(--lightgrey);
	font-style:normal
}

.intro {
	background:var(--white)
}

.intro-grid>.section-kicker {
	padding-top:10px
}

.intro h2 {
	font-size:clamp(35px,4.2vw,59px);
	line-height:1.16
}

.intro-columns {
	margin-top:32px
}

.intro-columns p {
	font-size:14px;
	color:var(--muted);
	line-height:1.85
}

.section-heading {
	display:flex;
	justify-content:space-between;
	align-items:end;
	gap:45px;
	margin-bottom:48px
}

.section-heading>p {
	max-width:320px;
	font-size:14px;
	color:var(--muted);
	line-height:1.8
}

.section-heading .section-kicker {
	margin-bottom:20px
}

.features {
	background:var(--bg)
}

.feature-card {
	position:relative;
	display:flex;
	flex-direction:column;
	overflow:hidden;
	isolation:isolate
}

.feature-card::before {
	content:'';
	position:absolute;
	inset:0;
	z-index:-1;
	opacity:0;
	background:radial-gradient(400px circle at var(--mouse-x,50%) var(--mouse-y,50%),var(--line),transparent 70%);
	transition:opacity .4s;
	pointer-events:none
}

.feature-card:hover::before {
	opacity:.7
}

.feature-top {
	display:flex;
	gap:13px;
	align-items:center;
	margin-bottom:27px
}

.feature-icon {
	background:var(--bg);
	border:1px solid var(--line);
	border-radius:10px
}

.feature-icon .icon {
	width:22px;
	height:22px
}

.feature-number {
	margin-left:auto;
	font:11px ui-monospace,monospace;
	color:var(--lightgrey)
}

.feature-card p {
	font-size:13px;
	color:var(--muted);
	line-height:1.85;
	margin-top:15px
}

.text-link {
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:16px;
	font-size:12px;
	font-weight:600;
	margin-top:auto;
	padding-top:29px
}

.text-link .icon {
	width:18px;
	height:18px;
	transition:transform .3s
}

.text-link:hover .icon {
	transform:translateX(5px);
	color:var(--accent)
}

.feature-timeline {
	grid-row:span 2;
}


.feature-timeline .feature-icon {
	background:color-mix(in srgb, var(--white) 4.705882%, transparent);
	border-color:color-mix(in srgb, var(--white) 12.54902%, transparent)
}

.feature-timeline .micro-label {
	color:var(--mid);
	font-size:8px
}

.feature-timeline p {
	color:var(--mid)
}

.feature-timeline::before {
	background:radial-gradient(400px circle at var(--mouse-x,50%) var(--mouse-y,50%),color-mix(in srgb, var(--white) 12.54902%, transparent),transparent 75%)
}

.feature-timeline .text-link {
	border-top:1px solid color-mix(in srgb, var(--white) 12.54902%, transparent);
	padding-top:23px
}

.timeline-art {
	display:grid;
	grid-template-columns:35px 1fr;
	gap:16px 10px;
	margin:45px -11px 45px 0;
	position:relative
}

.timeline-art>span {
	font:8px ui-monospace,monospace;
	color:var(--lightgrey);
	align-self:center
}

.timeline-art>div {
	display:flex;
	align-items:center;
	gap:8px;
	border:1px solid color-mix(in srgb, var(--white) 10.196078%, transparent);
	background:color-mix(in srgb, var(--white) 2.745098%, transparent);
	border-radius:6px;
	padding:15px 11px;
	font-size:11px
}

.timeline-art small {
	margin-left:auto;
	font-size:8px;
	color:var(--lightgrey)
}

.timeline-art i {
	width:5px;
	height:5px;
	border-radius:50%;
	flex-shrink:0
}

.food-dot {
	background:color-mix(in srgb, var(--sage) 60%, var(--white))
}

.symptom-dot {
	background:color-mix(in srgb, var(--accent) 45%, var(--white))
}

.note-dot {
	background:var(--lightgrey)
}

.feature-foods {
	grid-column:span 2
}

.feature-foods p {
	max-width:490px
}

.food-tags {
	display:flex;
	gap:9px;
	flex-wrap:wrap;
	margin-top:24px
}

.food-tags>span {
	display:flex;
	gap:23px;
	padding:9px 13px;
	font-size:10px;
	border:1px solid var(--mid);
	background:var(--bg);
	border-radius:30px;
	color:var(--sage)
}

.food-tags i {
	font-style:normal
}

.feature-profile,.feature-settings {
	min-height:332px
}

.feature-profile .feature-icon {
	background:var(--bg);
	color:var(--accent);
	border-color:var(--line)
}

.feature-settings .feature-icon {
	background:var(--bg);
	color:var(--blue);
	border-color:var(--line)
}

.reports {
	position:relative;
	background:var(--ink);
	color:var(--white);
	overflow:hidden
}

.reports-grid {
	position:relative;
	align-items:center;
	z-index:1
}

.reports .section-kicker {
	color:var(--lightgrey);
	font-size:9px
}

.reports h2 {
	font-size:clamp(36px,3.7vw,52px);
	line-height:1.16
}

.reports h2>span {
	color:color-mix(in srgb, var(--muted) 79%, var(--white))
}

.reports-copy>p {
	color:var(--lightgrey);
	font-size:14px;
	line-height:1.85;
	margin-top:25px;
	max-width:480px
}

.report-benefits {
	list-style:none;
	margin:24px 0 30px;
	padding:0;
}

.report-benefits li {
	display:flex;
	gap:10px;
	align-items:center;
	font-size:11px;
	color:var(--mid)
}

.report-benefits .icon {
	width:15px;
	height:15px;
	color:color-mix(in srgb, var(--sage) 60%, var(--white))
}

.report-demo {
	background:var(--bg);
	color:var(--slate);
	padding:30px;
	border:1px solid color-mix(in srgb, var(--white) 27.058824%, transparent);
	border-radius:13px;
	box-shadow:0 28px 70px #10171e35;
	transform:rotate(2deg)
}

.report-demo-head {
	display:flex;
	align-items:center;
	justify-content:space-between
}

.report-demo-head .micro-label {
	color:var(--muted);
	font-size:8px
}


.report-demo-head>.icon {
	width:27px;
	height:27px;
	color:color-mix(in srgb, var(--muted) 79%, var(--white))
}

.report-periods {
	display:inline-flex;
	border:1px solid var(--line);
	border-radius:6px;
	padding:3px;
	margin:24px 0;
	background:var(--line)
}

.report-periods button {
	border:0;
	background:transparent;
	color:var(--muted);
	font-size:10px;
	padding:7px 19px;
	border-radius:4px;
	min-height:33px
}

.report-periods button[aria-pressed=true] {
	color:var(--slate);
	background:var(--white);
	box-shadow:0 1px 4px color-mix(in srgb, var(--ink) 8.235294%, transparent)
}

.report-stats {
	display:flex;
	gap:45px;
	padding-bottom:23px
}

.report-stats>div {
	display:grid
}

.report-stats strong {
	font:500 45px/1.15 "Titillium Web",sans-serif;

}

.report-stats strong>span {
	font-size:24px;
	color:var(--lightgrey)
}

.report-stats>div>span {
	font-size:10px;
	color:var(--muted);
	margin-top:5px
}

.report-chart {
	height:170px;
	display:flex;
	gap:12px
}

.chart-guide {
	display:flex;
	flex-direction:column;
	justify-content:space-between;
	padding-bottom:26px;
	font:9px ui-monospace,monospace;
	color:var(--muted)
}

.chart-columns {
	display:flex;
	gap:12px;
	flex:1;
	position:relative;
	background:repeating-linear-gradient(to top,transparent 0,transparent 47px,var(--line) 48px);
	margin-bottom:25px
}

.chart-columns>div {
	flex:1;
	display:flex;
	align-items:end;
	justify-content:center;
	position:relative
}

.chart-columns i {
	width:100%;
	height:var(--bar);
	min-height:2px;
	background:var(--lightgrey);
	border-radius:4px 4px 0 0;
	transform-origin:bottom
}

.chart-columns>div:nth-child(2) i {
	background:var(--muted)
}

.chart-columns>div:nth-child(5) i {
	background:var(--accent)
}

.chart-columns>div>span {
	position:absolute;
	top:calc(100% + 9px);
	font-size:9px;
	color:var(--muted);
	white-space:nowrap
}

.report-caption {
	border-top:1px solid var(--line);
	margin-top:19px;
	color:var(--muted)
}

.report-caption .status-dot {
	width:4px;
	height:4px;
	background:color-mix(in srgb, var(--sage) 80%, var(--white))
}

.report-orbit {
	position:absolute;
	right:-150px;
	top:-250px;
	width:1000px;
	height:1000px;
	border:1px solid color-mix(in srgb, var(--white) 3.921569%, transparent);
	border-radius:50%
}

.report-orbit::before,.report-orbit::after {
	content:'';
	position:absolute;
	inset:70px;
	border:1px solid color-mix(in srgb, var(--white) 3.529412%, transparent);
	border-radius:50%
}

.report-orbit::after {
	inset:140px
}

.report-footnote {
	position:relative;
	border-top:1px solid color-mix(in srgb, var(--white) 7.45098%, transparent);
	margin-top:60px;
	padding-top:20px;
	font-size:10px;
	color:var(--lightgrey)
}

.moments {
	background:var(--white)
}

.moment-card {
	position:relative;
	overflow:hidden;
	height:470px;
	isolation:isolate
}

.moment-card img {
	position:absolute;
	top:-12%;
	width:100%;
	height:124%;
	object-fit:cover;
	filter:saturate(.4);
	transition:filter .7s;
	z-index:-1
}

.moment-card:hover img {
	filter:saturate(.85)
}

.moment-note img {
	object-position:center 40%
}

.moment-card::after {
	content:'';
	position:absolute;
	inset:30% 0 0;
	background:linear-gradient(transparent,color-mix(in srgb, var(--darkgrey) 72.156863%, transparent));
	z-index:0;
	pointer-events:none
}

.moment-card figcaption {
	position:absolute;
	inset:auto 30px 30px;
	color:var(--white);
	z-index:1
}

.moment-card .micro-label {
	color:var(--line);
	font-size:8px
}

.moment-card strong {
	display:block;
	font:500 27px/1.23 "Titillium Web",sans-serif;

	margin-top:9px;
	max-width:300px
}

.how {
	padding-top:15px;
	background:var(--white)
}

.steps {
	list-style:none;
	margin:0;
	padding:0
}

.steps li {
	border-top:1px solid var(--mid);
	padding-top:25px
}

.steps li>span {
	font:400 47px "Titillium Web",sans-serif;

	color:var(--lightgrey)
}


.steps p {
	font-size:13px;
	line-height:1.85;
	color:var(--muted)
}

.faq {
	background:var(--bg);
	border-top:1px solid var(--line)
}

.faq h2 {
	font-size:clamp(35px,4vw,51px)
}

.faq-grid>div>p {
	font-size:13px;
	color:var(--muted);
	margin-top:25px
}

.faq-list > .disclosure {
	border-bottom:1px solid var(--mid)
}

.faq-list > .disclosure:first-child {
	border-top:1px solid var(--mid)
}

.faq-list .disclosure-toggle {
	list-style:none;
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:25px;
	padding:21px 0;
	cursor:pointer;
	font-size:14px;
	font-weight:500
}


.faq-list .disclosure-toggle>span {
	color:color-mix(in srgb, var(--muted) 79%, var(--white));
	font-size:23px;
	font-weight:400;
	transition:transform .25s
}

.faq-list .is-open > .disclosure-toggle>span {
	transform:rotate(45deg);
	color:var(--accent)
}

.faq-list .disclosure-panel>p {
	font-size:13px;
	color:var(--muted);
	padding:0 35px 24px 0;
	line-height:1.9
}

.closing {
	position:relative;
	background:var(--grey);
	color:var(--white);
	overflow:hidden;
	text-align:center
}

.closing-inner {
	position:relative;
	padding-block:95px 150px;
	z-index:1
}

.closing .section-kicker {
	color:var(--mid);
	font-size:9px
}

.closing h2 {
	font-size:clamp(48px,6.3vw,90px);

	font-weight:500;
	line-height:1.08
}

.closing h2>span {
	color:var(--lightgrey)
}

.closing p {
	font-size:14px;
	color:var(--mid);
	margin:25px 0 28px
}

.closing-signin {
	display:block;
	width:fit-content;
	margin:21px auto 0;
	font-size:11px;
	color:var(--line)
}

.closing-signin:hover {
	text-decoration:underline
}

.closing-grid {
	position:absolute;
	inset:0;
	background-image:linear-gradient(color-mix(in srgb, var(--white) 3.137255%, transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb, var(--white) 3.137255%, transparent) 1px,transparent 1px);
	background-size:75px 75px;
	mask-image:radial-gradient(ellipse,var(--darkgrey) 20%,transparent 75%)
}

.closing-word {
	position:absolute;
	bottom:-70px;
	left:50%;
	transform:translateX(-50%);
	font:600 260px/.9 "Titillium Web",sans-serif;

	color:color-mix(in srgb, var(--white) 1.568627%, transparent);
	white-space:nowrap;
	pointer-events:none
}

.site-footer {
	background:var(--bg)
}

.footer-top {
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:30px;
	padding-block:36px
}

.footer-top>p {
	font-size:12px;
	color:var(--muted)
}

.footer-top nav {
	display:flex;
	flex-wrap:wrap;
	gap:26px;
	font-size:12px
}

.footer-top a:hover {
	color:var(--accent)
}

.footer-bottom {
	display:flex;
	justify-content:space-between;
	gap:35px;
	padding-block:19px 26px;
	border-top:1px solid var(--line);
	font-size:9px;
	color:var(--muted)
}

.photo-credits {
	text-align:right;
	font-size:8px
}

.photo-credits a {
	text-decoration:underline;
	text-underline-offset:2px
}

/* Everything is readable without JavaScript. Motion is an optional enhancement. */
html[data-motion=on] {
	scroll-behavior:smooth
}

html[data-motion=on] .hero-enter {
	animation:enter .95s var(--ease) both
}

html[data-motion=on] .hero h1>span:nth-child(2) {
	animation-delay:.12s
}

html[data-motion=on] .hero-copy>p {
	animation-delay:.2s
}

html[data-motion=on] .hero-actions {
	animation-delay:.27s
}

html[data-motion=on] .type-gradient {
	animation:enter .95s .12s var(--ease) both,gradientDrift 10s ease-in-out infinite
}

html[data-motion=on] .hero-halo {
	animation:haloDrift 13s ease-in-out infinite alternate
}

html[data-motion=on] .topic-track {
	animation:topicDrift 38s linear infinite
}

.topic-band:hover .topic-track,.topic-band:focus-within .topic-track {
	animation-play-state:paused
}

html[data-motion=on] .chart-columns i {
	transition:height .7s var(--ease),background .5s
}

html[data-motion=on] [data-reveal].reveal-ready {
	opacity:0;
	transform:translateY(25px);
	transition:opacity .85s var(--ease),transform .85s var(--ease)
}

html[data-motion=on] [data-reveal].reveal-ready.is-visible {
	opacity:1;
	transform:translateY(0)
}

html[data-motion=on] .report-demo.reveal-ready.is-visible {
	transform:rotate(2deg)
}

@keyframes enter {
	from {
		opacity:0;
		transform:translateY(24px)
	}

	to {
		opacity:1;
		transform:translateY(0)
	}

}

@keyframes gradientDrift {
	0%,100% {
		background-position:0% center
	}

	50% {
		background-position:100% center
	}

}

@keyframes haloDrift {
	from {
		transform:translate(-80px,-20px) scale(.85)
	}

	to {
		transform:translate(80px,50px) scale(1.1)
	}

}

@keyframes topicDrift {
	to {
		transform:translateX(-50%)
	}

}

@keyframes reportFloat {
	0%,100% {
		transform:rotate(5deg) translateY(0)
	}

	50% {
		transform:rotate(3deg) translateY(-11px)
	}

}

@keyframes photoFloat {
	0%,100% {
		transform:rotate(-8deg) translateY(0)
	}

	50% {
		transform:rotate(-5deg) translateY(9px)
	}

}

@keyframes orbitTurn {
	to {
		transform:rotate(360deg)
	}

}

@media(min-width:801px) {
	html[data-motion=on] .float-report {
		animation:reportFloat 8s ease-in-out infinite
	}

	html[data-motion=on] .hero-photo {
		animation:photoFloat 9s ease-in-out infinite
	}

	html[data-motion=on] .orbit-two {
		animation:orbitTurn 95s linear infinite
	}

	html[data-motion=on] .moment-card img {
		will-change:transform
	}

}

@media(max-width:1150px) {
	
	
	.container {
		width:calc(100% - 56px)
	}

	.nav-wrap {
		width:calc(100% - 48px)
	}

	.desktop-nav {
		gap:24px
	}

	.product-stage {
		width:calc(100% - 110px);
		padding-inline:20px
	}

	.float-report {
		right:-30px;
		top:33px;
		width:176px;
	}

	.hero-photo {
		left:-27px;
		width:140px;
		height:170px;
		bottom:57px
	}

	.hero-photo img {
		height:131px
	}

	.hero-photo figcaption {
		font-size:7px
	}

	.feature-timeline {
		grid-row:span 2
	}

	.feature-foods {
		grid-column:auto
	}

	.feature-settings {
		grid-column:span 2;
		min-height:240px
	}

	.feature-settings p {
		max-width:600px
	}

	.report-demo {
		padding:24px
	}

	.feature-profile {
		min-height:300px
	}

}

@media(max-width:800px) {

	.section-padding {
		padding-block:78px
	}

	.site-header {
		backdrop-filter:blur(12px)
	}

	.nav-wrap {
		height:72px
	}

	.desktop-nav {
		display:none
	}

	.site-mobile-menu {
		display: block;
	}

	.hero {
		padding-top:36px
	}


	.hero-copy>p {
		font-size:14px;
		max-width:530px
	}

	.product-stage {
		width:calc(100% - 64px);
		padding:38px 0 70px;
		margin-top:8px
	}

	.product-window {
		grid-template-columns:132px 1fr;
		min-height:340px
	}

	.preview-sidebar {
		padding-inline:11px
	}

	.preview-brand {
		font-size:8px;
		gap:5px
	}

	.preview-brand img {
		width:21px;
		height:21px
	}

	.preview-sidebar>div:not(.preview-brand) {
		font-size:9px;
		gap:8px
	}

	.preview-main {
		padding:23px 22px 18px
	}

	.preview-entry {
		gap:9px
	}

	.preview-entry strong {
		font-size:9px
	}

	.entry-tag {
		display:none
	}

	.preview-heading h2 {
		font-size:24px
	}

	.hero-photo {
		left:-15px;
		bottom:35px;
		width:110px;
		height:136px;
		padding:4px 4px 0
	}

	.hero-photo img {
		height:104px
	}

	.hero-photo figcaption {
		font-size:6px;
		height:25px;
		gap:3px
	}

	.float-report {
		right:-13px;
		top:24px;
		width:151px;
	}

	.float-report>.micro-label {
		font-size:6px
	}

	.float-report strong {
		font-size:29px
	}

	.float-report strong span {
		font-size:14px
	}

	.float-report p {
		font-size:8px
	}

	.float-report small {
		font-size:6px
	}

	.mini-bars {
		height:24px
	}

	.stage-caption {
		right:10px;
		bottom:29px;
		font-size:8px
	}

	.hero-bottom {
		font-size:7px;
		gap:12px
	}

	.hero-bottom a {
		gap:9px
	}

	.topic-band {
		padding:19px 0
	}

	.topic-track span {
		font-size:18px
	}

	.topic-track>div {
		gap:28px;
		padding-right:28px
	}

	.intro-grid>.section-kicker {
		padding-top:0
	}

	.intro h2 {
		font-size:clamp(34px,5.8vw,49px)
	}

	.section-heading {
		gap:20px
	}

	.section-heading>p {
		max-width:240px;
		font-size:12px
	}

	.reports-copy>p {
		max-width:600px
	}

	.report-demo {
		max-width:520px;
		width:100%;
		margin:auto;
		transform:none;
		padding:30px
	}

	html[data-motion=on] .report-demo.reveal-ready.is-visible {
		transform:none
	}

	.report-chart {
		height:190px
	}

	.report-footnote {
		margin-top:43px
	}

	.moment-card {
		height:370px
	}

	.moment-card figcaption {
		inset:auto 23px 25px
	}

	.moment-card strong {
		font-size:23px
	}

	.moment-card img {
		height:100%;
		top:0
	}

	.steps p {
		font-size:12px
	}

	.how {
		padding-top:0
	}

	.faq-grid>div>p {
		margin-top:18px
	}

	.closing-inner {
		padding-block:80px 105px
	}

	.closing h2 {
		font-size:63px;
	}

	.closing-word {
		font-size:190px;
		bottom:-50px
	}

	.footer-top {
		flex-wrap:wrap;
		gap:23px
	}

	.footer-top>p {
		margin-left:auto
	}

	.footer-top nav {
		width:100%;
		gap:25px
	}

	.footer-bottom {
		flex-direction:column;
		gap:14px
	}

	.photo-credits {
		text-align:left;
		max-width:570px
	}

}

@media(max-width:560px) {
	.container {
		width:calc(100% - 36px)
	}

	.nav-wrap {
		width:calc(100% - 32px);
		height:68px;
		gap:15px
	}

	.brand {
		font-size:15px;

		gap:7px
	}

	.brand img {
		width:32px;
		height:32px
	}

	.nav-actions {
		gap:14px
	}

	.sign-in {
		font-size:11px;
		min-height:44px;
		display:flex;
		align-items:center
	}

	.button-small {
		padding:6px 11px;
		min-height:44px;
		font-size:10px;
		gap:9px
	}

	.button-small .icon {
		width:15px;
		height:15px
	}

	.hero {
		padding-top:28px
	}

	.eyebrow {
		font-size:9px;
		padding:6px 10px;
		gap:8px;

	}


	.hero-copy>p {
		font-size:13px;
		line-height:1.85;
		margin-top:16px;
		max-width:350px
	}

	.desktop-break {
		display:none
	}

	.hero-actions {
		gap:9px;
		margin-top:20px
	}

	.hero-actions .button {
		font-size:11px;
		gap:11px;
		padding:9px 14px;
		min-height:49px
	}

	.hero-actions .button-arrow {
		height:24px;
		width:24px
	}

	.hero-actions .button-outline {
		padding-inline:13px
	}

	.hero-copy>p.hero-note {
		font-size:9px;
		margin-top:12px
	}

	.product-stage {
		width:calc(100% - 36px);
		padding:38px 0 69px;
		margin-top:0
	}

	.window-bar {
		padding:11px 12px;

		font-size:6px
	}

	.window-dots {
		gap:3px
	}

	.window-dots i {
		width:4px;
		height:4px
	}

	.sample-label {
		font-size:6px
	}

	.product-window {
		display:block;
		min-height:0
	}

	.preview-sidebar {
		display:none
	}

	.preview-main {
		padding:22px 19px 16px
	}

	.preview-heading {
		margin-bottom:22px
	}

	.preview-heading h2 {
		font-size:25px
	}

	.preview-heading .micro-label {
		font-size:7px
	}

	.preview-add {
		width:31px;
		height:31px
	}

	.preview-day {
		font-size:9px
	}

	.preview-day>span {
		font-size:8px
	}

	.preview-entry {
		padding:14px 0;
		gap:9px
	}

	.preview-entry time {
		font-size:8px
	}

	.preview-entry strong {
		font-size:9px
	}

	.preview-entry>div>span {
		font-size:8px
	}

	.entry-icon {
		width:26px;
		height:26px
	}

	.preview-foot {
		font-size:7px
	}

	.float-report {
		right:5px;
		top:13px;
		width:128px;
		transform:rotate(5deg)
	}

	.float-report>.micro-label {
		font-size:5.5px;

	}

	.float-report>div:not(.mini-bars) {
		gap:10px;
		margin-top:4px
	}

	.float-report strong {
		font-size:25px
	}

	.float-report p {
		font-size:7px
	}

	.float-report small {
		font-size:5px
	}

	.float-report .mini-bars {
		display:none
	}

	.hero-photo {
		width:87px;
		height:108px;
		left:10px;
		bottom:31px;
		transform:rotate(-9deg)
	}

	.hero-photo img {
		height:80px
	}

	.hero-photo figcaption {
		height:21px;
		font-size:5.2px;
		gap:3px
	}

	.hero-photo .status-dot {
		width:3px;
		height:3px
	}

	.stage-caption {
		bottom:23px;
		right:7px;
		max-width:200px;
		text-align:right;
		font-size:7px
	}

	.stage-caption>span {
		margin-right:4px
	}

	.stage-orbit {
		inset:25px -20px 20px
	}

	.orbit-two {
		inset:5px -45px 0
	}

	.hero-bottom {
		flex-wrap:wrap;
		gap:0;
		padding-top:0;
		padding-bottom:19px;
		font-size:6.5px;

	}

	.hero-bottom>span {
		flex-basis:100%;
		text-align:center;
		margin-bottom:11px
	}

	.hero-bottom a {
		margin-left:auto;
		min-height:36px
	}

	.motion-toggle {
		font-size:9px;
		min-height:34px;
		padding:6px 10px
	}

	.topic-band {
		padding:16px 0
	}

	.topic-track span {
		font-size:16px
	}

	.topic-track i {
		font-size:11px
	}

	.topic-track>div {
		gap:24px;
		padding-right:24px
	}

	.section-padding {
		padding-block:65px
	}

	.section-kicker {
		font-size:8px;

		margin-bottom:18px
	}

	.intro h2 {
		font-size:32px;

	}

	.intro-columns {
		margin-top:24px
	}

	.intro-columns p {
		font-size:13px;
		line-height:1.9
	}

	.section-heading {
		display:block;
		margin-bottom:31px
	}

	.section-heading>p {
		max-width:none;
		margin-top:20px;
		font-size:13px
	}

	.section-heading .button {
		margin-top:24px
	}

	.section-heading .section-kicker {
		margin-bottom:17px
	}

	.feature-timeline,.feature-settings {
		grid-column:auto;
		grid-row:auto
	}

	.feature-card,.feature-timeline {
		min-height:0
	}

	.feature-top {
		margin-bottom:23px
	}

	.feature-card p {
		font-size:12px
	}

	.timeline-art {
		margin:30px 0
	}

	.feature-timeline .text-link {
		padding-top:21px
	}

	.feature-card .text-link {
		font-size:11px
	}

	.food-tags {
		gap:6px
	}

	.food-tags>span {
		font-size:9px;
		padding:8px 10px;
		gap:14px
	}

	.reports .section-kicker {
		font-size:7px;

	}

	.reports h2 {
		font-size:36px;

	}

	.reports-copy>p {
		font-size:13px
	}

	.report-benefits li {
		font-size:10px;
		gap:8px;
		align-items:start
	}

	.reports-copy .button {
		font-size:12px;
		min-height:50px;
		padding:9px 17px;
		gap:17px
	}

	.report-demo {
		padding:23px 21px
	}

	.report-demo-head .micro-label {
		font-size:6.5px
	}

	.report-stats {
		gap:35px
	}

	.report-stats strong {
		font-size:40px
	}

	.report-chart {
		height:155px
	}

	.chart-columns {
		gap:8px
	}

	.chart-columns>div>span {
		font-size:8px
	}

	.report-caption {
		font-size:7px
	}

	.report-footnote {
		font-size:9px;
		line-height:1.8;
		margin-top:33px
	}

	.moment-card {
		height:300px
	}

	.moment-note {
		height:290px
	}

	.moment-note img {
		object-position:center 48%
	}

	.moment-card strong {
		font-size:26px;
		max-width:260px
	}

	.moment-card figcaption {
		inset:auto 25px 25px
	}

	.moment-card .micro-label {
		font-size:7px
	}

	.how {
		padding-top:0
	}

	.steps li {
		display:grid;
		grid-template-columns:49px 1fr;
		gap:0 17px;
		padding-top:20px
	}

	.steps li>span {
		grid-row:span 2;
		font-size:37px;

	}

	.steps p {
		font-size:12px;
		line-height:1.9
	}

	.faq h2 {
		font-size:36px
	}

	.faq-list .disclosure-toggle {
		font-size:12px;
		gap:17px;
		padding:20px 0
	}

	.faq-list .disclosure-panel>p {
		font-size:12px;
		padding-right:18px
	}

	.closing-inner {
		padding-block:66px 83px
	}

	.closing h2 {
		font-size:clamp(37px,10.4vw,57px);

	}

	.closing .section-kicker {
		font-size:7px;

	}

	.closing p {
		max-width:260px;
		margin:21px auto 26px;
		font-size:12px
	}

	.closing .button {
		font-size:12px;
		min-height:51px
	}

	.closing-signin {
		font-size:10px
	}

	.closing-word {
		font-size:128px;
		bottom:-29px;

	}

	.footer-top {
		gap:23px;
		padding-block:31px
	}

	.footer-top>p {
		font-size:10px;
		margin:0
	}

	.footer-top nav {
		font-size:11px;
		gap:25px
	}

	.footer-bottom {
		font-size:8px;
		padding-block:18px 22px;
		gap:12px
	}

	.photo-credits {
		font-size:7px;
		line-height:1.8
	}

}

@media(max-width:360px) {
	.nav-actions {
		gap:9px
	}

	.brand {
		font-size:14px
	}

	.brand img {
		width:29px;
		height:29px
	}

	.button-small {
		gap:5px;
		padding-inline:9px
	}

	.hero-actions .button {
		font-size:10px;
		padding-inline:11px;
		gap:8px
	}


	.preview-main {
		padding-inline:15px
	}

	.preview-entry {
		gap:7px
	}

	.preview-entry strong {
		font-size:8px
	}

	.entry-icon {
		width:23px;
		height:23px
	}

	.stage-caption {
		max-width:165px
	}

	.footer-top>p {
		width:100%
	}

}


html[data-motion=off] *,html[data-motion=off] *::before,html[data-motion=off] *::after {
	animation:none!important;
	transition:none!important
}

html[data-motion=off] [data-reveal] {
	opacity:1!important;
	transform:none!important
}

/* Shared navigation and footer for signed-in application pages. */
.app-brand {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.app-topbar {
	justify-content: space-between;
	padding: 0 8px;
	z-index: 1400;
}

.app-menu {
	position: fixed;
	right: calc(16px + env(safe-area-inset-right, 0px));
	bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	z-index: 1400;
}

.app-menu .disclosure-toggle {
	display: grid;
	width: 44px;
	height: 44px;
	place-items: center;
	border-radius: 8px;
	background: var(--grey);
	border: 1px solid var(--white);
	list-style: none;
	cursor: pointer;
	padding: 0;
	align-items: center;
}


.app-menu .disclosure-toggle:focus-visible {
	outline: 2px solid var(--darkgrey);
	outline-offset: 2px;
}

.app-menu-icon {
	display: flex;
}

.app-nav {
	position: absolute;
	bottom: calc(100% + 8px);
	right: 0;
	z-index: 1300;
	width: min(260px, calc(100vw - 32px));
	max-height: calc(100vh - 92px - env(safe-area-inset-bottom, 0px) - env(safe-area-inset-top, 0px));
	max-height: calc(100dvh - 92px - env(safe-area-inset-bottom, 0px) - env(safe-area-inset-top, 0px));
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 8px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--card);
	box-shadow: 0 12px 32px #0003;
}

.app-nav a {
	display: flex;
	min-height: 44px;
	align-items: center;
	padding: 0 12px;
	border-radius: 5px;
	color: var(--grey);
	text-decoration: none;
}

.app-nav a:hover,
.app-nav a[aria-current="page"] {
	background: var(--bg);
	color: var(--grey);
	text-decoration: underline;
}

.app-nav a[aria-current="page"] {
	font-weight: 600;
}

.app-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 32px;
	padding: 18px max(20px, calc((100% - 1160px) / 2));
	border-top: 1px solid var(--line);
	background: var(--card);
	color: var(--muted);
	font-size: 0.85rem;
}

.app-footer p {
	margin: 0;
}

.app-footer a {
	color: var(--grey);
	text-underline-offset: 3px;
}

.app-footer nav {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.support-shell {
	min-height: 100vh;
	background: linear-gradient(160deg, var(--bg) 0%, var(--bg) 54%, var(--bg) 100%);
}

.support-intro {
	max-width: 680px;
	margin-bottom: 30px;
}

.support-intro > p:last-child {
	margin-top: 12px;
	color: var(--muted);
	font-size: 1.04rem;
}

.support-card {
	align-items: center;
	min-height: 116px;
	color: var(--ink) !important;
	text-decoration: none;
	transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.support-card:focus-visible,
.support-contact a:focus-visible {
	outline-offset: 3px;
}

.support-card-icon {
	background: var(--bg);
	color: var(--sage);
	font-size: .8rem;
	font-weight: 700;
}

.support-card:nth-child(2) .support-card-icon { background: var(--line); color: var(--accent); }
.support-card:nth-child(3) .support-card-icon { background: var(--line); color: var(--blue); }
.support-card:nth-child(4) .support-card-icon { background: var(--bg); color: var(--muted); }

.support-card strong,
.support-card small {
	display: block;
}

.support-card strong {
	font-size: 1rem;
	font-weight: 650;
}

.support-card small {
	margin-top: 5px;
	color: var(--muted);
	font-size: .83rem;
	line-height: 1.45;
}

.support-arrow {
	color: var(--accent);
	font-size: 1.1rem;
}

.support-note {
	align-items: center;
	margin-top: 22px;
}

.support-note h2,
.support-contact h2 {
	margin-top: 6px;
	font-size: 1.35rem;
	font-weight: 620;

}

.support-note > p,
.support-contact > p {
	color: var(--muted);
	font-size: .9rem;
	line-height: 1.6;
}

.support-contact {
	margin-top: 28px;
	padding: 22px 2px;
	border-top: 1px solid var(--line);
}

.support-contact > p {
	margin-top: 7px;
}

.support-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
}

.support-contact a {
	display: inline-flex;
	gap: 8px;
	margin-top: 12px;
	color: var(--grey);
	font-size: .9rem;
	font-weight: 650;
	text-underline-offset: 4px;
}

.legal-shell {
	min-height: 100vh;
	background: linear-gradient(160deg, var(--bg) 0%, var(--bg) 55%, var(--bg) 100%);
}

.legal-heading {
	margin-bottom: 22px;
}


.legal-updated {
	margin-top: 10px;
	color: color-mix(in srgb, var(--muted) 79%, var(--white));
	font-size: .84rem;
}

.legal-draft {
	padding: 16px 18px;
	border: 1px solid color-mix(in srgb, var(--amber) 45%, var(--white));
	border-radius: 12px;
	background: var(--bg);
	color: color-mix(in srgb, var(--amber) 30%, var(--ink));
	font-size: .88rem;
	line-height: 1.6;
}

.legal-draft strong {
	color: color-mix(in srgb, var(--amber) 30%, var(--ink));
}

.legal-toc {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 19px 0;
}

.legal-toc a {
	padding: 7px 10px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--white);
	color: var(--muted) !important;
	font-size: .78rem;
	text-decoration: none;
}

.legal-toc a:hover {
	border-color: var(--mid);
	color: var(--grey) !important;
}

.legal-copy > div + div {
	margin-top: 31px;
	padding-top: 27px;
	border-top: 1px solid var(--bg);
}

.legal-copy h2 {
	margin-bottom: 12px;
	color: var(--ink);
	font-size: 1.25rem;
	font-weight: 650;

}

.legal-copy p,
.legal-copy li {
	color: var(--muted);
	font-size: .94rem;
	line-height: 1.75;
}

.legal-copy p + p,
.legal-copy ul + p {
	margin-top: 12px;
}

.legal-copy ul {
	margin: 10px 0 0;
	padding-left: 24px;
}

.legal-copy li + li {
	margin-top: 7px;
}

.legal-copy strong {
	color: var(--grey);
}

.legal-copy a {
	color: var(--grey);
	text-underline-offset: 3px;
}

@media (max-width: 560px) {
	.app-footer {
		align-items: flex-start;
		flex-direction: column;
		padding-inline: 18px;
	}

	.support-card {
		min-height: 98px;
	}

	.legal-copy > div + div {
		margin-top: 25px;
		padding-top: 22px;
	}
	.legal-copy p,
	.legal-copy li {
		font-size: .9rem;
	}
}

.billing-status-banner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px max(18px, calc((100vw - 1120px) / 2));
	color: color-mix(in srgb, var(--amber) 30%, var(--ink));
	background: color-mix(in srgb, var(--amber) 15%, var(--white));
	border-bottom: 1px solid color-mix(in srgb, var(--amber) 45%, var(--white));
}

.billing-status-banner.is-warning {
	color: color-mix(in srgb, var(--amber) 30%, var(--ink));
	background: var(--white);
}

.billing-status-banner div {
	display: grid;
	gap: 3px;
}

.billing-status-banner a {
	flex: 0 0 auto;
	font-weight: 700;
}

.billing-intro {
	max-width: 720px;
	margin-bottom: 28px;
}

.billing-eyebrow,
.billing-plan-badge {
	margin: 0 0 9px;
	color: var(--accent-dark, var(--sage));
	font-size: .76rem;
	font-weight: 800;

	text-transform: uppercase;
}

.billing-intro > p:last-child,
.billing-current p,
.billing-access p,
.billing-note {
	color: var(--grey);
	line-height: 1.65;
}

.billing-current h2,
.billing-access h2,
.billing-plans h2 {
	margin: 0 0 12px;
	font-size: 1.25rem;
}

.billing-current p:last-of-type,
.billing-access p:last-child,
.billing-message p:last-child {
	margin-bottom: 0;
}

.billing-plans {
	margin: 32px 0;
}

.billing-plan {
	position: relative;
}

.billing-plan-badge {
	position: absolute;
	top: 14px;
	right: 16px;
	color: color-mix(in srgb, var(--limegreen) 45%, var(--ink));
}


.billing-price {
	margin: 0 0 4px;
	font-size: 1.6rem;
	font-weight: 800;
}

.billing-plan > p:not(.billing-price):not(.billing-plan-badge) {
	margin: 7px 0 20px;
	color: var(--grey);
}

.billing-plan .btn {
	margin-top: auto;
}

.billing-note {
	font-size: .9rem;
}

.billing-access {
	margin-top: 36px;
}

@media (max-width: 640px) {
	.billing-status-banner {
		align-items: flex-start;
		padding: 13px 18px;
	}
	.billing-status-banner span {
		font-size: .9rem;
	}

}

/* Static server error pages. Typography, spacing and controls use shared utilities. */
.error-page {
	background: var(--white);
	min-height: 100vh;
	padding: 20vh 0 48px;
}
.error-page .content-narrow {
	margin: 0 auto;
}

/* Shared div disclosures and clickable field choices. */
.disclosure-toggle {
	font-weight: 600;
	font-size: 1.2em;
	display: block;
	padding: 0;
}
.disclosure-toggle:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}
.disclosure-panel[hidden], .app-nav[hidden] {
	display: none !important;
}


[data-choice-row] {
	cursor: pointer;
}

/* Public content pages. Shared cards, grids and controls remain in use. */
.condition-page .condition-main {
	width: min(800px, calc(100% - 40px));
	margin: 0 auto;
	padding: 28px 0 64px;
	scroll-margin-top: 100px;
}
.condition-page .condition-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	font-size: .9rem;
	margin-bottom: 36px;
}
.condition-page .condition-header-nav {
	display: flex;
	align-items: center;
	gap: 24px;
	font-size: .95rem;
}
.condition-page .condition-heading { margin-bottom: 28px; }
.condition-page .condition-heading h1 {
	font-size: clamp(2rem, 5vw, 3.1rem);
	line-height: 1.18;
	font-weight: 700;
	color: var(--ink);
	margin-bottom: 20px;
}
.condition-page .section-kicker { margin-bottom: 16px; }
.condition-page .condition-meta { font-size: .9rem; color: var(--muted); }
.condition-page .condition-summary { font-size: 1.2rem; line-height: 1.65; margin-top: 24px; }
.condition-page .condition-main p { margin-bottom: 18px; }
.condition-page .condition-main a:not(.button) { text-decoration: underline; text-underline-offset: 3px; }
.condition-page .condition-main .button { color: var(--white); text-decoration: none; max-width: 100%; text-align: center; }
.condition-page .condition-section { margin-top: 38px; scroll-margin-top: 100px; }
.condition-page .condition-section h2, .condition-page .condition-related h2 {
	font-weight: 700;
	font-size: 1.65rem;
	line-height: 1.3;
	margin-bottom: 18px;
	color: var(--ink);
}
.condition-page .condition-section h3 { font-weight: 600; font-size: 1.2rem; line-height: 1.4; margin: 24px 0 10px; }
.condition-page .card { padding: 24px; margin: 28px 0; }
.condition-page .card h2 { font-size: 1.3rem; font-weight: 600; margin-bottom: 16px; }
.condition-page .condition-toc { display: grid; gap: 10px; }
.condition-page .condition-toc h2 { margin-bottom: 4px; }
.condition-page .condition-urgent { border-left: 4px solid var(--accent); }
.condition-page .condition-urgent p { margin-bottom: 0; }
.condition-page .condition-cta { background: var(--bg); }
.condition-page .condition-cta p:last-child { margin-bottom: 0; }
.condition-page .condition-sources { font-size: .95rem; }
.condition-page .condition-sources li { margin-bottom: 12px; scroll-margin-top: 100px; overflow-wrap: anywhere; }
.condition-page .condition-related { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); }
.condition-page .condition-related nav { display: flex; flex-wrap: wrap; gap: 16px 24px; }
.condition-page .condition-guides { gap: 20px; margin-top: 28px; }
.condition-page .condition-guides .card { margin: 0; }
.condition-page .condition-guides .card p:last-child { margin-bottom: 0; }
@media (max-width: 760px) {
	.condition-page .nav-wrap { width: calc(100% - 32px); height: auto; min-height: 72px; flex-wrap: wrap; padding: 14px 0; gap: 14px; }
	.condition-page .condition-main, .condition-page .condition-section { scroll-margin-top: 160px; }
}
@media (max-width: 600px) {
	.condition-page .condition-header-nav { gap: 16px; flex-wrap: wrap; }
	.condition-page .condition-header-nav .button { min-height: 44px; padding: 8px 14px; }
	.condition-page .condition-main { padding-top: 24px; scroll-margin-top: 160px; }
	.condition-page .condition-section { scroll-margin-top: 160px; }
	.condition-page .condition-breadcrumb { margin-bottom: 26px; }
	.condition-page .card { padding: 18px; }
	.condition-page .footer-top { align-items: flex-start; }
	.condition-page .footer-top nav { gap: 16px; }
}
@media print {
	.condition-page .site-header, .condition-page .site-footer, .condition-page .condition-toc, .condition-page .condition-cta, .condition-page .condition-related, .condition-page .button { display: none; }
	.condition-page .condition-main { width: 100%; }
}

/* Public article typography. */
.condition-page { line-height: 1.65; }
.condition-page .condition-header-nav [aria-current] { text-decoration: underline; text-underline-offset: 5px; }
@media (max-width: 600px) {
	.condition-page .condition-header-nav { gap: 12px; font-size: .9rem; }
}