/* The trial page (mockups, 26 October 2026): a cream page in every theme, the pitch and the cash flow river on the
   left, the sign-up card on the right, three steps under both; on a phone the kicker, one headline, then the card.
   The card is sized to sit whole on a laptop screen: the form and its button show without scrolling.
   The colours are the mockup's: navy ink, deep teal, muted teal, sage, sand and gold. Keeps the shared navigation
   and footer markup intact; the shared tokens are pinned to the light values so the nav and footer match the page
   whatever the reader's theme. */
.trial-page { color-scheme:light;
  --bg:#f9f7f2; --bg2:#f1eee7; --bg3:#ffffff; --grouped:#f1eee7; --grouped2:#ffffff; --grouped3:#f1eee7;
  --label:#1b2430; --label2:#4a5560; --label3:#7a838c;
  --separator:#dcd8cf; --separator-opaque:#dcd8cf;
  --fill:rgba(60,70,80,.14); --fill2:rgba(60,70,80,.11); --fill3:rgba(60,70,80,.08); --fill4:rgba(60,70,80,.05);
  --accent:#2f6f69; --accent-2:#2f6f69; --on-accent:#ffffff; --mint:#e6efed; --mint-2:#cfe1dd;
  --link:#2f6f69; --link-line:rgba(47,111,105,.45); --focus:#2f6f69; --selection:#cfe1dd;
  --green:#2f6f69; --green-2:#4f8a8a; --green-soft:#e6efed; --slate:#7a838c; --slate-2:#b7bcc2; --sage:#eef1ec;
  --band:#1b2430; --band-label:#ffffff;
  --bar-bg:rgba(249,247,242,.9); --bar-solid:#f9f7f2; --bar-shadow:0 0 0 1px #dcd8cf;
  --pop-shadow:0 20px 60px rgba(27,36,48,.14); --card-shadow:none; --lift-shadow:0 1px 2px rgba(27,36,48,.04);
  --field-border:#d3cfc6; --logo-plate:#ffffff;
  --ink:#1b2430; --teal:#2f6f69; --gold:#c4a46a; --card:#fdfcfa; --edge:#e2dfd7;
  --rv-in:#2f6f69; --rv-liv:#a9c2c3; --rv-liv-2:#4f8a8a; --rv-pro:#b9cbb6; --rv-pro-2:#6f9a86; --rv-sav:#d6c49c; --rv-sav-2:#b89f66; --rv-line:#d3cfc6; }
html:has(body.trial-page) { background:#f9f7f2; color-scheme:light; }
body.trial-page { background:var(--bg); color:var(--label); }
/* the dark logo on the light bar whatever the reader's theme (site.css swaps to the white one on a dark phone) */
.trial-page #topbar .bar .logo .lt { display:none !important; }
.trial-page #topbar .bar .logo .dk { display:block !important; }

/* a faint teal light behind the card gives the cream page depth without a hard shape (taste-skill, 26 October 2026) */
.trial { padding:96px 0 40px; background:radial-gradient(55% 45% at 78% 14%, rgba(47,111,105,.07), transparent 70%); }
.trial .hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,500px); grid-template-areas:"pitch form" "glance form"; gap:28px 48px; align-items:start; }
.trial .pitch { grid-area:pitch; min-width:0; padding-top:12px; }
.trial .glance { grid-area:glance; min-width:0; }
.trial .signup { grid-area:form; }
.trial .m { display:none; }

.trial .kicker { margin:0; font:600 .75rem/1.4 var(--body); letter-spacing:.2em; text-transform:uppercase; color:var(--teal); }
.trial .pitch h1 { margin-top:14px; font:500 clamp(2.25rem,4.2vw,3.75rem)/1.04 var(--serif); letter-spacing:-.025em; color:var(--ink); }
.trial .pitch .lead { margin-top:18px; max-width:38ch; font-size:clamp(1.0625rem,1.3vw,1.3125rem); line-height:1.45; color:var(--label2); }

