/* Site-wide pieces (owner 2026-10-24): the header every page shares, the black button, and the home and 404 pages,
   laid out like ramp.com (centred title, grey line under it, beige cards). Type sizes come from css/sh-type.css.
   Loaded on every page from functions.php (sh_site_styles). */

/* The header (owner 2026-10-23, on every page since 2026-10-24): small logo (dark bar on top removed 2026-10-24), "Need help?";
   the checkout adds "Secure checkout". header.php gives it the class header--co. */
.header.header--co { background: #fff; border-bottom: 1px solid #ececef; }
.header--co .wrapper--header { align-items: center; padding-top: 0; padding-bottom: 0; }
.header--co .header__logo { flex: 0 0 auto; max-width: none; padding: 18px 0; }
.header--co .header__logo a { display: block; line-height: 0; }
.header--co .header__logo img { width: auto; height: 20px; display: block; }
.header--co .header__help { flex: 1 1 auto; display: flex; align-items: center; justify-content: flex-end; gap: 22px; padding: 18px 0; }
.header--co .header__help a { font: 600 13px/1 "Inter", Helvetica, Arial, sans-serif; color: #111014; text-decoration: none; }
.header--co .header__help a:hover { color: #3318d8; }
.header__secure { display: inline-flex; align-items: center; gap: 7px; font: 500 12.5px/1 "Inter", Helvetica, Arial, sans-serif; color: #6b7280; }
.header__secure::before { content: ""; width: 13px; height: 13px; background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='4.5' y='10.5' width='15' height='10' rx='2'/%3E%3Cpath d='M8 10.5V7a4 4 0 018 0v3.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='4.5' y='10.5' width='15' height='10' rx='2'/%3E%3Cpath d='M8 10.5V7a4 4 0 018 0v3.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.header--co .header__help a, .header__secure { white-space: nowrap; }
@media (max-width: 639px) {
	.header--co .header__logo img { height: 16px; }
	.header--co .header__secure { display: none; }
}

/* short pages (home, 404): white page, footer pinned to the bottom of the window */
body.sh-plain { display: flex; flex-direction: column; min-height: 100vh; background: #fff; }
body.sh-plain > main { flex: 1 0 auto; }

/* the black button, same as "Complete My Order" */
.sh-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 24px; border-radius: 6px;
	background: #111014; box-shadow: 0 10px 24px rgba(17, 16, 20, .22); color: #fff !important; font: 500 16px/1.2 "Inter", Helvetica, Arial, sans-serif;
	letter-spacing: -.01em; text-decoration: none !important; transition: background-color .15s; }
.sh-btn::after { content: "\2192"; }
.sh-btn:hover { background: #2a2930; }

/* home */
.sh-home { display: flex; align-items: center; padding: 96px 16px; }
.sh-home__wrap { max-width: 760px; margin: 0 auto; text-align: center; }
.sh-home__title { margin: 0; padding: 0; font-size: 44px; line-height: 1.08; letter-spacing: -.032em; text-wrap: balance; color: #111014; }
.sh-home__lead { max-width: 34em; margin: 18px auto 32px; padding: 0; font-size: 18px; line-height: 1.45; letter-spacing: -.01em; color: rgba(17, 16, 20, .62); text-wrap: pretty; }

/* 404 */
.sh-404 { padding: 88px 16px 96px; }
.sh-404__wrap { max-width: 1040px; margin: 0 auto; }
.sh-404__title { margin: 0; padding: 0; font-size: 52px; line-height: 1.04; letter-spacing: -.035em; text-align: center; text-wrap: balance; color: #111014; }
.sh-404__lead { margin: 18px 0 0; padding: 0; font-size: 18px; line-height: 1.45; text-align: center; color: rgba(17, 16, 20, .62); }
.sh-404__cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 56px; }
.sh-404__card { padding: 40px 32px; border-radius: 8px; background: #f4f3f0; text-align: center; }
.sh-404__card h2 { margin: 0; padding: 0; font-size: 28px; line-height: 1.15; letter-spacing: -.025em; color: #111014; }
.sh-404__card > p { max-width: 26em; margin: 12px auto 28px; padding: 0; font-size: 16px; line-height: 1.45; color: rgba(17, 16, 20, .62); }
.sh-404__links { max-width: 340px; margin: 0 auto; padding: 0; list-style: none; text-align: left; }
.sh-404__links li { margin: 0; padding: 0; border-bottom: 1px solid rgba(17, 16, 20, .14); }
.sh-404__links a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 0; font-size: 15px;
	color: rgba(17, 16, 20, .62); text-decoration: none; transition: color .15s; }
.sh-404__links a::after { content: "\2192"; color: #111014; }
.sh-404__links a:hover { color: #111014; }
.sh-404 .sh-404__card .sh-404__note { max-width: 340px; margin: 20px auto 0; font-size: 13px; line-height: 1.45; color: rgba(17, 16, 20, .48); text-align: left; }

@media (min-width: 800px) {
	.sh-404__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sh-404__card { padding: 56px 40px; }
}
@media (max-width: 639px) {
	.sh-home { padding: 56px 16px 64px; }
	.sh-home__title { font-size: 32px; }
	.sh-home__lead { font-size: 16px; }
	.sh-404 { padding: 48px 16px 64px; }
	.sh-404__title { font-size: 34px; line-height: 1.08; }
	.sh-404__lead { font-size: 16px; }
	.sh-404__cards { margin-top: 36px; }
	.sh-404__card { padding: 32px 20px; }
	.sh-404__card h2 { font-size: 22px; }
}

/* old brief form ("Fill in your brief", no personal link): heading was an h3 (accessibility: heading levels in order),
   purple button too faint for white text -> the black button like everywhere else */
.submission__form .submission__heading { margin: 0; padding: 1em 0; border-bottom: 1px solid #3f4651; }
html body .submission__form [class*=uacf7-form-] .wpcf7-submit { background: #111014 !important; border: 1px solid #111014; border-radius: 6px;
	box-shadow: 0 10px 24px rgba(17, 16, 20, .22); font-size: 16px; font-weight: 500; }
html body .submission__form [class*=uacf7-form-] .wpcf7-submit:hover { background: #2a2930 !important; }