/* Pedal: precise controls and a calculation receipt, not a promotional landing page. */
:root {
  --motion-press: 120ms;
  --motion-state: 180ms;
  --ease-settle: cubic-bezier(.16, 1, .3, 1);
  --elevation: 0 8px 28px rgba(24,57,75,.055);
}
:root[data-theme=dark] { --elevation: 0 8px 28px rgba(0,0,0,.13); }
h1,h2,h3 { text-wrap:balance; }
.header { height:80px; }
.header nav { gap:12px; }
.header nav button {
  position:relative; border-radius:0; padding:17px 10px; background:none;
  transition:color var(--motion-state) ease-out;
}
.header nav button[aria-pressed=true] { background:none; }
.header nav button::after {
  content:""; position:absolute; left:10px; right:10px; bottom:7px;
  height:2px; background:var(--amber); transform:scaleX(0); transform-origin:left;
  transition:transform 220ms var(--ease-settle);
}
.header nav button[aria-pressed=true]::after { transform:scaleX(1); }
.header .settings-link { border:1px solid #416170; padding:9px 15px; }
.header-utilities { display:flex; align-items:center; gap:8px; margin-left:auto; flex-shrink:0; }
.header .header-utilities .settings-link { margin-left:0; min-height:48px; min-width:48px; }
.header .account-link { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:10px 12px; border-radius:8px; color:#fff; font-size:.9375rem; font-weight:600; text-decoration:none; white-space:nowrap; }
.header .account-link:focus-visible,.header .settings-link:focus-visible { outline-color:var(--amber); }
main { padding-top:38px; }
h1 { font-size:36px; line-height:1.24; letter-spacing:-.035em; }
.page-title { margin-bottom:30px; }
.page-title p { margin-top:13px; }
.date-block { padding-right:2px; gap:5px; }
.rate-strip { padding:23px 26px; border-radius:12px; }
.rate-item>strong { margin:9px 0 5px; }
.rate-item small { font-size:13px; line-height:1.4; }
.rate-name { font-size:14px; }
.auto-refresh { gap:5px; }
.auto-dot { margin-bottom:5px; }
.input-panel { padding:30px 32px; }
.panel-heading { margin-bottom:27px; padding-bottom:20px; border-bottom:1px solid var(--line); }
.amount-field { padding:17px 19px; border-color:var(--control); }
.amount-field>span { border-left:1px solid var(--line); padding-left:16px; }
.quick { gap:10px; }
.quick button { min-height:44px; border-radius:7px; }
.quick button[aria-pressed=true] { box-shadow:inset 0 -2px var(--teal); }
.bank-label { margin-top:28px; }
.bank-rule { font-size:13px; line-height:1.5; }
.platform-row .platform-fee { font-family:var(--display); font-size:19px; color:var(--teal); white-space:nowrap; }
.small-note { font-size:13px; line-height:1.55; }
.manual-settings summary,.breakdown summary { min-height:44px; align-content:center; }
.manual-grid input,#manualFee { font-size:16px; min-height:44px; }
.receipt { position:relative; padding:30px 32px 25px; }
.receipt-head { padding-bottom:20px; margin-bottom:9px; border-bottom:1px dashed #608680; }
.receipt-head>span { letter-spacing:.01em; }
.journey { --step-size:29px; --step-padding:20px; --connector-gap:8px; }
.journey li { display:grid; grid-template-columns:var(--step-size) minmax(0,1fr); align-items:start; padding:var(--step-padding) 0; gap:18px; }
.journey li:not(:last-child)::before {
  top:calc(var(--step-padding) + var(--step-size) + var(--connector-gap));
  bottom:calc(var(--connector-gap) - var(--step-padding));
  left:calc((var(--step-size) - 1px) / 2);
}
.journey li>div { min-width:0; }
.journey li>div>span { display:block; line-height:var(--step-size); }
.step { position:relative; width:var(--step-size); height:var(--step-size); margin-top:0; background:var(--receipt); }
.route-trace {
  position:absolute; inset:-4px; border:1px solid var(--amber); border-radius:50%;
  pointer-events:none; opacity:0;
}
.journey strong { margin:5px 0; }
.journey small { font-size:13px; line-height:1.5; }
.profit { margin-top:10px; padding-top:24px; }
.profit>strong { font-size:39px; margin-top:9px; }
.equilibrium { font-size:13px; margin-top:23px; padding:16px 0; }
.receipt-note {
  position:relative; margin-top:24px; padding-top:20px;
  border-top:1px dashed #608680; font-size:12px;
}
.receipt-note::before,.receipt-note::after {
  content:""; width:14px; height:14px; border-radius:50%; background:var(--bg);
  position:absolute; top:-7px; pointer-events:none;
}
.receipt-note::before { left:-39px; }
.receipt-note::after { right:-39px; }
.empty-result { min-height:390px; }
.light-button,.secondary { min-height:46px; }
.light-button { display:inline-flex; align-items:center; justify-content:center; gap:9px; }
button { transition:transform var(--motion-press) var(--ease-settle),background-color var(--motion-state) ease-out,color var(--motion-state) ease-out; }
button:hover:not(:disabled) { filter:none; }
button:active:not(:disabled) { transform:scale(.985); }
.header nav button:active { transform:none; }
@media(hover:hover) {
  .quick button:hover,.secondary:hover { background:var(--selected); border-color:var(--teal); }
  .light-button:hover { background:#d6e8dd; }
  .header nav button:hover { color:#fff; }
  .header .settings-link:hover { background:#2b4d5d; }
  .header .account-link:hover { background:#2b4d5d; text-decoration:underline; }
  .text-button:hover { text-decoration:underline; text-underline-offset:4px; }
  td button:hover { background:var(--teal); color:var(--paper); }
}
th { padding-top:18px; padding-bottom:18px; }
td { padding-top:20px; padding-bottom:20px; }
td button { min-height:44px; min-width:64px; }
tr.selected td:first-child::before {
  content:""; display:inline-block; width:6px; height:6px;
  border-radius:50%; background:var(--teal); margin-right:9px; vertical-align:middle;
}
/* Keep one accessible table: compact windows reflow its rows, not its data. */
.bank-comparison th.comparison-bank { min-width:0; max-width:240px; background:transparent; color:var(--ink); font-size:.9375rem; font-weight:600; white-space:normal; border-top:1px solid var(--line); padding:20px 18px; }
.comparison-bank .sub { display:block; margin-top:3px; color:var(--muted); font-size:.8125rem; font-weight:400; }
.comparison-label { display:none; }
.comparison-value { font-variant-numeric:tabular-nums; }
.bank-comparison .comparison-action button { min-height:48px; font-size:.875rem; white-space:normal; }
.bank-comparison .comparison-action button[aria-pressed=true] { border:1px solid var(--teal); }
.bank-comparison { overflow:visible; }
.bank-comparison table { table-layout:fixed; }
.bank-comparison th,.bank-comparison td { overflow-wrap:anywhere; white-space:normal; }
.bank-comparison thead th:first-child { width:24%; }
.bank-comparison thead th:last-child { width:16%; }
.settings-panel,.membership-panel { padding:32px; }
.settings-panel>h3,.membership-heading { padding-bottom:18px; border-bottom:1px solid var(--line); }
.membership-heading { border-bottom-color:#608680; }
.theme-swatch { height:64px; }
.theme-choice:has(input:checked)::after {
  content:""; position:absolute; top:15px; right:16px; width:5px; height:9px;
  border:solid #f8fcfa; border-width:0 2px 2px 0; transform:rotate(45deg);
}
.membership-panel { border-radius:14px 14px 4px 4px; }
.plan-price strong { font-size:40px; }
.under-calculator { margin-top:24px; }
footer { margin-top:44px; padding-bottom:max(27px,env(safe-area-inset-bottom)); }
@media(max-width:1250px) {
  .header { gap:24px; }
  .header nav { gap:8px; }
  .input-panel,.receipt { padding:26px; }
  .receipt-note::before { left:-33px; }
  .receipt-note::after { right:-33px; }
}
@media(max-width:850px) {
  h1 { font-size:32px; }
  .header { gap:16px; }
  .header nav { gap:0; }
  .header nav button { padding:15px 8px; }
  .header .settings-link { padding:9px 11px; }
  .input-panel,.receipt { padding:24px; }
  .panel-heading { align-items:start; flex-direction:column; gap:7px; }
  .receipt-note::before { left:-31px; }
  .receipt-note::after { right:-31px; }
  .profit>strong { font-size:32px; }
  .rate-strip { padding:20px; }
  .settings-panel,.membership-panel { padding:26px; }
}
@media(max-width:1020px) {
  .header { display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"brand utilities" "navigation navigation"; height:auto; padding-top:12px; padding-bottom:0; column-gap:8px; row-gap:8px; }
  .header .brand { grid-area:brand; width:max-content; }
  .header .header-utilities { grid-area:utilities; }
  .header nav[aria-label] { grid-area:navigation; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); width:100%; border-top:1px solid #416170; gap:8px; }
  .header nav[aria-label] button { min-width:0; min-height:48px; white-space:normal; font-size:.875rem; line-height:1.35; }
}
@media(max-width:760px) {
  .bank-comparison { border:0; border-radius:0; background:transparent; }
  .bank-comparison table,.bank-comparison tbody { display:block; width:100%; }
  .bank-comparison thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .bank-comparison tbody { display:grid; gap:16px; }
  .bank-comparison tbody tr { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:18px; gap:18px 16px; }
  .bank-comparison tbody tr.selected { background:var(--selected); border-color:var(--teal); }
  .bank-comparison th.comparison-bank { grid-column:1/-1; min-width:0; max-width:none; padding:0 0 14px; border-top:0; border-bottom:1px solid var(--line); font-size:1.0625rem; }
  .bank-comparison td { display:block; min-width:0; padding:0; border:0; }
  .bank-comparison .comparison-label { display:block; margin-bottom:5px; color:var(--muted); font-size:.875rem; line-height:1.4; }
  .bank-comparison .comparison-value { display:block; font-size:1.125rem; font-weight:600; line-height:1.45; overflow-wrap:anywhere; }
  .bank-comparison .comparison-action { grid-column:1/-1; }
  .bank-comparison .comparison-action button { width:100%; background:var(--soft); border:1px solid var(--control); border-radius:7px; }
  .bank-comparison .comparison-action button[aria-pressed=true] { background:var(--selected); border-color:var(--teal); }
}
@media(max-width:640px) {
  .header { height:auto; padding:14px max(18px,env(safe-area-inset-right)) 0 max(18px,env(safe-area-inset-left)); gap:10px; }
  .header nav { padding-top:0; }
  .header nav button { padding:15px 6px 17px; font-size:14px; min-height:48px; }
  .header nav button::after { bottom:6px; left:6px; right:6px; }
  .header .settings-link { min-height:44px; }
  main { padding-top:27px; margin-left:max(18px,env(safe-area-inset-left)); margin-right:max(18px,env(safe-area-inset-right)); }
  h1 { font-size:27px; line-height:1.28; }
  .page-title { margin-bottom:24px; }
  .page-title p { font-size:16px; }
  .rate-strip { padding:16px; gap:16px 12px; }
  .rate-item>strong { font-size:19px; }
  .rate-item small { font-size:12px; }
  .rate-name { font-size:13px; }
  .input-panel,.receipt { padding:23px; }
  .panel-heading { flex-direction:row; align-items:center; padding-bottom:18px; margin-bottom:23px; }
  .amount-field { padding:16px; }
  .quick { gap:7px; }
  .receipt-head { flex-direction:column; align-items:start; gap:7px; }
  .receipt-head h2 { font-size:19px; }
  .receipt-head>span { font-size:12px; }
  .receipt-note::before { left:-30px; }
  .receipt-note::after { right:-30px; }
  .journey strong { font-size:24px; overflow-wrap:anywhere; }
  .profit>strong { font-size:32px; overflow-wrap:anywhere; }
  .equilibrium { flex-wrap:wrap; gap:7px; font-size:12px; }
  .empty-result { min-height:300px; }
  .settings-panel,.membership-panel { padding:23px; }
  .theme-swatch { height:55px; }
  .plan-price strong { font-size:35px; }
}
@media(max-width:360px) {
  .header nav button { padding-inline:4px; font-size:13px; min-width:0; }
  .header nav button::after { left:4px; right:4px; }
  .panel-heading { flex-direction:column; align-items:start; }
  .theme-options { gap:6px; }
  .theme-choice { font-size:12px; }
}
@media(max-width:420px) {
  .header nav[aria-label] { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .header nav[aria-label] button { padding:12px 8px; }
  .header nav[aria-label] .nav-plus { display:inline; margin-left:4px; font-size:.8125rem; }
  .header .header-utilities { gap:8px; }
  .header .header-utilities .settings-link { padding:10px; }
  .header .header-utilities .settings-link>span { display:none; }
  .header .account-link { padding-inline:8px; font-size:.875rem; }
  .bank-comparison tbody tr { padding:16px; column-gap:12px; }
}
@media(prefers-reduced-motion:reduce) {
  button,.header nav button::after { transition:none; }
  button:active:not(:disabled) { transform:none; }
}
:root[data-motion=reduce] button:active { transform:none; }
/* Both panel headings share a title/subtitle rhythm at every breakpoint. */
.workspace .panel-heading,.workspace .receipt-head {
  flex-direction:column; align-items:flex-start; gap:6px; padding-bottom:20px;
}
.workspace .panel-heading h2,.workspace .receipt-head h2 { font-size:20px; line-height:1.45; }
.workspace .quiet-badge,.workspace .receipt-head>span { font-size:12px; line-height:1.45; }
.workspace .panel-heading { margin-bottom:24px; }
.workspace .receipt-head { margin-bottom:0; }
@media(min-width:641px) and (max-width:960px) {
  .workspace .panel-heading h2,.workspace .receipt-head h2 { min-height:2.9em; }
}