/* the river: one income bar, three bands to what the month goes to; drawn to scale and stretched to the width */
.river { margin:0; padding-top:16px; border-top:1px solid var(--separator); }
.river-head { display:flex; justify-content:space-between; align-items:baseline; gap:16px; }
.river-head .note { font-size:var(--t-subhead); color:var(--label2); }
.river-body { display:grid; grid-template-columns:auto minmax(0,1fr) 140px; gap:0 14px; align-items:center; margin-top:10px; padding:6px 0; }
.river-in { display:grid; align-content:center; gap:2px; }
.river-in span { font-size:var(--t-subhead); color:var(--label2); }
.river-in b { font:500 2rem/1.1 var(--serif); letter-spacing:-.02em; color:var(--ink); font-variant-numeric:tabular-nums; }
.river-svg { display:block; width:100%; height:220px; overflow:visible; }
.river-svg .in { fill:var(--rv-in); }
.river-svg .liv { fill:var(--rv-liv); }
.river-svg .pro { fill:var(--rv-pro); }
.river-svg .sav { fill:var(--rv-sav); }
.river-svg .liv2 { fill:var(--rv-liv-2); }
.river-svg .pro2 { fill:var(--rv-pro-2); }
.river-svg .sav2 { fill:var(--rv-sav-2); }
.river-svg .guide { stroke:var(--rv-line); stroke-width:1; vector-effect:non-scaling-stroke; }
.river-out { position:relative; height:220px; margin:0; padding:0; list-style:none; }
.river-out li { position:absolute; left:0; right:0; top:var(--y); transform:translateY(-50%); }
.river-out span { display:block; font-size:var(--t-subhead); line-height:1.25; font-weight:var(--w-em); color:var(--ink); }
.river-out b { display:block; margin-top:2px; font-size:var(--t-subhead); font-weight:var(--w-small); color:var(--label2); font-variant-numeric:tabular-nums; }
.river figcaption { margin-top:10px; padding-top:10px; border-top:1px solid var(--separator); font-size:var(--t-subhead); color:var(--label2); }

