/* Loway GT: calm charcoal page. Bold is reserved for the headline, key numbers and the VIP button.
   Red appears only on the primary button, the logo mark and small accents.
   Layout: open sections on the page background; the performance dashboard sits on one raised surface as the centrepiece. */
:root{
  color-scheme: dark;
  --bg:#0F1011;        /* deep near-black page */
  --bg-2:#1B1C1E;      /* raised surfaces */
  --bg-3:#2E3033;      /* controls, used sparingly */
  --cell:#1A1B1D;      /* calendar day cells */
  --line:#2A2C2F;
  --fg:#F5F5F2;
  --fg-2:#BDC0C4;      /* secondary text: readable, not faded */
  --fg-3:#8F9398;
  --red:#D2211B;
  --red-hi:#E5332C;
  --pos:#3DD68C;  --pos-bg:rgba(61,214,140,.14);
  --neg:#FF5D52;  --neg-bg:rgba(255,93,82,.15);   /* losses: red, kept apart from the brand button red */
  --be:#A9B0B8;   --be-bg:rgba(169,176,184,.12);
  --warn:#E8C547;
  /* Archivo variable (wght 100-900, wdth 62-125). 'Archivo GT' = optional self-hosted copy, 'Archivo' = Google Fonts. */
  --font:'Archivo GT','Archivo','Archivo Fallback','Helvetica Neue',Arial,sans-serif;
  --gutter:20px;
  --space:64px;
}
@media (min-width:900px){ :root{ --gutter:48px; --space:96px; } }

