/* Homepage additions for the review prototype.
   Availability text: #availability-note in index.html
   Highlight, proof line and client notes live only on the homepage. */

/* Same faces as the live site. On a Mac, local SF Pro is used, which is what
   -apple-system resolves to there. Elsewhere the self-hosted Inter files are
   used. -apple-system itself is not listed: on some non-Apple browsers it
   resolves to a generic sans and the headline never reaches Inter Display. */
@font-face{
  font-family:"serva-text";
  src:local("SF Pro Text"),url("/assets/fonts/inter-var.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"serva-display";
  src:local("SF Pro Display"),local("SF Pro Text"),url("/assets/fonts/interdisplay-600.woff2?v=bbf06c46f4") format("woff2");
  font-weight:600;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"serva-display";
  src:local("SF Pro Display"),local("SF Pro Text"),url("/assets/fonts/interdisplay-700.woff2?v=f513fa3025") format("woff2");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
:root{
  --font:"serva-text","Helvetica Neue",Arial,sans-serif;
  --font-display:"serva-display","serva-text","Helvetica Neue",Arial,sans-serif;
}

/* ----- Availability (one sentence, no motion) ----- */
.availability{
  display:flex;
  align-items:center;
  gap:8px;
  width:fit-content;
  max-width:100%;
  margin:0 0 18px;
  padding:7px 14px 7px 12px;
  border-radius:999px;
  background:var(--green-tint);
  color:var(--link-dark);
  font-size:.9375rem;
  font-weight:600;
  letter-spacing:-.011em;
  line-height:1.35;
}
.availability::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--green);
  flex:none;
}

/* ----- Watercolour highlight behind "for businesses." -----
   The ink sits in its own layer above the wash, so the letters stay the
   headline colour. The paint-in is a transform. Reduced motion shows the
   finished wash with no animation. */
