@charset "UTF-8";
/* ─────────────────────────────────────────────────────────────────────────
   /time-tracking/ landing page
   Prefix: tt-   ·   Reuses the theme's global tokens from main.css (:root).
   Only the shadow + max-width tokens are page-local, scoped to .tt-page so
   nothing leaks into the rest of the site.
   Product visuals are real screenshots (assets/img/time-tracking/) with
   faithful CSS recreations as onerror fallbacks.
   ───────────────────────────────────────────────────────────────────────── */

.tt-page{
  --sh-sm:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.08);
  --sh-md:0 4px 12px rgba(0,0,0,.07),0 2px 4px rgba(0,0,0,.05);
  --sh-lg:0 12px 32px rgba(0,0,0,.10),0 4px 8px rgba(0,0,0,.05);
  --maxw:1080px;
}
.tt-page img{max-width:100%;display:block}

/* ── shared scaffolding ── */
.tt-wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5.6vw,48px)}
.tt-eyebrow{font-family:var(--font);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.tt-eyebrow-muted{color:#7b818c}
.tt-section{padding:clamp(64px,9vw,120px) 0}
.tt-section-tight{padding-top:clamp(40px,6vw,72px);padding-bottom:clamp(40px,6vw,72px)}
.tt-section-flush-top{padding-top:0}
.tt-section h2{font-family:var(--font);font-weight:700;letter-spacing:-.035em;line-height:1.08;font-size:clamp(26px,3.6vw,40px)}
.tt-lede{color:var(--ink-2);font-size:clamp(16px,1.5vw,18px);line-height:1.6;max-width:62ch}
.tt-lede-center{margin:14px auto 0}
.tt-btn{display:inline-block;padding:14px 30px;border-radius:8px;font-family:var(--body);font-size:15px;font-weight:600;text-decoration:none;cursor:pointer;border:none;transition:all .15s var(--ease)}
.tt-btn-dark{background:var(--ink);color:#fff}
.tt-btn-dark:hover{background:#333;transform:translateY(-1px)}
.tt-btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.tt-btn-ghost:hover{border-color:var(--ink)}
.tt-trustline{font-size:13px;color:var(--ink-3);display:inline-flex;align-items:center;gap:8px}
.tt-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(22,163,74,.14)}

/* ── product UI recreations (shared look) ── */
.tt-ui{font-family:var(--body);background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh-lg);overflow:hidden}
.tt-ui-avatar{width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:9px;font-weight:700;font-family:var(--font);flex:none}
.av-ab{background:#475569}.av-an{background:#be123c}.av-gd{background:#0d9488}.av-jh{background:#ea8a0a}.av-sl{background:#0891b2}

/* framed real-screenshot slot — shows the PNG when present, recreation fallback until then */
.tt-shot{position:relative}
.tt-shot>img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--line);box-shadow:var(--sh-lg)}
.tt-shot>.tt-fallback{display:none}

/* full-width marquee showcase band */
.tt-showcase{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tt-sc-head{text-align:center;max-width:58ch;margin:0 auto 36px}
.tt-sc-head h2{font-family:var(--font)}
.tt-sc-frame{max-width:980px;margin:0 auto}
.tt-sc-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:14px}
.tt-sc-card{border:1px solid var(--line);border-radius:12px;padding:16px;background:#fff}
.tt-sc-card .v{font-family:var(--font);font-weight:700;font-size:24px}
.tt-sc-card .l{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-top:4px}

/* ── HERO ── */
.tt-hero{padding:clamp(54px,8vw,96px) 0 clamp(40px,6vw,72px)}
.tt-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,64px);align-items:center}
.tt-hero h1{font-family:var(--font);font-weight:700;letter-spacing:-.045em;line-height:1.03;font-size:clamp(34px,5.2vw,60px);margin:18px 0}
.tt-hero .tt-lede{font-size:clamp(16px,1.6vw,19px);color:var(--ink-2);line-height:1.55;max-width:34ch}
.tt-hero-cta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:28px 0 14px}