@font-face{ font-family:'Archivo GT'; src:url('../fonts/Archivo-Variable.woff2') format('woff2-variations'), url('../fonts/Archivo-Variable.woff2') format('woff2'); font-weight:100 900; font-stretch:62% 125%; font-display:swap; }
@font-face{ font-family:'Archivo Fallback'; src:local('Arial'), local('Helvetica Neue'), local('Helvetica'); size-adjust:102%; ascent-override:90%; descent-override:22%; }
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:76px; }
body{ margin:0; background:var(--bg); color:var(--fg); font-family:var(--font); font-size:17px; line-height:1.55; font-weight:400; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,p,ul,ol,dl,dd,figure{ margin:0; }
ul,ol{ padding:0; list-style:none; }
svg{ width:1em; height:1em; }
:focus-visible{ outline:2px solid var(--fg); outline-offset:3px; border-radius:4px; }
[hidden]{ display:none !important; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip{ position:absolute; left:12px; top:-60px; z-index:100; background:var(--fg); color:var(--bg); padding:10px 14px; border-radius:6px; }
.skip:focus{ top:12px; }
.wrap{ width:100%; max-width:1120px; margin:0 auto; padding-inline:var(--gutter); }
.muted{ color:var(--fg-3); font-weight:400; }
.small{ font-size:13px; color:var(--fg-3); line-height:1.55; }

/* Type: one bold headline, medium section titles */
h1{ font-weight:780; font-stretch:112%; font-size:clamp(30px, 7vw, 50px); line-height:1.06; letter-spacing:-0.012em; text-wrap:balance; max-width:17ch; }
h2{ font-weight:640; font-stretch:108%; font-size:clamp(22px, 4.8vw, 30px); line-height:1.15; letter-spacing:-0.008em; text-wrap:balance; }
h3{ font-weight:600; font-stretch:104%; font-size:17px; line-height:1.3; }
/* short red rule: the thread that connects sections */
.rule{ display:block; width:28px; height:3px; background:var(--red); margin-bottom:14px; }
.lead{ color:var(--fg-2); margin-top:6px; max-width:52ch; }

/* Buttons */
.btn{ display:inline-flex; align-items:center; justify-content:space-between; gap:14px; min-height:52px; padding:0 20px; border-radius:8px; font-size:16px; font-weight:500; border:1px solid transparent; transition:background .2s ease, border-color .2s ease, transform .15s ease; }
.btn svg{ width:19px; height:19px; flex-shrink:0; }
.btn:active{ transform:scale(.98); }
.btn-lg{ min-height:56px; font-size:17px; }
.btn-red{ background:var(--red); color:#fff; font-weight:700; font-stretch:106%; }
.btn-red:hover{ background:var(--red-hi); }
.btn-line{ border-color:#45484C; color:var(--fg); }
.btn-line:hover{ border-color:var(--fg-3); }
.icon-btn{ width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; border-radius:8px; border:0; background:var(--bg-3); color:var(--fg); cursor:pointer; }
.icon-btn svg{ width:18px; height:18px; }
.icon-btn:disabled{ opacity:.3; cursor:default; }

/* Nav */
.nav{ position:sticky; top:env(safe-area-inset-top,0px); z-index:40; background:rgba(15,16,17,.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid transparent; transition:border-color .2s; }
.nav.solid{ border-bottom-color:var(--line); }
.nav-in{ height:60px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.logo{ font-weight:800; font-stretch:125%; font-size:18px; letter-spacing:-0.01em; text-transform:uppercase; line-height:1; }
.logo span{ color:var(--red); }
.nav-right{ display:flex; align-items:center; gap:4px; }
.nav-link{ min-height:44px; display:inline-flex; align-items:center; padding:0 10px; font-size:15px; color:var(--fg-2); }
.nav-link:hover{ color:var(--fg); }
.nav-cta{ display:none; min-height:42px; padding:0 14px; font-size:14px; }
.nav-cta svg{ width:16px; height:16px; }
@media (min-width:900px){ .nav-in{ height:68px; } .nav-cta{ display:inline-flex; } .nav-right{ gap:12px; } }

/* 1. Introduction */
.hero{ padding-block:36px 0; }
.hero-stripe{ height:3px; background:var(--red); margin-top:36px; }
@media (min-width:900px){ .hero-stripe{ margin-top:56px; } }
.hero-in{ display:flex; flex-direction:column; gap:16px; }
.hero-sub{ font-size:18px; color:var(--fg-2); max-width:44ch; }
.cta-row{ display:flex; flex-direction:column; gap:10px; margin-top:8px; }
.cta-row .btn{ width:100%; }
.cta-note{ font-size:15px; color:var(--fg-2); line-height:1.45; }
.cta-note b{ color:var(--fg); }
.risk{ font-size:14px; color:var(--fg-3); max-width:52ch; }
@media (min-width:640px){
  .cta-row{ flex-direction:row; align-items:center; gap:18px; }
  .cta-row .btn{ width:auto; min-width:300px; }
}
@media (min-width:900px){ .hero{ padding-block:64px 0; } .hero-sub{ font-size:19px; } }

/* 2. Performance: the centrepiece, on one raised band */
.perf{ padding-block:48px; background:var(--bg-2); }
.perf-head{ display:flex; flex-direction:column; gap:10px; margin-bottom:20px; }
.sync{ display:flex; flex-direction:column; gap:2px; font-size:13px; color:var(--fg-3); }
.sync .dot{ display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--fg-3); margin-right:6px; vertical-align:middle; }
.sync .dot.ok{ background:var(--pos); }
.demo-banner{ margin-bottom:12px; padding:9px 12px; border-radius:8px; border:1px dashed var(--warn); color:#F1DA8A; font-size:14px; }
.demo-banner b{ font-weight:600; margin-right:6px; }
.refresh-warn{ margin-bottom:12px; font-size:14px; color:#F1DA8A; padding:8px 12px; border-left:2px solid var(--warn); }
@media (min-width:900px){ .perf{ padding-block:72px; } .perf-head{ flex-direction:row; justify-content:space-between; align-items:flex-end; } .sync{ text-align:right; } }

.perf-msg{ display:flex; gap:12px; align-items:flex-start; background:var(--bg); border:0; border-radius:12px; padding:18px; max-width:600px; }
.perf-msg h3{ font-size:17px; }
.perf-msg p{ color:var(--fg-2); font-size:15px; margin-top:2px; }
.pm-dot{ width:9px; height:9px; border-radius:50%; background:var(--fg-3); margin-top:8px; flex-shrink:0; }
.perf-msg.empty .pm-dot{ background:var(--warn); }
.perf-msg.unavailable .pm-dot{ background:var(--neg); }
.perf-msg.loading .pm-dot{ animation:pulse 1.2s ease-in-out infinite; }
@keyframes pulse{ 50%{ opacity:.3; } }

.cal-card, .chart-card{ background:var(--bg); border:0; border-radius:14px; padding:16px; min-width:0; }
.chart-card{ margin-top:12px; }
.perf-side{ min-width:0; }
.cal-bar{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.month-nav{ display:flex; align-items:center; gap:8px; }
.month{ font-size:18px; font-weight:640; font-stretch:108%; min-width:140px; text-align:center; }
.inst{ display:flex; align-items:center; gap:8px; font-size:14px; font-weight:500; color:var(--fg-3); }
.inst select{ min-height:44px; padding:0 10px; border-radius:8px; border:1px solid var(--line); background:var(--bg-3); color:var(--fg); font:inherit; font-size:15px; }
.inc-note{ margin-top:12px; font-size:14px; color:#F1DA8A; padding:9px 12px; border:1px dashed rgba(232,197,71,.55); border-radius:8px; }

.stats{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:0; margin-top:14px; border:1px solid var(--line); border-radius:10px; background:var(--bg-2); }
.stat{ padding:10px 12px; min-width:0; }
.stat + .stat{ border-left:1px solid var(--line); }
.stat dt{ font-size:13px; font-weight:500; color:var(--fg-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.stat dd{ font-weight:700; font-size:22px; line-height:1.2; margin-top:2px; font-variant-numeric:tabular-nums; }
.stat dd.pos{ color:var(--pos); } .stat dd.neg{ color:var(--neg); }
.stat dd .na{ display:block; font-size:12px; font-weight:400; color:var(--warn); }

.cal-body{ margin-top:14px; }
.cal-dow, .cal-grid{ display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:4px; }
.cal-dow span{ text-align:center; font-size:12px; font-weight:500; color:var(--fg-3); padding-bottom:6px; }
.cell{ position:relative; min-height:54px; border-radius:8px; background:var(--cell); border:1px solid transparent; color:var(--fg); padding:5px 4px; display:flex; flex-direction:column; justify-content:space-between; gap:2px; text-align:left; font:inherit; cursor:pointer; transition:border-color .15s; min-width:0; }
.cell:hover{ border-color:var(--fg-3); }
.cell .top{ display:flex; justify-content:space-between; align-items:baseline; gap:2px; }
.cell .d{ font-size:12px; color:var(--fg-2); line-height:1; font-variant-numeric:tabular-nums; }
.cell .c{ font-size:12px; line-height:1; color:var(--fg); background:rgba(242,242,239,.12); border-radius:4px; padding:2px 3px; font-variant-numeric:tabular-nums; }
.cell .p{ font-weight:700; font-stretch:85%; font-size:14px; line-height:1; letter-spacing:-0.02em; white-space:nowrap; display:flex; align-items:center; gap:1px; font-variant-numeric:tabular-nums; }
.cell .incm{ font-style:normal; font-size:11px; font-weight:700; color:#141517; background:var(--warn); border-radius:50%; width:13px; height:13px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.cell.pos{ background:var(--pos-bg); } .cell.pos .p{ color:var(--pos); }
.cell.neg{ background:var(--neg-bg); } .cell.neg .p{ color:var(--neg); }
.cell.be{ background:var(--be-bg); } .cell.be .p{ color:var(--be); }
.cell.open{ border-color:rgba(242,242,239,.35); border-style:dashed; }
.cell.incst{ border:1px dashed var(--warn); } .cell.incst .p{ color:var(--warn); }
.cell.none{ background:transparent; border-color:var(--cell); }
.cell.none .d, .cell.nodata .d{ color:var(--fg-3); }
.cell.nodata{ background:repeating-linear-gradient(135deg, transparent 0 5px, rgba(255,255,255,.045) 5px 6px); }
.cell.future{ background:transparent; cursor:default; }
.cell.future .d{ color:#55595E; }
.cell.blank{ visibility:hidden; }
.cell.today{ box-shadow:inset 0 0 0 1.5px var(--fg-2); }
@media (min-width:640px){ .cell{ padding:8px; min-height:70px; } .cell .d, .cell .c{ font-size:14px; } .cell .p{ font-size:18px; font-stretch:95%; } .cal-dow span{ font-size:13px; } }

.legend{ display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:12px; font-size:13px; color:var(--fg-2); }
.legend li{ display:flex; align-items:center; gap:6px; }
.lg{ width:14px; height:14px; border-radius:4px; display:inline-flex; align-items:center; justify-content:center; font-style:normal; font-size:12px; flex-shrink:0; }
.lg.pos{ background:var(--pos); } .lg.neg{ background:var(--neg); } .lg.be{ background:var(--be); }
.lg.open{ border:1.5px dashed var(--fg-2); } .lg.none{ border:1px solid #3A3D42; }
.lg.nodata{ background:repeating-linear-gradient(135deg, transparent 0 3px, rgba(255,255,255,.25) 3px 4px); }
.lg.inc{ background:var(--warn); color:#141517; border-radius:50%; font-weight:700; }
.lg.cnt{ width:auto; min-width:16px; padding:0 3px; background:rgba(242,242,239,.12); color:var(--fg); }

.open-strip{ margin-top:14px; padding-top:12px; border-top:1px solid var(--line); }
.os-title{ font-size:14px; }
.open-strip ul{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.open-strip li button{ font:inherit; font-size:14px; min-height:44px; padding:0 14px; border-radius:999px; border:1px dashed rgba(242,242,239,.35); background:transparent; color:var(--fg); cursor:pointer; }

.chart-head{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap; }
.chart-head h3{ font-size:15px; font-weight:600; }
.chart-end{ font-weight:700; font-size:20px; font-variant-numeric:tabular-nums; }
.chart-end.pos{ color:var(--pos); } .chart-end.neg{ color:var(--neg); }
.inc-tag{ font-size:12px; font-weight:400; color:var(--warn); border:1px solid currentColor; border-radius:999px; padding:1px 8px; vertical-align:middle; }
.chart{ position:relative; margin-top:10px; height:190px; }
.chart svg{ width:100%; height:100%; display:block; overflow:visible; touch-action:pan-y; }
.chart .ax{ font-size:12px; fill:var(--fg-3); font-family:var(--font); }
.chart .grid{ stroke:var(--line); stroke-width:1; }
.chart .zero{ stroke:var(--fg-3); stroke-width:1; stroke-dasharray:3 4; }
.chart .ln{ fill:none; stroke:var(--fg); stroke-width:2; stroke-linejoin:round; }
.chart .guide{ stroke:var(--fg-3); stroke-width:1; }
.chart .pt{ cursor:pointer; }
.chart .pt:focus{ outline:none; }
.chart .pt .hit{ fill:transparent; stroke:none; }
.chart .pt .dot{ fill:var(--bg); stroke-width:2; transform-box:fill-box; transform-origin:center; transition:transform .15s; }
.chart .pt.pos .dot{ stroke:var(--pos); } .chart .pt.neg .dot{ stroke:var(--neg); } .chart .pt.be .dot{ stroke:var(--be); }
.chart .pt:focus .dot, .chart .pt.on .dot{ transform:scale(1.4); }
.chart .pt:focus-visible .dot{ stroke-width:3; }
.chart .empty-msg{ position:absolute; inset:0 0 26px 46px; display:flex; align-items:center; justify-content:center; text-align:center; padding:0 12px; pointer-events:none; }
.chart .empty-msg span{ background:var(--bg); box-shadow:0 0 0 1px var(--line); color:var(--fg-2); font-size:14px; line-height:1.4; padding:8px 12px; border-radius:8px; max-width:300px; }
.tip{ position:absolute; z-index:2; pointer-events:none; background:var(--fg); color:var(--bg); font-size:13px; padding:6px 9px; border-radius:6px; white-space:nowrap; transform:translate(-50%, calc(-100% - 10px)); font-variant-numeric:tabular-nums; }
.tip.below{ transform:translate(-50%, 12px); }
.chart-hint{ font-size:12px; color:var(--fg-3); margin-top:6px; }
@media (hover:hover) and (pointer:fine){ .chart-hint{ display:none; } }

.method{ margin-top:14px; font-size:14px; color:var(--fg-2); }
.method summary{ cursor:pointer; min-height:44px; display:flex; align-items:center; color:var(--fg); }
.method ul{ display:grid; gap:6px; padding-left:18px; list-style:disc; max-width:72ch; }
.method b{ font-weight:500; color:var(--fg); }

@media (max-width:419px){
  .stats{ grid-template-columns:1fr 1fr; }
  .stat:nth-child(3){ border-left:0; }
  .stat:nth-child(n+3){ border-top:1px solid var(--line); }
  .stat{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; padding:9px 10px; }
  .stat dd{ font-size:19px; margin-top:0; }
}
@media (max-width:399px){ .cal-card, .chart-card{ padding:12px; } .cal-dow, .cal-grid{ gap:3px; } .month{ min-width:0; font-size:17px; } }
@media (min-width:900px){ .cal-card, .chart-card{ padding:20px; } .chart{ height:230px; } .cell{ height:80px; } }
@media (min-width:1120px){
  .perf-grid{ display:grid; grid-template-columns:minmax(0,1.65fr) minmax(0,1fr); gap:14px; align-items:start; }
  .perf-side{ position:sticky; top:84px; }
  .perf-side .chart-card{ margin-top:0; }
  .cell{ height:72px; }
  .chart{ height:210px; }
}

/* 3. VIP benefits: open grid with icons, no cards */
.vip{ padding-block:var(--space) 0; }
.benefits{ display:grid; gap:20px; margin-top:24px; }
.benefits li{ display:flex; gap:14px; align-items:flex-start; }
.ico{ width:22px; height:22px; flex-shrink:0; color:var(--red); margin-top:2px; }
.benefits p{ color:var(--fg-2); font-size:15px; margin-top:2px; }
.shots{ display:grid; gap:12px; margin-top:28px; }
.shot{ background:var(--bg-2); border:1px solid var(--line); border-radius:12px; padding:10px; }
.shot img{ display:block; width:100%; height:auto; border-radius:8px; }
.shot figcaption{ font-size:13px; color:var(--fg-3); margin-top:8px; }
@media (min-width:640px){ .benefits{ grid-template-columns:1fr 1fr; gap:28px 40px; } .shots{ grid-template-columns:1fr 1fr; } }
@media (min-width:1000px){ .benefits{ grid-template-columns:repeat(4, minmax(0,1fr)); } }

/* Member comments (only when approved ones exist) */
.proof{ padding-block:var(--space) 0; }
.proof-list{ display:grid; gap:12px; margin-top:18px; }
.quote{ border-left:2px solid var(--line); padding:4px 0 4px 16px; display:flex; flex-direction:column; gap:8px; }
.quote blockquote{ margin:0; font-size:16px; }
.quote figcaption{ font-size:14px; color:var(--fg-2); }
.quote figcaption span{ color:var(--fg-3); }
@media (min-width:760px){ .proof-list{ grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:24px; } }

/* 4. How to join */
.join{ padding-block:var(--space) 0; }
.steps{ display:grid; gap:2px; margin:20px 0 24px; }
.steps li{ display:flex; align-items:center; gap:14px; min-height:52px; font-size:16px; color:var(--fg); border-bottom:1px solid var(--line); }
.n{ width:30px; height:30px; flex-shrink:0; border-radius:50%; border:1px solid var(--line); display:inline-flex; align-items:center; justify-content:center; font-size:14px; color:var(--fg-2); font-variant-numeric:tabular-nums; }
@media (min-width:900px){
  .join-in{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.6fr); column-gap:56px; align-items:start; }
  .join-in > div:first-child{ grid-row:1 / span 2; }
  .join-in .steps, .join-in .cta-row{ grid-column:2; }
  .steps{ margin-top:0; }
}

/* 5. Skool: one quiet grouped block */
.learn{ padding-block:var(--space) 0; }
.learn-box{ border-top:3px solid var(--red); background:var(--bg-2); border-radius:0 0 14px 14px; padding:20px; display:grid; gap:16px; }
.learn-list{ display:grid; gap:10px; }
.learn-list dt{ font-weight:600; font-stretch:104%; }
.learn-list dd{ color:var(--fg-2); font-size:15px; }
.learn-btn{ justify-self:start; min-height:48px; font-size:15px; }
@media (min-width:900px){
  .learn-box{ grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) auto; align-items:center; gap:32px; padding:28px 32px; }
  .learn-list{ grid-template-columns:1fr 1fr; gap:24px; }
}

/* 6. FAQ + final CTA */
.faq{ padding-block:var(--space); }
.faq-grid{ display:grid; gap:12px; }
.qa details{ border-bottom:1px solid var(--line); }
.qa summary{ cursor:pointer; list-style:none; min-height:54px; display:flex; align-items:center; justify-content:space-between; gap:16px; font-size:16px; font-weight:500; padding-block:8px; }
.qa summary::-webkit-details-marker{ display:none; }
.qa summary::after{ content:"+"; font-size:20px; color:var(--fg-3); transition:transform .2s; }
.qa details[open] summary::after{ transform:rotate(45deg); }
.qa p{ color:var(--fg-2); font-size:15px; padding-bottom:14px; max-width:62ch; }
.qa b{ font-weight:500; color:var(--fg); }
.final{ margin-top:calc(var(--space) * .75); display:grid; gap:4px; }
@media (min-width:900px){ .faq-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1.6fr); column-gap:56px; } }

/* Footer */
.foot{ border-top:1px solid var(--line); padding-block:22px calc(92px + env(safe-area-inset-bottom,0px)); }
@media (min-width:900px){ .foot{ padding-bottom:22px; } }

/* Mobile sticky CTA: appears only where it covers nothing interactive, settles into the final button */
.dock{ --m:0; position:fixed; left:calc(12px + (var(--gutter) - 12px) * var(--m)); right:calc(12px + (var(--gutter) - 12px) * var(--m)); bottom:calc(12px + env(safe-area-inset-bottom,0px)); z-index:45; transition:opacity .2s ease; }
.dock .btn{ width:100%; min-height:calc(52px + 4px * var(--m)); box-shadow:0 8px 24px rgba(0,0,0,calc(.4 - .4 * var(--m))); }
.dock.docked, .dock.away{ opacity:0; pointer-events:none; }
.dock.away{ transition:none; }
@media (min-width:900px){ .dock{ display:none; } }
@media (max-height:500px) and (orientation:landscape){
  .dock{ left:auto !important; right:12px !important; width:auto; }
  .dock .btn{ min-height:48px; width:48px; padding:0; justify-content:center; border-radius:50%; }
  .dock .btn .dock-label{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .nav-in{ height:52px; }
  .day-in{ max-height:90vh; max-height:90dvh; }
}

/* Day panel: bottom sheet on phones, centred sheet on tablets, side panel on desktop */
.day{ border:0; padding:0; margin:0; max-width:none; max-height:none; width:100%; background:transparent; color:var(--fg); }
.day::backdrop{ background:rgba(0,0,0,.6); }
.day[open]{ position:fixed; inset:auto 0 0 0; }
.day-in{ background:var(--bg-2); border-top:1px solid var(--line); border-radius:16px 16px 0 0; max-height:82vh; max-height:82dvh; overflow:auto; overscroll-behavior:contain; padding:16px var(--gutter) calc(24px + env(safe-area-inset-bottom,0px)); animation:up .25s ease; }
@keyframes up{ from{ transform:translateY(30px); opacity:0; } }
.day-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; position:sticky; top:-16px; background:var(--bg-2); padding-block:6px 10px; z-index:1; }
.day-head .eyebrow{ font-size:13px; color:var(--fg-3); }
.day-head h3{ font-size:19px; font-weight:500; }
.day-sum{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.chip{ font-size:13px; padding:4px 10px; border-radius:999px; background:var(--bg-3); font-variant-numeric:tabular-nums; }
.chip.pos{ color:var(--pos); background:var(--pos-bg); } .chip.neg{ color:var(--neg); background:var(--neg-bg); } .chip.be{ color:var(--be); background:var(--be-bg); }
.chip.inc{ color:var(--warn); background:rgba(232,197,71,.12); }
.pos-card{ background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:14px; display:grid; gap:10px; }
.pos-card + .pos-card{ margin-top:8px; }
.pos-card.bad{ border-style:dashed; border-color:var(--warn); color:var(--fg-2); font-size:14px; }
.pc-when{ font-size:12px; color:var(--fg-3); }
.pc-when.both{ color:var(--fg-2); }
.pc-top{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
.pc-inst{ font-weight:500; }
.dir{ font-size:12px; padding:2px 7px; border-radius:4px; margin-left:8px; background:var(--bg-3); color:var(--fg-2); }
.pc-res{ font-weight:700; font-size:18px; font-variant-numeric:tabular-nums; }
.pc-res.pos{ color:var(--pos); } .pc-res.neg{ color:var(--neg); } .pc-res.be{ color:var(--be); }
.pc-res.open, .pc-res.na{ font-size:14px; font-weight:400; color:var(--fg-2); }
.pc-res.na{ color:var(--warn); }
.pc-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px 12px; font-size:14px; }
.pc-grid dt{ color:var(--fg-3); font-size:12px; }
.pc-grid dd{ font-variant-numeric:tabular-nums; }
.pc-k{ font-size:12px; color:var(--fg-3); margin-bottom:6px; }
.tps{ display:flex; gap:6px; flex-wrap:wrap; }
.tp{ font-size:13px; padding:3px 8px; border-radius:4px; border:1px solid var(--line); font-variant-numeric:tabular-nums; }
.tp.hit{ border-color:var(--pos); color:var(--pos); }
.pc-id{ font-size:12px; color:var(--fg-3); }
@media (min-width:640px) and (max-width:899px){ .day[open]{ width:min(600px, 100%); margin-inline:auto; } }
@media (min-width:900px){
  .day[open]{ inset:0 0 0 auto; width:min(440px, 100%); height:100%; }
  .day-in{ height:100%; max-height:none; border-radius:0; border-top:0; border-left:1px solid var(--line); padding:22px 26px; animation:side .25s ease; }
  @keyframes side{ from{ transform:translateX(30px); opacity:0; } }
}

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

/* Self-reported statistic: visibly separate from figures calculated from the records */
.reported{ margin-top:16px; display:flex; flex-direction:column; gap:2px; padding-left:12px; border-left:3px solid var(--red); }
.reported-num{ display:flex; align-items:baseline; gap:8px; }
.reported-num b{ font-weight:700; font-size:28px; line-height:1.1; font-variant-numeric:tabular-nums; }
.reported-num span{ font-size:15px; font-weight:500; color:var(--fg-2); }
.reported-note{ font-size:13px; color:var(--fg-2); max-width:46ch; }

/* day panel for dates without records */
.day-empty{ color:var(--fg-2); font-size:15px; line-height:1.5; }
.day-empty b{ color:var(--fg); display:block; margin-bottom:4px; }
.perf-msg:not([hidden]){ margin-bottom:12px; }

/* incomplete marker sits on the cell corner on phones so long figures never collide */
@media (max-width:639px){
  .cell .incm{ position:absolute; top:-5px; right:-5px; width:14px; height:14px; font-size:10px; box-shadow:0 0 0 2px var(--bg); }
}

/* ===== Results: summary cards, calendar + chart, day panel ===== */
.rx{ padding-block:56px 48px; background:linear-gradient(180deg, var(--bg-2) 0, #151618 100%); position:relative; }
.rx::before{ content:""; position:absolute; inset:0 0 auto 0; height:1px; background:linear-gradient(90deg, transparent, rgba(210,33,27,.6), transparent); }
@media (min-width:900px){ .rx{ padding-block:80px 72px; } }
.rx-head{ display:flex; flex-direction:column; gap:14px; margin-bottom:22px; }
.rx-head h2{ font-size:clamp(28px, 5vw, 40px); }
.rx-source{ display:grid; gap:3px; font-size:13px; color:var(--fg-3); }
.rx-source .rx-verified{ font-size:14px; color:var(--fg-2); }
.rx-source b{ font-weight:600; color:var(--fg); }
.rx-source .dot{ display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--pos); margin-right:7px; vertical-align:middle; box-shadow:0 0 0 3px rgba(61,214,140,.15); }
@media (min-width:900px){ .rx-head{ flex-direction:row; justify-content:space-between; align-items:flex-end; } .rx-source{ text-align:right; } }

/* summary cards */
.rx-cards{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; }
.rx-card{ background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:12px 14px; min-width:0; display:flex; flex-direction:column; justify-content:space-between; gap:6px; }
.rx-card dt{ font-size:13px; font-weight:500; color:var(--fg-3); display:flex; align-items:center; gap:7px; }
.rx-card dd{ font-weight:700; font-size:26px; line-height:1; font-variant-numeric:tabular-nums; letter-spacing:-0.01em; }
.rx-dot{ width:8px; height:8px; border-radius:2px; flex-shrink:0; }
.rx-dot.pos{ background:var(--pos); } .rx-dot.neg{ background:var(--neg); } .rx-dot.be{ background:var(--be); }
.rx-hero{ grid-column:1 / -1; position:relative; overflow:hidden; padding:16px 16px 14px; border-color:#34363A; }
.rx-hero::after{ content:""; position:absolute; left:0; top:14px; bottom:14px; width:3px; border-radius:0 3px 3px 0; background:var(--red); }
.rx-hero dt{ color:var(--fg-2); }
.rx-hero dd{ font-size:clamp(44px, 11vw, 60px); font-stretch:92%; letter-spacing:-0.03em; }
.rx-hero dd.pos{ color:var(--pos); } .rx-hero dd.neg{ color:var(--neg); }
.rx-range{ font-size:13px; color:var(--fg-3); }
@media (min-width:760px){
  .rx-cards{ grid-template-columns:1.7fr repeat(4, minmax(0,1fr)); }
  .rx-hero{ grid-column:auto; }
  .rx-card dd{ font-size:30px; }
  .rx-hero dd{ font-size:52px; }
}

/* calendar + chart */
.rx-grid{ display:grid; gap:12px; margin-top:12px; }
@media (min-width:1024px){ .rx-grid{ grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); align-items:stretch; } }
.rx-panel{ background:var(--bg); border:1px solid var(--line); border-radius:14px; padding:14px; min-width:0; display:flex; flex-direction:column; }
@media (min-width:640px){ .rx-panel{ padding:18px; } }
.rx-bar{ display:grid; grid-template-columns:44px 1fr 44px; align-items:center; gap:8px; }
.rx-month{ text-align:center; font-size:19px; font-weight:640; font-stretch:108%; }
.rx-msum{ text-align:center; font-size:13px; color:var(--fg-3); margin-top:4px; min-height:20px; }
.rx-msum .pos{ color:var(--pos); font-weight:600; } .rx-msum .neg{ color:var(--neg); font-weight:600; } .rx-msum .be{ color:var(--be); font-weight:600; }
.rx-dow, .rx-days{ display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:4px; }
.rx-dow{ margin-top:12px; }
.rx-dow span{ text-align:center; font-size:12px; font-weight:500; color:var(--fg-3); padding-bottom:6px; }
.rx-cell{ position:relative; min-height:58px; border-radius:8px; border:1px solid transparent; background:transparent; color:var(--fg); font:inherit; padding:5px; display:flex; flex-direction:column; justify-content:space-between; text-align:left; min-width:0; }
button.rx-cell{ cursor:pointer; transition:border-color .15s, transform .15s; }
button.rx-cell:hover{ border-color:var(--fg-3); }
button.rx-cell:active{ transform:scale(.97); }
.rx-cell.blank{ visibility:hidden; }
.rx-top{ display:flex; justify-content:space-between; align-items:center; gap:2px; }
.rx-d{ font-size:12px; line-height:1; color:var(--fg-2); font-variant-numeric:tabular-nums; }
.rx-cell.nodata{ background:repeating-linear-gradient(135deg, transparent 0 6px, rgba(255,255,255,.035) 6px 7px); border-color:#1F2023; }
.rx-cell.nodata .rx-d{ color:var(--fg-3); }
.rx-nd{ display:none; font-size:11px; line-height:1.15; color:var(--fg-3); }
.rx-cell.future .rx-d{ color:#4C5055; }
.rx-cell.today{ box-shadow:inset 0 0 0 1.5px var(--fg-3); }
.rx-cell.has{ border-color:transparent; }
.rx-cell.pos{ background:linear-gradient(160deg, rgba(61,214,140,.22), rgba(61,214,140,.08)); }
.rx-cell.neg{ background:linear-gradient(160deg, rgba(255,93,82,.24), rgba(255,93,82,.08)); }
.rx-cell.be{ background:var(--be-bg); }
.rx-cell.bad{ border:1px dashed var(--warn); }
.rx-cell.part{ border:1px dashed rgba(232,197,71,.75); }
.rx-p{ font-weight:750; font-size:13px; font-stretch:85%; line-height:1; letter-spacing:-0.02em; white-space:nowrap; font-variant-numeric:tabular-nums; }
.rx-cell.pos .rx-p{ color:var(--pos); } .rx-cell.neg .rx-p{ color:var(--neg); } .rx-cell.be .rx-p{ color:var(--be); }
.rx-n{ font-size:11px; line-height:1; color:var(--fg-2); white-space:nowrap; }
.rx-n b{ font-weight:600; color:var(--fg); }
.rx-n span{ display:none; }
.rx-part{ width:7px; height:7px; border-radius:50%; background:var(--warn); flex-shrink:0; box-shadow:0 0 0 3px rgba(232,197,71,.18); }
@media (min-width:480px){ .rx-cell{ min-height:66px; padding:6px 7px; } .rx-p{ font-size:16px; } .rx-d{ font-size:13px; } }
@media (min-width:640px){
  .rx-cell{ min-height:78px; padding:8px; }
  .rx-p{ font-size:19px; font-stretch:92%; }
  .rx-n{ font-size:12px; } .rx-n span{ display:inline; color:var(--fg-3); }
  .rx-nd{ display:block; }
  .rx-part{ width:8px; height:8px; }
}
@media (min-width:1024px) and (max-width:1279px){ .rx-nd{ letter-spacing:-0.01em; } }
.rx-legend{ display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:auto; padding-top:14px; font-size:13px; color:var(--fg-2); }
.rx-legend li{ display:flex; align-items:center; gap:6px; }
.lg.part{ border:1.5px dashed var(--warn); }

.rx-chart-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.rx-chart-head h3{ font-size:17px; font-weight:600; }
.rx-chart-head p{ font-size:13px; color:var(--fg-3); margin-top:2px; }
.rx-chart-head .rx-chart-end{ font-size:28px; margin:0; color:var(--fg); }
.rx-chart-end{ font-weight:750; font-size:28px; line-height:1; font-variant-numeric:tabular-nums; letter-spacing:-0.02em; }
.rx-chart-head .rx-chart-end.pos{ color:var(--pos); } .rx-chart-head .rx-chart-end.neg{ color:var(--neg); }
.rx-chart{ position:relative; flex:1; min-height:240px; margin-top:12px; }
@media (min-width:1024px){ .rx-chart{ min-height:300px; } }
.rx-chart svg{ position:absolute; inset:0; width:100%; height:100%; display:block; overflow:visible; touch-action:pan-y; }
.rx-chart .ax{ font-size:12px; fill:var(--fg-3); font-family:var(--font); font-variant-numeric:tabular-nums; }
.rx-chart .ax.xl{ fill:var(--fg-2); font-weight:500; }
.rx-chart .ax.xs{ font-size:11px; fill:#C9AE3F; }
.rx-chart .grid{ stroke:#222427; stroke-width:1; }
.rx-chart .zero{ stroke:#4A4E53; stroke-width:1; stroke-dasharray:3 4; }
.rx-ln{ fill:none; stroke:var(--fg); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.rx-ln.part{ stroke-dasharray:5 5; }
.rx-guide{ stroke:#5A5E63; stroke-width:1; stroke-dasharray:2 3; }
.rx-endlabel{ font-size:14px; font-weight:700; font-family:var(--font); fill:var(--fg); }
.rx-endlabel.pos{ fill:var(--pos); } .rx-endlabel.neg{ fill:var(--neg); }
.rx-pt{ cursor:pointer; outline:none; }
.rx-pt .hit{ fill:transparent; }
.rx-pt .dot{ fill:var(--bg); stroke:var(--fg); stroke-width:2.5; transform-box:fill-box; transform-origin:center; transition:transform .15s; }
.rx-pt.pos .dot{ fill:var(--pos); stroke:var(--bg); stroke-width:2; } .rx-pt.neg .dot{ fill:var(--neg); stroke:var(--bg); stroke-width:2; } .rx-pt.be .dot{ fill:var(--be); stroke:var(--bg); stroke-width:2; }
.rx-pt.start .dot{ stroke:var(--fg-3); }
.rx-pt.part .dot{ stroke:var(--warn); stroke-width:2; }
.rx-pt.on .dot, .rx-pt:focus .dot{ transform:scale(1.35); }
.rx-pt:focus-visible .dot{ stroke:var(--fg); stroke-width:3; }
.rx-tip{ position:absolute; z-index:3; pointer-events:none; display:grid; gap:2px; min-width:150px; background:#F5F5F2; color:#0F1011; font-size:13px; line-height:1.35; padding:8px 11px; border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.45); transform:translate(-50%, calc(-100% - 14px)); white-space:nowrap; }
.rx-tip.below{ transform:translate(-50%, 16px); }
.rx-tip b{ font-weight:650; } .rx-tip em{ font-style:normal; font-weight:500; color:#8A6D00; }
.rx-tip i{ font-style:normal; font-weight:650; font-variant-numeric:tabular-nums; }
.rx-tip i.pos{ color:#0E7A47; } .rx-tip i.neg{ color:#C2261D; }
.rx-hint{ font-size:12px; color:var(--fg-3); margin-top:8px; }
@media (hover:hover) and (pointer:fine){ .rx-hint{ display:none; } }

/* calculation note (holds the separate cumulative-target-pips metric) */
.rx-method{ margin-top:14px; background:var(--bg); border:1px solid var(--line); border-radius:14px; padding:0 16px; }
.rx-method summary{ font-weight:500; }
.rx-method-in{ display:grid; gap:14px; padding-bottom:16px; }
.rx-alt{ border:1px dashed #3A3D42; border-radius:10px; padding:12px 14px; display:grid; gap:6px; color:var(--fg-2); max-width:72ch; }
.rx-alt-k{ font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--fg-3); }
.rx-alt b{ font-weight:600; color:var(--fg); }
.rx-alt-days{ font-size:13px; color:var(--fg-3); font-variant-numeric:tabular-nums; }

/* day panel content */
.rx-partnote{ font-size:14px; color:#F1DA8A; padding:8px 12px; border:1px dashed rgba(232,197,71,.55); border-radius:8px; margin-bottom:10px; }
.day-sum .chip b{ font-weight:700; }
.rx-trade{ background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:14px; display:grid; gap:12px; }
.rx-trade + .rx-trade{ margin-top:8px; }
.rx-trade-top{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
.rx-tt{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.rx-time{ font-weight:600; font-variant-numeric:tabular-nums; }
.rx-trade .dir{ margin-left:0; font-weight:600; letter-spacing:.03em; }
.dir.buy, .dir.sell{ color:var(--fg); background:var(--bg-3); }   /* direction stays neutral: colour is kept for results */
.rx-tp{ font-weight:750; font-size:20px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.rx-tp small{ font-size:11px; font-weight:400; color:var(--fg-3); margin-left:3px; }
.rx-tp.pos{ color:var(--pos); } .rx-tp.neg{ color:var(--neg); } .rx-tp.be{ color:var(--be); }
.badge{ display:inline-flex; align-items:center; font-size:12px; font-weight:600; padding:3px 9px; border-radius:999px; white-space:nowrap; }
.badge.full{ color:var(--pos); background:var(--pos-bg); }
.badge.be{ color:var(--be); background:var(--be-bg); }
.badge.sl{ color:var(--neg); background:var(--neg-bg); }
.badge.bad{ color:var(--warn); background:rgba(232,197,71,.12); }
.rx-targets{ display:grid; gap:6px; }
.rx-targets li{ display:grid; grid-template-columns:36px 1fr auto; gap:8px; align-items:center; font-size:14px; padding:7px 10px; border:1px solid var(--line); border-radius:8px; font-variant-numeric:tabular-nums; }
.rx-targets li.hit{ border-color:rgba(61,214,140,.4); background:rgba(61,214,140,.05); }
.rx-targets .tg-n{ font-weight:600; }
.rx-targets .tg-s{ font-size:13px; color:var(--fg-3); }
.rx-targets li.hit .tg-s{ color:var(--pos); }
.rx-final{ font-size:14px; color:var(--fg-2); }
.rx-final b{ font-weight:600; color:var(--fg); }
.rx-final .pos{ color:var(--pos); font-weight:600; } .rx-final .neg{ color:var(--neg); font-weight:600; } .rx-final .be{ color:var(--be); font-weight:600; }
.t-audit{ font-size:13px; color:#F1DA8A; padding:9px 12px; border:1px dashed rgba(232,197,71,.55); border-radius:8px; }
.t-audit b{ display:block; font-weight:600; margin-bottom:2px; }
.rx-chart .rx-daysep{ stroke:#2C2E32; stroke-width:1; }
.rx-pt.sum .dot{ stroke-dasharray:2 2; }
.badge.manual{ color:#F1DA8A; background:rgba(232,197,71,.12); border:1px solid rgba(232,197,71,.45); }
.rx-calc{ color:var(--fg); font-variant-numeric:tabular-nums; }
.rx-trade.sumonly{ border-style:dashed; }
.rx-missing{ font-size:13px; color:var(--fg-3); }
.rx-chart-head p{ max-width:36ch; }
/* expandable trade rows in the day panel */
.rx-trade{ padding:0; gap:0; }
.rx-trade > summary.rx-trade-top{ list-style:none; cursor:pointer; min-height:56px; padding:10px 12px 10px 14px; display:flex; align-items:center; gap:10px; }
.rx-trade > summary::-webkit-details-marker{ display:none; }
.rx-trade > summary .rx-tt{ flex:1; min-width:0; }
.rx-trade .t-chev{ width:18px; height:18px; color:var(--fg-3); flex-shrink:0; transition:transform .15s; }
.rx-trade[open] .t-chev{ transform:rotate(180deg); }
.rx-trade > summary:hover .t-chev{ color:var(--fg); }
.rx-trade-body{ display:grid; gap:12px; padding:2px 14px 14px; }
.rx-trade[open] > summary{ border-bottom:1px solid var(--line); margin-bottom:12px; }
@media (max-width:399px){ .rx-trade > summary.rx-trade-top{ padding-inline:10px; gap:6px; } .rx-tp{ font-size:18px; } }


/* win rate card (8 Oct 2026) */
.rx-card.rx-wide{ grid-column:1 / -1; }
@media (min-width:760px){
  .rx-cards{ grid-template-columns:1.7fr repeat(5, minmax(0,1fr)); }
  .rx-card.rx-wide{ grid-column:auto; }
}


/* weekend: market closed (12 Oct 2026) */
.rx-cell.closed{ opacity:.55; background:transparent; border-style:dashed; cursor:default; }
.rx-cell.closed .rx-nd{ color:var(--fg-3); }