/* The product-site pages (home, How We Work): hero app window, walkthrough scenes, app cards,
   cost icons and the contact form. Built on the tokens in tokens.css; style.css holds the shared base. */
@font-face { font-family: 'Caveat'; src: url('../fonts/caveat-var.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }

/* Hero: offer on the left, a window onto the four apps on the right */
.hero-split {
  display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); align-items: center;
  gap: clamp(2.5rem, 5vw, 6rem);
  /* Full-bleed background; content sits in the same 76rem column as the header and the grids */
  padding: clamp(3rem, 5vw, 4.5rem) max(var(--gutter), calc((100% - 76rem) / 2)) clamp(4.5rem, 8vw, 7rem);
  text-align: left; overflow: visible;
  background: radial-gradient(60rem 30rem at 85% 40%, color-mix(in srgb, var(--color-primary) 22%, transparent), transparent 70%), var(--color-surface);
}
.hero-split .hero-copy { justify-items: start; padding: 0; }
.hero-split .eyebrow { justify-content: flex-start; }
.hero-split h1 { font-size: clamp(2.75rem, 4.6vw, 4.75rem); line-height: 0.98; max-width: none; margin-block: var(--space-6) var(--space-6); }
.hero-split h1 > span { display: block; text-wrap: balance; }
.hero-split h1 mark { color: inherit; background: linear-gradient(transparent 58%, var(--color-primary) 58%, var(--color-primary) 92%, transparent 92%); padding-inline: 0.04em; }
.hero-split .hero-sub { font-size: clamp(1.0625rem, 1.3vw, 1.25rem); max-width: 30em; text-wrap: pretty; }
.hero-split .hero-actions { justify-content: flex-start; margin-top: var(--space-8); }
.hero-proof { display: grid; gap: var(--space-2); margin-top: var(--space-8); padding: 0; list-style: none; font-size: 0.875rem; color: var(--color-muted); }
.hero-proof li { display: flex; align-items: center; gap: var(--space-2); }
.hero-proof li::before { content: ''; width: 0.9rem; height: 0.9rem; border-radius: 50%; flex: none; background: var(--color-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.6 2.5L12 5.5' fill='none' stroke='%230d0d0b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 70% no-repeat; }

/* Showcase */
.sc { display: grid; gap: var(--space-4); min-width: 0; }
.sc-tabs { display: inline-flex; justify-self: start; gap: 2px; padding: 3px; border: 1px solid var(--color-border); border-radius: 999px; background: #fff; }
.sc-tabs button { font: 500 0.875rem/1 var(--font-body); color: var(--color-muted); background: none; border: 0; border-radius: 999px; padding: 0.6rem 1rem; cursor: pointer; transition: background .2s, color .2s; }
.sc-tabs button:hover { color: var(--color-heading); }
.sc-tabs button[aria-selected="true"] { background: var(--color-heading); color: var(--color-bg); }
.sc-window { position: relative; border: 1px solid var(--color-border); border-radius: 1rem; background: #fff; box-shadow: 0 2.5rem 4rem -2rem rgb(15 23 19 / .28), 0 0 0 6px rgb(255 255 255 / .5); }
.sc-bar { display: flex; align-items: center; gap: 6px; padding: 0.7rem 1rem; border-bottom: 1px solid var(--color-border); background: var(--color-surface); border-radius: 1rem 1rem 0 0; }
.sc-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--color-border); }
.sc-bar span { margin-left: 0.75rem; padding: 0.25rem 0.75rem; border-radius: 999px; background: #fff; border: 1px solid var(--color-border); font: 400 0.75rem/1 var(--font-mono); color: var(--color-muted); }
/* All panels share one grid cell, so the window keeps the tallest panel's height and never jumps */
.sc-panels { display: grid; }
.sc-panel { grid-area: 1 / 1; display: grid; align-content: start; position: relative; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.sc-panel:not(.is-on) { visibility: hidden; }
.sc-panel.is-on { animation: sc-in .35s var(--ease-out, ease-out); }
@keyframes sc-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .sc-panel.is-on { animation: none; } }
.sc-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-6); }
.sc-head strong { font: 600 1rem/1.3 var(--font-heading); letter-spacing: -0.01em; color: var(--color-heading); }
.sc-chip { padding: 0.3em 0.65em; border-radius: 999px; background: var(--color-ui-pill); font: 400 0.6875rem/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); white-space: nowrap; }
.sc-table { width: 100%; border-collapse: collapse; }
.sc-table th { padding: var(--space-2) var(--space-6); font: 500 0.6875rem/1.2 var(--font-body); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); text-align: right; border-top: 1px solid var(--color-border); }
.sc-table td { padding: 0.7rem var(--space-6); border-top: 1px solid var(--color-border); text-align: right; color: var(--color-text); }
.sc-table th:first-child, .sc-table td:first-child { text-align: left; }
.sc-table tfoot td { font-weight: 600; color: var(--color-heading); }
.sc-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-6) 3.75rem; border-top: 1px solid var(--color-border); color: var(--color-muted); }
.sc-foot b { font: 600 1.125rem/1 var(--font-heading); color: var(--color-heading); }
.sc-warn, .sc-st { display: inline-block; padding: 0.3em 0.6em; border-radius: 999px; font: 600 0.6875rem/1.1 var(--font-body); background: var(--color-ui-pill); color: var(--color-muted); white-space: nowrap; }
.sc-warn, .sc-st.warn { background: #fdecc8; color: #7a4b00; }
.sc-st.ok { background: #dcfce7; color: #166534; }
.sc-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); padding: var(--space-2) var(--space-6) var(--space-4); border-top: 1px solid var(--color-border); }
.sc-board > div { display: grid; align-content: start; gap: var(--space-2); padding-top: var(--space-2); }
.sc-board small { font: 500 0.6875rem/1.2 var(--font-body); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); }
.sc-card { display: grid; gap: 2px; padding: var(--space-3); border: 1px solid var(--color-border); border-radius: 0.6rem; background: var(--color-surface); font-size: 0.8125rem; line-height: 1.4; color: var(--color-muted); }
.sc-card b { color: var(--color-heading); font-weight: 600; }
.sc-card .sc-st { justify-self: start; margin-top: 4px; }
.sc-list { margin: 0; padding: 0; list-style: none; }
.sc-list li { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--space-4); padding: 0.75rem var(--space-6); border-top: 1px solid var(--color-border); }
.sc-list small { font: 500 0.6875rem/1.6 var(--font-body); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); }
.sc-list span { color: var(--color-text); }

