/* Good Roofing look — the same as goodroofing.org (navy, cream, green; Bricolage Grotesque + Figtree).
 * Loaded LAST on every page, so it wins over the older styles. Fonts are served from this site. */
@font-face { font-family: "Figtree"; font-weight: 400; font-style: normal; font-display: swap; src: url(/assets/fonts/figtree-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 400; font-style: italic; font-display: swap; src: url(/assets/fonts/figtree-latin-400-italic.woff2) format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 500; font-style: normal; font-display: swap; src: url(/assets/fonts/figtree-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 600; font-style: normal; font-display: swap; src: url(/assets/fonts/figtree-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 700; font-style: normal; font-display: swap; src: url(/assets/fonts/figtree-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 800 900; font-style: normal; font-display: swap; src: url(/assets/fonts/figtree-latin-800-normal.woff2) format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-weight: 500 600; font-style: normal; font-display: swap; src: url(/assets/fonts/bricolage-grotesque-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-weight: 700; font-style: normal; font-display: swap; src: url(/assets/fonts/bricolage-grotesque-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-weight: 800 900; font-style: normal; font-display: swap; src: url(/assets/fonts/bricolage-grotesque-latin-800-normal.woff2) format("woff2"); }

:root {
  --blue: #0a2a4a; --blue-d: #061b31; --navy: #061b31; --link: #1266c0;
  --green: #47b649; --green-d: #35993f; --brand-green: #47b649;
  --ink: #14202e; --muted: #5d6673; --line: #d9d5c8; --bg: #ecebe4; --card: #fff; --sand: #edebe1;
  --tint: #f3f1ea; --tint-blue: #f0eee6; --tint-green: #e2f5e2;
  --display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --body: "Figtree", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --shadow: 0 1px 2px rgba(6, 27, 49, .04), 0 10px 30px rgba(6, 27, 49, .06);
}
/* Always the light look (like goodroofing.org), even when the phone is in dark mode: the pages use light surfaces. */
:root { color-scheme: light; }

html, body { font-family: var(--body); -webkit-font-smoothing: antialiased; }
body { background-color: var(--bg); }
h1, h2, h3, .top-title, .est-h, .name, .hero .big, .pay h1, .lg h1, .act h1 { font-family: var(--display); letter-spacing: -.01em; }
h1, h2, h3 { color: var(--ink); }
input, textarea, select, button { font-family: inherit; }

/* header bar like the site */
.top { border-bottom-color: var(--line); }
.top-title { color: var(--ink); font-weight: 700; }

/* buttons: square-ish like the site; main action green, others navy */
.btn { border-radius: 8px; font-weight: 700; }
.btn.big { border-radius: 10px; }
.btn.ghost { border-color: var(--line); color: var(--ink); }
.chips button, .detail-chips button, .feat-quick button, .decline-btn { border-radius: 8px; }
.chips button.on, .detail-chips button.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.steps button.active { background: var(--navy); border-color: var(--navy); color: #fff; }
.sent-tabs { background: var(--sand); }
.sent-tabs button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(6, 27, 49, .12); }
a { color: var(--link); }

/* cards */
.card, .pcard, .grp { border-color: var(--line); box-shadow: var(--shadow); }
h2 { color: var(--ink); }

/* soft gradients from the old look -> flat, calm surfaces */
.hello { background: #fff; border-color: var(--line); }
.hello-hi { color: var(--ink); }
.hello-wx, .hello-quote { box-shadow: none; border-color: var(--line); }
.pw-lock { background: var(--navy); box-shadow: none; border-radius: 12px; }
.est-cta-btn, .call-btn, .accepted-modal .btn.big { background: var(--green) !important; box-shadow: none; border-radius: 8px; }
.est-cta-btn:hover { background: var(--green-d) !important; }
.why-ic { background: var(--tint-green); color: var(--green-d); }
.hero { background: var(--navy); background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px); background-size: 32px 32px; box-shadow: none; }
.hero .bar i { background: var(--green); }
.send { background: var(--green); border-radius: 10px; }
.step .n { background: var(--navy); }
.est-table td.on, .est-table th.on { box-shadow: inset 2px 0 0 var(--green), inset -2px 0 0 var(--green); }

/* app hub: one calm icon style instead of rainbow tiles */
/* green, like the website's buttons: tools in solid green, Activity / Team in navy for contrast */
.tool .ic { background: var(--green) !important; color: #fff; box-shadow: 0 4px 12px rgba(71, 182, 73, .28); }
/* team hub: each tool its own friendly color (team only, customers never see this) */
.tool .ic.s0 { background: linear-gradient(135deg, #ffb547, #f27a1a) !important; box-shadow: 0 4px 12px rgba(242, 122, 26, .3); }  /* Estimate */
.tool .ic.s2 { background: linear-gradient(135deg, #4aa8ff, #1d6fd8) !important; box-shadow: 0 4px 12px rgba(29, 111, 216, .3); }  /* Contract */
.tool .ic.s1 { background: linear-gradient(135deg, #5fd068, #2f9e3d) !important; box-shadow: 0 4px 12px rgba(47, 158, 61, .3); }   /* Service Agreement */
.tool .ic.s3 { background: linear-gradient(135deg, #b98cff, #7b4fd6) !important; box-shadow: 0 4px 12px rgba(123, 79, 214, .3); } /* Change Order */
.tool .ic.s4 { background: linear-gradient(135deg, #45d3c4, #1597a0) !important; box-shadow: 0 4px 12px rgba(21, 151, 160, .3); } /* Attic Ventilation */
.tool .ic.s5 { background: linear-gradient(135deg, #ff8fb1, #e0507e) !important; box-shadow: 0 4px 12px rgba(224, 80, 126, .3); } /* Material Calculator */
.activity-card .ac-ic, .ac-ic { background: var(--navy) !important; color: #fff; box-shadow: none; }
.panel, .tool, .activity-card { border-color: var(--line); }
.done-ic { color: var(--green-d); font-weight: 700; }

/* a bit more life in the team app: website green for main actions, checkboxes and selections */
input[type="checkbox"], input[type="radio"] { accent-color: var(--green); -webkit-appearance: auto; appearance: auto; padding: 0; }
.btn { background: var(--green); color: #fff; }
.btn:active, .btn:hover { background: var(--green-d); }
.btn.ghost { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.btn.ghost:hover, .btn.ghost:active { background: var(--tint-green); border-color: #bfe5c4; }
.btn.ai-btn, .btn.link { background: #fff; }
.btn.link { background: none; }
.chips button.on, .detail-chips button.on, .act-chips button.on, .steps button.active { background: var(--green); border-color: var(--green); color: #fff; }
.sent-tabs button.on { color: var(--green-d); box-shadow: inset 0 -2px 0 var(--green), 0 1px 3px rgba(6, 27, 49, .1); }
h1 span { color: var(--green); }
.top { box-shadow: inset 0 -3px 0 var(--green); }
.grp { border-left: 3px solid var(--green); }
.ph-btn, .pay-row button { color: var(--green-d); }
.pay-row button.recv { background: var(--green); border-color: var(--green); color: #fff; }
.pill.signed, .pill.done { background: var(--tint-green); color: #1d6b2a; }

/* ---------- reviews cards (estimate, success pages) ---------- */
.gr-reviews h3 { font-family: var(--display); font-size: 20px; margin: 0 0 4px; color: var(--ink); }
.gr-rev-sub { margin: 0 0 12px; color: var(--muted); font-size: 15px; }
.gr-rev-list { display: grid; gap: 10px; }
@media (min-width: 720px) { .gr-rev-list { grid-template-columns: repeat(3, 1fr); } }
.gr-rev { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); text-decoration: none; text-align: left; transition: border-color .15s, transform .15s; }
.gr-rev:hover { border-color: var(--green); transform: translateY(-1px); }
.gr-rev-ic { flex: none; width: 40px; height: 40px; border-radius: 10px; background: #f7f6f1; display: grid; place-items: center; }
.gr-rev-ic svg { width: 26px; height: 26px; }
.gr-rev-t { flex: 1; min-width: 0; }
.gr-rev-t b { display: block; font-size: 15.5px; }
.gr-rev-t small { display: block; color: var(--muted); font-size: 13.5px; line-height: 1.35; margin-top: 1px; }
.gr-stars { color: #f5a524; letter-spacing: 1px; font-size: 13px; margin-left: 4px; }
.gr-rev-go { flex: none; color: var(--muted); font-size: 24px; line-height: 1; }

/* ---------- full-screen success page ---------- */
html.gr-success-open, html.gr-success-open body { overflow: hidden; }
.gr-success { position: fixed; inset: 0; z-index: 950; overflow-y: auto; -webkit-overflow-scrolling: touch; background: var(--bg, #f7f6f1); animation: gr-fade .35s ease; }
@keyframes gr-fade { from { opacity: 0; } to { opacity: 1; } }
.gr-success-in { max-width: 560px; margin: 0 auto; padding: calc(18px + env(safe-area-inset-top)) 16px calc(28px + env(safe-area-inset-bottom)); text-align: center; }
.gr-success-logo { height: 46px; margin: 4px auto 14px; display: block; }
.gr-success-hero { background-color: var(--navy, #061b31); background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 28px 28px; color: #fff; border-radius: 20px; padding: 28px 20px 24px; margin-bottom: 14px; box-shadow: 0 14px 36px rgba(6,27,49,.22); }
.gr-success-mark { width: 72px; height: 72px; box-shadow: 0 0 0 8px rgba(71,182,73,.22); animation: gr-pop .5s cubic-bezier(.2,1.4,.4,1); }
.gr-success-mark svg { width: 40px; height: 40px; }
@keyframes gr-pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.gr-success-eyebrow { margin: 16px 0 6px; font: 700 12.5px/1 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--green, #47b649); }
.gr-success-hero h1 { margin: 0; font-family: var(--display); font-size: 32px; line-height: 1.1; color: #fff; letter-spacing: -.01em; }
.gr-success-sub { margin: 10px auto 0; max-width: 420px; color: rgba(255,255,255,.82); font-size: 16px; }
.gr-success-sub b { color: #fff; }
.gr-success-sum { display: inline-flex; gap: 12px; align-items: baseline; margin-top: 16px; padding: 10px 16px; border-radius: 12px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); }
.gr-success-sum span { color: rgba(255,255,255,.8); font-weight: 600; }
.gr-success-sum b { font-size: 22px; font-variant-numeric: tabular-nums; }
.gr-success-btns { display: grid; gap: 8px; margin: 0 0 14px; }
.gr-success-btns .btn { width: 100%; padding: 14px; font-size: 16px; }
.gr-success-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 18px 16px; margin-bottom: 14px; text-align: left; box-shadow: var(--shadow); }
.gr-success-card .next-steps { margin: 0; }
.gr-success-card .next-steps h3 { margin-top: 0; }
.gr-success-close { border: 0; background: none; color: var(--muted); font: 600 15px var(--body); text-decoration: underline; text-underline-offset: 3px; padding: 10px; cursor: pointer; }
.gr-success-foot { color: var(--muted); font-size: 14px; margin: 6px 0 0; }
.gr-success-foot a { color: var(--ink); font-weight: 600; text-decoration: none; }
.gr-success .pay-after { text-align: left; }

/* estimate: price-held note, reviews, sign-off */
.est-held { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 5px 11px; border-radius: 999px; background: #fff; border: 1px solid #cfe6cf; font-size: 13.5px; color: #1d6b2a; }
.est-held svg { width: 15px; height: 15px; }
.est-held b { color: #1d6b2a; }
.est-reviews { margin-top: 26px; }
.est-foot { margin-top: 30px; padding: 24px 0 4px; border-top: 1px solid var(--line); text-align: center; line-height: 1.5; }
.est-thanks h2 { margin: 0 0 8px; font-size: 26px; }
.est-thanks p { margin: 0 auto 18px; max-width: 460px; color: var(--muted); font-size: 16px; }
.est-sign { display: inline-flex; align-items: center; gap: 12px; text-align: left; }
.est-av { width: 48px; height: 48px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; font: 700 17px var(--display); box-shadow: 0 0 0 4px var(--tint-green); }
.est-sign-t b { display: block; font-size: 17px; }
.est-sign-t small { color: var(--muted); font-size: 13.5px; }
.est-sign-btns { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 16px 0 6px; }
.est-sbtn { display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px; border-radius: 8px; border: 1px solid var(--line); background: #fff; color: var(--ink); font-weight: 700; font-size: 15px; text-decoration: none; }
.est-sbtn svg { width: 17px; height: 17px; }
.est-sbtn.main { background: var(--green); border-color: var(--green); color: #fff; }
.est-slogan { display: block; height: 34px; margin: 20px auto 8px; }
.est-co { margin: 0; color: var(--muted); font-size: 13px; }
.est-co a { color: var(--muted); }
@media print { .est-sign-btns, .est-reviews { display: none !important; } }

.acc-banner { display: flex; gap: 12px; align-items: center; background: #fff; border: 1px solid #bfe5c4; border-left: 4px solid var(--green); border-radius: 12px; padding: 12px 14px; margin: 0 0 14px; text-align: left; }
.acc-banner .acc-ok { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; font-weight: 800; }
.acc-banner b { display: block; font-size: 16px; }
.acc-banner small { color: var(--muted); font-size: 13.5px; }
.pdfview { z-index: 960; }

.est-cta .est-held b { font-size: inherit; color: #1d6b2a; }
.est-held { line-height: 1.3; }
.est-av { background: #fff; border: 2px solid var(--green); box-shadow: 0 0 0 4px var(--tint-green); }
.est-av img { width: 30px; height: auto; }

/* clearer blocks: a darker page, white cards with a visible edge and a soft shadow */
.card, .sec, .grp, .pcard, .panel, .tool, .activity-card, .cust, .list, .head, .sent-item, .quick a, .est, .doc, .ntc {
  border-color: #d9d5c8; box-shadow: 0 1px 2px rgba(6, 27, 49, .06), 0 6px 18px rgba(6, 27, 49, .07); }
.doc, .ntc { box-shadow: none; }
.sec > h2 { justify-content: flex-start; gap: 10px; padding-bottom: 10px; margin: -2px -16px 14px; padding-left: 16px; padding-right: 16px; border-bottom: 1px solid #ecebe4; }
.sec > h2::before { content: ''; flex: none; width: 4px; height: 20px; border-radius: 2px; background: var(--green); }

/* Messages: its own look, so it never gets lost among the other blocks */
#msgs, #msgCard { padding: 0 !important; overflow: hidden; border: 1px solid #c9d9c6 !important; }
#msgs > h2, #msgCard > .sec-h { margin: 0 !important; padding: 13px 16px !important; background: var(--navy, #061b31); color: #fff !important; font-size: 17px; letter-spacing: 0; text-transform: none; font-family: var(--display); border: 0; display: flex; align-items: center; gap: 10px; }
#msgs > h2::before, #msgCard > .sec-h::before { content: ''; width: 22px; height: 22px; flex: none; border-radius: 0; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2347b649' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); }
#msgs .thread, #msgCard .thread { background: #f3f6f1; margin: 0; padding: 14px 12px; max-height: 420px; min-height: 90px; }
#msgs .compose, #msgCard .compose { margin: 0; padding: 12px; background: #fff; border-top: 1px solid #e4e9e1; }
#msgs > .hint, #msgCard > .fine { margin: 0 !important; padding: 0 14px 12px; background: #fff; }
/* photo crop tool on top of the theme */
.crop-ov h3 { color: #fff; }
.crop-row input[type=range] { -webkit-appearance: auto; appearance: auto; display: block; width: auto; flex: 1; }

/* ---------- feel (Oct 20 2026): smooth page changes, tap feedback, loading placeholders ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 140ms ease-out both gr-vt-out; }
::view-transition-new(root) { animation: 200ms cubic-bezier(.2, .8, .3, 1) both gr-vt-in; }
@keyframes gr-vt-out { to { opacity: 0; } }
@keyframes gr-vt-in { from { opacity: 0; transform: translateY(8px); } }
html { -webkit-tap-highlight-color: transparent; }
.btn, .cbtn, button, .activity-card, .create-card, .tool, .cust, .cr, .tchat-topics a, .today a, .chip, .tabs button {
  transition: transform .12s ease, background-color .15s ease, box-shadow .15s ease, opacity .15s ease; }
.btn:active, .cbtn:active, .activity-card:active, .create-card:active, .tool:active, .cust:active, .cr:active, .tchat-topics a:active, .tabs button:active {
  transform: scale(.97); }
.btn:disabled, button:disabled { opacity: .55; }
.flash { animation: gr-toast .26s cubic-bezier(.2, .9, .3, 1.2) both; box-shadow: 0 10px 30px rgba(6, 27, 49, .3); border-radius: 14px !important; }
@keyframes gr-toast { from { opacity: 0; transform: translate(-50%, 12px) scale(.96); } to { opacity: 1; transform: translate(-50%, 0); } }
.sk-list { display: grid; gap: 10px; }
.sk-list i { display: block; height: 66px; border-radius: 14px; background: linear-gradient(90deg, #ebe9e1 25%, #f6f5f0 40%, #ebe9e1 60%); background-size: 300% 100%; animation: gr-sk 1.2s ease-in-out infinite; }
.sk-list i:nth-child(2) { opacity: .8; } .sk-list i:nth-child(3) { opacity: .6; } .sk-list i:nth-child(4) { opacity: .4; }
.sk-list.sm i { height: 46px; }
@keyframes gr-sk { from { background-position: 100% 0; } to { background-position: 0 0; } }
.gr-fresh { animation: gr-in .25s ease-out both; }
@keyframes gr-in { from { opacity: .4; } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root), .flash, .sk-list i, .gr-fresh { animation: none !important; }
  .btn:active, .cbtn:active, .activity-card:active { transform: none; }
}

/* financing greyed out under $1,000 (contract form) */
label.fin-off{opacity:.55}
label .fin-min{color:#6b7480;font-weight:500}

/* "Your Good Roofing account" line under What happens next */
.next-portal{margin:4px 0 0;padding:12px 14px;border:1px solid #cfe9cf;border-left:4px solid #47b649;border-radius:12px;background:#f3faf2;text-align:left}
.next-portal b{display:block;color:#0a2a4a;font-size:15px}
.next-portal span{display:block;color:#5d6673;font-size:14px;line-height:1.45;margin:2px 0 6px}
.next-portal a{color:#0a2a4a;font-weight:800;font-size:14.5px;text-decoration:none;word-break:break-all}

/* @mentions in chats (Oct 21 2026) */
.gr-mention { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 0; width: 100%; }
.gr-mention button { border: 1px solid #d5d2c6; background: #fff; border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 14px; font-weight: 700; color: #0a2a4a; cursor: pointer; }
.gr-mention button:active { background: #eef3f8; }