/* The public site: the editorial layout of docs/public-site/visual-brief.md (direction A) in the app's own colours
   and fonts (src/ui/kit/styles.css, D12), so fleksi.io and the app read as one product. Light, and dark when the
   visitor's system is dark. Mobile first at 390 px. Contrast measured with the WCAG formula, 23.10.2026: text 17,1:1
   (dark 18,7), muted text 5,5 on the tinted band (dark 7,4), links 6,5 (dark 9,8), white on the blue button 5,2
   (dark ink on blue 5,8), input borders 3,4 (dark 4,0). */

:root {
  --paper: oklch(98.75% 0 0); --card: #fff; --sand: oklch(97% 0 0); --ink: oklch(21% .006 285.885);
  --strong: oklch(14.5% 0 0); --ink-muted: oklch(48% 0 0);
  --brick: #2563eb; --brick-dark: #1d55d6; --on-accent: #fff; --link: #1d4ed8;
  --olive: oklch(14.5% 0 0); --olive-tint: color-mix(in srgb, #2563eb 8%, #fff); --line-input: #8c8c8c;
  --focus: #1d4ed8; --ok: oklch(43.2% .095 166.913); --error: oklch(50.5% .213 27.518); --hair: oklch(93.5% 0 0);
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: var(--sans);
  --shadow: 0 0 1px .5px oklch(0% 0 0 / .12), 0 1px 2px oklch(0% 0 0 / .08);
  --gutter: 20px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #050505; --card: #0f0f0f; --sand: #111111; --ink: oklch(97% 0 0); --strong: oklch(98.5% 0 0);
    --ink-muted: oklch(70.8% 0 0); --brick: #4f8dff; --brick-dark: #6b9fff; --on-accent: #04122e; --link: #8db4ff;
    --olive: oklch(98.5% 0 0); --olive-tint: #4f8dff1a; --line-input: #737373; --focus: #8db4ff;
    --ok: oklch(90.5% .093 164.15); --error: oklch(70.4% .191 22.216); --hair: #2a2a2a;
    --shadow: 0 0 1px .5px oklch(100% 0 0 / .1), 0 1px 2px oklch(0% 0 0 / .3);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 18px/28px var(--sans); }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; letter-spacing: -.02em; color: var(--strong); margin: 0 0 16px; }
h1 { font-size: 36px; line-height: 40px; }
h2 { font-size: 26px; line-height: 32px; margin-top: 8px; }
h3 { font-size: 21px; line-height: 28px; }
p, ul, ol, dl, table { margin: 0 0 16px; }
a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
main:focus { outline: none; }
img { max-width: 100%; height: auto; }
strong { font-weight: 600; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; background: var(--ink); color: var(--paper); padding: 10px 16px; z-index: 10; }
.skip:focus { top: 12px; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 720px; }
.lead { font-size: 20px; line-height: 30px; }
.note, .source, .facts, .hint { color: var(--ink-muted); font-size: 15px; line-height: 22px; }
.sec { padding: 64px 0; }
.sec-tight { padding: 32px 0; }
.alt { background: var(--sand); }
.plain-list { padding-left: 20px; }
.plain-list li, .numbered li { margin-bottom: 12px; }
.numbered { padding-left: 24px; }
.to-top { padding-bottom: 32px; font-size: 15px; }

/* Header and footer */
.site-header { border-bottom: 1px solid var(--hair); }
.bar { display: flex; align-items: center; justify-content: space-between; min-height: 60px; }
.logo { display: inline-flex; align-items: center; gap: 10px; font: 700 24px/1 var(--sans); color: var(--ink); text-decoration: none; }
.logo-mark { width: 32px; height: 32px; flex: none; }
.footer-logo .logo-mark { width: 28px; height: 28px; }
.signin { font-weight: 600; padding: 12px 0; min-height: 48px; display: inline-flex; align-items: center; }
.sections { display: flex; align-items: center; gap: 16px; overflow-x: auto; }
.sections ul { display: flex; gap: 20px; list-style: none; margin: 0; padding: 0; }
.sections a { display: inline-flex; min-height: 44px; align-items: center; font-weight: 600; color: var(--ink);
  text-decoration: none; border-bottom: 3px solid transparent; }
