/* Fee calculators. Built from the site's own parts: the poster subhero, "the short version"
   key points, editorial headings, the orange band index, ruled tables and article sources. */

:root {--fee-ease-out:cubic-bezier(0.23,1,0.32,1)}

/* Opening: headline and dek beside the rate summary. */
.fee-hero .breadcrumbs {margin-bottom:1.5rem}
.fee-hero__grid {display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,4rem);align-items:end}
.fee-hero__copy {min-width:0}
.fee-hero h1 {font-size:clamp(3rem,1.6rem + 4.4vw,6rem)}
.fee-hero .intro {margin-bottom:0}
.fee-hero .subhero__meta a {color:inherit}
.fee-hero--hub h1 {max-width:12ch}
.fee-hero--hub .subhero__meta {margin-top:1.5rem}
.fee-brief {margin:0}
.fee-brief ul {font-size:1.0625rem}
.fee-brief li {margin-bottom:.6rem}

/* Calculator navigation follows the masthead topic strip. */
.fee-page {padding-bottom:clamp(2.75rem,5vw,4.5rem)}
.fee-tool-nav {display:flex;flex-wrap:wrap;align-items:center;gap:0 1.75rem;border-bottom:1px solid var(--line);margin-bottom:2rem}
.fee-tool-nav__label {font:700 var(--type-label)/1 var(--ui);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-right:.25rem}
.fee-tool-nav a {display:inline-flex;align-items:center;min-height:50px;margin-bottom:-1px;border-bottom:3px solid transparent;color:var(--text-2);font:700 var(--type-label)/1 var(--ui);letter-spacing:.09em;text-transform:uppercase;text-decoration:none;transition:color .15s,border-color .15s}
.fee-tool-nav a:hover {color:var(--ink);border-bottom-color:var(--line)}
.fee-tool-nav a[aria-current=page] {color:var(--ink);border-bottom-color:var(--orange)}

