/* Project Timebook — Lee Wyatt Corp
   Design system. Palette is sampled from the real application so the site and
   the product are the same object: bg #0c0e12, panel #181a1e, accent #48be9b. */

@font-face { font-family:"PT Sans Serif"; src:url("../fonts/inter-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"PT Sans Serif"; src:url("../fonts/inter-500.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"PT Sans Serif"; src:url("../fonts/inter-600.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"PT Display"; src:url("../fonts/display-600.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"PT Display"; src:url("../fonts/display-700.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }

:root {
  --bg:#0a0b0e;
  --bg-2:#0e1014;
  --panel:#141619;
  --panel-2:#191c20;
  --line:rgba(255,255,255,.075);
  --line-2:rgba(255,255,255,.145);
  --ink:#f3f4f6;
  --muted:#a3a9b3;
  --quiet:#6f757f;
  --accent:#48be9b;
  --accent-dim:#2f8e73;
  --accent-soft:rgba(72,190,155,.11);
  --amber:#d9a441;
  --sans:"PT Sans Serif",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --display:"PT Display","PT Sans Serif",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --safe-top:env(safe-area-inset-top,0px);
  --shell:1200px;
  --r:12px;
}

*,*::before,*::after { box-sizing:border-box; }
html { background:var(--bg); scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--bg); color:var(--ink);
  font:400 16px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"kern" 1,"liga" 1,"calt" 1;
  overflow-x:hidden;
}
img,svg,video { max-width:100%; height:auto; display:block; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; }
::selection { background:rgba(72,190,155,.28); }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }

.shell { width:min(var(--shell),calc(100% - 48px)); margin-inline:auto; }

/* ---------- type ---------- */
h1,h2,h3,h4 { font-family:var(--display); font-weight:600; letter-spacing:-.032em; line-height:1.06; margin:0; }
h1 { font-size:clamp(2.65rem,1.35rem + 4.1vw,4.6rem); letter-spacing:-.042em; line-height:1.02; }
h2 { font-size:clamp(2rem,1.25rem + 2.4vw,3.15rem); letter-spacing:-.038em; }
h3 { font-size:1.2rem; letter-spacing:-.024em; line-height:1.3; }
p { margin:0; }
.lede { font-size:clamp(1.06rem,1rem + .35vw,1.24rem); line-height:1.6; color:var(--muted); }
.eyebrow {
  display:inline-flex; align-items:center; gap:9px;
  font-size:.735rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); margin:0 0 20px;
}
.eyebrow::before { content:""; width:22px; height:1px; background:var(--accent); opacity:.55; }
.muted { color:var(--muted); }
.quiet { color:var(--quiet); font-size:.875rem; }

/* ---------- buttons (no pills — house rule) ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:48px; padding:0 22px; border-radius:10px; border:1px solid transparent;
  font-weight:600; font-size:.95rem; letter-spacing:-.006em; cursor:pointer;
  transition:background .18s ease,border-color .18s ease,transform .18s ease,color .18s ease;
  white-space:nowrap;
}
.btn:active { transform:translateY(1px); }
.btn-primary { background:var(--accent); color:#06231b; }
.btn-primary:hover { background:#5ad0ac; }
.btn-ghost { background:rgba(255,255,255,.045); border-color:var(--line-2); color:var(--ink); }
.btn-ghost:hover { background:rgba(255,255,255,.085); border-color:rgba(255,255,255,.24); }
.btn-quiet { background:transparent; border-color:var(--line-2); color:var(--muted); }
.btn-quiet:hover { color:var(--ink); border-color:rgba(255,255,255,.24); }
.btn-sm { min-height:40px; padding:0 16px; font-size:.885rem; border-radius:9px; }
.btn[disabled] { opacity:.5; cursor:not-allowed; }

/* ---------- header ---------- */
.site-header {
  position:sticky; top:0; z-index:80;
  padding-top:var(--safe-top);
  background:rgba(10,11,14,.82);
  backdrop-filter:saturate(150%) blur(14px); -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid var(--line);
}
.header-inner { display:flex; align-items:center; gap:28px; height:70px; }
.brand { display:flex; align-items:center; flex:0 0 auto; }
.brand img { width:158px; }
.site-nav { display:flex; align-items:center; gap:4px; margin-left:6px; }
.site-nav a {
  padding:9px 13px; border-radius:8px; font-size:.925rem; color:var(--muted);
  transition:color .16s ease,background .16s ease;
}
.site-nav a:hover { color:var(--ink); background:rgba(255,255,255,.05); }
.site-nav a[aria-current="page"] { color:var(--ink); background:rgba(255,255,255,.06); }
.header-actions { display:flex; align-items:center; gap:10px; margin-left:auto; }
.header-actions .avatar-link { display:flex; align-items:center; gap:9px; }
.avatar {
  width:32px; height:32px; border-radius:9px; flex:0 0 auto;
  display:grid; place-items:center;
  background:var(--accent-soft); border:1px solid rgba(72,190,155,.32);
  color:var(--accent); font-weight:600; font-size:.82rem; letter-spacing:0;
}
.hamburger {
  display:none; width:42px; height:42px; border-radius:10px;
  border:1px solid var(--line-2); background:rgba(255,255,255,.04);
  align-items:center; justify-content:center; cursor:pointer;
}
.hamburger span { display:block; width:17px; height:1.5px; background:var(--ink); border-radius:2px; position:relative; transition:transform .22s ease,opacity .22s ease; }
.hamburger span::before,.hamburger span::after {
  content:""; position:absolute; left:0; width:17px; height:1.5px; background:var(--ink); border-radius:2px;
  transition:transform .22s ease,opacity .22s ease;
}
.hamburger span::before { top:-5.5px; } .hamburger span::after { top:5.5px; }
.hamburger[aria-expanded="true"] span { background:transparent; }
.hamburger[aria-expanded="true"] span::before { transform:translateY(5.5px) rotate(45deg); }
.hamburger[aria-expanded="true"] span::after { transform:translateY(-5.5px) rotate(-45deg); }

/* mobile drawer */
.drawer {
  position:fixed; inset:0; z-index:79; display:none;
  padding:calc(var(--safe-top) + 82px) 24px 32px;
  background:rgba(8,9,12,.97);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  overflow-y:auto;
}
.drawer.open { display:block; }
.drawer nav { display:grid; gap:2px; }
.drawer nav a {
  padding:15px 14px; border-radius:10px; font-family:var(--display); font-size:1.3rem;
  letter-spacing:-.028em; border-bottom:1px solid var(--line);
}
.drawer nav a:active { background:rgba(255,255,255,.06); }
.drawer .drawer-actions { display:grid; gap:11px; margin-top:26px; }
.drawer .drawer-actions .btn { width:100%; }
body.nav-open { overflow:hidden; }

/* ---------- sections ---------- */
main { display:block; }
.section { padding:clamp(72px,8vw,124px) 0; }
.section + .section { border-top:1px solid var(--line); }
.section-head { max-width:660px; margin-bottom:clamp(38px,4.5vw,58px); }
.section-head h2 + p { margin-top:20px; }
.center { text-align:center; margin-inline:auto; }

/* ---------- hero ---------- */
.hero { position:relative; padding:clamp(64px,7vw,104px) 0 clamp(56px,6vw,88px); overflow:hidden; }
.hero::before {
  content:""; position:absolute; inset:-30% -10% auto; height:720px; pointer-events:none;
  background:radial-gradient(680px 380px at 50% 0,rgba(72,190,155,.13),transparent 68%);
}
.hero-inner { position:relative; max-width:840px; }
.hero h1 em { font-style:normal; color:var(--accent); }
.hero .lede { margin-top:24px; max-width:620px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:36px; }
.hero-note { margin-top:20px; color:var(--quiet); font-size:.875rem; }

/* framed product shot */
.frame {
  position:relative; padding:10px; border-radius:16px;
  background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.02) 42%);
  border:1px solid var(--line-2);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.4);
}
.frame > img { border-radius:9px; border:1px solid rgba(255,255,255,.07); display:block; width:100%; }
.frame-glow::after {
  content:""; position:absolute; inset:auto 8% -34px; height:70px; z-index:-1; pointer-events:none;
  background:radial-gradient(60% 100% at 50% 0,rgba(72,190,155,.28),transparent 72%); filter:blur(20px);
}
.hero-shot { margin-top:clamp(48px,5vw,72px); }

