:root {
  --bg: #f6f4ee;
  --panel: #fffdf8;
  --ink: #15171c;
  --muted: #606672;
  --line: #ded8ca;
  --brand: #2448ff;
  --brand-dark: #1127a8;
  --accent: #ffb23f;
  --green: #1f8f5f;
  --red: #c94141;
  --amber: #a46a00;
  --shadow: 0 24px 80px rgba(31, 35, 48, .12);
}
* { box-sizing: border-box; }
body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Arial, sans-serif; color: var(--ink); background: radial-gradient(circle at top left, #fff7df, transparent 32rem), var(--bg); }
a { color: inherit; text-decoration: none; }
.site-header { position: sticky; top: 0; z-index: 10; background: rgba(246,244,238,.86); backdrop-filter: blur(18px); border-bottom: 1px solid rgba(222,216,202,.75); }
.nav { max-width: 1180px; margin: 0 auto; padding: 18px 22px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 42px; height: 42px; display:grid; place-items:center; border-radius: 14px; background: var(--ink); color: white; font-weight: 800; }
.brand small { display:block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.nav-links { display:flex; align-items:center; gap: 20px; color: var(--muted); font-size: 14px; }
.nav-group { position: relative; padding: 8px 0; }
.nav-group-trigger { border: 0; background: transparent; color: var(--muted); font: inherit; cursor: pointer; padding: 8px 0; }
.nav-group-trigger::after { content: '▾'; margin-left: 6px; font-size: 10px; }
.nav-menu { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); min-width: 220px; padding: 10px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,253,248,.98); box-shadow: var(--shadow); }
.nav-menu a { display: block; padding: 10px 12px; border-radius: 12px; color: var(--ink); font-weight: 750; }
.nav-menu a:hover { background: var(--accent-soft); color: var(--accent-strong); }
.nav-group:hover .nav-menu, .nav-group:focus-within .nav-menu { display: block; }
.nav-cta, .primary-btn, .secondary-btn, .checkout-btn { border-radius: 999px; font-weight: 750; }
.nav-cta { background: var(--ink); color:#fff; padding: 10px 15px; }
.hero, .product-hero { max-width: 1180px; margin: 0 auto; padding: 78px 22px 56px; display:grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr); gap: 42px; align-items:center; }
.eyebrow { color: var(--brand); font-weight: 800; text-transform: uppercase; letter-spacing: .12em; font-size: 12px; margin: 0 0 14px; }
h1 { font-size: clamp(42px, 7vw, 76px); line-height: .92; letter-spacing: -0.07em; margin: 0; max-width: 820px; }
h2 { font-size: clamp(28px, 4vw, 44px); line-height: 1; letter-spacing: -0.04em; margin: 0 0 14px; }
h3 { margin: 0 0 10px; font-size: 20px; letter-spacing: -.02em; }
.hero-text { color: var(--muted); font-size: 19px; line-height: 1.65; max-width: 690px; }
.hero-actions { display:flex; flex-wrap:wrap; gap: 12px; margin-top: 26px; }
.primary-btn, .secondary-btn { padding: 14px 20px; display:inline-flex; align-items:center; justify-content:center; }
.primary-btn { background: var(--brand); color:white; box-shadow: 0 12px 30px rgba(36,72,255,.22); }
.secondary-btn { border:1px solid var(--line); background: rgba(255,255,255,.58); }
.trust-row { margin-top: 26px; display:flex; flex-wrap:wrap; gap: 10px; }
.trust-row span { padding: 8px 11px; border-radius: 999px; background: #fff; border:1px solid var(--line); color: var(--muted); font-size: 13px; }
.hero-card, .buy-box { background: linear-gradient(160deg, #ffffff, #fff6df); border:1px solid var(--line); border-radius: 34px; padding: 30px; box-shadow: var(--shadow); }
.card-topline { display:inline-block; background: #e9edff; color: var(--brand-dark); border-radius:999px; padding: 7px 11px; font-weight:800; font-size: 12px; }
.hero-card p, .buy-box p, .section-heading p, .category-grid p, .product-card p, .security-list p, .feature-list p, details p { color: var(--muted); line-height:1.55; }
.mini-link { font-weight:800; color: var(--brand); }
.section { max-width: 1180px; margin: 0 auto; padding: 62px 22px; }
.section-heading { max-width: 760px; margin-bottom: 28px; }
.section-heading.split { max-width:none; display:flex; justify-content:space-between; gap: 24px; align-items:end; }
.section-heading.split p { max-width: 430px; }
.muted { max-width:none; background: rgba(255,255,255,.48); border-block:1px solid rgba(222,216,202,.65); }
.muted > * { max-width: 1180px; margin-left:auto; margin-right:auto; }
.category-grid, .product-grid, .faq-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.category-grid article, .product-card, details { background: var(--panel); border:1px solid var(--line); border-radius: 24px; padding: 24px; box-shadow: 0 10px 30px rgba(31,35,48,.05); }
.category-grid span { color: var(--accent); font-weight:900; }
.product-card { display:block; min-height: 190px; }
.four-product-grid { grid-template-columns: repeat(4, 1fr); }
.product-card small { color: var(--brand); font-weight:800; text-transform:uppercase; letter-spacing:.09em; }
.product-card.featured { background: var(--ink); color:white; transform: translateY(-6px); }
.product-card.featured p { color: rgba(255,255,255,.72); }
.security { display:grid; grid-template-columns: .9fr 1.1fr; gap: 32px; }
.security-list { display:grid; gap: 14px; }
.security-list div { background:#fff; border:1px solid var(--line); border-radius:22px; padding: 20px; }
.footer { max-width:1180px; margin:0 auto; padding: 30px 22px 50px; display:flex; justify-content:space-between; color: var(--muted); }
.footer div { display:flex; gap:16px; }
.product-hero { align-items:start; }
.rating-row { display:flex; flex-wrap:wrap; gap: 12px; align-items:center; color: var(--muted); margin-top:20px; }
.rating-row span { color: #e29b20; letter-spacing: .08em; }
.rating-row .summary-card { display:inline-flex; align-items:center; gap:8px; min-height:46px; border:1px solid var(--line); background:#fff; color:var(--ink); border-radius:999px; padding:10px 16px; font:inherit; font-weight:800; cursor:pointer; box-shadow:0 8px 22px rgba(31,35,48,.05); }
.rating-row .summary-card span { color:var(--muted); letter-spacing:0; text-transform:none; font-size:14px; }
.rating-row .summary-card strong { color:var(--ink); font-size:17px; line-height:1; }
.rating-row .summary-card:hover, .rating-row .summary-card.active { border-color:var(--accent-strong); color:var(--accent-strong); background:var(--accent-soft); }
.rating-row .summary-card:hover span, .rating-row .summary-card.active span { color:#8a4300; }
.buy-box { position: sticky; top: 92px; }
.buy-box ul { padding-left: 20px; color: var(--muted); line-height:1.8; }
.checkout-btn, .purchase-btn { width:100%; border:0; background: var(--brand); color:white; padding:15px 18px; cursor:pointer; font-size: 15px; }
.purchase-btn { display:inline-block; text-align:center; border-radius:999px; text-decoration:none; font-weight:750; box-shadow: 0 12px 30px rgba(36,72,255,.22); }
.safe-note { font-size: 13px; }
.preview-grid { display:grid; grid-template-columns: 1.05fr .95fr; gap: 36px; align-items:center; }
.mock-sheet { background:#fff; border:1px solid var(--line); border-radius: 28px; padding: 18px; box-shadow: var(--shadow); overflow:hidden; }
.sheet-toolbar { display:flex; gap:8px; padding-bottom:14px; }
.sheet-toolbar span { width:12px; height:12px; border-radius:50%; background:#d8dce7; }
table { width:100%; border-collapse:collapse; font-size:14px; } th, td { text-align:left; border-bottom:1px solid #edf0f5; padding:13px 10px; } th { color:var(--muted); font-size:12px; text-transform:uppercase; }
b.paid, b.due, b.late { padding:5px 8px; border-radius:999px; font-size:12px; } b.paid{background:#e8f7ef;color:var(--green);} b.due{background:#fff5db;color:#a46a00;} b.late{background:#ffeaea;color:var(--red);}
.sheet-stats { margin-top:18px; padding:18px; border-radius:18px; background:#f6f8ff; display:flex; justify-content:space-between; align-items:center; color:var(--muted); } .sheet-stats strong { color:var(--ink); font-size:28px; }
.feature-list { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:22px; }
.feature-list div { background:#fff; border:1px solid var(--line); border-radius:20px; padding:18px; }
details summary { cursor:pointer; font-weight:800; }
@media (max-width: 850px) { .nav, .nav-links, .section-heading.split, .footer { align-items:flex-start; flex-direction:column; } .nav-menu { position: static; display: grid; transform: none; margin-top: 8px; box-shadow: none; background: #fff; } .hero, .product-hero, .security, .preview-grid { grid-template-columns:1fr; } .category-grid, .product-grid, .faq-grid, .feature-list, .four-product-grid { grid-template-columns:1fr; } .buy-box { position: static; } h1 { font-size: 44px; } }

/* Second-pass polish */
.compact { padding-bottom: 28px; }
.category-grid.linked a, .category-tile { display:block; color: inherit; }
.category-tile { background: linear-gradient(150deg, #fff, #fff8e8); border: 1px solid var(--line); border-radius: 26px; padding: 26px; min-height: 190px; box-shadow: 0 14px 34px rgba(31,35,48,.06); transition: transform .18s ease, box-shadow .18s ease; }
.category-tile:hover, .product-card:hover { transform: translateY(-4px); box-shadow: 0 20px 46px rgba(31,35,48,.11); }
.product-card strong { color: var(--brand); }
.product-card.featured strong { color: #fff; }
.security-roadmap { display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.security-roadmap article, .admin-grid article { background: var(--panel); border:1px solid var(--line); border-radius:24px; padding:24px; box-shadow:0 10px 30px rgba(31,35,48,.05); }
.security-roadmap span { color: var(--accent); font-weight: 900; }
.admin-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 30px; }
.admin-grid span { display:block; color: var(--muted); margin-top: 8px; }
.legal { max-width: 850px; }
.modal[hidden] { display:none; }
.modal { position: fixed; inset: 0; z-index: 50; display:grid; place-items:center; padding: 22px; background: rgba(21,23,28,.58); backdrop-filter: blur(10px); }
.modal-panel { position: relative; max-width: 560px; width: 100%; background: #fffdf8; border:1px solid var(--line); border-radius: 30px; padding: 30px; box-shadow: var(--shadow); }
.modal-panel ol { color: var(--muted); line-height: 1.8; padding-left: 22px; }
.modal-close { position:absolute; top: 14px; right: 16px; width: 38px; height:38px; border:1px solid var(--line); border-radius: 999px; background:white; cursor:pointer; font-size: 24px; }
@media (max-width: 850px) { .security-roadmap, .admin-grid { grid-template-columns: 1fr; } }

/* TemplatePilot.co.uk brand direction */
:root { --accent-strong: #f58220; --accent-soft: #fff0d9; }
.brand-mark { background: linear-gradient(135deg, var(--ink), #35210c); box-shadow: inset 0 -10px 18px rgba(245,130,32,.22); }
.eyebrow { color: var(--accent-strong); }
.hero-card, .buy-box { background: linear-gradient(160deg, #ffffff, var(--accent-soft)); }
.card-topline { background: var(--accent-soft); color: #8a4300; }
.primary-btn, .checkout-btn, .purchase-btn { background: linear-gradient(135deg, var(--brand), #1737d8); }
.product-card.featured { background: linear-gradient(145deg, #15171c, #2b210f); border-color: rgba(245,130,32,.35); }
.product-card.featured strong { color: #ffbd69; }
.product-card .open-btn, .category-tile .open-btn { display:inline-block; padding:8px 16px; border-radius:999px; background:var(--brand); color:#fff; font-size:13px; font-weight:800; line-height:1; transition:all .2s; box-shadow:0 4px 12px rgba(36,72,255,.22); }
.product-card:hover .open-btn, .category-tile:hover .open-btn { background:#1737d8; transform:translateY(-1px); box-shadow:0 6px 18px rgba(36,72,255,.3); }
.product-card.featured .open-btn { background:var(--accent-strong); color:#fff; box-shadow:0 4px 12px rgba(245,130,32,.3); }
.product-card.featured:hover .open-btn { background:#d46d00; }
.category-grid article, .category-tile, .security-roadmap article { position: relative; overflow: hidden; }
.category-grid article::before, .category-tile::before, .security-roadmap article::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 5px; background: linear-gradient(var(--accent), var(--accent-strong)); }

/* Browser invoice generator */
.generator-shell { display:grid; grid-template-columns: 1.15fr .85fr; gap: 22px; align-items:start; }
.generator-panel { background: var(--panel); border:1px solid var(--line); border-radius: 28px; padding: 24px; box-shadow: 0 14px 40px rgba(31,35,48,.07); }
.accent-panel { background: linear-gradient(160deg, #fff, var(--accent-soft)); position: sticky; top: 92px; }
.invoice-form { display:grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.invoice-form label { color: var(--muted); font-weight: 750; font-size: 13px; }
.invoice-form input, .invoice-form select { width:100%; margin-top: 7px; border:1px solid var(--line); border-radius: 14px; padding: 12px; font: inherit; background:#fff; }
.invoice-form .checkout-btn { grid-column: 1 / -1; }
.invoice-form #cancel-edit { grid-column: 1 / -1; width: 100%; cursor: pointer; }
.generator-stats { display:grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.generator-stats .summary-card { display:block; width:100%; text-align:left; background:#fff; border:1px solid var(--line); border-radius: 18px; padding: 16px; cursor:pointer; color: inherit; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.generator-stats .summary-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(31,35,48,.10); border-color: var(--accent-strong); }
.generator-stats span { display:block; color: var(--muted); font-size: 12px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.generator-stats strong { display:block; margin-top: 6px; font-size: 22px; letter-spacing:-.04em; }
.generator-actions { display:flex; flex-wrap:wrap; gap: 10px; margin-top: 18px; }
.upload-btn { display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line); background:#fff; border-radius:999px; padding: 13px 18px; font-weight:800; cursor:pointer; }
.danger { color: var(--red); }
.import-help { margin-top: 14px; padding: 14px; border: 1px dashed var(--line); border-radius: 16px; background: rgba(255,255,255,.72); color: var(--muted); font-size: 13px; line-height: 1.5; }
.tracker-filters { display:flex; flex-wrap:wrap; gap: 10px; max-width:1180px; margin: -12px auto 20px; }
.tracker-filters button { border:1px solid var(--line); background:#fff; color: var(--muted); border-radius:999px; padding: 10px 14px; font-weight:800; cursor:pointer; }
.tracker-filters button.active { background: var(--ink); color:#fff; border-color: var(--ink); }
.tracker-board { display:grid; gap: 10px; max-width:1180px; margin:0 auto; }
.tracker-row { display:grid; grid-template-columns: 1.4fr 1fr .8fr .8fr .8fr .8fr .8fr 92px; gap: 10px; align-items:center; background:#fff; border:1px solid var(--line); border-radius: 18px; padding: 14px; box-shadow:0 8px 26px rgba(31,35,48,.05); }
.tracker-head { background: var(--ink); color:#fff; font-weight:800; box-shadow:none; }
.tracker-row small { display:block; color: var(--muted); margin-top:4px; }
.tracker-row b { display:inline-block; border-radius:999px; padding:6px 9px; font-size:12px; }
.row-actions { display:flex; gap: 6px; align-items:center; }
.tracker-row button { border:0; border-radius:999px; min-width:32px; height:32px; padding: 0 9px; background:#f2f2f2; cursor:pointer; font-size:13px; font-weight:800; }
.tracker-row button[data-remove] { width:32px; padding:0; font-size:20px; }
.empty-board { background:#fff; border:1px dashed var(--line); border-radius: 20px; padding: 26px; color: var(--muted); text-align:center; }
.empty-board strong { color: var(--ink); font-size: 20px; }
.chart-export-section { padding-top: 48px; }
.chart-card { background: #fff; border:1px solid var(--line); border-radius: 28px; padding: 20px; box-shadow: var(--shadow); overflow:hidden; }
.chart-card-head { display:flex; justify-content:space-between; align-items:center; gap: 16px; margin-bottom: 14px; }
.chart-card-head span { display:block; color: var(--accent-strong); font-weight:900; text-transform:uppercase; letter-spacing:.1em; font-size: 12px; }
.chart-card-head strong { display:block; font-size: 24px; letter-spacing:-.03em; }
.chart-card-head em { background: var(--ink); color:#fff; border-radius: 999px; padding: 8px 11px; font-style: normal; font-weight: 800; font-size: 12px; }
.chart-card canvas { width:100%; height:auto; display:block; border-radius: 20px; border:1px solid #eee4d4; }
.seo-copy { padding-top: 44px; }
.status-paid b { background:#e8f7ef; color:var(--green); }
.status-due b, .status-sent b, .status-draft b { background:#fff5db; color:var(--amber); }
.status-overdue b { background:#ffeaea; color:var(--red); }
.status-part-paid b { background:#e9edff; color:var(--brand); }
.status-disputed b { background:#f1e8ff; color:#6f3fc4; }
.status-overdue { border-left: 6px solid var(--red); }
.status-paid { border-left: 6px solid var(--green); }
.status-due, .status-sent, .status-draft { border-left: 6px solid var(--accent-strong); }
.expense-row { grid-template-columns: 1fr 1.2fr 1fr .75fr .8fr .7fr .75fr 92px; }
.status-expense { border-left: 6px solid var(--red); }
.status-income { border-left: 6px solid var(--green); }
.status-pending { border-left: 6px solid var(--accent-strong); }
@media (max-width: 900px) { .generator-shell, .invoice-form { grid-template-columns:1fr; } .accent-panel { position: static; } .tracker-row { grid-template-columns:1fr 1fr; } .tracker-head { display:none; } }

.single-product-grid { grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); }
.muted-card { background: linear-gradient(150deg, #fff, #f7f8fb); }
.category-tile:not(a) { cursor: default; }
.category-tile.live { border-color: rgba(36,72,255,.28); box-shadow: 0 18px 42px rgba(36,72,255,.10); }
.legal-copy { max-width: 860px; margin-top: 28px; display: grid; gap: 20px; }
.legal-copy h2 { margin: 0 0 6px; font-size: 1.12rem; }
.legal-copy p { margin: 0; color: var(--muted); line-height: 1.7; }
@media (max-width: 760px) { .single-product-grid { grid-template-columns: 1fr; } }

.compact-heading { margin-top: 28px; }
.full-span { grid-column: 1 / -1; }
.quote-preview { max-width: 980px; margin: 0 auto; }
.quote-document { background: #fff; border: 1px solid var(--line); border-radius: 28px; padding: 34px; box-shadow: 0 24px 64px rgba(31,35,48,.10); }
.quote-head, .quote-parties, .quote-totals { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; }
.quote-branding { display:flex; align-items:center; gap:18px; min-width:0; }
.quote-logo { max-width: 128px; max-height: 82px; object-fit: contain; border-radius: 14px; }
.quote-logo-placeholder { width: 92px; height: 64px; border: 1px dashed #d8cfbd; border-radius: 16px; display:grid; place-items:center; color:var(--muted); font-weight:900; text-transform:uppercase; letter-spacing:.08em; font-size:.72rem; background:#fffaf0; }
.quote-meta { text-align:right; white-space:nowrap; }
.quote-head p, .quote-parties span, .quote-totals span { color: var(--muted); font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 7px; }
.quote-head h2 { margin: 0; font-size: clamp(1.6rem, 4vw, 2.4rem); }
.quote-head strong { font-size: 1.3rem; display: block; }
.quote-head span { color: var(--muted); }
.quote-parties { margin: 30px 0 36px; padding: 20px 22px; background: #fff8e8; border-radius: 20px; }
.quote-parties strong { display: block; font-size: 1.05rem; }
.quote-lines { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; border-radius: 18px; margin-bottom: 34px; }
.quote-lines th { text-align: left; color: var(--muted); font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; }
.quote-lines th, .quote-lines td { padding: 16px 12px; border-bottom: 1px solid var(--line); }
.quote-lines button { border: 0; border-radius: 999px; background: #fff0ec; color: #a33a24; font-weight: 800; padding: 9px 13px; cursor: pointer; }
.quote-totals { max-width: 590px; margin: 0 0 34px auto; align-items: stretch; }
.quote-totals div { flex: 1; min-width: 145px; background: #f7f8fb; border-radius: 16px; padding: 16px 18px; border-left: 5px solid #ffd21c; }
.quote-totals strong { display:block; margin-top:5px; font-size: 1.18rem; }
.quote-terms { margin-top: 28px; background: #f7f8fb; border-radius: 18px; padding: 20px; color: var(--muted); }
.quote-terms strong { color: var(--ink); }
.export-mode .quote-actions { display:none; }
@media (max-width: 760px) { .quote-head, .quote-parties, .quote-totals { flex-direction: column; } .quote-meta { text-align:left; } .quote-branding { align-items:flex-start; } }

/* Org chart builder */
.org-chart-preview { max-width: 1180px; margin: 0 auto 24px; background: linear-gradient(135deg, #fff8e8, #fff 56%, #f6f8ff); border: 1px solid var(--line); border-radius: 30px; padding: 28px; box-shadow: var(--shadow); overflow: hidden; }
.org-chart-meta { margin-bottom: 18px; }
.org-preview-header { display:flex; justify-content:space-between; gap:18px; align-items:flex-end; margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid rgba(222,216,202,.75); }
.org-preview-header span { color: var(--accent-strong); font-size: .78rem; font-weight: 900; text-transform: uppercase; letter-spacing: .12em; }
.org-preview-header strong { font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1; letter-spacing: -.045em; }
.org-scroll { overflow:auto; padding: 18px 0 24px; }
.org-tree, .org-tree ul { margin: 0; padding: 0; list-style: none; display: flex; justify-content: center; gap: 24px; position: relative; }
.org-tree ul { margin-top: 34px; }
.org-tree li { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 210px; }
.org-tree li::before { content: ''; position: absolute; top: -18px; left: 50%; width: 2px; height: 18px; background: #ded8ca; }
.org-tree > li::before { display:none; }
.org-tree ul::before { content: ''; position: absolute; top: -18px; left: 10%; right: 10%; height: 2px; background: #ded8ca; }
.org-node { width: 220px; min-height: 92px; background: rgba(255,255,255,.96); border: 1px solid var(--line); border-radius: 24px; padding: 17px 18px 15px 24px; box-shadow: 0 18px 42px rgba(31,35,48,.12); border-left: 7px solid var(--accent-strong); cursor: pointer; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; position: relative; overflow: hidden; }
.org-node::after { content: 'TP'; position: absolute; top: 14px; right: 14px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 999px; background: #fff0d9; color: var(--accent-strong); font-size: .65rem; font-weight: 900; }
.org-node:hover { transform: translateY(-4px); box-shadow: 0 24px 56px rgba(31,35,48,.16); border-color: rgba(245,130,32,.5); }
.org-node strong, .org-node span, .org-node em { display:block; }
.org-node strong { font-size: 1rem; letter-spacing: -.02em; padding-right: 34px; }
.org-node span { margin-top: 5px; color: var(--muted); font-size: .86rem; line-height: 1.3; }
.org-node em { display:inline-block; margin-top: 9px; color: var(--brand); background: #f6f8ff; border-radius: 999px; padding: 4px 9px; font-style: normal; font-weight: 800; font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; }
.org-list { max-width: 1180px; margin: 0 auto; display:grid; gap: 10px; }
.org-list article { display:flex; justify-content:space-between; gap: 16px; align-items:center; background: #fff; border:1px solid var(--line); border-radius: 18px; padding: 15px 16px; box-shadow:0 8px 24px rgba(31,35,48,.05); }
.org-list span, .org-list small { display:block; color: var(--muted); margin-top: 4px; }
.org-list button { border:0; border-radius:999px; padding: 8px 12px; background:#f2f2f2; cursor:pointer; font-weight:800; }
.org-list button[data-remove-person] { min-width: 34px; color: var(--red); font-size: 18px; padding: 5px 10px; }
@media (max-width: 760px) { .org-list article { align-items:flex-start; flex-direction:column; } .org-tree { justify-content:flex-start; } }

/* Kanban board for Project Task Tracker */
.kanban-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 20px; }
.kanban-column { --status-bg:#fff; --status-line:var(--line); --status-ink:var(--ink); background: var(--status-bg); border: 1px solid var(--status-line); border-radius: 20px; padding: 16px; min-height: 300px; box-shadow:0 10px 28px rgba(31,35,48,.05); }
.kanban-column h3 { text-align: center; margin: 0 0 12px; font-size: 16px; color:var(--status-ink); }
.kanban-column h3 span { color:var(--muted); font-weight:700; }
.kanban-cards { min-height: 200px; }
.kanban-card { background: rgba(255,255,255,.82); border: 1px solid var(--status-line); border-left: 5px solid var(--status-line); border-radius: 14px; padding: 14px; margin-bottom: 12px; }
.kanban-card strong { display: block; margin-bottom: 6px; }
.kanban-column.status-todo { --status-bg:#fff8e8; --status-line:#f4b14d; --status-ink:#8a4300; }
.kanban-column.status-in-progress { --status-bg:#eef3ff; --status-line:#6682ff; --status-ink:#1737d8; }
.kanban-column.status-review { --status-bg:#f4efff; --status-line:#9b72e7; --status-ink:#5930a8; }
.kanban-column.status-done { --status-bg:#edf9f2; --status-line:#43ad77; --status-ink:#1f8f5f; }

/* Flowchart builder */
.flow-canvas { position: relative; min-height: 500px; background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 20px; overflow: auto; }
.flow-node { position: absolute; width: 160px; min-height: 60px; padding: 12px; border-radius: 14px; background: #fff; border: 2px solid var(--line); box-shadow: 0 8px 24px rgba(31,35,48,.08); cursor: pointer; font-size: 13px; font-weight: 700; display: flex; flex-direction:column; gap:4px; align-items: center; justify-content: center; text-align: center; z-index:2; }
.flow-node small { color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.flow-node.start-node small, .flow-node.end-node small { color: rgba(255,255,255,.76); }
.flow-connector-panel { margin-top: 18px; background: #fff; border:1px solid var(--line); border-radius:22px; padding:18px; }
.flow-connector-list { display:grid; gap:10px; }
.flow-connector-list article { display:flex; justify-content:space-between; align-items:center; gap:12px; border:1px solid var(--line); border-radius:16px; padding:12px 14px; background:#fffdf8; }
.flow-connector-list em { display:inline-block; margin-left:8px; padding:3px 8px; border-radius:999px; background:var(--accent-soft); color:#8a4300; font-style:normal; font-weight:800; }
.flow-node.start-node, .flow-node.end-node { background: var(--ink); color: #fff; border-color: var(--ink); }
.flow-node.decision-node { background: #fff3d9; border-color: var(--accent-strong); }
.flow-node.process-node { background: #f6f8ff; border-color: #c5d0ff; }
.canvas-controls { margin-top: 20px; display: flex; gap: 10px; }

/* Homepage/tool output polish */
.tool-form { position: static; }
.result-frame { clear: both; margin-top: 26px; background: #fff; border: 1px solid var(--line); border-radius: 28px; padding: 22px; box-shadow: var(--shadow); overflow: visible; scroll-margin-top: 110px; }
.result-frame-head { display:flex; justify-content:space-between; gap:18px; align-items:flex-start; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.result-frame-head h2 { font-size: clamp(24px, 3vw, 34px); margin: 0 0 8px; }
.result-frame-head p { margin: 0; color: var(--muted); line-height: 1.55; max-width: 720px; }
.result-frame .eyebrow { margin-bottom: 8px; }
.mini-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; border:1px solid var(--line); background:#fff; color:var(--ink); border-radius:999px; padding:10px 14px; font-weight:800; cursor:pointer; }
.mini-btn:hover, .mini-btn.active { border-color: var(--accent-strong); color: var(--accent-strong); background: var(--accent-soft); }
.mini-btn.danger, .danger { color: var(--red); }
@media (min-width: 901px) { .four-product-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 900px) { .kanban-board, #task-board { grid-template-columns:1fr !important; } .result-frame-head { flex-direction:column; } }

/* Task tracker layout tidy */
.sr-only { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; }
.task-tool-section { padding-top: 26px; }
.task-tool-section .compact-stats { margin-top: 0; margin-bottom: 18px; gap: 10px; }
.task-tool-section .compact-stats .summary-card { min-height: 42px; padding: 9px 14px; box-shadow:0 8px 18px rgba(31,35,48,.045); }
.task-tool-section .compact-stats .summary-card span { font-size: 13px; }
.task-tool-section .compact-stats .summary-card strong { font-size: 16px; }
.task-tool-section .hero-actions, .hero.compact .hero-actions { margin-top: 18px; }
.hero.compact { padding-bottom: 18px; }
.task-tool-section .buy-box { margin-top: 10px; }
@media (max-width: 900px) { .task-tool-section { padding-top: 18px; } }

/* Attendance dashboard */
.attendance-dashboard-grid { display:grid; grid-template-columns: 1.15fr .85fr; gap:18px; align-items:start; }
.dashboard-panel { background:#fff; border:1px solid var(--line); border-radius:22px; padding:20px; box-shadow:0 10px 28px rgba(31,35,48,.05); }
.dashboard-panel.wide { min-width:0; }
.dashboard-panel h3 { margin-bottom:16px; }
.dash-bar { margin: 0 0 13px; }
.dash-bar > div { display:flex; justify-content:space-between; gap:12px; color:var(--muted); font-size:13px; font-weight:800; margin-bottom:6px; }
.dash-bar strong { color:var(--ink); }
.dash-bar i { display:block; height:12px; border-radius:999px; background:var(--brand); box-shadow: inset 0 -4px 8px rgba(0,0,0,.08); }
.dash-bar.present i { background:#43ad77; }
.dash-bar.remote i { background:#6682ff; }
.dash-bar.late i { background:#f4b14d; }
.dash-bar.absent i { background:#d85a5a; }
.dash-bar.excellent i { background:linear-gradient(90deg,#1f8f5f,#6ad18f); }
.staff-score-list { display:grid; gap:14px; }
.staff-score-card { display:grid; grid-template-columns: 220px 1fr; gap:16px; align-items:start; padding:14px; border:1px solid var(--line); border-radius:18px; background:#fffdf8; }
.staff-score-card strong, .staff-score-card small { display:block; }
.staff-score-card small { color:var(--muted); margin-top:4px; }
.score-bars { display:grid; gap:7px; }
.score-bars .dash-bar { margin:0; }
.score-bars .dash-bar i { height:9px; }
@media (max-width: 900px) { .attendance-dashboard-grid, .staff-score-card { grid-template-columns:1fr; } }
.staff-import-list { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px; }
.staff-import-list div { border:1px solid var(--line); border-radius:16px; padding:12px 14px; background:#fffdf8; }
.staff-import-list strong, .staff-import-list span { display:block; }
.staff-import-list span { color:var(--muted); font-size:13px; margin-top:4px; line-height:1.35; }
@media (max-width: 900px) { .staff-import-list { grid-template-columns:1fr; } }