/* The second screen: what the customer, client or owner sees */
/* It hangs off the window's bottom-right corner; the caption sits beside it on the left */
.sc-float { position: absolute; z-index: 1; right: -1.25rem; top: calc(100% - 3rem); width: min(17rem, 55%); display: grid; gap: var(--space-2); padding: var(--space-4) var(--space-4) var(--space-4); border: 1px solid var(--color-border); border-radius: 1rem; background: #fff; box-shadow: 0 1.5rem 3rem -1rem rgb(15 23 19 / .3); font-size: 0.8125rem; line-height: 1.45; }
.sc-float small { font: 400 0.6875rem/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); }
.sc-float .sc-st { justify-self: start; }
.sc-big { font: 600 1.5rem/1 var(--font-heading); letter-spacing: -0.03em; color: var(--color-heading); }
.sc-big span { font: 400 0.75rem/1 var(--font-body); letter-spacing: 0; color: var(--color-muted); }
.sc-line { color: var(--color-text); }
.sc-line b { color: var(--color-heading); }
.sc-sign { padding: 0.35rem 0.75rem; border: 1px solid var(--color-border); border-radius: var(--radius-btn); font: 500 1.375rem/1.1 var(--font-hand); color: var(--color-heading); }
.sc-btn { display: block; padding: 0.7rem; border-radius: var(--radius-btn); background: var(--color-heading); color: var(--color-bg); font: 600 0.75rem/1 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; text-align: center; }
.sc-cap { display: flex; flex-wrap: wrap; align-content: flex-start; align-items: baseline; gap: var(--space-2) var(--space-3); min-height: 8.5rem; padding-right: 18rem; font-size: 0.875rem; color: var(--color-muted); }
.sc-ex { font: 400 0.6875rem/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; }

