/* memoceptz.com - Concord & Sun */
:root {
	--paper: #fffdf8;
	--cream: #fdf3dc;
	--wash: #f6effc;
	--grape: #6d1fb4;
	--grape-deep: #470e7e;
	--ink: #2b1145;
	--sun: #ffd23f;
	--sun-deep: #eab308;
	--leaf: #178f57;
	--line: #ead9c4;
	--white: #ffffff;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
img { height: auto; max-width: 100%; }
html { scroll-behavior: smooth; }
body {
	background: var(--paper);
	color: var(--ink);
	font-family: 'Atkinson Hyperlegible', Arial, sans-serif;
	font-size: 1.06rem;
	line-height: 1.65;
}
h1, h2, h3, .brand, .btn, .pack-per, .pz-per, .gband-num, .big-score, .e404-code {
	font-family: 'Baloo 2', 'Trebuchet MS', sans-serif;
}
h1 { font-size: clamp(1.9rem, 4.2vw, 3rem); line-height: 1.15; margin-bottom: .6em; }
h2 { font-size: clamp(1.45rem, 3vw, 2.1rem); line-height: 1.2; margin-bottom: .55em; }
h3 { font-size: 1.15rem; margin-bottom: .3em; }
p { margin-bottom: 1em; }
a { color: var(--grape); }
a:focus-visible, button:focus-visible, input:focus-visible + span { outline: 3px solid var(--sun-deep); outline-offset: 2px; }
.wrap { margin: 0 auto; max-width: 1100px; padding: 0 20px; }
.narrow { max-width: 780px; }
.center { text-align: center; }
.skip { background: var(--sun); color: var(--ink); left: 8px; padding: 8px 14px; position: absolute; top: -60px; z-index: 60; }
.skip:focus { top: 8px; }

/* announcement */
.sunbar {
	background: var(--sun);
	color: var(--ink);
	font-size: .92rem;
	font-weight: 700;
	padding: 8px 16px;
	text-align: center;
}

/* header */
.site-head { background: var(--white); border-bottom: 2px solid var(--line); position: sticky; top: 0; z-index: 50; }
.head-row { align-items: center; display: flex; gap: 20px; min-height: 66px; position: relative; }
.brand { color: var(--ink); font-size: 1.5rem; font-weight: 800; text-decoration: none; }
.brand-dot { color: var(--grape); }
.nav { margin-left: auto; }
.nav ul { display: flex; gap: 22px; list-style: none; }
.nav a { color: var(--ink); font-weight: 700; text-decoration: none; }
.nav a:hover, .nav a.now-here { color: var(--grape); }
.head-cta { white-space: nowrap; }
.menu-btn { background: none; border: 0; cursor: pointer; display: none; padding: 10px; }
.menu-btn span { background: var(--ink); border-radius: 2px; display: block; height: 3px; margin: 5px 0; width: 26px; }

/* buttons */
.btn {
	background: var(--grape);
	border: 0;
	border-radius: 999px;
	color: var(--white);
	display: inline-block;
	font-size: 1.02rem;
	font-weight: 800;
	padding: 12px 26px;
	text-decoration: none;
	transition: transform .15s ease, box-shadow .15s ease;
}
.btn-sun { background: var(--sun); box-shadow: 0 6px 0 var(--sun-deep); color: var(--ink); }
.btn-sun:hover { transform: translateY(-2px); }
.btn-big { font-size: 1.3rem; padding: 16px 44px; }

/* hero */
.hero {
	background: linear-gradient(140deg, var(--grape-deep) 0%, var(--grape) 62%, #8a3bdd 100%);
	color: var(--white);
	overflow: hidden;
	position: relative;
	text-align: center;
}
.hero::before, .hero::after {
	background: radial-gradient(circle, rgba(255, 210, 63, .35) 0%, rgba(255, 210, 63, 0) 70%);
	border-radius: 50%;
	content: "";
	height: 420px;
	position: absolute;
	width: 420px;
}
.hero::before { left: -140px; top: -120px; }
.hero::after { bottom: -160px; right: -120px; }
.hero-in { padding: 44px 20px 0; position: relative; z-index: 1; }
.eyebrow { color: var(--sun); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.hero h1 { margin: 8px auto 14px; max-width: 820px; }
.hero-def { margin: 0 auto 12px; max-width: 760px; }
.hero-rate a { color: var(--sun); }
.stars { color: var(--sun); letter-spacing: 2px; }
.hero-img { display: block; margin: 18px auto -8px; max-width: 420px; width: 100%; }

/* order box */
.order { background: linear-gradient(180deg, #8a3bdd 0%, var(--grape) 30%, var(--paper) 30.1%); padding: 34px 0 46px; }
.order h2 { color: var(--white); }
.order-sub { color: #f0e4ff; margin-bottom: 22px; }
.packs { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); }
.pack {
	background: var(--white);
	border: 3px solid var(--line);
	border-radius: 22px;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 26px 20px 20px;
	position: relative;
	text-align: center;
	transition: border-color .15s ease, transform .15s ease;
}
.pack:hover { transform: translateY(-3px); }
.pack input { position: absolute; opacity: 0; }
.pack input:checked ~ .pack-n { color: var(--grape); }
.pack:has(input:checked) { border-color: var(--grape); box-shadow: 0 14px 34px rgba(77, 19, 135, .18); }
.pack[data-plan="mz6"]:has(input:checked) { background: linear-gradient(180deg, #fff 62%, var(--wash) 100%); }
.pack-flag {
	background: var(--grape);
	border-radius: 999px;
	color: var(--white);
	font-size: .78rem;
	font-weight: 800;
	left: 50%;
	letter-spacing: .04em;
	padding: 4px 14px;
	position: absolute;
	text-transform: uppercase;
	top: -14px;
	transform: translateX(-50%);
}
.pack[data-plan="mz6"] .pack-flag { background: var(--sun); color: var(--ink); }
.pack-n { font-size: 1.3rem; font-weight: 800; }
.pack-days { color: #6b5a80; font-size: .92rem; }
.pack-per { color: var(--ink); font-size: 2rem; font-weight: 800; margin-top: 6px; }
.pack-per em { color: #6b5a80; font-size: .95rem; font-style: normal; font-weight: 400; }
.pack-total s { color: #9a8bab; }
.pack-save { color: var(--leaf); font-weight: 700; }
.pack-ship { color: #6b5a80; font-size: .9rem; }
.price-zone { background: var(--white); border: 3px solid var(--grape); border-radius: 26px; box-shadow: 0 18px 44px rgba(77, 19, 135, .14); margin: 26px auto 0; max-width: 560px; padding: 26px 24px 24px; text-align: center; }
.pz-per { font-size: 3.2rem; font-weight: 800; line-height: 1; }
.pz-unit { color: #6b5a80; font-family: 'Atkinson Hyperlegible', sans-serif; font-size: 1rem; font-weight: 400; margin-left: 8px; }
.pz-total { margin: 6px 0 2px; }
.pz-total s { color: #9a8bab; }
.pz-save { color: var(--leaf); font-weight: 700; margin-bottom: 14px; }
.pz-ship { color: #6b5a80; margin: 10px 0 12px; }
.pz-trust { color: #4c3868; font-size: .92rem; list-style: none; }
.pz-trust li { padding: 3px 0; }
.pz-trust li::before { color: var(--leaf); content: "\2713  "; font-weight: 700; }

/* trust strip */
.strip { background: var(--grape-deep); color: var(--white); }
.strip-row { display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: center; padding: 14px 20px; }
.strip-row span { font-size: .92rem; font-weight: 700; }
.strip-row span::before { color: var(--sun); content: "\2600  "; }

/* sections */
.sect { padding: 52px 0; }
.sect-cream { background: var(--cream); }
.sect-grape { background: var(--grape-deep); color: var(--white); }
.sect-grape a { color: var(--sun); }
.tldr { font-size: 1.14rem; }
.grid3 { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); }
.grid5 { display: grid; gap: 16px; grid-template-columns: repeat(5, 1fr); }
.card, .mini { background: var(--white); border: 2px solid var(--line); border-radius: 20px; padding: 22px 18px; }
.mini h3 { font-size: 1rem; }
.mini p { font-size: .92rem; margin: 0; }
.note { background: var(--wash); border-left: 5px solid var(--grape); border-radius: 0 14px 14px 0; margin-top: 20px; padding: 14px 18px; }
.facts { border-collapse: collapse; width: 100%; }
.facts th, .facts td { border-bottom: 1px solid var(--line); padding: 11px 12px; text-align: left; vertical-align: top; }
.facts th { color: var(--grape-deep); white-space: nowrap; width: 34%; }
.steps { counter-reset: st; list-style: none; }
.steps li { margin-bottom: 14px; padding-left: 52px; position: relative; }
.steps li::before {
	background: var(--sun);
	border-radius: 50%;
	color: var(--ink);
	content: counter(st);
	counter-increment: st;
	font-family: 'Baloo 2', sans-serif;
	font-weight: 800;
	height: 36px;
	left: 0;
	line-height: 36px;
	position: absolute;
	text-align: center;
	top: 0;
	width: 36px;
}
.rate-line { margin-bottom: 20px; }
.rev { background: var(--white); border: 2px solid var(--line); border-radius: 20px; display: flex; flex-direction: column; padding: 20px; }
.rev p { flex: 1; }
.rev footer { font-weight: 700; }
.rev footer span { color: #6b5a80; display: block; font-size: .85rem; font-weight: 400; }
.link-big { font-size: 1.1rem; font-weight: 700; }
.qa { border-bottom: 2px solid var(--line); margin-bottom: 18px; padding-bottom: 12px; }
.qa:last-of-type { border-bottom: 0; }
.gband { background: var(--sun); padding: 40px 0; }
.gband-row { align-items: center; display: flex; gap: 30px; }
.gband-num { font-size: 6rem; font-weight: 800; line-height: 1; }
.gband p { margin: 0; }
.takeaways { list-style: none; }
.takeaways li { margin-bottom: 8px; padding-left: 30px; position: relative; }
.takeaways li::before { color: var(--grape); content: "\2726"; left: 4px; position: absolute; }
.updated { color: #6b5a80; font-size: .9rem; }
.refs { background: var(--wash); padding: 40px 0; }
.ref-list { padding-left: 22px; }
.ref-list li { margin-bottom: 6px; }
.final-cta { background: linear-gradient(140deg, var(--grape-deep), var(--grape)); color: var(--white); }

/* longform pages */
.longform { padding: 44px 0 56px; }
.longform h1 { margin-top: 0; }
.longform h2 { margin-top: 1.5em; }
.lead { font-size: 1.13rem; }
.byline { color: #6b5a80; font-size: .92rem; }
.tldr-box, .cta-band { background: var(--cream); border-radius: 20px; margin: 22px 0; padding: 22px 24px; }
.cta-band { align-items: center; display: flex; gap: 20px; justify-content: space-between; }
.cta-band p { font-size: 1.1rem; font-weight: 700; margin: 0; }
.label-panel { background: var(--white); border: 3px solid var(--ink); border-radius: 6px; margin: 18px 0 26px; padding: 16px 18px; }
.lp-title { font-family: 'Baloo 2', sans-serif; font-size: 1.5rem; font-weight: 800; }
.lp-line { border-bottom: 6px solid var(--ink); padding-bottom: 6px; }
.lp-table { border-collapse: collapse; width: 100%; }
.lp-table th, .lp-table td { border-bottom: 1px solid var(--ink); font-size: .95rem; padding: 7px 6px; text-align: left; }
.lp-note { font-size: .85rem; margin: 8px 0 0; }
.glossary dt { color: var(--grape-deep); font-weight: 700; margin-top: 10px; }
.glossary dd { margin-left: 0; }
.rev-summary { align-items: center; display: flex; gap: 34px; margin: 20px 0; }
.big-score { font-size: 4.4rem; font-weight: 800; line-height: 1; }
.big-score span { color: #6b5a80; font-size: 1.4rem; }
.dist { flex: 1; }
.dbar { align-items: center; display: flex; gap: 10px; margin-bottom: 6px; }
.dbar-l { min-width: 110px; }
.dbar-t { background: var(--wash); border-radius: 999px; flex: 1; height: 14px; overflow: hidden; }
.dbar-f { background: var(--grape); border-radius: 999px; display: block; height: 100%; }
.dbar-p { min-width: 42px; text-align: right; }
.stat-strip { display: grid; gap: 14px; grid-template-columns: repeat(5, 1fr); margin: 26px 0; }
.stat-strip div { background: var(--cream); border-radius: 16px; padding: 14px 10px; text-align: center; }
.stat-strip strong { display: block; font-family: 'Baloo 2', sans-serif; font-size: 1.5rem; }
.stat-strip span { color: #4c3868; font-size: .85rem; }
.rev-wall { display: grid; gap: 18px; grid-template-columns: repeat(2, 1fr); }
.themes { list-style: none; }
.themes li { border-bottom: 1px solid var(--line); padding: 7px 0; }
.themes strong { color: var(--grape-deep); display: inline-block; min-width: 56px; }
.faq-item { background: var(--white); border: 2px solid var(--line); border-radius: 16px; margin-bottom: 12px; padding: 0; }
.faq-item summary { cursor: pointer; font-weight: 700; list-style: none; padding: 15px 44px 15px 18px; position: relative; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { color: var(--grape); content: "+"; font-family: 'Baloo 2', sans-serif; font-size: 1.5rem; position: absolute; right: 18px; top: 8px; }
.faq-item[open] summary::after { content: "\2212"; }
.faq-item p { padding: 0 18px 15px; }
.contact-card { background: var(--cream); border-radius: 16px; padding: 18px 20px; }
.e404 { padding: 70px 0; }
.e404-code { color: var(--grape); font-size: 6rem; font-weight: 800; line-height: 1; }

/* footer */
.site-foot { background: var(--ink); color: #d9cdee; padding: 46px 0 30px; }
.site-foot a { color: var(--sun); text-decoration: none; }
.site-foot a:hover { text-decoration: underline; }
.foot-grid { display: grid; gap: 30px; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; margin-bottom: 26px; }
.foot-logo { color: var(--white); font-size: 1.3rem; }
.foot-firm { font-size: .9rem; }
.site-foot h3 { color: var(--white); font-size: 1rem; margin-bottom: 8px; }
.site-foot ul { list-style: none; }
.site-foot li { margin-bottom: 6px; }
.foot-pay { border-top: 1px solid #4c3868; font-size: .9rem; padding-top: 18px; }
.foot-small { color: #b3a3cc; font-size: .82rem; margin-bottom: 10px; }

/* tray */
.tray {
	background: var(--grape-deep);
	bottom: 0;
	box-shadow: 0 -8px 24px rgba(43, 17, 69, .3);
	color: var(--white);
	left: 0;
	opacity: 0;
	position: fixed;
	right: 0;
	transform: translateY(100%);
	transition: transform .25s ease, opacity .25s ease;
	visibility: hidden;
	z-index: 40;
}
.tray.now-stuck { opacity: 1; transform: translateY(0); visibility: visible; }
.tray-row { align-items: center; display: flex; gap: 16px; padding: 10px 20px; }
.tray-name { font-family: 'Baloo 2', sans-serif; font-size: 1.15rem; font-weight: 800; }
.tray-pick { margin-left: auto; }
.tray-go { box-shadow: none; padding: 9px 22px; }

section[id], h2[id] { scroll-margin-top: 90px; }

/* responsive */
@media (max-width: 900px) {
	.grid5 { grid-template-columns: repeat(2, 1fr); }
	.stat-strip { grid-template-columns: repeat(2, 1fr); }
	.foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
	.nav {
		background: var(--white);
		border-bottom: 2px solid var(--line);
		left: 0;
		opacity: 0;
		position: absolute;
		right: 0;
		top: 100%;
		transition: opacity .2s ease, visibility 0s linear .2s;
		visibility: hidden;
	}
	.nav.now-open { opacity: 1; transition: opacity .2s ease, visibility 0s; visibility: visible; }
	.nav ul { flex-direction: column; gap: 0; padding: 10px 20px; }
	.nav li { border-bottom: 1px solid var(--line); }
	.nav a { display: block; padding: 13px 0; }
	.menu-btn { display: block; margin-left: auto; }
	.head-cta { display: none; }
	.nav { z-index: 55; }
	.packs { grid-template-columns: 1fr; }
	.pack[data-plan="mz6"] { order: -1; }
	.grid3, .rev-wall { grid-template-columns: 1fr; }
	.gband-row { flex-direction: column; text-align: center; }
	.rev-summary { flex-direction: column; gap: 16px; }
	.dist { width: 100%; }
	.cta-band { flex-direction: column; text-align: center; }
	.tray-pick { font-size: .92rem; }
	.hero-img { max-width: 320px; }
}