/* TrustTabs public site — "Compliance-first" redesign (2026-10-29).
   The manager app still uses /style.css; nothing here affects it. */

:root{
	--ink: #161b22;
	--text: #232a33;
	--text-2: #3a424d;
	--muted: #5a6270;
	--line: #e4e2dc;
	--line-strong: #d8d5cc;
	--stone: #f7f6f2;
	--accent: #0b5563;
	--accent-dark: #073c46;
	--accent-tint: #e6f0ef;
	--serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
	--sans: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*, *::before, *::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
	margin: 0;
	background: #ffffff;
	color: var(--text);
	font-family: var(--sans);
	font-size: 17px;
	line-height: 1.65;
	-webkit-text-size-adjust: 100%;
}

a{ color: var(--accent); }
a:hover{ color: var(--accent-dark); }
img{ max-width: 100%; height: auto; }

h1, h2, h3{
	font-family: var(--serif);
	font-weight: 600;
	color: var(--ink);
	letter-spacing: -0.015em;
	margin: 0;
}

p{ margin: 0; }

.container{
	max-width: 1080px;
	margin: 0 auto;
	padding-left: 24px;
	padding-right: 24px;
}

.skip-link{
	position: absolute;
	left: -10000px;
}
.skip-link:focus{
	left: 16px;
	top: 16px;
	z-index: 10;
	background: #ffffff;
	padding: 8px 12px;
}