/* the card: compact, so the whole form sits on the first screen */
.signup { scroll-margin-top:96px; min-width:0; padding:22px 26px 20px; border:1px solid var(--edge); border-radius:8px; background:var(--card); box-shadow:var(--lift-shadow); }
.signup h2, .signup .thanks h1 { margin-top:8px; font:500 clamp(1.75rem,2.3vw,2.125rem)/1.1 var(--serif); letter-spacing:-.02em; color:var(--ink); }
.signup .sub { margin-top:6px; font-size:1rem; color:var(--label2); }
.signup form { display:grid; gap:11px; margin-top:14px; }
.signup label { display:block; margin-bottom:5px; font:500 .875rem/1.35 var(--body); color:var(--ink); }
.signup input, .signup select { width:100%; min-height:40px; padding:8px 12px; border:1px solid var(--field-border); border-radius:5px; background:#ffffff; color:var(--ink); font:450 .9375rem/1.35 var(--body); }
.signup input::placeholder { color:var(--label3); opacity:1; }
.signup select { padding-right:40px; appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b2430' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>"); background-repeat:no-repeat; background-position:right 12px center; background-size:16px; }
/* a field takes focus with a teal edge and a soft halo instead of a hard outline; the keyboard ring stays on everything else */
.signup input, .signup select { transition:border-color .2s var(--ease), box-shadow .25s var(--ease); }
.signup input:focus, .signup select:focus { outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(47,111,105,.2); }
.signup :focus-visible { outline:2px solid var(--teal); outline-offset:3px; }
.signup input:focus-visible, .signup select:focus-visible { outline:none; }
.signup [aria-invalid="true"] { border:2px solid #c0392b; }
.signup .err { display:flex; gap:6px; margin-top:6px; color:#a93226; font-size:var(--t-footnote); line-height:1.4; }
.signup .err[hidden] { display:none; }
.signup .err .i { flex:none; width:1.1em; height:1.1em; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; }
.signup button { display:inline-flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:46px; margin-top:4px; padding:10px 18px; border:0; border-radius:6px; color:#ffffff; background:var(--teal); font:500 1.0625rem/1.4 var(--body); cursor:pointer;
  transition:filter .2s var(--ease), transform .25s var(--ease); }
/* the arrow sits in its own circle at the button's right edge and moves out a little on hover (taste-skill's button in a button) */
.signup button .ic { display:inline-grid; place-items:center; flex:none; width:1.75em; height:1.75em; margin:-.45em -.5em -.45em 0; border-radius:999px; background:rgba(255,255,255,.16); transition:transform .3s var(--ease); }
.signup button .ic svg { width:1em; height:1em; stroke:currentColor; fill:none; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.signup button:hover { filter:brightness(1.08); }
.signup button:hover .ic { transform:translateX(2px); }
.signup button:active { transform:scale(.985); }
.signup button:disabled { opacity:.65; cursor:wait; transform:none; }
.signup .note { font-size:var(--t-footnote); line-height:1.45; color:var(--label2); overflow-wrap:anywhere; }
.signup a { color:var(--teal); text-decoration:underline; text-underline-offset:3px; }
.signup .after { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-top:14px; padding-top:12px; border-top:1px solid var(--separator); font-size:var(--t-footnote); line-height:1.45; }
.signup .after b { display:block; margin-bottom:2px; font-weight:var(--w-em); color:var(--ink); }
.signup .after .r { text-align:right; color:var(--label2); }
.signup .after .r a { display:block; margin-top:2px; }
.signup .thanks p { margin-top:14px; color:var(--label2); }
.trial .hero.solo { grid-template-columns:minmax(0,560px); grid-template-areas:"form"; justify-content:center; }
.hp { position:absolute; left:-9999px; }

/* the three steps */
.steps { margin-top:28px; }
.steps ol { list-style:none; margin:0; padding:22px 0; border-top:1px solid var(--separator); border-bottom:1px solid var(--separator); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; }
.steps li { display:grid; grid-template-columns:auto minmax(0,1fr); gap:20px; align-items:start; padding:0 20px; }
.steps .n { padding:4px 20px 4px 0; border-right:1px solid var(--separator); font:500 2.5rem/1 var(--serif); color:var(--gold); font-variant-numeric:tabular-nums; }
.steps h3 { padding-top:2px; font:500 1.1875rem/1.3 var(--serif); color:var(--ink); }
.steps p { margin-top:4px; font-size:var(--t-subhead); line-height:1.45; color:var(--label2); }

/* a narrower window (the desktop app's pane, a small laptop): a narrower card, so the river keeps its width */
@media (max-width:1180px) and (min-width:901px) {
  .trial .hero { grid-template-columns:minmax(0,1fr) minmax(0,420px); gap:24px 32px; }
  .trial .pitch h1 { font-size:clamp(2.1rem,3.9vw,3.1rem); }
  .signup { padding:20px 22px 18px; }
  .river-body { grid-template-columns:auto minmax(0,1fr) 118px; gap:0 12px; }
  .river-in b { font-size:1.6rem; }
  .river-out span, .river-out b { font-size:var(--t-footnote); }
  .steps li { padding:0 6px; gap:14px; }
  .steps .n { font-size:2.1rem; padding-right:14px; }
}
/* a short screen (a laptop at 125% or 150%): tighter still, so the button stays above the fold */
@media (min-width:901px) and (max-height:760px) {
  .trial { padding-top:88px; }
  .trial .pitch { padding-top:4px; }
  .signup { padding:16px 22px 16px; }
  .signup h2 { margin-top:6px; font-size:1.625rem; }
  .signup .sub { margin-top:4px; font-size:.9375rem; }
  .signup form { gap:8px; margin-top:10px; }
  .signup label { margin-bottom:4px; font-size:.8125rem; }
  .signup input, .signup select { min-height:36px; padding:6px 12px; font-size:.9rem; }
  .signup button { min-height:42px; }
}

/* a phone or tablet: the kicker, one headline, then the card; the river and the steps after it */
@media (max-width:900px) {
  .trial { padding:92px 0 32px; }
  .trial .hero { grid-template-columns:minmax(0,1fr); grid-template-areas:"pitch" "form" "glance"; gap:18px; max-width:620px; }
  .trial .d { display:none; }
  .trial .m { display:inline; }
  .trial .pitch { padding-top:0; }
  .trial .kicker { font-size:.6875rem; }
  .trial .pitch h1 { margin-top:6px; font-size:1.5rem; line-height:1.15; }
  .trial .pitch h1 br { display:none; }
  .trial .pitch .lead { display:none; }
  .signup { padding:18px 16px 16px; }
  .signup h2 { margin-top:6px; font-size:1.5rem; }
  .signup .sub { font-size:.9375rem; }
  .signup form { gap:10px; margin-top:12px; }
  .signup .after { flex-direction:column; align-items:stretch; gap:10px; }
  .signup .after .r { text-align:left; }
  .river { padding-top:12px; }
  .river-head .note { font-size:var(--t-footnote); }
  .river-body { grid-template-columns:auto minmax(0,1fr) 88px; gap:0 10px; margin-top:8px; }
  .river-in { max-width:5.5rem; }
  .river-in span { font-size:var(--t-footnote); line-height:1.25; }
  .river-in b { font-size:1.4rem; }
  .river-svg, .river-out { height:180px; }
  .river-out span, .river-out b { font-size:var(--t-footnote); }
  .river-out b { margin-top:1px; }
  .river figcaption { font-size:var(--t-footnote); }
  .steps { margin-top:20px; }
  .steps ol { grid-template-columns:minmax(0,1fr); gap:0; padding:0; border-bottom:0; }
  .steps li { padding:12px 0; gap:14px; border-bottom:1px solid var(--separator); }
  .steps .n { font-size:1.75rem; padding:2px 14px 2px 0; }
  .steps h3 { font-size:1rem; }
  .steps p { font-size:var(--t-footnote); }
}
@media (forced-colors:active) { .signup button, .signup input, .signup select { border:1px solid ButtonText; } }