.sections a:hover { border-bottom-color: var(--hair); }
.sections a[aria-current="page"] { border-bottom-color: var(--brick); }
.nav-contact { display: none !important; }
.site-footer { background: var(--sand); padding: 40px 0 48px; margin-top: 32px; font-size: 16px; line-height: 24px; }
.footer-grid { display: grid; gap: 24px; }
.footer-logo { margin-bottom: 12px; }
.footer-head { font: 600 16px/24px var(--sans); margin: 0 0 4px; }
.footer-links ul { list-style: none; padding: 0; }
.footer-links a { display: inline-flex; min-height: 48px; align-items: center; }
.footer-note { color: var(--ink-muted); }

/* Buttons and cards */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px;
  border-radius: 999px; font: 600 18px/1.2 var(--sans); text-decoration: none; cursor: pointer; border: 2px solid transparent; }
.btn.primary { background: var(--brick); color: var(--on-accent); }
.btn.primary:hover { background: var(--brick-dark); }
.btn.secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn.secondary:hover { background: var(--card); }
.btn.text { background: none; color: var(--link); text-decoration: underline; padding: 0 8px; }
.btn.small { min-height: 44px; padding: 0 16px; font-size: 16px; }
.btn.ok { color: var(--ok); border-color: var(--ok); }
.cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.cta .btn { flex: 1 1 100%; }
.cta-aside { font-size: 16px; }
.cards { list-style: none; padding: 0; display: grid; gap: 16px; }
.card { display: flex; flex-direction: column; gap: 6px; height: 100%; background: var(--card); color: var(--ink);
  border-radius: 14px; box-shadow: var(--shadow); padding: 0 20px 20px; text-decoration: none; overflow: hidden;
  transition: transform 150ms, box-shadow 150ms; }
a.card:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgb(31 26 23 / .08), 0 14px 32px rgb(31 26 23 / .12); }
.kicker { display: block; margin: 0 -20px 8px; padding: 6px 20px; background: var(--sand); font-size: 14px; font-weight: 600;
  color: var(--ink-muted); }
