/*
 * Website cost calculator, v4 (2026-10-12). Figma "◰ Blog + Quiz" > "Website cost calculator page v4" (162427:13005).
 * Built on the theme's tokens (THEME-SPEC): type has-large / has-medium / fs-20, greys #757677 on white, #6E6E73 on
 * #F8F8F8 and #808080 on black, hairlines #E2E3E6 (#333 on dark), fields #F8F8F8 r20, the 60px pill button, focus
 * 2px #0967F4. Phones are max-width 781px, tablets 782 to 1112, desktop from 1113.
 * Two-class selectors beat the customizer's inline heading colours (theme gotcha, 2026-10-05).
 *
 * 0.7.0 (Daniel, 2026-10-13): on phones the bar is a bottom sheet as in apps (HC Demo's Vaul drawer) with a plain
 * grab line; answer icons are bare line glyphs again; checklist rows put the box, the icon and the text in columns.
 *
 * 0.6.0 (Daniel, 2026-10-12): country and industry questions, nothing selected at the start (the bar shows no price
 * until the first answer), Remix line icons on the answers and the guide's blocks, much less text on phones, the
 * breakdown drawer removed (Breakdown goes to "Your estimate"), and on phones an app-style bar with a grip.
 *
 * 0.5.0 (QA, 2026-10-12): every focus ring also draws a transparent outline, which Windows high contrast shows; the
 * breakdown follows Figma (desktop 162434:14089, phone sheet 162434:14899); the guide's grey on #F8F8F8 is #6E6E73.
 * Deliberate differences from Figma, with their reasons: the phone dock's tax line is 15/20 in a lighter grey
 * (usability test: the price with tax is what many visitors pay); the phone lead keeps 32 above "Your project"
 * (Figma 56), because the dock already covers the first question on a 659px screen.
 */

/* One weight, the theme's Euclid Circular A Regular, as everywhere on the site (Daniel, 2026-10-16: no bold; the
   Medium figures and their font are gone). */

.wgc {
  --wgc-ink: #000;
  --wgc-black: #111;
  --wgc-grey: #757677;
  --wgc-grey-on-tint: #6E6E73;
  --wgc-grey-on-dark: #808080;
  --wgc-tint: #F8F8F8;
  --wgc-tint-hover: #F3F3F3;
  --wgc-rule: #E2E3E6;
  --wgc-rule-dark: #333;
  --wgc-blue: #0967F4;
  --wgc-col: calc(33.333% - 20px);
  --wgc-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --wgc-ease-out: cubic-bezier(0.23, 1, 0.32, 1); /* strong ease-out (Emil Kowalski's animate skill) */
  --wgc-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); /* iOS-like drawer curve (Emil Kowalski's animate skill) */
  color: var(--wgc-ink);
}

html { scroll-padding-top: 94px; scroll-padding-bottom: calc(var(--wgc-dock, 0px) + env(safe-area-inset-bottom, 0px)); }
/* 1020-1280: the theme takes the hero's top padding away; its two-line title then touched the header (QA 2026-10-16) */
@media (min-width: 1020px) and (max-width: 1280px) { .page-template-page-calculator .hero-wrapper .section--hero { padding-top: 40px; } }

.wgc .wgc-icon { display: block; flex: none; }
.wgc [hidden] { display: none !important; }

/* Without JavaScript: the typical estimate, and nothing that needs the script. */
.wgc:not(.is-ready) .wgc-dock, .wgc:not(.is-ready) .wgc-drawer,
.wgc:not(.is-ready) .wgc-est__actions, .wgc:not(.is-ready) .wgc-est__status { display: none !important; }
html:not(.wgc-js) [data-use-answers] { display: none; }

