/* Draknar Webworks inner-page templates: the rules that belong to one
   template each. Everything else comes from ../shared/base.css. */

/* ===== Service template: the marks in the plan matrix draw in once the table
   is in view. The words Yes and No are always visible; only the decorative mark
   animates, and only when JS adds .will-settle (never under reduced motion). */
.will-settle td.yes::before, .will-settle td.no::before { opacity: 0; transform: scale(.5); }
.is-settled td.yes::before { opacity: 1; transform: translateY(-.15rem) rotate(-45deg) scale(1); transition: opacity var(--dur) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.is-settled td.no::before { opacity: .7; transform: none; transition: opacity var(--dur) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.is-settled tbody tr:nth-child(2) td::before { transition-delay: 60ms; }
.is-settled tbody tr:nth-child(3) td::before { transition-delay: 120ms; }
.is-settled tbody tr:nth-child(4) td::before { transition-delay: 180ms; }
.is-settled tbody tr:nth-child(5) td::before { transition-delay: 240ms; }
.is-settled tbody tr:nth-child(6) td::before { transition-delay: 300ms; }
.is-settled tbody tr:nth-child(7) td::before { transition-delay: 360ms; }

/* Service and company templates: the questions read as one long answer sheet */
.answers { max-width: 65ch; }

/* ===== Article template: the title's own "vs" carries the page */
.vs-line { display: block; }
.vs { display: inline-block; font-weight: 800; font-size: .72em; line-height: 1; padding: .12em .32em .1em; margin: 0 .08em; border-radius: var(--radius-sm); background: var(--accent); color: var(--on-accent); vertical-align: .08em; letter-spacing: 0; }
.article-table .compare td:last-child, .article-table .compare th:last-child { background: var(--accent-soft); }
.article-table .compare tr:first-child th:last-child { color: var(--fg); }

/* ===== Guide template: the table inside the prose keeps the reading measure */
.prose .table-scroll { margin-top: 1.1em; }
.prose .compare { min-width: 0; font-size: var(--text-base); }
.prose .compare td { font-variant-numeric: tabular-nums; }

/* ===== Company templates (about, areas) */
.company h2 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); }
.reach { padding: var(--space-5) var(--space-6); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.valley li strong { font-family: var(--font-display); font-weight: 600; }

/* ===== Legal template */
.page-hero-legal { padding-bottom: clamp(5rem, 9vw, 7rem); }
.legal-meta { font-size: var(--text-base); color: var(--muted); opacity: 1; }
.legal-doc { font-size: 1.0625rem; }
.legal-doc h2 { font-size: clamp(1.3rem, 1.05rem + .9vw, 1.7rem); }
.legal-doc > div > p + p { margin-top: .9em; }
.legal-note { font-size: var(--text-sm); color: var(--muted); padding-top: 1.5em; border-top: 1px solid var(--border); }
.toc-legal ol { counter-reset: none; }

/* ===== Order template: presentation only. Every selector below targets the
   live form's own class names, ids and states, so the markup stays byte for
   byte what the Worker, Turnstile and the site's scripts expect. */
.order-wrap { width: min(860px, 100% - 2.5rem); }
.order form { display: flex; flex-direction: column; gap: var(--space-5); }
.order fieldset.group { min-width: 0; margin: 0; padding: var(--space-6); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.order fieldset.group legend { font-family: var(--font-display); font-size: var(--text-h3); font-weight: 600; letter-spacing: -0.008em; padding: 0 .4rem; margin-left: -.4rem; }
.order fieldset.group > * + * { margin-top: var(--space-4); }
.order .muted { color: var(--muted); }
.order .small { font-size: var(--text-sm); }
.order .help { color: var(--muted); font-size: var(--text-sm); }
.order .help[data-picked]:empty { display: none; }
.order .lbl { font-weight: 700; margin-bottom: .5rem; }
.order .warn { color: var(--muted); font-size: var(--text-sm); margin-top: .35rem; }
.order legend .muted { font-family: var(--font-body); font-weight: 400; font-size: var(--text-sm); letter-spacing: 0; }

/* Text fields */
.order .field { display: flex; flex-direction: column; gap: .35rem; }
.order .field label { font-weight: 600; }
.order .field .help { margin-top: .1rem; }
.order .field input, .order .field textarea, .order .day .t { width: 100%; min-height: 48px; padding: .7rem .9rem; border: 1.5px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--bg); color: var(--fg); font: inherit; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.order .field textarea { resize: vertical; }
.order .field input:focus, .order .field textarea:focus, .order .day .t:focus { outline: none; border-color: var(--fg); box-shadow: 0 0 0 3px oklch(50% 0.2 255 / .35); }
.order ::placeholder { color: oklch(48% 0.015 58); }
.order .two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }

/* Chips: pills that fill when checked (filters and toggles are pills) */
.order .chips-auto { display: flex; flex-wrap: wrap; gap: .5rem; }
.order .chip { display: inline-block; position: relative; cursor: pointer; }
.order .chip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.order .chip span.card { display: inline-flex; align-items: center; min-height: 44px; padding: .5rem 1.1rem; border: 1.5px solid var(--border-strong); border-radius: var(--radius-pill); background: var(--surface); font-weight: 600; font-size: .9375rem; line-height: 1.3; transition: background-color var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast); }
.order .chip:hover span.card { border-color: var(--fg); }
.order .chip input:checked + span.card { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.order .chip input:focus-visible + span.card { outline: 3px solid var(--focus); outline-offset: 3px; }

/* Plan cards: the home page's plan cards, in daylight */
.order .order-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); align-items: start; }
.order .plan { position: relative; display: flex; flex-direction: column; gap: .6rem; padding: var(--space-5); border: 1.5px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg); cursor: pointer; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.order .plan input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.order .plan:hover { border-color: var(--fg); }
.order .plan:has(input:checked) { border-color: var(--fg); box-shadow: 0 0 0 1.5px var(--fg), var(--shadow-1); }
.order .plan:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
.order .plan.is-featured { border-color: oklch(54.8% 0.188 22.2 / .7); }
.order .plan.is-featured:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1.5px var(--accent), var(--shadow-1); }
.order .plan-badge { position: absolute; top: -.8rem; left: var(--space-5); padding: .25rem .7rem; border-radius: var(--radius-pill); background: var(--fg); color: var(--bg); font-size: var(--text-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.order .plan .price { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; letter-spacing: .01em; }
.order .plan .sc-machine-tag { font-family: var(--font-display); font-weight: 800; font-size: 1.55rem; line-height: 1.05; letter-spacing: -0.02em; }
.order .plan .plan-build { font-size: var(--text-sm); color: var(--muted); }
.order .plan .plan-first { padding: .6rem .8rem; border-radius: var(--radius-sm); background: var(--surface-2); font-size: var(--text-sm); font-weight: 600; }
.order .plan strong { color: var(--muted); font-weight: 600; }
.order .plan .matrix { display: flex; flex-direction: column; gap: .45rem; padding-top: .6rem; border-top: 1px solid var(--border); font-size: var(--text-sm); line-height: 1.4; }
.order .plan .matrix li { display: flex; gap: .5rem; align-items: flex-start; }
.order .plan .matrix .mark { flex: 0 0 1.1rem; font-weight: 700; color: var(--ok); }
.order .plan .matrix li.off { color: var(--muted); }
.order .plan .matrix li.off .mark { color: var(--muted); opacity: .7; }
.order .plan .sc-save { align-self: flex-start; padding: .25rem .7rem; border: 1px solid var(--ok); border-radius: var(--radius-pill); color: var(--ok); font-size: var(--text-xs); font-weight: 700; letter-spacing: .04em; }
.order .order-plans[data-period="yearly"] .sc-save { display: none; }
/* The decorative "Choose ..." spans read as the card's selected state, not as buttons */
.order .plan .btn { margin-top: .2rem; width: 100%; background: transparent; color: var(--fg); border-color: var(--border-strong); box-shadow: none; pointer-events: none; }
.order .plan:has(input:checked) .btn { background: var(--fg); color: var(--bg); border-color: var(--fg); }

/* Add-ons: a priced checklist */
.order .addons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-6); border-top: 1px solid var(--border); }
.order .addons label { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .75rem; align-items: baseline; padding: .8rem 0; border-bottom: 1px solid var(--border); cursor: pointer; }
.order .addons input { width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--accent); align-self: start; margin-top: .2rem; }
.order .addons input:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.order .addons .price { font-family: var(--font-display); font-weight: 700; white-space: nowrap; }

