/*
 * The Trial Day Projects front door. Shared tokens (both themes), buttons, chips and inputs
 * come from app.css, so the page and the product it leads into are one place.
 *
 * Every picture is drawn here in CSS and SVG from made-up numbers. Motion is small and plays
 * once: the hero acts out one month, sections arrive as they scroll in. The base style of
 * every animated thing is its finished state, so with motion turned off the page is simply
 * complete.
 */
.pl { font-size: 16px; line-height: 1.6; }
.pl-wrap { max-width: 1160px; margin: 0 auto; padding: 0 28px; }
.pl .kicker { font-size: 12.5px; letter-spacing: .02em; }

/* ── Nav ── */
.pl-nav { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.pl-nav.scrolled { border-bottom-color: var(--rule); }
.pl-nav-in { display: flex; align-items: center; gap: 28px; height: 64px; }
.pl-nav .mark svg, .pl-foot .mark svg { display: block; }
.pl-links { display: flex; gap: 22px; }
.pl-links a, .pl-signin { color: var(--ink-2); text-decoration: none; font-size: 14.5px; font-weight: 500; }
.pl-links a:hover, .pl-signin:hover { color: var(--ink); }

/* ── Hero ── */
.pl-hero { padding: 56px 0 72px; overflow: hidden; }
.pl-hero-in { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.pl-hero-copy { display: grid; gap: 22px; justify-items: start; animation: rise .5s ease both; }
.pl-pill { display: inline-flex; gap: 8px; align-items: center; height: 30px; padding: 0 12px 0 4px; border-radius: 99px; background: var(--card); border: 1px solid var(--rule); font-size: 13px; color: var(--ink-2); }
.pl-pill b { padding: 3px 9px; border-radius: 99px; background: var(--accent-bg); color: var(--accent-2); font-size: 12px; }
.pl h1 { font: 700 clamp(38px, 5vw, 58px)/1.05 var(--font); letter-spacing: -.032em; max-width: 15ch; }
.pl-under { position: relative; white-space: nowrap; }
.pl-under::after { content: ""; position: absolute; left: 0; right: 0; bottom: .02em; height: .11em; border-radius: 99px; background: var(--accent); transform-origin: left; animation: under .7s .45s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes under { from { transform: scaleX(0); } }
.pl-sub { font-size: 18px; line-height: 1.6; color: var(--ink-2); max-width: 54ch; }
.pl-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.pl-cta .btn { height: 46px; padding: 0 20px; font-size: 15px; border-radius: 11px; }
.pl-cta .btn svg { transition: transform .2s; }
.pl-cta .btn:hover svg { transform: translateX(3px); }
.pl-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; color: var(--ink-3); }
.pl-facts li { display: inline-flex; align-items: center; gap: 7px; }
.pl-facts li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--good); }