/* The guide's grey text on #F8F8F8 bands: #6E6E73 (4.78:1) for the theme's #757677 (4.29:1). This page only. */
.page-template-templatespage-calculator-php .bg-secondary,
.page-template-templatespage-calculator-php .bg-secondary :is(.text__content, .grid-3__item p, .section__text > p) { color: #6E6E73; }

/* ---------- groups and questions ---------- */

.wgc .wgc-group { padding-top: 120px; }
.wgc .wgc-group--first { padding-top: 74px; }
.wgc .wgc-group__head { padding-bottom: 30px; }
.wgc .wgc-group__title { margin: 0; color: var(--wgc-ink); }
.wgc .wgc-group__title:focus { outline: none; }
/* the first head is the theme's section head (.section__text.text.d-flex.d-flex--sb), as on the home page: heading
   left, description right, below it on phones, in the theme's sizes (Daniel, 2026-10-19) */
.wgc .wgc-group__lead { margin: 0; color: var(--wgc-grey); }
.wgc .wgc-form > .wgc-group:last-child { padding-bottom: 120px; }

.wgc .wgc-q {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  padding: 50px 0;
  border-top: 1px solid var(--wgc-rule);
}
.wgc .wgc-q__title { margin: 0; color: var(--wgc-ink); }
.wgc .wgc-q__help { margin: 12px 0 0; color: var(--wgc-grey); }
.wgc .wgc-q__control { min-width: 0; }
/* the store's follow-ups, one step smaller (Figma 162433:14078) */
.wgc .wgc-q--follow { border-top: 0; padding: 30px 0; }
.wgc .wgc-q--follow .wgc-q__title { font-size: 28px; line-height: 34px; letter-spacing: -1px; }
.wgc .wgc-q--follow .wgc-q__help { font-size: 17px; line-height: 24px; letter-spacing: -0.6px; }

/* a focused answer scrolls clear of the header and the dock */
.wgc .wgc-tile__input, .wgc .wgc-check__input { scroll-margin-top: 100px; scroll-margin-bottom: calc(var(--wgc-dock, 0px) + 140px); }

@media (min-width: 1113px) {
  .wgc .wgc-q { grid-template-columns: var(--wgc-col) 1fr; gap: 30px; }
  .wgc .wgc-q--follow .wgc-q__text { padding-left: 40px; }
}

/* the rows (Daniel, 2026-10-18): where the dock's Next question goes sits on a soft band, a required question still
   without an answer at the end on a warm one, with no line of text (Daniel: "i dont think we need to write in text";
   screen readers still hear it). The band is a layer under the row, 20px into the gutter (10px on phones), so nothing
   moves when it comes or goes. It stops 8px short of the row's top and bottom (5px on phones), so two bands in a row
   keep the tiles' gap between them (Daniel: "a bit of spacing between those"). The answers on it turn white. Colours
   change in 250ms. */
.wgc { --wgc-skip-bg: #FEF2EB; } /* a tint of the Webgamma orange */
.wgc .wgc-q { position: relative; isolation: isolate; transition: border-color 250ms var(--wgc-ease-out); }
.wgc .wgc-q::before {
  content: ""; position: absolute; inset: 8px -20px; z-index: -1; border-radius: 24px; pointer-events: none;
  background-color: transparent; transition: background-color 250ms var(--wgc-ease-out);
}
.wgc .wgc-q.is-next, .wgc .wgc-q.is-skipped, .wgc .wgc-q.is-next + .wgc-q, .wgc .wgc-q.is-skipped + .wgc-q { border-top-color: transparent; }
.wgc .wgc-q.is-next::before { background-color: var(--wgc-tint); }
.wgc .wgc-q.is-skipped::before { background-color: var(--wgc-skip-bg); }
.wgc .wgc-q.is-next .wgc-tile:not(.is-checked), .wgc .wgc-q.is-skipped .wgc-tile:not(.is-checked),
.wgc .wgc-q.is-next .wgc-select__input, .wgc .wgc-q.is-skipped .wgc-select__input,
.wgc .wgc-q.is-next .wgc-toggle, .wgc .wgc-q.is-skipped .wgc-toggle { background: #fff; }
.wgc .wgc-tile, .wgc .wgc-select__input { transition-property: background-color, color, border-color, box-shadow; }
/* the theme's gutter is 16px up to 1024px (30px above), so the band reaches 10px into it there: 20px scrolled the
   page 4px sideways (page check, 2026-10-19) */
@media (max-width: 1024px) {
  .wgc .wgc-q::before { left: -10px; right: -10px; }
}
@media (max-width: 781px) {
  .wgc .wgc-q::before { inset: 5px -10px; border-radius: 20px; }
}
@media (prefers-reduced-motion: reduce) { .wgc .wgc-q, .wgc .wgc-q::before { transition: none; } }

/* ---------- notes ---------- */

.wgc .wgc-note { display: flex; align-items: flex-start; gap: 10px; margin: 16px 0 0; font-size: 17px; line-height: 24px; letter-spacing: -0.4px; color: var(--wgc-ink); }
.wgc .wgc-note .wgc-icon { margin-top: 2px; }

/* ---------- tags ---------- */

.wgc .wgc-tag {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 3px 10px; border-radius: 100px;
  background: #fff; color: var(--wgc-ink);
  font-size: 13px; line-height: 18px; letter-spacing: -0.2px; font-weight: 400;
}
.wgc .wgc-tag .wgc-icon { display: none; }
.wgc .wgc-tag.is-required .wgc-icon { display: block; }
.wgc .wgc-checks .wgc-tag { background: var(--wgc-tint); }

/* ---------- single-choice tiles ---------- */

.wgc .wgc-tiles { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wgc .wgc-tiles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wgc .wgc-tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (min-width: 782px) {
  /* Quebec hides "One language": the other two tiles share the row (Figma 162433:13924) */
  .wgc .wgc-tiles--3:has(> .wgc-tile[hidden]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.wgc .wgc-tile {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-template-areas: "icon tag mark" "label label label" "desc desc desc" "price price price";
  grid-template-rows: auto auto 1fr auto;
  column-gap: 8px;
  align-content: start;
  row-gap: 2px;
  min-height: 130px;
  margin: 0;
  padding: 20px;
  border-radius: 20px;
  background: var(--wgc-tint);
  color: var(--wgc-ink);
  cursor: pointer;
  transition: background-color 150ms ease-out, color 150ms ease-out;
}
@media (hover: hover) and (pointer: fine) { .wgc .wgc-tile:hover { background: var(--wgc-tint-hover); } }
.wgc .wgc-tile__input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.wgc .wgc-tile__top { display: contents; }
.wgc .wgc-tile .wgc-mark { grid-area: mark; margin-bottom: 14px; }
.wgc .wgc-tile .wgc-tag { grid-area: tag; align-self: start; justify-self: end; }
/* answer icons: the bare glyph, no square (Daniel, 2026-10-13: "it was fine without it") */
.wgc .wgc-tile__icon { grid-area: icon; display: flex; color: var(--wgc-ink); margin-bottom: 14px; }
.wgc .wgc-tile.is-checked .wgc-tile__icon, .wgc .wgc-tile.is-required .wgc-tile__icon { color: #fff; }
.wgc .wgc-ri { display: block; flex: none; width: 24px; height: 24px; max-width: none; }
.wgc .wgc-tile__label { grid-area: label; font-size: 20px; line-height: 30px; letter-spacing: -0.8px; }
.wgc .wgc-tile__desc { grid-area: desc; align-self: start; font-size: 17px; line-height: 24px; letter-spacing: -0.4px; color: var(--wgc-grey-on-tint); }
.wgc .wgc-tile__price { grid-area: price; font-size: 17px; line-height: 24px; letter-spacing: -0.4px; color: var(--wgc-grey-on-tint); }
.wgc .wgc-tile__price { min-height: 24px; } /* its line is kept when empty, so a tile never changes height as answers change (Daniel, 2026-10-15) */
.wgc [data-q="ontario"] .wgc-tile__price { display: none; } /* these never have a price, so no empty line under the label */
@media (min-width: 1113px) and (max-width: 1279px) { .wgc .wgc-tiles--4 .wgc-tile__price { min-height: 48px; } } /* narrow four-up tiles: a price may take two lines */

.wgc .wgc-mark {
  width: 26px; height: 26px; border-radius: 50%;
  background: #fff; border: 1px solid var(--wgc-grey);
  display: grid; place-items: center;
  transition: border-color 150ms ease-out;
}
@media (hover: hover) and (pointer: fine) { .wgc .wgc-tile:hover .wgc-mark { border-color: #000; } }
.wgc .wgc-tile.is-checked, .wgc .wgc-tile.is-required { background: var(--wgc-black); color: #fff; cursor: default; }
.wgc .wgc-tile.is-checked .wgc-tile__desc, .wgc .wgc-tile.is-required .wgc-tile__desc,
.wgc .wgc-tile.is-checked .wgc-tile__price, .wgc .wgc-tile.is-required .wgc-tile__price { color: var(--wgc-grey-on-dark); }
.wgc .wgc-tile.is-checked .wgc-mark, .wgc .wgc-tile.is-required .wgc-mark { border-color: #fff; }
.wgc .wgc-tile.is-checked .wgc-mark::after, .wgc .wgc-tile.is-required .wgc-mark::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--wgc-black); }
.wgc .wgc-tile.is-checked .wgc-tag, .wgc .wgc-tile.is-required .wgc-tag { background: var(--wgc-rule-dark); color: #fff; }
.wgc .wgc-tile.is-disabled { cursor: not-allowed; background: var(--wgc-tint); }
.wgc .wgc-tile.is-disabled .wgc-tile__label { color: var(--wgc-grey-on-tint); }
.wgc .wgc-tile.is-disabled .wgc-mark { opacity: 0.5; }
.wgc .wgc-tile:has(.wgc-tile__input:focus-visible) { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wgc-blue); outline: 2px solid transparent; outline-offset: 2px; }

/* ---------- pick-any checklists ---------- */

.wgc .wgc-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 31px; }
.wgc .wgc-check {
  position: relative;
  display: grid; grid-template-columns: 26px 22px minmax(0, 1fr); column-gap: 12px; align-items: start;
  margin: 0;
  padding: 20px 0;
  border-top: 1px solid var(--wgc-rule);
  color: var(--wgc-ink);
  cursor: pointer;
}
.wgc .wgc-check__input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.wgc .wgc-check__box {
  width: 26px; height: 26px; border-radius: 6px;
  background: #fff; border: 1px solid var(--wgc-grey); color: #fff;
  display: grid; place-items: center;
  transition: background-color 150ms ease-out, border-color 150ms ease-out;
}
.wgc .wgc-check__box .wgc-icon { opacity: 0; }
@media (hover: hover) and (pointer: fine) { .wgc .wgc-check:hover .wgc-check__box { border-color: #000; } }
.wgc .wgc-check.is-checked .wgc-check__box { background: var(--wgc-black); border-color: var(--wgc-black); }
.wgc .wgc-check.is-checked .wgc-check__box .wgc-icon { opacity: 1; }
.wgc .wgc-check > .wgc-check__box { grid-column: 1; margin-top: 2px; } /* centred on the label's 30px first line */
.wgc .wgc-check__text { grid-column: 3; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wgc .wgc-check__icon { grid-column: 2; display: flex; margin-top: 4px; color: var(--wgc-ink); }
.wgc .wgc-check__icon .wgc-ri { width: 22px; height: 22px; }
.wgc .wgc-check__label { font-size: 20px; line-height: 30px; letter-spacing: -0.8px; }
.wgc .wgc-check__desc, .wgc .wgc-check__price { font-size: 17px; line-height: 24px; letter-spacing: -0.4px; color: var(--wgc-grey); }
.wgc .wgc-check__price { min-height: 24px; }
.wgc .wgc-check:has(.wgc-check__input:focus-visible) .wgc-check__box { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wgc-blue); outline: 2px solid transparent; outline-offset: 2px; }

.wgc .wgc-toggle { display: none; }

/* ---------- province select ---------- */

.wgc .wgc-select { position: relative; max-width: 500px; }
.wgc .wgc-select__input {
  appearance: none; -webkit-appearance: none;
  width: 100%; height: 60px; padding: 0 52px 0 20px;
  border: 0; border-radius: 20px; background: var(--wgc-tint); color: var(--wgc-ink);
  font: inherit; font-size: 20px; line-height: 30px; letter-spacing: -0.8px;
  cursor: pointer;
}
.wgc .wgc-select__input:has(option[value=""]:checked) { color: var(--wgc-grey-on-tint); }
.wgc .wgc-select__input option { color: #000; }
@media (hover: hover) and (pointer: fine) { .wgc .wgc-select__input:hover { background: var(--wgc-tint-hover); } }
.wgc .wgc-select__input:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wgc-blue); }
.wgc .wgc-select .wgc-icon { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); pointer-events: none; }

/* ---------- "Your estimate" ---------- */

.wgc .wgc-est { background: #000; color: #fff; padding: 100px 0; }
.wgc .wgc-est__title { margin: 0 0 50px; color: #fff; }
.wgc .wgc-est__row { display: block; }
.wgc .wgc-est__empty { margin: 0; max-width: 30ch; color: var(--wgc-grey-on-dark); font-size: 36px; line-height: 40px; letter-spacing: -1.6px; }
.wgc .wgc-est__range { margin: 0; color: #fff; font-size: 100px; line-height: 100px; letter-spacing: -4px; font-weight: 400; font-variant-numeric: tabular-nums; }
.wgc .wgc-est__tax { margin: 20px 0 0; font-size: 24px; line-height: 30px; letter-spacing: -1px; color: var(--wgc-grey-on-dark); }
/* Based in's fields are labels: the theme gives every label 0.25em below (3.25px at 13px), which put the open card and
   everything in it on quarter pixels, and a real iPhone moved its text a pixel when the opening animation ended */
.wgc .wgc-where__field { margin: 0; }
.wgc .wgc-cur-slot { visibility: hidden; } /* the currency's place before a country is chosen (calculator.js) */
.wgc .wgc-est__status { margin: 8px 0 0; font-size: 20px; line-height: 30px; letter-spacing: -0.8px; color: var(--wgc-grey-on-dark); }
.wgc .wgc-est__noscript { margin: 24px 0 0; font-size: 20px; line-height: 30px; letter-spacing: -0.8px; color: #fff; }
.wgc .wgc-est__review, .wgc .wgc-est__add { color: #fff; font-size: inherit; line-height: inherit; letter-spacing: inherit; }
.wgc .wgc-est__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 40px; }
.wgc .wgc-btn { display: inline-flex; align-items: center; justify-content: center; height: 60px; cursor: pointer; }
.wgc .wgc-btn:disabled { cursor: progress; opacity: 0.6; }
.wgc .button.wgc-btn--outline { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px var(--wgc-grey) !important; }
@media (hover: hover) and (pointer: fine) { .wgc .button.wgc-btn--outline:hover { background: #1D1D1F; } }
/* text buttons: a 44px target without moving the line (padding taken back by the margin) */
.wgc .wgc-link { display: inline-block; background: none; border: 0; padding: 10px 0; margin: -10px 0; color: inherit; font: inherit; font-size: 17px; line-height: 24px; letter-spacing: -0.4px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.wgc .wgc-est__rule .wgc-link, .wgc .wgc-est__status .wgc-link { font-size: inherit; line-height: inherit; letter-spacing: inherit; }
.wgc .button:focus-visible, .wgc .wgc-link:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wgc-blue) !important; border-radius: 100px; }

.wgc .wgc-est__label { margin: 0 0 4px; font-size: 15px; line-height: 24px; letter-spacing: -0.4px; color: var(--wgc-grey-on-dark); }
.wgc .wgc-lines { margin: 0; }
.wgc .wgc-line { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--wgc-rule-dark); color: #fff; font-size: 17px; line-height: 24px; letter-spacing: -0.4px; }
.wgc .wgc-line dt { margin: 0; font-weight: 400; }
.wgc .wgc-line dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wgc .wgc-line--key dt { color: var(--wgc-grey-on-dark); }
.wgc .wgc-line--key dd { white-space: normal; max-width: 60%; }
/* what's in the price: one row that folds the breakdown and the timeline open (Daniel, 2026-10-16: nothing that distracts) */
.wgc .wgc-est__more { max-width: 760px; margin-top: 48px; border-top: 1px solid var(--wgc-rule-dark); border-bottom: 1px solid var(--wgc-rule-dark); }
.wgc .wgc-est__more > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0; padding: 20px 0; list-style: none; cursor: pointer;
  color: #fff; font-size: 20px; line-height: 30px; letter-spacing: -0.8px;
}
.wgc .wgc-est__more > summary::-webkit-details-marker { display: none; }
.wgc .wgc-est__more > summary .wgc-icon { flex: none; transition: transform 200ms var(--wgc-ease); }
.wgc .wgc-est__more[open] > summary .wgc-icon { transform: rotate(180deg); }
.wgc .wgc-est__more > summary:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: 0 0 0 2px #000, 0 0 0 4px var(--wgc-blue); border-radius: 4px; }
.wgc .wgc-est__more .wgc-lines--extra { padding-bottom: 8px; }
@media (prefers-reduced-motion: reduce) { .wgc .wgc-est__more > summary .wgc-icon { transition: none; } }
/* "Your estimate": a price that has to break breaks after "to", never before its currency */
.wgc .wgc-nowrap { white-space: nowrap; }

@media (min-width: 1113px) {
}

.wgc .wgc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* the link to copy by hand when the clipboard is blocked */
.wgc .wgc-copy-fallback { display: flex; flex-direction: column; gap: 6px; width: 100%; margin-top: 8px; font-size: 15px; line-height: 22px; color: var(--wgc-grey-on-dark); }
.wgc .wgc-copy-fallback input { width: 100%; height: 44px; padding: 0 12px; border: 0; border-radius: 10px; background: var(--wgc-tint); color: var(--wgc-ink); font: inherit; font-size: 15px; }

/* ---------- the dock ---------- */

.wgc .wgc-dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: var(--wgc-black); color: #fff;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -6px 13px rgba(0, 0, 0, 0.12), 0 -0.5px 4px rgba(0, 0, 0, 0.12);
  transform: translateY(0);
  transition: transform 200ms var(--wgc-ease), visibility 0s;
}
/* out of view (and, in calculator.js, out of the tab order) once "Your estimate" is on screen */
.wgc .wgc-dock.is-landed { transform: translateY(110%); visibility: hidden; transition: transform 200ms var(--wgc-ease), visibility 0s linear 200ms; }
.wgc .wgc-dock__grip, .wgc .wgc-dock__more, .wgc-layer .wgc-scrim { display: none; }
body.menu-toggled .wgc-layer .wgc-dock, body.popup-active .wgc-layer .wgc-dock { transform: translateY(110%); visibility: hidden; transition: transform 200ms var(--wgc-ease), visibility 0s linear 200ms; }
.wgc .wgc-dock.is-empty .wgc-dock__range { color: #fff; }
.wgc .wgc-dock.is-empty .wgc-dock__summary .wgc-dock__text:empty { display: none; }
.wgc .wgc-dock__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 30px; background: var(--wgc-black); border-radius: 20px 20px 0 0; }
.wgc .wgc-dock__price { display: flex; flex-direction: column; gap: 2px; flex: 0 1 auto; min-width: 0; }
.wgc .wgc-dock__range { font-size: 36px; line-height: 40px; letter-spacing: -1.6px; font-weight: 400; font-variant-numeric: tabular-nums; }
.wgc .wgc-dock__sub { font-size: 15px; line-height: 24px; letter-spacing: -0.4px; color: var(--wgc-grey-on-dark); }
.wgc .wgc-dock__summary { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-left: 24px; border-left: 1px solid var(--wgc-rule-dark); }
.wgc .wgc-dock__text { font-size: 17px; line-height: 24px; letter-spacing: -0.4px; }
.wgc .wgc-dock__status { font-size: 15px; line-height: 24px; letter-spacing: -0.4px; color: var(--wgc-grey-on-dark); }
.wgc .wgc-dock__actions { display: flex; gap: 10px; flex: none; }
.wgc .wgc-pill {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 20px; border-radius: 100px;
  font: inherit; font-size: 15px; line-height: 24px; letter-spacing: -0.4px; cursor: pointer;
  transition: background-color 150ms ease-out;
}
.wgc .wgc-pill::before { content: ""; position: absolute; inset: -3px 0; } /* a 44px+ target around the 38-42px pill */
.wgc .wgc-pill--ghost { background: transparent; color: #fff; border: 1px solid var(--wgc-grey); }
@media (hover: hover) and (pointer: fine) { .wgc .wgc-pill--ghost:hover { background: #1D1D1F; } }
.wgc .wgc-pill--solid { background: #fff; color: #000; border: 0; }
@media (hover: hover) and (pointer: fine) { .wgc .wgc-pill--solid:hover { background: #DEDEDE; } }
.wgc .wgc-pill:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: 0 0 0 2px var(--wgc-black), 0 0 0 4px var(--wgc-blue); }
.wgc .wgc-pill__phone { display: none; }
.wgc .wgc-pill .wgc-icon--chevron { transition: transform 200ms ease-out; }
.wgc .wgc-pill[aria-expanded="true"] .wgc-icon--chevron { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
  .wgc .wgc-dock, .wgc .wgc-dock.is-landed, .wgc .wgc-tile, .wgc .wgc-check__box, .wgc .wgc-pill .wgc-icon--chevron { transition: none; }
  .wgc .wgc-dock__more, .wgc-layer .wgc-scrim { transition-duration: 150ms; } /* the sheet jumps; the dimming still fades */
}

/* ---------- tables in the guide ---------- */

.wgc-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.wgc-table th, .wgc-table td { padding: 16px 0; border-top: 1px solid #E2E3E6; text-align: left; vertical-align: top; font-weight: 400; color: #000; }
.wgc-table thead th { font-size: 20px; line-height: 30px; letter-spacing: -0.8px; color: #757677; }
.wgc-table tbody th { padding-right: 30px; font-size: 24px; line-height: 30px; letter-spacing: -1px; }
.wgc-table thead th:first-child, .wgc-table tbody th { width: calc(33.333% + 10px); }
.wgc-table td.wgc-table__text { padding-right: 30px; font-size: 20px; line-height: 30px; letter-spacing: -0.8px; color: #757677; }
.wgc-table .wgc-table__num { width: 300px; text-align: right; font-size: 24px; line-height: 30px; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.wgc-table thead .wgc-table__num { font-size: 20px; }
.wgc-table--examples thead th:last-child, .wgc-table .wgc-table__act { width: 200px; text-align: right; }
.wgc-table .wgc-table__act .wgc-link { display: inline-block; color: #000; background: none; border: 0; padding: 10px 0; margin: -10px 0; font: inherit; font-size: 17px; line-height: 24px; letter-spacing: -0.4px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.wgc-table .wgc-table__act .wgc-link:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #0967F4; border-radius: 4px; }
/* Between 782 and 1279px the theme sizes every button 16-20px (!important, theme.css "Buttons, fs-20 text and form
   fields"), so the dock's pills read 16-20px beside its 15px "Start a project" link (QA 2026-10-18). The calculator's
   own buttons keep their sizes there; the estimate's big buttons follow the site's buttons. */
@media (min-width: 782px) and (max-width: 1279px) {
  .wgc .wgc-pill { font-size: 15px !important; line-height: 24px !important; letter-spacing: -0.4px !important; }
  .wgc .wgc-link, .wgc-table .wgc-table__act .wgc-link { font-size: 17px !important; line-height: 24px !important; letter-spacing: -0.4px !important; }
  .wgc .wgc-est__rule .wgc-link, .wgc .wgc-est__status .wgc-link, .wgc .wgc-est__review, .wgc .wgc-est__add { font-size: inherit !important; line-height: inherit !important; letter-spacing: inherit !important; }
}
.wgc-table--provinces .wgc-table__num { width: 260px; }
.wgc-table__note { margin: 16px 0 0; font-size: 17px; line-height: 24px; letter-spacing: -0.4px; color: #757677; }
.wgc-byline p { margin: 0; font-size: 17px; line-height: 24px; letter-spacing: -0.4px; color: #757677; }

/* the "after launch" grid: 2 by 2, like the theme's grid-4 */
@media (min-width: 782px) {
  .wgc-grid-2 .grid-3__item { flex: 0 0 calc(50% - 15px); }
}

/* this page's closing section; its button gets the page's focus ring */
.page-template-templatespage-calculator-php .section__text .button:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #0967F4 !important; } /* the theme's .button has box-shadow: none !important */
.wgc-cta-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 28px; margin: 30px 0 0; padding: 0; list-style: none; }
.wgc-cta-links a { display: inline-block; padding: 10px 0; color: #000; font-size: 17px; line-height: 24px; letter-spacing: -0.4px; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Windows high contrast: the selected answer and focus stay visible ---------- */

@media (forced-colors: active) {
  .wgc .wgc-tile { border: 1px solid CanvasText; }
  .wgc .wgc-tile.is-checked, .wgc .wgc-tile.is-required { outline: 3px solid Highlight; outline-offset: -3px; }
  .wgc .wgc-mark, .wgc .wgc-check__box { border-color: CanvasText; }
  .wgc .wgc-tile.is-checked .wgc-mark::after, .wgc .wgc-tile.is-required .wgc-mark::after { forced-color-adjust: none; background: Highlight; }
  .wgc .wgc-dock { border-top: 1px solid CanvasText; }
}

/* ---------- tablets ---------- */

@media (min-width: 782px) and (max-width: 1112px) {
  .wgc .wgc-dock__inner { padding: 16px; }
  .wgc-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .wgc-table, .wgc-table tbody, .wgc-table tr { display: block; width: 100%; }
  .wgc-table tr { display: grid; grid-template-columns: 1fr auto; column-gap: 24px; padding: 20px 0; border-top: 1px solid #E2E3E6; }
  .wgc-table th, .wgc-table td { padding: 0; border: 0; }
  .wgc-table tbody th { width: auto; padding: 0; }
  .wgc-table .wgc-table__num { width: auto; grid-column: 2; grid-row: 1; }
  .wgc-table td.wgc-table__text { grid-column: 1 / -1; padding: 6px 0 0; }
  .wgc-table .wgc-table__act { width: auto; grid-column: 1 / -1; text-align: left; padding-top: 8px; }
  .wgc .wgc-tiles--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wgc .wgc-est__range { font-size: 72px; line-height: 76px; letter-spacing: -3px; }
  .wgc .wgc-dock__summary { display: none; }
}

/* laptops: the estimate's range stays on one line */
@media (min-width: 1113px) and (max-width: 1439px) {
  .wgc .wgc-est__range { font-size: 80px; line-height: 84px; letter-spacing: -3.2px; }
}

/* short landscape screens: a compact dock */
@media (min-width: 782px) and (max-height: 500px) {
  .wgc .wgc-dock__inner { padding: 10px 24px; }
  .wgc .wgc-dock__range { font-size: 24px; line-height: 28px; letter-spacing: -0.8px; }
  .wgc .wgc-dock__summary { display: none; }
}

/* ---------- phones ---------- */

@media (max-width: 781px) {
  html { scroll-padding-top: 70px; }
  .wgc .wgc-group { padding-top: 64px; }
  .wgc .wgc-group--first { padding-top: 32px; }
  .wgc .wgc-group__head { padding-bottom: 18px; }
  .wgc .wgc-form > .wgc-group:last-child { padding-bottom: 64px; }
  .wgc .wgc-q { padding: 32px 0; gap: 18px; }
  .wgc .wgc-q__help { margin-top: 8px; }
  .wgc .wgc-q--follow { padding: 16px 0; }
  .wgc .wgc-q--follow .wgc-q__title { font-size: 20px; line-height: 26px; letter-spacing: -0.8px; }
  .wgc .wgc-q--follow .wgc-q__help { font-size: 15px; line-height: 22px; letter-spacing: -0.3px; }
  .wgc .wgc-note { margin-top: 10px; }

  .wgc .wgc-tiles, .wgc .wgc-tiles--2, .wgc .wgc-tiles--4 { grid-template-columns: 1fr; gap: 10px; }
  /* less text on phones (Daniel, 2026-10-12): no option descriptions, help only where it changes the answer */
  .wgc .wgc-tile__desc, .wgc .wgc-check__desc, .wgc .wgc-q:not(.wgc-q--keep-help) .wgc-q__help { display: none; }
  /* spacer rows above and below centre the label (and its price line, when shown) on the icon */
  .wgc .wgc-tile { grid-template-columns: 24px 1fr auto auto; grid-template-rows: 1fr auto auto 1fr; grid-template-areas: "icon . tag mark" "icon label tag mark" "icon price tag mark" "icon . tag mark"; column-gap: 12px; row-gap: 0; align-items: center; min-height: 0; padding: 14px 16px; }
  .wgc .wgc-tile__icon { margin-bottom: 0; }
  .wgc .wgc-tile .wgc-mark { margin-bottom: 0; width: 22px; height: 22px; }
  .wgc .wgc-tile .wgc-tag { display: none; }
  .wgc .wgc-tile__label { font-size: 17px; line-height: 22px; letter-spacing: -0.6px; }
  .wgc .wgc-tile__desc, .wgc .wgc-tile__price { font-size: 15px; line-height: 22px; letter-spacing: -0.3px; }
  .wgc .wgc-tile__price { min-height: 22px; }

  .wgc .wgc-checks { grid-template-columns: 1fr; }
  /* the box and the icon at the icon's 22px, on the label's line, with the price under the label (Daniel, 2026-10-15) */
  .wgc .wgc-check { padding: 14px 0; grid-template-columns: 22px 22px minmax(0, 1fr); column-gap: 12px; align-items: start; }
  .wgc .wgc-check > .wgc-check__box, .wgc .wgc-check__icon { margin-top: 0; }
  .wgc .wgc-check__box { width: 22px; height: 22px; border-radius: 5px; }
  .wgc .wgc-check__price { min-height: 22px; }
  .wgc .wgc-check__label { font-size: 17px; line-height: 22px; letter-spacing: -0.6px; }
  .wgc .wgc-check__desc, .wgc .wgc-check__price { font-size: 15px; line-height: 22px; letter-spacing: -0.3px; }
  .wgc.is-ready .wgc-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; height: 54px; padding: 0 16px 0 20px;
    border: 0; border-radius: 20px; background: var(--wgc-tint); color: var(--wgc-ink);
    font: inherit; font-size: 16px; line-height: 22px; letter-spacing: -0.6px; cursor: pointer;
  }
  .wgc .wgc-toggle__open { display: inline-flex; align-items: center; gap: 4px; }
  .wgc .wgc-toggle[aria-expanded="true"] .wgc-icon { transform: rotate(180deg); }
  .wgc .wgc-toggle:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wgc-blue); }
  .wgc.is-ready #wgc-tools:not(.is-open) { display: none; }
  .wgc.is-ready #wgc-tools.is-open { margin-top: 10px; }

  .wgc .wgc-select { max-width: none; }
  /* fields at the contact form's size on phones: 54px, 16/22 type, 20px in (Daniel, 2026-10-16: "the input fields are too big") */
  .wgc .wgc-select__input { height: 54px; font-size: 16px; line-height: 22px; letter-spacing: -0.6px; }

  /* "Your estimate" on phones: the price, its tax, the two actions, what's in it */
  .wgc .wgc-est { padding: 64px 0; }
  .wgc .wgc-est__title { margin-bottom: 16px; }
  .wgc .wgc-est__range { font-size: 40px; line-height: 44px; letter-spacing: -1.6px; }
  .wgc .wgc-est__tax { margin-top: 12px; font-size: 17px; line-height: 22px; letter-spacing: -0.6px; }
  .wgc .wgc-est__status { font-size: 15px; line-height: 22px; letter-spacing: -0.4px; }
  .wgc .wgc-est__actions { flex-direction: column; align-items: stretch; margin-top: 28px; }
  .wgc .wgc-est__more { margin-top: 32px; }
  .wgc .wgc-est__more > summary { padding: 16px 0; font-size: 17px; line-height: 22px; letter-spacing: -0.6px; }
  .wgc .wgc-btn { height: 51px; }
  .wgc .wgc-line { font-size: 15px; line-height: 22px; }
  .wgc .wgc-line--key { flex-direction: column; gap: 2px; }
  .wgc .wgc-line--key dd { text-align: left; max-width: none; }

  /* The bar on phones is a bottom sheet, as in apps (Daniel, 2026-10-13: "like it's in apps", the HC demo's Vaul
     drawer). Closed: a grab line, the price, one line, one button; the line's strip drags it, a tap on it or on the
     price opens it, and the rest of the bar scrolls the page. Open: the whole sheet rises (transform only), the page
     dims and stops scrolling, and a drag down anywhere on the sheet, a tap on the dimmed page or Escape lowers it.
     Vaul's motion: 500ms on the drawer curve. calculator.js sets --wgc-travel, the height of what the sheet opens,
     and moves the sheet with the finger. */
  .wgc .wgc-dock {
    padding-bottom: env(safe-area-inset-bottom, 0px);
    touch-action: pan-y;
    transform: translate3d(0, var(--wgc-travel, 0px), 0);
    transition: transform 500ms var(--wgc-ease-drawer), visibility 0s;
    will-change: transform;
  }
  /* a pull past the top never shows a gap under the sheet (Vaul does the same) */
  .wgc .wgc-dock::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 200px; background: inherit; pointer-events: none; }
  .wgc .wgc-dock.is-expanded { transform: translate3d(0, 0, 0); }
  .wgc .wgc-dock:not(.is-empty) { touch-action: none; }
  .wgc .wgc-dock.is-dragging { cursor: grabbing; -webkit-user-select: none; user-select: none; }
  .wgc .wgc-dock.is-dragging, .wgc .wgc-dock.is-dragging .wgc-dock__more, .wgc-layer.is-dragging .wgc-scrim { transition: none; }

  .wgc .wgc-dock__grip { position: relative; display: block; width: 100%; height: 22px; padding: 0; border: 0; border-radius: 20px 20px 0 0; background: none; cursor: grab; touch-action: none; -webkit-tap-highlight-color: transparent; }
  .wgc .wgc-dock__grip::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; bottom: 0; } /* a 30px strip to grab */
  .wgc .wgc-dock__grip:focus-visible { outline: 2px solid var(--wgc-blue); outline-offset: -4px; }
  .wgc .wgc-dock.is-empty .wgc-dock__grip { visibility: hidden; } /* nothing to open before the first answer */
  /* the grab line, the same closed and open (Daniel, 2026-10-13: "it was fine having just a line") */
  .wgc .wgc-grabber { position: absolute; top: 8px; left: 50%; width: 36px; height: 5px; margin-left: -18px; border-radius: 3px; background: var(--wgc-grey-on-dark); pointer-events: none; }

  .wgc .wgc-dock__inner { align-items: center; padding: 0 16px 14px; gap: 12px; }
  .wgc .wgc-dock:not(.is-empty) .wgc-dock__price { cursor: pointer; }
  .wgc .wgc-dock__price { flex: 1 1 auto; min-width: 0; }
  .wgc .wgc-dock__range { font-size: 24px; line-height: 30px; letter-spacing: -0.8px; }
  .wgc .wgc-dock__sub { font-size: 15px; line-height: 20px; letter-spacing: -0.3px; color: #A1A1A6; }
  .wgc .wgc-dock__summary, .wgc .wgc-dock__actions [data-dock-email] { display: none !important; }
  .wgc .wgc-dock__actions { flex: none; }
  .wgc .wgc-dock:not(.is-empty) .wgc-dock__actions [data-next] { display: none; }
  .wgc .wgc-pill { height: 44px; padding: 0 20px; font-size: 15px; }
  .wgc .wgc-pill--ghost, .wgc .wgc-dock__actions .wgc-pill--solid { background: #fff; color: #000; border: 0; box-shadow: none; }
  .wgc .wgc-pill--outline { background: transparent; color: #fff; border: 0; box-shadow: inset 0 0 0 1px var(--wgc-grey); text-decoration: none; }
  .wgc .wgc-pill__desk { display: none; }
  .wgc .wgc-pill__phone { display: inline; }

  /* what the open sheet adds: label and value rows on hairlines, one note, two actions; it never scrolls */
  .wgc .wgc-dock__more { display: block; padding: 0 16px 16px; opacity: 0; transition: opacity 500ms var(--wgc-ease-drawer); }
  .wgc .wgc-dock.is-expanded .wgc-dock__more { opacity: 1; }
  .wgc .wgc-dock__rows { margin: 0; border-top: 1px solid var(--wgc-rule-dark); }
  .wgc .wgc-dock__row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 16px; padding: 12px 0; border-bottom: 1px solid var(--wgc-rule-dark); font-size: 15px; line-height: 20px; letter-spacing: -0.3px; }
  .wgc .wgc-dock__row dt { color: #A1A1A6; }
  .wgc .wgc-dock__row dd { margin: 0 0 0 auto; color: #fff; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .wgc .wgc-dock__note { margin: 12px 0 0; color: #A1A1A6; font-size: 15px; line-height: 20px; letter-spacing: -0.3px; }
  .wgc .wgc-dock__note:empty { display: none; }
  .wgc .wgc-dock__more-actions { display: flex; gap: 10px; margin-top: 16px; }
  .wgc .wgc-dock__more-actions .wgc-pill { flex: 1; justify-content: center; }

  /* behind the open card: catches the tap that closes it; no dimming, the card's shadow lifts it (Daniel, 2026-10-16).
     Only there while the card is open, and 6px short of the screen's top and bottom, so iOS 26 Safari never reads it
     for the colour around its address bar or above the nav (2026-10-18). */
  .wgc-layer .wgc-scrim { display: none; position: fixed; inset: 6px 0; z-index: 89; background: transparent; -webkit-tap-highlight-color: transparent; }
  .wgc-layer.is-sheet-open .wgc-scrim { display: block; }
  .wgc .wgc-est__empty { font-size: 22px; line-height: 28px; letter-spacing: -0.8px; }

  .wgc-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .wgc-table, .wgc-table tbody, .wgc-table tr { display: block; width: 100%; }
  .wgc-table tr { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; padding: 16px 0; border-top: 1px solid #E2E3E6; }
  .wgc-table th, .wgc-table td { padding: 0; border: 0; }
  .wgc-table tbody th { width: auto; padding: 0; font-size: 17px; line-height: 24px; letter-spacing: -0.6px; }
  .wgc-table .wgc-table__num { width: auto; grid-column: 2; grid-row: 1; font-size: 17px; line-height: 24px; letter-spacing: -0.6px; }
  .wgc-table td.wgc-table__text { grid-column: 1 / -1; padding: 6px 0 0; font-size: 15px; line-height: 22px; letter-spacing: -0.3px; }
  .wgc-table .wgc-table__act { width: auto; grid-column: 1 / -1; text-align: left; padding-top: 8px; }
  .wgc-table .wgc-table__act .wgc-link { font-size: 15px; }
  .wgc-table--provinces tr.is-plain .wgc-table__text { display: none; }
  .wgc-table__note { font-size: 15px; line-height: 22px; }
  .wgc-byline p { font-size: 15px; line-height: 22px; }
  .wgc-cta-links { gap: 0 20px; }
}

/* reduced motion on phones: the sheet jumps open and shut; the dimming and its rows still fade, briefly */
@media (max-width: 781px) and (prefers-reduced-motion: reduce) {
  .wgc .wgc-dock { transition: none; }
  .wgc .wgc-dock__more { transition-duration: 150ms; }
}

/* ---------- the island (0.8.0, Daniel 2026-10-15) ----------
   The dock is a black pill in the site's pill shape: the price, one line under it ("Early estimate · before tax ·
   Quebec") and the next step. Before any answer there is none; it rises in with the first price (250ms on
   --wgc-ease) and sinks away at "Your estimate". It opens as one object. On desktop "Details" (or the price) grows it
   upward from its own row, which never moves, into a panel of the same width. On phones the pill becomes the bottom
   sheet: today's motion and drag, the dimmed page. Figma: "Calculator dock · Island, refined (2026-10-15)". */

.wgc .wgc-pill--outline { background: transparent; color: #fff; border: 0; box-shadow: inset 0 0 0 1px var(--wgc-grey); text-decoration: none; justify-content: center; }
@media (hover: hover) and (pointer: fine) { .wgc .wgc-pill--outline:hover { background: #1D1D1F; } }
.wgc .wgc-dock__row dt { color: #A1A1A6; }
.wgc .wgc-dock__row dd { margin: 0 0 0 auto; color: #fff; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wgc .wgc-dock__note:empty { display: none; }

/* desktop and tablets: the island opens as the phone's card does (Daniel, 2026-10-16: "move up the price ... like it is
   on mobile"; Figma 162533:11257). 560 wide, 24px above the bottom, the phone's tab on top. Only its panel grows, so the
   bottom stays, the price rides up with the top edge into the heading, and the buttons stay at the bottom: the pill's
   button stretches into the right half, the panel's (Email, or Start a project before every answer) fills the left. */
@media (min-width: 782px) {
  .wgc .wgc-dock {
    --wgc-p: 0;
    --wgc-w: min(560px, calc(100vw - 48px));
    left: 50%; right: auto; bottom: 24px; width: var(--wgc-w); margin-left: calc(var(--wgc-w) / -2);
    display: flex; flex-direction: column; padding: 0; overflow: visible;
    background: var(--wgc-black); border-radius: 32px; box-shadow: none;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.12)) drop-shadow(0 16px 40px rgba(0, 0, 0, 0.22)); /* the tab gets it too */
    transform: none; opacity: 1;
    transition: transform 250ms var(--wgc-ease), opacity 250ms var(--wgc-ease), visibility 0s;
  }
  .wgc .wgc-dock::after { display: none; }
  .wgc .wgc-dock.is-expanded { --wgc-p: 1; }
  .wgc .wgc-dock.is-empty, .wgc .wgc-dock.is-landed,
  body.menu-toggled .wgc-layer .wgc-dock, body.popup-active .wgc-layer .wgc-dock {
    transform: translateY(16px); opacity: 0; visibility: hidden;
    transition: transform 200ms var(--wgc-ease), opacity 200ms var(--wgc-ease), visibility 0s linear 200ms;
  }
  /* desktop works with buttons, not the phone's tab (Daniel, 2026-10-16): "Details" opens it, the close button or a click
     outside closes it; the price still rides up into the heading */
  .wgc .wgc-dock__grip {
    display: none; position: absolute; top: -44px; left: 50%; z-index: 2; width: 96px; height: 46px; margin-left: -48px; padding: 0; border: 0; border-radius: 0; cursor: pointer;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 18'%3E%3Cpath fill='%23111' d='M0 16C14.4 16 9.6 0 24 0h48c14.4 0 9.6 16 24 16v2H0z'/%3E%3C/svg%3E") center bottom / 96px 18px no-repeat;
  }
  .wgc .wgc-grabber { position: absolute; top: 34px; left: 50%; width: 32px; height: 4px; margin-left: -16px; border-radius: 2px; background: var(--wgc-grey-on-dark); pointer-events: none; }
  .wgc .wgc-dock__grip:focus, .wgc .wgc-dock__grip:active { box-shadow: none; }
  .wgc .wgc-dock__grip:focus-visible { outline: 2px solid var(--wgc-blue); outline-offset: -4px; }
  /* the pill: the card's top 64px; the price is laid out as the open heading (36px, 24px in) and drawn at 17px in it */
  .wgc .wgc-dock__inner { display: block; position: static; flex: none; height: 64px; padding: 0; background: none; border-radius: 0; cursor: pointer; }
  .wgc .wgc-dock__price { position: absolute; left: 24px; top: 24px; display: block; pointer-events: none; }
  .wgc .wgc-dock__range, .wgc .wgc-dock__sub { display: block; white-space: nowrap; transform-origin: 0 0; transition: transform 350ms var(--wgc-ease-drawer); }
  .wgc .wgc-dock__range { font-size: 36px; line-height: 40px; letter-spacing: -1.6px;
    transform: translate(0, calc(-11px * (1 - var(--wgc-p)))) scale(calc((0.4722 + 0.5278 * var(--wgc-p)) * (var(--wgc-k, 1) + (1 - var(--wgc-k, 1)) * var(--wgc-p)))); }
  .wgc .wgc-dock__sub { margin-top: 6px; font-size: 15px; line-height: 20px; letter-spacing: -0.3px; color: #A1A1A6;
    transform: translate(0, calc(-35px * (1 - var(--wgc-p)))) scale(calc(0.8 + 0.2 * var(--wgc-p))); }
  .wgc .wgc-dock__actions { position: absolute; top: auto; right: 8px; bottom: 8px; z-index: 1; display: flex; gap: 8px; }
  .wgc .wgc-dock__actions .wgc-pill { height: 48px; justify-content: center; }
  .wgc .wgc-dock.is-expanded .wgc-dock__actions [data-dock-toggle] { display: none; }
  .wgc .wgc-dock__actions .wgc-pill:not([data-dock-toggle]) {
    min-width: calc(var(--wgc-bw, 0px) + ((var(--wgc-w) - 24px) / 2 - var(--wgc-bw, 0px)) * var(--wgc-p));
    transition: min-width 350ms var(--wgc-ease-drawer), background-color 150ms ease-out; }
  /* before the price the panel has no button of its own (Start a project waits for it), so Next question takes the whole
     row (Daniel, 2026-10-18: "not full width on desktop") */
  .wgc .wgc-dock.is-early .wgc-dock__actions .wgc-pill:not([data-dock-toggle]) {
    min-width: calc(var(--wgc-bw, 0px) + (var(--wgc-w) - 16px - var(--wgc-bw, 0px)) * var(--wgc-p)); }
  .wgc .wgc-dock__actions .wgc-pill--solid { background: #fff; color: #000; }
  .wgc .wgc-dock__close {
    position: absolute; top: 16px; right: 16px; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0;
    border-radius: 50%; background: #262626; color: #fff; cursor: pointer; opacity: var(--wgc-p); pointer-events: none; transition: opacity 200ms var(--wgc-ease), background-color 150ms ease-out;
  }
  .wgc .wgc-dock.is-expanded .wgc-dock__close { pointer-events: auto; }
  @media (hover: hover) and (pointer: fine) { .wgc .wgc-dock__close:hover { background: #333; } }
  .wgc .wgc-dock__close:focus-visible { outline: 2px solid transparent; box-shadow: 0 0 0 2px #111, 0 0 0 4px var(--wgc-blue); }
  .wgc .wgc-dock__more {
    display: flex; flex-direction: column; justify-content: flex-end; flex: none; overflow: hidden; margin: 0; padding: 0;
    height: calc(var(--wgc-travel, 0px) * var(--wgc-p)); opacity: calc((var(--wgc-p) - 0.3) / 0.7);
    transition: height 350ms var(--wgc-ease-drawer), opacity 350ms var(--wgc-ease-drawer);
  }
  .wgc .wgc-dock.is-expanded .wgc-dock__more { opacity: 1; }
  .wgc .wgc-dock__more-in { flex: none; min-height: 0; overflow: visible; padding: 42px 8px 64px; }
  .wgc .wgc-dock__rows { margin: 8px 16px 0; }
  .wgc .wgc-dock__row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--wgc-rule-dark); font-size: 15px; line-height: 20px; letter-spacing: -0.3px; }
  .wgc .wgc-dock__more-actions { position: absolute; left: 8px; bottom: 8px; width: calc((var(--wgc-w) - 24px) / 2); display: block; margin: 0; padding: 0; border: 0;
    transform: translateY(calc(12px * (1 - var(--wgc-p)))); transition: transform 350ms var(--wgc-ease-drawer); }
  .wgc .wgc-dock__more-actions .wgc-pill { width: 100%; height: 48px; justify-content: center; }
  .wgc .wgc-dock.is-early .wgc-dock__more-actions [data-more-next], .wgc .wgc-dock.is-complete .wgc-dock__more-actions [data-more-book] { display: none !important; }
}
@media (min-width: 782px) and (prefers-reduced-motion: reduce) {
  .wgc .wgc-dock, .wgc .wgc-dock__range, .wgc .wgc-dock__sub, .wgc .wgc-dock__actions .wgc-pill, .wgc .wgc-dock__more-actions { transition: none; }
  .wgc .wgc-dock__more { transition: opacity 150ms ease; }
}

/* Based in, in the open dock and in "Your estimate": dark selects (Daniel, 2026-10-16: every country and its regions).
   A country with regions gives up half its width to the region field, which grows into it and fades in, 250ms; one
   without takes it back in 200ms, the field fading first (Figma 162537:11248). Nothing moves on the first paint. */
.wgc .wgc-where { margin: 0 0 8px; }
.wgc .wgc-where__label { margin: 0 14px 8px; color: #A1A1A6; font-size: 15px; line-height: 20px; letter-spacing: -0.3px; }
.wgc .wgc-where__fields {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0fr); column-gap: 0;
  overflow: hidden; padding: 4px; margin: -4px; /* a field still growing never widens the page; 4px for the focus ring (QA 2026-10-16) */
  transition: grid-template-columns 200ms var(--wgc-ease-out), column-gap 200ms var(--wgc-ease-out);
}
.wgc .wgc-where__fields.has-region { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 8px; transition-duration: 250ms; }
.wgc .wgc-where__fields > [data-w="region"] { min-width: 0; opacity: 0; visibility: hidden; transition: opacity 120ms var(--wgc-ease-out), visibility 0s 200ms; }
.wgc .wgc-where__fields.has-region > [data-w="region"] { opacity: 1; visibility: visible; transition: opacity 200ms var(--wgc-ease-out) 30ms, visibility 0s; }
.wgc .wgc-where__fields.is-instant, .wgc .wgc-where__fields.is-instant > * { transition: none !important; }
.wgc .wgc-where [data-w="ontario"] { display: block; margin-top: 8px; }
.wgc .wgc-where .wgc-select { max-width: none; }
.wgc .wgc-where .wgc-select__input { display: block; height: 48px; padding: 0 44px 0 20px; border-radius: 24px; background: #262626; color: #fff; font-size: 15px; line-height: 24px; letter-spacing: -0.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wgc .wgc-where .wgc-select__input:has(option[value=""]:checked) { color: #A1A1A6; }
.wgc .wgc-where .wgc-select__input option { color: #000; }
.wgc .wgc-where .wgc-select .wgc-icon { right: 16px; color: #fff; }
@media (hover: hover) and (pointer: fine) { .wgc .wgc-where .wgc-select__input:hover { background: #2E2E2E; } }
.wgc .wgc-where .wgc-select__input:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: 0 0 0 2px #111, 0 0 0 4px var(--wgc-blue); }
@media (min-width: 782px) { .wgc .wgc-where__label { margin-left: 16px; margin-right: 16px; } } /* 24px in, as the heading */
@media (max-width: 781px), (pointer: coarse) { .wgc .wgc-where .wgc-select__input { font-size: 16px; letter-spacing: -0.4px; } } /* iOS zooms into smaller fields */
@media (prefers-reduced-motion: reduce) {
  .wgc .wgc-where__fields { transition: none; }
  .wgc .wgc-where__fields > [data-w="region"] { transition: opacity 150ms ease, visibility 0s 150ms; }
  .wgc .wgc-where__fields.has-region > [data-w="region"] { transition: opacity 150ms ease, visibility 0s; }
}

/* "Your estimate": the same Based in at the page's field size (60px, 20px corners; 54px on phones) (Daniel, 2026-10-16) */
.wgc .wgc-where--block { max-width: 760px; margin: 40px 0 0; }
.wgc .wgc-where--block .wgc-where__label { margin: 0 0 12px; color: var(--wgc-grey-on-dark); font-size: 20px; line-height: 30px; letter-spacing: -0.8px; }
.wgc .wgc-where--block .wgc-where__fields.has-region { column-gap: 12px; }
.wgc .wgc-where--block .wgc-select__input { height: 60px; padding: 0 52px 0 20px; border-radius: 20px; font-size: 20px; line-height: 30px; letter-spacing: -0.8px; }
.wgc .wgc-where--block .wgc-select__input:focus-visible { box-shadow: 0 0 0 2px #000, 0 0 0 4px var(--wgc-blue); }
.wgc .wgc-where--block [data-w="ontario"] { margin-top: 12px; }
@keyframes wgc-in { from { opacity: 0; transform: translateY(4px); } }

/* "Start over" (Daniel, 2026-10-17): a quiet link at the end of "Your estimate", away from the actions */
.wgc .wgc-est__restart { margin: 40px 0 0; }
.wgc .wgc-est__restart .wgc-link { color: var(--wgc-grey-on-dark); }
@media (hover: hover) and (pointer: fine) { .wgc .wgc-est__restart .wgc-link:hover { color: #fff; } }
@media (max-width: 781px) { .wgc .wgc-est__restart { margin-top: 28px; } }

/* sent: every "Email me this estimate" reads "Estimate sent" with a check, in the dock and on the page */
.wgc .wgc-sent-icon { flex: none; margin-right: 8px; }

@keyframes wgc-fade { from { opacity: 0; } }
@media (max-width: 781px) {
  .wgc .wgc-where--block { margin-top: 28px; }
  .wgc .wgc-where--block .wgc-where__label { margin-bottom: 8px; font-size: 17px; line-height: 22px; letter-spacing: -0.6px; }
  .wgc .wgc-where--block .wgc-where__fields.has-region { column-gap: 8px; }
  .wgc .wgc-where--block .wgc-select__input { height: 54px; padding: 0 44px 0 20px; font-size: 16px; line-height: 22px; letter-spacing: -0.6px; }
  .wgc .wgc-where--block [data-w="ontario"] { margin-top: 8px; }
}


/* the open card at rest takes its content's height (calculator.js, is-settled): a row sliding open or shut inside it
   moves the top edge in the same motion. It never grows past the screen (--wgc-max): then it scrolls inside, from its top. */
.wgc .wgc-dock__more { max-height: var(--wgc-max, none); }
.wgc .wgc-dock.is-settled .wgc-dock__more { height: auto; }
.wgc .wgc-dock.is-tall .wgc-dock__more { justify-content: flex-start; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }
/* the closed pill: the line under the price ends in an ellipsis before the buttons (calculator.js measures --wgc-subw) */
.wgc .wgc-dock:not(.is-expanded) .wgc-dock__sub { max-width: var(--wgc-subw, none); overflow: hidden; text-overflow: ellipsis; }

/* phones: the 64px pill from before, 16px from the edges, with a grab tab on top (Daniel, 2026-10-15: "make it like
   before", "a little rectangle that blends into the dock", then the rounder version over "Apple style"; Figma 162515:14771,
   tab B with smooth sides). Open, it is a floating card that only grows up: its bottom, sides and 32px corners stay put
   (Daniel, 2026-10-15/16: "dont change the corner radius", "the shape just gets bigger", not touching the bottom of the
   screen). The dock is the card, fixed 16px from the sides and bottom; only the panel under the pill changes height, so
   the top edge, the tab and the heading rise together in one layout and the bottom never moves (0.8.7 moved the dock and
   grew a background separately, which drifted a frame apart). --wgc-p is how open it is (0 to 1): the class sets it, a
   drag sets it inline (calculator.js). */
@media (max-width: 781px) {
  .wgc .wgc-dock {
    --wgc-p: 0;
    left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    display: flex; flex-direction: column; padding: 0;
    background: transparent; border-radius: 32px; box-shadow: none;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.12)) drop-shadow(0 16px 40px rgba(0, 0, 0, 0.22)); /* as on desktop; the tab gets it too */
    transform: none;
    transition: transform 250ms var(--wgc-ease), visibility 0s;
  }
  .wgc .wgc-dock::after { display: none; }
  /* iOS 26 Safari fills the space around its address bar from a fixed element at the bottom of the screen, and the
     dock's shadow reaches the bottom edge, so it filled it from the dock (Daniel, 2026-10-19: "when there's no dock it
     is transparent", "the shadow is coming from the dock"). The dock is drawn inside a fixed layer of no height at the
     bottom and is itself absolute: Safari never reads an absolute child of a fixed element. Same place, look and shadow. */
  .wgc-layer { position: fixed; left: 0; right: 0; bottom: 0; height: 0; z-index: 90; }
  .wgc .wgc-dock { position: absolute; }
  /* the card's black, on a layer inside it: iOS 26 Safari fills the space around its address bar with the background of a
     fixed element at the bottom, and it read the dock's #111 there (Daniel's screenshot, 2026-10-18); it ignores
     pseudo-elements. Same look. */
  .wgc .wgc-dock::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--wgc-black); pointer-events: none; }
  .wgc .wgc-dock.is-expanded { --wgc-p: 1; transform: none; }
  .wgc .wgc-dock.is-empty, .wgc .wgc-dock.is-landed,
  body.menu-toggled .wgc-layer .wgc-dock, body.popup-active .wgc-layer .wgc-dock {
    transform: translate3d(0, calc(100% + 48px + env(safe-area-inset-bottom, 0px)), 0); visibility: hidden;
    transition: transform 250ms var(--wgc-ease), visibility 0s linear 250ms;
  }
  .wgc .wgc-dock.is-dragging .wgc-dock__more, .wgc .wgc-dock.is-dragging .wgc-dock__range, .wgc .wgc-dock.is-dragging .wgc-dock__sub,
  .wgc .wgc-dock.is-dragging .wgc-dock__actions .wgc-pill, .wgc .wgc-dock.is-dragging .wgc-dock__more-actions { transition: none; } /* they follow the finger */
  @media (forced-colors: active) {
    .wgc .wgc-dock { border: 1px solid CanvasText; }
  }
  /* the tab: the grab line on a 96 x 18 shape whose sides are one smooth curve each (Figma 162515:14771), its last
     2px over the card so there is no seam. The button reaches 44px up, a touch area that never covers the price or the button. */
  .wgc .wgc-dock__grip {
    position: absolute; top: -44px; left: 50%; z-index: 2; width: 96px; height: 46px; margin-left: -48px; border-radius: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 18'%3E%3Cpath fill='%23111' d='M0 16C14.4 16 9.6 0 24 0h48c14.4 0 9.6 16 24 16v2H0z'/%3E%3C/svg%3E") center bottom / 96px 18px no-repeat;
  }
  .wgc .wgc-grabber { top: 34px; width: 32px; height: 4px; margin-left: -16px; border-radius: 2px; }
  .wgc .wgc-dock__grip:focus, .wgc .wgc-dock__grip:active { box-shadow: none; } /* the theme's pressed-button shadow would outline the touch area */
  .wgc .wgc-dock__close { display: none; }
  /* the pill: the card's top 64px. The price is laid out at the open card's heading size and place, 22px in, and drawn
     smaller and centred in the pill. */
  .wgc .wgc-dock__inner { display: block; position: static; flex: none; height: 64px; padding: 0; background: none; border-radius: 0; }
  .wgc .wgc-dock__price { position: absolute; left: 22px; top: 24px; display: block; pointer-events: none; } /* a tap on it reaches the row, which opens the card */
  .wgc .wgc-dock__range, .wgc .wgc-dock__sub { display: block; white-space: nowrap; transform-origin: 0 0; transition: transform 500ms var(--wgc-ease-drawer); }
  .wgc .wgc-dock__range { font-size: 24px; line-height: 30px; letter-spacing: -0.8px;
    transform: translate(0, calc(-11px * (1 - var(--wgc-p)))) scale(calc((0.7083 + 0.2917 * var(--wgc-p)) * (var(--wgc-k, 1) + (1 - var(--wgc-k, 1)) * var(--wgc-p)))); } /* --wgc-k: a long price fits beside the button */
  .wgc .wgc-dock__sub { margin-top: 4px; font-size: 15px; line-height: 20px; letter-spacing: -0.3px; color: #A1A1A6;
    transform: translate(0, calc(-23px * (1 - var(--wgc-p)))) scale(calc(0.8 + 0.2 * var(--wgc-p))); }
  /* the pill's button is also the card's bottom button (Daniel, 2026-10-16: "animate the buttons inside of the dock too"):
     8px from the card's right and bottom, so it stays put while the card grows, and it stretches to the card's width from
     its right edge, keeping its height and round ends. Closing reverses it. */
  .wgc .wgc-dock__actions { position: absolute; top: auto; right: 8px; bottom: 8px; z-index: 1; }
  .wgc .wgc-dock__actions .wgc-pill { height: 48px; justify-content: center; min-width: calc(var(--wgc-bw, 0px) + (100vw - 48px - var(--wgc-bw, 0px)) * var(--wgc-p)); transition: min-width 500ms var(--wgc-ease-drawer), background-color 150ms ease-out; }
  .wgc .wgc-dock:not(.is-empty) .wgc-dock__actions [data-next]:not([hidden]) { display: inline-flex; }
  .wgc .wgc-dock__actions [data-dock-toggle] { display: none !important; }
  .wgc .wgc-dock__actions .wgc-pill--solid { background: #fff; color: #000; }
  /* what the card opens: the panel goes from 0 to the height of what it holds (calculator.js measures it into
     --wgc-travel). Its content sits on the card's bottom, so the rising top edge uncovers it. Text 22px in, as the price;
     the buttons 8px from the card's sides and 8px apart, 48px tall, so their round ends sit in the card's corners. */
  .wgc .wgc-dock__more {
    display: flex; flex-direction: column; justify-content: flex-end; flex: none; overflow: hidden; margin: 0; padding: 0;
    height: calc(var(--wgc-travel, 0px) * var(--wgc-p)); opacity: calc((var(--wgc-p) - 0.3) / 0.7);
    transition: height 500ms var(--wgc-ease-drawer), opacity 500ms var(--wgc-ease-drawer);
  }
  .wgc .wgc-dock.is-expanded .wgc-dock__more { opacity: 1; }
  .wgc .wgc-dock__more-in { flex: none; min-height: 0; padding: 26px 8px 64px; } /* 64: the pill's button sits under the rest */
  .wgc .wgc-dock__rows, .wgc .wgc-dock__note { margin-left: 14px; margin-right: 14px; }
  .wgc .wgc-dock__more-actions { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 20px; transform: translateY(calc(12px * (1 - var(--wgc-p)))); transition: transform 500ms var(--wgc-ease-drawer); }
  .wgc .wgc-dock__more-actions .wgc-pill { height: 48px; justify-content: center; }
  .wgc .wgc-dock.is-early .wgc-dock__more-actions [data-more-next], .wgc .wgc-dock.is-complete .wgc-dock__more-actions [data-more-book] { display: none !important; } /* the pill's button is this one */
  .wgc .wgc-dock a { -webkit-user-drag: none; }
}
/* phones on their side: the open card keeps to the heading and the buttons, so it fits under the screen's top (QA 2026-10-16) */
@media (max-width: 781px) and (max-height: 480px) {
  .wgc .wgc-dock__rows, .wgc .wgc-dock__note { display: none; }
}
/* touch screens keep :hover after a tap; the theme's grey hover made "Send the estimate" look disabled (QA 2026-10-16) */
@media (hover: none) {
  .wgc .button.button--alt.wgc-btn:hover { color: #000; background-color: #fff; }
}
@media (max-width: 781px) and (prefers-reduced-motion: reduce) {
  .wgc .wgc-dock, .wgc .wgc-dock__range, .wgc .wgc-dock__sub, .wgc .wgc-dock__actions .wgc-pill, .wgc .wgc-dock__more-actions { transition: none; }
  .wgc .wgc-dock__more { transition: opacity 150ms ease; }
}

/* ---------- the calculator's form (Daniel, 2026-10-19; Figma 162611:11860) ----------
   The contact popup's parts (.popup--steps in contact-steps.css) in two versions: data-kind="email" asks the name and
   email, "project" adds the company and an optional note. Here only what the contact popup doesn't have: the estimate
   being sent (as the dock shows it), the note and its "Add a note" on phones, and the record after a good send. */
.wgc-send .wgc-send__est { margin-top: 40px; padding: 30px; border-radius: 20px; background: #111; }
.wgc-send .wgc-send__range { margin: 0; color: #fff; font-size: 36px; line-height: 40px; letter-spacing: -1.6px; font-variant-numeric: tabular-nums; }
.wgc-send .wgc-send__line { margin: 8px 0 0; color: #808080; font-size: 17px; line-height: 24px; letter-spacing: -0.6px; }
.wgc-send[data-kind="email"] [data-field="company"], .wgc-send[data-kind="email"] .wgc-send__note,
.wgc-send .wgc-send__add, .wgc-send .cs.is-sent .cs-consent, .wgc-send:not(.has-note) .cs.is-sent .wgc-send__note { display: none; }
/* the note: one field's height to start, it grows to three lines, then scrolls */
.wgc-send .wgc-send__note textarea { display: block; width: 100%; height: 62px; min-height: 62px; max-height: 124px; resize: none; overflow-y: auto; }
.wgc-send .wgc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
/* "Add a note" (phones): a control, not a link; its 44px tap area takes 22px of the layout */
.wgc-send .wgc-send__add {
  align-items: center; gap: 8px; align-self: flex-start; min-height: 44px; margin: -11px 0; padding: 0; border: 0; border-radius: 8px;
  background: none; color: #fff; font: inherit; font-size: 16px; line-height: 22px; letter-spacing: -0.6px; cursor: pointer;
  transition: transform 0.1s ease; -webkit-tap-highlight-color: transparent;
}
.wgc-send .wgc-send__add:active { transform: scale(0.97); }
.wgc-send .wgc-send__add:focus-visible { outline: 2px solid transparent; box-shadow: var(--cs-ring); }
.wgc-send .wgc-send__add-icon {
  flex: none; width: 20px; height: 20px; background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.wgc-send .wgc-send__optional { color: #808080; }
@media (max-width: 781px) {
  .wgc-send .wgc-send__est { margin-top: 24px; padding: 16px; }
  .wgc-send .wgc-send__range { font-size: 22px; line-height: 28px; letter-spacing: -0.8px; }
  .wgc-send .wgc-send__line { margin-top: 4px; font-size: 15px; line-height: 22px; letter-spacing: -0.3px; }
  .wgc-send .wgc-send__more { display: none; } /* phones keep the line under the heading to one */
  .wgc-send .wgc-send__note textarea { height: 54px; min-height: 54px; max-height: 98px; }
  .wgc-send[data-kind="project"]:not(.is-note) .wgc-send__note { display: none; }
  .wgc-send[data-kind="project"]:not(.is-note) .cs:not(.is-sent) .wgc-send__add { display: inline-flex; }
}
@media (max-width: 781px) and (max-height: 600px) { .wgc-send .wgc-send__est { margin-top: 16px; } }
@media (prefers-reduced-motion: reduce) { .wgc-send .wgc-send__add { transition: none; } }