/*
Theme Name: Website That Sells
Theme URI: https://websitethatsells.com.au
Author: Website That Sells
Description: Custom conversion-focused theme. Layout modelled on launchtvchannels.com, branding modelled on webcasting.com.au. Includes SEO + GEO schema (inc/seo.php).
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary
Text Domain: websitethatsells
*/

/* ---------- Tokens ---------- */
:root{
  --ink:#101B2D;         /* Ink Navy */
  --slate:#1C2B44;       /* Deep Slate */
  --amber:#F5A623;       /* Signal Amber */
  --amber-dark:#D98E0B;
  --blue:#2E86F0;        /* Electric Blue */
  --cloud:#F5F7FA;
  --white:#fff;
  --text:#2A3547;
  --muted:#5D6B82;
  --radius:8px;
  --shadow:0 10px 30px rgba(16,27,45,.12);
  --font-head:'Poppins',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
}

/* ---------- Base ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{font-family:var(--font-body);font-size:17px;line-height:1.6;color:var(--text);background:var(--white)}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue);text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
h1,h2,h3,h4{font-family:var(--font-head);color:var(--ink);line-height:1.15;font-weight:700}
h1{font-size:clamp(2.1rem,5vw,3.4rem)}
h2{font-size:clamp(1.7rem,3.5vw,2.4rem)}
h3{font-size:1.25rem}
.container{max-width:1180px;margin:0 auto;padding:0 24px}
.section{padding:84px 0}
.section--tight{padding:56px 0}
.section--dark{background:var(--ink)}
.section--dark h2,.section--dark h3{color:var(--white)}
.section--dark p{color:#C7D0DE}
.section--cloud{background:var(--cloud)}
.eyebrow{display:inline-block;font-family:var(--font-head);font-weight:600;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--amber-dark);margin-bottom:14px}
.section--dark .eyebrow{color:var(--amber)}
.section__intro{max-width:640px;margin:14px 0 44px;color:var(--muted)}
.section--dark .section__intro{color:#C7D0DE}
.center{text-align:center}
.center .section__intro{margin-left:auto;margin-right:auto}

/* ---------- Buttons ---------- */
.btn{display:inline-block;font-family:var(--font-head);font-weight:600;font-size:1rem;padding:15px 30px;border-radius:var(--radius);border:2px solid transparent;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background .15s ease}
.btn--amber{background:var(--amber);color:var(--ink)}
.btn--amber:hover{background:var(--amber-dark);transform:translateY(-2px);box-shadow:var(--shadow)}
.btn--outline{border-color:var(--white);color:var(--white)}
.btn--outline:hover{background:rgba(255,255,255,.1)}
.btn--outline-blue{border-color:var(--blue);color:var(--blue)}
.btn--outline-blue:hover{background:var(--blue);color:var(--white)}