.card-title { font: 600 20px/26px var(--serif); }
a.card .card-title { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.card-text { font-size: 16px; line-height: 24px; color: var(--ink-muted); }
.group-head { margin-top: 24px; }

/* Hero and the phone views */
.hero { padding: 32px 0 48px; }
.hero-grid { display: grid; gap: 24px; }
.tools-line { font-size: 16px; }
.shot { position: relative; margin: 0; max-width: 280px; }
.phone { background: #1F1A17; border-radius: 34px; padding: 10px; box-shadow: var(--shadow); border: 1px solid var(--hair); }
.screen { background: #fafafa; border-radius: 26px; overflow: hidden; min-height: 420px; font: 13px/18px system-ui, sans-serif; color: #18181b; }
.shot-crop .screen { min-height: 0; max-height: 300px; }
.shot figcaption { font-size: 15px; color: var(--ink-muted); margin-top: 8px; }
.tag-example { position: absolute; top: 18px; right: -6px; background: var(--olive); color: var(--paper); font: 600 13px/1 var(--sans);
  padding: 5px 8px; border-radius: 6px; }
.ui-top { display: flex; gap: 8px; align-items: center; height: 44px; padding: 0 14px; background: #fff; border-bottom: 1px solid #ececec; }
.ui-top b { font-weight: 600; font-size: 14px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ui-back { color: #1d4ed8; font-size: 20px; }
.ui-body { padding: 10px; display: grid; gap: 8px; }
.ui-body p { margin: 0; }
.ui-card { background: #fff; border: 1px solid #ececec; border-radius: 10px; padding: 10px; display: grid; gap: 4px; }
.ui-label { font-size: 11px; color: #71717a; text-transform: uppercase; letter-spacing: .03em; }
.ui-strong { font-weight: 600; }
.ui-sub { color: #5f5f66; font-size: 12px; }
.ui-big { font-size: 20px; font-weight: 600; }
.ui-line { display: flex; justify-content: space-between; gap: 8px; }
.ui-row { display: flex; gap: 6px; }
.ui-btn { display: inline-flex; align-items: center; justify-content: center; padding: 6px 10px; border-radius: 8px; font-weight: 600; font-size: 12px; }
.ui-ghost { border: 1px solid #d4d4d8; color: #1d4ed8; background: #fff; }
.ui-primary { background: #2563eb; color: #fff; }
.ui-wide { width: 100%; padding: 9px; text-align: center; }
.ui-focus { outline: 2px solid #1d4ed8; outline-offset: 2px; }
.ui-chip { display: inline-block; justify-self: start; font-size: 11px; padding: 2px 6px; border-radius: 6px; background: #eef2ff; color: #1e40af; }
.ui-chip-ok { background: #e7f6ee; color: #14653c; }
.ui-ok { color: #14653c; font-weight: 600; }
.ui-source { font-size: 11px; color: #5f5f66; }
.ui-inv { position: relative; padding: 4px 0; border-bottom: 1px solid #f1f1f1; }
.ui-alert { background: #fdf2e5; color: #7a4100; border-radius: 8px; padding: 8px; font-size: 12px; }
.ui-badge { position: absolute; left: -20px; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: #2563eb;
  color: #fff; font: 600 11px/18px var(--sans); text-align: center; }
.ui-totals { position: relative; }
.ui-photo { display: flex; gap: 8px; align-items: center; font-size: 12px; }
.ui-photo-art { width: 48px; height: 48px; border-radius: 6px; background: linear-gradient(135deg, #c9c2b8, #8f877d); }
.ui-table { width: 100%; border-collapse: collapse; font-size: 12px; margin: 0; }
.ui-table th, .ui-table td { text-align: left; padding: 3px 2px; border-bottom: 1px solid #f1f1f1; }
.ui-table td + td, .ui-table th + th { text-align: right; }
.ui-field { display: grid; gap: 2px; font-size: 11px; color: #5f5f66; flex: 1; }
.ui-input { display: block; min-height: 30px; border: 1px solid #d4d4d8; border-radius: 7px; padding: 6px 8px; background: #fff; color: #18181b; font-size: 13px; }
.ui-check { display: flex; gap: 6px; align-items: center; }
.ui-box { width: 16px; height: 16px; border-radius: 4px; background: #2563eb; color: #fff; font-size: 11px; line-height: 16px; text-align: center; }

/* The signature: one job, three views */
.thread-head { font-size: 19px; }
.step-jumps { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; font-weight: 600; }
.step-jumps a { min-height: 44px; display: inline-flex; align-items: center; }
.steps { list-style: none; padding: 0 0 0 28px; margin: 0 0 24px; border-left: 2px solid var(--brick); }
.step { position: relative; margin-bottom: 40px; display: grid; gap: 16px; }
.step-num { color: var(--link); }
.step-art { position: relative; }
.step-dot { position: absolute; left: -45px; top: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--brick);
  color: var(--on-accent); font: 600 16px/32px var(--sans); text-align: center; }
.step-caption { font-size: 15px; line-height: 22px; color: var(--ink-muted); max-width: 280px; margin-top: 10px; }
.step-link { font-weight: 600; }
.thread-line { display: none; }
.thread { font-size: 16px; }
.tablist { display: flex; gap: 8px; margin-bottom: 24px; }
.tablist button { min-height: 48px; padding: 0 20px; border-radius: 999px; border: 2px solid var(--ink); background: transparent;
  font: 600 17px/1 var(--sans); color: var(--ink); cursor: pointer; }
.tablist button[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.pair { display: grid; gap: 24px; grid-template-columns: 1fr; justify-items: start; }
.two-col { display: grid; gap: 32px; }

/* Content pages */
.content-head { padding-top: 32px; }
.crumbs { font-size: 15px; margin-bottom: 12px; color: var(--ink-muted); }
.prose { padding-bottom: 32px; }
.prose h2 { margin-top: 40px; }
.prose ul, .prose ol { padding-left: 24px; }
.prose li { margin-bottom: 8px; }
.prose blockquote { margin: 0 0 16px; padding: 12px 20px; background: var(--sand); border-left: 4px solid var(--brick); }
.prose hr { border: 0; border-top: 1px solid var(--hair); margin: 32px 0; }
.prose code { font-size: .9em; background: var(--sand); padding: 1px 4px; border-radius: 4px; }
.wide-prose { max-width: 880px; }
.box { border-radius: 14px; padding: 20px; margin: 24px 0; }
.box > :last-child { margin-bottom: 0; }
.box-note { background: var(--olive-tint); border-left: 4px solid var(--olive); }
.box-cta { background: var(--sand); border-left: 4px solid var(--brick); }
.box-title { font: 600 20px/26px var(--serif); }
.table-wrap { overflow-x: auto; margin-bottom: 16px; }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
th, td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid var(--hair); }
thead th { font-weight: 600; border-bottom: 2px solid var(--ink); }
.content-figure { margin: 24px 0; }
.sources ul { padding-left: 20px; }

/* Tools */
.tool-intro { padding: 32px 0 8px; }
.answer-first { font-size: 20px; line-height: 30px; background: var(--sand); border-left: 4px solid var(--brick); padding: 16px 20px; border-radius: 0 14px 14px 0; }
.field { display: grid; gap: 4px; margin-bottom: 12px; align-content: start; }
.field label, legend { font-weight: 600; }
input[type="text"], input:not([type]), input[type="date"], input[type="number"] {
  min-height: 48px; width: 100%; padding: 8px 12px; font: 400 18px/1.2 var(--sans); color: var(--ink);
  background: var(--card); border: 1px solid var(--line-input); border-radius: 10px; font-variant-numeric: tabular-nums; }
input[aria-invalid="true"] { border: 2px solid var(--error); }
input[type="checkbox"] { width: 24px; height: 24px; accent-color: var(--brick); flex: none; margin-top: 2px; }
.check { display: flex; gap: 10px; align-items: flex-start; }
.check label { font-weight: 400; }
.field-error { color: var(--error); font-size: 15px; line-height: 20px; margin: 0; }
.err-icon { display: inline-block; width: 18px; height: 18px; border-radius: 50%; background: var(--error); color: var(--paper);
  font: 600 13px/18px var(--sans); text-align: center; }
.unit-field { display: flex; align-items: center; gap: 6px; }
.unit-field input { width: 88px; }
.unit { color: var(--ink-muted); font-size: 16px; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }

.calc { font-variant-numeric: tabular-nums; }
.sheet-head { display: grid; gap: 0 16px; margin-bottom: 8px; }
.calc-head { display: grid; gap: 16px; margin-bottom: 16px; }
.calc-week-title { font: 600 22px/28px var(--serif); margin-bottom: 8px; }
.calc-range { font: 400 18px/28px var(--sans); color: var(--ink-muted); }
.calc-week-nav { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.field-week { margin: 0; flex: 1 1 160px; }
.calc-breakall { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; background: var(--card); border-radius: 14px; padding: 12px 16px; box-shadow: var(--shadow); }
.calc-breakall label { font-weight: 600; flex-basis: 100%; }
.days { display: grid; gap: 12px; }
.day-heads { display: none; }
.day { background: var(--card); border-radius: 14px; box-shadow: var(--shadow); padding: 12px 16px; border-left: 3px solid transparent; }
.day.tone-error { border-left-color: var(--error); }
.day-name { font: 600 18px/24px var(--serif); padding: 0; margin-bottom: 8px; float: left; width: 100%; }
.day-fields { clear: both; display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.field-break, .field-note { grid-column: 1 / -1; }
.day-result { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.day-result-label { font-size: 15px; color: var(--ink-muted); }
.day-value { font-weight: 600; font-size: 19px; }
.day-note { font-size: 15px; color: var(--ink-muted); }
.tone-partial .day-note { color: var(--ink); }
.same { margin-top: 4px; }
.calc-submit { margin: 16px 0; }
.calc-total { position: sticky; bottom: 0; z-index: 2; margin: 16px calc(-1 * var(--gutter)) 0; padding: 12px var(--gutter);
  background: var(--paper); border-top: 1px solid var(--hair); }
.calc-total p { margin: 0; }
.total-main { font: 600 22px/30px var(--serif); }
.total-over, .total-excluded { font-size: 15px; line-height: 22px; }
.total-excluded { color: var(--error); }
.calc-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; align-items: center; }
.undo { margin: 0; }
.signatures { display: none; gap: 32px; margin: 32px 0 8px; }
.sheet .signatures, .travel .signatures { display: grid; }
.sign { display: grid; gap: 4px; margin: 0; font-size: 15px; color: var(--ink-muted); }
.sign-line { display: block; height: 40px; border-bottom: 1px solid var(--ink); }
/* While typing on a phone the total bar steps aside, so it never covers the focused field. */
@media (max-width: 767px) { .calc:focus-within .calc-total { position: static; } }

.changed { animation: changed 400ms ease-out; }
@keyframes changed { from { background: var(--sand); } to { background: transparent; } }

.travel fieldset { margin-bottom: 16px; }
.travel legend { font: 600 22px/28px var(--serif); margin-bottom: 12px; }
.pair-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.field-short input { max-width: 180px; }
.travel-result { background: var(--card); border-radius: 14px; box-shadow: var(--shadow); padding: 16px 20px; margin: 16px 0; }
.result-table td { text-align: right; white-space: nowrap; }
.result-table tfoot th, .result-table tfoot td { font: 600 22px/30px var(--serif); border-bottom: 0; }
.travel-notes { padding-left: 20px; font-size: 15px; color: var(--ink-muted); margin: 0; }
.next-list { list-style: none; padding: 0; display: grid; gap: 12px; }
.next-list li { background: var(--card); border-radius: 14px; padding: 16px 20px; }
.next-list .next-product { background: transparent; border: 1px solid var(--hair); }
.faq dt { font-weight: 600; margin-top: 12px; }
.faq dd { margin: 0 0 8px; }

@media (min-width: 640px) {
  .cta .btn { flex: 0 0 auto; }
  .cards-3 { grid-template-columns: repeat(2, 1fr); }
  .pair { grid-template-columns: 1fr 1fr; }
  .sheet-head { grid-template-columns: 1fr 1fr; }
  .calc-breakall label { flex-basis: auto; }
}

@media (min-width: 960px) {
  h1 { font-size: 56px; line-height: 60px; }
  h2 { font-size: 36px; line-height: 42px; }
  .sec { padding: 96px 0; }
  .bar { min-height: 72px; }
  .sections { justify-content: space-between; }
  .nav-contact { display: inline-flex !important; font-weight: 600; }
  .hero { padding: 64px 0 80px; }
  .hero-grid { grid-template-columns: 1.2fr .8fr; align-items: center; gap: 48px; }
  .hero-art { justify-self: center; }
  .shot-crop .screen { max-height: none; }
  .cards-3 { grid-template-columns: repeat(3, 1fr); }
  .two-col { grid-template-columns: 1.1fr .9fr; align-items: start; gap: 64px; }
  .footer-grid { grid-template-columns: 1.2fr 1fr; }
  .footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

  /* Without script, wide screens show each step beside its phone. */
  .steps { border-left: 0; padding: 0; }
  .step { grid-template-columns: 1fr 300px; gap: 48px; align-items: start; }
  .step-dot { left: -16px; top: -12px; z-index: 1; }
  /* With script: tabs, the three phones like a photo essay, the active one in front. */
  .steps.is-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 8px; }
  .signature:has(.is-tabs) .step-jumps { display: none; }
  .steps.is-tabs > .step { display: contents; }
  .steps.is-tabs .step-text { grid-row: 1; grid-column: 1 / -1; max-width: 720px; margin-bottom: 32px; display: none; }
  .steps.is-tabs .active .step-text { display: block; animation: rise 180ms ease-out; }
  .steps.is-tabs .step-art { grid-row: 2; justify-self: center; transition: transform 180ms, opacity 180ms; opacity: .72; }
  .steps.is-tabs .step:nth-child(1) .step-art { transform: rotate(-2deg) translateX(24px); }
  .steps.is-tabs .step:nth-child(2) .step-art { transform: translateY(16px); z-index: 1; }
  .steps.is-tabs .step:nth-child(3) .step-art { transform: rotate(2deg) translateX(-24px); }
  .steps.is-tabs .active .step-art { opacity: 1; z-index: 2; }
  .steps.is-tabs .step-text h3 { display: none; }
  .thread-line { display: block; width: 100%; height: 40px; stroke: var(--brick); margin: -8px 0 8px; }
  @keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

  .day-heads { display: grid; grid-template-columns: 110px 130px 130px 140px 1fr; gap: 12px; padding: 0 16px; margin: 0;
    font-size: 15px; font-weight: 600; color: var(--ink-muted); }
  .sheet .day-heads { grid-template-columns: 110px 120px 120px 130px 1fr 190px; }
  .day { display: grid; grid-template-columns: 110px 400px 1fr; gap: 12px; align-items: start; padding: 10px 16px; }
  .sheet .day { grid-template-columns: 110px 1fr 190px; }
  .day-name { float: left; margin: 12px 0 0; }
  .day-fields { grid-template-columns: 130px 130px 140px; grid-column: 2; }
  .sheet .day-fields { grid-template-columns: 120px 120px 130px 1fr; }
  .field-break, .field-note { grid-column: auto; }
  .day .field { margin: 0; }
  .day .field label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .day-result { grid-column: 3; padding-top: 10px; flex-direction: column; gap: 0; }
  .day-result-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .same { grid-column: 2 / -1; justify-self: start; margin: 0; }
  .calc-total { margin: 16px 0 0; border-radius: 14px; }
  .calc-head { grid-template-columns: 1fr auto; align-items: end; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  a.card:hover { transform: none; }
  .changed { outline: 2px solid var(--brick); outline-offset: 2px; }
}

@media print {
  body { background: #fff; color: #000; font-size: 12pt; line-height: 1.35; }
  .site-header, .site-footer, .skip, .to-top, .next-steps, .tool-intro .note, .crumbs, .calc-week-nav, .calc-breakall,
  .calc-actions, .calc-submit, .same, .sec-tight:not(.tool), .hint { display: none !important; }
  .sec-tight, .tool-intro { padding: 0; }
  .day, .calc-breakall, .travel-result, .card { box-shadow: none; border: 1px solid #000; break-inside: avoid; }
  .calc-total { position: static; border: 0; margin: 12px 0 0; padding: 0; }
  input { border: 0 !important; border-bottom: 1px solid #000 !important; border-radius: 0 !important; min-height: 0 !important; padding: 2px 0 !important; }
  a { color: #000; }
  .answer-first { background: none; border: 0; padding: 0; }
}