/* ---------- cards / grids ---------- */
.grid { display:grid; gap:18px; }
.grid-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.card {
  padding:28px; border-radius:var(--r); border:1px solid var(--line);
  background:linear-gradient(165deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
}
.card h3 { margin-bottom:11px; }
.card p { color:var(--muted); font-size:.945rem; }
.card-num { font-family:var(--mono); font-size:.75rem; letter-spacing:.1em; color:var(--accent); margin-bottom:22px; }

.stat { padding:26px; border-radius:var(--r); border:1px solid var(--line); background:var(--panel); }
.stat b { display:block; font-family:var(--display); font-size:2.1rem; letter-spacing:-.04em; color:var(--ink); }
.stat span { display:block; margin-top:7px; color:var(--muted); font-size:.9rem; }

/* screen showcase */
.shot { border-radius:var(--r); border:1px solid var(--line); background:var(--panel); padding:12px; }
.shot img { border-radius:8px; border:1px solid rgba(255,255,255,.07); }
.shot figcaption { display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding:14px 4px 3px; }
.shot figcaption strong { font-size:.95rem; }
.shot figcaption span { color:var(--quiet); font-size:.82rem; }

.screen-block { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.32fr); gap:clamp(28px,4vw,64px); align-items:center; }
.screen-block + .screen-block { margin-top:clamp(56px,6vw,104px); padding-top:clamp(56px,6vw,104px); border-top:1px solid var(--line); }
.screen-block.flip > .screen-copy { order:2; }
.screen-copy h3 { font-size:clamp(1.5rem,1.15rem + 1.1vw,2.1rem); letter-spacing:-.034em; }
.screen-copy p { margin-top:16px; color:var(--muted); }
.feature-list { margin:22px 0 0; padding:0; list-style:none; display:grid; gap:11px; }
.feature-list li { display:grid; grid-template-columns:20px 1fr; gap:11px; align-items:start; color:var(--muted); font-size:.94rem; }
.feature-list li::before { content:""; margin-top:8px; width:6px; height:6px; border-radius:2px; background:var(--accent); }