/* The hero's month, acted out once */
.pl-stage { position: relative; height: 500px; }
.st-card { position: absolute; background: var(--card); border: 1px solid var(--rule); border-radius: 14px; box-shadow: var(--shadow); padding: 16px 18px; }
.st-months { position: absolute; top: 0; left: 0; display: flex; align-items: center; gap: 8px; font: 600 12.5px/1 var(--font); color: var(--ink-3); }
.st-months span { padding: 6px 10px; border-radius: 99px; border: 1px solid var(--rule); background: var(--card); }
.st-months i { width: 18px; height: 1px; background: var(--rule-2); }
.st-months .m1 { background: var(--accent-bg); color: var(--accent-2); border-color: transparent; }
.st-months .m2 { background: var(--accent-bg); color: var(--accent-2); border-color: transparent; animation: mon .35s 3.3s ease both; }
@keyframes mon { from { background: var(--card); color: var(--ink-3); border-color: var(--rule); } }
.st-msg { top: 48px; left: 0; width: 76%; display: grid; gap: 10px; animation: rise .5s .25s ease both; }
.st-who { display: flex; gap: 12px; align-items: center; }
.st-who > span { display: grid; min-width: 0; }
.st-who b { font-size: 13.5px; } .st-who small { font-size: 13px; color: var(--ink-2); }
.st-line { height: 7px; width: 88%; border-radius: 99px; background: var(--room); }
.st-line.s { width: 56%; }
.st-chart { top: 172px; left: 3%; width: 68%; display: grid; gap: 6px; animation: rise .5s .55s ease both; }
.st-cap, .pp-cap { font-size: 12.5px; color: var(--ink-3); }
.st-chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.st-g { stroke: var(--rule); stroke-dasharray: 3 4; }
.st-past { fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 260; animation: draw 1s .9s ease both; }
.st-after { fill: none; stroke: var(--good); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 80; animation: draw .6s 2.95s ease both; }
@keyframes draw { from { stroke-dashoffset: 260; } }
.st-after { animation-name: draw-s; } @keyframes draw-s { from { stroke-dashoffset: 80; } }
.st-drop { fill: var(--bad); transform-box: fill-box; transform-origin: center; animation: pop .35s 1.8s ease both; }
.st-up { fill: var(--good); transform-box: fill-box; transform-origin: center; animation: pop .35s 3.5s ease both; }
@keyframes pop { from { transform: scale(0); } 70% { transform: scale(1.35); } }
.st-x { display: flex; justify-content: space-between; padding: 0 2% 0 3%; font-size: 11px; color: var(--ink-3); }
.st-x b { font-weight: 500; }
.st-dec { top: 384px; right: 0; width: 60%; display: grid; gap: 5px; border-color: var(--accent); animation: slide .5s 2.35s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes slide { from { opacity: 0; transform: translateX(28px); } }
.st-lbl { font: 600 11px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.st-dec b { font-size: 14px; line-height: 1.4; }
.st-exp { font-size: 12.5px; color: var(--ink-3); }
.st-kpi { top: 118px; right: 0; width: 34%; display: grid; gap: 2px; animation: pop-in .4s 3.6s ease both; }
@keyframes pop-in { from { opacity: 0; transform: translateY(10px) scale(.94); } }
.st-kpi span { font-size: 12px; color: var(--ink-3); }
.st-kpi b { font: 700 24px/1.1 var(--font); color: var(--good); letter-spacing: -.02em; }
.st-kpi small { font-size: 12.5px; color: var(--ink-2); }

/* ── Bands ── */
.pl-band { padding: 88px 0; }
.pl-alt { background: var(--card); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.pl-h2 { font: 680 clamp(28px, 3.4vw, 38px)/1.12 var(--font); letter-spacing: -.024em; max-width: 22ch; }
.pl-lede { font-size: 17px; color: var(--ink-2); max-width: 58ch; margin-top: 14px; }
.pl-center { text-align: center; display: grid; justify-items: center; }
.pl-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 64px; align-items: center; }
.pl-split.rev { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }


/* How a month works: a real sequence, so it is drawn as one */
.pl-steps { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; counter-reset: step; }
.pl-steps li { position: relative; padding: 22px 20px; border-radius: 14px; background: var(--card); border: 1px solid var(--rule); display: grid; gap: 8px; align-content: start; transition: transform .2s, box-shadow .2s, border-color .2s; }
.pl-steps li:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--rule-2); }
.pl-steps li::after { counter-increment: step; content: counter(step); position: absolute; top: 20px; right: 20px; font: 600 12px/1 var(--mono); color: var(--ink-3); }
.pl-ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--accent-bg); color: var(--accent); }
.pl-ic svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pl-steps h3 { font-size: 16.5px; margin-top: 6px; }
.pl-steps p { font-size: 14.5px; color: var(--ink-2); line-height: 1.55; }

.pl-ticks { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.pl-ticks li { display: flex; gap: 10px; align-items: baseline; font-size: 15.5px; color: var(--ink-2); }
.pl-ticks li::before { content: "✓"; flex: none; font-weight: 700; color: var(--good); }

/* Messy data, drawn */
.pl-table { border-radius: 14px; background: var(--paper); border: 1px solid var(--rule); box-shadow: var(--shadow); overflow: hidden; }
.pt-h { display: flex; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--rule); background: var(--card); font-size: 13px; }
.pt-h b { font-family: var(--mono); } .pt-h span { color: var(--ink-3); }
.pt-scroll { overflow-x: auto; }
.pl-table table { width: 100%; border-collapse: collapse; font: 500 12.5px/1.4 var(--mono); }
.pl-table th { text-align: left; padding: 9px 14px; color: var(--ink-3); font-weight: 600; white-space: nowrap; border-bottom: 1px solid var(--rule); position: relative; }
.pl-table td { padding: 8px 14px; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.pl-table tr:last-child td { border-bottom: 0; }
.pl-table .n { text-align: right; }
.pl-table .null { color: var(--ink-3); font-style: italic; }
.pt-bad td { transition: background .4s; }
.reveal.in .pt-bad td { background: var(--bad-bg); }
.reveal.in .pt-bad.b1 td { transition-delay: .5s; } .reveal.in .pt-bad.b2 td { transition-delay: .9s; } .reveal.in .pt-bad.b3 td { transition-delay: 1.3s; }
.pt-notes { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--rule); background: var(--card); }
.pt-tag { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 99px; background: var(--bad-bg); color: var(--bad); font: 600 11.5px/1 var(--font); font-style: normal; white-space: nowrap; }
th .pt-tag { margin-left: 6px; }
.js .pl-table .pt-tag { opacity: 0; transform: translateY(4px); transition: opacity .35s, transform .35s; }
.js .pl-table.in .pt-tag { opacity: 1; transform: none; }
.pl-table.in .t1 { transition-delay: .3s; } .pl-table.in .t2 { transition-delay: .6s; } .pl-table.in .t3 { transition-delay: 1s; } .pl-table.in .t4 { transition-delay: 1.4s; }

