/* Dan the Lawn Man office app. Built for an iPad in full sun. */
:root {
  --turf: #1f4a2c;
  --turf-mid: #2f6b3f;
  --deck: #f2c230;
  --ground: #f6f7f2;
  --paper: #ffffff;
  --ink: #17201a;
  --soil: #5c665d;
  --line: #d6dccf;
  --alert: #b3261e;
  --alert-bg: #fbe9e7;
  --ok-bg: #e6f2e7;
  --radius: 10px;
  --tap: 52px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 17px/1.5 "Barlow", "Helvetica Neue", Arial, sans-serif;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

h1, h2, h3 {
  font-family: "Barlow Semi Condensed", "Arial Narrow", "Helvetica Neue", sans-serif;
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 .5em;
}
h1 { font-size: 2.25rem; letter-spacing: -.01em; }
h2 { font-size: 1.4rem; }
a { color: var(--turf-mid); }

.topbar {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  background: var(--turf);
  color: #fff;
  padding: calc(.75rem + env(safe-area-inset-top, 0)) 1.25rem .75rem;
  border-bottom: 5px solid var(--deck);
}
.brand {
  font-family: "Barlow Semi Condensed", sans-serif;
  font-weight: 700;
  font-size: 1.35rem;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}
.mainnav { display: flex; gap: .25rem; flex: 1; overflow-x: auto; }
.mainnav a {
  color: #dfe9e0;
  text-decoration: none;
  font-weight: 600;
  padding: .55rem .9rem;
  border-radius: 8px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.mainnav a[aria-current="page"] { background: rgba(255,255,255,.14); color: #fff; }
.signout { margin-left: auto; }
.linkbtn {
  background: none; border: 0; color: #dfe9e0; font: inherit; font-weight: 600;
  min-height: 44px; padding: 0 .5rem; cursor: pointer;
}

.page { max-width: 960px; margin: 0 auto; padding: 1.75rem 1.25rem 3rem; }

label { display: block; font-weight: 600; margin-bottom: .35rem; }
.field { margin-bottom: 1.1rem; }
.hint { color: var(--soil); font-size: .92rem; margin-top: .3rem; }
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number], select, textarea {
  width: 100%;
  min-height: var(--tap);
  padding: .6rem .8rem;
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: 8px;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--turf-mid); box-shadow: 0 0 0 3px rgba(47,107,63,.2); }
.check { display: flex; align-items: center; gap: .6rem; font-weight: 500; min-height: 44px; }
.check input { width: 22px; height: 22px; accent-color: var(--turf-mid); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap);
  padding: 0 1.4rem;
  font: 600 1.05rem/1 "Barlow", sans-serif;
  border-radius: 8px;
  border: 2px solid var(--turf);
  background: var(--turf);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
}
.btn:active { transform: translateY(1px); }
.btn-quiet { background: var(--paper); color: var(--turf); }
.btn-wide { width: 100%; }
:focus-visible { outline: 3px solid var(--deck); outline-offset: 2px; }

