@charset "utf-8";
/* ------------------------------------------------------------------
   PC Medic - style.css
   Palette pulled from assets/img/logo.png (g7.png)
   Kelly green .......... #00CE7C   (logo green, matches PC Matic accent)
   Kelly green hover .... #00B86E
   Kelly green active ... #009C5D
   Ink .................. #14181B
   Body text ............ #4C565C
   Muted ................ #7A858B
   Light surface ........ #F6F8F7
   Hero surface ......... #F0FFF9
   Hairline ............. #E2E7E4
   Deep panel ........... #0E1A16
   ------------------------------------------------------------------ */

/* ==================================================================
   1. COMMON HTML ELEMENTS
   ================================================================== */

HTML
{
scroll-behavior: smooth;
}

BODY
{
font-family: 'Lato', 'Helvetica Neue', Arial, sans-serif;
font-size: 17px;
line-height: 1.65;
color: #4C565C;
background-color: #FFFFFF;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}

H1, H2, H3, H4, H5, H6
{
font-family: 'Lato', 'Helvetica Neue', Arial, sans-serif;
font-weight: 900;
line-height: 1.15;
color: #14181B;
letter-spacing: -0.015em;
}

H1
{
font-size: 46px;
}

H2
{
font-size: 36px;
}

H3
{
font-size: 26px;
}

H4
{
font-size: 20px;
}

P
{
margin-bottom: 1rem;
}

A
{
color: #009C5D;
}

A:hover, A:focus
{
color: #00B86E;
}

STRONG, B
{
font-weight: 900;
}

SECTION
{
position: relative;
padding: 76px 0;
}

IMG
{
max-width: 100%;
height: auto;
}

/* ==================================================================
   2. BOOTSTRAP OVERRIDES
   ================================================================== */

.container
{
max-width: 1200px;
}

.lead
{
font-size: 19px;
font-weight: 400;
line-height: 1.6;
}

/* --- CTA button: default / hover / focus / active, PC Matic style --- */
.btn
{
font-family: 'Lato', 'Helvetica Neue', Arial, sans-serif;
font-weight: 900;
border-radius: 3px;
letter-spacing: 0.02em;
-webkit-transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, -webkit-transform 150ms ease;
transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.btn:focus,
.btn.focus
{
outline: 0;
}

.btn-cta
{
display: inline-block;
padding: 17px 34px;
font-size: 21px;
line-height: 1.2;
color: #FFFFFF;
background-color: #00CE7C;
border: 1px solid #00CE7C;
box-shadow: 0 2px 0 0 #009C5D, 0 6px 14px 0 rgba(0, 156, 93, 0.28);
white-space: nowrap;
}

.btn-cta:hover
{
color: #FFFFFF;
background-color: #00B86E;
border-color: #00B86E;
box-shadow: 0 2px 0 0 #00854F, 0 9px 20px 0 rgba(0, 156, 93, 0.36);
-webkit-transform: translateY(-1px);
transform: translateY(-1px);
}

.btn-cta:focus,
.btn-cta.focus
{
color: #FFFFFF;
background-color: #00B86E;
border-color: #00B86E;
box-shadow: 0 0 0 3px rgba(0, 206, 124, 0.35);
outline: 0;
}

.btn-cta:not(:disabled):not(.disabled):active,
.btn-cta:not(:disabled):not(.disabled).active
{
color: #FFFFFF;
background-color: #009C5D;
border-color: #009C5D;
box-shadow: inset 0 3px 6px 0 rgba(0, 0, 0, 0.24);
-webkit-transform: translateY(1px);
transform: translateY(1px);
}

.btn-cta.btn-block
{
display: block;
width: 100%;
}

.btn-cta.btn-lg
{
padding: 20px 46px;
font-size: 24px;
}

.btn-outline-ink
{
padding: 12px 24px;
font-size: 16px;
color: #14181B;
background-color: transparent;
border: 2px solid #D8DEDA;
}

.btn-outline-ink:hover,
.btn-outline-ink:focus
{
color: #009C5D;
border-color: #00CE7C;
background-color: #F6F8F7;
}

.form-control
{
height: calc(1.65em + 30px);
padding: 14px 16px;
font-family: 'Lato', 'Helvetica Neue', Arial, sans-serif;
font-size: 17px;
color: #14181B;
background-color: #FFFFFF;
border: 2px solid #E2E7E4;
border-radius: 3px;
-webkit-transition: border-color 150ms ease, box-shadow 150ms ease;
transition: border-color 150ms ease, box-shadow 150ms ease;
}

.form-control::-webkit-input-placeholder
{
color: #A6AFB4;
}

.form-control::-moz-placeholder
{
color: #A6AFB4;
}

.form-control:-ms-input-placeholder
{
color: #A6AFB4;
}

.form-control:focus
{
border-color: #00CE7C;
box-shadow: 0 0 0 3px rgba(0, 206, 124, 0.22);
}

.form-control.is-invalid
{
border-color: #D9453C;
box-shadow: 0 0 0 3px rgba(217, 69, 60, 0.16);
}

.badge-soft
{
display: inline-block;
padding: 7px 14px;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #009C5D;
background-color: rgba(0, 206, 124, 0.12);
border: 1px solid rgba(0, 206, 124, 0.32);
border-radius: 100px;
}

.eyebrow
{
display: block;
margin-bottom: 12px;
font-size: 14px;
font-weight: 900;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #00B86E;
}

.text-muted-soft
{
color: #7A858B;
}

.text-green
{
color: #00CE7C;
}

/* ==================================================================
   3. HEADER / NAV
   ================================================================== */

#siteHeader
{
position: relative;
z-index: 1030;
padding: 8px 0;
background-color: #FFFFFF;
border-bottom: 1px solid #E2E7E4;
}

#siteHeader .navbar-brand
{
padding: 0;
margin-right: 0;
}

#siteHeader .brand-logo
{
width: 186px;
height: auto;
display: block;
}

#siteHeader .nav-link
{
padding: 8px 16px;
font-size: 16px;
font-weight: 700;
color: #14181B;
}

#siteHeader .nav-link:hover,
#siteHeader .nav-link:focus
{
color: #00B86E;
}

#siteHeader .nav-phone
{
font-weight: 900;
color: #14181B;
text-decoration: none;
}

#siteHeader .nav-phone A
{
color: inherit;
text-decoration: none;
}

#siteHeader .navbar-toggler
{
padding: 6px 10px;
border: 1px solid #E2E7E4;
border-radius: 3px;
}

/* ==================================================================
   4. PAGE: HOME
   ================================================================== */

/* --- 4.1 HERO --- */

#pg-home #hero
{
padding: 22px 0 40px;
background-color: #F0FFF9;
}

/* Headline band: spans the full width above the two columns */
#pg-home #hero .hero-intro
{
margin-bottom: 14px;
text-align: center;
}

#pg-home #hero H1
{
margin-bottom: 6px;
font-size: 30px;
}

#pg-home #hero H1 .hl
{
color: #00B86E;
}

/* Sub-lead restyled as a heading, still reads as a lead paragraph */
#pg-home #hero H2.hero-lead
{
max-width: none;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
font-size: 16px;
font-weight: 400;
line-height: 1.5;
letter-spacing: 0;
color: #4C565C;
}

#pg-home #hero .hero-points
{
margin-bottom: 0;
}

/* Centres the bullet block under the artwork while the lines stay
   left-aligned, so the checkmarks form a clean vertical edge. */
#pg-home #hero .hero-points-wrap
{
max-width: 430px;
margin: 22px auto 0;
text-align: left;
}

#pg-home #hero .hero-points LI
{
position: relative;
padding-left: 32px;
margin-bottom: 11px;
font-size: 15px;
line-height: 1.3;
color: #3A4348;
}

#pg-home #hero .hero-points LI:before
{
position: absolute;
top: 3px;
left: 0;
width: 20px;
height: 20px;
content: "";
background-color: #00CE7C;
border-radius: 50%;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l5 5L19 7'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center center;
background-size: 12px 12px;
}

/* Hero diagnostic artwork */

#pg-home #hero .scan-stage
{
position: relative;
max-width: 430px;
padding: 0;
margin: 0 auto;
}

#pg-home #hero .scan-stage .heroScan
{
display: block;
width: 100%;
height: auto;
}

#pg-home #hero .scan-stage .chip
{
opacity: 0;
-webkit-animation: chipIn 600ms ease forwards;
animation: chipIn 600ms ease forwards;
}

#pg-home #hero .scan-stage .chip-1
{
-webkit-animation-delay: 400ms;
animation-delay: 400ms;
}

#pg-home #hero .scan-stage .chip-2
{
-webkit-animation-delay: 700ms;
animation-delay: 700ms;
}

#pg-home #hero .scan-stage .chip-3
{
-webkit-animation-delay: 1000ms;
animation-delay: 1000ms;
}

#pg-home #hero .scan-stage .chip-4
{
-webkit-animation-delay: 1300ms;
animation-delay: 1300ms;
}

@-webkit-keyframes chipIn
{
	from { opacity: 0; -webkit-transform: translateY(10px); }
	to   { opacity: 1; -webkit-transform: translateY(0); }
}

@keyframes chipIn
{
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}

#pg-home #hero .ecg-trace
{
stroke-dasharray: 1400;
stroke-dashoffset: 1400;
-webkit-animation: ecgDraw 3.6s ease-out infinite;
animation: ecgDraw 3.6s ease-out infinite;
}

@-webkit-keyframes ecgDraw
{
	0%   { stroke-dashoffset: 1400; opacity: 0.25; }
	12%  { opacity: 1; }
	70%  { stroke-dashoffset: 0; opacity: 1; }
	100% { stroke-dashoffset: 0; opacity: 0.25; }
}

@keyframes ecgDraw
{
	0%   { stroke-dashoffset: 1400; opacity: 0.25; }
	12%  { opacity: 1; }
	70%  { stroke-dashoffset: 0; opacity: 1; }
	100% { stroke-dashoffset: 0; opacity: 0.25; }
}

#pg-home #hero .ecg-beacon
{
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-animation: beaconPulse 1.6s ease-in-out infinite;
animation: beaconPulse 1.6s ease-in-out infinite;
}

@-webkit-keyframes beaconPulse
{
	0%, 100% { opacity: 0.35; -webkit-transform: scale(0.86); }
	50%      { opacity: 1;    -webkit-transform: scale(1.14); }
}

@keyframes beaconPulse
{
	0%, 100% { opacity: 0.35; transform: scale(0.86); }
	50%      { opacity: 1;    transform: scale(1.14); }
}

/* Squeeze form card */

#pg-home #hero .squeeze-card
{
padding: 22px 26px 18px;
background-color: #FFFFFF;
border: 1px solid #E2E7E4;
border-top: 5px solid #00CE7C;
border-radius: 6px;
box-shadow: 0 18px 44px 0 rgba(20, 24, 27, 0.12);
}

#pg-home #hero .squeeze-card .squeeze-title
{
margin-bottom: 3px;
font-size: 24px;
}

#pg-home #hero .squeeze-card .squeeze-sub
{
margin-bottom: 11px;
font-size: 15px;
color: #7A858B;
}

#pg-home #hero .squeeze-card LABEL
{
display: block;
margin-top: 5px;
margin-bottom: 0;
font-size: 12.5px;
font-weight: 900;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #14181B;
}

#pg-home #hero .squeeze-card .form-group
{
margin-bottom: 8px;
}

/* Compact controls, card only: keeps the CTA above the laptop fold */
#pg-home #hero .squeeze-card .form-control
{
height: 50px;
padding: 0 14px;
font-size: 16px;
}

#pg-home #hero .squeeze-card .field-error
{
display: none;
margin-top: 5px;
font-size: 14px;
font-weight: 700;
color: #D9453C;
}

#pg-home #hero .squeeze-card .btn-cta
{
margin-top: 4px;
padding: 15px 30px;
font-size: 20px;
}

#pg-home #hero .squeeze-card .form-note
{
margin: 8px 0 0;
font-size: 13px;
line-height: 1.5;
color: #7A858B;
text-align: center;
}

/* --- 4.2 SAFETY / REASSURANCE --- */

#pg-home #safety
{
padding: 62px 0;
background-color: #0E1A16;
}

#pg-home #safety H2
{
color: #FFFFFF;
}

#pg-home #safety .safety-lead
{
max-width: 660px;
margin: 0 auto 44px;
font-size: 18px;
color: rgba(255, 255, 255, 0.72);
}

#pg-home #safety .safety-item
{
height: 100%;
padding: 26px 24px;
background-color: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(0, 206, 124, 0.24);
border-radius: 6px;
}

#pg-home #safety .safety-item H3
{
margin: 16px 0 8px;
font-size: 19px;
color: #FFFFFF;
}

#pg-home #safety .safety-item P
{
margin-bottom: 0;
font-size: 15.5px;
color: rgba(255, 255, 255, 0.68);
}

#pg-home #safety .safety-icon
{
display: block;
width: 42px;
height: 42px;
stroke: #00CE7C;
stroke-width: 2;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}

#pg-home #safety .safety-note
{
max-width: 820px;
margin: 40px auto 0;
padding: 20px 26px;
font-size: 16px;
color: #FFFFFF;
text-align: center;
background-color: rgba(0, 206, 124, 0.12);
border-left: 4px solid #00CE7C;
border-radius: 4px;
}

/* --- 4.3 SCAN ITEMS --- */

#pg-home #scans
{
background-color: #F6F8F7;
}

/* The gap rides on the column so the equal-height cards stay aligned */
#pg-home #scans .row > DIV
{
padding-bottom: 10px;
}

#pg-home #scans .scan-card
{
height: 100%;
padding: 24px 22px;
background-color: #FFFFFF;
border: 1px solid #E2E7E4;
border-radius: 6px;
-webkit-transition: border-color 180ms ease, box-shadow 180ms ease, -webkit-transform 180ms ease;
transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

#pg-home #scans .scan-card:hover
{
border-color: rgba(0, 206, 124, 0.55);
box-shadow: 0 12px 26px 0 rgba(20, 24, 27, 0.09);
-webkit-transform: translateY(-3px);
transform: translateY(-3px);
}

#pg-home #scans .scan-card .scan-icon
{
display: block;
width: 34px;
height: 34px;
margin-bottom: 14px;
stroke: #00CE7C;
stroke-width: 2;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}

#pg-home #scans .scan-card H3
{
margin-bottom: 7px;
font-size: 18px;
}

#pg-home #scans .scan-card P
{
margin-bottom: 0;
font-size: 15px;
color: #6B757B;
}

/* --- 4.4 HOW IT WORKS --- */

#pg-home #how .step
{
position: relative;
height: 100%;
padding: 0 6px;
}

#pg-home #how .step-no
{
display: block;
width: 46px;
height: 46px;
margin: 0 auto 18px;
font-size: 21px;
font-weight: 900;
line-height: 42px;
color: #FFFFFF;
text-align: center;
background-color: #00CE7C;
border-radius: 50%;
box-shadow: 0 6px 14px 0 rgba(0, 156, 93, 0.3);
}

#pg-home #how .step H3
{
margin-bottom: 8px;
font-size: 19px;
}

#pg-home #how .step P
{
font-size: 15.5px;
color: #6B757B;
}

#pg-home #how .step-arrow
{
display: block;
padding-top: 16px;
font-size: 26px;
font-weight: 900;
color: #D8DEDA;
text-align: center;
}

/* --- 4.5 FINAL CTA --- */

#pg-home #finalCta
{
padding: 70px 0;
background-color: #FFFFFF;
border-top: 1px solid #E2E7E4;
}

#pg-home #finalCta H2
{
margin-bottom: 14px;
font-size: 34px;
}

#pg-home #finalCta P
{
max-width: 620px;
margin: 0 auto 26px;
font-size: 18px;
color: #6B757B;
}

/* ==================================================================
   5. PAGE: DOWNLOAD
   ================================================================== */

#pg-download
{
background-color: #F6F8F7;
}

#pg-download #dlHero
{
padding: 52px 0 40px;
background-color: #FFFFFF;
border-bottom: 1px solid #E2E7E4;
}

#pg-download #dlHero .dl-stage
{
position: relative;
}

#pg-download #dlHero H1
{
font-size: 40px;
}

#pg-download #dlHero .dl-ready
{
display: inline-block;
margin-bottom: 16px;
}

#pg-download #dlCard
{
position: relative;
padding: 34px 32px 30px;
background-color: #FFFFFF;
border: 1px solid #E2E7E4;
border-radius: 6px;
box-shadow: 0 16px 40px 0 rgba(20, 24, 27, 0.1);
}

#pg-download #dlCard .file-meta
{
margin-bottom: 18px;
font-size: 14px;
color: #7A858B;
}

#pg-download #dlCard .dl-art
{
margin-bottom: 14px;
}

#pg-download #dlCard .dl-art SVG
{
width: 78px;
height: 78px;
}

#pg-download #dlCard .dl-card-title
{
margin-bottom: 4px;
font-size: 24px;
}

#pg-download .bounce-arrow
{
position: absolute;
top: -36px;
right: -8px;
width: 108px;
height: 108px;
pointer-events: none;
z-index: 10000;
-webkit-transform: rotate(160deg);
transform: rotate(160deg);
-webkit-animation: bounceArrow 1.5s ease-in-out infinite;
animation: bounceArrow 1.5s ease-in-out infinite;
}

/* Offsets are tuned, not literal: the arrow is rotated 160deg so it points
   up and to the right at the browser's own download area. Larger offsets
   pushed it off the top of the viewport and, at wide z-index, over the
   header, so it sits just above the card instead.
   The base rule rotates the arrow; the keyframes must include that same
   rotation or the animation would flatten it back on the first frame. */
@-webkit-keyframes bounceArrow
{
	0%, 100% { -webkit-transform: rotate(160deg) translate(0, 0); }
	50%      { -webkit-transform: rotate(160deg) translate(6px, 10px); }
}

@keyframes bounceArrow
{
	0%, 100% { transform: rotate(160deg) translate(0, 0); }
	50%      { transform: rotate(160deg) translate(6px, 10px); }
}

#pg-download #steps
{
padding: 60px 0;
}

#pg-download #steps .step
{
height: 100%;
padding: 26px 24px;
background-color: #FFFFFF;
border: 1px solid #E2E7E4;
border-radius: 6px;
}

#pg-download #steps .step-no
{
display: block;
width: 40px;
height: 40px;
margin-bottom: 14px;
font-size: 18px;
font-weight: 900;
line-height: 36px;
color: #FFFFFF;
text-align: center;
background-color: #00CE7C;
border-radius: 50%;
}

#pg-download #steps H3
{
font-size: 18px;
margin-bottom: 7px;
}

#pg-download #steps P
{
margin-bottom: 0;
font-size: 15.5px;
color: #6B757B;
}

#pg-download #activate
{
padding: 0 0 64px;
}

#pg-download #activate .activate-title
{
margin-bottom: 10px;
font-size: 24px;
}

#pg-download #activate .activate-box
{
padding: 32px 30px;
background-color: #FFFFFF;
border: 1px solid #E2E7E4;
border-left: 5px solid #00CE7C;
border-radius: 6px;
}

#pg-download #activate .activate-steps
{
margin: 26px 0 0;
padding: 0;
}

#pg-download #activate .activate-steps LI
{
position: relative;
display: block;
padding-left: 62px;
margin-bottom: 24px;
}

#pg-download #activate .activate-steps LI:last-child
{
margin-bottom: 0;
}

#pg-download #activate .activate-steps .step-no
{
position: absolute;
top: 0;
left: 0;
width: 40px;
height: 40px;
font-size: 18px;
font-weight: 900;
line-height: 38px;
color: #FFFFFF;
text-align: center;
background-color: #00CE7C;
border-radius: 50%;
}

#pg-download #activate .activate-steps H3
{
margin-bottom: 4px;
font-size: 18px;
}

#pg-download #activate .activate-steps P
{
margin-bottom: 0;
font-size: 15.5px;
color: #6B757B;
}

/* ==================================================================
   6. FOOTER
   ================================================================== */

#siteFooter
{
padding: 62px 0 0;
color: rgba(255, 255, 255, 0.66);
background-color: #0E1A16;
}

#siteFooter .footer-logo
{
width: 186px;
height: auto;
margin-bottom: 16px;
}

#siteFooter .footer-brand P
{
max-width: 300px;
font-size: 15px;
color: rgba(255, 255, 255, 0.58);
}

#siteFooter .footer-col H3
{
margin-bottom: 18px;
font-size: 14px;
font-weight: 900;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #FFFFFF;
}

#siteFooter UL
{
margin-bottom: 0;
}

#siteFooter UL LI
{
margin-bottom: 10px;
}

#siteFooter UL LI A
{
font-size: 15px;
color: rgba(255, 255, 255, 0.66);
text-decoration: none;
}

#siteFooter UL LI A:hover,
#siteFooter UL LI A:focus
{
color: #00CE7C;
text-decoration: none;
}

#siteFooter .footer-contact LI
{
font-size: 15px;
line-height: 1.55;
color: rgba(255, 255, 255, 0.66);
overflow-wrap: break-word;
word-wrap: break-word;
}

#siteFooter .footer-contact A
{
color: rgba(255, 255, 255, 0.66);
text-decoration: none;
}

#siteFooter .footer-contact A:hover
{
color: #00CE7C;
}

#siteFooter .footer-bottom
{
margin-top: 46px;
padding: 22px 0;
font-size: 14px;
color: rgba(255, 255, 255, 0.5);
border-top: 1px solid rgba(255, 255, 255, 0.12);
}

#siteFooter .footer-bottom P
{
margin-bottom: 6px;
}

/* ==================================================================
   7. UTILITY
   ================================================================== */

.section-head
{
max-width: 720px;
margin: 0 auto 46px;
text-align: center;
}

.section-head P
{
margin-bottom: 0;
font-size: 18px;
color: #6B757B;
}

.sr-only-focusable:active,
.sr-only-focusable:focus
{
position: static;
width: auto;
height: auto;
overflow: visible;
clip: auto;
white-space: normal;
}