/* Paths not taken, drawn */
.pl-paths { padding: 20px 22px 18px; border-radius: 14px; background: var(--card); border: 1px solid var(--rule); box-shadow: var(--shadow); display: grid; gap: 8px; }
.pl-paths svg { width: 100%; height: auto; display: block; }
.pp-past { fill: none; stroke: var(--ink-3); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.pp-b { fill: none; stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 200; }
.pp-yours { stroke: var(--accent); }
.pp-alt { stroke: var(--bronze); stroke-dasharray: 6 6; }
.pp-none { stroke: var(--ink-3); stroke-dasharray: 3 6; opacity: .8; }
.pp-dot { fill: var(--accent); }
.js .pl-paths .pp-yours { stroke-dashoffset: 200; transition: stroke-dashoffset 1.2s .3s ease; }
.js .pl-paths.in .pp-yours { stroke-dashoffset: 0; }
.js .pl-paths .pp-alt, .js .pl-paths .pp-none { opacity: 0; transition: opacity .6s 1.1s; }
.js .pl-paths.in .pp-alt { opacity: 1; } .js .pl-paths.in .pp-none { opacity: .8; }
.pp-x { display: flex; justify-content: space-between; padding: 0 3% 0 5%; font-size: 11.5px; color: var(--ink-3); }
.pp-x b { font-weight: 500; }
.pp-key { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 12.5px; color: var(--ink-2); margin-top: 4px; }
.pp-key i { width: 18px; height: 3px; border-radius: 2px; margin-left: 6px; }
.pp-key i:first-child { margin-left: 0; }
.k-yours { background: var(--accent); } .k-alt { background: var(--bronze); } .k-none { background: var(--ink-3); }

/* What you finish with */
.pl-proof { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 16px; }
.pl-proof li { display: grid; gap: 2px; padding-left: 18px; border-left: 2px solid var(--rule-2); transition: border-color .2s; }
.pl-proof li:hover { border-color: var(--accent); }
.pl-proof b { font-size: 15.5px; } .pl-proof span { font-size: 15px; color: var(--ink-2); }
.pl-record { padding: 24px 26px; border-radius: 16px; background: var(--paper); border: 1px solid var(--rule); box-shadow: var(--shadow-lg); display: grid; gap: 12px; }
.pr-top { display: flex; align-items: center; gap: 12px; }
.pr-top > span:nth-child(2) { display: grid; flex: 1; } .pr-top small { color: var(--ink-3); font-size: 13px; }
.pr-av { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); font: 650 15px/1 var(--font); }
.pr-ver { padding: 5px 10px; border-radius: 99px; background: var(--good-bg); color: var(--good); font: 600 12.5px/1 var(--font); }
.pr-kick { font: 600 12px/1 var(--font); color: var(--bronze); }
.pr-head { font-size: 17px; line-height: 1.35; letter-spacing: -.01em; }
.pr-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pr-nums span { display: grid; padding: 10px 12px; border-radius: 10px; background: var(--card); border: 1px solid var(--rule); }
.pr-nums small { font-size: 11.5px; color: var(--ink-3); } .pr-nums b { font-size: 16px; }
.pr-hl { padding: 10px 12px; border-radius: 10px; background: var(--card); border: 1px solid var(--rule); font-size: 13.5px; color: var(--ink-2); }
.pr-skills { display: flex; flex-wrap: wrap; gap: 6px; }
.pr-skills i { font-style: normal; padding: 4px 10px; border-radius: 99px; background: var(--accent-bg); color: var(--accent-2); font-size: 12px; font-weight: 600; }

/* Price */
.pl-price { margin: 40px auto 0; max-width: 820px; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); border-radius: 16px; background: var(--card); border: 1px solid var(--rule); box-shadow: var(--shadow); overflow: hidden; }
.pp-main { padding: 28px 30px; display: grid; gap: 12px; justify-items: start; }
.pp-name { font: 650 15px/1 var(--font); color: var(--ink-2); }
.pp-amt { display: flex; align-items: baseline; gap: 12px; }
.pp-amt s { font-size: 20px; color: var(--ink-3); }
.pp-amt b { font: 700 44px/1 var(--font); letter-spacing: -.03em; }
.pp-main ul { list-style: none; margin: 6px 0 8px; padding: 0; display: grid; gap: 8px; }
.pp-main li { display: flex; gap: 10px; font-size: 15px; color: var(--ink-2); }
.pp-main li::before { content: "✓"; color: var(--good); font-weight: 700; }
.pp-side { padding: 28px 30px; background: var(--sunken); border-left: 1px solid var(--rule); display: grid; gap: 6px; align-content: start; }
.pp-side b { font-size: 15px; } .pp-side p { font-size: 14.5px; color: var(--ink-2); margin-bottom: 14px; }