@media (max-width: 1040px) {
  .hero-split { grid-template-columns: 1fr; }
  .hero-split h1 { max-width: 11em; }
  .sc-float { right: 1rem; }
  .sc-cap { padding-right: 19rem; }
}
@media (max-width: 600px) {
  .sc-tabs { justify-self: stretch; }
  .sc-tabs button { flex: 1; padding-inline: 0.5rem; }
  .sc-table th, .sc-table td, .sc-head, .sc-foot, .sc-list li, .sc-board { padding-inline: var(--space-4); }
  .sc-panel .sc-table th:nth-child(2), .sc-panel .sc-table td:nth-child(2) { display: none; }
  #sc-quoting .sc-table th:nth-child(2), #sc-quoting .sc-table td:nth-child(2) { display: table-cell; }
  .sc-board { grid-template-columns: 1fr 1fr; }
  .sc-board > div:last-child { display: none; }
  .sc-list li { grid-template-columns: 1fr; gap: 0; }
  .sc-float { position: relative; top: auto; right: auto; bottom: auto; width: auto; margin: 0 var(--space-4) var(--space-4); box-shadow: none; }
  .sc-foot { padding-bottom: var(--space-4); }
  .sc-cap { padding-right: 0; min-height: 0; }
  .hero-split .hero-actions { flex-direction: row; gap: var(--space-6); }
  .hero-split .hero-actions .btn-primary { width: auto; }
}

/* "What free means": highlight the first column, not the last */
.hw-cols.free > div:last-child { border-top-color: var(--color-border); }
.hw-cols.free > div:first-child { border-top-color: var(--color-primary); }

/* Home-page cards (the leak row, the other apps, marketing) share one look: 1rem corners, a hairline
   border, the picture on top and the text inside, with one title size. */
.leak-card h3, .apps .hw-plan-name, .mkt-title, .ft-title { font: 700 1.375rem/1.15 var(--font-heading); letter-spacing: -0.025em; text-transform: none; color: var(--color-heading); }

/* What it does: the eight features in four cards, one per stage of a job, each with an example on top.
   Cards are 5 or 7 of 12 columns, so the wide ones sit diagonally; two by two below 1000px, one column below 700px. */