/* Workspace: inputs on a panel, the answer set large beside it. */
.fee-workspace {display:grid;grid-template-columns:minmax(280px,.8fr) minmax(0,1.6fr);gap:clamp(1.5rem,3.5vw,3.5rem);align-items:start}
.fee-inputs {padding:1.5rem;background:var(--panel);border-top:3px solid var(--orange);border-radius:0 0 var(--radius) var(--radius)}
.fee-inputs fieldset {padding:0;margin:0;border:0;min-width:0}
.fee-inputs legend {padding:0;font:800 var(--type-card)/1.05 var(--display);letter-spacing:-.01em;margin-bottom:.5rem}
.fee-inputs legend + .muted {margin-bottom:1.25rem}
.fee-inputs .field {margin-bottom:1.1rem}
.fee-inputs .field :is(input,select):user-invalid {border-color:var(--con);outline-color:var(--con)}
.fee-inputs .field input {font-variant-numeric:tabular-nums lining-nums}
.fee-inputs small,.fee-hint {display:block;font:400 var(--type-caption)/1.45 var(--ui);color:var(--muted);margin:.45rem 0 0}
.fee-field-pair {display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.fee-field-pair .field {margin-bottom:0}
.fee-field-pair + .fee-hint {margin:.45rem 0 1.25rem}
.fee-options {margin:1.25rem 0;padding:.25rem 0 0;border-top:1px solid var(--line);border-bottom:0}
.fee-options summary,.fee-notes summary {list-style:none;justify-content:space-between;gap:1rem}
.fee-options summary::-webkit-details-marker,.fee-notes summary::-webkit-details-marker {display:none}
.fee-options summary::after,.fee-notes summary::after {content:'+';font:400 1.25rem/1 var(--ui);color:var(--accent)}
:is(.fee-options,.fee-notes)[open] summary::after {content:'\2212'}
.fee-options summary {display:flex;align-items:center;min-height:48px;font:700 var(--type-ui)/1.3 var(--ui)}
.fee-options[open] summary {margin-bottom:.5rem}
.fee-options .fee-hint {margin:0 0 1.1rem}
.fee-form-actions {display:flex;gap:1.25rem;align-items:center;flex-wrap:wrap;margin-top:1rem}
.fee-form-actions .button {margin:0}
.fee-text-button {min-height:44px;padding:.5rem 0;background:none;border:0;color:var(--ink);font:600 var(--type-ui)/1.3 var(--ui);text-decoration:underline;text-decoration-color:var(--field-line);text-decoration-thickness:from-font;text-underline-offset:.25em;transition:opacity .1s ease-out}
.fee-text-button:active:not(:disabled) {opacity:.6}
.fee-text-button:hover:not(:disabled) {color:var(--accent);text-decoration-color:var(--accent)}
.fee-text-button:disabled {opacity:.45;cursor:default}
.fee-privacy {margin:1.25rem 0 0;padding-top:1rem;border-top:1px solid var(--line);font:400 var(--type-caption)/1.5 var(--ui);color:var(--muted)}

.fee-output {min-width:0;scroll-margin-top:1rem}
[data-fee-result] {transition:opacity .15s ease-out}
.fee-output[aria-busy=true] [data-fee-result] {opacity:.45}
.fee-output-header {display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.fee-output-header .eyebrow {margin:0}
.fee-export {display:flex;gap:1.25rem}
.fee-metrics {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;margin:.75rem 0 1.5rem;padding:1.25rem 0 1.5rem;border-top:3px solid var(--ink);border-bottom:1px solid var(--line)}
.fee-metric {min-width:0}
.fee-metric dt {font:600 var(--type-caption)/1.4 var(--ui);color:var(--muted);margin-bottom:.4rem}
.fee-metric dd {margin:0;font:800 clamp(2rem,1.4rem + 1.8vw,3.25rem)/1 var(--display);letter-spacing:-.015em;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.fee-metric dd[data-text] {font-variant-numeric:normal;white-space:normal;text-wrap:balance}
/* Cents are detail: same size so digits stay aligned, lighter so the dollars lead. */
.fee-cents {opacity:.55}
.fee-metric:first-child dd {color:var(--accent)}
.fee-breakdown {margin:0 0 1.5rem}
.fee-breakdown>div {display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.75rem 0;border-bottom:1px solid var(--line)}
.fee-breakdown dt {font:400 var(--type-ui)/1.4 var(--ui);color:var(--text-2)}
.fee-breakdown dd {margin:0;font:600 var(--type-ui)/1.4 var(--ui);font-variant-numeric:tabular-nums}
.fee-breakdown .fee-breakdown__total {border-top:2px solid var(--ink)}
.fee-breakdown .fee-breakdown__total :is(dt,dd) {color:var(--ink);font-weight:700}
.fee-break-even {margin:0 0 1.5rem;padding:1.25rem 0;border-bottom:1px solid var(--line)}
.fee-break-even h3 {font-size:var(--type-card-small);margin-bottom:.75rem}
.fee-break-even ul {list-style:none;margin:0 0 .75rem;padding:0;font:400 1.125rem/1.5 var(--serif)}
.fee-break-even li {margin-bottom:.4rem}
.fee-break-even strong {font-family:var(--ui);font-weight:700;margin-right:.35rem}
.fee-notes {border:0;padding:0;margin:0 0 1rem}
.fee-notes summary {display:inline-flex;align-items:center;min-height:44px;font:700 var(--type-label)/1.4 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.fee-notes ul {margin:.25rem 0 0;padding-left:1.15rem;font:400 var(--type-caption)/1.6 var(--ui);color:var(--muted)}
.fee-notes li {margin-bottom:.4rem}
.fee-context,.fee-callout,.fee-stale {margin:1rem 0 0;padding-left:1rem;border-left:2px solid var(--orange);font:400 var(--type-caption)/1.55 var(--ui);color:var(--text-2);max-width:68ch}
.fee-callout,.fee-stale {margin:0 0 1rem}
.fee-checked {margin:.75rem 0 0;font:400 var(--type-label)/1.5 var(--ui);color:var(--muted)}
.fee-error {margin:1rem 0;padding:1rem;border:1px solid var(--con);border-radius:var(--radius);color:var(--con);font:600 var(--type-ui)/1.5 var(--ui)}

/* Tables: ruled, figures aligned, the cheapest called out. */
.fee-table-scroll {overflow-x:auto;margin-bottom:1rem;border-top:3px solid var(--ink)}
.fee-table {width:100%;border-collapse:collapse;font:400 var(--type-ui)/1.4 var(--ui);font-variant-numeric:tabular-nums lining-nums}
.fee-table caption {font-variant-numeric:tabular-nums;caption-side:top;text-align:left;padding:.85rem 0;font:600 var(--type-caption)/1.4 var(--ui);color:var(--muted)}
.fee-table th,.fee-table td {padding:.8rem .75rem;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
.fee-table thead th {font:700 var(--type-label)/1.3 var(--ui);letter-spacing:.07em;text-transform:uppercase;color:var(--muted);vertical-align:bottom}
.fee-table :is(th,td):first-child {text-align:left;padding-left:0}
.fee-table :is(th,td):last-child {padding-right:0}
.fee-table tbody th {font-weight:700;white-space:normal}
.fee-table tbody th a {text-decoration:none}
.fee-table tbody th a:hover {text-decoration:underline}
.fee-table .fee-total {font-weight:700}
.fee-table .fee-best {background:var(--panel)}
.fee-table .fee-best :is(th,td):first-child {padding-left:.75rem}
.fee-table .fee-best .fee-total {color:var(--accent)}
.fee-badge {display:inline-block;white-space:nowrap;margin-left:.4rem;padding:.15rem .45rem;border-radius:3px;background:var(--orange);color:var(--button-ink);font:700 .6875rem/1.2 var(--ui);letter-spacing:.06em;text-transform:uppercase;vertical-align:.1em}
.fee-table-scroll:has(.fee-table--glance,.fee-table--examples) {margin-bottom:.75rem}
.fee-table-scroll:has(.fee-table--examples) {max-width:880px}
.fee-output .fee-table-scroll {border-top:0}
.fee-table--examples td {font-weight:600}
.fee-share {display:block;font:400 var(--type-label)/1.3 var(--ui);color:var(--muted);margin-top:.15rem}
.fee-table .fee-lowest {color:var(--accent);font-weight:800}
.fee-table--glance :is(th,td) {text-align:left;white-space:normal;min-width:8rem}

/* Content sections under the calculator. */
.fee-section {padding-bottom:clamp(2.75rem,5vw,4.5rem)}
.fee-section-intro {font:400 var(--type-intro)/1.45 var(--serif);color:var(--text-2);max-width:60ch;margin:0 0 1.5rem}
.fee-faq__grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(2rem,4vw,3.5rem)}
.fee-faq__item {padding:1.25rem 0 1.5rem;border-top:1px solid var(--line)}
.fee-faq__item h3 {font-size:var(--type-card-small);line-height:1.12;letter-spacing:-.005em;margin-bottom:.6rem;text-wrap:balance}
.fee-faq__item p {font:400 1.125rem/1.55 var(--serif);color:var(--text-2);max-width:60ch}
.fee-method {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2rem,4vw,3.5rem);padding-top:1.5rem;border-top:3px solid var(--ink)}
.fee-method h2 {font-size:var(--type-card);margin-bottom:.85rem}
.fee-method p {font:400 1.125rem/1.6 var(--serif);color:var(--text-2);max-width:60ch}
.fee-method ul {margin:0;padding-left:1.15rem;font:400 1.0625rem/1.55 var(--serif);color:var(--text-2)}
.fee-method li {margin-bottom:.45rem}
.fee-method li::marker {color:var(--accent)}
.fee-sources {margin-top:0;margin-bottom:clamp(2.75rem,5vw,4.5rem)}
.fee-sources .muted {margin:.75rem 0 .5rem;max-width:70ch}
.fee-sources li {margin-bottom:.75rem}
.fee-source-meta {display:block;color:var(--muted);font-size:var(--type-caption)}
.fee-section + .related-reading,.fee-sources + .related-reading {margin-top:0}

/* Hub index on the orange band, numbered like the front page's top stories. */
.fee-directory .editorial-heading h2::before {background:var(--ink)}
.fee-tool-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(2rem,4vw,3.5rem);list-style:none;margin:0;padding:0;counter-reset:tool}
.fee-tool-grid li {counter-increment:tool;border-top:1px solid var(--line);min-width:0}
.fee-tool-card {display:flex;align-items:flex-start;gap:1.25rem;padding:1.4rem 0 1.6rem;color:var(--ink);text-decoration:none}
.fee-tool-card::before {content:counter(tool);flex:none;width:1.6ch;font:800 3.25rem/.85 var(--display);font-variant-numeric:lining-nums}
.fee-tool-card>div {flex:1;min-width:0}
.fee-tool-card__tag {display:block;font:700 var(--type-label)/1.4 var(--ui);letter-spacing:.08em;text-transform:uppercase;margin-bottom:.35rem}
.fee-tool-card h3 {font-size:var(--type-card);line-height:1.02;margin-bottom:.45rem;text-wrap:balance}
.fee-tool-card p {font:400 1.125rem/1.45 var(--serif);color:var(--text-2);margin:0 0 .6rem}
.fee-tool-card__from {font:600 var(--type-caption)/1.4 var(--ui);font-variant-numeric:tabular-nums}
.fee-card-arrow {flex:none;font-size:1.5rem;line-height:1.2;transition:translate .2s var(--fee-ease-out)}
.fee-tool-card {transition:opacity .1s ease-out}
.fee-tool-card:active {opacity:.7}
@media (hover:hover) and (pointer:fine) {
  .fee-tool-card:hover {color:var(--ink)}
  .fee-tool-card:hover h3 {text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.12em}
  .fee-tool-card:hover .fee-card-arrow {translate:.25rem 0}
}

/* Article call-out back to a calculator lives in site.css (.tool-callout). */

/* Desktop: the estimate stays beside the form while a long Shopify setup scrolls. */
@media(min-width:1001px) {
  .fee-output {position:sticky;top:1.5rem}
}

/* Phones: while the form is on screen and the estimate is not, a translucent bar keeps the total in view.
   It rises from the bottom edge and leaves the same way. */
.fee-peek {position:fixed;z-index:35;left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));display:grid;grid-template-columns:1fr auto;grid-template-areas:"label value" "go value";align-items:center;gap:.1rem 1rem;padding:.7rem 1.1rem .75rem;border:1px solid var(--line);border-radius:18px;background:color-mix(in srgb,var(--panel) 72%,transparent);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);box-shadow:0 12px 32px rgb(0 0 0 / .22);color:var(--ink);text-decoration:none;opacity:0;translate:0 calc(100% + 24px);pointer-events:none;transition:opacity .2s var(--fee-ease-out),translate .3s var(--fee-ease-out)}
.fee-peek[data-visible] {opacity:1;translate:0 0;pointer-events:auto}
.fee-peek:active {scale:.98;transition:scale .1s ease-out}
.fee-peek__label {grid-area:label;font:700 var(--type-label)/1.3 var(--ui);letter-spacing:.07em;text-transform:uppercase;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fee-peek__value {grid-area:value;font:800 1.75rem/1 var(--display);letter-spacing:-.01em;color:var(--accent);font-variant-numeric:tabular-nums lining-nums}
.fee-peek__go {grid-area:go;font:400 var(--type-caption)/1.3 var(--ui);color:var(--muted)}
.fee-peek:hover {color:var(--ink)}
body:has(.fee-peek[data-visible]) .to-top {opacity:0!important;pointer-events:none}
@media(min-width:1001px) {.fee-peek {display:none}}

/* Disclosures open and close with their content instead of snapping (Chromium; elsewhere they stay instant). */
@supports (interpolate-size:allow-keywords) {
  :is(.fee-options,.fee-notes,.fee-sources details) {interpolate-size:allow-keywords}
  :is(.fee-options,.fee-notes,.fee-sources details)::details-content {block-size:0;opacity:0;overflow:clip;overflow-clip-margin:6px;transition:block-size .24s var(--fee-ease-out),opacity .18s ease-out,content-visibility .24s allow-discrete}
  :is(.fee-options,.fee-notes,.fee-sources details)[open]::details-content {block-size:auto;opacity:1}
}

@media(prefers-reduced-motion:reduce) {
  .fee-peek {translate:none;transition:opacity .2s ease-out}
  .fee-peek:active {scale:none}
  :is(.fee-options,.fee-notes,.fee-sources details)::details-content {transition:opacity .15s ease-out,content-visibility .15s allow-discrete}
  .fee-card-arrow {transition:none}
}
@media(prefers-reduced-transparency:reduce) {
  .fee-peek {background:var(--panel);-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media(prefers-contrast:more) {
  .fee-peek {background:var(--panel);border-color:var(--ink)}
  .fee-cents {opacity:1}
}

@media(max-width:1000px) {
  .fee-workspace {grid-template-columns:1fr}
  .fee-inputs {max-width:none}
  .fee-field-pair {grid-template-columns:1fr 1fr}
}
@media(max-width:900px) {
  .fee-hero__grid {grid-template-columns:1fr;align-items:start}
  .fee-faq__grid,.fee-method {grid-template-columns:1fr}
}
@media(max-width:700px) {
  .fee-tool-grid {grid-template-columns:1fr}
  .fee-tool-card::before {font-size:2.6rem}
  .fee-inputs {padding:1.25rem}
  .fee-metrics {grid-template-columns:1fr;gap:0;padding-block:.5rem}
  .fee-metric {display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.6rem 0}
  .fee-metric+.fee-metric {border-top:1px solid var(--line)}
  .fee-metric dt {margin:0}
  .fee-metric dd {font-size:var(--type-card);text-align:right}
  .fee-tool-nav {flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:0 1.25rem;mask-image:linear-gradient(90deg,#000 85%,transparent)}
  .fee-tool-nav::-webkit-scrollbar {display:none}
  .fee-tool-nav a,.fee-tool-nav__label {flex:none}
}
@media(max-width:380px) {
  .fee-field-pair {grid-template-columns:1fr}
  .fee-field-pair .field+.field {margin-top:1.1rem}
}
@media(prefers-reduced-motion:reduce) {
  .fee-tool-card:hover .fee-card-arrow {translate:none}
}
@media print {
  .masthead,.site-footer,.breadcrumbs,.fee-peek,.fee-tool-nav,.fee-inputs,.fee-export,.fee-directory,.related-reading,.newsletter-band,.house-ad-slot,.fee-faq,.fee-brief {display:none!important}
  body {--paper:#fff;--ink:#111;--panel:#f2f2f2;--muted:#444;--text-2:#333;--accent:#ad3500;--line:#bbb;background:#fff;color:#111}
  .container {width:100%}
  .subhero {padding-block:0 1rem;margin-bottom:1rem}
  .fee-hero h1 {font-size:2.5rem}
  .fee-workspace {display:block}
  .fee-output,.fee-method,.fee-sources {break-inside:avoid}
  .fee-table-scroll {overflow:visible}
  .fee-table {font-size:.75rem}
  .fee-table th,.fee-table td {padding:.4rem}
  .fee-notes,.fee-sources details {display:block}
  .fee-notes:not([open]) > :not(summary),.fee-sources details:not([open]) > :not(summary) {display:block}
}