/* Buttons */
.btn{
	display: inline-block;
	text-decoration: none;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	border-radius: 4px;
	padding: 14px 24px;
	border: 1px solid transparent;
	line-height: 1.3;
	text-align: center;
}
.btn-primary{ background: var(--accent); color: #ffffff; }
.btn-primary:hover{ background: var(--accent-dark); color: #ffffff; }
.btn-secondary{ border-color: #b9b6ad; color: var(--ink); background: #ffffff; }
.btn-secondary:hover{ border-color: var(--ink); color: var(--ink); }
.btn-light{ background: #ffffff; color: var(--ink); }
.btn-light:hover{ background: #e9ecef; color: var(--ink); }
.btn-outline-light{ border-color: #5a6270; color: #ffffff; }
.btn-outline-light:hover{ border-color: #ffffff; color: #ffffff; }
.btn-small{ padding: 10px 18px; }
.btn-row{ display: flex; flex-wrap: wrap; gap: 14px; }

/* Header */
.site-header{ border-bottom: 1px solid var(--line); background: #ffffff; }
.header-inner{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-top: 20px;
	padding-bottom: 20px;
}
.brand{ display: flex; align-items: baseline; gap: 10px; text-decoration: none; color: var(--ink); }
.brand:hover{ color: var(--ink); }
.brand-name{ font-family: var(--serif); font-weight: 700; font-size: 24px; letter-spacing: -0.01em; color: var(--ink); }
.brand-tag{ font-size: 13px; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }
.site-nav{ display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; font-size: 16px; }
.site-nav a:not(.btn){ text-decoration: none; color: var(--text-2); padding: 10px 0; }
.site-nav a:not(.btn):hover, .site-nav a[aria-current="page"]{ color: var(--accent); }
.site-nav a[aria-current="page"]{ font-weight: 600; }

/* Sections */
.section{ padding: 112px 0; }
.section-stone{ background: var(--stone); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.eyebrow{
	font-size: 14px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--accent);
	font-weight: 600;
}
.section-title{ font-size: 42px; line-height: 1.15; }
.lead{ font-size: 20px; color: var(--text-2); }
.note{ font-size: 15px; color: var(--muted); }
.stack{ display: flex; flex-direction: column; gap: 18px; }
.split{ display: flex; flex-wrap: wrap; gap: 64px; align-items: flex-start; }
.split-center{ align-items: center; }
.split > *{ min-width: 0; }
.col-narrow{ flex: 1 1 320px; }
.col-wide{ flex: 1 1 520px; }

/* Hero */
.hero{ padding: 112px 0 96px; }
.hero h1{ max-width: 880px; font-size: 64px; line-height: 1.08; letter-spacing: -0.02em; }
.hero .lead{ max-width: 680px; }
.hero .stack{ gap: 28px; }

/* Problem strip */
.problems{ display: flex; flex-wrap: wrap; gap: 48px; padding-top: 72px; padding-bottom: 72px; }
.problem{ flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.problem-num{ font-family: var(--serif); font-size: 15px; color: var(--muted); }
.problem h2{ font-size: 24px; line-height: 1.25; letter-spacing: 0; }
.problem p{ color: var(--text-2); }

/* Checklist */
.panel{ border: 1px solid var(--line-strong); border-radius: 6px; background: #ffffff; }
.panel-head{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px;
	padding: 18px 28px;
	border-bottom: 1px solid var(--line-strong);
}
.panel-title{ font-family: var(--serif); font-weight: 600; font-size: 19px; color: var(--ink); }
.checklist{ margin: 0; padding: 0; list-style: none; }
.checklist li{ display: flex; gap: 16px; padding: 18px 28px; border-bottom: 1px solid #eceae4; }
.checklist li:last-child{ border-bottom: none; }
.checklist svg{ flex: none; margin-top: 3px; }
.checklist strong{ display: block; color: var(--ink); }
.checklist span{ display: block; font-size: 15px; color: #4a525e; }

/* Report sheets */
.reports{ display: flex; flex-wrap: wrap; gap: 40px; }
.report{ flex: 1 1 440px; min-width: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; }
.sheet{
	background: #ffffff;
	border: 1px solid var(--line-strong);
	box-shadow: 0 14px 30px -18px rgba(22, 27, 34, 0.35);
	padding: 40px 40px 48px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	font-size: 14px;
}
.sheet-head{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px;
	border-bottom: 2px solid var(--ink);
	padding-bottom: 12px;
	color: var(--muted);
}
.sheet-head strong{ font-family: var(--serif); font-size: 18px; color: var(--ink); }
.sheet-row{ display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid #eceae4; color: var(--text-2); }
.num{ font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); text-align: right; white-space: nowrap; }
.sheet-ok{ display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; padding: 12px 14px; background: var(--accent-tint); color: var(--accent-dark); font-weight: 600; }
.sheet-sign{ display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; color: var(--muted); font-size: 13px; padding-top: 12px; }
.sheet-table-wrap{ overflow-x: auto; }
.sheet table{ width: 100%; border-collapse: collapse; min-width: 320px; }
.sheet th{ text-align: left; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; padding: 0 0 8px; }
.sheet td{ padding: 9px 0; border-top: 1px solid #eceae4; color: var(--text-2); }
.sheet tr.total td{ border-top: 2px solid var(--ink); font-weight: 700; color: var(--ink); }
.report figcaption{ font-size: 15px; color: #4a525e; }
.report figcaption strong{ color: var(--ink); }

/* Pricing */
.price-card{ border: 1px solid var(--line-strong); border-top: 4px solid var(--accent); border-radius: 6px; padding: 40px; display: flex; flex-direction: column; gap: 22px; }
.price-label{ font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.price{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.price-amount{ font-family: var(--serif); font-weight: 700; font-size: 64px; line-height: 1.1; color: var(--ink); }
.price-term{ font-size: 18px; color: #4a525e; }
.ticks{ margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; color: var(--text-2); }
.ticks li{ display: flex; gap: 12px; align-items: flex-start; }
.ticks svg{ flex: none; margin-top: 5px; }

/* FAQ */
.faq-list details{ border-top: 1px solid var(--line-strong); padding: 22px 0; }
.faq-list details:last-child{ border-bottom: 1px solid var(--line-strong); }
.faq-list summary{
	cursor: pointer;
	font-family: var(--serif);
	font-weight: 600;
	font-size: 21px;
	color: var(--ink);
	min-height: 44px;
	display: flex;
	align-items: center;
}
.faq-list details p{ margin-top: 12px; color: var(--text-2); }

/* Closing call to action */
.cta{ background: var(--ink); color: #c3c8cf; padding: 96px 0; }
.cta h2{ color: #ffffff; font-size: 44px; line-height: 1.15; max-width: 760px; }
.cta p{ font-size: 19px; max-width: 620px; }
.cta .stack{ gap: 22px; }

/* Inner pages (About, FAQ, Contact, Privacy) */
.page-head{ padding: 88px 0 56px; border-bottom: 1px solid var(--line); }
.page-head h1{ font-size: 52px; line-height: 1.1; letter-spacing: -0.02em; }
.page-body{ padding: 64px 0 112px; }
.prose{ max-width: 720px; }
.prose > * + *{ margin-top: 1em; }
.prose h2{ font-size: 28px; margin-top: 1.6em; }
.prose h3, .prose h5{ font-family: var(--serif); font-size: 21px; font-weight: 600; color: var(--ink); margin: 1.6em 0 0; }
.prose ul{ padding-left: 1.3em; }
.prose li + li{ margin-top: 0.4em; }

/* Contact form (markup comes from contact.php) */
.contact-form{ max-width: 560px; display: flex; flex-direction: column; gap: 18px; }
.field{ display: flex; flex-direction: column; gap: 6px; }
.field label{ font-weight: 600; color: var(--ink); }
.field input, .field textarea{
	font: inherit;
	color: var(--ink);
	padding: 12px 14px;
	border: 1px solid #b9b6ad;
	border-radius: 4px;
	background: #ffffff;
	width: 100%;
}
.field input:focus, .field textarea:focus{ outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.field textarea{ min-height: 160px; resize: vertical; }
.form-message{ padding: 14px 18px; border-radius: 4px; font-weight: 600; }
.form-message-ok{ background: var(--accent-tint); color: var(--accent-dark); }
.form-message-error{ background: #f8e7e7; color: #7a1f1f; }
.contact-details{ display: flex; flex-direction: column; gap: 6px; color: var(--text-2); }
.contact-details strong{ color: var(--ink); }

/* Manager log in */
.login-form{ max-width: 420px; }
.login-aside{ background: var(--stone); border-radius: 6px; padding: 32px; display: flex; flex-direction: column; gap: 14px; }
.login-aside h2{ font-size: 22px; }

/* Footer */
.site-footer{ border-top: 1px solid var(--line); background: #ffffff; font-size: 15px; color: var(--muted); }
.footer-inner{ display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px 48px; padding-top: 48px; padding-bottom: 48px; }
.footer-brand{ flex: 1 1 360px; display: flex; flex-direction: column; gap: 8px; }
.footer-brand .brand-name{ font-size: 19px; }
.footer-brand a{ color: var(--muted); }
.footer-nav{ display: flex; flex-wrap: wrap; gap: 8px 24px; align-content: flex-start; }
.footer-nav a{ text-decoration: none; color: var(--text-2); }
.footer-nav a:hover{ color: var(--accent); }
.copyright{ flex-basis: 100%; }

/* Phone and tablet */
@media (max-width: 760px){
	body{ font-size: 16px; }
	.section{ padding: 72px 0; }
	.hero{ padding: 64px 0 56px; }
	.hero h1{ font-size: 40px; }
	.lead{ font-size: 18px; }
	.section-title{ font-size: 32px; }
	.cta{ padding: 64px 0; }
	.cta h2{ font-size: 32px; }
	.page-head{ padding: 56px 0 36px; }
	.page-head h1{ font-size: 38px; }
	.split{ gap: 40px; }
	.sheet{ padding: 24px 20px 28px; }
	.price-card{ padding: 28px 24px; }
	.price-amount{ font-size: 52px; }
	.brand-tag{ display: none; }
	.site-nav{ gap: 0 18px; }
}