/* crewchampion.com/plumbing, November 11, 2026 (docs/WEBSITE.md, "/plumbing").
   The home page told for plumbers. calls.css does the work; this is only what
   this page adds: its own look for the first screen and the headings, the
   sliding row of plumbers, and the list of the seven things the headline names. */

/* ---- the look: made for people who work with their hands (November 12, 2026) ----
   Bryson, with a picture of a field service app's home page: "make it feel more blue collar. It's
   immediately obvious it's for blue collar service businesses. Ours feels a bit like a SaaS." So the first
   screen is a plumber at work, dark, with the promise in heavy capitals and one yellow button; a row of
   plumbers slides under it; and every heading down the page is set in the same capitals. The bones are the
   home page's still: the same words, box, phone and sections. */
@font-face { font-family: "Anton"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/anton.woff2") format("woff2"); }
body.plumbing { --navy: #0a1628; --hi: #ffb81f; --hi-dark: #f2a900; --caps: "Anton", "Arial Narrow", Impact, sans-serif; }
/* The bar is plain white here: see-through, it turned gray over the dark photo. */
body.plumbing .nav { background: #fff; }
body.plumbing h2 { font-family: var(--caps); font-weight: 400; text-transform: uppercase; letter-spacing: .006em; line-height: 1.06; }

/* The first screen: the photo fills it, darkest where the words are. The box's list of names has to hang
   below this band, so the photo is clipped by its own layer and not by the band. */
.hero.plumb { padding-top: 0; text-align: left; }
.hero-top { position: relative; z-index: 2; padding: clamp(112px, 10.4vw, 152px) 0 clamp(34px, 3.6vw, 52px); background: var(--navy); color: #fff; }
.hero-bg { position: absolute; inset: 0; overflow: hidden; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 40%; }
.hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 17, 32, .95) 0%, rgba(8, 17, 32, .88) 30%, rgba(8, 17, 32, .5) 58%, rgba(8, 17, 32, .1) 100%), linear-gradient(180deg, rgba(8, 17, 32, .55) 0%, rgba(8, 17, 32, 0) 26%, rgba(8, 17, 32, 0) 62%, rgba(8, 17, 32, .9) 100%); }
.hero-top > .wrap { position: relative; }
.hero.plumb .kicker { color: rgba(255, 255, 255, .88); }
/* The rating: five stars with 4.7 of them lit, in the yellow, then whose rating it is. */
.hero.plumb .kicker.rated { gap: 10px; flex-wrap: wrap; row-gap: 2px; }
.hero.plumb .rate { position: relative; display: inline-block; font-size: 17px; letter-spacing: 2px; line-height: 1; color: rgba(255, 255, 255, .28); white-space: nowrap; }
.hero.plumb .rate-on { position: absolute; left: 0; top: 0; overflow: hidden; color: var(--hi); }
.hero.plumb .kicker.rated b { color: #fff; font-weight: 700; }

/* The headline: three lines of capitals, the last one changing, in the yellow. The words keep to the dark
   side of the photo (max-width), and an ending too long for that is set a little smaller by calls.js
   (data-fit on the line), so the longest one never runs over the plumber or off a phone. */
.hero.plumb h1 { margin-top: 18px; max-width: min(760px, 56vw); font-family: var(--caps); font-weight: 400; font-size: clamp(40px, 5.3vw, 82px); line-height: 1.07; letter-spacing: .004em; text-transform: uppercase; color: #fff; }
.hero.plumb .h1-line, .hero.plumb .h1-part { display: block; }
/* The changing words are a whole line, so the line stays put: one set slides straight up and out as the
   next comes straight up from below (on the home page the words end a line and their box changes width,
   which here read as a diagonal). */
.hero.plumb .rot { display: block; width: auto !important; height: 1.16em; line-height: 1.16; text-align: left; transition: none; color: var(--hi); }
.hero.plumb .rot span { line-height: 1.16; vertical-align: top; }
.hero.plumb .rot span.leave { left: 0; right: 0; }

/* The box, at the left under the words, with the one yellow button on the page's first screen. Its own
   words are dark again: the band around it is white on dark, and the list of names is white. */
.hero.plumb .finder { margin: 34px 0 0; width: min(620px, 100%); color: var(--ink); box-shadow: 0 0 0 1px rgba(8, 17, 32, .2), 0 26px 60px -14px rgba(0, 0, 0, .55); }
.hero.plumb .finder:focus-within { box-shadow: 0 0 0 3px var(--hi), 0 26px 60px -14px rgba(0, 0, 0, .55); }
.hero.plumb .finder-go { background: var(--hi); color: #111214; }
.hero.plumb .finder-go:hover { background: var(--hi-dark); }
.hero.plumb .under { min-height: 78px; }
.hero.plumb .hero-note { color: rgba(255, 255, 255, .82); }
.hero.plumb .hero-note.problem { color: #ffb3ad; }
.hero.plumb .hero-alt { color: #fff; }

/* The sliding row: plumbers at the kinds of work a plumbing company is known for. It is the home page's
   drifting row with smaller cards, on the same dark as the photo so the two read as one screen, and it
   ends on a strip of the yellow and black every job site has. */
.trades { position: relative; z-index: 1; overflow: hidden; background: var(--navy); padding: 6px 0 44px; }
.trades::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 10px; background: repeating-linear-gradient(-45deg, var(--hi) 0 16px, #111214 16px 32px); }
.trades-track { display: flex; gap: 16px; width: max-content; --half-gap: 8px; }
.js .trades-track { animation: drift 90s linear infinite; }
.trades:hover .trades-track { animation-play-state: paused; }
.still .trades-track { animation: none; }
.trade { position: relative; flex: none; margin: 0; width: clamp(230px, 19.5vw, 300px); aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; background: #14233b; }
.trade::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); pointer-events: none; }
.trade img { width: 100%; height: 100%; object-fit: cover; }
.trade figcaption { position: absolute; inset: auto 0 0 0; padding: 46px 16px 12px; background: linear-gradient(180deg, rgba(8, 17, 32, 0) 0%, rgba(8, 17, 32, .9) 72%); font-family: var(--caps); font-size: clamp(19px, 1.5vw, 23px); line-height: 1.1; letter-spacing: .02em; text-transform: uppercase; color: #fff; }

/* "What it does" in the bar opens the panel with the twelve things, the one /website has (home.css; the
   script is in suite.js). There the links sit at the left of the bar and the panel hangs from the link.
   Here they sit in the middle, so the panel hangs from the bar itself, centered in the window. It opens
   on hover or a click, and closes when the pointer leaves or on Escape. On a phone the twelve are a list
   inside the menu instead. */
.nav .links-item { display: flex; align-items: center; }
.nav .links-item > a { display: inline-flex; align-items: center; gap: 4px; padding: 10px 0; }
.nav .links-item .chev { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.nav .links-item.open .chev { transform: rotate(180deg); }
.nav .links-item.open > a { opacity: 1; }
.nav .panel { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); z-index: 41; display: flex; padding: 4px 0 24px; pointer-events: none; }
.nav .panel[hidden] { display: none; }
.nav .links-item.open .panel { pointer-events: auto; }
.nav .panel-card { position: relative; width: max-content; max-width: min(1060px, calc(100vw - 48px)); background: #fff; color: var(--ink); border-radius: var(--r-md); box-shadow: 0 30px 80px rgba(8, 17, 32, .28), 0 0 0 1px rgba(0, 0, 0, .05); padding: 30px 34px 22px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 28px; text-align: left; opacity: 0; transform: translateY(-8px); transition: opacity .18s var(--ease), transform .22s var(--ease); }
.nav .links-item.open .panel-card { opacity: 1; transform: none; }
.nav .panel-col > b { display: block; font-family: var(--caps); font-weight: 400; font-size: 19px; letter-spacing: .02em; text-transform: uppercase; color: var(--ink); margin: 0 0 8px 12px; }
.nav .panel-col a { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: inherit; opacity: 1; font-weight: 400; }
.nav .panel-col a:hover { background: var(--soft); }
.nav .panel-col a i { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; }
.nav .panel-col a i svg { width: 20px; height: 20px; }
.nav .panel-col a span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nav .panel-col a span b { font-size: 16.5px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); line-height: 1.25; }
.nav .panel-col a span small { font-size: 15px; font-weight: 400; line-height: 1.3; color: var(--muted); }
.nav .panel-all { grid-column: 1 / -1; margin-top: 12px; padding: 16px 12px 4px; border-top: 1px solid rgba(0, 0, 0, .07); display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 16.5px; font-weight: 600; color: var(--ink); text-decoration: none; opacity: 1; }
.nav .panel-all svg { width: 18px; height: 18px; transition: transform .2s var(--ease); }
.nav .panel-all:hover svg { transform: translateX(3px); }
@media (max-width: 1180px) { .nav .panel-card { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: min(640px, calc(100vw - 48px)); } }
.menu .menu-sub { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; padding: 2px 0 10px 12px; border-bottom: 1px solid var(--line); }
.menu .menu-sub a { padding: 8px 0; border: 0; font-size: 16px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.menu { max-height: calc(100vh - 68px); overflow-y: auto; }

/* The two sections from the old home page (suite.css). The list of eleven keeps to this page's width,
   so its left edge lines up with everything above and below it. */
.suite, .show { position: relative; }
.show .show-wrap { max-width: 1280px; }

/* Everything it does, one feature at a time (November 12, 2026; tour.js). It began as "Booked straight
   from Google": four steps, and a picture of each on the same dark as the first screen. Bryson liked that
   it read like a plumbing company's page and not like software, and asked for every feature told that way
   with the tabs /website has. So: seven tabs in the page's capitals, and under them the open feature, its
   steps on the left and its four pictures on the right, the numbers on the pictures being the steps' own.
   Nothing here is Google's own drawing: the listing is ours, in this page's letters and colors. */
.tour { padding: 104px 0 0; }
.tour-eyebrow { margin-bottom: 14px; color: var(--ink); font-size: 16px; }
.tour-tabs { position: relative; display: flex; gap: 8px; margin: 0 -24px; padding: 3px 24px 6px; overflow-x: auto; scrollbar-width: none; }
.tour-tabs::-webkit-scrollbar { display: none; }
.tour-tab { position: relative; flex: none; height: 48px; padding: 0 18px; border: 0; border-radius: 10px; overflow: hidden; background: var(--soft); color: var(--ink); font-family: var(--caps); font-size: 18px; line-height: 1; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; cursor: pointer; scroll-margin-top: 110px; transition: background .2s var(--ease), color .2s var(--ease); }
.tour-tab:hover { background: #e7e7e3; }
.tour-tab.active { background: var(--navy); color: #fff; }
.tour-tab:focus-visible { outline: 3px solid var(--hi-dark); outline-offset: 2px; }
/* The open tab fills with the yellow as its steps go by. */
.tour-tab::after { content: ""; position: absolute; left: 0; bottom: 0; height: 4px; width: 0; background: var(--hi); }
.tour-tab.active::after { width: calc(var(--p, 0) * 100%); transition: width .6s var(--ease); }
.tour-panels { margin-top: 28px; }
.tour-panel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
/* With scripts on, the seven share one place, as tall as the tallest, so nothing below moves when one
   gives way to the next. With scripts off there are no tabs and the seven sit one under the other. */
.js .tour-panels { display: grid; }
.js .tour-panel { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility 0s .3s; }
.js .tour-panel.active { opacity: 1; visibility: visible; transition: opacity .45s var(--ease) .12s; }
html:not(.js) .tour-tabs { display: none; }
html:not(.js) .tour-panel + .tour-panel { margin-top: 96px; }
.tour-panel h2 { font-size: clamp(32px, 3.75vw, 54px); }
.tour-panel h2 .dim { display: block; }
.gbook-lede { margin: 18px 0 0; max-width: 500px; font-size: 17px; line-height: 1.5; color: var(--body); }
.gbook-steps { list-style: none; margin: 26px 0 24px; padding: 0; display: grid; gap: 16px; }
.gbook-steps li { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 16px; align-items: start; }
.gbook-steps li > i, .gnum { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--hi); color: #111214; font-family: var(--caps); font-style: normal; font-size: 18px; line-height: 1; }
.gbook-steps b { display: block; font-size: clamp(19px, 1.6vw, 23px); font-weight: 600; letter-spacing: -.025em; line-height: 1.2; }
.gbook-steps span { display: block; margin-top: 3px; font-size: 15.5px; line-height: 1.45; color: var(--body); max-width: 450px; }
.tour .fine { margin-top: 22px; }
.gbook-art { position: relative; align-self: stretch; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-content: center; padding: clamp(22px, 2.2vw, 30px); border-radius: var(--r-xl); background: radial-gradient(90% 70% at 100% 0%, #1c3358 0%, rgba(28, 51, 88, 0) 62%), var(--navy); }
.gcard { position: relative; padding: 19px 18px 17px; border-radius: 20px; background: #fff; color: var(--ink); box-shadow: 0 18px 44px -18px rgba(0, 0, 0, .6); }
.gcard.wide { grid-column: 1 / -1; padding-left: 24px; }
.gnum { position: absolute; left: -12px; top: -14px; box-shadow: 0 0 0 4px var(--navy); }
.gcard small { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--dim); }
.gcard > b { display: block; margin-top: 5px; font-size: 19px; font-weight: 600; letter-spacing: -.025em; line-height: 1.2; }
/* While it plays (tour.js puts .live on the section): the step being told is lit, the ones told are
   quieter, the ones to come are grey; a picture lands with its step and the one being told wears a ring. */
.tour.live .gbook-steps li { opacity: .4; cursor: pointer; transition: opacity .45s var(--ease); }
.tour.live .gbook-steps li.is-done { opacity: .66; }
.tour.live .gbook-steps li.is-on { opacity: 1; }
.tour.live .gbook-steps li > i { background: #e4e4e0; color: var(--muted); transition: background .45s var(--ease), color .45s var(--ease); }
.tour.live .gbook-steps li.is-on > i, .tour.live .gbook-steps li.is-done > i { background: var(--hi); color: #111214; }
.tour.live .gcard { opacity: 0; transform: translateY(14px); transition: opacity .55s var(--ease), transform .65s var(--ease), box-shadow .4s var(--ease); }
.tour.live .gcard.is-in { opacity: 1; transform: none; }
.tour.live .gcard.is-now { box-shadow: 0 0 0 3px var(--hi), 0 18px 44px -18px rgba(0, 0, 0, .6); }
/* The pieces the pictures are made of. */
.gsub { margin: 5px 0 0; font-size: 14.5px; line-height: 1.35; color: var(--muted); }
.gsub.after { margin-top: 12px; }
.gsub s { margin-right: 6px; color: var(--dim); }
.gchip { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; padding: 5px 10px; border-radius: 999px; background: var(--soft); color: var(--body); font-size: 12.5px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.gchip svg { width: 13px; height: 13px; stroke-width: 2.6; }
.gchip.ok { background: #eaf6ee; color: #1a7f3c; }
.gchip.hi { background: #fff1c9; color: #6b4a00; }
.gchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.gchips .gchip { margin-top: 0; }
.gbtn { display: flex; align-items: center; justify-content: center; height: 40px; margin-top: 12px; border-radius: 10px; background: var(--navy); color: #fff; font-size: 14.5px; font-weight: 600; }
.gbtn.hi { background: var(--hi); color: #111214; }
.gico { position: absolute; right: 18px; top: 18px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--soft); color: var(--ink); }
.gico svg { width: 21px; height: 21px; }
.gquote { margin: 10px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--soft); font-size: 15.5px; line-height: 1.4; }
.grows { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 7px; }
.grows li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; padding: 7px 12px; border-radius: 11px; background: var(--soft); font-size: 14.5px; line-height: 1.25; }
.grows li b { font-weight: 600; }
.grows .gchip { margin-top: 0; background: #fff; }
.grows .gchip.ok { background: #dff1e5; }
.grows .gchip.hi { background: var(--hi); color: #111214; }
.grows.ticks li { justify-content: flex-start; flex-wrap: nowrap; gap: 9px; font-weight: 600; }
.grows.ticks svg { flex: none; width: 16px; height: 16px; color: #2fa35a; stroke-width: 2.6; }
.grows.gweek li { display: grid; grid-template-columns: 72px auto minmax(0, 1fr) auto; }
.grows.gweek time { font-variant-numeric: tabular-nums; color: var(--muted); }
.grows.gweek span:not(.gchip) { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grows.sums li { padding: 8px 0; border-radius: 0; background: none; border-top: 1px solid var(--line); }
.grows.sums li:first-child { border-top: 0; padding-top: 2px; }
.grows.sums span { color: var(--muted); }
.grows.sums .total span { color: var(--ink); font-weight: 600; }
.grows.sums .total b { font-size: 17px; }
/* The listing: the name, the stars, and the row of round buttons with the booking one lit. */
.glist p { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin: 6px 0 0; font-size: 15px; line-height: 1.3; color: var(--muted); }
.glist .grate { font-weight: 600; color: var(--ink); }
.glist .stars { font-size: 15px; }
.glist em { font-style: normal; font-weight: 600; color: #b3261e; }
.glist .ghours::before { content: "\00b7"; margin-right: 6px; color: var(--muted); }
.gacts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--line); }
.gacts > span { display: grid; justify-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.gacts i { position: relative; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--soft); color: var(--muted); }
.gacts svg { width: 21px; height: 21px; }
.gacts .on { color: var(--ink); }
.gacts .on i, .gring .gico { background: var(--hi); color: #111214; }
.gacts .on i::after, .gring .gico::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; box-shadow: 0 0 0 2px var(--hi-dark); opacity: .5; }
.js .gacts .on i::after, .js .gring .gico::after { animation: gping 2.4s ease-out infinite; }
.still .gacts .on i::after, .still .gring .gico::after { animation: none; }
@keyframes gping { 0% { transform: scale(.88); opacity: .75; } 70%, 100% { transform: scale(1.34); opacity: 0; } }
/* The page the button opens: the jobs, one to a line, the picked one dark. */
.gpage ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 7px; }
.gpage li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 12px; border-radius: 11px; background: var(--soft); font-size: 15px; font-weight: 600; line-height: 1.25; }
.gpage li svg { flex: none; width: 15px; height: 15px; color: var(--dim); }
.gpage li.on { background: var(--navy); color: #fff; }
.gpage li.on svg { color: var(--hi); }
/* Texts and talk, drawn as the phone on the first screen draws them. A long one of ours fills its line;
   the small word over a line of talk says who is speaking. */
.gcard p.them, .gcard p.me { margin: 10px 0 0; padding: 10px 14px; border-radius: 18px; font-size: 14.5px; line-height: 1.38; }
.gcard p.them { width: fit-content; max-width: 96%; background: #e9e9eb; color: #111; border-bottom-left-radius: 6px; }
.gcard p.me { width: max-content; margin: 8px 0 12px auto; padding: 8px 17px; background: #34c759; color: #fff; font-weight: 600; border-bottom-right-radius: 6px; }
.gcard p.me.long { width: fit-content; max-width: 94%; margin: 10px 0 0 auto; padding: 10px 14px; font-weight: 500; }
.gcard p.them em, .gcard p.me em { display: block; margin-bottom: 2px; font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .62; }
.gtext { display: flex; flex-direction: column; }
.gtext .gchip { align-self: flex-start; margin-top: 0; white-space: normal; }
.gcal { position: relative; margin-top: auto; padding: 10px 40px 11px 14px; border-radius: 12px; background: #eaf6ee; border-left: 4px solid #2fa35a; }
.gcal small { font-size: 11.5px; color: #1a7f3c; }
.gcal b { display: block; margin-top: 3px; font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
.gcal span { display: block; font-size: 13.5px; line-height: 1.3; color: var(--muted); }
.gcal i { position: absolute; right: 11px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; display: grid; place-items: center; background: #2fa35a; color: #fff; }
.gcal i svg { width: 14px; height: 14px; stroke-width: 2.6; }
.gask { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; align-items: center; }
.gask small { grid-column: 1 / -1; }
.gask .stars { margin-top: 10px; font-size: 25px; }
.grev .stars { display: block; width: fit-content; margin-top: 6px; font-size: 19px; }
.grev .gsub { font-size: 15.5px; color: var(--body); }
.gbank > b { font-size: 30px; }
/* The AI receptionist's picture is the phone from the home page, playing the call, the text and the
   calendar as its steps are told, with the four things that happened beside it. */
.gbook-art.gphone { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: clamp(16px, 2vw, 28px); }
.gphone .phone { --pw: clamp(236px, 20.6vw, 298px); }
.gside { display: grid; gap: 14px; }
.gside .gcard { padding: 15px 16px 14px 22px; }
.gside .gcard > b { margin-top: 3px; font-size: 17.5px; }
/* The website it made, in a small window. */
.gshot { margin-top: 10px; border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 1px var(--line); }
.gshot span { display: block; padding: 6px 10px; background: var(--soft); font-size: 12px; color: var(--muted); }
.gshot img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 0; }

/* The page's own button: the yellow of the first screen's, for the way back to the report. */
.btn.hi { background: var(--hi); color: #111214; }
.btn.hi:hover { background: var(--hi-dark); }

/* Where the prices stood: the free report, on the first screen's dark, shown on a laptop (November 12,
   2026: "can you design this better? maybe make it on a macbook pro"). The laptop and the page on its
   screen are drawn in em, and one em is a seventy-second of the lid's width, so the whole of it scales
   with the room it has. The screen is the real report's first screen, made small. */
.start { position: relative; overflow: hidden; padding: 108px 0 84px; background: radial-gradient(58% 78% at 76% 34%, #1d3559 0%, rgba(29, 53, 89, 0) 70%), var(--navy); color: #fff; }
.start-in { display: grid; grid-template-columns: minmax(0, 4.2fr) minmax(0, 7.4fr); gap: clamp(28px, 3.6vw, 56px); align-items: center; }
.start-kicker { margin: 0 0 14px; font-family: var(--caps); font-size: 18px; letter-spacing: .07em; text-transform: uppercase; color: var(--hi); }
.start h2 { font-size: clamp(30px, 3.2vw, 46px); color: #fff; }
.start h2 .hi { display: block; color: var(--hi); }
.start-lede { margin: 18px 0 0; max-width: 470px; font-size: 17.5px; line-height: 1.5; color: rgba(255, 255, 255, .84); }
.start-words .btn { margin-top: 28px; }
.start-note { margin: 14px 0 0; font-size: 15px; color: rgba(255, 255, 255, .66); }
.start .fine { margin-top: 64px; color: rgba(255, 255, 255, .5); }
.start-art { position: relative; container-type: inline-size; margin-right: clamp(-44px, calc((1328px - 100vw) / 2), 0px); }
/* The laptop: a dark lid with its notch, and the silver base a little wider than the lid. */
.gmac { padding: 0 6.5%; font-size: min(10px, .72vw); }
@supports (font-size: 1cqw) { .gmac { font-size: 1.208cqw; } }
.gmac-lid { padding: 1em 1em 1.25em; border-radius: 1.9em 1.9em .5em .5em; background: #0c0d10; box-shadow: inset 0 0 0 .16em #40434a, 0 0 0 .08em #000; }
.gmac-screen { position: relative; aspect-ratio: 16 / 10.3; overflow: hidden; border-radius: .95em .95em .25em .25em; background: #f3f3f1; }
.gmac-notch { position: absolute; z-index: 2; top: 0; left: 50%; width: 9.4em; height: 1.3em; margin-left: -4.7em; border-radius: 0 0 .55em .55em; background: #0c0d10; }
.gmac-base { position: relative; height: 1.4em; margin: 0 -7.5%; border-radius: .25em .25em 1.6em 1.6em; background: linear-gradient(180deg, #eceef2 0%, #c9ccd3 38%, #8d919a 100%); box-shadow: 0 3em 4.5em -1.6em rgba(0, 0, 0, .7); }
.gmac-base span { position: absolute; top: 0; left: 50%; width: 11em; height: .58em; margin-left: -5.5em; border-radius: 0 0 .7em .7em; background: #a4a8b0; }
/* The page on its screen. */
.mr { position: absolute; inset: 0; display: flex; flex-direction: column; padding-top: 1.3em; color: #111214; line-height: 1.3; }
.mr-bar { display: flex; align-items: center; justify-content: space-between; padding: 1.1em 2.4em 0; }
.mr-logo { display: flex; align-items: center; gap: .45em; font-size: 1.45em; font-weight: 700; letter-spacing: -.015em; }
.mr-logo img { width: 1.3em; height: 1.3em; }
.mr-pills { display: flex; padding: .32em; border-radius: 3em; background: #fff; box-shadow: 0 .2em .9em rgba(17, 18, 20, .1); font-size: 1.12em; font-weight: 600; }
.mr-pills b { padding: .5em 1.1em; border-radius: 3em; background: #111214; color: #fff; font-weight: 600; }
.mr-pills i { padding: .5em 1em; font-style: normal; }
.mr-fix { padding: .75em 1.2em; border-radius: .7em; background: #3454d1; color: #fff; font-size: 1.12em; font-weight: 600; }
.mr-body { flex: 1; display: grid; grid-template-columns: 19.5em minmax(0, 1fr); column-gap: 5.5em; align-items: start; padding: 2em 4.6em 0 9.4em; }
.mr-phone { position: relative; height: 42em; padding: 3em 1em 0; border: .46em solid #191a1f; border-radius: 2.7em; background: #fff; box-shadow: 0 1.6em 3em -1.2em rgba(17, 18, 20, .4); }
.mr-phone::before { content: ""; position: absolute; top: .75em; left: 50%; width: 5.4em; height: 1.4em; margin-left: -2.7em; border-radius: 1em; background: #0b0b0d; }
.mr-search { display: block; padding: .7em 1.1em; border-radius: 2em; background: #f1f1f3; font-size: .8em; color: #5d616a; }
.mr-map { position: relative; display: block; height: 5.2em; margin-top: .8em; overflow: hidden; border-radius: .7em; background: linear-gradient(115deg, rgba(255, 255, 255, 0) 46%, #fff 46% 50%, rgba(255, 255, 255, 0) 50%), linear-gradient(180deg, #e9eee6 0 70%, #cfdde6 70%); }
.mr-map i { position: absolute; width: .56em; height: .56em; border-radius: 50%; background: #d93025; }
.mr-map i:nth-child(1) { left: 26%; top: 28%; }
.mr-map i:nth-child(2) { left: 61%; top: 46%; }
.mr-map i:nth-child(3) { left: 80%; top: 22%; }
.mr-list { list-style: none; margin: .5em 0 0; padding: 0; }
.mr-list li { display: grid; grid-template-columns: 1.5em minmax(0, 1fr); column-gap: .7em; align-items: start; padding: .82em .35em; border-bottom: .08em solid #ececef; }
.mr-list li > i { width: 2.1em; height: 2.1em; border-radius: 50%; display: grid; place-items: center; background: #111214; color: #fff; font-style: normal; font-size: .7em; font-weight: 700; }
.mr-list em { display: block; height: .78em; margin-top: .18em; border-radius: .4em; background: #dcdde2; }
.mr-list strong { display: block; font-size: 1.08em; font-weight: 600; letter-spacing: -.015em; }
.mr-list div > span { display: flex; align-items: center; gap: .32em; margin-top: .45em; font-size: .76em; color: #6b6f78; }
.mr-list div > span b { font-weight: 600; color: #111214; }
.mr-list .stars { font-size: 1em; }
.mr-list .mr-more { display: block; padding: .75em 0; text-align: center; font-size: .66em; color: #8b8e96; }
.mr-list .mr-you { border-bottom: 0; border-radius: .6em; background: #fff3cf; }
.mr-say { padding-top: 5.6em; }
.mr-score { display: grid; grid-template-columns: 3.5em minmax(0, 1fr); column-gap: .9em; align-items: center; }
.mr-score svg, .mr-score > b { grid-area: 1 / 1; }
.mr-score svg { width: 3.5em; height: 3.5em; }
.mr-score circle { fill: none; stroke: #e2e2de; stroke-width: 3.4; }
.mr-score .mr-arc { stroke: #e08a00; stroke-linecap: round; stroke-dasharray: 106.8; stroke-dashoffset: 42.7; transform: rotate(-90deg); transform-origin: 50% 50%; }
.mr-score > b { place-self: center; font-size: 1.3em; font-weight: 700; letter-spacing: -.02em; }
.mr-score > span { font-size: .98em; line-height: 1.35; color: #6b6f78; }
.mr-say > strong { display: block; margin-top: .8em; font-size: 2.3em; font-weight: 600; letter-spacing: -.035em; line-height: 1.12; }
.mr-say > p { margin: .9em 0 0; font-size: 1.12em; line-height: 1.4; color: #6b6f78; }
.mr-acts { display: flex; align-items: center; gap: 1.4em; margin-top: 1.5em; }
.mr-acts span { padding: .9em 1.5em; border-radius: .75em; background: #111214; color: #fff; font-weight: 600; }
.mr-acts i { font-style: normal; font-size: .95em; color: #6b6f78; }
/* What it found, on a card over the corner of the laptop, at a size that can be read. */
.gmac-note { position: absolute; right: 0; bottom: -11%; width: min(318px, 46%); padding: 16px 16px 14px; box-shadow: 0 24px 50px -18px rgba(0, 0, 0, .7); }
.gmac-note .gfind { margin-top: 10px; }
.gfind { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.gfind li { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--soft); }
.gfind i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; }
.gfind i svg { width: 16px; height: 16px; }
.gfind .bad i { background: #fde8e6; color: #c5221f; }
.gfind b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
.gfind span { display: block; margin-top: 1px; font-size: 13.5px; line-height: 1.35; color: var(--muted); }
/* It opens as it comes into view: the laptop rises, Google's list fills in, the score draws, then what
   it found. */
.js .start-art .gmac { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .9s var(--ease); }
.js .start-art.in .gmac { opacity: 1; transform: none; }
.js .mr-list li, .js .mr-say > *, .js .gmac-note { opacity: 0; transform: translateY(.7em); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.js .start-art.in .mr-list li, .js .start-art.in .mr-say > *, .js .start-art.in .gmac-note { opacity: 1; transform: none; }
.js .start-art.in .mr-list li:nth-child(1) { transition-delay: .45s; }
.js .start-art.in .mr-list li:nth-child(2) { transition-delay: .6s; }
.js .start-art.in .mr-list li:nth-child(3) { transition-delay: .75s; }
.js .start-art.in .mr-list li:nth-child(4) { transition-delay: .9s; }
.js .start-art.in .mr-list li:nth-child(5) { transition-delay: 1.15s; }
.js .start-art.in .mr-say > :nth-child(1) { transition-delay: 1.35s; }
.js .start-art.in .mr-say > :nth-child(2) { transition-delay: 1.55s; }
.js .start-art.in .mr-say > :nth-child(3) { transition-delay: 1.7s; }
.js .start-art.in .mr-say > :nth-child(4) { transition-delay: 1.85s; }
.js .start-art.in .gmac-note { transition-delay: 2.2s; }
.js .mr-arc { stroke-dashoffset: 106.8; transition: stroke-dashoffset 1.1s var(--ease) 1.5s; }
.js .start-art.in .mr-arc { stroke-dashoffset: 42.7; }
.still .start-art .gmac, .still .mr-list li, .still .mr-say > *, .still .gmac-note, .still .mr-arc { transition: none; }

/* Who it is for: one picture, and the things the headline names with what does each. The list is longer
   than the picture, so the picture stays in view beside it as the list goes by. */
.why-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5.5vw, 88px); align-items: start; margin-top: 48px; }
.why-pic { position: sticky; top: 104px; margin: 0; aspect-ratio: 4 / 5; border-radius: var(--r-xl); overflow: hidden; background: #1b1c20; }
.why-pic img { width: 100%; height: 100%; object-fit: cover; }
.why-list { list-style: none; margin: 0; padding: 0; }
.why-go { margin: 30px 0 0 50px; }
.why-list li { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 16px; align-items: start; padding: 19px 0; border-top: 1px solid var(--line); }
.why-list li:first-child { border-top: 0; padding-top: 0; }
.why-list li:last-child { padding-bottom: 0; }
.why-list i { grid-row: 1 / span 2; width: 34px; height: 34px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.why-list i svg { width: 19px; height: 19px; }
.why-list b { display: block; font-size: clamp(21px, 1.85vw, 27px); font-weight: 600; letter-spacing: -.03em; line-height: 1.15; }
.why-list span { display: block; margin-top: 4px; font-size: 17px; line-height: 1.45; color: var(--body); max-width: 520px; }

@media (max-width: 1020px) {
  .why-in { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 32px; }
  /* One column: the words, the pictures, then the link. While it plays it is told one step at a time,
     so a phone shows the step and its picture together: the four numbers in a row, the words of the one
     being told under them, and its picture alone on the dark. The words and the pictures each keep one
     place as tall as the tallest, so nothing jumps, and the opening lines move under the picture. */
  .tour-panel { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .start-in { grid-template-columns: 1fr; gap: 44px; }
  .start-art { max-width: 720px; }
  .gmac { font-size: min(9.4px, calc((100vw - 48px) / 83)); }
  .start-art { margin-bottom: 34px; }
  .gmac-note { bottom: -17%; }
  .tour-panel .gbook-words { display: contents; }
  .tour-panel .gbook-art { order: 1; align-self: auto; width: 100%; max-width: 680px; margin-top: 6px; }
  .tour-panel .arrow { order: 3; margin-top: 20px; align-self: flex-start; }
  .tour.live .gbook-lede { order: 2; margin-top: 20px; }
  .tour.live .gbook-steps { grid-template-columns: repeat(4, 34px) minmax(0, 1fr); gap: 12px 10px; margin: 18px 0 16px; }
  .tour.live .gbook-steps li { display: contents; }
  .tour.live .gbook-steps li > i { grid-row: 1; }
  .tour.live .gbook-steps li.is-done > i { opacity: .55; }
  .tour.live .gbook-steps li > div { grid-row: 2; grid-column: 1 / -1; display: none; min-height: 122px; }
  .tour.live .gbook-steps li.is-on > div { display: block; }
  .tour.live .gbook-art { grid-template-columns: 1fr; }
  /* The phone stands alone, cut off at the bottom of the dark so it is no taller than the other pictures. */
  .tour-panel .gbook-art.gphone { grid-template-columns: 1fr; justify-items: center; align-content: start; height: 352px; padding-bottom: 0; overflow: hidden; }
  .gphone .phone { --pw: 262px; }
  .gphone .gside { display: none; }
  .tour.live .gbook-art .gcard { grid-area: 1 / 1; align-self: center; }
  .tour.live .gcard.is-in { opacity: 0; }
  .tour.live .gcard.is-in.is-now { opacity: 1; }
}
@media (max-width: 760px) {
  /* On a phone the plumber is the top of the picture and the words sit on the dark under him. The
     changing line keeps to one line: the longest of the seven has to fit the screen. */
  .hero-top { padding: 300px 0 40px; }
  .hero-bg img { object-position: 50% 0; }
  .hero-bg::after { background: linear-gradient(180deg, rgba(8, 17, 32, .35) 0%, rgba(8, 17, 32, 0) 16%, rgba(8, 17, 32, .2) 34%, rgba(8, 17, 32, .96) 52%, rgba(8, 17, 32, 1) 100%); }
  .hero.plumb h1 { max-width: none; font-size: clamp(30px, 10.4vw, 64px); line-height: 1.08; margin-top: 14px; }
  .hero.plumb .finder { margin-top: 26px; }
  .hero.plumb .under { min-height: 96px; }
  .trades { padding: 4px 0 38px; }
  .trades-track { gap: 12px; --half-gap: 6px; }
  .trade { width: 62vw; }
  /* The tabs slide sideways under a thumb. The four pictures go one under the other, and the review
     ask's stars sit under its words. */
  .tour { padding-top: 64px; }
  .tour-eyebrow { font-size: 14px; }
  .tour-tab { height: 44px; padding: 0 15px; font-size: 16.5px; }
  .tour-panels { margin-top: 24px; }
  .gbook-lede { margin-top: 14px; font-size: 16.5px; line-height: 1.45; }
  .gbook-steps { margin-top: 20px; }
  .gbook-art { grid-template-columns: 1fr; gap: 20px; padding: 26px 18px 22px 22px; border-radius: var(--r-lg); }
  .gcard.wide { padding-left: 20px; }
  .glist .ghours { flex-basis: 100%; }
  .glist .ghours::before { content: none; }
  .gask { grid-template-columns: 1fr; }
  .grows.gweek li { grid-template-columns: 68px minmax(0, 1fr) auto; }
  .grows.gweek span:not(.gchip) { display: none; }
  .gacts { gap: 4px; }
  .gacts i { width: 44px; height: 44px; }
  .start { padding: 76px 0 64px; }
  /* On a phone the card of what it found sits under the laptop, full width, where it can be read. */
  .gmac-note { position: static; width: auto; margin-top: 18px; }
  .start-art { margin-bottom: 0; }
  .start .fine { margin-top: 26px; }
  .start-words .btn, .why-go { width: 100%; }
  .why-go { margin: 24px 0 0; }
  .why-in { grid-template-columns: 1fr; gap: 26px; margin-top: 30px; }
  .why-pic { position: static; aspect-ratio: 4 / 3; border-radius: var(--r-lg); }
  .why-pic img { object-position: 50% 22%; }
  .why-list li { padding: 16px 0; column-gap: 14px; }
  .why-list span { font-size: 16.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .tour-panel, .tour.live .gcard, .tour.live .gbook-steps li { transition: none; }
  .js .start-art .gmac, .js .mr-list li, .js .mr-say > *, .js .gmac-note, .js .mr-arc { transition: none; }
  .js .gacts .on i::after, .js .gring .gico::after { animation: none; }
  .js .trades-track { animation: none; }
  .trades { overflow-x: auto; }
}