/* Hours */
.order .hours { display: grid; gap: .6rem; margin-top: .6rem; }
.order .day { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto minmax(0, 1fr) auto; gap: .5rem; align-items: center; }
.order .day .chip span.card { justify-content: center; width: 100%; }
.order .day .t { min-height: 44px; padding: .5rem .6rem; }
.order .day.off .t { background: var(--surface-2); border-color: var(--border); }
.order .day.off .to { color: var(--muted); }
.order .day .to { color: var(--fg); }
.order .day > label.small { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.order .day > label.small input { width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--accent); }
.order .day > label.small input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.order .confirm { display: none; margin-top: .6rem; padding: var(--space-4) var(--space-5); border: 2px solid var(--focus); border-radius: var(--radius-sm); background: var(--surface-2); }
.order .confirm.on { display: block; }
.order .confirm .btn { margin: .6rem .5rem 0 0; }

/* The fine print: two scroll-to-read boxes and their gated checkboxes */
.order .accept-box { max-height: 18rem; overflow: auto; padding: var(--space-4) var(--space-5); border: 1.5px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--bg); font-size: var(--text-sm); line-height: 1.55; }
.order .accept-box:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.order .accept-box p + p, .order .accept-box div > p + p { margin-top: .6em; }
.order .accept-box h2 { font-family: var(--font-display); font-size: 1rem; font-weight: 700; margin: 1.2em 0 .35em; letter-spacing: 0; line-height: 1.3; }
.order .accept-box .text-sm { font-size: var(--text-xs); margin-top: 1.5em; color: var(--muted); }
.order .accept-box a { color: var(--fg); text-decoration: underline; text-underline-offset: .18em; }
.order .accept { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .75rem; align-items: start; margin-top: .75rem; cursor: pointer; }
.order .accept input { width: 1.25rem; height: 1.25rem; margin: .15rem 0 0; accent-color: var(--accent); }
.order .accept input:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.order .accept input:disabled + span { color: var(--muted); }
.order .accept .help { display: block; }