.hero-mark{
  position:relative;
  display:inline-block;
  color:var(--ink);
  opacity:1;
}
.hero-mark::before{
  content:"";
  position:absolute;
  z-index:0;
  left:-.12em;
  right:-.06em;
  top:.42em;
  bottom:.02em;
  background:linear-gradient(180deg,#f6d98a 0%,#e4b84a 46%,#d7a23a 78%,#7eae6a 100%);
  -webkit-mask:url("/assets/img/wash.svg?v=3") center / 100% 100% no-repeat;
  mask:url("/assets/img/wash.svg?v=3") center / 100% 100% no-repeat;
  -webkit-mask-mode:alpha;
  mask-mode:alpha;
  transform-origin:left center;
  transform:scaleX(1);
  pointer-events:none;
}
.hero-mark-text{
  position:relative;
  z-index:1;
  color:var(--ink);
}
@media (prefers-reduced-motion:no-preference){
  .hero-mark::before{animation:wash-in .6s var(--ease-out) .08s both}
}
@keyframes wash-in{
  from{transform:scaleX(0)}
  to{transform:scaleX(1)}
}
@media (prefers-reduced-motion:reduce){
  .hero-mark::before{animation:none!important;transform:scaleX(1)!important}
}

/* ----- Proof line under the hero button ----- */
.proof-line{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:0;
  margin:14px 0 0;
  color:var(--body);
  font-size:.9375rem;
  line-height:1.45;
}
@media (min-width:960px){
  .hero-copy{container-type:inline-size}
}
.proof-line span{white-space:nowrap}
/* Dot sits after each fact, so a wrap never starts the next line with a bullet. */
.proof-line span:not(:last-child)::after{
  content:"·";
  color:var(--green);
  font-weight:700;
  padding-left:.45em;
  padding-right:.45em;
}
@media (min-width:960px){
  .hero .btn-row{justify-content:flex-start}
  .proof-line{justify-content:flex-start;font-size:.8125rem}
}
@container (min-width:520px){
  .proof-line{flex-wrap:nowrap;width:max-content;max-width:100%;font-size:.75rem}
}
@media (max-width:959px){
  .proof-line{
    flex-direction:column;
    align-items:center;
    gap:2px;
    text-align:center;
  }
  .proof-line span:not(:last-child)::after{content:none;padding:0}
}

/* Mobile hero uses display:contents, so these need an explicit order.
   Picture stays between the headline and the paragraph. */
@media (max-width:959px){
  .hero-copy > .availability{order:1;align-self:center}
  .hero-copy > .proof-line{order:6}
}

/* ----- Client notes ----- */
.voices .section-head{margin-bottom:clamp(28px,4vw,48px)}
.voice-board{
  list-style:none;
  margin:0;
  padding:8px 0 0;
  display:grid;
  gap:18px;
  grid-template-columns:minmax(0,1fr);
}
.voice-card{
  --tilt:0deg;
  margin:0;
  position:relative;
  padding:22px 22px 16px;
  background:
    radial-gradient(110px 80px at 0% 100%, rgba(126,174,106,.38), transparent 70%),
    radial-gradient(140px 90px at 100% 0%, rgba(227,184,74,.40), transparent 72%),
    radial-gradient(80px 64px at 100% 100%, rgba(196,106,69,.14), transparent 70%),
    #fffdf8;
  border:1px solid rgba(90,62,28,.14);
  border-radius:22px 26px 18px 28px;
  box-shadow:0 1px 2px rgba(17,20,24,.04), 0 18px 40px -28px rgba(80,52,20,.45);
  transform:rotate(var(--tilt));
}
.voice-note{--tilt:-1.6deg;border-radius:4px 18px 8px 14px}
.voice-message{--tilt:1.4deg;border-radius:26px 30px 22px 34px}
.voice-card blockquote{margin:0}
.voice-card blockquote p{
  margin:0;
  color:var(--ink);
  font-size:1.0625rem;
  line-height:1.5;
}
.voice-card figcaption{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:16px;
  color:var(--body);
  font-size:.9375rem;
  font-weight:600;
  line-height:1.35;
}
.voice-seal{
  width:36px;
  height:36px;
  border-radius:50%;
  display:grid;
  place-items:center;
  flex:none;
  font-family:var(--font-display);
  font-weight:600;
  color:var(--ink);
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.8), transparent 46%),
    radial-gradient(circle at 70% 78%, rgba(196,106,69,.35), transparent 55%),
    #d7e6c6;
}
.voice-message .voice-seal{
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.85), transparent 46%),
    radial-gradient(circle at 72% 80%, rgba(196,106,69,.28), transparent 55%),
    #f0d78c;
}
.voice-more{margin-top:4px}

/* Contact form: example text and the line by the button */
.form input::placeholder,.form textarea::placeholder{color:var(--muted);font-style:normal;opacity:1}
.form-reassure{margin:0 0 16px;color:var(--ink);font-size:.9375rem;font-weight:600;line-height:1.45}
.voice-board > li{display:flex}
.voice-card{display:flex;flex-direction:column;flex:1}
.voice-card figcaption{margin-top:auto;padding-top:16px}
.voice-board > :nth-child(3) .voice-card{--tilt:-.7deg}

@media (min-width:960px){
  .voice-board{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:28px 24px;
    align-items:stretch;
  }
}
@media (max-width:699px){
  .voice-note{--tilt:-.5deg}
  .voice-message{--tilt:.4deg}
  .voice-board > :nth-child(3) .voice-card{--tilt:-.3deg}
  .voice-card{padding:18px 16px 12px}
}

@media (prefers-reduced-motion:no-preference){
  .voice-card{animation:voice-in .5s var(--ease-out) both}
  .voice-board > :nth-child(2) .voice-card{animation-delay:.06s}
  .voice-board > :nth-child(3) .voice-card{animation-delay:.12s}
}
@keyframes voice-in{
  from{opacity:0;transform:translateY(12px) rotate(var(--tilt))}
  to{opacity:1;transform:rotate(var(--tilt))}
}
@media (prefers-reduced-motion:reduce){
  .voice-card{animation:none}
}

/* Website care plan */
.care-page .page-head h1{max-width:22ch}
.care-page .prose{padding-top:clamp(8px,2vw,24px)}
.care-page .checks{margin:0 0 8px;max-width:none}
.care-cta{padding-top:0}
.care-cta .btn{margin-top:8px}