/* Page layout only. Shared mechanical caps, travel and focus stay in ride-journal.css. */
.commerce-site::before { opacity: .065; }
.commerce-page { padding-top: 30px; color: #1b1d1c; }
.commerce-page [hidden] { display: none !important; }
.commerce-crumbs { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 22px; font-size: 1.125rem; }
.commerce-crumbs a { color: #555650; }
.commerce-crumbs [aria-current] { color: #943b15; }
.commerce-hero { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); gap: clamp(26px,3.4vw,50px); align-items: start; }
.commerce-photo { margin: 0; padding: 15px 15px 8px; border: 1px solid #d3cbbb; border-radius: 7px; background: var(--grain),#f4f0e7; box-shadow: inset 0 1px #fffdf8,0 4px 7px #75644922; }
.commerce-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4/3; object-fit: contain; }
.commerce-photo figcaption { padding-top: 8px; text-align: right; font-size: 1rem; color: #57574f; }
.commerce-offer h1 { margin: 0; font: 700 clamp(2.25rem,3.75vw,3.8rem)/1.06 var(--sans); letter-spacing: -.045em; }
.commerce-lede { margin: 14px 0 25px; color: #555650; font-size: clamp(1.25rem,2vw,1.8rem); line-height: 1.3; }
.commerce-price-line { display: flex; gap: 22px; align-items: center; justify-content: space-between; border-top: 1px solid #c9bfab; padding-top: 22px; }
.commerce-price { margin: 0; font: 700 clamp(3.2rem,5vw,5rem)/1 var(--sans); letter-spacing: -.06em; color: #1b1d1c; } /* Black: the key is the only orange mass. */
.commerce-price span { font: 500 1.2rem/1.3 var(--sans); letter-spacing: 0; color: #555650; white-space: nowrap; }
.commerce-shipping { margin: 14px 0 0; font: 600 1.125rem/1.3 var(--sans); }
.commerce-availability:empty { display: none; }
/* Founders: photo and offer side by side; the charcoal count panel sits between the subtitle and the price.
   It all fits one laptop screen (Landon, 2026-10-15). */
.founders-hero { grid-template-columns: minmax(0,1.22fr) minmax(0,1fr); grid-template-areas: "photo offer"; column-gap: clamp(24px,3vw,44px); row-gap: 0; align-items: start; }
.founders-hero .commerce-photo { grid-area: photo; display: flex; padding: 10px; }
/* The photo keeps the render's own 3:2 frame in every state, so the whole box shows and opening the
   e-Transfer fields or the hold never stretches or crops it. */
.founders-hero .commerce-photo img { height: auto; min-height: 0; aspect-ratio: 3/2; object-fit: cover; border-radius: 3px; }
.founders-hero .commerce-offer { grid-area: offer; }
.founders-hero .commerce-lede { margin: 10px 0 18px; }
.founders-price { display: flex; align-items: center; gap: 18px; padding: 18px 0 4px; }
.founders-price .commerce-price { font-size: clamp(2.6rem,3.6vw,3.6rem); letter-spacing: -.045em; line-height: .9; }
.founders-price-terms { display: grid; gap: 4px; margin: 0; padding-left: 18px; border-left: 2px solid #c9bfab; font: 600 1.0625rem/1.25 var(--sans); color: #3a3c36; }
.founders-price-terms span { text-wrap: balance; }
.founders-price-terms span:first-child { color: #555650; font-weight: 500; }
.founders-hero .commerce-checkout { margin-top: 14px; }
.founders-hero [data-card-dock] { margin-top: 0; }
.founders-hero .commerce-other { margin-top: 8px; }
.founders-upgrade { font-weight: 600; }
.is-sold-out .founders-upgrade { display: none; }
.founders-panel { display: block; }
/* The panel: the count, and the shipping date bottom right. It wears the box's own black face; the numeral is lit like a gauge (Landon, 2026-10-16). */
.founders-rise { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; padding: 22px 28px 20px; border-radius: 8px; background: var(--grain),linear-gradient(120deg,#353734,#2c2e2b); color: #fff9ee; box-shadow: 0 4px 8px #75644933; }
/* Real contour lines from the site's map table, drawn light and fading out toward the text. */
.founders-rise::before { content: ""; position: absolute; inset: 0; background: #fff9ee; opacity: .3; pointer-events: none;
  -webkit-mask: url(/assets/map-table-contours.svg) 72% 46% / 900px auto no-repeat, linear-gradient(105deg,transparent 30%,#000 75%); -webkit-mask-composite: source-in;
  mask: url(/assets/map-table-contours.svg) 72% 46% / 900px auto no-repeat intersect, linear-gradient(105deg,transparent 30%,#000 75%); }
.founders-rise > * { position: relative; }
.founders-count { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; margin: 0; }
.founders-count strong { font: 800 clamp(3rem,5vw,4.5rem)/.9 var(--sans); letter-spacing: -.04em; color: #ef985f; }
.founders-count span { font: 700 clamp(1.25rem,1.9vw,1.6rem)/1.15 var(--sans); }
.founders-ship { display: flex; align-self: flex-end; gap: 12px; align-items: center; margin: 0; font-size: 1rem; line-height: 1.3; color: #d9d2c4; }
.founders-ship svg { flex: 0 0 auto; width: 40px; height: 40px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linejoin: round; }
/* Sold out: no price, no key; the panel says Sold out and the pre-order key is orange. */
.is-sold-out .founders-price, .is-sold-out [data-other], .is-sold-out .founders-panel { display: none; }
[data-commerce-page="founders"] .commerce-other[data-other] a { white-space: nowrap; } /* The pre-order page's longer link must wrap, or phones scroll sideways. */
.founders-hero .commerce-sold-out { margin-top: 18px; }
.founders-hero .commerce-sold-out .btn { width: 100%; }
.founders-hero .commerce-sold-out .btn:disabled { cursor: default; filter: grayscale(.85) opacity(.7); }
.founders-sold-out-line { margin: 14px 0 0; font: 700 1.25rem/1.35 var(--sans); color: #c4521f; }
.founders-sold-out-line a { color: inherit; white-space: nowrap; }
.commerce-fine-line { margin: 24px 0 10px; font-size: .9375rem; line-height: 1.5; color: #555650; }
.commerce-page .founders-price + .commerce-breakdown { margin-top: 14px; }
.commerce-note.commerce-fine { max-width: none; font-size: .9375rem; color: #555650; }
.site-page .site-main .commerce-note.commerce-fine p { max-width: none; margin: 4px 0; }
.commerce-limit { margin: 0; padding: 12px 18px; border-radius: 6px; background: var(--grain),#a34720; color: #fff9ee; font-size: 1.125rem; line-height: 1.3; }
.commerce-limit strong { font-weight: 500; }
.commerce-refund { margin: 10px 0 18px; color: #505e37; font-size: 1.25rem; font-weight: 600; }
.commerce-breakdown { margin: 18px 0 24px; padding: 15px 0; border-block: 1px solid #c9bfab; }
/* A long value (order reference, deadline) wraps under its label on a narrow phone instead of crushing it. */
.commerce-breakdown > div { display: flex; flex-wrap: wrap; gap: 2px 20px; justify-content: space-between; margin: 8px 0; font-size: 1.125rem; }
.commerce-breakdown dt { flex: 0 0 auto; }
.commerce-breakdown dd { margin: 0 0 0 auto; min-width: 0; max-width: 100%; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.commerce-checkout { margin-top: 26px; }
.commerce-checkout label { display: block; margin-bottom: 7px; font-size: 1.125rem; }
.commerce-checkout input, .commerce-checkout select { display: block; width: 100%; min-height: 48px; padding: 11px 13px; border: 1px solid #928774; border-radius: 5px; background: #fffdf7; color: #24271e; font: 400 1.125rem/1.3 var(--sans); }
.commerce-checkout input:focus-visible, .commerce-checkout select:focus-visible { outline: 3px solid #b45020; outline-offset: 2px; }
.commerce-key-dock { margin-top: 20px; padding: 12px 14px 8px; border: 1px solid #c3b8a3; border-radius: 12px; background: var(--grain),linear-gradient(125deg,#e7dfd0,#d5cbba); box-shadow: inset 0 1px #fffdf5,0 2px 3px #76694f2b; }
.commerce-page .btn { width: 100%; }
.commerce-page .btn .key-face { font-size: 1.25rem; white-space: normal; overflow-wrap: anywhere; }
.commerce-availability,.commerce-message,.commerce-policy { margin: 12px 0 0; line-height: 1.45; font-size: 1rem; }
.commerce-message:empty,.commerce-policy:empty { display: none; }
.commerce-message { color: #80330f; }
/* Checkout and admin lines: guidance and success in ink; the error colour marks a failure only. */
[data-checkout-message]:not([data-error]), [data-admin-message]:not([data-error]) { color: #1b1d1c; }
.commerce-policy { color: #555650; }
.commerce-sold-out p { margin: 26px 0 0; font: 600 1.25rem/1.35 var(--sans); }
.commerce-other { margin-top: 20px; font-size: 1.125rem; line-height: 1.5; }
.commerce-page a:not(.btn) { text-decoration: underline; text-underline-offset: 3px; }
.commerce-kit { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 25px; align-items: center; margin: 32px 0 0; padding: 22px 30px; border: 1px solid #d3cbbb; border-radius: 8px; background: var(--grain),#f5f1e8b3; }
.commerce-kit h2 { font-size: 1.5rem; margin: 0; }
.commerce-kit p { font-size: 1.125rem; }
.commerce-kit-marks { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 16px; text-align: center; }
.commerce-kit-marks span { display: grid; justify-items: center; gap: 8px; font-size: 1rem; }
.commerce-kit-marks svg { width: 58px; height: 58px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.commerce-note { margin: 26px 0; max-width: 850px; font-size: 1.125rem; line-height: 1.55; }
.commerce-note h2 { margin-bottom: 12px; font-size: 1.5rem; }
.commerce-note p { margin: 10px 0; }
.commerce-help { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px 30px; border-top: 1px solid #c9bfab; padding: 18px 0 10px; font-size: 1.125rem; }
.commerce-help p { margin: 0; }
.commerce-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); list-style: none; margin: 32px 0 0; padding: 24px 0; gap: 28px; border-block: 1px solid #c9bfab; }
.commerce-steps li { position: relative; padding-left: 42px; }
.commerce-steps li > span { position: absolute; left: 0; top: 4px; color: #555650; font-size: 1.125rem; }
.commerce-steps h2 { margin: 0 0 8px; font-size: 1.5rem; }
.commerce-steps p { margin: 0; font-size: 1.125rem; line-height: 1.5; }
.site-footer nav { flex-wrap: wrap; }
@media(max-width:1000px) { .commerce-kit { grid-template-columns: 1fr; gap: 18px; } .commerce-kit p { margin: 0; text-align: center; } .commerce-kit h2 { text-align: center; } }
@media(max-width:820px) {
 .commerce-page { padding-top: 20px; }
 .commerce-crumbs { font-size: 1rem; margin-bottom: 16px; }
 .commerce-hero { display: flex; flex-direction: column; gap: 26px; align-items: stretch; }
 /* Phone: photo, offer and key, then the panel. */
 .founders-hero { display: grid; grid-template-columns: 1fr; grid-template-areas: "photo" "offer"; row-gap: 0; }
 /* Phone: the price and key come first; the count box follows them. */
 .founders-hero .commerce-offer { display: flex; flex-direction: column; padding: 22px 0 24px; }
 .founders-hero .founders-panel { order: 1; margin-top: 22px; }
 .founders-hero [data-other] { order: 2; margin-top: 18px; }
 .founders-rise { padding: 20px 18px; }
 .commerce-photo { padding: 10px 10px 7px; }
 .commerce-offer h1 { font-size: clamp(2rem,8.5vw,3rem); }
 .commerce-lede { margin-bottom: 22px; font-size: 1.4rem; }
 .commerce-price-line { gap: 16px; }
 .commerce-price { font-size: 3.5rem; }
 .founders-price .commerce-price { font-size: 3rem; }
 .commerce-limit { font-size: 1rem; padding: 10px 12px; }
 .commerce-kit { padding: 20px 16px; }
 .commerce-kit-marks { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
 .commerce-steps { grid-template-columns: 1fr; gap: 24px; }
}
.commerce-hold { margin-top: 26px; font-size: 1.125rem; }
/* The panel takes focus only so a screen reader reads it; it is not a control. */
.commerce-hold:focus { outline: 0; }
.commerce-hold > a:not(.btn) { display: inline-block; margin-top: 12px; }
.commerce-checkout select { margin-bottom: 4px; }
/* A narrow phone: the select's placeholder, "Choose your province or territory", shows in full. */
@media(max-width:360px) { .commerce-checkout select { padding-inline: 10px; font-size: 1rem; } }
.commerce-checkout input:not([hidden]) + label { margin-top: 16px; } /* A hidden input (Quebec's email) adds no space. */
.commerce-quote { margin: 14px 0 0; }
.commerce-quote > div:last-child { border-top: 1px solid #c9bfab; padding-top: 8px; }
.commerce-ref { font-family: var(--mono); white-space: nowrap; }
.commerce-send { margin: 14px 0 0; padding: 12px 14px; border-radius: 6px; background: #fffdf7; border: 1px solid #c9bfab; font-size: 1.125rem; line-height: 1.45; overflow-wrap: anywhere; }
.commerce-sold-out { margin: 22px 0 0; font-size: 1.25rem; font-weight: 600; }
.commerce-hold h2 { margin: 0 0 6px; font-size: 1.5rem; line-height: 1.25; text-wrap: balance; }
/* Interac Founders hold: who and where we ship. */
.commerce-ship { margin: 18px 0 0; padding: 12px 16px 16px; border: 1px solid #c7bca7; border-radius: 8px; }
.commerce-ship legend { padding: 0 6px; font-weight: 600; }
.commerce-ship label { margin-top: 12px; }
/* Orders (Landon, 2026-10-15): the page shows the order its private link opened; nobody types
   anything. The charcoal contour panel and key docks are the Founders page's. */
.orders-page { padding-bottom: 6px; }
.site-page .site-main .orders-page p { max-width: none; }
/* The Founders heading size: 54px on a laptop, about 33px on a phone. */
.site-page .site-main .orders-page h1 { margin: 0; font-size: clamp(2rem,3.75vw,3.8rem); line-height: 1.06; }
.orders-page h1:focus { outline: 0; }
.orders-empty, .orders-head { margin: 6px 0 0; }
.site-page .site-main .orders-page p.orders-empty-line { margin: 16px 0 0; font-size: 1.125rem; }
.orders-status { position: relative; overflow: hidden; border-radius: 8px; background: var(--grain),linear-gradient(120deg,#353734,#2c2e2b); color: #fff9ee; box-shadow: 0 4px 8px #75644933; }
.orders-status::before { content: ""; position: absolute; inset: 0; background: #fff9ee; opacity: .3; pointer-events: none;
  -webkit-mask: url(/assets/map-table-contours.svg) 72% 46% / 900px auto no-repeat, linear-gradient(105deg,transparent 30%,#000 75%); -webkit-mask-composite: source-in;
  mask: url(/assets/map-table-contours.svg) 72% 46% / 900px auto no-repeat intersect, linear-gradient(105deg,transparent 30%,#000 75%); }
.orders-status > * { position: relative; }
.site-page .site-main .orders-page p.orders-ref { margin: 8px 0 0; color: #1b1d1c; font: 400 1rem/1.3 var(--mono); letter-spacing: .02em; }
.orders-view > .commerce-message { margin: 14px 0 0; }
/* Desktop: status and amounts side by side, the keys in one row under both. Phone: status, amounts, keys. */
.orders-grid { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); grid-template-areas: "status money" "actions actions"; column-gap: clamp(28px,4vw,60px); row-gap: 18px; align-items: stretch; margin-top: 22px; }
.orders-status { grid-area: status; padding: 24px 30px 28px; }
/* A status box that holds only its headline (a refunded order) keeps its own height. */
.orders-status:has(> .orders-founder:empty):has(> .orders-shipping:empty) { align-self: start; }
.orders-money { grid-area: money; padding: 18px 26px 22px; border: 1px solid #d3cbbb; border-radius: 8px; background: var(--grain),#f4f0e7; box-shadow: inset 0 1px #fffdf8,0 4px 7px #75644922; }
.orders-actions { grid-area: actions; }
.orders-state { margin: 0; font: 800 clamp(2.25rem,3.8vw,3.5rem)/1 var(--sans); letter-spacing: -.04em; }
.orders-founder { margin: 12px 0 0; font: 700 clamp(1.25rem,1.9vw,1.6rem)/1.15 var(--sans); }
.orders-founder:empty, .orders-shipping:empty { display: none; }
.orders-shipping { margin-top: 20px; padding-top: 16px; border-top: 1px solid #fff9ee66; font-size: 1.125rem; }
.site-page .site-main .orders-page p.orders-hold { margin: 10px 0 0; font-weight: 600; }
.orders-ship-rows { margin: 0; }
.orders-ship-rows > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 20px; margin: 6px 0; }
.orders-ship-rows dd { margin: 0 0 0 auto; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.commerce-page .orders-shipping a { display: inline-block; margin-top: 10px; color: #fff9ee; font-weight: 600; }
/* On the charcoal panel the Interac instruction is plain text, not a boxed field. */
.orders-shipping .commerce-send { margin: 0; padding: 0; border: 0; background: none; color: inherit; }
.orders-money .commerce-breakdown { margin: 0; padding: 0; border: 0; }
/* The last row is what is owed, or what was paid: set apart and heavier. */
.orders-money .commerce-breakdown > div:last-child { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid #c9bfab; font-weight: 700; }
.orders-page .commerce-message, .orders-page .commerce-policy { text-wrap: pretty; }
/* The privacy line sits under the Copy order link key it explains. */
.orders-actions [data-order-private] { text-align: right; }
.orders-money [data-order-invoice] .commerce-key-dock { margin-top: 18px; }
.orders-keys { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0,1fr); gap: 14px; }
.orders-actions > .commerce-key-dock { margin-top: 0; }
.orders-refund > p { margin: 18px 0 0; font-weight: 600; }
.orders-help { margin: 28px 0 0; padding: 16px 0 6px; border-top: 1px solid #c9bfab; font-size: 1.125rem; }
@media(max-width:820px) {
 .site-page .site-main .orders-page h1 { font-size: clamp(2rem,8.5vw,3rem); }
 .orders-grid { grid-template-columns: 1fr; grid-template-areas: "status" "money" "actions"; }
 .orders-status { padding: 20px 18px 22px; }
 .orders-money { padding: 16px 18px 18px; }
 .orders-keys { grid-auto-flow: row; }
 .orders-actions [data-order-private] { text-align: left; }
}
/* A narrow phone puts each shipping value under its label. */
@media(max-width:360px) { .orders-ship-rows > div { display: block; } .orders-ship-rows dd { margin: 2px 0 0; text-align: left; } }
/* The e-Transfer fields open between the card key and the e-Transfer key that sends them. */
.commerce-interac { min-width: 0; margin: 24px 0 0; padding: 0; border: 0; }
/* Both keys keep their legend on one line and match in height (the face's 56px minimum) at every
   width. The card key keeps its 20px legend; only the longer e-Transfer legend shrinks on a phone. */
[data-checkout] .btn .key-face { white-space: nowrap; }
@media(max-width:420px) { [data-checkout] .btn .key-face { padding-inline: 8px; } [data-checkout] [data-interac-dock] .btn .key-face { font-size: min(1.25rem,5vw); } }

/* The shell paints immediately; a fresh commerce page reveals only one confirmed offer.
   Internal navigation prepares the same content before replacing the current page. */
main[data-commerce-pending] { position: relative; visibility: hidden; min-block-size: 70vh; }
main[data-commerce-pending] .commerce-photo, main[data-commerce-pending] h1, main[data-commerce-pending] .commerce-lede { visibility: visible; }
.commerce-offer { position: relative; }
.commerce-loading { position: relative; visibility: visible; color: #555650; font-size: 1.125rem; }
.commerce-loading p { margin: 0 0 18px; }
.commerce-loading .btn { width: auto; min-width: 180px; }
.commerce-site:has(main[data-commerce-pending]) .site-footer { visibility: hidden; }