/* =====================================================
   PawHerd — extra styles for the separate pages
   (loaded after style.css)
   ===================================================== */

/* Logo: "Vet clinic software" under PawHerd */
.brand-text{display:flex;flex-direction:column;line-height:1}
.brand-text small{display:block;margin-top:4px;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.f-logo{text-decoration:none}
.f-logo .brand-text small{color:#A9BBAE}
.logo-disc .tagline{font-size:12.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}

/* Menu: show which page you are on */
.links a[aria-current="page"]{color:var(--green);position:relative}
.links a[aria-current="page"]::after{content:"";position:absolute;left:16px;right:16px;bottom:2px;height:2px;background:var(--green)}

/* Page header on inner pages (kept short) */
.phero{background:var(--forest);padding:clamp(28px,3.5vw,44px) var(--gutter)}
.phero .crumb{font-weight:600;font-size:14px;color:#8FA697;margin-bottom:8px}
.phero .crumb a{color:#8FA697;text-decoration:none}
.phero .crumb a:hover{color:#fff}
.phero h1{color:#fff;font-size:clamp(30px,3.4vw,44px)}
.phero p{max-width:640px;margin:8px 0 0;font-size:clamp(17px,1.3vw,19px);color:#B8C8BD}
.phero + .sec{padding-top:clamp(36px,4vw,56px)}

/* "See all features →" style links */
.more{display:inline-flex;align-items:center;gap:8px;margin-top:32px;color:var(--green);font-weight:600;text-decoration:none}
.more:hover{color:var(--green-dk);text-decoration:underline}

/* Home: short version of the 3 steps */
.steps-mini{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.steps-mini div{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px}
.steps-mini .num{width:44px;height:44px;border-radius:10px;display:grid;place-items:center;flex:none;font-weight:700;background:var(--green);color:#fff}
.steps-mini div:nth-child(2) .num{background:var(--brown)}
.steps-mini b{color:var(--forest);font-size:17px;line-height:1.3}

/* How it works: "what you need" list */
.needs{display:flex;flex-direction:column;gap:16px;max-width:860px}
.needs div{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 20px;color:var(--muted)}
.needs b{color:var(--forest)}

.note a{color:var(--green)}

@media (max-width:960px){.steps-mini{grid-template-columns:1fr}}
@media (max-width:860px){.links a[aria-current="page"]::after{display:none}}