/* Bot check and submit */
.order .cf-turnstile { min-height: 65px; }
.order .ts-msg { margin-top: .5rem; }
.order button[type="submit"] { align-self: flex-start; min-height: 56px; padding: 1rem 1.7rem; font-size: 1.0625rem; }
.order form > p.muted.small { margin-top: 0 !important; }

@media (max-width: 900px) {
  .order .order-plans { grid-template-columns: 1fr; }
  .order .addons { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .order-wrap { width: min(860px, 100% - 2rem); }
  .order fieldset.group { padding: var(--space-5); }
  .order .two { grid-template-columns: 1fr; }
  .order .day { grid-template-columns: 4.5rem minmax(0, 1fr) auto minmax(0, 1fr); }
  .order .day > label.small { grid-column: 1 / -1; }
  .order button[type="submit"] { width: 100%; }
  .vs { font-size: .7em; }
}

/* ---- port additions (Talon D, 2026-09-24) ---- */
/* Texting opt-in on the order form: the same look as the agreement boxes */
.order .sms-accept { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .75rem; align-items: start; margin-top: var(--space-4); font-size: var(--text-sm); line-height: 1.5; cursor: pointer; }
.order .sms-accept input { width: 1.25rem; height: 1.25rem; margin: .15rem 0 0; accent-color: var(--accent); }
.order .sms-accept input:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.order .sms-accept a { text-decoration: underline; text-underline-offset: .18em; }
/* Hidden table captions that build-live.py writes for screen readers */
.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hero-actions { margin-top: var(--space-5); }
/* Windows high-contrast mode repaints every colour, so a choice shown only by colour disappears (2026-09-19). */
@media (forced-colors: active) { .order .chip input:checked + span.card, .order .plan:has(input:checked) { border-color: Highlight; outline: 2px solid Highlight; } }

/* ---- sample category pages in the redesign (redesign.py convert_hub, 2026-09-24) ---- */
.kicker { font-size: var(--text-sm); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--space-3); }
.hub .lead { max-width: 62ch; }
.hub h3 { font-family: var(--font-display); font-size: var(--text-h3); font-weight: 600; letter-spacing: -0.008em; line-height: 1.2; }
.hub > p + p, .hub > .lead + p { margin-top: .9em; }
.whys, .exs { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--space-5); margin-top: var(--space-6); }
.why { padding: var(--space-6); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.why h3 { margin-bottom: .5rem; }
.why p { color: var(--muted); }
.ex { display: flex; flex-direction: column; gap: .5rem; padding: var(--space-6); background: var(--bg); border: 1.5px solid var(--border-strong); border-radius: var(--radius-lg); color: var(--fg); text-decoration: none; transition: border-color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast); }
.ex:hover { border-color: var(--fg); box-shadow: var(--shadow-1); }
.ex:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.ex strong { font-family: var(--font-display); font-size: var(--text-h3); font-weight: 600; line-height: 1.2; }
.ex > span:not(.ex-tag):not(.ex-cta) { color: var(--muted); }
.ex-tag { align-self: flex-start; padding: .2rem .65rem; border-radius: var(--radius-pill); background: var(--surface-2); font-size: var(--text-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ex-cta { margin-top: auto; padding-top: .4rem; font-weight: 700; text-decoration: underline; text-underline-offset: .18em; }
@media (prefers-reduced-motion: no-preference) { .ex:hover { transform: translateY(-2px); } }