.ft-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-6); max-width: 76rem; margin-inline: auto; }
.ft-card { grid-column: span 5; display: grid; grid-template-rows: auto 1fr; overflow: hidden; border: 1px solid var(--color-border); border-radius: 1rem; background: var(--color-card); container-type: inline-size; }
.ft-card.ft-wide { grid-column: span 7; }
.ft-vis { position: relative; display: grid; align-content: center; justify-items: center; gap: var(--space-3); height: 17rem; padding: 2.75rem var(--space-6) var(--space-6); overflow: hidden; border-bottom: 1px solid var(--color-border); background: radial-gradient(70% 90% at 25% 90%, rgb(220 245 66 / .22), transparent 70%), var(--color-surface); font-size: 0.8125rem; line-height: 1.4; color: var(--color-text); font-variant-numeric: tabular-nums; }
.ft-ex { position: absolute; top: var(--space-4); left: var(--space-6); display: flex; align-items: center; gap: 7px; font: 400 0.6875rem/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-muted); }
.ft-ex::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--color-primary); box-shadow: 0 0 0 2px rgb(220 245 66 / .35); }
.ft-panel { width: min(100%, 25rem); padding: var(--space-4); border: 1px solid var(--color-border); border-radius: 0.75rem; background: #fff; box-shadow: 0 14px 28px -18px rgb(15 23 19 / .3); }
.ft-panel small { display: block; color: var(--color-muted); }
.ft-row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.ft-row b { font-weight: 600; color: var(--color-heading); }
.ft-big { font: 700 1.5rem/1 var(--font-heading); letter-spacing: -0.03em; color: var(--color-heading); }
.ft-photos { display: flex; gap: 6px; margin-top: var(--space-3); }
.ft-photos i { width: 2.75rem; height: 2.25rem; border-radius: 6px; background: linear-gradient(160deg, #c9d3d6, #8e9a9c 60%, #5d6668); }
.ft-photos i:nth-child(2) { background: linear-gradient(200deg, #d8cfc2, #9c8f7d 65%, #6b6152); }
.ft-photos i:nth-child(3) { background: linear-gradient(170deg, #b8c4c9, #6f7c80); }
.ft-photos i:nth-child(4) { background: linear-gradient(190deg, #cfc7bb, #857a6c); }
.ft-photos span { display: grid; place-items: center; width: 2.75rem; height: 2.25rem; border-radius: 6px; background: var(--color-ui-pill); font-size: 0.75rem; font-weight: 600; color: var(--color-muted); }
.ft-note { margin-top: var(--space-2); font-size: 0.75rem; color: var(--color-muted); }
.ft-flag { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding-block: var(--space-3); }
.ft-flag b { color: var(--color-heading); }
.ft-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: var(--space-4); }
.ft-opts span { display: grid; gap: 2px; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: 0.5rem; font-size: 0.75rem; color: var(--color-muted); }
.ft-opts b { font-size: 0.8125rem; color: var(--color-heading); }
.ft-opts .on { border-color: var(--color-heading); box-shadow: inset 0 0 0 1px var(--color-heading); }
/* Margin meter: 0 to 40%, the floor at 25% (62.5%), this quote at 23.1% (57.75%) */
.ft-meter { position: relative; height: 0.625rem; margin: 2.25rem 0 var(--space-3); border-radius: 999px; background: var(--color-ui-pill); }
.ft-meter i { position: absolute; inset: 0 auto 0 0; width: 57.75%; border-radius: 999px; background: #f0b44c; }
.ft-meter em { position: absolute; left: 62.5%; bottom: -4px; height: calc(100% + 8px + 1.25rem); padding-left: 6px; border-left: 2px solid var(--color-heading); font: 400 0.6875rem/1 var(--font-mono); font-style: normal; letter-spacing: 0.04em; white-space: nowrap; color: var(--color-heading); }
.ft-split { grid-template-columns: auto auto; justify-content: center; gap: var(--space-8); align-items: center; }
.ft-pdf { display: grid; align-content: start; gap: 5px; width: 8.5rem; aspect-ratio: 1 / 1.414; padding: var(--space-3); border: 1px solid var(--color-border); border-radius: 4px; background: #fff; box-shadow: 0 14px 28px -18px rgb(15 23 19 / .3); transform: rotate(-3deg); }
.ft-pdf i { display: block; height: 4px; border-radius: 2px; background: var(--color-ui-pill); }
.ft-pdf i.s { width: 60%; }
.ft-pdf small { margin-top: 4px; font: 600 0.5rem/1 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); }
.ft-pdf b { margin-top: auto; font: 400 0.5625rem/1 var(--font-mono); color: var(--color-muted); }
.ft-logo { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; margin-bottom: 4px; border-radius: 4px; background: var(--color-heading); color: var(--color-primary); font: 700 0.5625rem/1 var(--font-heading); }
.ft-accept { display: grid; justify-items: start; gap: 4px; width: 15rem; }
.ft-accept .sc-sign { margin-block: var(--space-2) 2px; }
.ft-stages { display: grid; grid-template-columns: 1fr 2fr 2fr; gap: 4px; margin: var(--space-4) 0; }
.ft-stages span { padding-top: var(--space-2); border-top: 6px solid var(--color-ui-pill); font-size: 0.6875rem; color: var(--color-muted); }
.ft-stages .paid { border-top-color: var(--color-heading); color: var(--color-heading); }
.ft-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
.ft-stats b { display: block; margin-top: 2px; font: 700 1rem/1.2 var(--font-heading); color: var(--color-heading); }
.ft-body { display: grid; align-content: start; gap: var(--space-2); padding: var(--space-6) var(--space-6) var(--space-8); }
.ft-list { display: grid; gap: var(--space-4) var(--space-8); margin-top: var(--space-3); }
.ft-list dt { font: 600 0.9375rem/1.3 var(--font-body); color: var(--color-heading); }
.ft-list dd { margin-top: 4px; font-size: 0.9375rem; line-height: 1.5; color: var(--color-muted); }
@container (min-width: 34rem) { .ft-list { grid-template-columns: 1fr 1fr; } }
@container (max-width: 26rem) { .ft-pdf { display: none; } .ft-split { grid-template-columns: auto; } }
@media (max-width: 1000px) { .ft-card, .ft-card.ft-wide { grid-column: span 6; } }
@media (max-width: 700px) { .ft-card, .ft-card.ft-wide { grid-column: 1 / -1; } }
@media (max-width: 600px) { .ft-grid { gap: var(--space-4); } .ft-vis { height: 15.5rem; padding-inline: var(--space-4); } .ft-ex { left: var(--space-4); } }

/* Marketing: four service cards. Each picture fills the card's top and fades into the text below. */
.mkt-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); max-width: 76rem; margin: 0 auto; padding: 0; list-style: none; }
.mkt-card { position: relative; isolation: isolate; display: grid; align-content: start; gap: var(--space-2); padding: 0 var(--space-6) var(--space-8); overflow: hidden; border: 1px solid var(--color-border); border-radius: 1rem; background: var(--color-card); }
/* Text starts over the last tenth of the picture, where the fade takes it to the card colour */
.mkt-card::before { content: ''; display: block; aspect-ratio: 320 / 272; margin-inline: calc(var(--space-6) * -1); }
.mkt-bg { position: absolute; z-index: -2; top: 0; left: 0; width: 100%; height: auto; transform-origin: 50% 0; transition: transform .8s var(--ease-out); }
.mkt-card::after { content: ''; position: absolute; z-index: -1; left: 0; right: 0; top: 0; aspect-ratio: 320 / 300; background: linear-gradient(transparent 80%, var(--color-card) 96%); pointer-events: none; }
.mkt-num, .ft-num { font: 400 0.75rem/1 var(--font-mono); letter-spacing: 0.08em; color: var(--color-muted); }
.mkt-desc { font-size: 1rem; line-height: 1.5; color: var(--color-muted); text-wrap: pretty; }
.mkt-card:hover { border-color: color-mix(in srgb, var(--color-heading) 18%, var(--color-border)); box-shadow: 0 1.5rem 2.5rem -1.75rem rgb(15 23 19 / .35); }
.mkt-card:hover .mkt-bg { transform: scale(1.035); }
@media (prefers-reduced-motion: reduce) { .mkt-card:hover .mkt-bg { transform: none; } }
@media (max-width: 1100px) { .mkt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .mkt-grid { grid-template-columns: 1fr; } .mkt-card { padding-bottom: var(--space-6); } }

/* Contact: the pitch and next steps on the left, the form in a card on the right (stacked on phones) */
.next-form { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: auto 1fr; align-items: start; justify-items: stretch; gap: var(--space-8) clamp(2.5rem, 6vw, 6rem); padding: clamp(3rem, 7vw, 6rem) clamp(1.5rem, 5vw, 5rem); text-align: left; }
.next-form .next-pitch { grid-column: 1; grid-row: 1; display: grid; justify-items: start; gap: var(--space-6); }
.next-form .form-card { grid-column: 2; grid-row: 1 / span 2; }
.next-form .next-after { grid-column: 1; grid-row: 2; }
.next-form .eyebrow { justify-content: flex-start; }
.next-form .h2 { max-width: 9em; }
.next-label { margin-bottom: var(--space-3); font: 400 0.75rem/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted-on-dark); }
.next-steps { list-style: none; border-top: 1px solid var(--color-border-dark); }
.next-steps li { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: 2px var(--space-3); padding-block: var(--space-4); border-bottom: 1px solid var(--color-border-dark); }
.next-steps span { grid-row: span 2; font: 400 0.75rem/1.5 var(--font-mono); letter-spacing: 0.06em; color: var(--color-primary); }
.next-steps b { font: 600 1rem/1.3 var(--font-heading); color: var(--color-on-dark); }
.next-steps p { font-size: 0.9375rem; line-height: 1.45; color: var(--color-muted-on-dark); }
.next-form .next-human { margin-top: var(--space-6); }
.form-card { padding: clamp(1.25rem, 3vw, 2.5rem); border: 1px solid var(--color-border-dark); border-radius: 1rem; background: color-mix(in srgb, var(--color-ink-dark) 94%, #fff); }
@media (max-width: 1000px) {
  .next-form { grid-template-columns: 1fr; grid-template-rows: none; }
  .next-form .next-pitch, .next-form .form-card, .next-form .next-after { grid-column: auto; grid-row: auto; }
}
@media (min-width: 601px) and (max-width: 1000px) { .next-steps { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-8); } }
@media (max-width: 600px) { .next-form { padding-inline: var(--space-4); } }

/* Contact form inside the card */
.dform { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-6); width: 100%; text-align: left; }
.dform-hint { font-size: 0.875rem; line-height: 1.45; color: var(--color-muted-on-dark); }
.dform label { display: grid; align-content: start; gap: var(--space-2); font: 500 0.8125rem/1.3 var(--font-body); color: var(--color-on-dark); }
.dform .opt { margin-left: var(--space-1); font-weight: 400; color: var(--color-muted-on-dark); }
.dform input, .dform textarea, .dform select { width: 100%; font: 400 1rem/1.4 var(--font-body); color: var(--color-on-dark); background-color: var(--color-ink-dark); border: 1px solid #2c3832; border-radius: var(--radius-btn); padding: 0.8rem 1rem; transition: border-color .2s, box-shadow .2s; }
.dform input:hover, .dform textarea:hover, .dform select:hover { border-color: #46544d; }
.dform input:focus, .dform textarea:focus, .dform select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgb(220 245 66 / .16); }
.dform ::placeholder { color: #737a73; }
.dform select { appearance: none; padding-right: 2.75rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23a8aba3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 1rem; cursor: pointer; }
.dform textarea { min-height: 6.5rem; resize: vertical; }
.dform .full { grid-column: 1 / -1; }
.dform .btn { justify-self: start; margin-top: var(--space-2); }
@media (max-width: 700px) { .dform { grid-template-columns: 1fr; } }

/* ---------- Walkthrough: one job, from search to invoice ---------- */
.wt-progress { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.wt-step { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.wt-tag { padding: 0.4em 0.7em; border-radius: 999px; background: var(--color-primary); font: 600 0.625rem/1 var(--font-body); letter-spacing: var(--tracking-label); color: var(--color-heading); }
.wt-tag.mk { background: var(--color-ui-pill); color: var(--color-muted); }
.wt-final .wt-final-sub { max-width: 30em; font-size: clamp(1rem, 1.3vw, 1.1875rem); line-height: 1.5; color: var(--color-muted); text-align: center; }
.wt-final .wt-step { justify-content: center; }

/* Quote and job cards reuse the hero's table styles, inside the walkthrough's card */
.ui-quote, .ui-job { width: min(34rem, 100%); padding: 0; overflow: hidden; }
.ui .sc-foot { padding-bottom: var(--space-4); }
.ui-job .ui-trail-wrap { margin: 0; padding: var(--space-4) var(--space-6) var(--space-6); }
/* A value that changes mid-scene: both copies share one cell. At rest only the new one shows. */
.sw { display: inline-grid; }
.sw > * { grid-area: 1 / 1; justify-self: start; }
.sw .o { opacity: 0; }

.ui-accept { width: min(26rem, 100%); }
.ui-accept .ui-title { margin: 2px 0 var(--space-4); }
.ua-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.ua-opts span { padding: var(--space-3) var(--space-2); border: 1px solid var(--color-border); border-radius: 0.6rem; font-size: 0.8125rem; text-align: center; color: var(--color-muted); }
.ua-opts .on { border-color: var(--color-heading); color: var(--color-heading); font-weight: 600; box-shadow: inset 0 0 0 1px var(--color-heading); }
.ua-extra { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-4); font-size: 0.875rem; }
.ua-extra i { width: 1rem; height: 1rem; border-radius: 4px; flex: none; background: var(--color-heading) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.6 2.5L12 5.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat; }
.ua-total { display: grid; gap: 2px; margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-border); font-variant-numeric: tabular-nums; }
.ua-total strong { font: 600 1.75rem/1.05 var(--font-heading); letter-spacing: -0.03em; }
.ua-sign { margin-top: var(--space-4); padding: 0.45rem 0.9rem; min-height: 2.6rem; border: 1px solid var(--color-border); border-radius: 0.625rem; font: 500 1.375rem/1.4 var(--font-hand); color: var(--color-heading); }
.ua-sign span { display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom; max-width: 100%; padding-right: 0.2em; }

@media (prefers-reduced-motion: no-preference) {
  /* Scene 3: the labour line is repriced and the margin clears the floor */
  .is-active .sw .o { animation: sw-out 4.6s linear both; }
  .is-active .sw .n { animation: sw-in 4.6s linear both; }
  .is-active .flash { animation: flash 1.6s ease 4.4s forwards; }
  .is-active .ui-quote tbody tr { animation: rise .5s var(--ease-out) both; }
  .is-active .ui-quote tbody tr:nth-child(1) { animation-delay: .3s; }
  .is-active .ui-quote tbody tr:nth-child(2) { animation-delay: .5s; }
  .is-active .ui-quote tbody tr:nth-child(3) { animation-delay: .7s; }
  .is-active .ui-quote tbody tr:nth-child(4) { animation-delay: .9s; }
  /* Scene 4: pick, tick, sign, accept */
  .is-active .ua-opts .on { animation: pick .5s var(--ease-out) 1s both; }
  .is-active .ua-extra i { animation: tick .3s ease 2.2s both; }
  .is-active .ua-total { animation: rise .6s var(--ease-out) 2.6s both; }
  .is-active .ua-sign span { animation: type 1.2s steps(14, end) 3.6s both; }
  .is-active .ui-accept .ui-submit { animation: press .4s ease-out 5.3s both; }
  .is-active .ui-accept .ui-done { animation: rise .6s var(--ease-out) 5.8s both; }
  /* Scene 5: invoices land, payments are recorded, then the path to the job */
  .is-active .ui-job tbody tr { animation: rise .5s var(--ease-out) both; }
  .is-active .ui-job tbody tr:nth-child(1) { animation-delay: .4s; }
  .is-active .ui-job tbody tr:nth-child(2) { animation-delay: .8s; }
  .is-active .ui-job tbody tr:nth-child(3) { animation-delay: 1.2s; }
  .is-active .ui-job tbody tr:nth-child(1) .sc-st { animation: rise .4s var(--ease-out) 2s both; }
  .is-active .ui-job tbody tr:nth-child(2) .sc-st { animation: rise .4s var(--ease-out) 2.7s both; }
  .is-active .wt-final .wt-final-sub { animation: rise .9s var(--ease-out) .6s both; }
}
@keyframes sw-out { 0%, 94% { opacity: 1; } 100% { opacity: 0; } }
@keyframes sw-in { 0%, 94% { opacity: 0; } 100% { opacity: 1; } }
@keyframes flash { from { background: color-mix(in srgb, var(--color-primary) 55%, #fff); } to { background: transparent; } }
@keyframes tick { from { background-color: #fff; box-shadow: inset 0 0 0 1.5px var(--color-border); } }
@media (max-width: 700px) {
  .wt-tag { font-size: 0.5625rem; }
}

/* The apps: a picture on each card */
.apps .hw-plans-2 { max-width: 76rem; gap: var(--space-6); }
.apps .hw-plan { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: 0 var(--space-6) var(--space-8); overflow: hidden; border: 1px solid var(--color-border); border-radius: 1rem; background: var(--color-card); }
.app-shot { width: calc(100% + 2 * var(--space-6)); max-width: none; height: auto; aspect-ratio: 16 / 10; margin: 0 calc(var(--space-6) * -1) var(--space-3); border-bottom: 1px solid var(--color-border); background: var(--color-surface); }
.apps .hw-plan-desc { margin-bottom: var(--space-3); }
.apps .hw-plan > .link-arrow, .apps .plan-links { margin-top: auto; }
.apps .plan-links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); }
/* Product pages: the home page's split hero, with your screen beside your customer's phone */
.prod-hero h1 { font-size: clamp(2.5rem, 4vw, 4rem); }
.prod-hero .fp-badge { margin-top: var(--space-4); }
.prod-shot { display: grid; gap: var(--space-3); min-width: 0; margin: 0; }
.prod-shot img { display: block; width: 100%; height: auto; }
/* The picture has a transparent 30px margin (4.3% of its width) for the shadows: the caption tucks into it */
.prod-shot figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-3); margin-top: -7%; padding-inline: 4.3%; font-size: 0.875rem; color: var(--color-muted); }
@media (max-width: 1040px) { .prod-shot { max-width: 44rem; } }
@media (max-width: 700px) { .prod-shot img { border: 1px solid var(--color-border); border-radius: 1rem; } .prod-shot figcaption { margin-top: 0; padding-inline: 0; } }

/* What it costs: one icon per column. The free one is lime, like that column's top rule. */
.cost-ico { display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: var(--space-2); border: 1px solid var(--color-border); border-radius: 0.875rem; background: #fff; color: var(--color-heading); }
.hw-cols.free > div:first-child .cost-ico, #pricing .hw-plan:first-child .cost-ico { background: var(--color-primary); border-color: transparent; }
#pricing .hw-plan { gap: var(--space-4); }

.dform-note { font-size: 0.8125rem; color: var(--color-muted-on-dark); }

/* Trade-first home (2026-10-07): Quoting screens in the hero, features, three other apps, form states */
.sc-board-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sc-pad { display: grid; gap: var(--space-3); padding: var(--space-2) var(--space-6) 3.75rem; border-top: 1px solid var(--color-border); }
.sc-sub { padding-top: var(--space-3); font: 600 1rem/1.3 var(--font-heading); color: var(--color-heading); }
.sc-pad .ua-extra, .sc-pad .ua-total, .sc-pad .ua-sign { margin-top: 0; }
.apps .hw-plans.apps-3 { max-width: 76rem; gap: var(--space-6); }
.apps .hw-plan .fp-badge { position: absolute; top: var(--space-4); right: var(--space-4); }
.dform .hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.dform-note.is-ok { color: var(--color-primary); font-size: 1rem; }
.dform-note.is-err { color: #fca5a5; }
.dform-note a { color: var(--color-on-dark); text-decoration: underline; text-underline-offset: 0.2em; }
.dform.is-sent label, .dform.is-sent .btn, .dform.is-sent .dform-hint { display: none; }
@media (max-width: 600px) {
  .sc-board-4 { grid-template-columns: 1fr 1fr; }
  .sc-board-4 > div:last-child { display: grid; }
  .sc-pad { padding-inline: var(--space-4); padding-bottom: var(--space-4); }
}
.hero-split h1 { font-size: clamp(2.5rem, 4.3vw, 4.375rem); }
.hero-split .hero-actions { gap: var(--space-4) var(--space-8); }
.dform.is-sent { min-height: 18rem; align-content: center; }
.dform.is-sent .dform-note { max-width: 24em; margin-inline: auto; text-align: center; text-wrap: balance; }
.dform.is-sent .dform-note::before { content: ''; display: block; width: 3rem; height: 3rem; margin: 0 auto var(--space-4); border-radius: 50%; background: var(--color-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%230d0d0b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 55% no-repeat; }