/* ==========================================================================
   Timely — index.css
   Square-Classic design system: white canvas, near-black ink, deep-teal accent.
   Sections: tokens · base · layout · buttons · header · footer · hero ·
             logos · problem · features · how · pricing · faq · cta · forms ·
             legal · utilities · responsive
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root{
	/* color */
	--ink:        #14181b;   /* primary text (AAA on white) */
	--ink-2:      #3b454c;   /* secondary text */
	--muted:      #586068;   /* muted text (AA on white) */
	--line:       #e6e9ec;   /* hairline borders */
	--line-2:     #d7dde1;
	--bg:         #ffffff;
	--bg-soft:    #f6f8f8;   /* alternating section bg */
	--bg-tint:    #eef5f3;   /* faint teal wash */

	--teal:       #0a6b5e;   /* accent (white text passes AA) */
	--teal-dark:  #074c43;   /* hover / pressed */
	--teal-deep:  #053b34;
	--teal-ink:   #0a5a4f;   /* teal text on white (AA) */
	--teal-50:    #e7f3f0;
	--teal-100:   #cfe9e3;
	--mint:       #16b89a;   /* "live" highlight */
	--coral:      #e8745b;   /* sparingly, for warmth */

	--danger:     #c43d2f;
	--ok:         #0a6b5e;

	/* type */
	--font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	/* spacing / radius / shadow */
	--maxw: 1140px;
	--gutter: 24px;
	--radius: 14px;
	--radius-lg: 22px;
	--radius-pill: 999px;
	--shadow-sm: 0 1px 2px rgba(16,24,28,.06), 0 2px 8px rgba(16,24,28,.05);
	--shadow:    0 8px 24px rgba(16,24,28,.08), 0 2px 6px rgba(16,24,28,.05);
	--shadow-lg: 0 24px 60px rgba(5,37,31,.16);
	--ring: 0 0 0 3px rgba(10,107,94,.30);

	--header-h: 68px;
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 16px); }
body{
	margin:0;
	font-family:var(--font);
	font-size:17px;
	line-height:1.6;
	color:var(--ink);
	background:var(--bg);
	-webkit-font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{ color:var(--ink); line-height:1.12; margin:0 0 .5em; letter-spacing:-.02em; font-weight:800; }
h1{ font-size:clamp(2.3rem, 5vw, 3.6rem); }
h2{ font-size:clamp(1.8rem, 3.4vw, 2.6rem); letter-spacing:-.025em; }
h3{ font-size:1.25rem; font-weight:700; letter-spacing:-.01em; }
p{ margin:0 0 1rem; color:var(--ink-2); }
a{ color:var(--teal-ink); text-decoration:none; }
a:hover{ color:var(--teal-dark); text-decoration:underline; }
img,svg{ max-width:100%; display:block; }
ul{ margin:0; padding:0; }
strong{ color:var(--ink); font-weight:700; }
:focus-visible{ outline:none; box-shadow:var(--ring); border-radius:6px; }

.skip-link{
	position:absolute; left:-9999px; top:8px; z-index:1000;
	background:var(--ink); color:#fff; padding:10px 16px; border-radius:10px;
}
.skip-link:focus{ left:16px; color:#fff; text-decoration:none; }

/* ---------- Layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); }
.section{ padding:84px 0; }
.section-tight{ padding:56px 0; }
.section-soft{ background:var(--bg-soft); }
.section-head{ max-width:680px; margin:0 auto 52px; text-align:center; }
.section-head.left{ margin-left:0; text-align:left; }
.eyebrow{
	display:inline-block; font-size:.8rem; font-weight:700; letter-spacing:.12em;
	text-transform:uppercase; color:var(--teal-ink); margin-bottom:14px;
}
.lead{ font-size:1.18rem; color:var(--ink-2); }
.center{ text-align:center; }

/* ---------- Buttons ---------- */
.btn{
	display:inline-flex; align-items:center; justify-content:center; gap:.5em;
	font-family:inherit; font-size:1rem; font-weight:700; line-height:1;
	padding:14px 22px; border-radius:var(--radius-pill);
	border:1.5px solid transparent; cursor:pointer; white-space:nowrap;
	transition:transform .08s ease, background .15s ease, box-shadow .15s ease, color .15s ease, border-color .15s ease;
	text-decoration:none;
}
.btn:hover{ text-decoration:none; }
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--teal); color:#fff; box-shadow:var(--shadow-sm); }
.btn-primary:hover{ background:var(--teal-dark); color:#fff; }
.btn-dark{ background:var(--ink); color:#fff; }
.btn-dark:hover{ background:#000; color:#fff; }
.btn-ghost{ background:#fff; color:var(--ink); border-color:var(--line-2); }
.btn-ghost:hover{ border-color:var(--ink); color:var(--ink); background:#fff; }
.btn-light{ background:#fff; color:var(--teal-ink); }
.btn-light:hover{ background:#f1f5f4; color:var(--teal-dark); }
.btn-outline-light{ background:transparent; color:#fff; border-color:rgba(255,255,255,.55); }
.btn-outline-light:hover{ border-color:#fff; background:rgba(255,255,255,.10); color:#fff; }
.btn-sm{ padding:10px 18px; font-size:.95rem; }
.btn-lg{ padding:17px 30px; font-size:1.08rem; }
.btn-block{ width:100%; }
.btn:disabled,.btn[disabled]{ opacity:.55; cursor:not-allowed; transform:none; }

.btn-row{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.btn-note{ font-size:.92rem; color:var(--muted); margin:0; }

/* ---------- Header ---------- */
.site-header{
	position:sticky; top:0; z-index:100;
	background:rgba(255,255,255,.88);
	backdrop-filter:saturate(180%) blur(12px);
	-webkit-backdrop-filter:saturate(180%) blur(12px);
	border-bottom:1px solid var(--line);
}
.header-inner{ height:var(--header-h); display:flex; align-items:center; justify-content:space-between; gap:18px; }
.brand{ display:inline-flex; align-items:center; gap:10px; color:var(--ink); font-weight:800; letter-spacing:-.02em; }
.brand:hover{ text-decoration:none; color:var(--ink); }
.brand-mark{ display:block; }
.brand-name{ font-size:1.22rem; }

.main-nav{ margin-left:auto; }
.nav-menu{ display:flex; align-items:center; gap:6px; list-style:none; }
.nav-menu > li > a{
	display:inline-block; padding:9px 14px; border-radius:10px;
	color:var(--ink-2); font-weight:600; font-size:.98rem;
}
.nav-menu > li > a:hover{ color:var(--ink); background:var(--bg-soft); text-decoration:none; }
.nav-menu > li > a.is-active{ color:var(--teal-ink); }
/* keep button links readable inside the nav (override the plain-link color above) */
.nav-menu .btn-primary,.nav-menu .btn-primary:hover{ color:#fff; background:var(--teal); }
.nav-menu .btn-primary:hover{ background:var(--teal-dark); }
.nav-cta-mobile{ display:none; }

.header-actions{ display:flex; align-items:center; gap:14px; }
.header-login{ color:var(--ink); font-weight:600; font-size:.98rem; }
.header-login:hover{ color:var(--teal-ink); text-decoration:none; }

.nav-toggle{ display:none; flex-direction:column; gap:5px; width:42px; height:42px; border:1px solid var(--line-2); border-radius:10px; background:#fff; cursor:pointer; align-items:center; justify-content:center; }
.nav-toggle span{ width:20px; height:2px; background:var(--ink); border-radius:2px; transition:.2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero{ padding:72px 0 84px; overflow:hidden; }
.hero-grid{ display:grid; grid-template-columns:1.05fr 1fr; gap:56px; align-items:center; }
.hero-copy h1{ margin-bottom:.35em; }
.hero-copy .lead{ max-width:34ch; margin-bottom:28px; }
.hero-badge{
	display:inline-flex; align-items:center; gap:8px; margin-bottom:22px;
	background:var(--teal-50); color:var(--teal-ink); font-weight:700; font-size:.85rem;
	padding:7px 14px; border-radius:var(--radius-pill); border:1px solid var(--teal-100);
}
.hero-badge .dot{ width:8px; height:8px; border-radius:50%; background:var(--mint); }
.hero-media{ position:relative; }
.hero-media img{ width:100%; height:auto; border-radius:var(--radius-lg); filter:drop-shadow(0 30px 50px rgba(5,37,31,.18)); }
.hero-trust{ margin-top:18px; display:flex; align-items:center; gap:10px; color:var(--muted); font-size:.95rem; }
.hero-trust svg{ flex:0 0 auto; }

/* ---------- Logo strip ---------- */
.logos{ padding:34px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.logos p{ text-align:center; color:var(--muted); font-size:.86rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; margin-bottom:18px; }
.logos-row{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:18px 40px; }
.logo-chip{ color:var(--ink-2); font-weight:800; font-size:1.15rem; letter-spacing:-.02em; opacity:.62; }

/* ---------- Problem narrative ---------- */
.problem-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:8px; }
.pain{
	background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
	padding:26px 24px; box-shadow:var(--shadow-sm);
}
.pain .ic{
	width:46px; height:46px; border-radius:12px; display:grid; place-items:center;
	background:#fbeae6; color:var(--coral); margin-bottom:16px;
}
.pain h3{ margin-bottom:.35em; }
.pain p{ margin:0; font-size:.98rem; }
.problem-kicker{ margin:40px auto 0; max-width:760px; text-align:center; font-size:1.15rem; color:var(--ink); font-weight:600; }
.problem-kicker .hl{ color:var(--teal-ink); }

/* ---------- Features ---------- */
.feature-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.feature{
	background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
	padding:30px 26px; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.feature:hover{ transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--line-2); }
.feature .ic{
	width:50px; height:50px; border-radius:14px; display:grid; place-items:center;
	background:var(--teal-50); color:var(--teal); margin-bottom:18px;
}
.feature h3{ margin-bottom:.4em; }
.feature p{ margin:0; font-size:1rem; }

.feature-wide{
	grid-column:1 / -1; display:grid; grid-template-columns:1fr 1fr; gap:34px; align-items:center;
	background:linear-gradient(135deg,#0d7c6c,#064038); color:#fff; border:none;
	border-radius:var(--radius-lg); padding:40px;
}
.feature-wide:hover{ transform:none; box-shadow:var(--shadow-lg); }
.feature-wide h3{ color:#fff; font-size:1.7rem; font-weight:800; }
.feature-wide p{ color:#cfeae3; font-size:1.05rem; }
.feature-wide .ic{ background:rgba(255,255,255,.14); color:#fff; }
.stat-row{ display:flex; gap:30px; flex-wrap:wrap; }
.stat .n{ font-size:2rem; font-weight:800; color:#fff; line-height:1; }
.stat .l{ color:#bfe5dd; font-size:.92rem; }

/* ---------- How it works ---------- */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.step{ position:relative; padding:30px 26px; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); }
.step-num{
	width:42px; height:42px; border-radius:50%; background:var(--ink); color:#fff;
	display:grid; place-items:center; font-weight:800; font-size:1.05rem; margin-bottom:18px;
}
.step h3{ margin-bottom:.4em; }
.step p{ margin:0; font-size:1rem; }

/* ---------- Pricing ---------- */
.price-wrap{ max-width:520px; margin:0 auto; }
.price-card{
	position:relative; background:#fff; border:2px solid var(--teal); border-radius:var(--radius-lg);
	padding:40px 36px; box-shadow:var(--shadow); text-align:center;
}
.price-flag{
	position:absolute; top:-14px; left:50%; transform:translateX(-50%);
	background:var(--teal); color:#fff; font-weight:700; font-size:.82rem; letter-spacing:.04em;
	padding:6px 16px; border-radius:var(--radius-pill);
}
.price-amount{ display:flex; align-items:flex-start; justify-content:center; gap:4px; margin:10px 0 4px; }
.price-amount .cur{ font-size:1.6rem; font-weight:700; color:var(--ink); margin-top:8px; }
.price-amount .num{ font-size:4.2rem; font-weight:800; color:var(--ink); line-height:1; letter-spacing:-.03em; }
.price-amount .per{ align-self:flex-end; color:var(--muted); font-weight:600; margin-bottom:12px; }
.price-sub{ color:var(--muted); margin-bottom:26px; }
.price-list{ list-style:none; text-align:left; margin:26px 0 30px; display:grid; gap:13px; }
.price-list li{ display:flex; align-items:flex-start; gap:11px; color:var(--ink-2); }
.price-list .chk{ flex:0 0 auto; width:22px; height:22px; border-radius:50%; background:var(--teal-50); color:var(--teal); display:grid; place-items:center; margin-top:1px; }
.price-fine{ font-size:.88rem; color:var(--muted); margin:16px 0 0; }

/* ---------- FAQ ---------- */
.faq-list{ max-width:760px; margin:0 auto; display:grid; gap:14px; }
.faq-item{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.faq-q{
	width:100%; text-align:left; background:none; border:0; cursor:pointer;
	display:flex; align-items:center; justify-content:space-between; gap:16px;
	padding:20px 22px; font-family:inherit; font-size:1.08rem; font-weight:700; color:var(--ink);
}
.faq-q:hover{ background:var(--bg-soft); }
.faq-q .pm{ flex:0 0 auto; width:24px; height:24px; transition:transform .2s ease; color:var(--teal); }
.faq-item.open .faq-q .pm{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .25s ease; }
.faq-a-inner{ padding:0 22px 20px; color:var(--ink-2); }
.faq-a-inner p{ margin:0; }

/* ---------- CTA band ---------- */
.cta-band{ background:linear-gradient(135deg,#0d7c6c,#053b34); color:#fff; }
.cta-inner{ text-align:center; padding:74px 0; }
.cta-inner h2{ color:#fff; max-width:18ch; margin:0 auto .5em; }
.cta-inner p{ color:#cfeae3; font-size:1.15rem; max-width:48ch; margin:0 auto 30px; }
.cta-inner .btn-row{ justify-content:center; }
.cta-inner .btn-note{ color:#bfe5dd; }

/* ---------- Forms / auth ---------- */
.auth{ padding:48px 0 80px; background:var(--bg-soft); min-height:calc(100vh - var(--header-h)); }
.auth-card{
	max-width:480px; margin:0 auto; background:#fff; border:1px solid var(--line);
	border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:38px 36px;
}
.auth-wide{ max-width:560px; }
.auth-head{ text-align:center; margin-bottom:26px; }
.auth-head h1{ font-size:1.9rem; margin-bottom:.3em; }
.auth-head p{ color:var(--muted); margin:0; }
.auth-foot{ text-align:center; margin-top:22px; color:var(--muted); font-size:.96rem; }

.field{ margin-bottom:18px; }
.field > label{ display:block; font-weight:600; font-size:.95rem; color:var(--ink); margin-bottom:7px; }
.field .hint{ font-weight:500; color:var(--muted); font-size:.86rem; }
.input{
	width:100%; font-family:inherit; font-size:1rem; color:var(--ink);
	padding:13px 14px; border:1.5px solid var(--line-2); border-radius:11px; background:#fff;
	transition:border-color .15s ease, box-shadow .15s ease;
}
.input::placeholder{ color:#9aa3a9; }
.input:focus{ outline:none; border-color:var(--teal); box-shadow:var(--ring); }
.input.is-invalid{ border-color:var(--danger); }
.input.is-valid{ border-color:var(--teal); }
select.input{ appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23586068' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:38px; }

.input-group{ display:flex; align-items:stretch; }
.input-group .input{ border-radius:11px 0 0 11px; border-right:0; }
.input-group .addon{
	display:flex; align-items:center; padding:0 14px; font-weight:700; color:var(--teal-ink);
	background:var(--teal-50); border:1.5px solid var(--line-2); border-left:0; border-radius:0 11px 11px 0;
}
.row-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }

.field-msg{ font-size:.84rem; margin-top:6px; min-height:1.1em; }
.field-msg.err{ color:var(--danger); }
.field-msg.ok{ color:var(--teal-ink); }

/* password meter */
.pw-meter{ height:6px; border-radius:4px; background:var(--line); overflow:hidden; margin-top:8px; }
.pw-meter > span{ display:block; height:100%; width:0; background:var(--coral); transition:width .2s ease, background .2s ease; }
.pw-meter.s1 > span{ width:25%; background:var(--coral); }
.pw-meter.s2 > span{ width:50%; background:#e0a52e; }
.pw-meter.s3 > span{ width:75%; background:#3a9d6b; }
.pw-meter.s4 > span{ width:100%; background:var(--teal); }

/* disclaimer / consent box */
.consent{
	margin:6px 0 20px; border:1.5px solid var(--line-2); border-radius:var(--radius);
	background:var(--bg-soft);
}
.consent-scroll{ max-height:184px; overflow-y:auto; padding:18px 20px; font-size:.9rem; color:var(--ink-2); }
.consent-scroll h4{ font-size:.92rem; margin:0 0 8px; color:var(--ink); text-transform:uppercase; letter-spacing:.05em; }
.consent-scroll p{ margin:0 0 10px; }
.consent-scroll ul{ margin:0 0 10px; padding-left:18px; list-style:disc; }
.consent-scroll li{ margin-bottom:6px; }
.consent-scroll strong{ color:var(--ink); }
.consent-check{ display:flex; gap:12px; align-items:flex-start; padding:16px 20px; border-top:1.5px solid var(--line-2); background:#fff; border-radius:0 0 var(--radius) var(--radius); }
.consent-check input[type=checkbox]{ flex:0 0 auto; width:22px; height:22px; margin-top:1px; accent-color:var(--teal); cursor:pointer; }
.consent-check label{ font-size:.92rem; color:var(--ink-2); cursor:pointer; }
.consent-check a{ font-weight:600; }

/* form-level alert */
.alert{ border-radius:11px; padding:13px 16px; font-size:.95rem; margin-bottom:18px; display:none; }
.alert.show{ display:block; }
.alert-err{ background:#fdecea; border:1px solid #f6c9c2; color:#9b2c20; }
.alert-ok{ background:var(--teal-50); border:1px solid var(--teal-100); color:var(--teal-dark); }

.divider{ display:flex; align-items:center; gap:14px; color:var(--muted); font-size:.85rem; margin:22px 0; }
.divider::before,.divider::after{ content:""; flex:1; height:1px; background:var(--line); }

/* ---------- Legal pages ---------- */
.legal{ padding:56px 0 80px; }
.legal-wrap{ max-width:780px; margin:0 auto; }
.legal h1{ font-size:clamp(2rem,4vw,2.8rem); margin-bottom:.2em; }
.legal .updated{ color:var(--muted); font-size:.95rem; margin-bottom:28px; }
.legal-notice{
	background:#fdf6ec; border:1px solid #f1dcb6; border-left:4px solid #d99a2b;
	border-radius:12px; padding:18px 20px; margin:0 0 30px; color:#6b4e16;
}
.legal-notice strong{ color:#5a3f0f; }
.legal h2{ font-size:1.45rem; margin:38px 0 .5em; }
.legal h3{ font-size:1.12rem; margin:24px 0 .4em; }
.legal p,.legal li{ color:var(--ink-2); }
.legal ul{ padding-left:20px; list-style:disc; margin:0 0 1rem; }
.legal li{ margin-bottom:8px; }
.legal-toc{ background:var(--bg-soft); border:1px solid var(--line); border-radius:14px; padding:20px 24px; margin-bottom:34px; }
.legal-toc h2{ font-size:1rem; margin:0 0 12px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink); }
.legal-toc ol{ margin:0; padding-left:20px; color:var(--ink-2); columns:2; column-gap:24px; }
.legal-toc li{ margin-bottom:6px; }
.legal-toc a{ color:var(--teal-ink); }

/* ---------- 404 / error page ---------- */
.errpage{ min-height:calc(100vh - var(--header-h)); display:grid; place-items:center; padding:64px 0; background:var(--bg-soft); }
.errpage-inner{ text-align:center; max-width:620px; }
.errpage-code{
	display:block; font-size:clamp(5rem,16vw,9rem); font-weight:800; line-height:.9;
	letter-spacing:-.04em; color:var(--teal); opacity:.16; margin-bottom:8px;
}
.errpage-inner h1{ margin-bottom:.3em; }
.errpage-inner .lead{ margin:0 auto 28px; max-width:46ch; }
.errpage-inner .btn-row{ justify-content:center; }
.errpage-links{ margin-top:24px; color:var(--muted); font-size:.95rem; }

/* ---------- Footer ---------- */
.site-footer{ background:#0b1416; color:#c7d0d2; padding:62px 0 30px; }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:36px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.10); }
.site-footer .brand{ color:#fff; }
.site-footer .brand:hover{ color:#fff; }
.site-footer .brand-name{ color:#fff; }
.footer-tag{ margin:14px 0 6px; color:#9fabad; max-width:30ch; }
.footer-free{ color:var(--mint); font-weight:700; font-size:.95rem; margin:0; }
.footer-col h3{ color:#fff; font-size:.82rem; text-transform:uppercase; letter-spacing:.08em; margin-bottom:14px; }
.footer-col ul{ list-style:none; display:grid; gap:10px; }
.footer-col a{ color:#aeb8ba; font-size:.96rem; }
.footer-col a:hover{ color:#fff; text-decoration:none; }
.footer-bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; padding-top:24px; }
.footer-bottom p{ margin:0; color:#8a9698; font-size:.88rem; }
.footer-bottom a{ color:#aeb8ba; }
.footer-disclaimer{ max-width:60ch; }

#injector_panel{ width:0; height:0; border:0; }

/* ---------- Utilities ---------- */
.nowrap{ white-space:nowrap; }
.hl{ color:var(--teal-ink); }
.mt-0{ margin-top:0; } .mb-0{ margin-bottom:0; }

/* ---------- Responsive ---------- */
@media (max-width:960px){
	.hero-grid{ grid-template-columns:1fr; gap:40px; }
	.hero-copy{ text-align:center; }
	.hero-copy .lead{ margin-left:auto; margin-right:auto; }
	.hero .btn-row{ justify-content:center; }
	.hero-trust{ justify-content:center; }
	.hero-media{ max-width:520px; margin:0 auto; }
	.feature-wide{ grid-template-columns:1fr; }
}
@media (max-width:820px){
	.header-actions{ display:none; }
	.nav-toggle{ display:flex; }
	.nav-menu{
		position:absolute; left:0; right:0; top:var(--header-h);
		flex-direction:column; align-items:stretch; gap:2px;
		background:#fff; border-bottom:1px solid var(--line); box-shadow:var(--shadow);
		padding:12px 16px 18px; display:none;
	}
	.nav-menu.open{ display:flex; }
	.nav-menu > li > a{ padding:13px 12px; font-size:1.05rem; }
	.nav-cta-mobile{ display:block; margin-top:6px; }
	.nav-cta-mobile .btn{ width:100%; }
	.problem-grid,.feature-grid,.steps{ grid-template-columns:1fr; }
	.row-2{ grid-template-columns:1fr; }
	.legal-toc ol{ columns:1; }
}
@media (max-width:520px){
	body{ font-size:16px; }
	.section{ padding:60px 0; }
	.auth-card{ padding:28px 22px; }
	.stat-row{ gap:20px; }
}

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


/* ==========================================================================
   ============================================================================
   OWNER MANAGEMENT  (logged-in web page served at /home)
   Shell · topbar · sidebar · views · cards · tables · panels · modal · toast
   ============================================================================
   ========================================================================== */
:root{
	--topbar-h: 60px;
	--side-w: 252px;
	--side-w-min: 74px;
}

/* ---------- shell ---------- */
.app-body{ background:var(--bg-soft); }
.app-shell{
	display:grid;
	grid-template-columns:var(--side-w) 1fr;
	grid-template-rows:var(--topbar-h) 1fr;
	grid-template-areas:"topbar topbar" "sidebar main";
	min-height:100vh;
}
.app-shell.sidebar-collapsed{ grid-template-columns:var(--side-w-min) 1fr; }

/* ---------- top bar ---------- */
.app-topbar{
	grid-area:topbar; position:sticky; top:0; z-index:60;
	display:flex; align-items:center; gap:12px;
	height:var(--topbar-h); padding:0 16px;
	background:#fff; border-bottom:1px solid var(--line);
}
.app-brand{ display:inline-flex; align-items:center; gap:9px; color:var(--ink); font-weight:800; }
.app-brand:hover{ color:var(--ink); text-decoration:none; }
.app-brand .brand-name{ font-size:1.12rem; }
.topbar-spacer{ flex:1; }

.icon-btn{
	display:inline-grid; place-items:center; width:40px; height:40px;
	border:1px solid transparent; border-radius:10px; background:transparent;
	color:var(--ink-2); cursor:pointer; transition:background .15s ease, color .15s ease;
}
.icon-btn:hover{ background:var(--bg-soft); color:var(--ink); }

/* account menu */
.acct{ position:relative; }
.acct-btn{
	display:flex; align-items:center; gap:10px; padding:6px 10px 6px 6px;
	background:transparent; border:1px solid var(--line); border-radius:var(--radius-pill);
	cursor:pointer; font-family:inherit; color:var(--ink); transition:border-color .15s ease, background .15s ease;
}
.acct-btn:hover{ border-color:var(--line-2); background:var(--bg-soft); }
.acct-avatar{
	width:32px; height:32px; border-radius:50%; flex:0 0 auto;
	display:grid; place-items:center; background:var(--teal); color:#fff;
	font-weight:800; font-size:.82rem; letter-spacing:.02em;
}
.acct-meta{ display:flex; flex-direction:column; line-height:1.15; text-align:left; max-width:200px; }
.acct-label{ font-size:.7rem; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.06em; }
.acct-email{ font-size:.9rem; font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.acct-caret{ color:var(--muted); transition:transform .2s ease; flex:0 0 auto; }
.acct.open .acct-caret{ transform:rotate(180deg); }
.acct-dropdown{
	position:absolute; right:0; top:calc(100% + 8px); min-width:230px;
	background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow);
	padding:6px; display:none; z-index:70;
}
.acct.open .acct-dropdown{ display:block; }
.acct-dropdown a, .acct-dropdown button{
	display:flex; align-items:center; gap:10px; width:100%;
	padding:10px 12px; border:0; border-radius:10px; background:transparent;
	font-family:inherit; font-size:.95rem; font-weight:600; color:var(--ink-2);
	text-align:left; cursor:pointer; text-decoration:none;
}
.acct-dropdown a:hover, .acct-dropdown button:hover{ background:var(--bg-soft); color:var(--ink); text-decoration:none; }
.acct-dropdown svg{ color:var(--muted); flex:0 0 auto; }
.acct-dropdown #logoutBtn{ color:var(--danger); }
.acct-dropdown #logoutBtn svg{ color:var(--danger); }

/* ---------- sidebar ---------- */
.app-sidebar{
	grid-area:sidebar; position:sticky; top:var(--topbar-h); align-self:start;
	height:calc(100vh - var(--topbar-h)); overflow-y:auto;
	background:#fff; border-right:1px solid var(--line);
	display:flex; flex-direction:column;
}
.side-nav{ padding:16px 12px; display:flex; flex-direction:column; gap:3px; flex:1; }
.nav-item, .nav-back{
	display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:11px;
	color:var(--ink-2); font-weight:600; font-size:.96rem; text-decoration:none;
	border:1px solid transparent; transition:background .14s ease, color .14s ease;
}
.nav-item:hover, .nav-back:hover{ background:var(--bg-soft); color:var(--ink); text-decoration:none; }
.nav-item.is-active{ background:var(--teal-50); color:var(--teal-ink); border-color:var(--teal-100); }
.nav-item.is-active .nav-ic{ color:var(--teal); }
.nav-ic{ flex:0 0 auto; width:22px; height:22px; display:grid; place-items:center; color:var(--muted); }
.nav-ic svg{ width:21px; height:21px; }
.nav-back{ color:var(--muted); font-weight:600; font-size:.9rem; margin-bottom:2px; }
.nav-context{ padding:6px 12px 10px; }
.nav-context-name{ font-weight:800; font-size:1.02rem; color:var(--ink); letter-spacing:-.01em; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nav-group{ display:flex; flex-direction:column; gap:3px; padding-top:6px; border-top:1px solid var(--line); }
.nav-back + .nav-context + .nav-group{ border-top:none; }
.side-foot{ padding:14px 18px; border-top:1px solid var(--line); }
.side-free{ font-size:.78rem; font-weight:700; color:var(--teal-ink); }

/* collapsed (desktop) */
.sidebar-collapsed .nav-label,
.sidebar-collapsed .nav-context,
.sidebar-collapsed .side-free,
.sidebar-collapsed .nav-back .nav-label{ display:none; }
.sidebar-collapsed .nav-item, .sidebar-collapsed .nav-back{ justify-content:center; padding:11px 0; }
.sidebar-collapsed .side-foot{ text-align:center; }

.sidebar-scrim{ display:none; }

/* ---------- main / view ---------- */
.app-main{ grid-area:main; min-width:0; padding:28px clamp(16px,4vw,40px) 64px; }
.view{ max-width:1080px; margin:0 auto; outline:none; }
.view:focus-visible{ box-shadow:none; }

.loading-block{ display:flex; align-items:center; justify-content:center; gap:12px; padding:80px 0; color:var(--muted); font-weight:600; }
.spinner{
	width:20px; height:20px; border-radius:50%;
	border:2.5px solid var(--line-2); border-top-color:var(--teal); display:inline-block;
	animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- page head ---------- */
.page-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-bottom:24px; }
.page-title{ font-size:clamp(1.6rem,3vw,2.1rem); margin:0; }
.page-sub{ margin:6px 0 0; color:var(--muted); font-size:1rem; }
.page-sub code{ background:var(--bg-tint); padding:1px 7px; border-radius:6px; color:var(--teal-ink); font-weight:700; }
.page-actions{ display:flex; gap:10px; flex-shrink:0; }
.section-subhead{ font-size:1.05rem; color:var(--ink-2); margin:34px 0 14px; }

/* ---------- badges ---------- */
.badge{
	display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:var(--radius-pill);
	font-size:.78rem; font-weight:700; letter-spacing:.01em; background:var(--bg-tint); color:var(--teal-ink);
}
.badge-soft{ background:var(--bg-soft); color:var(--muted); border:1px solid var(--line); }
.badge-muted{ background:#f1f0ee; color:#8a8076; }
.badge-ok{ background:var(--teal-50); color:var(--teal-ink); }
.badge-warn{ background:#fdf1e6; color:#9a5a18; }
.badge-live{ background:#e9f9f2; color:#0a6b5e; }
.live-dot{ width:8px; height:8px; border-radius:50%; background:var(--mint); box-shadow:0 0 0 0 rgba(22,184,154,.6); animation:pulse 1.8s infinite; flex:0 0 auto; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(22,184,154,.5);} 70%{ box-shadow:0 0 0 7px rgba(22,184,154,0);} 100%{ box-shadow:0 0 0 0 rgba(22,184,154,0);} }

/* ---------- card grid (stores) ---------- */
.card-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px; }
.store-card{
	background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
	padding:22px; display:flex; flex-direction:column; gap:16px; box-shadow:var(--shadow-sm);
	transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.store-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--line-2); }
.store-card.is-deleted{ opacity:.72; }
.store-card-top{ display:flex; align-items:center; gap:13px; }
.store-ic{ width:44px; height:44px; flex:0 0 auto; border-radius:12px; background:var(--teal-50); color:var(--teal); display:grid; place-items:center; }
.store-ic svg{ width:22px; height:22px; }
.store-card-head h3{ margin:0; font-size:1.15rem; }
.handle{ color:var(--teal-ink); font-weight:700; font-size:.9rem; }
.store-meta{ display:flex; flex-wrap:wrap; gap:8px; }
.store-stats{ display:flex; gap:24px; padding:14px 0 0; border-top:1px solid var(--line); }
.ministat{ display:flex; flex-direction:column; }
.ministat .n{ font-size:1.3rem; font-weight:800; color:var(--ink); line-height:1.1; }
.ministat .l{ font-size:.78rem; color:var(--muted); font-weight:600; }
.store-card-actions{ display:flex; gap:8px; margin-top:auto; flex-wrap:wrap; }

/* ---------- stat cards ---------- */
.stat-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; margin-bottom:24px; }
.stat-card{
	display:flex; flex-direction:column; gap:8px; padding:20px;
	background:#fff; border:1px solid var(--line); border-left:4px solid var(--line-2);
	border-radius:var(--radius); text-decoration:none; transition:box-shadow .15s ease, transform .15s ease;
}
.stat-card:hover{ box-shadow:var(--shadow-sm); transform:translateY(-2px); text-decoration:none; }
.stat-card-l{ font-size:.85rem; font-weight:600; color:var(--muted); }
.stat-card-n{ font-size:1.9rem; font-weight:800; color:var(--ink); line-height:1; letter-spacing:-.02em; display:flex; align-items:center; gap:8px; }
.stat-live{ border-left-color:var(--mint); }
.stat-hours{ border-left-color:var(--teal); }
.stat-staff{ border-left-color:#5b8def; }
.stat-ok{ border-left-color:var(--teal); }
.stat-warn{ border-left-color:#e0a52e; }

/* ---------- panels ---------- */
.panel{
	background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
	padding:22px 24px; margin-bottom:20px;
}
.panel-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.panel-head h2{ font-size:1.15rem; margin:0; }
.panel-empty{ color:var(--muted); margin:0; padding:8px 0; }
.panel-note{ color:var(--ink-2); font-size:.95rem; margin:0 0 16px; }
.panel-note code{ background:var(--bg-tint); padding:1px 7px; border-radius:6px; color:var(--teal-ink); font-weight:700; }
.panel-actions{ display:flex; gap:10px; margin-top:18px; flex-wrap:wrap; }
.panel-danger{ border-color:#f1d2cd; }
.panel-danger .panel-head h2{ color:var(--danger); }
.info-panel{ background:var(--bg-tint); border-color:var(--teal-100); }
.link-arrow{ font-weight:600; font-size:.92rem; }
.kv{ display:flex; justify-content:space-between; gap:16px; padding:11px 0; border-top:1px solid var(--line); }
.kv:first-of-type{ border-top:none; }
.kv .k{ color:var(--muted); font-weight:600; font-size:.92rem; }
.kv .v{ color:var(--ink); font-weight:600; }
.steps-list{ margin:0; padding-left:20px; color:var(--ink-2); display:grid; gap:8px; }
.steps-list li{ padding-left:4px; }

/* live list (on shift now) */
.live-list{ list-style:none; display:grid; gap:2px; }
.live-list li{ display:flex; align-items:center; gap:12px; padding:11px 0; border-top:1px solid var(--line); }
.live-list li:first-child{ border-top:none; }
.live-name{ font-weight:700; color:var(--ink); }
.live-since{ margin-left:auto; color:var(--muted); font-size:.88rem; }

/* quick actions */
.quick-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; }
.quick-card{
	display:flex; align-items:center; gap:14px; padding:16px; border-radius:var(--radius);
	border:1px solid var(--line); background:var(--bg-soft); text-decoration:none; transition:border-color .15s ease, background .15s ease;
}
.quick-card:hover{ background:#fff; border-color:var(--teal-100); text-decoration:none; }
.quick-ic{ width:42px; height:42px; flex:0 0 auto; border-radius:11px; background:#fff; border:1px solid var(--line); color:var(--teal); display:grid; place-items:center; }
.quick-ic svg{ width:21px; height:21px; }
.quick-text{ display:flex; flex-direction:column; }
.quick-text strong{ color:var(--ink); font-size:.98rem; }
.quick-text span{ color:var(--muted); font-size:.85rem; }

/* ---------- tables ---------- */
.table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:#fff; }
.data-table{ width:100%; border-collapse:collapse; font-size:.95rem; }
.data-table thead th{
	text-align:left; padding:13px 16px; font-size:.74rem; font-weight:700; letter-spacing:.06em;
	text-transform:uppercase; color:var(--muted); background:var(--bg-soft); border-bottom:1px solid var(--line); white-space:nowrap;
}
.data-table tbody td{ padding:13px 16px; border-top:1px solid var(--line); color:var(--ink-2); vertical-align:middle; }
.data-table tbody tr:first-child td{ border-top:none; }
.data-table tbody tr:hover{ background:var(--bg-soft); }
.ta-r{ text-align:right; }
.muted{ color:var(--muted); }
.cell-user{ display:flex; align-items:center; gap:10px; }
.cell-user-name{ font-weight:700; color:var(--ink); }
.avatar-sm{ width:30px; height:30px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center; background:var(--teal-50); color:var(--teal-ink); font-weight:800; font-size:.72rem; }
.login{ background:var(--bg-tint); padding:3px 9px; border-radius:7px; color:var(--teal-ink); font-weight:700; font-size:.86rem; white-space:nowrap; }
.row-actions{ display:inline-flex; gap:7px; justify-content:flex-end; flex-wrap:wrap; }

/* ---------- month bar (shifts) ---------- */
.month-bar{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:20px; }
.month-nav{ display:flex; align-items:center; gap:6px; background:#fff; border:1px solid var(--line); border-radius:var(--radius-pill); padding:4px; }
.month-nav .icon-btn{ width:36px; height:36px; }
.month-label{ font-weight:800; color:var(--ink); min-width:150px; text-align:center; }
.month-total{ display:flex; flex-direction:column; align-items:flex-end; }
.month-total .l{ font-size:.78rem; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.05em; }
.month-total .n{ font-size:1.5rem; font-weight:800; color:var(--teal-ink); line-height:1; }
.shift-group .group-total{ font-weight:700; color:var(--teal-ink); font-size:.92rem; }
.shifts-table td{ white-space:nowrap; }

/* ---------- empty states ---------- */
.empty-state{ text-align:center; max-width:440px; margin:48px auto; padding:32px; }
.empty-state.sm{ margin:24px auto; }
.empty-ic{ width:64px; height:64px; margin:0 auto 18px; border-radius:18px; background:var(--teal-50); color:var(--teal); display:grid; place-items:center; }
.empty-ic svg{ width:30px; height:30px; }
.empty-state h2{ font-size:1.3rem; margin-bottom:.3em; }
.empty-state p{ color:var(--muted); margin-bottom:20px; }

/* ---------- modal ---------- */
.modal-root{ position:fixed; inset:0; z-index:200; pointer-events:none; }
.modal-backdrop{
	position:fixed; inset:0; background:rgba(11,20,22,.5); backdrop-filter:blur(2px);
	display:flex; align-items:flex-start; justify-content:center; padding:5vh 16px;
	pointer-events:auto; overflow-y:auto; animation:fade .15s ease;
}
@keyframes fade{ from{ opacity:0; } to{ opacity:1; } }
.modal{
	width:100%; max-width:520px; background:#fff; border-radius:var(--radius-lg);
	box-shadow:var(--shadow-lg); margin:auto; animation:pop .18s ease; overflow:hidden;
}
.modal-wide{ max-width:660px; }
@keyframes pop{ from{ transform:translateY(10px) scale(.99); opacity:0; } to{ transform:none; opacity:1; } }
.modal-head{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:20px 22px; border-bottom:1px solid var(--line); }
.modal-title{ font-size:1.2rem; margin:0; }
.modal-body{ padding:22px; max-height:64vh; overflow-y:auto; }
.modal-foot{ display:flex; justify-content:flex-end; gap:10px; padding:16px 22px; border-top:1px solid var(--line); background:var(--bg-soft); }
.modal-form .field:last-child{ margin-bottom:0; }
.confirm-text{ margin:0; color:var(--ink-2); font-size:1rem; line-height:1.55; }
.confirm-text code{ background:var(--bg-tint); padding:1px 6px; border-radius:6px; color:var(--teal-ink); font-weight:700; }
body.modal-open{ overflow:hidden; }
.addon-left{ border-radius:11px 0 0 11px; border-right:0; border-left:1.5px solid var(--line-2); }
.input-group .addon-left + .input{ border-radius:0 11px 11px 0; border-left:0; }

/* ---------- buttons (app additions) ---------- */
.btn-danger{ background:var(--danger); color:#fff; }
.btn-danger:hover{ background:#a82e22; color:#fff; }
.btn-icon{ padding-left:12px; padding-right:12px; }
.btn-icon svg{ display:block; }

/* ---------- toast ---------- */
.toast-root{ position:fixed; right:20px; bottom:20px; z-index:300; display:flex; flex-direction:column; gap:10px; pointer-events:none; }
.toast{
	min-width:240px; max-width:360px; padding:13px 16px; border-radius:12px; font-weight:600; font-size:.94rem;
	box-shadow:var(--shadow); transform:translateX(120%); opacity:0; transition:transform .25s ease, opacity .25s ease; pointer-events:auto;
}
.toast.show{ transform:none; opacity:1; }
.toast-ok{ background:#0d3b34; color:#eafaf5; border:1px solid #145347; }
.toast-err{ background:#fdecea; color:#9b2c20; border:1px solid #f6c9c2; }

/* ---------- app responsive ---------- */
@media (max-width:820px){
	.app-shell{ grid-template-columns:1fr; grid-template-areas:"topbar" "main"; }
	.app-sidebar{
		position:fixed; left:0; top:var(--topbar-h); width:var(--side-w); height:calc(100vh - var(--topbar-h));
		transform:translateX(-100%); transition:transform .22s ease; z-index:90; box-shadow:var(--shadow-lg);
	}
	.app-shell.sidebar-open .app-sidebar{ transform:none; }
	.sidebar-scrim{ display:block; position:fixed; inset:var(--topbar-h) 0 0; background:rgba(11,20,22,.4); z-index:80; }
	.acct-meta{ display:none; }
	.acct-btn{ padding:5px; border-color:transparent; }
	.page-head{ align-items:flex-start; }
}
@media (max-width:520px){
	.app-main{ padding:20px 14px 56px; }
	.store-stats{ gap:18px; }
	.page-actions .btn{ padding-left:16px; padding-right:16px; }
	.modal-body{ max-height:70vh; }
}