/* ---------- Announcement bar ---------- */
.announce{background:var(--amber);color:var(--ink);font-family:var(--font-head);font-weight:600;font-size:.9rem;text-align:center;padding:9px 16px}
.announce a{color:var(--ink);text-decoration:underline}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:var(--ink);box-shadow:0 2px 14px rgba(0,0,0,.25)}
.site-header__row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 0}
.logo{font-family:var(--font-head);font-weight:700;font-size:1.3rem;color:var(--white);line-height:1.1}
.logo span{color:var(--amber)}
.logo small{display:block;font-size:.62rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:#8FA0B8}
.main-nav ul{display:flex;gap:26px;list-style:none}
.main-nav a{color:#D5DEEA;font-weight:500;font-size:.95rem}
.main-nav a:hover,.main-nav .current-menu-item a{color:var(--amber)}
.header-cta{display:flex;align-items:center;gap:18px}
.header-phone{color:var(--white);font-family:var(--font-head);font-weight:600;white-space:nowrap}
.header-phone svg{vertical-align:-3px;margin-right:6px}
.nav-toggle{display:none;background:none;border:0;color:var(--white);font-size:1.7rem;line-height:1}

/* ---------- Hero ---------- */
.hero{background:linear-gradient(150deg,var(--ink) 55%,var(--slate));color:var(--white);padding:96px 0 72px;overflow:hidden}
.hero__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.hero h1{color:var(--white)}
.hero h1 .sell{position:relative;white-space:nowrap}
.hero h1 .sell::after{content:"";position:absolute;left:-2%;bottom:.04em;width:104%;height:.32em;background:var(--amber);z-index:-1;transform:skewX(-8deg)}
.hero__sub{margin:22px 0 32px;color:#C7D0DE;max-width:540px;font-size:1.1rem}
.hero__actions{display:flex;gap:16px;flex-wrap:wrap}
.hero__visual{background:var(--slate);border:1px solid #2A3D5E;border-radius:14px;padding:34px;box-shadow:var(--shadow)}
.hero__visual p{color:#C7D0DE;font-size:.95rem}
.hero__tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.hero__tags span{background:#101B2Dcc;border:1px solid #2A3D5E;border-radius:999px;padding:6px 14px;font-size:.8rem;color:#D5DEEA}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:64px;padding-top:40px;border-top:1px solid #2A3D5E}
.stat b{display:block;font-family:var(--font-head);font-weight:700;font-size:clamp(2rem,4vw,3.2rem);color:var(--amber)}
.stat span{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:#8FA0B8}

/* ---------- Logo bar ---------- */
.logobar{padding:34px 0;background:var(--cloud);border-bottom:1px solid #E4E9F1}
.logobar p{text-align:center;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.logobar__row{display:flex;justify-content:center;gap:44px;flex-wrap:wrap;align-items:center}
.logobar__row span{font-family:var(--font-head);font-weight:600;color:#9AA7BA;filter:grayscale(1);transition:color .15s}
.logobar__row span:hover{color:var(--slate)}

/* ---------- Card grids ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.card{background:var(--white);border:1px solid #E4E9F1;border-radius:12px;padding:30px;transition:transform .15s ease,box-shadow .15s ease}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.card__icon{width:48px;height:48px;border-radius:10px;background:var(--cloud);display:flex;align-items:center;justify-content:center;font-size:1.4rem;margin-bottom:16px}
.card h3{margin-bottom:8px}
.card p{color:var(--muted);font-size:.97rem}
.card ul{list-style:none;margin-top:14px}
.card ul li{padding-left:26px;position:relative;font-size:.93rem;color:var(--text);margin-bottom:6px}
.card ul li::before{content:"✓";position:absolute;left:0;color:var(--amber-dark);font-weight:700}
.card .learn{display:inline-block;margin-top:14px;font-weight:600;font-size:.93rem}

/* ---------- Problem section ---------- */
.problem{background:var(--slate)}
.problem .card{background:#16233A;border-color:#2A3D5E}
.problem .card h3{color:var(--white)}
.problem .card p{color:#C7D0DE}

/* ---------- Steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;counter-reset:step}
.step{position:relative;padding:28px 24px;background:var(--white);border:1px solid #E4E9F1;border-radius:12px}
.step__num{font-family:var(--font-head);font-weight:700;font-size:2.4rem;color:var(--amber);line-height:1}
.step h3{margin:12px 0 8px;font-size:1.1rem}
.step p{font-size:.93rem;color:var(--muted)}

/* ---------- Guarantee strip ---------- */
.guarantee{border:2px solid var(--amber);border-radius:var(--radius);background:#FFF9EE;display:flex;align-items:center;gap:16px;padding:18px 26px;font-family:var(--font-head);font-weight:600;color:var(--ink)}
.guarantee .shield{font-size:1.5rem}

/* ---------- Testimonials ---------- */
.quote{background:var(--white);border:1px solid #E4E9F1;border-radius:12px;padding:30px}
.quote .stars{color:var(--amber);letter-spacing:2px;margin-bottom:12px}
.quote p{font-size:.98rem}
.quote footer{margin-top:16px;font-family:var(--font-head);font-weight:600;color:var(--ink);font-size:.9rem}
.quote footer em{display:block;font-style:normal;font-weight:400;color:var(--muted);font-size:.83rem}

/* ---------- FAQ accordion ---------- */
.faq-item{border:1px solid #E4E9F1;border-radius:10px;background:var(--white);margin-bottom:12px}
.faq-item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 24px;font-family:var(--font-head);font-weight:600;color:var(--ink)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-size:1.5rem;color:var(--amber-dark);flex-shrink:0}
.faq-item[open] summary::after{content:"–"}
.faq-item .faq-a{padding:0 24px 22px;color:var(--muted)}
.faq-group{font-family:var(--font-head);font-weight:600;font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;color:var(--amber-dark);margin:34px 0 14px}

/* ---------- Pricing ---------- */
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-items:stretch}
.price-card{background:var(--white);border:1px solid #E4E9F1;border-radius:14px;padding:34px 30px;display:flex;flex-direction:column;position:relative}
.price-card--hot{border:2px solid var(--amber);box-shadow:var(--shadow)}
.price-card__flag{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--amber);color:var(--ink);font-family:var(--font-head);font-weight:600;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;padding:5px 14px;border-radius:999px;white-space:nowrap}
.price-card h3{font-size:1.3rem}
.price-card .price{font-family:var(--font-head);font-weight:700;font-size:2.3rem;color:var(--ink);margin:14px 0 2px}
.price-card .price small{font-size:.9rem;font-weight:500;color:var(--muted)}
.price-card .term{font-size:.85rem;color:var(--muted);margin-bottom:18px}
.price-card ul{list-style:none;margin:0 0 26px}
.price-card ul li{padding:7px 0 7px 26px;position:relative;font-size:.95rem;border-bottom:1px dashed #E4E9F1}
.price-card ul li::before{content:"✓";position:absolute;left:0;color:var(--amber-dark);font-weight:700}
.price-card .btn{margin-top:auto;text-align:center}

/* ---------- CTA banner ---------- */
.cta-banner{background:linear-gradient(120deg,var(--ink),var(--slate));border-radius:16px;padding:60px 40px;text-align:center;color:var(--white)}
.cta-banner h2{color:var(--white);margin-bottom:14px}
.cta-banner p{color:#C7D0DE;max-width:560px;margin:0 auto 28px}
.cta-banner .hero__actions{justify-content:center}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:start}
.form-field{margin-bottom:18px}
.form-field label{display:block;font-family:var(--font-head);font-weight:600;font-size:.88rem;margin-bottom:6px;color:var(--ink)}
.form-field input,.form-field textarea,.form-field select{width:100%;padding:13px 15px;border:1px solid #CBD4E1;border-radius:var(--radius);font-family:var(--font-body);font-size:1rem;background:var(--white)}
.contact-aside{background:var(--cloud);border:1px solid #E4E9F1;border-radius:14px;padding:32px}
.contact-aside h3{margin-bottom:16px}
.contact-aside ul{list-style:none}
.contact-aside li{margin-bottom:14px}
.contact-aside li b{font-family:var(--font-head);display:block;font-size:.85rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.08em}
.form-notice{padding:14px 18px;border-radius:var(--radius);margin-bottom:22px;font-weight:600}
.form-notice--ok{background:#EAF7EE;color:#1E6B34;border:1px solid #BFE5CB}

/* ---------- Page hero (inner pages) ---------- */
.page-hero{background:linear-gradient(150deg,var(--ink) 60%,var(--slate));color:var(--white);padding:72px 0 56px}
.page-hero h1{color:var(--white)}
.page-hero p{color:#C7D0DE;max-width:620px;margin-top:14px;font-size:1.05rem}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink);color:#C7D0DE;padding:64px 0 30px;margin-top:0}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:36px;padding-bottom:40px;border-bottom:1px solid #2A3D5E}
.site-footer h4{color:var(--white);font-size:1rem;margin-bottom:16px}
.site-footer ul{list-style:none}
.site-footer li{margin-bottom:9px}
.site-footer a{color:#C7D0DE;font-size:.94rem}
.site-footer a:hover{color:var(--amber)}
.footer-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:24px;font-size:.85rem;color:#8FA0B8}
.badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.badges span{border:1px solid #2A3D5E;border-radius:6px;padding:5px 10px;font-size:.75rem;color:#8FA0B8}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .hero__grid,.contact-grid,.grid-2{grid-template-columns:1fr}
  .grid-3,.pricing,.steps{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .main-nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--ink);padding:10px 24px 24px;box-shadow:0 14px 24px rgba(0,0,0,.3)}
  .main-nav.open{display:block}
  .main-nav ul{flex-direction:column;gap:4px}
  .main-nav a{display:block;padding:12px 0;font-size:1.05rem}
  .nav-toggle{display:block}
  .header-phone .label{display:none}
}
@media (max-width:620px){
  .grid-3,.pricing,.steps,.footer-grid{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr;gap:28px}
  .section{padding:60px 0}
  .header-cta .btn{padding:11px 16px;font-size:.85rem}
}