.notice { padding: .85rem 1rem; border-radius: 8px; margin-bottom: 1.25rem; font-weight: 500; border-left: 5px solid; }
.notice-ok { background: var(--ok-bg); border-color: var(--turf-mid); }
.notice-error { background: var(--alert-bg); border-color: var(--alert); color: #6d1712; }

.is-bare { background: var(--turf); }
.is-bare .page { max-width: 520px; padding-top: max(3rem, env(safe-area-inset-top)); }
.panel {
  background: var(--paper);
  border-radius: 14px;
  padding: 2rem 1.75rem;
  border-top: 6px solid var(--deck);
}
.panel h1 { font-size: 2rem; }
.panel .lede { color: var(--soil); margin-top: -.25rem; margin-bottom: 1.5rem; }
.panel fieldset { border: 0; padding: 0; margin: 0 0 1.5rem; }
.panel legend { font-family: "Barlow Semi Condensed", sans-serif; font-weight: 700; font-size: 1.25rem; margin-bottom: .75rem; }

.daybar { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.75rem; }
.daybar h1 { margin: 0; }
.daybar .date { color: var(--soil); font-weight: 500; }

.checklist { list-style: none; margin: 0 0 2rem; padding: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.checklist li { display: grid; grid-template-columns: 1.75rem 1fr auto; gap: .75rem; align-items: center; padding: 1rem 1.1rem; border-top: 1px solid var(--line); }
.checklist li:first-child { border-top: 0; }
.checklist .mark { width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .85rem; color: #fff; }
.mark-ok { background: var(--turf-mid); }
.checklist .mark-todo { background: var(--deck); color: var(--ink); }
.mark-bad { background: var(--alert); }
.checklist .what { font-weight: 600; }
.checklist .detail { display: block; color: var(--soil); font-weight: 400; font-size: .95rem; }

.coming { color: var(--soil); border-left: 4px solid var(--line); padding-left: 1rem; }

@media (max-width: 640px) {
  h1 { font-size: 1.85rem; }
  .topbar { flex-wrap: wrap; gap: .5rem 1rem; }
  .mainnav { order: 3; flex-basis: 100%; }
  .checklist li { grid-template-columns: 1.75rem 1fr; }
  .checklist li form { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ===== Stage 2 ===== */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pagehead { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.pagehead h1 { margin-bottom: .2rem; }
.pagehead .date { color: var(--soil); }
.row-sub { display: block; color: var(--soil); font-size: .95rem; margin: 0; }
.hint .inline { display: inline; font-weight: 500; }
input.mini { width: 5.5rem; min-height: 40px; display: inline-block; padding: .3rem .5rem; }
input[type=search] { width: 100%; min-height: var(--tap); padding: .6rem .8rem; font: inherit; border: 2px solid var(--line); border-radius: 8px; background: var(--paper); }
.warn { color: var(--alert); font-weight: 600; }
.note { background: #fbf6df; border-left: 4px solid var(--deck); padding: .6rem .9rem; border-radius: 0 8px 8px 0; margin: .75rem 0; }
.linkbtn-dark { background: none; border: 0; padding: .5rem 0; font: inherit; font-weight: 600; color: var(--turf-mid); text-decoration: underline; cursor: pointer; min-height: 44px; }
.linkbtn.danger { color: var(--alert); text-decoration: underline; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* Layout helpers */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 1rem; }
.grid-2.tight { gap: 0 .6rem; }
.span-2 { grid-column: 1 / -1; }
.form-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; }
.form-card h2 { margin-top: 1.75rem; }
.form-card h2:first-of-type { margin-top: 0; }
.actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.5rem; }
.sticky-actions { position: sticky; bottom: 0; background: var(--paper); padding: .9rem 0 calc(.9rem + env(safe-area-inset-bottom, 0)); border-top: 1px solid var(--line); margin-bottom: -1.5rem; }
fieldset.surcharges { border: 2px dashed var(--line); border-radius: var(--radius); padding: 1rem 1rem .5rem; margin: 0 0 1.1rem; }
fieldset.surcharges legend { font-weight: 700; padding: 0 .4rem; }
details.more { border-top: 1px solid var(--line); margin-top: 1rem; padding-top: .75rem; }
details.more summary { font-weight: 600; color: var(--turf-mid); cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.danger-zone { margin-top: 1.5rem; text-align: right; }
.inline-form { display: inline-block; margin-left: .75rem; }

/* Lists */
.filterbar { display: grid; grid-template-columns: 1fr auto auto; gap: .6rem; margin-bottom: 1.25rem; }
.filterbar select { width: auto; }
.rows { list-style: none; margin: 0 0 1.5rem; padding: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.rows li { border-top: 1px solid var(--line); }
.rows li:first-child { border-top: 0; }
.row-link { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .9rem 1.1rem; color: var(--ink); text-decoration: none; min-height: 64px; }
.row-link:hover { background: #f0f3ec; }
.row-main strong { font-weight: 600; }
.row-meta { display: flex; align-items: center; gap: .6rem; color: var(--soil); white-space: nowrap; font-size: .95rem; }
.rows.compact li { display: flex; justify-content: space-between; align-items: center; padding: .8rem 1.1rem; gap: 1rem; }
.rows li.is-chosen { background: var(--ok-bg); }
.empty { text-align: center; padding: 3rem 1rem; background: var(--paper); border: 2px dashed var(--line); border-radius: var(--radius); }
.empty-inline { color: var(--soil); }

.badge { display: inline-block; font-size: .8rem; font-weight: 600; padding: .2rem .55rem; border-radius: 999px; background: #e9ece4; color: var(--soil); }
.badge-active, .badge-accepted { background: var(--ok-bg); color: var(--turf); }
.badge-lead, .badge-sent { background: #fbf1c9; color: #6b5200; }
.badge-declined, .badge-expired { background: var(--alert-bg); color: #8a1f17; }
.tag { font-size: .78rem; font-weight: 600; background: #fbf1c9; color: #6b5200; padding: .15rem .5rem; border-radius: 4px; margin-left: .4rem; }
.tag-chosen { background: var(--turf-mid); color: #fff; }

.tabs { display: flex; gap: .25rem; margin-bottom: 1rem; overflow-x: auto; border-bottom: 2px solid var(--line); }
.tabs a { padding: .6rem 1rem; font-weight: 600; color: var(--soil); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.tabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--turf-mid); }

/* Customer page */
.contact-strip { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 1rem; }
.block { margin-top: 2rem; }
.blockhead { display: flex; justify-content: space-between; align-items: baseline; }
.blockhead a { font-weight: 600; }
.property { display: grid; grid-template-columns: 1fr auto; gap: 1.25rem; background: var(--paper); border: 1px solid var(--line); border-left: 6px solid var(--turf-mid); border-radius: var(--radius); padding: 1.1rem 1.25rem; margin-bottom: .9rem; }
.property h3 { font-size: 1.3rem; margin: 0; }
.property h3 a { color: var(--ink); }
.facts { display: flex; flex-wrap: wrap; gap: .4rem 1.75rem; margin: .75rem 0 0; }
.facts dt { font-size: .85rem; color: var(--soil); }
.facts dd { margin: 0; font-weight: 600; }
.property-actions { display: flex; flex-direction: column; gap: .5rem; align-items: stretch; min-width: 210px; }

/* Quote builder */
.calc-basis { background: var(--ok-bg); padding: .75rem 1rem; border-radius: 8px; margin: 0 0 1.5rem; }
.money-input { display: inline-flex; align-items: center; border: 2px solid var(--line); border-radius: 8px; background: var(--paper); overflow: hidden; width: 100%; }
.money-input:focus-within { border-color: var(--turf-mid); box-shadow: 0 0 0 3px rgba(47,107,63,.2); }
.money-input > span { padding: 0 .55rem; color: var(--soil); font-weight: 600; }
.money-input input { border: 0 !important; box-shadow: none !important; min-height: 48px; padding-left: 0 !important; }
.option-table { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: .5rem; }
.ot-head, .ot-row { display: grid; grid-template-columns: 3.5rem 1fr 11rem 6.5rem; align-items: center; gap: .75rem; padding: .55rem .9rem; }
.ot-head { background: #eef1ea; font-size: .85rem; font-weight: 600; color: var(--soil); }
.ot-row { border-top: 1px solid var(--line); }
.ot-row.is-package { background: #fcfdfa; }
.ot-row input[type=checkbox], .ot-row input[type=radio], .ot-none input { width: 24px; height: 24px; accent-color: var(--turf-mid); }
.ot-label { font-weight: 600; }
.ot-label small, .ot-price small { display: block; font-weight: 400; color: var(--soil); font-size: .82rem; }
.ot-none { padding: .4rem .9rem .6rem; border-top: 1px solid var(--line); margin: 0; font-size: .95rem; }
.items { margin-bottom: .75rem; }
.item-head, .item-row { display: grid; grid-template-columns: 1fr 5rem 8rem 6.5rem 5.5rem; gap: .6rem; align-items: start; }
.item-head { font-size: .85rem; font-weight: 600; color: var(--soil); padding-bottom: .3rem; }
.item-row { padding: .75rem 0; border-top: 1px solid var(--line); }
.item-desc { display: grid; gap: .4rem; }
.svc-hint { color: var(--soil); }
.line-total { font-weight: 600; padding-top: .85rem; text-align: right; }
.remove { background: none; border: 0; color: var(--alert); font: inherit; font-weight: 600; min-height: 48px; cursor: pointer; }
.items-total { text-align: right; font-size: 1.1rem; }

/* Staff quote view */
.send-panel { background: var(--paper); border: 2px solid var(--turf-mid); border-radius: var(--radius); padding: 1.25rem; }
.send-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.hint-form { margin-top: .5rem; }
.table-wrap { overflow-x: auto; }
table.lines { width: 100%; border-collapse: collapse; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.lines th, .lines td { text-align: left; padding: .7rem .9rem; border-top: 1px solid var(--line); vertical-align: top; }
.lines thead th { border-top: 0; font-size: .85rem; color: var(--soil); background: #eef1ea; }
.lines td small { display: block; color: var(--soil); font-size: .88rem; }
.lines .num { text-align: right; white-space: nowrap; }
.lines tfoot td { font-weight: 700; font-size: 1.05rem; border-top: 2px solid var(--ink); }
.accept-form { display: grid; gap: .5rem; max-width: 460px; }
.minor-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }

/* Price book */
.raise-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.25rem; margin-bottom: 1.25rem; }
.raise-bar label { margin: 0; }
.raise-bar .hint { flex-basis: 100%; margin: 0; }
.raise-input { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; }
.raise-input input { width: 5rem; }
table.price-grid { border-collapse: collapse; width: 100%; min-width: 720px; }
.price-grid th, .price-grid td { padding: .35rem; text-align: left; }
.price-grid thead th { font-size: .85rem; color: var(--soil); }
.price-grid th.grp { text-align: center; border-bottom: 2px solid var(--line); }
.price-grid tbody th { font-weight: 600; white-space: nowrap; padding-right: .75rem; }
.price-grid tbody th small { display: block; font-weight: 400; color: var(--soil); font-size: .8rem; }
.price-grid input { min-height: 46px; text-align: right; padding: .4rem .5rem; }
.price-grid td:nth-child(5) { padding-left: 1rem; }
.svc-row { border: 0; border-top: 1px solid var(--line); margin: 0; padding: .9rem 0 .2rem; display: grid; grid-template-columns: 2fr 7rem 8rem 9rem 5rem; gap: 0 .6rem; }
.svc-row .svc-notes { grid-column: 1 / 5; }
.svc-row .svc-active { grid-column: 5; align-self: center; }
.svc-row.is-off { opacity: .55; }
.svc-row.is-new { background: #f5f8f1; padding-left: .75rem; padding-right: .75rem; border-radius: 8px; }

/* ===== Customer-facing quote ===== */
.is-public .page { max-width: 820px; }
.is-public .topbar { justify-content: center; }
.quote-hero { padding: .5rem 0 1.25rem; border-bottom: 3px solid var(--deck); margin-bottom: 1.5rem; }
.quote-for { margin: 0; font-weight: 600; color: var(--turf-mid); }
.quote-hero h1 { font-size: clamp(2rem, 5vw, 2.9rem); margin: .1rem 0 .3rem; }
.quote-note { font-size: 1.1rem; max-width: 62ch; }
.q-section { font-size: 1.6rem; margin-top: 2rem; }
.q-lede { color: var(--soil); margin-top: -.3rem; }
.done-panel { border-top-color: var(--turf-mid); margin-bottom: 1.5rem; }
.is-public .panel { border: 1px solid var(--line); border-top: 6px solid var(--deck); margin-bottom: 1.5rem; }

.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; gap: .5rem; background: var(--paper); border: 2px solid var(--line); border-radius: 12px; padding: 1.4rem 1.2rem 1.2rem; cursor: pointer; font-weight: 400; margin: 0; }
.plan input { position: absolute; top: 1.1rem; right: 1.1rem; width: 26px; height: 26px; accent-color: var(--turf); }
.plan:has(input:checked) { border-color: var(--turf); box-shadow: 0 0 0 3px var(--turf); }
.plan.is-rec { border-color: var(--turf-mid); padding-top: 2.9rem; }
.plan-flag { position: absolute; top: 0; left: 0; right: 0; background: var(--deck); color: var(--ink); font-weight: 700; font-size: .9rem; padding: .45rem 1.2rem; border-radius: 10px 10px 0 0; }
.plan.is-rec input { top: 3.1rem; }
.plan-name { font-family: "Barlow Semi Condensed", sans-serif; font-weight: 700; font-size: 1.45rem; }
.plan-price { font-family: "Barlow Semi Condensed", sans-serif; font-weight: 700; font-size: 2.4rem; line-height: 1; color: var(--turf); }
.plan-price small { font-family: "Barlow", sans-serif; font-size: 1rem; font-weight: 500; color: var(--soil); margin-left: .3rem; }
.plan-desc { color: var(--soil); font-size: .97rem; }
.plan.is-chosen, .percut-row.is-chosen { border-color: var(--turf); background: var(--ok-bg); }
.percut { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: .4rem 1.1rem .6rem; }
.percut-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .9rem; padding: .7rem 0; border-bottom: 1px solid var(--line); margin: 0; cursor: pointer; font-weight: 400; }
.percut-row input { width: 24px; height: 24px; accent-color: var(--turf); }
.percut-row .plan-name { font-size: 1.15rem; }
.percut-price { font-weight: 700; }
.accept-box { background: var(--paper); border: 2px solid var(--turf); border-radius: 12px; padding: 1.4rem; margin-top: 2rem; }
.terms { background: var(--ground); border-radius: 8px; padding: .9rem 1rem; margin-bottom: 1.1rem; font-size: .97rem; }
.terms p { margin-top: 0; }
.btn-big { min-height: 60px; font-size: 1.2rem; }
.decline-form { text-align: center; margin-top: 1.25rem; }

@media (max-width: 760px) {
  .plans { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .property { grid-template-columns: 1fr; }
  .property-actions { min-width: 0; }
  .ot-head, .ot-row { grid-template-columns: 2.5rem 1fr 8.5rem 4.5rem; gap: .5rem; padding: .55rem .6rem; }
  .item-head { display: none; }
  .item-row { grid-template-columns: 5rem 1fr 6rem; }
  .item-row .item-desc { grid-column: 1 / -1; }
  .item-row .remove { grid-column: 3; justify-self: end; }
  .item-row .line-total { grid-column: 1 / 3; text-align: left; padding-top: 0; }
  .svc-row { grid-template-columns: 1fr 1fr; }
  .svc-row .svc-name, .svc-row .svc-notes { grid-column: 1 / -1; }
  .svc-row .svc-active { grid-column: auto; }
}
@media (max-width: 520px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .filterbar { grid-template-columns: 1fr 1fr; }
  .filterbar input { grid-column: 1 / -1; }
  .row-link { flex-direction: column; align-items: flex-start; gap: .3rem; }
}

/* Delete customer */
.danger-panel { margin-top: 2.5rem; padding: 1.25rem; border: 2px solid #e8b4ae; border-radius: var(--radius); background: #fff; }
.danger-panel h2 { color: var(--alert); font-size: 1.2rem; }
.danger-panel p { color: var(--soil); max-width: 62ch; }
.btn-danger { background: var(--alert); border-color: var(--alert); color: #fff; }

/* ===== Stage 3 ===== */
.daybar { align-items: flex-start; }
.daynav { display: flex; gap: .4rem; }
.daynav .btn { min-width: 52px; padding: 0 .9rem; font-size: 1.15rem; }
.callout { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; background: #fbf1c9; border-left: 6px solid var(--deck); border-radius: 8px; padding: .9rem 1rem; margin-bottom: 1.25rem; }
.route-bar { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.25rem; }
.btn-go { background: var(--turf); flex: 1 1 280px; font-size: 1.1rem; }
.btn-done { background: var(--turf-mid); border-color: var(--turf-mid); min-width: 120px; font-size: 1.1rem; }
.btn-icon { min-width: 52px; padding: 0; font-size: 1.2rem; }

.route { list-style: none; margin: 0; padding: 0; }
.stop { display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.1rem 1.1rem .9rem; margin-bottom: .8rem; }
.stop-num { width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--turf); color: #fff; display: grid; place-items: center; font-family: "Barlow Semi Condensed", sans-serif; font-weight: 700; font-size: 1.35rem; }
.stop-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; }
.stop h2 { font-size: 1.45rem; margin: 0; }
.stop h2 a { color: var(--ink); text-decoration: none; }
.stop-plan { color: var(--soil); font-weight: 500; }
.stop-addr { display: inline-block; font-weight: 600; font-size: 1.08rem; margin: .2rem 0 .1rem; padding: .2rem 0; }
.stop-notes { background: #fbf6df; border-radius: 6px; padding: .45rem .7rem; margin: .5rem 0 0; }
.stop-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .6rem; margin-top: .9rem; }
.stop-more { position: relative; }
.stop-more summary { list-style: none; }
.stop-more summary::-webkit-details-marker { display: none; }
.stop-more[open] summary { background: #eef1ea; }
.stop-menu { display: grid; gap: .6rem; margin-top: .6rem; padding: .8rem; background: var(--ground); border-radius: 8px; min-width: 300px; }
.menu-row { display: flex; gap: .5rem; }
.menu-row select { flex: 1; }
.reorder { display: flex; gap: .4rem; margin-left: auto; }
.stop-status { display: flex; align-items: center; gap: 1rem; margin-top: .6rem; color: var(--soil); }
.stop-done, .stop-skipped { background: #f7f8f4; border-style: dashed; }
.stop-done .stop-num { background: var(--turf-mid); }
.stop-skipped .stop-num { background: var(--soil); }
.stop-done h2 a, .stop-skipped h2 a { color: var(--soil); }
.footer-links { margin-top: 2rem; color: var(--soil); }

/* Week board */
.to-place { background: var(--paper); border: 2px solid var(--deck); border-radius: var(--radius); padding: 1.1rem 1.1rem .4rem; margin-bottom: 1.5rem; }
.to-place .blockhead { flex-wrap: wrap; gap: .6rem; margin-bottom: .5rem; }
.to-place h2 { margin: 0; }
.place-list { list-style: none; margin: 0; padding: 0; }
.place-list li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem 1rem; padding: .85rem 0; border-top: 1px solid var(--line); }
.due { display: inline-block; font-size: .9rem; font-weight: 600; color: var(--turf-mid); margin-top: .15rem; }
.due.overdue { color: var(--alert); }
.day-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.chip { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 52px; min-height: 52px; border: 2px solid var(--line); border-radius: 8px; background: var(--paper); font: 600 .95rem/1.05 "Barlow", sans-serif; color: var(--ink); cursor: pointer; }
.chip small { font-weight: 400; color: var(--soil); font-size: .8rem; }
.chip-due { border-color: var(--turf-mid); background: var(--ok-bg); }
.chip:active { transform: translateY(1px); }
.week-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .6rem; }
.day-col { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); min-height: 150px; overflow: hidden; }
.day-col.is-today { border: 2px solid var(--turf); }
.day-col.is-past { opacity: .7; }
.day-head { display: block; padding: .65rem .75rem; background: #eef1ea; color: var(--ink); text-decoration: none; }
.is-today .day-head { background: var(--turf); color: #fff; }
.day-name { display: block; font-family: "Barlow Semi Condensed", sans-serif; font-weight: 700; font-size: 1.1rem; }
.day-count { font-size: .85rem; }
.day-stops { list-style: none; margin: 0; padding: .4rem .6rem .6rem; }
.mini-stop { padding: .35rem 0; border-bottom: 1px solid var(--line); font-weight: 600; font-size: .95rem; }
.mini-stop small { display: block; font-weight: 400; color: var(--soil); font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-done span { text-decoration: line-through; color: var(--soil); }
.mini-skipped span { color: var(--soil); }
.workdays { margin-top: 2rem; }
.day-checks { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }

/* Service */
.service-chip { display: grid; gap: .1rem; background: var(--ok-bg); border-radius: 8px; padding: .7rem .85rem; font-size: .95rem; }
.service-chip a { font-weight: 600; margin-top: .2rem; }
.plan-pick { border: 0; padding: 0; margin: 0 0 1rem; }
.plan-pick legend { font-weight: 700; margin-bottom: .5rem; }
.plan-option { display: flex; gap: .8rem; align-items: flex-start; padding: .75rem .9rem; border: 2px solid var(--line); border-radius: 8px; margin-bottom: .5rem; cursor: pointer; font-weight: 400; }
.plan-option:has(input:checked) { border-color: var(--turf-mid); background: var(--ok-bg); }
.plan-option input { width: 24px; height: 24px; margin-top: .1rem; accent-color: var(--turf-mid); }
.plan-option small { display: block; color: var(--soil); }
.static { margin: .6rem 0 0; font-weight: 600; }
.money-input > span:last-child:not(:first-child) { white-space: nowrap; font-weight: 500; }
.inline-date { display: flex; flex-wrap: wrap; gap: .6rem; }
.inline-date input { width: auto; }
.send-panel { margin-bottom: 1.25rem; }

@media (max-width: 640px) {
  .stop { grid-template-columns: 1fr; }
  .stop-num { width: 2.2rem; height: 2.2rem; font-size: 1.1rem; }
  .reorder { margin-left: 0; }
  .stop-menu { min-width: 0; }
  .week-grid { grid-template-columns: 1fr 1fr; }
}
.stop-work { list-style: none; margin: .35rem 0 0; padding: 0; }
.stop-work li { display: flex; justify-content: space-between; gap: 1rem; padding: .25rem 0; color: var(--soil); border-bottom: 1px dotted var(--line); }
.stop-work li span { font-weight: 600; color: var(--ink); white-space: nowrap; }

/* ===== Stage 4 ===== */
.pay-flag { margin-top: .7rem; border-radius: 8px; padding: .75rem .9rem; }
.pay-unpaid { background: var(--alert-bg); border-left: 5px solid var(--alert); }
.pay-unpaid strong { display: block; color: #8a1f17; font-size: 1.1rem; margin-bottom: .55rem; }
.pay-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.pay-pending { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; background: #fbf1c9; border-left: 5px solid var(--deck); }
.pay-note { margin: .5rem 0 0; color: var(--soil); font-size: .95rem; }
.pay-ok { color: var(--turf-mid); font-weight: 700; }
.pay-ok::before { content: "✓ "; }
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin-bottom: 1.5rem; }
.stat { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; }
.stat-num { display: block; font-family: "Barlow Semi Condensed", sans-serif; font-weight: 700; font-size: 1.9rem; line-height: 1.1; }
.stat-small { font-size: 1.2rem; }
.stat-label { color: var(--soil); font-size: .92rem; }
.paid-line td { color: var(--turf-mid); }
.billing-card { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.2rem; margin-bottom: .9rem; }
.billing-card p { margin: 0 0 .25rem; }
.billing-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-start; }
.credit-line { color: var(--turf-mid); font-weight: 600; }
.card-line { font-size: 1.05rem; }
.credit-form { display: grid; grid-template-columns: 10rem 1fr auto; gap: 0 .75rem; align-items: start; margin: .75rem 0; }
.credit-form .btn { margin-top: 1.75rem; }
.done-panel h3 { margin-top: 1.5rem; }
@media (max-width: 640px) {
  .stat-row { grid-template-columns: 1fr; }
  .credit-form { grid-template-columns: 1fr; }
  .credit-form .btn { margin-top: 0; }
}
.confirm-delete { display: grid; gap: .5rem; max-width: 380px; }
.confirm-delete label { margin: 0; }

/* ===== Stage 5 ===== */
.requests { background: var(--paper); border: 2px solid var(--turf-mid); border-radius: var(--radius); padding: 1rem 1.1rem .4rem; margin-bottom: 1.25rem; }
.requests h2 { font-size: 1.2rem; margin-bottom: .4rem; }
.requests ul { list-style: none; margin: 0; padding: 0; }
.req { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 1rem; padding: .75rem 0; border-top: 1px solid var(--line); }
.req-main { display: grid; gap: .1rem; }
.req-main small { color: var(--soil); }
.req-note { font-style: italic; color: var(--soil); }
.req-actions { display: flex; gap: .5rem; align-items: center; }
.req-cancel { border-left: 4px solid var(--alert); padding-left: .75rem; }
.req-extra_work { border-left: 4px solid var(--deck); padding-left: .75rem; }

.portal-login { max-width: 480px; margin: 0 auto; }
.portal-head { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 3px solid var(--deck); padding-bottom: .75rem; margin-bottom: 1.25rem; }
.portal-head h1 { margin: .1rem 0 0; font-size: clamp(2rem, 5vw, 2.6rem); }
.bill-due { display: flex; justify-content: space-between; align-items: center; gap: 1rem; background: var(--alert-bg); border-left: 6px solid var(--alert); border-radius: 8px; padding: .9rem 1rem; margin-bottom: 1rem; }
.bill-due strong { display: block; font-size: 1.2rem; }
.bill-due span { color: var(--soil); }
.plan-card { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; background: var(--paper); border: 1px solid var(--line); border-left: 6px solid var(--turf-mid); border-radius: var(--radius); padding: 1.1rem 1.2rem; margin-bottom: .9rem; }
.plan-card h2 { margin: 0 0 .2rem; font-size: 1.4rem; }
.plan-card-actions { display: flex; flex-direction: column; align-items: flex-end; gap: .4rem; }
.status-line { margin: .5rem 0 0; font-weight: 600; }
.status-active { color: var(--turf-mid); }
.status-paused { color: #6b5200; }
.status-ending { color: var(--alert); }
.portal-visits li.is-skipped .row-main strong { text-decoration: line-through; color: var(--soil); }
.portal-visits .row-meta form { display: inline; }
.terms-list { padding-left: 1.2rem; }
.terms-list li { margin-bottom: .5rem; }
.cancel-form { display: grid; gap: .9rem; margin-top: 1.25rem; }
.work-pick { border: 0; padding: 0; margin: 0 0 1rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.work-pick legend { font-weight: 700; margin-bottom: .4rem; }
@media (max-width: 560px) {
  .work-pick { grid-template-columns: 1fr; }
  .plan-card-actions { align-items: flex-start; }
}
.back-link { margin: 0 0 1rem; }
.back-link a { font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }

/* ===== Service agreement ===== */
.agr-box { max-height: 420px; overflow-y: auto; background: var(--paper); border: 2px solid var(--line); border-radius: 8px; padding: 1rem 1.2rem; margin: .75rem 0 1rem; }
.agr-box:focus-visible { border-color: var(--turf-mid); }
.terms h3 { margin: 0 0 .25rem; font-size: 1.25rem; }
.agree-line { align-items: flex-start; font-weight: 600; }
.agree-line input { margin-top: .2rem; flex-shrink: 0; }
.agreement-page { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem 2.2rem; margin-bottom: 1.25rem; }
.agreement-doc { font-size: 1rem; line-height: 1.6; max-width: 70ch; }
.agreement-doc h1 { font-size: 1.9rem; margin-bottom: .1rem; }
.agreement-doc h2 { font-size: 1.15rem; margin: 1.5rem 0 .4rem; }
.agreement-doc p { margin: 0 0 .75rem; }
.agr-sub { color: var(--soil); font-weight: 600; margin-bottom: 1.25rem !important; }
.agr-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; background: var(--ground); border-radius: 8px; padding: 1rem 1.1rem; margin-bottom: 1.25rem; }
.agr-label { display: block; font-size: .8rem; font-weight: 600; color: var(--soil); margin-bottom: .2rem; }
.agr-sign { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; border-top: 2px solid var(--ink); margin-top: 1.75rem; padding-top: 1rem; }
.agr-sig { display: block; font-family: "Brush Script MT", "Segoe Script", cursive; font-size: 1.9rem; line-height: 1.2; }
.agr-meta { display: block; color: var(--soil); font-size: .85rem; }
.sign-box { margin-top: 0; }
.sign-banner { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; background: #fbf1c9; border-left: 5px solid var(--deck); border-radius: 8px; padding: .75rem .9rem; margin: .6rem 0; }
.next-step { margin-bottom: 1.25rem; }
@media (max-width: 640px) {
  .agreement-page { padding: 1.25rem 1rem; }
  .agr-parties, .agr-sign { grid-template-columns: 1fr; }
}
@media print {
  .topbar, .no-print, .back-link { display: none !important; }
  body, .is-public { background: #fff; }
  .page { padding: 0; max-width: none; }
  .agreement-page { border: 0; padding: 0; }
  .agr-parties { background: none; border: 1px solid #999; }
  a { color: inherit; text-decoration: none; }
}

/* =====================================================================
   BRAND LAYER: matches danthelawnman.com
   Forest green nav, striped deep-green heroes, lime buttons with dark
   text, grass-green card rules, sage sections, Archivo + Source Sans 3.
   ===================================================================== */
:root {
  --turf: #1c4d2f;        /* nav forest */
  --turf-deep: #14442a;   /* hero stripes, form panels */
  --turf-hero: #1b5434;
  --turf-mid: #5b9a2f;    /* grass: card rules, icons, small buttons */
  --deck: #8cd234;        /* lime: primary buttons, accent bars */
  --footer: #1f3a27;
  --ground: #f0f6ec;      /* sage */
  --paper: #ffffff;
  --ink: #151a13;
  --soil: #4e534c;
  --line: #dde5d6;
  --link: #1c4d2f;
  --ok-bg: #e9f4dd;
  --tint: #f4f9ec;
  --amber-bg: #fdf4d6;
  --amber-ink: #6a5200;
  --radius: 4px;
  --head: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body: "Source Sans 3", "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
}

body { font-family: var(--body); font-size: 17.5px; color: var(--ink); background: var(--ground); }
.is-public { background: var(--paper); }
h1, h2, h3, .plan-name, .plan-price, .stat-num, .day-name, .stop-num, .panel legend, .agr-sig + * {
  font-family: var(--head);
  font-weight: 800;
  letter-spacing: -0.02em;
}
h2, h3 { font-weight: 700; }
a { color: var(--link); font-weight: 600; text-decoration-color: var(--deck); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* ---- Header, nav, footer ---- */
.site-header { background: var(--paper); padding-top: env(safe-area-inset-top, 0); }
.site-header-inner { max-width: 1100px; margin: 0 auto; padding: .55rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.logo img { display: block; height: 64px; width: auto; }
.header-contact { display: flex; align-items: center; gap: 1.5rem; }
.header-contact form { margin: 0; }
.contact-item { display: flex; align-items: center; gap: .55rem; color: var(--ink); text-decoration: none; font-weight: 700; font-size: .95rem; line-height: 1.15; }
.contact-item small, .office-label small { display: block; font-size: .72rem; font-weight: 600; color: var(--soil); }
.contact-item .icon { color: var(--turf-mid); flex-shrink: 0; }
.office-label { font-weight: 700; line-height: 1.15; }
.site-nav { background: var(--turf); }
.site-nav-inner { max-width: 1100px; margin: 0 auto; padding: 0 1.25rem; display: flex; justify-content: center; gap: .25rem; overflow-x: auto; }
.site-nav a { color: #fff; text-decoration: none; font-weight: 700; font-size: .95rem; padding: .8rem .9rem; min-height: 48px; display: inline-flex; align-items: center; white-space: nowrap; border-bottom: 3px solid transparent; }
.site-nav a[aria-current="page"] { border-bottom-color: var(--deck); }
.site-nav a:hover { background: rgba(255,255,255,.07); }

.site-footer { background: var(--footer); color: #dfe8dc; margin-top: 3rem; padding-bottom: env(safe-area-inset-bottom, 0); }
.site-footer-inner { max-width: 1100px; margin: 0 auto; padding: 2.75rem 1.25rem 1.5rem; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; }
.site-footer strong { font-family: var(--head); font-size: 1.4rem; color: #fff; }
.site-footer p { margin: .5rem 0 1rem; font-size: .95rem; max-width: 34ch; }
.site-footer h2 { font-family: var(--body); font-weight: 700; font-size: 1rem; color: #fff; letter-spacing: 0; margin: 0 0 .75rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { padding: .2rem 0 .2rem 1.1rem; position: relative; font-size: .95rem; }
.site-footer li::before { content: ""; position: absolute; left: 0; top: .72em; width: 7px; height: 7px; border-radius: 50%; background: var(--deck); }
.site-footer a { color: #dfe8dc; font-weight: 400; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-call { display: flex; align-items: center; gap: .7rem; color: #fff !important; font-family: var(--head); font-weight: 800; font-size: 1.2rem; }
.footer-call small { display: block; font-family: var(--body); font-weight: 400; font-size: .8rem; color: #cfdacb; }
.footer-call-icon { width: 40px; height: 40px; border-radius: 50%; background: var(--turf-mid); display: grid; place-items: center; color: #fff; }
.footer-legal { max-width: 1100px; margin: 0 auto; padding: 1rem 1.25rem 1.5rem; border-top: 1px solid rgba(255,255,255,.12); font-size: .82rem; color: #b9c7b5; }

/* ---- Buttons ---- */
.btn { background: var(--deck); border: 2px solid var(--deck); color: var(--ink); font-family: var(--body); font-weight: 700; border-radius: var(--radius); }
.btn:hover { filter: brightness(.96); }
.btn-quiet { background: var(--paper); border: 1.5px solid var(--turf); color: var(--turf); }
.btn-pill { background: var(--turf-mid); border-color: var(--turf-mid); color: #fff; border-radius: 999px; min-height: 44px; padding: 0 1.3rem; font-size: .95rem; }
.btn-pill-quiet { background: var(--paper); color: var(--turf); border-color: var(--line); }
.btn-go { background: var(--turf); border-color: var(--turf); color: #fff; }
.btn-done { background: var(--deck); border-color: var(--deck); color: var(--ink); }
.btn-danger { background: #b3261e; border-color: #b3261e; color: #fff; }
.linkbtn-dark { color: var(--link); text-decoration-color: var(--deck); }
:focus-visible { outline: 3px solid var(--deck); outline-offset: 2px; }

/* ---- Forms ---- */
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number], input[type=date], input[type=search], select, textarea {
  border: 1.5px solid #cfd9c8; border-radius: 3px; font-family: var(--body);
}
input[type=date] { width: 100%; min-height: var(--tap); padding: .5rem .7rem; background: var(--paper); font-size: 1rem; }
.money-input { border: 1.5px solid #cfd9c8; border-radius: 3px; }
input:focus, select:focus, textarea:focus { border-color: var(--turf-mid); box-shadow: 0 0 0 3px rgba(140,210,52,.3); }

/* ---- Surfaces: square cards with a grass rule on top, like the website ---- */
.panel, .form-card, .send-panel, .to-place, .requests, .accept-box, .plan-card, .billing-card, .agreement-page, .percut, .empty {
  border-radius: var(--radius);
}
.panel { border: 1px solid var(--line); border-top: 4px solid var(--turf-mid); }
.form-card { border-top: 4px solid var(--turf-mid); }
.property, .plan-card { border-left: 0; border-top: 4px solid var(--turf-mid); border-radius: var(--radius); }
.stop { border-radius: var(--radius); border-top: 4px solid var(--turf-mid); }
.stop-done, .stop-skipped { border-top-color: var(--line); }
.send-panel, .requests { border: 1px solid var(--line); border-top: 4px solid var(--deck); }
.to-place { border: 1px solid var(--line); border-top: 4px solid var(--deck); }
.accept-box { border: 0; background: var(--turf-deep); color: #fff; padding: 1.6rem; }
.accept-box label, .accept-box .hint, .accept-box p { color: #e3ece0; }
.accept-box .terms { background: var(--paper); color: var(--ink); }
.accept-box .terms label, .accept-box .terms .hint, .accept-box .terms p { color: var(--ink); }
.accept-box .terms .hint { color: var(--soil); }
.rows, .checklist, table.lines, .option-table, .day-col, .stat { border-radius: var(--radius); }
.day-col.is-today { border-color: var(--turf); }

/* Accent bar under section headings, as on the website */
.is-public h1::after, .is-public .q-section::after, .pagehead h1::after, .daybar h1::after {
  content: ""; display: block; width: 44px; height: 4px; background: var(--deck); margin-top: .55rem;
}
.agreement-doc h1::after { display: none; }

/* Notices and flags in brand tints */
.notice-ok { background: var(--ok-bg); border-color: var(--turf-mid); }
.note, .callout, .pay-pending, .sign-banner, .calc-basis { background: var(--tint); border-left-color: var(--deck); }
.callout { border-left: 6px solid var(--deck); }
.tag { background: #e8f5d4; color: #2f5a12; }
.badge-lead, .badge-sent { background: var(--amber-bg); color: var(--amber-ink); }
.chip-due { border-color: var(--turf-mid); background: var(--ok-bg); }
.mark-ok { background: var(--turf-mid); }
.checklist .mark-todo { background: var(--deck); color: var(--ink); }
.stop-num { background: var(--turf); border-radius: 4px; }
.stop-done .stop-num { background: var(--turf-mid); }
.ot-head, .lines thead th, .day-head { background: var(--ground); }
.is-today .day-head { background: var(--turf); }
.service-chip { background: var(--tint); border-left: 3px solid var(--deck); }
.stat { border-top: 4px solid var(--turf-mid); }
.stat-num { color: var(--turf); }

/* ---- Customer-facing hero: striped deep green, like the website hero ---- */
.is-public .page { padding-top: 0; }
.is-public .quote-hero, .is-public .portal-head {
  margin: 0 -1.25rem 1.75rem;
  padding: 2.25rem 1.5rem 2rem;
  color: #fff;
  border-bottom: 0;
  background: repeating-linear-gradient(115deg, var(--turf-hero) 0 90px, var(--turf-deep) 90px 180px);
}
.is-public .quote-hero h1, .is-public .portal-head h1 { color: #fff; font-size: clamp(2rem, 5vw, 2.8rem); }
.is-public .quote-for { color: var(--deck); font-family: var(--body); font-weight: 700; }
.is-public .quote-hero .row-sub { color: #d6e3d2; }
.is-public .portal-head .linkbtn-dark { color: #fff; }
.is-public .back-link { margin: 1rem 0; }
.is-public .back-link + .quote-hero { margin-top: 0; }
@media (min-width: 900px) {
  .is-public .quote-hero, .is-public .portal-head { margin-left: 0; margin-right: 0; border-radius: 0 0 var(--radius) var(--radius); padding-left: 2rem; padding-right: 2rem; }
}

/* Plans on the quote page */
.plan { border-radius: var(--radius); border: 1px solid var(--line); border-top: 4px solid var(--turf-mid); }
.plan.is-rec { border: 2px solid var(--deck); border-top-width: 2px; }
.plan-flag { background: var(--deck); color: var(--ink); border-radius: 0; font-family: var(--body); }
.plan:has(input:checked) { border-color: var(--turf); box-shadow: 0 0 0 3px var(--deck); }
.plan-price { color: var(--turf); }
.bill-due { border-radius: var(--radius); }

/* Sign-in and setup screens */
.is-bare { background: repeating-linear-gradient(115deg, var(--turf-hero) 0 90px, var(--turf-deep) 90px 180px); }
.bare-logo { text-align: center; padding: max(2rem, env(safe-area-inset-top)) 0 0; }
.bare-logo img { height: 98px; width: auto; background: #fff; padding: 8px 12px; border-radius: var(--radius); }
.is-bare .page { padding-top: 1.5rem; }
.is-bare .panel { border-top: 4px solid var(--deck); }

/* Agreement document type */
.agreement-doc { font-family: var(--body); }
.agreement-doc h2 { font-family: var(--head); }

@media (max-width: 760px) {
  .site-footer-inner { grid-template-columns: 1fr; gap: 1.5rem; }
  .hide-sm { display: none; }
  .header-contact { gap: .9rem; }
  .logo img { height: 52px; }
  .site-nav-inner { justify-content: flex-start; }
}
@media (max-width: 420px) {
  .contact-item span { display: none; }
}
@media print {
  .site-header, .site-nav, .site-footer { display: none !important; }
}
.site-footer .footer-legal { max-width: 1100px; margin: 0 auto; }
.is-public .page { padding-top: 1.75rem; }
.is-public .page > .quote-hero:first-child, .is-public .page > .portal-head:first-child,
.is-public .page > .notice:first-child + .quote-hero, .is-public .page > .notice:first-child + .portal-head { margin-top: -1.75rem; }
.is-public .back-link + .quote-hero { margin-top: 0; }
.plan-price small { font-family: var(--body); }
.rows.compact li > .row-link { flex: 1; padding: 0; min-height: 0; }
.rows.compact li:has(> .row-link) { padding: .8rem 1.1rem; }
.is-bare { min-height: 100vh; min-height: 100dvh; }

/* ---- Exact website tokens (from danthelawnman.com source) ---- */
:root {
  --turf: #1B4D2E;       /* --g8, nav */
  --turf-deep: #14452A;  /* --forest */
  --turf-hero: #1A5434;  /* --forest-2 */
  --turf-mid: #5A9A2E;   /* --g6, pill and rules */
  --lime-deep: #5E9E1C;
  --deck: #8CD234;       /* --lime */
  --footer: #1E3A26;     /* --g9 */
  --ground: #F1F6EC;     /* --mist */
  --ink: #151A12;
  --soil: #4B5745;       /* --muted */
  --line: #D5E2CB;
}
.site-header { box-shadow: 0 2px 16px rgba(18,59,34,.08); position: relative; z-index: 2; }
.logo img { height: 76px; }
.btn { font-family: var(--head); font-weight: 700; border-radius: 8px; }
.btn-pill { font-family: var(--head); font-weight: 600; border-radius: 999px; background: var(--turf-mid); border-color: var(--turf-mid); }
.btn-pill-quiet { background: #fff; color: var(--turf); border-color: var(--line); }
.site-nav a { font-family: var(--head); font-weight: 500; border-radius: 999px; padding: .4rem 1rem; margin: .45rem 0; min-height: 40px; border-bottom: 0; }
.site-nav a:hover { background: rgba(255,255,255,.12); }
.site-nav a[aria-current="page"] { background: rgba(255,255,255,.16); box-shadow: inset 0 -3px 0 var(--deck); }
.is-public .quote-hero, .is-public .portal-head, .is-bare {
  background: repeating-linear-gradient(118deg, var(--turf-deep) 0 110px, var(--turf-hero) 110px 220px);
}
.is-public h1 { font-weight: 800; letter-spacing: -.02em; }
h2, h3 { letter-spacing: -.01em; }
:focus-visible { outline: 3px solid #F7A928; outline-offset: 3px; }
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number], input[type=date], input[type=search], select, textarea, .money-input { border-color: var(--line); }
.site-footer { background: var(--footer); color: #C8D8C0; }
.flogo { width: 190px; height: auto; display: block; margin-bottom: 12px; }
.bare-logo img { height: auto; width: 190px; background: none; padding: 0; }
.site-footer h2 { font-family: var(--head); font-weight: 700; }
@media (max-width: 760px) { .logo img { height: 58px; } }

/* ---- Space between the nav and the green banner ---- */
.is-public .page { padding-top: 2.25rem; }
.is-public .quote-hero, .is-public .portal-head,
.is-public .page > .quote-hero:first-child, .is-public .page > .portal-head:first-child,
.is-public .page > .notice:first-child + .quote-hero, .is-public .page > .notice:first-child + .portal-head,
.is-public .back-link + .quote-hero {
  margin: 0 0 2rem;
  border-radius: 8px;
  padding: 2.25rem 1.75rem 2rem;
}
.is-public .back-link { margin: 0 0 1rem; }
.is-public .page > .notice:first-child { margin-bottom: 1.25rem; }
@media (min-width: 900px) {
  .is-public .quote-hero, .is-public .portal-head { padding: 2.75rem 2.5rem 2.4rem; }
}
.site-footer-inner { grid-template-columns: 1.4fr 1fr 1fr 1fr; }

/* ---- Contact page ---- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 1.5rem; align-items: start; }
.contact-ways { display: grid; gap: .75rem; }
.way { display: flex; align-items: center; gap: .9rem; background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--turf-mid); border-radius: var(--radius); padding: 1rem 1.1rem; color: var(--ink); text-decoration: none; font-weight: 700; min-height: 72px; }
.way:hover { border-color: var(--turf-mid); }
.way small { display: block; font-weight: 600; font-size: .8rem; color: var(--soil); }
.way .icon { width: 28px; height: 28px; color: var(--turf-mid); flex-shrink: 0; }
.way-static { border-top-color: var(--line); }
.contact-form h2 { margin-top: 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 760px) {
  .contact-grid { grid-template-columns: 1fr; }
  .contact-form-wrap { order: -1; }
}

/* =====================================================================
   DARK MODE for customer pages, using the website's dark palette.
   The header stays white with the logo, like the website. The office
   app stays light for use outdoors.
   ===================================================================== */
@media (prefers-color-scheme: dark) {
  body.is-public {
    color-scheme: dark;
    --paper: #0F150D;
    --ground: #162014;
    --ink: #EEF3EA;
    --soil: #B4C1AD;
    --line: #2B3A27;
    --link: #A9DE6A;
    --tint: #1A2817;
    --ok-bg: #1C2E17;
    --alert-bg: #3A1714;
    --amber-bg: #3A2F10;
    --amber-ink: #F2D27C;
    background: var(--paper);
  }
  /* Header stays white, like the site */
  .is-public .site-header { background: #fff; }
  .is-public .contact-item, .is-public .office-label { color: #151A12; }
  .is-public .contact-item small { color: #4B5745; }
  /* Text on lime stays dark */
  .is-public .btn, .is-public .btn-done, .is-public .plan-flag { color: #151A12; }
  .is-public .btn-quiet { background: transparent; color: var(--ink); border-color: var(--line); }
  .is-public .btn-pill { color: #fff; }
  .is-public .btn-danger { color: #fff; }
  .is-public a { color: var(--link); }
  .is-public .site-nav a, .is-public .site-footer a { color: inherit; }
  .is-public .site-nav a { color: #fff; }
  .is-public .notice-error { color: #F3B6AE; border-color: #E0665A; }
  .is-public .notice-ok { color: var(--ink); }
  .is-public .badge { background: #26331F; color: var(--soil); }
  .is-public .badge-active, .is-public .badge-accepted { background: #1C2E17; color: #A9DE6A; }
  .is-public .badge-declined, .is-public .badge-expired { background: #3A1714; color: #F3B6AE; }
  .is-public .row-link:hover { background: var(--ground); }
  .is-public .plan-price, .is-public .stat-num { color: #A9DE6A; }
  .is-public .plan:has(input:checked) { border-color: var(--deck); }
  .is-public .lines tfoot td { border-top-color: var(--ink); }
  .is-public .warn { color: #F3B6AE; }
  .is-public .status-active { color: #A9DE6A; }
  .is-public .status-paused { color: #F2D27C; }
  .is-public .status-ending { color: #F3B6AE; }
  .is-public .credit-line, .is-public .paid-line td { color: #A9DE6A; }
  .is-public .way .icon, .is-public .contact-item .icon { color: var(--deck); }
  .is-public .contact-item .icon { color: #5A9A2E; }
  .is-public input::placeholder, .is-public textarea::placeholder { color: #7E8C78; }
}
/* Printed agreements and receipts are always light */
@media print {
  body.is-public { --paper: #fff; --ground: #F1F6EC; --ink: #151A12; --soil: #4B5745; --line: #D5E2CB; --link: #1B4D2E; color-scheme: light; background: #fff; }
}
@media (prefers-color-scheme: dark) {
  .is-public input[type=radio], .is-public input[type=checkbox] { accent-color: #8CD234; }
  .is-public .portal-head .linkbtn-dark { color: #fff; }
  .is-public .row-link, .is-public .way { color: var(--ink); }
  .is-public .way .icon { color: #8CD234; }
}

/* ---- Estimate requests ---- */
.estimate-form .work-pick { margin-top: .5rem; }
.next-steps { max-width: 720px; }
.steps { list-style: none; counter-reset: step; padding: 0; margin: 1rem 0 1.75rem; display: grid; gap: .75rem; }
.steps li { counter-increment: step; position: relative; padding: 1rem 1.1rem 1rem 3.6rem; background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--turf-mid); border-radius: var(--radius); }
.steps li::before { content: counter(step); position: absolute; left: 1rem; top: 1rem; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--deck); color: #151A12; font-family: var(--head); font-weight: 800; display: grid; place-items: center; }
.steps strong { display: block; font-family: var(--head); font-size: 1.1rem; }
.steps span { color: var(--soil); }
.next-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.req-estimate { border-left: 4px solid var(--deck); padding-left: .75rem; }

/* ---- Nav: no pills, no bar. The current page shows in lime text. ---- */
.site-nav a, .site-nav a:hover, .site-nav a[aria-current="page"] {
  background: none !important; box-shadow: none !important; border: 0 !important; border-radius: 0;
  padding: .85rem 1rem; margin: 0; min-height: 48px;
}
.site-nav a:hover { color: #D7F0B4; }
.site-nav a[aria-current="page"] { color: var(--deck) !important; }
.nav-count { display: inline-grid; place-items: center; min-width: 1.35rem; height: 1.35rem; padding: 0 .35rem; margin-left: .4rem; border-radius: 999px; background: var(--deck); color: #151A12; font-family: var(--body); font-weight: 700; font-size: .78rem; }
.update-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.update { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem 1.25rem; background: var(--paper); border: 1px solid var(--line); border-left: 5px solid var(--turf-mid); border-radius: var(--radius); padding: 1rem 1.2rem; }
.update-main { display: grid; gap: .15rem; max-width: 640px; }
.update-main small { color: var(--soil); }
.update-kind { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--turf-mid); }
.update-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.upd-estimate, .upd-extra_work { border-left-color: var(--deck); }
.upd-cancel { border-left-color: #b3261e; }
.upd-cancel .update-kind { color: #b3261e; }
.tab-count { display: inline-grid; place-items: center; min-width: 1.3rem; height: 1.3rem; padding: 0 .3rem; border-radius: 999px; background: var(--deck); color: #151A12; font-size: .78rem; margin-left: .3rem; }
.tab-num { color: var(--soil); font-weight: 600; font-size: .85rem; margin-left: .2rem; }
.tabs a[aria-current="page"] .tab-num { color: var(--turf-mid); }
.filterbar { grid-template-columns: 1fr auto; }
.check-email { display: flex; gap: 1rem; align-items: flex-start; background: var(--tint); border: 2px solid var(--deck); border-radius: 8px; padding: 1.25rem 1.4rem; margin-bottom: 2rem; }
.check-email svg { color: var(--turf-mid); flex-shrink: 0; margin-top: .15rem; }
.check-email h2 { margin: 0 0 .35rem; font-size: 1.45rem; }
.check-email p { margin: 0 0 .5rem; }
.check-email .hint { margin: 0; }
@media (prefers-color-scheme: dark) { .is-public .check-email svg { color: #8CD234; } }

/* ---- Automations ---- */
.pagehead-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.auto-list { list-style: none; margin: 0; padding: 0; }
.auto-list > li { padding: 1rem 0; border-top: 1px solid var(--line); }
.auto-list > li:first-child { border-top: 0; padding-top: 0; }
.auto-toggle { display: flex; gap: .9rem; align-items: flex-start; cursor: pointer; font-weight: 400; margin: 0; }
.auto-toggle input { width: 24px; height: 24px; margin-top: .15rem; accent-color: var(--turf-mid); flex-shrink: 0; }
.auto-text { display: grid; gap: .15rem; }
.auto-text strong { font-family: var(--head); font-size: 1.08rem; }
.auto-text span { color: var(--soil); }
.auto-text small { color: var(--turf-mid); font-weight: 600; }
.auto-text small.warn { color: #b3261e; }
.auto-field { margin: .75rem 0 0 2.4rem; max-width: 520px; }
.auto-field .money-input { max-width: 160px; }
.prefs-form { display: grid; gap: .25rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.2rem; }
.prefs-form .btn { justify-self: start; margin-top: .5rem; }
.upd-alert { border-left-color: #2f6fb3; }
.upd-alert .update-kind { color: #2f6fb3; }
.upd-renewal { border-left-color: var(--deck); }
.upd-reminder .update-kind { color: #8a5a00; }