/* platform toggle */
.toggle { display:inline-flex; gap:4px; padding:4px; border-radius:11px; border:1px solid var(--line-2); background:rgba(255,255,255,.035); }
.toggle button { min-height:36px; padding:0 16px; border-radius:8px; border:0; background:transparent; color:var(--muted); font-size:.885rem; font-weight:500; cursor:pointer; transition:background .16s,color .16s; }
.toggle button[aria-pressed="true"] { background:rgba(255,255,255,.1); color:var(--ink); }

/* ---------- callout / privacy ---------- */
.callout {
  padding:clamp(30px,4vw,52px); border-radius:16px;
  border:1px solid rgba(72,190,155,.28);
  background:linear-gradient(150deg,rgba(72,190,155,.1),rgba(72,190,155,.02) 58%);
}
.callout h2 { max-width:16ch; }
.callout p { margin-top:20px; color:#cfd6d3; max-width:60ch; }

/* ---------- price ---------- */
.price-card { padding:clamp(30px,4vw,46px); border-radius:16px; border:1px solid var(--line-2); background:var(--panel); }
.price-tag { display:flex; align-items:baseline; gap:12px; }
.price-tag b { font-family:var(--display); font-size:clamp(3rem,2rem + 3.4vw,4.4rem); letter-spacing:-.05em; line-height:1; }
.price-tag span { color:var(--muted); }
.price-list { margin:26px 0 0; padding:0; list-style:none; display:grid; gap:13px; }
.price-list li { display:grid; grid-template-columns:19px 1fr; gap:12px; align-items:start; color:var(--muted); font-size:.95rem; }
.price-list li svg { margin-top:4px; color:var(--accent); }

/* ---------- FAQ ---------- */
.qa { border-top:1px solid var(--line); }
.qa details { border-bottom:1px solid var(--line); }
.qa summary {
  list-style:none; cursor:pointer; padding:24px 44px 24px 0; position:relative;
  font-family:var(--display); font-size:clamp(1.05rem,.98rem + .35vw,1.28rem); letter-spacing:-.026em; font-weight:600;
}
.qa summary::-webkit-details-marker { display:none; }
.qa summary::after {
  content:""; position:absolute; right:8px; top:50%; width:11px; height:11px; margin-top:-7px;
  border-right:1.6px solid var(--quiet); border-bottom:1.6px solid var(--quiet);
  transform:rotate(45deg); transition:transform .2s ease,border-color .2s ease;
}
.qa details[open] summary::after { transform:rotate(-135deg); margin-top:-2px; border-color:var(--accent); }
.qa details[open] summary { color:var(--ink); }
.qa .answer { padding:0 8% 26px 0; color:var(--muted); display:grid; gap:14px; }

/* ---------- prose (legal pages) ---------- */
.prose { max-width:760px; }
.prose h2 { font-size:clamp(1.4rem,1.15rem + .9vw,1.85rem); margin:52px 0 16px; }
.prose h2:first-of-type { margin-top:0; }
.prose h3 { margin:32px 0 12px; }
.prose p,.prose li { color:var(--muted); font-size:1rem; line-height:1.72; }
.prose p + p { margin-top:16px; }
.prose ul { margin:16px 0 0; padding-left:20px; display:grid; gap:10px; }
.prose strong { color:var(--ink); font-weight:600; }
.prose a { color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.legal-meta { padding:18px 22px; border-radius:var(--r); border:1px solid var(--line); background:var(--panel); color:var(--muted); font-size:.9rem; margin-bottom:44px; }
.legal-meta strong { color:var(--ink); }

/* ---------- account ---------- */
.account-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(24px,3.5vw,48px); align-items:start; }
.panel { padding:clamp(26px,3vw,36px); border-radius:16px; border:1px solid var(--line); background:var(--panel); }
.field { display:flex; align-items:baseline; justify-content:space-between; gap:18px; padding:15px 0; border-bottom:1px solid var(--line); }
.field:last-child { border-bottom:0; }
.field dt { color:var(--quiet); font-size:.855rem; }
.field dd { margin:0; font-weight:500; text-align:right; word-break:break-word; }
.badge {
  display:inline-flex; align-items:center; gap:7px; padding:6px 11px; border-radius:8px;
  font-size:.79rem; font-weight:600; letter-spacing:.02em;
  border:1px solid var(--line-2); background:rgba(255,255,255,.05); color:var(--muted);
}
.badge.on { color:var(--accent); border-color:rgba(72,190,155,.34); background:var(--accent-soft); }
.badge.warn { color:var(--amber); border-color:rgba(217,164,65,.34); background:rgba(217,164,65,.1); }
.badge .dot { width:6px; height:6px; border-radius:2px; background:currentColor; }
.account-actions { display:grid; gap:11px; margin-top:26px; }
.notice { padding:14px 16px; border-radius:10px; border:1px solid var(--line-2); background:rgba(255,255,255,.04); color:var(--muted); font-size:.9rem; }
.notice.bad { border-color:rgba(217,90,90,.38); background:rgba(217,90,90,.09); color:#e8b4b4; }
[hidden] { display:none !important; }

/* ---------- early access / contact ---------- */
.early-access { display:flex; align-items:center; justify-content:space-between; gap:30px; padding:clamp(26px,3vw,38px); border:1px solid rgba(217,164,65,.38); border-radius:16px; background:linear-gradient(135deg,rgba(217,164,65,.14),rgba(217,164,65,.035)); }
.early-access .eyebrow { color:var(--amber); margin-bottom:13px; }
.early-access .eyebrow::before { background:var(--amber); }
.early-access h2 { font-size:clamp(1.6rem,1.15rem + 1.2vw,2.25rem); }
.early-access p:not(.eyebrow) { max-width:60ch; margin-top:12px; color:var(--muted); }
.early-access-actions { display:flex; flex:0 0 auto; flex-wrap:wrap; gap:10px; }
.contact-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.contact-card { padding:clamp(26px,3vw,36px); border:1px solid var(--line); border-radius:var(--r); background:var(--panel); }
.contact-card h2 { margin-bottom:12px; font-size:clamp(1.55rem,1.15rem + 1vw,2rem); }
.contact-card p { color:var(--muted); }
.contact-card .btn { margin-top:24px; }
.text-link { color:var(--accent); text-decoration:underline; text-underline-offset:3px; }

/* ---------- download ---------- */
.dl-card { padding:30px; border-radius:var(--r); border:1px solid var(--line); background:var(--panel); display:flex; flex-direction:column; }
.dl-card .os { font-family:var(--display); font-size:1.35rem; letter-spacing:-.03em; }
.dl-card .meta { margin:10px 0 22px; color:var(--quiet); font-size:.865rem; }
.dl-card .btn { margin-top:auto; }

/* ---------- footer ---------- */
.site-footer { border-top:1px solid var(--line); padding:clamp(48px,6vw,72px) 0 44px; background:var(--bg-2); }
.footer-top { display:grid; grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr)); gap:36px; }
.footer-brand img { width:150px; margin-bottom:16px; }
.footer-brand p { color:var(--quiet); font-size:.895rem; max-width:34ch; }
.footer-col h4 { font-family:var(--sans); font-size:.755rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--quiet); margin-bottom:15px; }
.footer-col a { display:block; padding:5px 0; color:var(--muted); font-size:.925rem; }
.footer-col a:hover { color:var(--ink); }
.footer-bottom { display:flex; flex-wrap:wrap; gap:14px 26px; justify-content:space-between; align-items:center; margin-top:52px; padding-top:26px; border-top:1px solid var(--line); color:var(--quiet); font-size:.85rem; }
.footer-bottom a { color:var(--muted); }
.footer-bottom a:hover { color:var(--ink); }

/* ---------- responsive ---------- */
@media (max-width:1040px) {
  .grid-4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .footer-top { grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; }
}
@media (max-width:900px) {
  .site-nav { display:none; }
  .header-actions .btn-desktop { display:none; }
  .hamburger { display:flex; }
  .grid-3 { grid-template-columns:1fr; }
  .screen-block { grid-template-columns:1fr; gap:28px; }
  .screen-block.flip > .screen-copy { order:0; }
  .account-grid { grid-template-columns:1fr; }
  .early-access { align-items:flex-start; flex-direction:column; }
}
@media (max-width:680px) {
  .shell { width:min(var(--shell),calc(100% - 32px)); }
  .grid-2,.grid-4,.contact-grid { grid-template-columns:1fr; }
  .brand img { width:136px; }
  .hero-actions { display:grid; }
  .hero-actions .btn { width:100%; }
  .card { padding:24px; }
  .footer-top { grid-template-columns:1fr; gap:30px; }
  .field { flex-direction:column; align-items:flex-start; gap:5px; }
  .field dd { text-align:left; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}