/* ---- Homepage type (scoped to #landing only) ---- */
#landing{ font-family:"Outfit",-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; }
#landing .lp-brand,#landing .lp-hero h1,#landing .lp-h2,#landing .lp-cta h2,#landing .lp-feat h3,#landing .lp-step h3{ font-family:"Outfit","Helvetica Neue",Arial,sans-serif; letter-spacing:-.025em; }
#landing .lp-brand{ text-transform:uppercase; letter-spacing:.42em; font-weight:700; }
#landing .lp-brand .mk{ display:none; }
#landing .lp-hero h1{ letter-spacing:-.02em; text-transform:uppercase; }
#landing .lp-kicker{ font-family:var(--sans); letter-spacing:0; }


  :root {
    --canvas:#F4F5F7; --surface:#FFFFFF; --ink:#191C22; --ink-2:#434955; --muted:#3F434B;
    --faint:#565C66; --line:#E6E8ED; --line-2:#F0F1F4; --inset:#F6F7F9;
    --accent:#FF1744; --accent-weak:#FFE3E9;
    --pop:#FF1744; --pop-ink:#FFFFFF;
    --swim:#2E90FA; --bike:#7C5CFF; --run:#FF4D8D; --other:#F59E0B;
    --fresh:#57B0FF; --optimal:#22C1DC; --tired:#C98A2B; --hard:#FF3B5C;
    --shadow:0 1px 2px rgba(25,28,34,.05);
    --shadow-pop:0 4px 14px rgba(25,28,34,.10), 0 1px 3px rgba(25,28,34,.07);
    --mono:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    --sans:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    --display:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    /* Semantic type scale — the app UI uses ONLY these 5 roles; #landing adds display 34/40/54. */
    --fs-caption:13px;   /* eyebrows, data labels, meta, table headers */
    --fs-body:15px;      /* default body, values, buttons */
    --fs-subhead:18px;   /* column labels, sub-section titles, emphasis */
    --fs-heading:22px;   /* card / section titles */
    --fs-title:30px;     /* page titles, big stat display */
    color-scheme:light;
  }
  * { box-sizing:border-box; }
  body { margin:0; background:var(--canvas); color:var(--ink); font-family:var(--sans);
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; font-size:15px; line-height:1.45; }
  a { color:inherit; text-decoration:none; }
  .sep { display:inline-block; width:3px; height:3px; border-radius:50%; background:var(--faint); vertical-align:middle; margin:0 8px; }
  .tri { width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent; display:inline-block; }
  .tri.up { border-bottom:5px solid currentColor; } .tri.down { border-top:5px solid currentColor; }

  .app { display:grid; grid-template-columns:212px 1fr; min-height:100vh; }

  /* RAIL */
  .rail { background:var(--surface); border-right:1px solid var(--line); display:flex; flex-direction:column;
    align-items:stretch; gap:2px; padding:16px 12px; position:sticky; top:0; height:100vh; }
  .logo { width:34px; height:34px; border-radius:9px; margin-bottom:18px; background:var(--ink);
    display:grid; place-items:center; color:var(--surface); flex:none; }
  .logo svg { width:19px; height:19px; }
  .nav-btn { width:42px; height:40px; border-radius:10px; border:0; background:transparent; color:var(--faint);
    display:grid; place-items:center; cursor:pointer; transition:background .14s,color .14s; position:relative; }
  .nav-btn svg { width:20px; height:20px; }
  .nav-btn:hover { background:var(--inset); color:var(--ink-2); }
  .nav-btn.active { background:var(--inset); color:var(--ink); }
  .nav-btn.active::before { content:""; position:absolute; left:-12px; top:9px; bottom:9px; width:3px; border-radius:0 3px 3px 0; background:var(--ink); }
  .rail-spacer { flex:1; }
  .avatar { width:34px; height:34px; border-radius:50%; margin-top:10px; background:var(--ink); color:var(--surface);
    display:grid; place-items:center; font-weight:600; font-size:15px; }

  /* MAIN + HEADER */
  .main { min-width:0; }
  .screen { padding:26px 34px 64px; max-width:1360px; }
  .topbar { display:flex; align-items:flex-start; gap:20px; margin-bottom:24px; }
  .htitle h1 { margin:0; font-family:var(--display); font-size:30px; font-weight:600; letter-spacing:-.025em; }
  .htitle p { margin:5px 0 0; color:var(--muted); font-size:15px; }
  .topbar-right { margin-left:auto; display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
  .seg { display:inline-flex; background:var(--surface); border:1px solid var(--line); border-radius:9px; padding:3px; gap:2px; }
  .seg button { border:0; background:transparent; color:var(--muted); cursor:pointer; font-family:var(--mono);
    font-size:15px; letter-spacing:.05em; font-weight:600; padding:5px 11px; border-radius:6px; }
  .seg button.on { background:var(--ink); color:var(--surface); }
  .btn { border:1px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer; font-family:var(--sans);
    font-weight:600; font-size:15px; padding:9px 14px; border-radius:9px; display:inline-flex; align-items:center; gap:7px; transition:border-color .14s; }
  .btn:hover { border-color:var(--muted); }
  .btn svg { width:15px; height:15px; }
  .btn-primary { border:0; background:var(--ink); color:var(--surface); }
  .btn-primary:hover { opacity:.92; }
  .btn-ghost { border-color:transparent; background:transparent; color:var(--accent); }

  /* GRID + CARDS */
  .grid { display:grid; grid-template-columns:repeat(12,1fr); gap:16px; }
  .card { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:18px 18px 17px; box-shadow:var(--shadow); position:relative; }
  .card.pad0 { padding:0; overflow:hidden; }
  .card-head { display:flex; align-items:center; gap:8px; margin-bottom:15px; }
  .eyebrow { font-family:var(--sans); font-size:18px; letter-spacing:-.01em; text-transform:none; color:var(--ink); font-weight:700; margin:0; }
  /* unified section heading (sans, sentence-case) — deliberately NOT the mono eyebrow look */
  .sect-h { font-family:var(--sans); font-size:18px; font-weight:700; letter-spacing:-.01em; text-transform:none; color:var(--ink); margin:0; }
  .card-head .spacer { flex:1; }
  .chip { font-family:var(--mono); font-size:15px; letter-spacing:.07em; font-weight:600; padding:3px 8px; border-radius:5px; text-transform:uppercase; border:1px solid var(--line); background:var(--inset); }
  .link { font-family:var(--mono); font-size:15px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); cursor:pointer; font-weight:600; }
  .col-3{grid-column:span 3}.col-4{grid-column:span 4}.col-5{grid-column:span 5}.col-6{grid-column:span 6}
  .col-7{grid-column:span 7}.col-8{grid-column:span 8}.col-9{grid-column:span 9}.col-12{grid-column:span 12}

  /* readiness ring */
  .ring-wrap { display:flex; align-items:center; gap:20px; }
  .ring { position:relative; width:124px; height:124px; flex:none; }
  .ring-center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
  .ring-center .val { font-family:var(--display); font-size:30px; font-weight:600; letter-spacing:-.03em; line-height:1; }
  .ring-center .lab { font-family:var(--mono); font-size:15px; letter-spacing:.1em; color:var(--muted); text-transform:uppercase; margin-top:5px; }
  .vitals { display:flex; flex-direction:column; gap:11px; flex:1; }
  .vital { display:flex; align-items:baseline; justify-content:space-between; gap:8px; border-bottom:1px solid var(--line-2); padding-bottom:9px; }
  .vital:last-child { border-bottom:0; padding-bottom:0; }
  .vital .k { font-size:15px; color:var(--muted); } .vital .v { font-family:var(--mono); font-weight:600; font-size:22px; font-variant-numeric:tabular-nums; }
  .vital .v small { color:var(--faint); font-size:15px; font-weight:500; }

  .tiles { display:grid; grid-template-columns:1fr 1fr; gap:11px; }
  .tile { border:1px solid var(--line); border-radius:10px; padding:12px 13px; }
  .tile .k { font-family:var(--mono); font-size:15px; letter-spacing:.07em; text-transform:uppercase; color:var(--faint); }
  .tile .v { font-family:var(--display); font-size:30px; font-weight:600; letter-spacing:-.03em; margin-top:5px; font-variant-numeric:tabular-nums; }
  .tile .d { font-size:15px; margin-top:3px; display:flex; align-items:center; gap:5px; color:var(--muted); }
  .up{color:var(--optimal)} .down{color:var(--hard)}
  .tile .spark { margin-top:9px; height:24px; width:100%; display:block; }

  .session-title { font-family:var(--display); font-size:22px; font-weight:600; letter-spacing:-.02em; margin:0 0 3px; }
  .session-sub { color:var(--muted); font-size:15px; margin-bottom:15px; }
  .interval-bar { display:flex; gap:3px; height:38px; align-items:flex-end; margin-bottom:15px; }
  .interval-bar span { border-radius:2px; flex:1; }
  .session-metrics { display:flex; gap:24px; margin-bottom:15px; flex-wrap:wrap; }
  .sm .k { font-family:var(--mono); font-size:15px; letter-spacing:.07em; text-transform:uppercase; color:var(--faint); }
  .sm .v { font-family:var(--display); font-size:22px; font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:-.01em; margin-top:2px; }
  .coach-inline { background:var(--inset); border:1px solid var(--line); border-radius:9px; padding:11px 12px; display:flex; gap:10px; font-size:15px; color:var(--ink-2); line-height:1.45; }
  .coach-inline .mk { width:18px; height:18px; border-radius:5px; background:var(--accent); flex:none; display:grid; place-items:center; margin-top:1px; }
  .coach-inline .mk svg { width:11px; height:11px; color:#fff; }

  .legend { display:flex; gap:15px; align-items:center; flex-wrap:wrap; }
  .lg { display:inline-flex; align-items:center; gap:6px; font-size:15px; color:var(--muted); }
  .lg i { width:10px; height:10px; border-radius:3px; display:inline-block; }

  .ff-wrap { position:relative; }
  .ff-tip { position:absolute; pointer-events:none; background:var(--surface); color:var(--ink); border:1px solid var(--line);
    border-radius:9px; padding:9px 11px; font-size:15px; box-shadow:var(--shadow-pop); opacity:0; transition:opacity .12s; min-width:150px; z-index:5; }
  .ff-tip .td { font-family:var(--mono); font-size:15px; letter-spacing:.05em; color:var(--muted); margin-bottom:7px; text-transform:uppercase; }
  .ff-tip .tr { display:flex; align-items:center; justify-content:space-between; gap:14px; margin:4px 0; }
  .ff-tip .tr span:first-child { display:inline-flex; align-items:center; gap:6px; color:var(--muted); }
  .ff-tip .tr b { font-family:var(--mono); font-variant-numeric:tabular-nums; font-weight:600; }
  .ff-tip i { width:9px; height:9px; border-radius:2px; display:inline-block; }

  .wl { display:flex; align-items:flex-end; gap:9px; height:146px; padding-top:6px; }
  .wl-col { flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; height:100%; justify-content:flex-end; }
  .wl-stack { width:100%; max-width:26px; display:flex; flex-direction:column-reverse; gap:2px; }
  .wl-stack span { display:block; } .wl-stack span:first-child{border-radius:0 0 3px 3px} .wl-stack span:last-child{border-radius:3px 3px 0 0}
  .wl-x { font-family:var(--mono); font-size:15px; color:var(--faint); } .wl-x.now{color:var(--ink);font-weight:700}

  .zone-row { display:flex; align-items:center; gap:10px; margin:10px 0; }
  .zone-row .zk { font-family:var(--mono); font-size:15px; color:var(--muted); width:96px; flex:none; }
  .zone-track { flex:1; height:8px; background:var(--inset); border-radius:5px; overflow:hidden; }
  .zone-track i { display:block; height:100%; border-radius:5px; }
  .zone-row .zv { font-family:var(--mono); font-size:15px; color:var(--ink-2); width:46px; text-align:right; font-variant-numeric:tabular-nums; }

  /* activity feed rows */
  .act { display:flex; align-items:center; gap:13px; padding:12px 2px; border-bottom:1px solid var(--line-2); cursor:pointer; border-radius:8px; transition:background .12s; }
  .act:hover { background:var(--inset); }
  .act:last-child { border-bottom:0; }
  .act-ic { width:36px; height:36px; border-radius:9px; display:grid; place-items:center; flex:none; }
  .act-ic svg { width:19px; height:19px; color:#fff; }
  .act-body { flex:1; min-width:0; }
  .act-title { font-weight:600; font-size:15px; letter-spacing:-.005em; }
  .act-meta { font-size:15px; color:var(--muted); font-family:var(--mono); margin-top:1px; }
  .act-stats { display:flex; gap:18px; text-align:right; }
  .act-stat .k { font-family:var(--mono); font-size:15px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); }
  .act-stat .v { font-family:var(--display); font-weight:600; font-size:15px; font-variant-numeric:tabular-nums; margin-top:1px; }
  @media (max-width:900px){ .act-stats .act-stat:nth-child(n+3){display:none} }

  .coach-msg { font-size:15px; line-height:1.6; color:var(--ink-2); }
  .coach-msg b { color:var(--ink); font-weight:600; }
  .coach-ask { margin-top:15px; display:flex; gap:8px; flex-wrap:wrap; }
  .pill-ask { border:1px solid var(--line); background:var(--surface); color:var(--ink-2); border-radius:8px; padding:7px 12px; font-size:15px; cursor:pointer; font-family:var(--sans); transition:border-color .14s,color .14s; }
  .pill-ask:hover { border-color:var(--accent); color:var(--accent); }

  .race { display:flex; align-items:center; gap:18px; }
  .race-days { text-align:center; flex:none; padding-right:18px; border-right:1px solid var(--line); }
  .race-days .n { font-family:var(--display); font-size:30px; font-weight:600; letter-spacing:-.04em; line-height:1; font-variant-numeric:tabular-nums; }
  .race-days .u { font-family:var(--mono); font-size:15px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-top:4px; }
  .race-info h4 { margin:0 0 4px; font-family:var(--display); font-size:22px; font-weight:600; letter-spacing:-.01em; }
  .race-info p { margin:0; font-size:15px; color:var(--muted); }
  .race-tags { display:flex; gap:6px; margin-top:10px; flex-wrap:wrap; }
  .race-tags span { font-family:var(--mono); font-size:15px; padding:3px 7px; border-radius:5px; background:var(--inset); border:1px solid var(--line); color:var(--muted); }

  /* CALENDAR */
  .cal { display:grid; grid-template-columns:repeat(7,1fr) 176px; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--surface); }
  .cal-h { font-family:var(--mono); font-size:15px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); padding:10px 12px; border-bottom:1px solid var(--line); background:var(--inset); }
  .cal-h.sum { text-align:left; border-left:1px solid var(--line); }
  .cal-cell { min-height:118px; border-right:1px solid var(--line-2); border-bottom:1px solid var(--line-2); padding:8px 9px; display:flex; flex-direction:column; gap:5px; }
  .cal-cell.week-sum { border-right:0; border-left:1px solid var(--line); align-items:stretch; justify-content:flex-start; gap:0; padding:11px 13px; background:var(--surface); }
  .ws { display:flex; flex-direction:column; gap:8px; width:100%; }
  .ws-load { display:flex; align-items:baseline; gap:5px; flex-wrap:wrap; }
  .ws-load > b { font-size:22px; font-weight:800; font-variant-numeric:tabular-nums; line-height:1; }
  .ws-load small { font-size:13px; color:var(--muted); }
  .ws-plan { width:100%; font-size:13px; color:var(--faint); font-variant-numeric:tabular-nums; }
  .ws-line { display:flex; justify-content:space-between; align-items:baseline; font-size:13px; color:var(--muted); }
  .ws-line b { color:var(--ink); font-weight:700; font-size:15px; font-variant-numeric:tabular-nums; }
  .ws-bar { display:flex; height:6px; border-radius:4px; overflow:hidden; background:var(--inset); margin-top:2px; }
  .ws-bar i { display:block; height:100%; }
  .ws-legend { display:flex; flex-direction:column; gap:4px; margin-top:1px; }
  .ws-sp { display:flex; align-items:center; gap:6px; font-size:13px; color:var(--muted); }
  .ws-sp .ws-spn { flex:1; }
  .ws-sp b { color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; }
  .ws-dot { width:8px; height:8px; border-radius:50%; flex:none; }
  .cal-cell.dim { background:var(--inset); }
  .cal-cell.today { box-shadow:inset 0 0 0 2px var(--ink); }
  .cal-date { font-family:var(--mono); font-size:15px; color:var(--muted); font-variant-numeric:tabular-nums; display:flex; justify-content:space-between; }
  .cal-date b { color:var(--ink); }
  .cal-w { display:contents; }
  .wo { border-radius:6px; padding:5px 7px; font-size:15px; line-height:1.25; border-left:3px solid; background:var(--inset); }
  .wo.done { background:var(--surface); border:1px solid var(--line); border-left-width:3px; }
  .wo.planned { opacity:.9; border-style:dashed; border:1px dashed var(--line); border-left:3px solid; }
  .wo .wt { font-weight:600; display:block; color:var(--ink); }
  .wo .wm { font-family:var(--mono); font-size:15px; color:var(--muted); }
  .wk-stat { display:flex; flex-direction:column; gap:3px; }
  .wk-stat.plan { margin-top:12px; padding-top:12px; border-top:1px solid var(--line-2); }
  .wk-lab { font-size:13px; letter-spacing:.02em; text-transform:uppercase; color:var(--faint); font-weight:700; }
  .wk-num { font-family:var(--display); font-size:22px; font-weight:600; line-height:1; font-variant-numeric:tabular-nums; color:var(--ink); }
  .wk-stat.plan .wk-num { color:var(--faint); }

  /* generic table */
  .tbl { width:100%; border-collapse:collapse; }
  .tbl th { text-align:left; font-family:var(--mono); font-size:15px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); font-weight:600; padding:8px 10px; border-bottom:1px solid var(--line); }
  .tbl td { padding:11px 10px; border-bottom:1px solid var(--line-2); font-size:15px; font-variant-numeric:tabular-nums; }
  .tbl tr:last-child td { border-bottom:0; }
  .tbl .num { text-align:right; font-family:var(--mono); }

  /* filter chips */
  .filters { display:flex; gap:7px; flex-wrap:wrap; }
  .fchip { border:1px solid var(--line); background:var(--surface); color:var(--muted); border-radius:20px; padding:6px 13px; font-size:15px; cursor:pointer; display:inline-flex; align-items:center; gap:6px; transition:all .12s; }
  .fchip i { width:8px; height:8px; border-radius:50%; }
  .fchip.on { border-color:var(--ink); color:var(--ink); background:var(--inset); font-weight:600; }

  /* activity detail */
  .ad-hero { display:flex; gap:26px; align-items:flex-start; flex-wrap:wrap; }
  .ad-metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-2); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
  .ad-metric { background:var(--surface); padding:13px 15px; }
  .ad-metric .k { font-family:var(--mono); font-size:15px; letter-spacing:.07em; text-transform:uppercase; color:var(--faint); }
  .ad-metric .v { font-family:var(--display); font-size:22px; font-weight:600; letter-spacing:-.02em; margin-top:3px; font-variant-numeric:tabular-nums; }
  .ad-metric .v small { font-size:15px; color:var(--muted); font-weight:500; }
  .chart-y { font-family:var(--mono); font-size:15px; fill:var(--faint); }
  .chart-lab { font-family:var(--mono); font-size:15px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; display:flex; align-items:center; gap:6px; }
  .chart-lab b { color:var(--ink); font-family:var(--display); font-size:15px; }

  /* map */
  .map { width:100%; height:100%; display:block; background:linear-gradient(180deg,#EEF1F5,#E7EBF0); }
  .map-wrap { border-radius:10px; overflow:hidden; border:1px solid var(--line); position:relative; }
  .map-badge { position:absolute; top:12px; left:12px; background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:7px 11px; font-family:var(--mono); font-size:15px; box-shadow:var(--shadow); }

  /* routes */
  .route-card { cursor:pointer; transition:border-color .14s, transform .06s; }
  .route-card:hover { border-color:var(--muted); }
  .route-card:active { transform:translateY(1px); }
  .surfbar { display:flex; height:7px; border-radius:5px; overflow:hidden; margin:11px 0 4px; }
  .surfbar span { display:block; }
  .surf-legend { display:flex; gap:12px; font-family:var(--mono); font-size:15px; color:var(--muted); }
  .surf-legend i { width:8px; height:8px; border-radius:2px; display:inline-block; margin-right:4px; }
  .pred { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; }
  .pred-box { border:1px solid var(--line); border-radius:9px; padding:11px 12px; }
  .pred-box .k { font-family:var(--mono); font-size:15px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); }
  .pred-box .v { font-family:var(--display); font-size:22px; font-weight:600; margin-top:3px; font-variant-numeric:tabular-nums; }

  /* explore */
  .stat-row { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
  /* reusable text primitives — use these (not inline font-size) in every new section */
  .note { font-size:var(--fs-body); color:var(--muted); line-height:1.5; }
  .stat-flow { display:flex; gap:34px; flex-wrap:wrap; }
  .stat .lab { font-size:var(--fs-caption); text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:600; }
  .stat .val { font-size:var(--fs-title); font-weight:800; font-variant-numeric:tabular-nums; margin-top:2px; line-height:1.05; }
  .stat .val.sm { font-size:var(--fs-heading); }
  .stat .sub { font-size:var(--fs-caption); color:var(--faint); margin-top:2px; }
  .bigstat .v { font-family:var(--display); font-size:30px; font-weight:600; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
  .bigstat .k { font-family:var(--mono); font-size:15px; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); margin-top:2px; }
  .pr-row { display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--line-2); }
  .pr-row:last-child { border-bottom:0; }
  .pr-k { font-size:15px; color:var(--ink-2); } .pr-v { font-family:var(--mono); font-weight:600; font-variant-numeric:tabular-nums; }
  .pr-tag { font-family:var(--mono); font-size:15px; color:var(--optimal); border:1px solid var(--optimal); border-radius:4px; padding:1px 5px; margin-left:8px; }

  /* coach chat */
  .chat { display:flex; flex-direction:column; gap:16px; max-width:760px; }
  .msg { display:flex; gap:12px; }
  .msg .who { width:30px; height:30px; border-radius:8px; flex:none; display:grid; place-items:center; font-family:var(--mono); font-size:15px; font-weight:700; }
  .msg.coach .who { background:var(--accent); color:#fff; }
  .msg.user .who { background:var(--ink); color:#fff; }
  .bubble { border:1px solid var(--line); background:var(--surface); border-radius:12px; padding:13px 15px; font-size:15px; line-height:1.6; box-shadow:var(--shadow); }
  .msg.user .bubble { background:var(--inset); }
  .bubble b { font-weight:600; }
  .bubble .mini-chart { margin-top:10px; }
  .chat-input { display:flex; gap:10px; margin-top:20px; max-width:760px; }
  .chat-input input { flex:1; border:1px solid var(--line); border-radius:10px; padding:12px 14px; font-family:var(--sans); font-size:15px; background:var(--surface); color:var(--ink); }
  .chat-input input:focus { outline:none; border-color:var(--accent); }

  /* settings */
  .set-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  .field { display:flex; align-items:center; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--line-2); gap:12px; }
  .field:last-child { border-bottom:0; }
  .field > .btn { white-space:nowrap; flex:0 0 auto; }
  .field label { font-size:15px; color:var(--ink-2); }
  .field .hint { font-size:15px; color:var(--faint); margin-top:2px; }
  .inp{ border:1px solid var(--line); border-radius:9px; padding:9px 12px; font-family:var(--sans); font-size:15px; background:var(--surface); color:var(--ink); transition:border-color .12s, box-shadow .12s; }
  .inp:hover{ border-color:var(--muted); }
  .inp:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-weak); }
  select.inp{ -webkit-appearance:none; -moz-appearance:none; appearance:none; cursor:pointer; padding-right:36px; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%233F434B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>"); background-repeat:no-repeat; background-position:right 12px center; }
  .field input.inp, .field select.inp { border:1px solid var(--line); border-radius:9px; padding:9px 12px; font-family:var(--mono); font-size:15px; background:var(--surface); color:var(--ink); width:120px; text-align:right; }
  .field select.inp{ font-family:var(--sans); text-align:left; padding-right:34px; width:auto; min-width:132px; }
  .toggle { width:40px; height:23px; border-radius:20px; background:var(--line); position:relative; cursor:pointer; flex:none; transition:background .15s; }
  .toggle.on { background:var(--optimal); }
  .toggle::after { content:""; position:absolute; top:2px; left:2px; width:19px; height:19px; border-radius:50%; background:#fff; box-shadow:var(--shadow); transition:left .15s; }
  .toggle.on::after { left:19px; }
  .conn { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--line-2); }
  .conn:last-child { border-bottom:0; }
  .conn-ic { width:34px; height:34px; border-radius:8px; background:var(--inset); border:1px solid var(--line); display:grid; place-items:center; font-family:var(--mono); font-weight:700; font-size:15px; }

  .foot { margin-top:26px; text-align:center; color:var(--faint); font-size:15px; font-family:var(--mono); letter-spacing:.04em; }

  @media (max-width:1120px){ .col-3,.col-4,.col-5{grid-column:span 6} .col-7,.col-8,.col-9{grid-column:span 12} .stat-row{grid-template-columns:repeat(2,1fr)} .set-grid{grid-template-columns:1fr} }
  @media (max-width:760px){ .app{grid-template-columns:54px 1fr} .screen{padding:16px} .col-3,.col-4,.col-5,.col-6,.col-7{grid-column:span 12} .ad-metrics{grid-template-columns:repeat(2,1fr)} .topbar{flex-wrap:wrap} .topbar-right{width:100%;margin-left:0} .rail-word,.nav-label,.rail-user-name{display:none} .rail{padding:16px 6px;align-items:center} .nav-btn{justify-content:center;padding:0;gap:0} .rail-brand{justify-content:center;padding:0} }
  @media (prefers-reduced-motion:reduce){ *{transition:none!important} }

  /* ---- Landing / marketing ---- */
  #landing{ background:var(--surface); color:var(--ink); }
  .lp-nav{ position:sticky; top:0; z-index:20; background:rgba(255,255,255,.9); -webkit-backdrop-filter:saturate(180%) blur(8px); backdrop-filter:saturate(180%) blur(8px); border-bottom:1px solid var(--line); }
  .lp-nav-in{ max-width:1120px; margin:0 auto; padding:15px 24px; display:flex; align-items:center; gap:22px; }
  .lp-brand{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:22px; letter-spacing:-.01em; cursor:pointer; }
  .lp-brand .mk{ width:30px; height:30px; border-radius:9px; background:var(--ink); color:#fff; display:grid; place-items:center; }
  .lp-brand .mk svg{ width:18px; height:18px; }
  .lp-links{ display:flex; gap:24px; margin-left:8px; }
  .lp-links a{ font-size:18px; color:var(--ink-2); cursor:pointer; }
  .lp-links a:hover{ color:var(--ink); }
  .lp-nav-cta{ margin-left:auto; display:flex; gap:10px; align-items:center; }
  .lp-section{ max-width:1120px; margin:0 auto; padding:0 24px; }
  .lp-btn{ border:0; border-radius:10px; padding:12px 20px; font-size:18px; font-weight:600; cursor:pointer; font-family:var(--sans); }
  .lp-btn.primary{ background:var(--accent); color:#fff; }
  .lp-btn.primary:hover{ opacity:.92; }
  .lp-btn.pop{ background:var(--pop); color:var(--pop-ink); }
  .lp-btn.pop:hover{ filter:brightness(.96); }
  .lp-btn.ghost{ background:transparent; color:var(--ink); border:1px solid var(--line); }
  .lp-btn.big{ padding:14px 26px; font-size:18px; }
  .lp-kicker{ display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:15px; letter-spacing:.02em; color:var(--muted); margin-bottom:24px; border:1px solid var(--line); border-radius:20px; padding:7px 15px; }
  .lp-kicker b{ color:var(--ink); font-weight:700; }
  .lp-kicker i{ width:9px; height:9px; border-radius:50%; background:var(--ink); display:inline-block; }
  .lp-hl{ background:var(--pop); color:#fff; padding:0 .12em; border-radius:6px; -webkit-box-decoration-break:clone; box-decoration-break:clone; }
  .lp-band.blue{ background:var(--accent); border-color:var(--accent); }
  .lp-band.blue .lp-cta h2, .lp-band.blue .lp-cta p{ color:#fff; }
  .lp-hero{ position:relative; min-height:600px; display:grid; place-items:center; text-align:center; padding:96px 24px; overflow:hidden; background:#12151b; }
  .lp-hero-bg{ position:absolute; inset:0; z-index:0; }
  .lp-hero-slide{ position:absolute; inset:0; background-size:cover; background-position:center 30%; opacity:0; transition:opacity 1.6s ease; will-change:opacity; }
  .lp-hero-slide.on{ opacity:1; }
  .lp-hero-scrim{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(10,12,16,.62) 0%, rgba(10,12,16,.38) 42%, rgba(10,12,16,.80) 100%); }
  .lp-hero-inner{ position:relative; z-index:2; max-width:760px; margin:0 auto; color:#fff; }
  .lp-hero-inner:has(.lede){ max-width:1000px; }
  .lp-hero h1{ font-size:54px; line-height:1.02; letter-spacing:-.035em; font-weight:800; margin:0 0 18px; color:#fff; text-shadow:0 2px 30px rgba(0,0,0,.35); }
  #landing .lp-hero h1.lede{ text-transform:none; font-size:28px; line-height:1.34; letter-spacing:-.018em; font-weight:800; max-width:1000px; margin:0 auto 30px; }
  @media(max-width:760px){ #landing .lp-hero h1.lede br{ display:none; } #landing .lp-hero h1.lede{ font-size:22px; max-width:600px; } }
  .lp-hero p{ font-size:22px; line-height:1.5; color:rgba(255,255,255,.92); margin:0 auto 30px; max-width:600px; text-shadow:0 1px 16px rgba(0,0,0,.35); }
  .lp-hero .lp-kicker{ border-color:rgba(255,255,255,.28); color:rgba(255,255,255,.9); background:rgba(255,255,255,.08); backdrop-filter:blur(4px); }
  .lp-hero .lp-kicker b{ color:#fff; } .lp-hero .lp-kicker i{ background:#fff; }
  /* editorial dictionary-entry lockup */
  .lp-def{ display:inline-flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:15px; margin-bottom:30px; }
  .lp-def .sep{ width:1px; height:14px; background:rgba(255,255,255,.45); }
  .lp-def .w{ font-size:15px; font-weight:700; letter-spacing:.42em; text-transform:uppercase; color:#fff; padding-left:.42em; }
  .lp-def .p{ font-size:15px; font-style:italic; letter-spacing:.01em; color:rgba(255,255,255,.94); }
  .lp-def .m{ font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.9); padding-left:.18em; }
  @media(max-width:560px){ .lp-def{ gap:10px; } .lp-def .w{ letter-spacing:.28em; padding-left:.28em; } }
  .lp-hero .lp-btn.ghost{ color:#fff; border-color:rgba(255,255,255,.45); background:rgba(255,255,255,.06); }
  .lp-hero .lp-btn.ghost:hover{ background:rgba(255,255,255,.14); }
  .lp-hero-cta{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
  .lp-trust{ text-align:center; color:var(--muted); font-size:15px; padding:6px 0 56px; }
  .lp-trust b{ color:var(--ink-2); font-weight:600; }
  .lp-visual{ max-width:940px; margin:0 auto 84px; border:1px solid var(--line); border-radius:16px; box-shadow:0 24px 70px rgba(25,28,34,.14); overflow:hidden; }
  .lp-band{ background:var(--canvas); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:72px 0; }
  .lp-h2{ font-size:34px; letter-spacing:-.02em; font-weight:700; text-align:center; margin:0 0 12px; }
  .lp-subh{ text-align:center; color:var(--ink-2); font-size:18px; margin:0 auto 46px; max-width:none; line-height:1.5; white-space:nowrap; }
  @media(max-width:920px){ .lp-subh{ white-space:normal; max-width:580px; } }
  .lp-features{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
  .lp-feat{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:26px; }
  .lp-feat .ic{ width:44px; height:44px; border-radius:11px; background:var(--inset); color:var(--ink); display:grid; place-items:center; margin-bottom:16px; }
  .lp-feat .ic svg{ width:22px; height:22px; }
  .lp-feat h3{ font-size:22px; font-weight:700; margin:0 0 8px; letter-spacing:-.01em; }
  .lp-feat p{ font-size:18px; line-height:1.55; color:var(--ink-2); margin:0; }
  .lp-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:8px; }
  .lp-step .n{ font-size:15px; font-weight:700; color:var(--accent); margin-bottom:10px; letter-spacing:.02em; }
  .lp-step h3{ font-size:22px; margin:0 0 6px; font-weight:700; }
  .lp-step p{ font-size:18px; color:var(--ink-2); line-height:1.55; margin:0; }
  .lp-cta{ text-align:center; padding:84px 24px; }
  .lp-cta h2{ font-size:40px; letter-spacing:-.025em; font-weight:800; margin:0 0 14px; }
  .lp-cta p{ font-size:22px; color:var(--ink-2); margin:0 auto 26px; max-width:520px; }
  .lp-foot{ border-top:1px solid var(--line); padding:30px 24px; text-align:center; color:var(--muted); font-size:15px; }
  @media(max-width:480px){ .lp-nav-in{ padding:12px 16px; gap:12px; } .lp-nav-cta{ gap:8px; } .lp-nav-cta .lp-btn{ font-size:15px; padding:9px 14px; white-space:nowrap; } }
  @media(max-width:820px){ .lp-features,.lp-steps{ grid-template-columns:1fr; } .lp-hero{ min-height:500px; padding:72px 20px; } .lp-hero h1{ font-size:40px; } .lp-hero p{ font-size:18px; } .lp-links{ display:none; } .lp-cta h2{ font-size:30px; } }

  /* ---- Auth ---- */
  .auth-back{ position:fixed; inset:0; background:rgba(20,24,32,.5); display:grid; place-items:center; z-index:120; padding:20px; }
  .auth-card{ background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-pop); width:min(400px,94vw); padding:28px; }
  /* activities list — week-grouped */
  .al-controls { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
  .al-group { margin-bottom:22px; }
  .al-wk { display:flex; align-items:baseline; gap:12px; margin:0 2px 8px; flex-wrap:wrap; }
  .al-wk-t { font-size:var(--fs-subhead); font-weight:800; }
  .al-wk-s { font-size:var(--fs-caption); color:var(--muted); }
  .al-list { background:var(--surface); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
  .al-row { display:flex; align-items:center; gap:14px; padding:13px 16px; border-bottom:1px solid var(--line-2); cursor:pointer; transition:background .12s; }
  .al-row:last-child { border-bottom:0; }
  .al-row:hover { background:var(--inset); }
  .al-ic { width:34px; height:34px; border-radius:9px; display:grid; place-items:center; flex:none; color:#fff; }
  .al-ic svg { width:19px; height:19px; }
  .al-main { flex:1; min-width:0; }
  .al-title { font-size:var(--fs-body); font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .al-sub { font-size:var(--fs-caption); color:var(--muted); margin-top:1px; }
  .al-stats { display:flex; gap:22px; }
  .al-s { font-size:var(--fs-body); font-weight:700; font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }
  .al-s i { display:block; font-size:var(--fs-caption); font-weight:600; color:var(--muted); font-style:normal; margin-top:1px; }
  @media (max-width:640px){ .al-stats .al-s:nth-child(n+2){ display:none; } .al-controls #actSearch{ width:100%!important; } }
  /* onboarding wizard */
  .ob-card{ width:min(460px,94vw); }
  .ob-card h2{ margin:0; font-size:var(--fs-heading); font-weight:800; }
  .ob-dots{ display:flex; gap:6px; margin-bottom:20px; }
  .ob-dot{ height:4px; flex:1; border-radius:2px; background:var(--line); transition:background .2s; }
  .ob-dot.on{ background:var(--accent); }
  .ob-lab{ font-size:var(--fs-caption); text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:600; margin-bottom:8px; }
  .ob-chips{ display:flex; gap:8px; flex-wrap:wrap; }
  .ob-chip{ padding:9px 15px; border:1px solid var(--line); background:var(--surface); border-radius:999px; font-size:var(--fs-body); font-weight:600; color:var(--ink); cursor:pointer; }
  .ob-chip.on{ background:var(--ink); color:var(--surface); border-color:var(--ink); }
  .ob-field{ display:flex; align-items:center; gap:10px; }
  .ob-flab{ font-size:var(--fs-body); color:var(--muted); min-width:112px; }
  .ob-unit{ font-size:var(--fs-body); color:var(--muted); }
  .ob-foot{ display:flex; align-items:center; gap:10px; margin-top:26px; }
  .auth-card h2{ margin:0 0 4px; font-size:22px; font-weight:700; letter-spacing:-.01em; }
  .auth-card .sub{ font-size:18px; color:var(--muted); margin-bottom:20px; }
  .auth-field{ margin-bottom:14px; }
  .auth-field label{ display:block; font-size:15px; color:var(--ink-2); margin-bottom:6px; }
  .auth-field input{ width:100%; border:1px solid var(--line); border-radius:10px; padding:11px 13px; font-size:18px; font-family:var(--sans); background:var(--surface); color:var(--ink); }
  .auth-field input:focus{ outline:none; border-color:var(--accent); }
  .auth-switch{ text-align:center; font-size:15px; color:var(--muted); margin-top:16px; }
  .auth-switch a{ color:var(--accent); cursor:pointer; font-weight:600; }

/* ===== Activity review v3 ===== */
.ad-page{ }
/* hero band */
.ad-hero{ display:flex; flex-wrap:wrap; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:22px 10px; margin-bottom:16px; }
.ad-hero-item{ flex:1; min-width:118px; padding:2px 22px; border-left:1px solid var(--line); display:flex; flex-direction:column; gap:6px; }
.ad-hero-item:first-child{ border-left:0; }
.ad-hero .hv{ font-size:30px; font-weight:800; color:var(--ink); letter-spacing:-.02em; line-height:1; font-variant-numeric:tabular-nums; }
.ad-hero .hu{ font-size:15px; font-weight:600; color:var(--muted); margin-left:4px; letter-spacing:0; }
.ad-hero .hk{ font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:600; }
/* detail metrics list */
.ad-details .ad-dl{ display:grid; grid-template-columns:repeat(3,1fr); gap:0 30px; }
.ad-di{ display:flex; justify-content:space-between; align-items:baseline; padding:11px 2px; border-bottom:1px solid var(--line); }
.ad-di .dk{ font-size:15px; color:var(--muted); }
.ad-di .dv{ font-size:15px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }
.ad-di.click{ cursor:pointer; }
.ad-di.click .dk{ text-decoration:underline dotted var(--faint); text-underline-offset:3px; }
.ad-di.click:hover .dk{ color:var(--ink); }

/* chart card */
.ad-chart-card{ padding:14px 16px 12px; }
.ad-chart-head{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.ad-zoomhint{ font-size:13px; color:var(--faint); font-weight:600; }
.ad-tools{ margin-left:auto; display:flex; align-items:center; gap:8px; }
.ad-xtoggle{ display:flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.ad-xtoggle button{ border:0; background:var(--surface); color:var(--muted); font-size:13px; font-weight:600; padding:6px 12px; cursor:pointer; }
.ad-xtoggle button.on{ background:var(--ink); color:#fff; }
.ad-zoombtns{ display:flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.ad-zoombtns button{ border:0; background:var(--surface); color:var(--muted); width:30px; height:30px; cursor:pointer; font-size:18px; line-height:1; }
.ad-zoombtns button:hover{ background:#fafafa; color:var(--ink); }
.ad-reset{ border:1px solid var(--line); background:var(--surface); border-radius:8px; padding:6px 11px; font-size:13px; font-weight:600; color:var(--ink-2); cursor:pointer; }
.ad-reset:hover{ border-color:var(--accent); color:var(--accent); }
.ad-menu-wrap{ position:relative; }
.ad-menu-btn{ display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line); background:var(--surface); border-radius:8px; padding:6px 12px; font-size:13px; font-weight:600; color:var(--ink-2); cursor:pointer; }
.ad-menu-btn svg{ width:12px; height:12px; }
.ad-menu{ position:absolute; right:0; top:38px; z-index:30; background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:0 18px 44px rgba(0,0,0,.16); padding:6px; min-width:196px; }
.ad-menu[hidden]{ display:none; }
.ad-menu-item{ display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:8px; font-size:15px; color:var(--ink); cursor:pointer; user-select:none; }
.ad-menu-item:hover{ background:#fafafa; }
.ad-menu-item i{ width:9px; height:9px; border-radius:50%; }
.ad-menu-item input{ margin:0; accent-color:var(--accent); cursor:pointer; }

/* readout */
.ad-readout{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:10px 13px; background:#fafafa; border:1px solid var(--line); border-radius:10px; margin-bottom:10px; min-height:44px; }
.ad-readout .ro-x{ font-size:18px; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; min-width:74px; }
.ad-ro-metric{ display:flex; flex-direction:column; line-height:1.15; }
.ad-ro-metric .rk{ font-size:13px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); font-weight:700; display:flex; align-items:center; gap:5px; }
.ad-ro-metric .rk i{ width:8px; height:8px; border-radius:50%; }
.ad-ro-metric .rv{ font-size:18px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }
.ad-hint{ color:var(--faint); font-weight:600; font-size:13px; }

/* stack + lanes */
.ad-stack{ position:relative; cursor:crosshair; user-select:none; }
.ad-lane{ position:relative; border-top:1px solid var(--line); }
.ad-lane:first-child{ border-top:0; }
.ad-lane.off{ display:none; }
.ad-lane-label{ position:absolute; top:5px; left:8px; z-index:3; font-size:13px; letter-spacing:.06em; text-transform:uppercase; font-weight:700; color:var(--muted); pointer-events:none; display:flex; align-items:center; gap:5px; }
.ad-lane-label i{ width:8px; height:8px; border-radius:50%; }
.ad-lane-label .llv{ color:var(--ink); font-weight:800; margin-left:4px; }
.ad-lane svg{ display:block; width:100%; }
.ad-lane .expand{ position:absolute; top:3px; right:6px; z-index:3; cursor:pointer; color:var(--faint); font-size:15px; opacity:0; transition:opacity .12s; }
.ad-lane:hover .expand{ opacity:1; }
.ad-dot{ position:absolute; width:9px; height:9px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.15); transform:translate(-50%,-50%); pointer-events:none; z-index:4; opacity:0; }
.ad-cross{ position:absolute; top:0; width:1px; background:var(--ink); opacity:0; pointer-events:none; z-index:2; }
.ad-band{ position:absolute; top:0; background:rgba(255,23,68,.10); border-left:1px solid var(--accent); border-right:1px solid var(--accent); pointer-events:none; z-index:1; display:none; }
.ad-sel{ position:absolute; top:0; bottom:0; background:rgba(15,17,20,.07); border-left:1px solid var(--ink); border-right:1px solid var(--ink); pointer-events:none; z-index:5; display:none; }

/* zones */
.ad-zone{ display:flex; align-items:center; gap:10px; margin-bottom:9px; }
.ad-zone .zl{ width:22px; flex:0 0 auto; white-space:nowrap; font-size:13px; font-weight:700; color:var(--muted); }
.ad-zone.named .zl{ width:76px; }
.ad-zone .zbar{ flex:1; height:9px; border-radius:5px; background:var(--line); overflow:hidden; }
.ad-zone .zbar span{ display:block; height:100%; border-radius:5px; }
.ad-zone .zt{ font-size:13px; color:var(--ink-2); font-weight:600; font-variant-numeric:tabular-nums; min-width:64px; text-align:right; }

/* training status */
.ts-head{ display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.ts-badge{ font-size:13px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; padding:3px 9px; border-radius:20px; }
.ts-metrics{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-2); border:1px solid var(--line); border-radius:10px; overflow:hidden; margin:10px 0; }
.ts-metrics .tm{ background:var(--surface); padding:9px 11px; }
.ts-metrics .tm .k{ font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:700; }
.ts-metrics .tm .v{ font-size:18px; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; }

/* modal */
.ad-modal-back{ position:fixed; inset:0; background:rgba(15,17,20,.5); z-index:100; display:grid; place-items:center; padding:24px; }
.ad-modal{ background:var(--surface); border-radius:16px; width:min(560px,100%); max-height:86vh; overflow:auto; padding:22px 24px; box-shadow:0 30px 80px rgba(0,0,0,.3); }
.ad-modal h3{ font-size:22px; font-weight:800; margin:0; }
.ad-modal .mclose{ float:right; cursor:pointer; color:var(--muted); font-size:22px; line-height:1; }
.ad-stats{ display:grid; gap:1px; background:var(--line-2); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.ad-stats .ad-stat{ background:var(--surface); padding:11px 13px; }
.ad-stats .ad-stat .k{ font-size:13px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.ad-stats .ad-stat .v{ font-size:18px; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; }
.ad-stats .ad-stat .v small{ font-size:13px; color:var(--muted); font-weight:600; }
.ad-histo{ display:flex; align-items:flex-end; gap:2px; height:150px; margin:16px 0; }
.ad-histo .hb{ flex:1; background:var(--accent); border-radius:3px 3px 0 0; min-height:1px; }


/* ===== sidebar labels, tooltips, sport icons, font scale ===== */
.rail-brand{ display:flex; align-items:center; gap:10px; margin-bottom:14px; padding:0 6px; cursor:pointer; }
.rail-brand .logo{ margin-bottom:0; }
.rail-word{ font-weight:700; letter-spacing:.42em; font-size:18px; color:var(--ink); }
.nav-btn{ width:100%; height:42px; display:flex; align-items:center; justify-content:flex-start; gap:12px; padding:0 12px; }
.nav-ic{ display:grid; place-items:center; width:22px; height:22px; flex:none; }
.nav-ic svg{ width:20px; height:20px; }
.nav-label{ font-size:15px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:inherit; }
.rail-user{ display:flex; align-items:center; gap:10px; padding:8px; margin-top:2px; cursor:pointer; border-radius:10px; }
.rail-user:hover{ background:#f6f7f9; }
.rail-user .avatar{ margin-top:0; flex:none; }
.rail-user-name{ font-size:15px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.itip{ display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:50%; border:1px solid var(--line); color:var(--muted); font-size:13px; font-weight:700; line-height:1; margin-left:5px; cursor:help; position:relative; vertical-align:middle; text-align:center; }
.itip .itip-pop{ position:fixed; left:0; top:0; transform:translate(-50%,calc(-100% - 9px)); width:232px; background:var(--ink); color:#fff; font-size:13px; font-weight:500; line-height:1.5; text-transform:none; letter-spacing:0; text-align:left; padding:10px 12px; border-radius:10px; opacity:0; pointer-events:none; transition:opacity .12s; z-index:400; box-shadow:0 14px 34px rgba(0,0,0,.26); }
.itip:hover .itip-pop, .itip:focus .itip-pop{ opacity:1; }
.fchip-ic{ display:inline-flex; align-items:center; margin-right:1px; }
.fchip-ic svg{ width:15px; height:15px; }
.zdot{ display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:8px; vertical-align:middle; }
/* activity page: heading / body / label (3 sizes) */
.ad-hero .hv{ font-size:22px; }
.ad-hero .hu, .ad-hero .hk, .ad-lane-label, .ad-ro-metric .rk, .ad-zone .zl, .ad-zone .zt, .ts-metrics .k{ font-size:13px; }
.ad-di .dk, .ad-di .dv, .ad-ro-metric .rv, .ad-readout .ro-x, .ad-menu-item, .ad-menu-btn, .ad-xtoggle button, .ad-reset, .ad-zoombtns button, .ad-zoomhint, .ts-metrics .v{ font-size:15px; }


/* session analysis */
.ad-analysis .ad-an-head{ display:flex; align-items:flex-start; gap:12px; margin-bottom:14px; }
.ad-an-badge{ font-size:13px; font-weight:800; letter-spacing:.05em; padding:5px 11px; border-radius:20px; white-space:nowrap; flex:none; }
.ad-an-focus{ font-size:15px; color:var(--ink-2); margin-top:3px; }
.ad-an-tiles{ display:grid; gap:1px; background:var(--line-2); border:1px solid var(--line); border-radius:12px; overflow:hidden; margin-bottom:14px; }
.ad-an-tile{ background:var(--surface); padding:11px 13px; }
.ad-an-tile .k{ font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:600; }
.ad-an-tile .v{ font-size:15px; font-weight:800; color:var(--ink); margin-top:2px; }
.ad-an-text{ font-size:15px; line-height:1.6; color:var(--ink-2); margin:0 0 14px; }
.ad-an-bar{ display:flex; height:10px; border-radius:6px; overflow:hidden; }
.ad-an-bar span{ display:block; height:100%; }
.ad-an-legend{ display:flex; gap:18px; margin-top:8px; font-size:13px; color:var(--muted); font-weight:600; }
.ad-an-legend i{ display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px; vertical-align:middle; }


/* dashboard weekly-load bars */
.wlb{ display:flex; align-items:flex-end; gap:12px; height:100%; min-height:150px; width:100%; }
/* side-by-side widget cards stretch to equal height (no gap below the shorter one) */
.w-grid[data-sfc="dash"] .widget > .w-inner{ height:100%; }
.w-grid[data-sfc="dash"] .widget > .w-inner > .card{ height:100%; }
/* same equal-height stretch on the activity page so short cards fill their row (no gap below) */
.w-grid[data-sfc="act"] .widget > .w-inner{ height:100%; }
.w-grid[data-sfc="act"] .widget > .w-inner > .card{ height:100%; }
/* the Metrics table spans the height of the two stacked right-rail cards
   (training status + how it went), so those flow into the column beside it
   and together match the Metrics height exactly */
.w-grid[data-sfc="act"] [data-wtype="a_metrics"]{ grid-row:span 2; }
@media (max-width:1120px){ .w-grid[data-sfc="act"] [data-wtype="a_metrics"]{ grid-row:auto; } }
/* uniform spacing between every block: rely on the grid gap, drop per-card margins */
.w-grid[data-sfc="act"] .widget > .w-inner > *{ margin-top:0 !important; margin-bottom:0 !important; }
/* clean metric table: no doubled line where the last-column cell border meets the table frame */
.cg.cgact .cg-cell:nth-child(4n){ border-right:0; }
.cg:not(.act) .cg-cell:nth-child(6n){ border-right:0; }
.wlb-col{ flex:1; display:flex; flex-direction:column; align-items:center; height:100%; }
.wlb-track{ flex:1; width:100%; display:flex; align-items:flex-end; justify-content:center; min-height:0; }
.wlb-bar{ width:62%; max-width:36px; border-radius:6px 6px 0 0; overflow:hidden; display:flex; flex-direction:column-reverse; min-height:3px; background:var(--line); }
.wlb-bar span{ display:block; width:100%; }
.wlb-lab{ font-size:13px; color:var(--muted); margin-top:7px; font-weight:600; }
.wlb-val{ font-size:13px; color:var(--ink); font-weight:700; }
.wlb-leg{ font-size:13px; color:var(--muted); font-weight:600; margin-left:14px; }
.wlb-leg i{ display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:5px; vertical-align:middle; }


/* wellness preview grid */
.well-group{ margin-top:14px; }
.well-gh{ font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:700; margin-bottom:8px; }


/* customizable field grids */
.cg{ display:grid; gap:0; background:var(--surface); border:1px solid var(--line); border-radius:12px; overflow:hidden; grid-template-columns:repeat(6,1fr); }
.cg.cgact{ grid-template-columns:repeat(4,1fr); }
.cg-cell{ background:var(--surface); padding:12px 14px; position:relative; border-right:1px solid var(--line); border-bottom:1px solid var(--line); align-self:stretch; }
.cg-fill{ background:var(--surface); }
.cg-cell .k{ font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:600; }
.cg-cell .v{ font-size:15px; font-weight:800; color:var(--ink); margin-top:3px; font-variant-numeric:tabular-nums; }
.cg-cell .v small{ font-size:13px; color:var(--muted); font-weight:600; }
.cg.editing .cg-cell{ cursor:grab; }
.cg-cell.drag-over{ outline:2px dashed var(--accent); outline-offset:-2px; }
.cg-x{ position:absolute; top:5px; right:6px; cursor:pointer; color:var(--faint); font-size:18px; line-height:1; width:17px; height:17px; text-align:center; border-radius:50%; }
.cg-x:hover{ background:var(--accent); color:#fff; }
.cg-add{ background:#fafafa; padding:11px 13px; display:flex; align-items:center; justify-content:center; color:var(--accent); font-weight:700; font-size:15px; cursor:pointer; }
.cg-add:hover{ background:var(--surface); }
.cg-editbtn{ font-size:15px; font-weight:700; color:var(--accent); cursor:pointer; }
.cg-menu{ position:fixed; z-index:120; background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:0 16px 40px rgba(0,0,0,.18); padding:6px; max-height:340px; overflow:auto; min-width:210px; }
.cg-menu div{ padding:8px 10px; border-radius:8px; font-size:15px; cursor:pointer; color:var(--ink); }
.cg-menu div:hover{ background:#fafafa; }
/* compare view */
.cmp-ctrls{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.cmp-lab{ font-size:15px; color:var(--muted); font-weight:600; }
.cmp-r{ margin-left:auto; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; }
.cmp-note{ font-size:15px; color:var(--ink-2); margin-top:10px; }
.cmp-ctrls .inp{ padding:9px 12px; padding-right:34px; }
.cmp-rel-list{ display:flex; flex-direction:column; gap:6px; }
.cmp-rel{ display:flex; align-items:center; gap:12px; text-align:left; background:var(--inset); border:1px solid transparent; border-radius:8px; padding:9px 13px; cursor:pointer; font:inherit; color:var(--ink-2); }
.cmp-rel:hover{ border-color:var(--line); }
.cmp-rel.on{ border-color:var(--accent); background:var(--surface); color:var(--ink); }
.cmp-rel-txt{ flex:1; font-size:15px; }
.cmp-rel-r{ font-size:13px; color:var(--muted); font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.cmp-cols{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.cmp-pick .cmp-side-lab{ font-family:var(--sans); font-size:18px; letter-spacing:-.01em; text-transform:none; font-weight:700; color:var(--ink); margin-bottom:8px; }
.cmp-tbl td:first-child{ color:var(--muted); }
.cmp-tbl td.num{ font-weight:700; }
.cmp-tabs button{ padding:8px 15px; }
@media(max-width:760px){ .cmp-cols{ grid-template-columns:1fr; } }


.cg-cell.cg-dragging{ opacity:.55; outline:2px solid var(--accent); outline-offset:-2px; z-index:5; }
.cg.editing .cg-cell{ cursor:grab; }
.cg.editing .cg-cell:active{ cursor:grabbing; }
.cg-hint{ font-size:13px; color:var(--faint); font-weight:600; }


/* widget layout engine */
.w-toolbar{ display:flex; justify-content:flex-end; align-items:center; gap:10px; margin:14px 0 8px; }
.w-hint{ font-size:13px; color:var(--faint); font-weight:600; margin-right:auto; }
.widget{ position:relative; min-width:0; }
.w-grid.editing .widget{ outline:1px dashed var(--line); outline-offset:-1px; border-radius:16px; }
.w-grid.editing .w-inner{ pointer-events:none; }
.widget.w-dragging{ opacity:.6; outline:2px solid var(--accent); z-index:5; }
.w-bar{ position:absolute; top:6px; right:6px; left:6px; display:flex; align-items:center; gap:8px; background:var(--ink); color:#fff; border-radius:9px; padding:5px 9px; z-index:6; font-size:13px; box-shadow:0 6px 18px rgba(0,0,0,.2); }
.w-bar .w-title{ font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.w-grip{ cursor:grab; font-size:15px; }
.w-sz{ background:rgba(255,255,255,.18); padding:2px 7px; border-radius:6px; cursor:pointer; font-weight:700; }
.w-rm{ cursor:pointer; font-size:18px; line-height:1; padding:0 3px; }
.w-rm:hover{ color:var(--accent); }
.wpal{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.wpal-item{ border:1px solid var(--line); border-radius:10px; padding:11px 12px; font-size:15px; font-weight:600; cursor:pointer; display:flex; justify-content:space-between; align-items:center; }
.wpal-item:hover{ border-color:var(--accent); color:var(--accent); }
.wpal-used{ font-size:13px; color:var(--muted); font-weight:700; }
.cc-ctrls{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.cc-ctrls .inp{ padding:8px 12px; width:auto; padding-right:32px; }


/* homepage screens carousel */
.lp-showcase{ position:relative; max-width:1040px; margin:0 auto; border-radius:18px; overflow:hidden; box-shadow:0 30px 80px rgba(25,28,34,.16); border:1px solid #E6E8ED; background:#fff; }
.lp-frame{ height:34px; background:#F4F5F7; border-bottom:1px solid #E6E8ED; display:flex; align-items:center; gap:7px; padding:0 14px; }
.lp-frame i{ width:11px; height:11px; border-radius:50%; background:#D6DAE1; }
.lp-slides{ position:relative; }
.lp-slide{ position:absolute; inset:0; opacity:0; transform:translateX(14px); transition:opacity .55s ease, transform .55s ease; pointer-events:none; }
.lp-slide.on{ position:relative; opacity:1; transform:none; pointer-events:auto; }
.lp-slide svg{ display:block; width:100%; }
.lp-dots{ display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin-top:20px; }
.lp-dot{ display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:600; color:#8A93A0; cursor:pointer; padding:7px 14px; border-radius:22px; border:1px solid transparent; transition:.15s; }
.lp-dot:hover{ color:#434955; }
.lp-dot.on{ color:#191C22; border-color:#E6E8ED; background:#fff; box-shadow:0 1px 2px rgba(25,28,34,.05); }
.lp-dot b{ width:7px; height:7px; border-radius:50%; background:#C7CCD6; }
.lp-dot.on b{ background:#FF1744; }


.lp-slide img{ display:block; width:100%; height:auto; }
.lp-dots{ gap:10px; margin-top:24px; margin-bottom:64px; }
.lp-dot{ width:9px; height:9px; padding:0; border:0 !important; border-radius:50%; background:#C7CCD6; box-shadow:none; transition:.2s; }
.lp-dot:hover{ background:#AEB6C2; }
.lp-dot.on{ background:#FF1744; width:26px; border-radius:5px; }
.lp-dot.on:hover{ background:#FF1744; }


/* ================= mobile ================= */
.mobnav{ display:none; }
.mobnav-btn{ flex:1; min-width:0; border:0; background:transparent; color:var(--faint); display:grid; place-items:center; height:100%; cursor:pointer; padding:0; }
.mobnav-btn svg{ width:22px; height:22px; }
.mobnav-btn.active{ color:var(--ink); }
.mobnav-btn.active svg{ stroke:var(--accent); }
.w-grip{ touch-action:none; }

@media (max-width:760px){
  .app{ grid-template-columns:1fr; }
  .rail{ display:none; }
  .mobnav{ display:flex; position:fixed; left:0; right:0; bottom:0; height:58px; background:var(--surface); border-top:1px solid var(--line); z-index:60; padding:0 2px; box-shadow:0 -2px 14px rgba(0,0,0,.06); }
  .main{ padding-bottom:66px; }
  .screen{ padding:14px 14px 26px; }
  .screen h1{ font-size:22px !important; line-height:1.15; }
  .topbar{ flex-wrap:wrap; gap:10px; }
  .topbar-right{ width:100%; margin-left:0; gap:8px; }
  .topbar-right .btn{ font-size:13px; padding:8px 11px; white-space:nowrap; }
  .topbar-right .btn svg{ width:13px; height:13px; }
  .grid, .w-grid{ grid-template-columns:1fr !important; gap:12px; }
  .col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-12,.widget{ grid-column:1 / -1 !important; }
  .ad-stats{ grid-template-columns:repeat(2,1fr) !important; }
  .cg{ grid-template-columns:repeat(2,1fr) !important; }
  .ad-dl{ grid-template-columns:1fr !important; }
  .ad-an-tiles{ grid-template-columns:repeat(2,1fr) !important; }
  .ad-hero-item{ min-width:42% !important; padding:2px 14px; }
  .card:has(table.tbl){ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  table.tbl{ min-width:460px; }
  .w-grid.editing .widget{ touch-action:none; }
  .cg.editing .cg-cell{ touch-action:none; }
  .w-toolbar{ flex-wrap:wrap; }
  .ad-chart-head{ gap:8px; }
  .ad-tools{ flex-wrap:wrap; }
  .lp-showcase{ border-radius:14px; }
}

/* session completion modal (RPE / feel / notes) */
.cf-lab{ font-family:var(--mono); font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:600; margin-bottom:9px; }
.rpe-row{ display:grid; grid-template-columns:repeat(10,1fr); gap:6px; }
.rpe-b{ border:1px solid var(--line); background:var(--surface); color:var(--ink-2); border-radius:9px; padding:10px 0; font-weight:700; font-size:15px; cursor:pointer; font-family:var(--mono); transition:.12s; }
.rpe-b:hover{ border-color:var(--muted); }
.rpe-b.on{ background:var(--ink); color:#fff; border-color:var(--ink); }
.feel-row{ display:flex; gap:8px; flex-wrap:wrap; }
.feel-b{ border:1px solid var(--line); background:var(--surface); color:var(--ink-2); border-radius:20px; padding:8px 16px; font-weight:600; font-size:15px; cursor:pointer; transition:.12s; }
.feel-b:hover{ border-color:var(--muted); }
.feel-b.on{ background:var(--ink); color:#fff; border-color:var(--ink); }
.cf-notes{ width:100%; border:1px solid var(--line); border-radius:10px; padding:11px 12px; font-family:var(--sans); font-size:15px; line-height:1.5; background:var(--surface); color:var(--ink); resize:vertical; }
.cf-notes:focus{ outline:none; border-color:var(--accent); }
@media (max-width:520px){ .rpe-row{ grid-template-columns:repeat(5,1fr); } }

/* upload dropdown menu */
.up-menu{ position:fixed; z-index:130; background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-pop); padding:6px; min-width:230px; }
.up-item{ display:flex; gap:11px; align-items:flex-start; padding:10px 11px; border-radius:9px; cursor:pointer; }
.up-item:hover{ background:var(--inset); }
.up-item .ui-ic{ width:30px; height:30px; border-radius:8px; background:var(--inset); border:1px solid var(--line); display:grid; place-items:center; flex:none; color:var(--ink-2); }
.up-item .ui-ic svg{ width:17px; height:17px; }
.up-item .ui-t{ font-weight:600; font-size:15px; color:var(--ink); }
.up-item .ui-d{ font-size:13px; color:var(--muted); margin-top:1px; line-height:1.4; }

/* homepage footer links */
.lp-foot-links{ display:flex; gap:20px; justify-content:center; flex-wrap:wrap; margin-bottom:8px; }
.lp-foot-links a{ color:var(--muted); text-decoration:none; font-weight:600; font-size:15px; cursor:pointer; }
.lp-foot-links a:hover{ color:var(--ink); }
.lp-foot-copy{ color:var(--faint); font-size:15px; }

/* ===== Health & recovery dashboard ===== */
.h-toggle{ display:inline-flex; gap:2px; background:var(--inset); border:1px solid var(--line); border-radius:8px; padding:2px; }
.h-tg{ font:600 13px/1 var(--sans); letter-spacing:.02em; color:var(--muted); background:transparent; border:0; padding:7px 11px; border-radius:6px; cursor:pointer; }
.h-tg:hover{ color:var(--ink); }
.h-tg.on{ background:var(--surface); color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.06); }
.h-tg .h-sw{ width:9px; height:9px; border-radius:50%; border:1.5px solid; display:inline-block; margin-right:6px; vertical-align:middle; }
.h-zoom{ display:flex; align-items:center; gap:12px; margin:4px 2px 0; min-height:24px; }
.h-reset{ font:600 13px/1 var(--sans); color:var(--ink); background:var(--inset); border:1px solid var(--line); border-radius:6px; padding:5px 10px; cursor:pointer; }
.h-reset:hover{ border-color:var(--muted); }
.h-legend{ display:flex; flex-wrap:wrap; gap:14px; margin:6px 2px 4px; font-size:13px; color:var(--muted); }
.h-legend span{ display:inline-flex; align-items:center; gap:6px; }
.h-legend i{ width:10px; height:10px; border-radius:50%; display:inline-block; }
.h-legend i.h-bar{ width:4px; height:12px; border-radius:1px; background:var(--line); }
.h-split{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:14px; }
.h-day{ background:var(--inset); border:1px solid var(--line); border-radius:10px; padding:14px 16px; }
.h-day-h{ margin-bottom:8px; }
.h-drow{ display:flex; align-items:center; gap:10px; padding:6px 0; border-bottom:1px solid var(--line); }
.h-drow:last-of-type{ border-bottom:0; }
.h-dk{ flex:1; color:var(--muted); font-size:15px; }
.h-dv{ font-variant-numeric:tabular-nums; }
.h-dv b{ font-size:18px; font-weight:800; }
.h-dv small{ color:var(--muted); font-weight:600; font-size:13px; }
.h-pill{ font:600 12px/1 var(--mono); min-width:44px; text-align:right; }
.h-resp{ display:flex; flex-direction:column; }
.h-rgrid{ display:flex; justify-content:space-between; margin-bottom:2px; }
.h-raxis{ flex:1; font-size:13px; color:var(--faint); text-transform:uppercase; letter-spacing:.06em; }
.h-rrow{ display:flex; align-items:center; gap:10px; padding:5px 0; }
.h-rcat{ width:96px; font-size:13px; color:var(--ink); flex:none; }
.h-rtrack{ position:relative; flex:1; height:8px; background:var(--inset); border-radius:5px; }
.h-rtrack:before{ content:""; position:absolute; left:50%; top:-2px; bottom:-2px; width:1px; background:var(--line); }
.h-rz{ position:absolute; top:0; height:100%; border-radius:5px; }
.h-rn{ width:46px; text-align:right; font:600 12px/1 var(--mono); color:var(--muted); }
@media(max-width:720px){ .h-split{ grid-template-columns:1fr; } }
.h-diag{ width:100%; border-collapse:collapse; margin-top:8px; font:600 13px/1.4 var(--mono); }
.h-diag th,.h-diag td{ text-align:left; padding:6px 10px; border-bottom:1px solid var(--line); color:var(--ink); white-space:nowrap; }
.h-diag th{ color:var(--muted); text-transform:uppercase; letter-spacing:.05em; font-size:13px; }

/* ===== landing scroll-reveal ===== */
@media (prefers-reduced-motion: no-preference){
  #landing .reveal{ opacity:0; transform:translateY(34px); transition:opacity 1.25s cubic-bezier(.2,.7,.2,1), transform 1.25s cubic-bezier(.2,.7,.2,1); }
  #landing .reveal.in{ opacity:1; transform:none; }
  /* staggered entrances */
  #landing .lp-hero-inner .reveal:nth-child(2){ transition-delay:.09s; }
  #landing .lp-hero-inner .reveal:nth-child(3){ transition-delay:.18s; }
  #landing .lp-features .reveal:nth-child(2){ transition-delay:.08s; }
  #landing .lp-features .reveal:nth-child(3){ transition-delay:.16s; }
  #landing .lp-features .reveal:nth-child(4){ transition-delay:.04s; }
  #landing .lp-features .reveal:nth-child(5){ transition-delay:.12s; }
  #landing .lp-features .reveal:nth-child(6){ transition-delay:.20s; }
}

/* ===== mobile calendar agenda ===== */
.cal-ag{ display:flex; flex-direction:column; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--surface); }
.ag-wk{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:9px 14px; background:var(--inset); border-top:1px solid var(--line); border-bottom:1px solid var(--line); font-size:13px; color:var(--muted); }
.ag-wk:first-child{ border-top:0; }
.ag-wk .ag-tot{ font-variant-numeric:tabular-nums; white-space:nowrap; }
.ag-wk .ag-tot b{ color:var(--ink); font-weight:700; }
.ag-day{ display:flex; gap:13px; padding:12px 14px; border-bottom:1px solid var(--line-2); align-items:flex-start; }
.ag-day:last-child{ border-bottom:0; }
.ag-day.today{ box-shadow:inset 3px 0 0 var(--ink); background:var(--inset); }
.ag-day.dim{ opacity:.55; }
.ag-d{ width:40px; flex:none; text-align:center; padding-top:2px; }
.ag-dow{ display:block; font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
.ag-dn{ display:block; font-size:22px; font-weight:800; line-height:1.1; font-variant-numeric:tabular-nums; }
.ag-day.today .ag-dow{ color:var(--ink); }
.ag-items{ flex:1; display:flex; flex-direction:column; gap:6px; min-width:0; }
.ag-rest{ color:var(--faint); font-size:15px; padding-top:6px; }

/* ===== workout builder stats (wrap 2-up on small screens) ===== */
.wb-stats{ display:flex; flex-wrap:wrap; gap:12px 26px; margin-bottom:12px; }
.wb-stats>div{ flex:1 1 40%; min-width:110px; }

/* ===== more mobile polish ===== */
@media(max-width:600px){
  /* health & recovery: toggles drop below the title, scroll rather than cram */
  #healthCard .card-head{ flex-wrap:wrap; row-gap:8px; }
  #healthCard .h-toggle{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  #healthCard .h-tg{ white-space:nowrap; flex:none; }
  /* settings: stack each row (label+hint full width, control below) so short
     descriptions stop wrapping into 3 cramped lines */
  .field{ flex-direction:column; align-items:stretch; gap:8px; }
  .field input.inp, .field select.inp{ width:100%; min-width:0; text-align:left; }
  .field .toggle{ align-self:flex-start; }
  .field .btn{ white-space:nowrap; align-self:flex-start; }
  /* records tables: contain any overflow inside the card instead of the page */
  .card.pad0{ overflow-x:auto; }
  .stat-flow{ gap:18px 22px; }
  /* workout builder modal: tighter padding so nothing runs off the sheet */
  #wbPanel{ padding:18px !important; }
}

/* ===== homepage ethos / "the process" band ===== */
.lp-ethos{ position:relative; background:#0f1216; color:#fff; padding:100px 0; overflow:hidden; }
/* faint grayscale motion-blur backdrop so the band matches the hero photos */
.lp-ethos::before{ content:""; position:absolute; inset:0; background:url(../img/hero-2.jpg) center/cover no-repeat; filter:grayscale(1) contrast(1.05); opacity:.13; z-index:0; }
.lp-ethos::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(15,18,22,.75) 0%, rgba(15,18,22,.45) 45%, rgba(15,18,22,.85) 100%); z-index:0; }
.lp-ethos .lp-section{ position:relative; z-index:1; max-width:860px; }
.lp-ethos-kick{ font-family:var(--mono); text-transform:uppercase; letter-spacing:.42em; font-size:13px; font-weight:700; color:#fff; margin:0 0 20px; padding-left:.42em; }
.lp-ethos-h{ font-size:40px; line-height:1.08; letter-spacing:-.03em; font-weight:800; margin:0 0 30px; color:#fff; }
.lp-ethos-body p{ font-size:22px; line-height:1.6; color:#fff; margin:0 0 20px; max-width:760px; }
.lp-ethos-body p:last-child{ margin-bottom:0; }
.lp-ethos-close{ color:#fff !important; font-weight:400; letter-spacing:-.01em; margin-top:34px !important; }
/* calendar drag-and-drop to reschedule planned workouts */
.wo.wo-move{ cursor:grab; }
.wo.wo-move:active{ cursor:grabbing; }
.wo.wo-dragging{ opacity:.4; }
.cal-cell.day-drop, .ag-day.day-drop{ outline:2px dashed var(--accent); outline-offset:-2px; background:color-mix(in srgb, var(--accent) 8%, transparent); }
/* glass-box insight strip */
.ins-card .ins{ padding:11px 0; border-top:1px solid var(--line-2); }
.ins-card .ins:first-of-type{ border-top:0; padding-top:0; }
.ins-claim{ display:flex; gap:9px; align-items:flex-start; font-size:15px; line-height:1.5; color:var(--ink); font-weight:600; }
.ins-claim .ins-ic{ margin-top:2px; }
.ins-evs{ display:flex; flex-wrap:wrap; gap:7px; margin:9px 0 0 24px; }
.ins-ev{ font-size:13px; color:var(--muted); background:var(--inset); border:1px solid var(--line); border-radius:7px; padding:3px 9px; }
.ins-act{ margin:9px 0 0 24px; font-size:15px; line-height:1.5; color:var(--ink-2); }
.ins-act .ins-act-k{ display:inline-block; font-family:var(--mono); font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); background:var(--inset); border:1px solid var(--line); border-radius:6px; padding:1px 7px; margin-right:8px; vertical-align:1px; }
.ins-conf{ display:flex; align-items:center; gap:6px; margin:9px 0 0 24px; font-size:13px; color:var(--faint); text-transform:capitalize; }
.ins-conf .ins-dot{ width:7px; height:7px; border-radius:50%; }
.spinner{ width:34px; height:34px; border-radius:50%; border:3px solid var(--line); border-top-color:var(--accent); animation:spin .8s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce){ .spinner{ animation-duration:2s; } }
.lp-ethos-body em{ color:#fff; font-style:italic; font-weight:700; }
@media(max-width:820px){ .lp-ethos{ padding:68px 0; } .lp-ethos-h{ font-size:30px; } .lp-ethos-h br{ display:none; } .lp-ethos-body p{ font-size:18px; } }
.lp-speed{ background:#f1f1f1; padding:100px 0; }
.lp-speed .lp-section{ max-width:820px; text-align:center; }
.lp-speed p{ font-size:22px; line-height:1.6; color:#191C22; margin:0 0 22px; }
.lp-speed p:last-child{ margin-bottom:0; }
@media(max-width:820px){ .lp-speed{ padding:68px 0; } .lp-speed p{ font-size:18px; } }