:root{
  --navy:#0a2a59; --navy-2:#133d7a; --orange:#f45a14; --blue:#2f67ed;
  --ink:#15243f; --muted:#60708a; --line:#dde5ef; --soft:#f6f8fc; --white:#fff;
  --container:1480px; --shadow:0 18px 46px rgba(20,40,75,.12); --radius:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; color:var(--ink); background:#fff; font-family:Inter,Arial,sans-serif; line-height:1.6}
img{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3,.brand strong{font-family:"Avenir Next","Segoe UI",Arial,sans-serif}
.container{width:min(calc(100% - 36px),var(--container)); margin:auto}
.section{padding:84px 0}
.section-soft{padding:84px 0; background:var(--soft)}
.skip-link{position:fixed; left:12px; top:12px; z-index:100; background:#111; color:#fff; padding:10px 12px; transform:translateY(-160%)}
.skip-link:focus{transform:none}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0)}

.site-header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.96); backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
.nav-wrap{min-height:88px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:28px}
.brand{display:flex; align-items:center; text-decoration:none}
.brand-logo{display:block; width:auto; height:58px; max-width:100%}
.site-nav{display:flex; justify-content:center; gap:24px}
.site-nav a{text-decoration:none; font-weight:760; font-size:.92rem}
.header-phone{font-weight:850; text-decoration:none}
.menu-button{display:none; width:44px; height:44px; border:1px solid var(--line); border-radius:12px; background:#fff}
.menu-button span:not(.sr-only){display:block; height:2px; margin:5px 10px; background:var(--navy)}

.hero{padding:54px 0 38px; background:#fff}
.hero-grid{display:grid; grid-template-columns:1fr 1.15fr; gap:48px; align-items:center}
.eyebrow{display:inline-block; color:var(--orange); font-size:.78rem; font-weight:850; letter-spacing:.09em; text-transform:uppercase}
.hero h1{max-width:670px; margin:14px 0 16px; font-size:clamp(3.1rem,4.4vw,4.6rem); line-height:1.03; letter-spacing:-.055em}
.hero-copy>p{max-width:620px; color:#32415d; font-size:1.08rem}
.hero-points{display:grid; gap:10px; margin:22px 0}
.hero-points span{position:relative; padding-left:28px; font-weight:650}
.hero-points span::before{content:"✓"; position:absolute; left:0; top:0; color:var(--orange); font-weight:900}
.hero-actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:26px}
.button{display:inline-flex; align-items:center; justify-content:center; min-height:56px; padding:0 24px; border-radius:12px; text-decoration:none; font-weight:850}
.button-orange{background:var(--orange); color:#fff}
.button-navy{background:var(--navy); color:#fff}
.hero-image img{width:100%; height:auto; border-radius:0; opacity:1; filter:none}

.section-heading.centered{max-width:860px; margin:0 auto 36px; text-align:center}
.section-heading h2{margin:10px 0 10px; font-size:clamp(2.15rem,4vw,3.65rem); line-height:1.05; letter-spacing:-.05em}
.section-heading p{margin:0; color:var(--muted)}

.templates{padding-top:70px}
.carousel-shell{display:grid; grid-template-columns:auto 1fr auto; gap:16px; align-items:center}
.carousel-arrow{width:52px; height:52px; border:1px solid var(--line); border-radius:999px; background:#fff; color:var(--navy); font-size:2rem; line-height:1; cursor:pointer; box-shadow:0 8px 24px rgba(15,30,60,.06)}
.carousel-viewport{overflow:hidden; max-width:1320px; margin:0 auto}
.carousel-track{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
.template-card{border:1px solid #d7e0ec; border-radius:22px; background:#fff; overflow:hidden; box-shadow:0 12px 32px rgba(20,40,75,.08)}
.image-only-card{padding:0}
.image-only-card{padding:0}
.template-card__button{display:block; width:100%; padding:0; border:0; background:#fff; cursor:zoom-in}
.template-card img{display:block; width:100%; height:100%; min-height:430px; object-fit:cover; object-position:top center; background:#fff}
.carousel-hint{text-align:center; color:var(--muted); margin-top:16px; font-size:.92rem}

.service-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.service-grid article{padding:24px; border:1px solid var(--line); border-radius:16px; background:#fff}
.service-grid article>span{display:grid; place-items:center; width:48px; height:48px; border-radius:14px; background:#ebf1ff; color:var(--navy); font-size:1.35rem}
.service-grid h3{margin:16px 0 8px; font-size:1.2rem}
.service-grid p{margin:0; color:var(--muted); font-size:.93rem}
.maps-note{margin-top:18px; padding:16px 18px; border-radius:14px; background:#fff3ea; color:#5a3927; border:1px solid #ffd6c6}
.maps-note strong{color:#7f330c}

.pricing-heading{margin-bottom:44px}
.three-plans{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.plan-card{position:relative; display:flex; flex-direction:column; padding:28px; border:2px solid var(--line); border-radius:22px; background:#fff; box-shadow:0 14px 34px rgba(20,40,75,.08)}
.starter-card{border-color:var(--navy)}
.plan-card.featured{border:2px solid var(--blue); box-shadow:0 20px 50px rgba(47,103,237,.16)}
.premium-card{border-color:#ffb58e}
.plan-number{display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:999px; background:#edf2ff; color:var(--navy); font-weight:850; font-size:1.05rem}
.plan-type{display:block; margin-top:14px; color:var(--orange); text-transform:uppercase; font-size:.82rem; font-weight:800; letter-spacing:.08em}
.plan-card h3{margin:10px 0 8px; font-size:1.6rem}
.plan-intro{min-height:78px; margin:0; color:var(--muted)}
.price-block{margin:26px 0 10px}
.price{font-size:3.2rem; font-weight:900; line-height:1.02; letter-spacing:-.05em; color:var(--ink)}
.price-note{margin-top:6px; color:var(--muted); font-size:.98rem; font-weight:700}
.monthly,.premium-monthly{display:inline-flex; align-items:center; width:max-content; margin:4px 0 14px; padding:10px 14px; border-radius:12px; background:#ebf1ff; color:#13449d; font-weight:850}
.commitment-note{margin:0 0 18px; color:var(--muted); font-size:.88rem}
.plan-card ul{display:grid; gap:12px; margin:0 0 20px; padding:0; list-style:none}
.plan-card li{position:relative; padding-left:24px; color:#55657e; font-size:.92rem}
.plan-card li::before{content:"✓"; position:absolute; left:0; top:0; color:var(--blue); font-weight:900}
.care-breakdown{display:grid; gap:8px; margin:0 0 22px}
.care-breakdown strong{margin-bottom:2px}
.care-breakdown span{position:relative; padding-left:22px; color:#55657e; font-size:.9rem}
.care-breakdown span::before{content:"✓"; position:absolute; left:0; color:var(--blue); font-weight:900}
.badge{position:absolute; top:-13px; right:22px; padding:6px 12px; border-radius:999px; background:var(--blue); color:#fff; font-size:.72rem; font-weight:850}
.badge.orange{background:var(--orange)}
.plan-button{display:flex; align-items:center; justify-content:center; min-height:54px; border-radius:12px; text-decoration:none; font-weight:850; margin-top:auto}
.starter-button{background:var(--navy); color:#fff}
.plan-button.primary{background:var(--blue); color:#fff}
.premium-button{background:var(--orange); color:#fff}
.pricing-note{text-align:center; margin-top:20px; color:var(--muted)}

.premium-grid{display:grid; grid-template-columns:1fr .9fr; gap:60px; align-items:center}
.premium-grid h2{margin:10px 0 16px; font-size:clamp(2.4rem,4vw,3.8rem); line-height:1.04; letter-spacing:-.05em}
.premium-grid p,.premium-grid li{color:var(--muted)}
.chat-widget{padding:22px; border:1px solid var(--line); border-radius:22px; background:#fff; box-shadow:var(--shadow)}
.chat-head{display:flex; justify-content:space-between; align-items:center; padding-bottom:14px; border-bottom:1px solid var(--line)}
.chat-head span{color:#16875b; font-size:.8rem}
.message{max-width:86%; margin-top:14px; padding:12px 14px; border-radius:14px}
.message.bot{background:#f2f5fb}
.message.user{background:#eaf1ff; margin-left:auto}
.chat-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:18px}
.chat-actions button{min-height:44px; padding:0 16px; border:0; border-radius:12px; background:var(--navy); color:#fff; font-weight:700; cursor:pointer}

.contact{background:var(--soft)}
.contact-grid{display:grid; grid-template-columns:.82fr 1.18fr; gap:56px}
.contact h2{margin:10px 0 16px; font-size:clamp(2.35rem,4vw,3.8rem); line-height:1.05}
.contact p{color:var(--muted)}
.contact-phone,.contact-email{display:block; margin-top:12px; text-decoration:none; font-weight:850}
.contact-phone{font-size:1.65rem; color:var(--navy)}
.contact-email{color:var(--orange)}
form{padding:28px; border:1px solid var(--line); border-radius:18px; background:#fff}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
label{display:block; margin-bottom:14px; font-weight:700}
input,select,textarea{width:100%; margin-top:8px; padding:14px 16px; border:1px solid #cfd9e6; border-radius:12px; font:inherit; color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 4px rgba(47,103,237,.14)}
textarea{resize:vertical}
.button-full{width:100%; border:0; cursor:pointer}
.honeypot{position:absolute; left:-9999px}

footer{padding:40px 0; background:#0b1732; color:#fff}
.footer-grid{display:grid; grid-template-columns:1.4fr .7fr 1fr 1fr; gap:32px}
.footer-grid > div{display:grid; align-content:start; gap:8px}
.footer-grid a,.footer-grid span{color:rgba(255,255,255,.72); text-decoration:none}
.mobile-bar{display:none}

@media (max-width:1080px){
  .hero-grid,.premium-grid,.contact-grid{grid-template-columns:1fr}
  .carousel-track{grid-template-columns:repeat(2,1fr)}
  .service-grid{grid-template-columns:repeat(2,1fr)}
  .three-plans{grid-template-columns:1fr}
}

@media (max-width:980px){
  .nav-wrap{grid-template-columns:auto auto}
  .site-nav{position:fixed; inset:76px 0 auto; display:none; padding:22px; background:#fff; border-bottom:1px solid var(--line)}
  .site-nav.open{display:grid; gap:12px; justify-items:start}
  .menu-button{display:block; justify-self:end}
  .header-phone{display:none}
  .footer-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:700px){
  body{padding-bottom:58px}
  .section,.section-soft{padding:64px 0}
  .hero h1{font-size:2.8rem}
  .hero-actions{display:grid}
  .carousel-shell{grid-template-columns:42px 1fr 42px; gap:10px}
  .carousel-arrow{width:42px; height:42px; font-size:1.55rem}
  .carousel-track{grid-template-columns:1fr}
  .service-grid,.form-grid,.footer-grid{grid-template-columns:1fr}
  .template-card img{height:210px}
  .mobile-bar{position:fixed; left:0; right:0; bottom:0; z-index:70; display:grid; grid-template-columns:1fr 1fr 1.3fr; background:#fff; box-shadow:0 -8px 24px rgba(15,30,60,.15)}
  .mobile-bar a{display:grid; place-items:center; min-height:58px; text-decoration:none; font-weight:800; color:var(--navy)}
  .mobile-bar a:last-child{background:var(--orange); color:#fff}
}


.hero-wide{align-items:center}
.hero-copy{padding-right:4px}
.hero-image{display:flex; justify-content:flex-end}
.hero-image img{max-width:780px; width:100%; height:auto}

footer .brand-logo,
.footer-logo{height:50px}

@media (max-width:980px){
  .brand-logo{height:52px}
  .nav-wrap{min-height:82px}
}

@media (max-width:700px){
  .brand-logo{height:44px}
  .nav-wrap{min-height:74px}
  .hero h1{max-width:100%; font-size:2.8rem}
  .hero-copy>p{font-size:1rem}
}


@media (max-width:700px){
  .template-card img{aspect-ratio:14 / 10;}
}


.template-modal{position:fixed; inset:0; z-index:120; display:none}
.template-modal[aria-hidden="false"]{display:block}
.template-modal__backdrop{position:absolute; inset:0; background:rgba(10,20,40,.72)}
.template-modal__panel{position:relative; z-index:1; width:min(92vw, 1500px); max-height:88vh; margin:4vh auto; padding:18px; border-radius:20px; background:#fff; box-shadow:0 24px 80px rgba(0,0,0,.28); overflow:auto}
.template-modal__close{position:sticky; top:0; margin-left:auto; display:grid; place-items:center; width:42px; height:42px; border:1px solid var(--line); border-radius:999px; background:#fff; color:var(--navy); font-size:1.8rem; line-height:1; cursor:pointer}
.template-modal__panel img{display:block; width:100%; height:auto; object-fit:contain; border-radius:14px}

@media (max-width: 1180px){
  .carousel-track{gap:12px}
}

@media (max-width:700px){
  .template-modal__panel{width:min(96vw, 1500px); padding:12px}
}

/* Carousel image cards: full-bleed, edge-to-edge website previews */
.carousel-track {
  align-items: stretch;
}

.template-card {
  min-height: 430px;
  border-radius: 24px;
  overflow: hidden;
  background: #ffffff;
}

.template-card__button {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 430px;
  padding: 0;
  border: 0;
  background: #ffffff;
  cursor: zoom-in;
}

.template-card img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 430px;
  object-fit: cover;
  object-position: top center;
  border-radius: inherit;
  opacity: 1;
  filter: none;
}

/* Contact form AJAX states */
#contactSubmitButton:disabled {
  cursor: wait;
  opacity: .72;
}

.form-status {
  min-height: 24px;
  margin-top: 14px;
  font-size: .92rem;
  font-weight: 700;
}

.form-status:empty {
  display: none;
}

.form-status.sending {
  color: var(--navy);
}

.form-status.error {
  padding: 12px 14px;
  border: 1px solid #efb1a6;
  border-radius: 10px;
  background: #fff2ef;
  color: #8a2418;
}

.form-success-panel {
  display: grid;
  justify-items: start;
  align-content: center;
  min-height: 480px;
  padding: 38px;
  border: 1px solid #b9dfca;
  border-radius: 18px;
  background: #f3fbf6;
}

.form-success-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin-bottom: 20px;
  border-radius: 999px;
  background: #18784a;
  color: #fff;
  font-size: 1.8rem;
  font-weight: 900;
}

.form-success-panel h3 {
  max-width: 620px;
  margin: 8px 0 12px;
  font-size: clamp(1.8rem, 3vw, 2.7rem);
  line-height: 1.08;
}

.form-success-panel p {
  max-width: 620px;
  margin: 0;
  color: var(--muted);
}

.form-success-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.form-success-actions a,
.form-success-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 17px;
  border-radius: 10px;
  font: inherit;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

.form-success-actions a {
  border: 1px solid var(--navy);
  background: var(--navy);
  color: #fff;
}

.form-success-actions button {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--navy);
}

@media (max-width: 980px) {
  .template-card,
  .template-card__button,
  .template-card img {
    min-height: 390px;
  }
}

@media (max-width: 700px) {
  .template-card,
  .template-card__button,
  .template-card img {
    min-height: 340px;
  }

  .form-success-panel {
    min-height: 400px;
    padding: 26px 20px;
  }

  .form-success-actions {
    display: grid;
    width: 100%;
  }
}



.field-help {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: .8rem;
  font-weight: 600;
}

#contactPhone:invalid:not(:placeholder-shown) {
  border-color: #b73726;
  box-shadow: 0 0 0 3px rgba(183, 55, 38, .1);
}


.form-consent {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.55;
}

.form-consent a,
.footer-legal-links a,
.legal-page a {
  color: var(--blue);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  font-size: .9rem;
}

.legal-page {
  min-height: 70vh;
  padding: 70px 0 90px;
  background: #f7f9fc;
}

.legal-container {
  width: min(920px, calc(100% - 32px));
  margin: 0 auto;
  padding: clamp(28px, 5vw, 58px);
  border: 1px solid var(--line);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(20, 40, 75, .08);
}

.legal-back-link {
  display: inline-flex;
  margin-bottom: 26px;
  font-weight: 800;
  text-decoration: none;
}

.legal-page h1 {
  max-width: 760px;
  margin: 8px 0 10px;
  font-size: clamp(2.4rem, 6vw, 4.3rem);
  line-height: 1;
}

.legal-updated {
  margin: 0 0 36px;
  color: var(--muted);
  font-weight: 700;
}

.legal-page section + section {
  margin-top: 34px;
  padding-top: 30px;
  border-top: 1px solid var(--line);
}

.legal-page h2 {
  margin: 0 0 12px;
  color: var(--navy);
  font-size: clamp(1.25rem, 3vw, 1.65rem);
}

.legal-page p {
  margin: 0 0 14px;
  color: #40516b;
  line-height: 1.75;
}

.legal-nav {
  display: flex;
}

.legal-footer .footer-inner {
  align-items: center;
}

@media (max-width: 760px) {
  .legal-nav {
    display: none;
  }

  .legal-page {
    padding: 34px 0 54px;
  }

  .legal-container {
    width: min(100% - 20px, 920px);
    padding: 25px 20px;
    border-radius: 18px;
  }

  .footer-legal-links {
    justify-content: center;
  }
}


/* Legal-page header display correction */
.legal-page + footer {
  position: relative;
}

body:has(.legal-page) .site-header .nav-wrap {
  min-height: 88px;
}

body:has(.legal-page) .brand-logo {
  width: auto;
  height: 58px;
  max-width: 260px;
  object-fit: contain;
}

body:has(.legal-page) .legal-container {
  position: relative;
  z-index: 1;
}

@media (max-width: 760px) {
  body:has(.legal-page) .site-header .nav-wrap {
    grid-template-columns: 1fr auto;
  }

  body:has(.legal-page) .header-phone {
    font-size: .9rem;
  }

  body:has(.legal-page) .brand-logo {
    height: 48px;
    max-width: 210px;
  }
}


.honeypot-field {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* Publishing partners book carousel */
.publishing-partners {
  background:
    radial-gradient(circle at 15% 15%, rgba(244, 122, 32, .06), transparent 32%),
    #fbfaf8;
}

.publishing-heading {
  max-width: 760px;
  margin-right: auto;
  margin-left: auto;
}

.publishing-heading h2 {
  font-size: clamp(2rem, 4.2vw, 3.35rem);
}

.advertisement-label {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin: 0 auto 8px;
  padding: 5px 10px;
  border: 1px solid rgba(244, 122, 32, .28);
  border-radius: 999px;
  background: rgba(244, 122, 32, .08);
}

.books-carousel-shell {
  position: relative;
  width: min(100%, 1120px);
  margin: 28px auto 0;
  padding: 0 54px;
}

.books-carousel-viewport {
  overflow: hidden;
}

.books-carousel-track {
  display: grid;
  gap: 18px;
  align-items: stretch;
}

.book-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(20, 40, 75, .08);
}

.compact-book-card {
  height: 360px;
}

.book-cover-link {
  display: block;
  width: 100%;
  height: 100%;
  background: #f4f6f9;
}

.book-cover-link img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: #f4f6f9;
  transition: transform .2s ease;
}

.book-cover-link:hover img,
.book-cover-link:focus-visible img {
  transform: scale(1.025);
}

.books-arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--navy);
  box-shadow: 0 10px 26px rgba(20, 40, 75, .12);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  transform: translateY(-50%);
}

.books-prev { left: 0; }
.books-next { right: 0; }

.books-arrow:hover,
.books-arrow:focus-visible {
  border-color: var(--orange);
  color: var(--orange);
}

.books-carousel-hint,
.publishing-disclosure {
  margin: 16px auto 0;
  color: var(--muted);
  text-align: center;
}

.publishing-disclosure {
  margin-top: 7px;
  font-size: .82rem;
}

@media (max-width: 1080px) {
  .books-carousel-shell {
    width: min(100%, 860px);
    padding: 0 50px;
  }

  .compact-book-card {
    height: 340px;
  }
}

@media (max-width: 720px) {
  .books-carousel-shell {
    width: min(100%, 420px);
    padding: 0 8px;
  }

  .books-arrow {
    top: auto;
    bottom: -60px;
  }

  .books-prev { left: calc(50% - 56px); }
  .books-next { right: calc(50% - 56px); }

  .books-carousel-hint {
    margin-top: 76px;
  }

  .compact-book-card {
    height: 390px;
  }
}