/* FAQ */
.pl-faq-in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 56px; align-items: start; }
.pl-faq { display: grid; }
.pl-faq details { border-bottom: 1px solid var(--rule); }
.pl-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; padding: 18px 0; font-size: 16px; font-weight: 600; }
.pl-faq summary::-webkit-details-marker { display: none; }
.pl-faq summary::after { content: "+"; flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--sunken); color: var(--ink-2); font-weight: 500; transition: transform .2s; }
.pl-faq details[open] summary::after { transform: rotate(45deg); }
.pl-faq p { padding: 0 40px 18px 0; color: var(--ink-2); font-size: 15px; animation: rise .25s ease both; }

/* Join */
.pl-join { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 0; border-radius: 18px; overflow: hidden; border: 1px solid var(--rule); background: var(--card); box-shadow: var(--shadow); }
.pj-a { padding: 40px; display: grid; gap: 14px; align-content: center; justify-items: start; background: var(--accent-bg); }
.pj-a .pl-lede { margin: 0; }
.pj-b { padding: 40px; display: grid; gap: 8px; align-content: start; }
.pj-b > p { color: var(--ink-2); font-size: 15px; }
.pl-form { margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pl-form label { display: grid; gap: 5px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.pl-form .wide { grid-column: 1 / -1; }
.pl-form label.bad .input { border-color: var(--bad); }
.pl-msg { min-height: 20px; font-size: 14px; color: var(--ink-2); }
.pl-msg.ok { color: var(--good); } .pl-msg.bad { color: var(--bad); }

/* Footer */
.pl-foot { border-top: 1px solid var(--rule); }
.pl-foot-in { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; padding-top: 24px; padding-bottom: 32px; font-size: 14px; color: var(--ink-3); }
.pl-foot nav { display: flex; flex-wrap: wrap; gap: 18px; }
.pl-foot nav a { color: var(--ink-2); text-decoration: none; }
.pl-foot nav a:hover { color: var(--ink); }
.pl-theme { display: inline-flex; gap: 2px; padding: 3px; border-radius: 99px; border: 1px solid var(--rule); }
.pl-theme button { height: 26px; padding: 0 10px; border: 0; border-radius: 99px; background: none; color: var(--ink-3); font-size: 12.5px; }
.pl-theme button.on { background: var(--accent-bg); color: var(--accent-2); font-weight: 600; }

/* ── Narrower screens ── */
@media (max-width: 980px) {
  .pl-links { display: none; }
  .pl-hero-in, .pl-split, .pl-split.rev, .pl-faq-in, .pl-join, .pl-price { grid-template-columns: 1fr; }
  .pl-split.rev > :first-child { order: 2; }
  .pl-stage { max-width: 560px; width: 100%; }
  .pl-steps { grid-template-columns: 1fr 1fr; }
  .pp-side { border-left: 0; border-top: 1px solid var(--rule); }
}
@media (max-width: 600px) {
  .pl-wrap { padding: 0 16px; }
  .pl-nav-in { gap: 14px; }
  .pl-hero { padding: 32px 0 48px; }
  .pl-sub { font-size: 16.5px; }
  .pl-band { padding: 60px 0; }
  .pl-stage { height: 560px; }
  .st-msg { width: 100%; }
  .st-chart { top: 190px; left: 0; width: 100%; }
  .st-kpi { top: auto; bottom: 0; left: 0; right: auto; width: 36%; }
  .st-dec { top: auto; bottom: 0; width: 60%; }
  .pl-steps { grid-template-columns: 1fr; }
  .pl-form { grid-template-columns: 1fr; }
  .pj-a, .pj-b { padding: 26px 20px; }
  .pp-main, .pp-side { padding: 24px 20px; }
  .pl-record { padding: 20px; }
}

/* A field people never see; only scripts fill it in. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Start free: Google first, email beside it. */
.pj-b .pl-google { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 48px; border-radius: 10px; border: 1px solid var(--rule-2); background: var(--card); color: var(--ink); font-weight: 600; text-decoration: none; }
.pj-b .pl-google:hover { background: var(--sunken); }
.pj-b { display: grid; gap: 10px; align-content: center; }
.pj-b .pl-fine { margin: 2px 0 0; font-size: 13px; color: var(--ink-3); text-align: center; }