@font-face { font-family: 'Barlow Condensed'; src: url('/fonts/BarlowCondensed-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Public Sans'; src: url('/fonts/PublicSans-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Public Sans'; src: url('/fonts/PublicSans-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  --yellow: #F5C518;
  --charcoal: #19231E;
  --chalk: #F7F5ED;
  --white: #FFFFFF;
  --heading: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --body: 'Public Sans', Arial, sans-serif;
  --tap: 56px;
  --radius-card: 16px;
  --radius-ctl: 12px;
  --radius-sm: 8px;
  --radius-pill: 999px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--charcoal); background: var(--chalk); font: 400 18px/1.5 var(--body); min-height: 100vh; }
h1, h2, h3 { font-family: var(--heading); font-weight: 700; line-height: 1.05; margin: 0 0 12px; }
h1 { font-size: 44px; }
h2 { font-size: 28px; margin-top: 24px; }
p { margin: 0 0 16px; }
a { color: var(--charcoal); }
strong { font-weight: 600; }

.top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 16px; padding-top: max(8px, env(safe-area-inset-top)); background: var(--yellow); border-bottom: 3px solid var(--charcoal); }
.logo-btn { background: none; border: 0; padding: 0; min-height: var(--tap); display: flex; align-items: center; }
.logo-btn img { display: block; height: 40px; width: auto; }

main { max-width: 560px; margin: 0 auto; padding: 24px 16px 64px; padding-bottom: max(64px, env(safe-area-inset-bottom)); }
.lead { font-size: 20px; }
.small { font-size: 16px; }
.hint { font-size: 18px; text-align: center; }
.sr { position: absolute; left: -9999px; }

button, .button { min-height: var(--tap); min-width: var(--tap); padding: 12px 20px; border: 2px solid var(--charcoal); border-radius: var(--radius-ctl); background: var(--yellow); color: var(--charcoal); font: 600 18px/1.2 var(--body); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; text-align: center; touch-action: manipulation; }
button:active, .button:active { background: var(--charcoal); color: var(--chalk); }
button:disabled { opacity: 0.5; cursor: default; }
button.big, .button.big { width: 100%; min-height: 64px; font-size: 22px; }
button.alt, .button.alt { background: var(--white); }
button.ghost { background: transparent; }
button.wide { width: 100%; }
:focus-visible { outline: 3px solid var(--charcoal); outline-offset: 3px; }
.top :focus-visible { outline-color: var(--charcoal); }

label { display: block; font-weight: 600; margin: 16px 0 6px; }
input[type=text], input[type=tel], input[type=email], input[type=search], input[type=date], input[type=number], textarea, select {
  width: 100%; min-height: var(--tap); padding: 12px 14px; border: 2px solid var(--charcoal); border-radius: var(--radius-ctl); background: var(--white); color: var(--charcoal); font: 400 20px/1.3 var(--body);
}
input[type=file] { width: 100%; padding: 12px 0; font-size: 18px; }
input[type=color] { width: 72px; height: 48px; padding: 2px; border: 2px solid var(--ink, #19231e); border-radius: 8px; background: none; }
label.check { display: flex; align-items: center; gap: 14px; min-height: var(--tap); margin-top: 20px; }
label.check input { width: 32px; height: 32px; accent-color: var(--charcoal); flex: none; }
.logo-pic { display: block; max-width: 200px; max-height: 100px; margin: 8px 0; border: 2px solid var(--charcoal); background: var(--white); }

.card + .card, .items + button, .items + .wide { margin-top: 20px; }
.stack, .actions { display: flex; flex-direction: column; gap: 20px; }
.actions { margin-top: 24px; }

.ts-box { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 50; }
.banner { background: var(--charcoal); color: var(--chalk); padding: 14px 16px; border-radius: var(--radius-ctl); margin-bottom: 20px; font-weight: 600; }
.warn { border: 2px solid var(--charcoal); border-left-width: 10px; background: var(--white); padding: 12px 14px; font-weight: 600; }
.warn::before { content: 'Check: '; }

/* Front page */
.card { background: var(--white); border: 2px solid var(--charcoal); border-radius: var(--radius-card); padding: 16px; }
.recorder { margin: 20px 0 28px; }
.talk { width: 100%; min-height: 80px; font: 700 34px/1 var(--heading); letter-spacing: 0.02em; text-transform: uppercase; flex-direction: column; gap: 4px; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none; }
.talk .talk-time { font: 600 20px/1 var(--body); text-transform: none; }
.talk.on { background: var(--charcoal); color: var(--chalk); }
.talk:active { background: var(--charcoal); color: var(--chalk); }
.recorder .hint { margin: 12px 0 0; text-align: left; font-size: 17px; }
.recorder .small { margin: 8px 0 0; font-weight: 600; }
.eg-head { margin-top: 8px; }
.example { display: flex; flex-direction: column; gap: 20px; }
.example .card { margin: 0; }
.tag { margin: 0 0 6px; font: 700 18px/1 var(--heading); text-transform: uppercase; letter-spacing: 0.06em; }
.voice { background: var(--chalk); border-style: dashed; }
.said { margin: 0; font-size: 20px; }
.eg-who { margin: 0 0 12px; }
.eg-lines { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; margin: 0 0 16px; }
.eg-lines dt, .eg-lines dd { margin: 0; }
.eg-lines dd { text-align: right; }
.eg-lines .grand { font: 700 30px/1.1 var(--heading); border-top: 3px solid var(--charcoal); padding-top: 8px; margin-top: 4px; }
.steps { list-style: none; counter-reset: step; padding: 0; margin: 28px 0 20px; display: flex; flex-direction: column; gap: 10px; }
.steps li { counter-increment: step; display: flex; align-items: center; gap: 14px; min-height: var(--tap); }
.steps li::before { content: counter(step); flex: none; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--charcoal); color: var(--yellow); font: 700 26px/1 var(--heading); border-radius: var(--radius-sm); }
.price-line { margin: 0; padding: 14px 16px; background: var(--yellow); border: 2px solid var(--charcoal); border-radius: var(--radius-card); font-size: 20px; text-align: center; }
.stripes { height: 28px; border: 2px solid var(--charcoal); background: repeating-linear-gradient(-45deg, var(--yellow) 0 16px, var(--charcoal) 16px 32px); background-size: 45px 100%; animation: slide 1s linear infinite; }
@keyframes slide { to { background-position: 45px 0; } }
@media (prefers-reduced-motion: reduce) { .stripes { animation: none; } }

/* Quote lines */
.items { display: flex; flex-direction: column; gap: 20px; }
.line { border: 2px solid var(--charcoal); border-radius: var(--radius-ctl); background: var(--white); padding: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.line .desc { grid-column: 1 / -1; }
.line label { margin: 0 0 4px; font-size: 16px; }
.line .rm { grid-column: 1 / -1; }
.line.missing { border-width: 4px; }
.line .sum { grid-column: 1 / -1; font-weight: 600; }
.totals { margin: 20px 0; display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; font-size: 20px; }
.totals dt, .totals dd { margin: 0; }
.totals .grand { font: 700 34px/1.1 var(--heading); border-top: 3px solid var(--charcoal); padding-top: 8px; }

.list { list-style: none; padding: 0; margin: 16px 0; display: flex; flex-direction: column; gap: 8px; }
.list button { width: 100%; justify-content: space-between; background: var(--white); text-align: left; gap: 12px; padding: 12px 16px; }
.list .who { font-weight: 600; display: block; }
.list .when { font-weight: 400; font-size: 16px; display: block; }
.list .amt { font-weight: 600; white-space: nowrap; }

.install-pic { display: block; margin: 8px 0 16px; }
.foot { margin-top: 32px; font-size: 16px; }
.doc h1 { font-size: 40px; }
.doc h2 { font-size: 26px; }
.doc ul { padding-left: 22px; }

/* Plan choice */
.plans { border: 0; padding: 0; margin: 20px 0 0; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.plan { display: flex; align-items: center; gap: 14px; min-height: 72px; margin: 0; padding: 12px 16px; background: var(--white); border: 2px solid var(--charcoal); border-radius: var(--radius-ctl); font-weight: 400; cursor: pointer; }
.plan input { width: 32px; height: 32px; accent-color: var(--charcoal); flex: none; }
.plan:has(input:checked) { background: var(--yellow); border-width: 4px; padding: 10px 14px; }
nav.foot a { display: inline-block; padding: 10px 2px; }

/* Setup progress and sample quote preview */
.setup { margin: 20px 0 0; }
.setup .tag { margin-bottom: 10px; }
.bar { height: 20px; border: 2px solid var(--charcoal); border-radius: var(--radius-pill); background: var(--white); overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--yellow); border-right: 2px solid var(--charcoal); }
.bar .w20 { width: 20%; } .bar .w40 { width: 40%; } .bar .w60 { width: 60%; } .bar .w80 { width: 80%; } .bar .w100 { width: 100%; }
.ticks { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 6px; }
.tick { display: flex; align-items: center; gap: 12px; min-height: 44px; text-align: left; }
.tick .mark { flex: none; width: 28px; height: 28px; border: 2px solid var(--charcoal); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; background: var(--white); font-weight: 700; }
.tick.done .mark { background: var(--yellow); }
.preview { margin: 0 0 20px; }

/* Looping demo (10s). Flat colours, CSS only. */
.demo { padding: 12px; border-radius: var(--radius-card); overflow: hidden; }
.demo-svg { display: block; width: 100%; height: auto; max-width: 420px; margin: 0 auto; }
.demo-svg .t-s { font: 400 13px var(--body); fill: var(--charcoal); }
.demo-svg .t-h { font: 700 20px var(--heading); fill: var(--charcoal); }
.demo-ctl { display: flex; gap: 8px; margin: 8px 0; }
.demo-ctl .ghost { flex: 1; }
.demo-svg .ring { fill: var(--yellow); transform-box: fill-box; transform-origin: center; }
.demo-svg .bar { fill: var(--charcoal); transform-box: fill-box; transform-origin: center; }
.demo-svg .d-mic, .demo-svg .d-wave, .demo-svg .d-say, .demo-svg .d-quote, .demo-svg .l1, .demo-svg .l2, .demo-svg .l3, .demo-svg .l4, .demo-svg .d-pdf { opacity: 0; }
.demo-svg .d-mic { animation: dMic 10s infinite; }
.demo-svg .ring { animation: dRing 10s infinite; }
.demo-svg .d-wave { animation: dWave 10s infinite; }
.demo-svg .bar { animation: dBar .5s ease-in-out infinite alternate; }
.demo-svg .b1 { animation-delay: -.1s; } .demo-svg .b2 { animation-delay: -.2s; } .demo-svg .b3 { animation-delay: -.3s; } .demo-svg .b4 { animation-delay: -.4s; }
.demo-svg .b5 { animation-delay: -.15s; } .demo-svg .b6 { animation-delay: -.25s; } .demo-svg .b7 { animation-delay: -.05s; } .demo-svg .b8 { animation-delay: -.35s; }
.demo-svg .b9 { animation-delay: -.12s; } .demo-svg .b10 { animation-delay: -.22s; } .demo-svg .b11 { animation-delay: -.32s; } .demo-svg .b12 { animation-delay: -.08s; } .demo-svg .b13 { animation-delay: -.18s; }
.demo-svg .d-say { animation: dSay 10s infinite; }
.demo-svg .d-quote { animation: dQuote 10s infinite; }
.demo-svg .l1 { animation: dL1 10s infinite; } .demo-svg .l2 { animation: dL2 10s infinite; }
.demo-svg .l3 { animation: dL3 10s infinite; } .demo-svg .l4 { animation: dL4 10s infinite; }
.demo-svg .d-pdf { animation: dPdf 10s infinite; }
.demo.paused .demo-svg *, .demo.paused .demo-svg { animation-play-state: paused; }
@keyframes dMic { 0%,3% { opacity: 0; } 6%,36% { opacity: 1; } 40%,100% { opacity: 0; } }
@keyframes dRing { 0%,8% { transform: scale(1); opacity: .9; } 16% { transform: scale(1.5); opacity: 0; } 17%,100% { transform: scale(1); opacity: 0; } }
@keyframes dWave { 0%,10% { opacity: 0; } 13%,34% { opacity: 1; } 38%,100% { opacity: 0; } }
@keyframes dBar { from { transform: scaleY(.25); } to { transform: scaleY(1.4); } }
@keyframes dSay { 0%,14% { opacity: 0; } 18%,38% { opacity: 1; } 42%,100% { opacity: 0; } }
@keyframes dQuote { 0%,38% { opacity: 0; } 42%,70% { opacity: 1; } 74%,100% { opacity: 0; } }
@keyframes dL1 { 0%,43% { opacity: 0; } 46%,70% { opacity: 1; } 74%,100% { opacity: 0; } }
@keyframes dL2 { 0%,49% { opacity: 0; } 52%,70% { opacity: 1; } 74%,100% { opacity: 0; } }
@keyframes dL3 { 0%,55% { opacity: 0; } 58%,70% { opacity: 1; } 74%,100% { opacity: 0; } }
@keyframes dL4 { 0%,61% { opacity: 0; } 64%,70% { opacity: 1; } 74%,100% { opacity: 0; } }
@keyframes dPdf { 0%,68% { opacity: 0; transform: translateX(260px); } 70% { opacity: 1; } 76%,94% { opacity: 1; transform: translateX(0); } 98%,100% { opacity: 0; transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) {
  .demo-svg *, .demo-svg { animation: none !important; }
  .demo-svg .d-say, .demo-svg .d-quote, .demo-svg .l1, .demo-svg .l2, .demo-svg .l3, .demo-svg .l4 { opacity: 1; }
  .demo-ctl { display: none; }
}

.howto .eg-head { margin: 0 0 8px; }
.howto-list { margin: 0; padding-left: 24px; display: flex; flex-direction: column; gap: 8px; }

/* Password strength guidance: 4 rounded steps plus a word, so colour is never the only signal */
.pw-meter { margin: 8px 0 12px; }
.pw-bar { display: flex; gap: 6px; }
.pw-bar span { flex: 1; height: 10px; border-radius: var(--radius-pill); background: #D9D6CA; }
.pw-text { margin: 6px 0 0; font-size: 0.95rem; }
.pw-meter[data-level="1"] .pw-bar span:nth-child(-n+1) { background: #B3261E; }
.pw-meter[data-level="2"] .pw-bar span:nth-child(-n+2) { background: #B35A00; }
.pw-meter[data-level="3"] .pw-bar span:nth-child(-n+3) { background: #7A6A00; }
.pw-meter[data-level="4"] .pw-bar span:nth-child(-n+4) { background: #1E7B3A; }
.pw-meter[data-level="1"] strong { color: #B3261E; }
.pw-meter[data-level="2"] strong { color: #B35A00; }
.pw-meter[data-level="3"] strong { color: #6B5C00; }
.pw-meter[data-level="4"] strong { color: #1E7B3A; }

/* Login screen */
.back-link, .link { background: none; border: 0; padding: 0 4px; min-height: var(--tap); min-width: 0; font: 600 16px/1.2 var(--body); color: var(--charcoal); text-decoration: underline; }
.back-link { display: inline-flex; margin: -8px 0 0 -4px; text-decoration: none; }
.back-link:active, .link:active { background: none; color: var(--charcoal); }
.tabs { display: flex; gap: 0; margin: 16px 0 20px; border: 2px solid var(--charcoal); border-radius: var(--radius-ctl); overflow: hidden; }
.tab { flex: 1; border: 0; border-radius: 0; background: var(--white); }
.tab[aria-selected="true"] { background: var(--charcoal); color: var(--chalk); }
.or { display: flex; align-items: center; gap: 12px; margin: 20px 0 0; font-weight: 600; }
.or::before, .or::after { content: ""; flex: 1; border-top: 2px solid var(--charcoal); opacity: 0.3; }
.pw-field { position: relative; }
.pw-field input { width: 100%; min-height: var(--tap); padding: 12px 84px 12px 14px; border: 2px solid var(--charcoal); border-radius: var(--radius-ctl); background: var(--white); color: var(--charcoal); font: 400 20px/1.3 var(--body); }
.pw-toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); min-height: 44px; padding: 0 12px; border: 0; background: none; font-size: 16px; text-decoration: underline; }
.pw-toggle:active { background: none; color: var(--charcoal); }
.links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin: 12px 0 0; }
.legal { margin-top: 20px; }