/* hero board snippet */
.tt-board{padding:6px 0}
.tt-board-row{display:grid;grid-template-columns:1.4fr .8fr .9fr;align-items:center;gap:8px;padding:11px 16px;border-bottom:1px solid #f1f1f1;font-size:13.5px}
.tt-board-row:last-child{border-bottom:none}
.tt-board-row.run{background:#f7faf8}
.tt-board-name{font-weight:500;color:var(--ink)}
.tt-board-person{display:flex;align-items:center;gap:7px;color:var(--ink-3);font-size:12px}
.tt-board-time{justify-self:end;display:flex;align-items:center;gap:7px;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.tt-play{width:0;height:0;border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent var(--blue)}
.tt-run-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(22,163,74,.18)}
.tt-run-time{color:var(--green);font-weight:600}
.tt-badge{margin:14px 0 0;display:inline-flex;align-items:center;gap:10px;background:#1c2230;color:#fff;border-radius:10px;padding:9px 12px;box-shadow:var(--sh-lg);font-size:12px}
.tt-badge .tt-run-dot{box-shadow:0 0 0 3px rgba(22,163,74,.3)}
.tt-badge b{font-family:var(--font);font-variant-numeric:tabular-nums;font-size:14px}
.tt-badge .stop{margin-left:6px;width:14px;height:14px;border:1.5px solid #5b6577;border-radius:3px}

/* ── contrast block ── */
.tt-contrast{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tt-contrast h2{margin-bottom:10px}
.tt-cols{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:36px}
.tt-col{border:1px solid var(--line);border-radius:16px;padding:28px}
.tt-col h3{font-family:var(--font);font-size:18px;font-weight:600;margin-bottom:16px;display:flex;align-items:center;gap:10px}
.tt-col ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.tt-col li{font-size:15px;color:var(--ink-2);line-height:1.5;padding-left:26px;position:relative}
.tt-col.bad{background:#fff}
.tt-col.bad h3{color:var(--ink-3)}
.tt-col.bad li::before{content:"\2715";position:absolute;left:0;color:var(--ink-3);font-size:13px;top:1px}
.tt-col.good{background:#0f1115;border-color:#0f1115}
.tt-col.good h3{color:#fff}
.tt-col.good li{color:#cfd3da}
.tt-col.good li::before{content:"\2713";position:absolute;left:0;color:#4ade80;font-weight:700;font-size:13px;top:0}

/* ── trust strip ── */
.tt-trust{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;align-items:stretch}
.tt-trust .pill{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:12px 20px;font-size:14px;font-weight:500;color:var(--ink)}
.tt-trust .pill svg{width:18px;height:18px;color:var(--green)}

/* ── feature grid ── */
.tt-feat-head{text-align:center;max-width:60ch;margin:0 auto 14px}
.tt-feat-head h2{font-family:var(--font)}
.tt-feat-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:20px;margin-top:48px}
.tt-card{grid-column:span 2;background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px;display:flex;flex-direction:column;gap:16px;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.tt-card:hover{transform:translateY(-3px);box-shadow:var(--sh-md)}
.tt-card.wide{grid-column:span 3}
.tt-card.x4{grid-column:span 4}
.tt-card.compact{justify-content:center}
.tt-card.compact .visual{margin-top:18px}
.tt-card.x4 .visual{position:relative}
.tt-card.x4 .tt-grid{width:100%}
.tt-ts-status{position:absolute;top:-13px;right:16px;z-index:2;box-shadow:var(--sh-sm)}
.tt-card h3{font-family:var(--font);font-size:19px;font-weight:600;letter-spacing:-.02em}
.tt-card p{font-size:14.5px;color:var(--ink-2);line-height:1.55}
.tt-card .visual{margin-top:auto}

/* timer popover recreation */
.tt-pop{border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:var(--sh-md);overflow:hidden;font-size:12px}
.tt-pop-head{display:flex;align-items:center;justify-content:space-between;padding:11px 13px;border-bottom:1px solid #f1f1f1}
.tt-pop-head .t{display:flex;align-items:center;gap:7px;font-weight:600;font-family:var(--font);font-size:13px}
.tt-pop-head .clock{width:14px;height:14px;border:1.6px solid var(--ink-3);border-radius:50%}
.tt-pop-tabs{display:flex;gap:4px;padding:8px;background:#fafafa;border-bottom:1px solid #f1f1f1}
.tt-pop-tabs span{flex:1;text-align:center;padding:7px;border-radius:7px;font-weight:600;color:var(--ink-3);font-size:11px}
.tt-pop-tabs span.on{background:#fff;color:var(--ink);box-shadow:var(--sh-sm)}
.tt-pop-body{padding:13px}
.tt-bill-line{color:var(--ink-3);font-size:11px;margin-bottom:11px}
.tt-startbtn{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--blue);color:#fff;border-radius:9px;padding:11px;font-weight:600;font-size:13px}
.tt-startbtn .tt-play{border-color:transparent transparent transparent #fff}
.tt-log{margin-top:12px;display:flex;flex-direction:column;gap:9px}
.tt-log-row{display:flex;align-items:center;justify-content:space-between;font-size:12px}
.tt-log-row .l{display:flex;align-items:center;gap:8px;color:var(--ink-2)}
.tt-log-row .d{width:6px;height:6px;border-radius:50%}
.tt-log-row .h{font-weight:600;color:var(--ink)}

/* billable summary visual */
.tt-bill{border:1px solid var(--line);border-radius:12px;padding:16px;background:#fff;box-shadow:var(--sh-sm)}
.tt-bill .row{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;margin-bottom:12px}
.tt-bill .row b{font-family:var(--font);font-size:20px}
.tt-bar{height:9px;border-radius:6px;background:#eee;overflow:hidden;display:flex}
.tt-bar i{display:block;height:100%}
.tt-toggle{margin-top:14px;display:flex;background:#f3f4f6;border-radius:8px;padding:3px}
.tt-toggle span{flex:1;text-align:center;font-size:12px;font-weight:600;padding:8px;border-radius:6px;color:var(--ink-3)}
.tt-toggle span.on{background:#fff;color:var(--blue);box-shadow:var(--sh-sm)}

/* category chips visual */
.tt-cat{border:1px solid var(--line);border-radius:12px;padding:16px;background:#fff;box-shadow:var(--sh-sm)}
.tt-cat label{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.tt-cat .input{margin-top:7px;border:1px solid var(--line);border-radius:8px;padding:10px 12px;font-size:13px;color:var(--ink)}
.tt-cat .input .car{display:inline-block;width:1px;height:14px;background:var(--blue);vertical-align:-2px;margin-left:1px;animation:tt-blink 1s steps(1) infinite}
@keyframes tt-blink{50%{opacity:0}}
.tt-chips{display:flex;gap:8px;margin-top:10px}
.tt-chip{font-size:12px;font-weight:500;padding:6px 12px;border-radius:7px;background:#f3f4f6;color:var(--ink)}

/* timesheet mini grid */
.tt-grid{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;box-shadow:var(--sh-sm);font-size:11.5px}
.tt-grid table{width:100%;border-collapse:collapse}
.tt-grid th,.tt-grid td{padding:7px 9px;text-align:center;border-bottom:1px solid #f1f1f1}
.tt-grid th{background:#fafafa;color:var(--ink-3);font-weight:600;font-size:10px;text-transform:uppercase;letter-spacing:.04em}
.tt-grid td:first-child,.tt-grid th:first-child{text-align:left;color:var(--ink);font-weight:500}
.tt-grid .bil{color:var(--green);font-weight:600}
.tt-grid .non{color:var(--amber);font-weight:600}
.tt-grid tfoot td{font-weight:700;background:#fafafa;color:var(--ink)}
.tt-statusbadge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--amber);background:#fef3e2;border:1px solid #f6dcb0;border-radius:999px;padding:4px 11px}

/* stacked chart */
.tt-chart{border:1px solid var(--line);border-radius:12px;padding:16px 14px 12px;background:#fff;box-shadow:var(--sh-sm)}
.tt-chart-bare{border:none;box-shadow:none;padding:10px 0 0}
.tt-chart-bars{display:flex;align-items:flex-end;gap:12px;height:120px}
.tt-cbar{flex:1;display:flex;flex-direction:column-reverse;border-radius:5px 5px 0 0;overflow:hidden;background:#f3f4f6}
.tt-cbar i{display:block;width:100%}
.tt-chart-x{display:flex;gap:12px;margin-top:8px}
.tt-chart-x span{flex:1;text-align:center;font-size:10px;color:var(--ink-3)}
.tt-legend{display:flex;flex-wrap:wrap;gap:10px 14px;margin-top:12px}
.tt-legend-center{justify-content:center;margin-top:14px}
.tt-legend span{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--ink-2)}
.tt-legend i{width:9px;height:9px;border-radius:2px}

/* ── how it works ── */
.tt-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
.tt-step{position:relative;padding-top:8px}
.tt-step .n{font-family:var(--font);font-weight:700;font-size:13px;color:#fff;background:var(--ink);width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.tt-step h3{font-family:var(--font);font-size:18px;font-weight:600;margin-bottom:8px}
.tt-step p{font-size:14.5px;color:var(--ink-2);line-height:1.55}

/* ── approvals section ── */
.tt-approve{background:#0f1115;color:#fff;border-radius:24px;padding:clamp(28px,4vw,48px);display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(28px,4vw,56px);align-items:center}
.tt-approve h2{color:#fff}
.tt-approve-h2{margin:12px 0 14px}
.tt-approve .tt-lede{color:#aeb4bf}
.tt-panel{background:#fff;border-radius:14px;overflow:hidden;box-shadow:var(--sh-lg);color:var(--ink)}
.tt-panel-head{font-size:12px;font-weight:600;color:var(--ink-2);background:#f5f6f8;padding:11px 16px;font-family:var(--font)}
.tt-prow{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid #f1f1f1;font-size:13px}
.tt-prow:last-child{border-bottom:none}
.tt-prow .who{display:flex;align-items:center;gap:10px;font-weight:500}
.tt-prow .acts{display:flex;gap:7px}
.tt-mini{font-size:11px;font-weight:600;border-radius:7px;padding:6px 11px;border:1px solid}
.tt-mini.ap{color:var(--green);border-color:#bbe6c6;background:#f0fbf3}
.tt-mini.rj{color:var(--rose);border-color:#f4c2cd;background:#fdf1f4}

/* ── built into work ── */
.tt-built{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(28px,4vw,56px);align-items:center}
.tt-built-h2{margin:12px 0 14px}
.tt-tbl-head,.tt-tbl-row{display:grid;grid-template-columns:1.6fr .6fr .8fr 1fr;align-items:center;gap:10px;padding:12px 16px;white-space:nowrap;font-size:12.5px}
.tt-tbl-head{background:#fafafa;color:var(--ink-3);font-weight:600;font-size:10px;text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid #f1f1f1}
.tt-th-right{justify-self:end}
.tt-tbl-row{border-bottom:1px solid #f1f1f1}
.tt-tbl-row:last-child{border-bottom:none}
.tt-tbl-row .nm{font-weight:500;overflow:hidden;text-overflow:ellipsis}
.tt-tbl-row .pr{display:flex;align-items:center;gap:6px;color:var(--ink-3)}
.tt-tbl-row .tt-due{color:var(--ink-3)}
.tt-tbl-row .tm{display:flex;align-items:center;gap:6px;color:var(--ink-2);justify-self:end;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ── pricing nudge ── */
.tt-price{text-align:center;background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:clamp(36px,5vw,64px)}
.tt-price h2{margin-bottom:14px}
.tt-price .tt-lede{margin:0 auto 26px}
.tt-price-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ── testimonials ── */
.tt-quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.tt-quote{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px;font-size:15px;line-height:1.55;color:var(--ink);display:flex;flex-direction:column;gap:8px}
.tt-quote-text{flex:1}
.tt-quote .who{margin-top:16px;display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-3)}
.tt-quote-avatar{width:40px;height:40px;border-radius:50%;flex:none;object-fit:cover}
.tt-quote .who strong{color:var(--ink);font-weight:600}
.tt-quote-stars{display:flex;gap:2px;margin-bottom:4px}

/* aggregate rating row under the section heading */
.tt-rating{margin-top:18px;display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center}
.tt-rating-stars{display:inline-flex;gap:2px}
.tt-rating-text{font-size:13px;color:var(--ink-2);font-weight:500}

/* star primitives (full / half / empty) */
.tt-star{width:16px;height:16px;display:block}
.tt-star-half{position:relative;width:16px;height:16px;display:inline-block}
.tt-star-half .tt-star{position:absolute;inset:0}
.tt-star-half .tt-star-fg{clip-path:inset(0 50% 0 0)}

/* ── FAQ ── */
.tt-faq{max-width:760px;margin:40px auto 0}
.tt-q{border-bottom:1px solid var(--line)}
.tt-q button{width:100%;text-align:left;background:none;border:none;padding:20px 0;font-family:var(--font);font-weight:600;font-size:17px;color:var(--ink);cursor:pointer;display:flex;justify-content:space-between;gap:16px;align-items:center}
.tt-q .a{max-height:0;overflow:hidden;transition:max-height .3s var(--ease);color:var(--ink-2);font-size:15px;line-height:1.6}
.tt-q .a p{padding:0 0 20px}
.tt-q.open .a{max-height:260px}
.tt-q .chev{transition:transform .3s var(--ease);color:var(--ink-3);flex:none}
.tt-q.open .chev{transform:rotate(180deg)}

/* ── final CTA ── */
.tt-final{text-align:center;background:#0f1115;color:#fff;border-radius:28px;padding:clamp(48px,7vw,96px) clamp(20px,5vw,48px)}
.tt-final h2{color:#fff;font-size:clamp(28px,4vw,48px)}
.tt-final p{color:#aeb4bf;margin:16px auto 30px;font-size:17px}
.tt-final .tt-btn-dark{background:#fff;color:#111}
.tt-final .tt-btn-dark:hover{background:#e9e9e9}

/* ── responsive ── */
@media(max-width:900px){
  .tt-hero-grid,.tt-cols,.tt-approve,.tt-built{grid-template-columns:1fr}
  .tt-hero-visual{order:-1}
  .tt-feat-grid{grid-template-columns:1fr}
  .tt-card,.tt-card.wide,.tt-card.x4{grid-column:auto}
  .tt-steps,.tt-quotes{grid-template-columns:1fr}
  .tt-sc-cards{grid-template-columns:repeat(2,1fr)}
}