/* Barkboard inner pages v2 - same Kennel Board language as the home page. Loaded after main.css + inner.css. Max radius 8px. */

/* ---------- page hero ---------- */
.ph{position:relative;padding:60px 0 88px;background:#fff;overflow:hidden}
.ph::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--tint) 1px,transparent 1px),linear-gradient(90deg,var(--tint) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:linear-gradient(180deg,#000,transparent 88%);mask-image:linear-gradient(180deg,#000,transparent 88%)}
.ph-in{position:relative;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:56px;align-items:center}
.ph.one .ph-in{grid-template-columns:minmax(0,1fr);text-align:center;justify-items:center}
.ph h1{font-size:clamp(36px,5vw,68px);line-height:1.07;font-weight:800;color:var(--ink);letter-spacing:-.02em;margin:22px 0 20px}
.ph h1 .hl{display:inline-block;background:var(--blue);color:#fff;border-radius:8px;padding:0 .16em .06em;margin-top:.08em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.ph .lead{font-size:clamp(18px,1.8vw,21px);line-height:1.65;color:var(--mut);max-width:580px}
.ph.one .lead{margin-inline:auto}
.ph .hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.ph.one .hero-cta{justify-content:center}
.ph .kick{margin-bottom:0}

/* browser-style frame for real product screenshots */
.shot{position:relative;border:1px solid var(--line);border-radius:8px;background:#fff;box-shadow:0 40px 90px -30px rgba(51,90,153,.42);padding:8px 8px 8px}
.shot-bar{display:flex;align-items:center;gap:6px;padding:6px 6px 10px}
.shot-bar i{display:block;width:9px;height:9px;border-radius:2px;background:var(--line)}
.shot-bar i:first-child{background:var(--sky)}
.shot-bar span{margin-inline-start:auto;font-size:12.5px;font-weight:700;color:var(--mut);direction:ltr}
.shot img{display:block;width:100%;height:auto;border-radius:4px;border:1px solid var(--line)}
.shot .fl{position:absolute;bottom:-18px;inset-inline-start:-14px;background:#fff;color:var(--deep);font-weight:800;border-radius:8px;padding:11px 15px;font-size:15px;display:flex;gap:10px;align-items:center;box-shadow:0 18px 40px -12px rgba(51,90,153,.45);border:1px solid var(--line)}
.shot .fl i{display:block;width:9px;height:9px;border-radius:2px;background:var(--ok)}
.shot .fl2{position:absolute;top:34px;inset-inline-end:-14px;background:var(--blue);color:#fff;font-weight:800;border-radius:8px;padding:10px 14px;font-size:14.5px;box-shadow:0 18px 40px -12px rgba(51,90,153,.6)}

/* facts strip */
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);border-radius:8px;background:#fff;overflow:hidden}
.facts>div{padding:26px 24px;border-inline-start:1px solid var(--line);display:flex;flex-direction:column;gap:4px}
.facts>div:first-child{border-inline-start:0}
.facts b{font-size:clamp(26px,3vw,38px);line-height:1.05;font-weight:800;color:var(--deep)}
.facts span{font-size:15.5px;font-weight:600;color:var(--mut)}
.facts-wrap{margin-top:-44px;position:relative;z-index:3}

/* editorial split: sticky heading + content */
.sp{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:72px;align-items:start}
.sp-h{position:sticky;top:110px}
.sp-h .h2{margin-top:18px}
.prose p{font-size:19px;line-height:1.85;color:var(--mut);margin-bottom:20px}
.prose p:last-child{margin-bottom:0}
.prose a{color:var(--blue);font-weight:700;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px;transition:text-decoration-color .2s,color .2s}
.prose a:hover{color:var(--deep);text-decoration-color:var(--blue)}
.prose strong{color:var(--ink);font-weight:800}
.prose .lead-p{font-size:clamp(21px,2.2vw,26px);line-height:1.55;font-weight:700;color:var(--ink)}
.prose .lead-p a{color:var(--blue)}

/* mission quote panel */
.qt{position:relative;margin:34px 0;padding:36px 38px;background:var(--deep);border-radius:8px;color:#fff;overflow:hidden}
.qt::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 2px,transparent 2px 28px)}
.qt::after{content:"";position:absolute;inset-inline-start:-30px;bottom:-40px;width:200px;height:240px;background:url(../images/bb/mark-light.png) no-repeat center/contain;opacity:.1}
.qt>*{position:relative}
.qt small{display:block;font-weight:800;font-size:14px;letter-spacing:.04em;color:var(--sky);margin-bottom:10px}
.qt p{font-size:clamp(21px,2.3vw,28px);line-height:1.5;font-weight:700;color:#fff;margin:0}

/* feature grid with icon */
.fg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:56px;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff}
.fc{position:relative;padding:32px 26px 34px;border-inline-start:1px solid var(--line);border-top:1px solid var(--line);margin-top:-1px;overflow:hidden;transition:color .4s}
.fc:nth-child(4n+1){border-inline-start:0}
.fc::before{content:"";position:absolute;inset:0;background:var(--blue);transform:translateY(101%);transition:transform .5s cubic-bezier(.7,0,.2,1)}
.fc:hover::before{transform:none}
.fc>*{position:relative}
.fc .ic{width:50px;height:50px;border-radius:8px;background:var(--tint);color:var(--blue);display:flex;align-items:center;justify-content:center;margin-bottom:20px;transition:all .3s}
.fc .ic svg{width:24px;height:24px;stroke:currentColor}
.fc .no{position:absolute;top:26px;inset-inline-end:24px;font-weight:800;font-size:14px;color:var(--sky);direction:ltr}
.fc h3{font-size:21px;line-height:1.25;font-weight:800;color:var(--ink);margin-bottom:10px;transition:color .4s}
.fc p{font-size:16.5px;line-height:1.7;color:var(--mut);transition:color .4s}
.fc:hover .ic{background:#fff;color:var(--deep)}
.fc:hover h3{color:#fff}.fc:hover p{color:#E4EDFB}.fc:hover .no{color:#C9DAF5}
.fg.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.fg.c3 .fc:nth-child(4n+1){border-inline-start:1px solid var(--line)}
.fg.c3 .fc:nth-child(3n+1){border-inline-start:0}
.fg.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.fg.c2 .fc:nth-child(4n+1){border-inline-start:1px solid var(--line)}
.fg.c2 .fc:nth-child(2n+1){border-inline-start:0}

/* check list rows */
.rows{display:grid;gap:12px;margin-top:44px}
.row2{display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;align-items:start;background:#fff;border:1px solid var(--line);border-radius:8px;padding:26px 28px;transition:border-color .25s,transform .25s,box-shadow .25s}
.row2:hover{border-color:var(--blue);transform:translateY(-3px);box-shadow:0 26px 50px -26px rgba(51,90,153,.45)}
.row2 .ck{width:46px;height:46px;border-radius:8px;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center}
.row2 .ck svg{stroke:#fff}
.row2 p{font-size:18px;line-height:1.75;color:var(--mut);margin:0}
.row2 strong{display:block;font-size:21px;font-weight:800;color:var(--ink);margin-bottom:4px}

/* CTA band */
.cta2{position:relative;background:var(--deep);color:#fff;overflow:hidden}
.cta2::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 2px,transparent 2px 34px)}
.cta2::after{content:"";position:absolute;inset-inline-start:2%;bottom:-60px;width:300px;height:360px;background:url(../images/bb/mark-light.png) no-repeat center/contain;opacity:.09}
.cta2-in{position:relative;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:48px;align-items:center;padding-block:84px}
.cta2 h2{font-size:clamp(32px,4vw,54px);line-height:1.08;font-weight:800;letter-spacing:-.015em;color:#fff;margin-bottom:14px}
.cta2 p{font-size:19px;color:#DCE7F8;max-width:600px}
.cta2 .acts{display:flex;flex-direction:column;gap:12px}
.cta2 .acts .btn{width:100%}
.cta2 .acts .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.cta2 .acts .btn.ghost::before{background:rgba(255,255,255,.18)}
.cta2 .acts .btn.ghost:hover{color:#fff}

/* old cta/callout bands: unify look */
.callout-glass-box,.closing-glow-card,.cta-support-box{border-radius:8px}

/* contact page layout */
.ct{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:36px;align-items:start}
.ct-info{display:grid;gap:12px}
.ct .info-box{margin:0}
.ct .contact-form-card{margin:0;max-width:none}
.ct-note{background:var(--tint);border:1px solid var(--line);border-inline-start:6px solid var(--blue);border-radius:8px;padding:20px 22px;font-weight:600;color:var(--ink);font-size:17px}

/* support */
.sup-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:680px;margin-top:34px}
.ph.one .sup-cards{margin-inline:auto}
.sup-cards .support-card{padding:26px 22px}

/* ---------- pricing ---------- */
.plans.p-page{margin-top:48px}
.pln .pn-h{display:flex;align-items:baseline;gap:8px;margin:10px 0 6px;flex-wrap:wrap}
.pln .pn-pr{font-size:42px;line-height:1;font-weight:800;color:var(--deep)}
.pln .pn-pr small{font-size:15px;font-weight:700;color:var(--mut)}
.pln .pn-note{font-size:15px;font-weight:700;color:var(--mut);margin-bottom:14px}
.pln.hot .pn-pr,.pln.hot .pn-pr small,.pln.hot .pn-note{color:#fff}
.pln .pn-ask{font-size:22px;font-weight:800;color:var(--deep);margin:10px 0 6px;line-height:1.25}
.pln.hot .pn-ask{color:#fff}
.price-sec-note{margin-top:22px;text-align:center;font-size:16.5px;color:var(--mut)}

/* ---------- module pages ---------- */
.mod-hero-img{border-radius:8px;overflow:hidden}
.hero-image-wrapper{box-shadow:0 40px 90px -30px rgba(51,90,153,.42);border-radius:8px}

/* ---------- article / legal reading ---------- */
.article-container{max-width:860px}
.legal-content{background:#fff;border:1px solid var(--line);border-radius:8px;padding:clamp(24px,4vw,56px)}

/* ---------- tablet ---------- */
@media (max-width:1100px){
  .fg{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fg .fc:nth-child(n){border-inline-start:1px solid var(--line)}
  .fg .fc:nth-child(2n+1){border-inline-start:0}
  .fg.c3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .facts>div:nth-child(3){border-inline-start:0}
  .facts>div:nth-child(n+3){border-top:1px solid var(--line)}
  .sp{gap:44px}
}
@media (max-width:900px){
  .ph{padding:40px 0 64px}
  .ph-in{grid-template-columns:minmax(0,1fr);gap:44px}
  .ph .lead{max-width:none}
  .sp{grid-template-columns:minmax(0,1fr);gap:26px}
  .sp-h{position:static}
  .ct{grid-template-columns:minmax(0,1fr)}
  .cta2-in{grid-template-columns:minmax(0,1fr);gap:28px;padding-block:64px}
  .shot .fl{inset-inline-start:8px;bottom:-16px}
  .shot .fl2{inset-inline-end:8px}
  .plans.p-page{grid-template-columns:repeat(2,minmax(0,1fr))}
  .features-8-grid,.support-features-grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .split-section{grid-template-columns:minmax(0,1fr);gap:28px;margin:48px 0}
  .split-section.reverse{direction:rtl}
  .grid-feature-box{grid-template-columns:minmax(0,1fr);gap:30px}
  .contact-cards-wrapper{grid-template-columns:minmax(0,1fr)}
  .sec{padding:80px 0}
  .content-section{padding:70px 0}
}
@media (max-width:640px){
  .container,.wrap{padding-inline:20px}
  .ph{padding:30px 0 56px}
  .ph h1{font-size:clamp(34px,10vw,44px)}
  .ph .hero-cta .btn{width:100%}
  .facts{grid-template-columns:minmax(0,1fr)}
  .facts>div{border-inline-start:0;border-top:1px solid var(--line)}
  .facts>div:first-child{border-top:0}
  .facts-wrap{margin-top:-30px}
  .fg,.fg.c3,.fg.c2{grid-template-columns:minmax(0,1fr)}
  .fg .fc:nth-child(n){border-inline-start:0}
  .fc{padding:26px 22px}
  .row2{grid-template-columns:minmax(0,1fr);gap:14px;padding:22px}
  .qt{padding:26px 22px}
  .plans.p-page,.sup-cards,.pricing-grid{grid-template-columns:minmax(0,1fr)}
  .contact-form .form-row{grid-template-columns:minmax(0,1fr)}
  .contact-form-card,.story-card,.solution-card{padding:26px 20px}
  .shot .fl2{display:none}
  .sec{padding:64px 0}
  .content-section{padding:56px 0}
  .h2{font-size:clamp(30px,9vw,38px)}
  .section-heading{font-size:clamp(30px,9vw,40px)}
  .cta2 .acts .btn{height:52px}
}

/* honeypot: keep it out of layout without creating horizontal overflow in RTL */
.honeypot-field{position:absolute!important;left:auto!important;right:0!important;top:0;width:1px!important;height:1px!important;opacity:0;overflow:hidden;clip-path:inset(50%);pointer-events:none}

/* beat the legacy "first section after breadcrumb is centred" rule */
.breadcrumb-nav+section.ph{text-align:start;padding:60px 0 88px}
.breadcrumb-nav+section.ph.one{text-align:center}
@media (max-width:900px){.breadcrumb-nav+section.ph{padding:40px 0 64px}}
@media (max-width:640px){.breadcrumb-nav+section.ph{padding:30px 0 56px}}
.pln .pn-pr,.pln .pn-ask{margin:-6px 0 20px}
.pln .pn-pr b{font-weight:800}

/* add-ons grid (pricing page) */
.ad-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:48px}
.ad{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:8px;padding:28px 24px 24px;transition:transform .3s,box-shadow .3s}
.ad:hover{transform:translateY(-5px);box-shadow:0 26px 54px -26px rgba(51,90,153,.45)}
.ad-ic{display:grid;place-items:center;width:52px;height:52px;border-radius:8px;background:var(--tint);color:var(--blue);margin-bottom:16px}
.ad h3{font-size:22px;font-weight:800;color:var(--ink);display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.ad h3 .new{font-size:12px;font-weight:800;background:var(--blue);color:#fff;border-radius:5px;padding:2px 8px}
.ad p{color:var(--mut);font-size:16px;margin-bottom:18px}
.ad-pr{font-size:15px;font-weight:700;color:var(--mut);margin-top:auto;padding-top:16px;border-top:1px solid var(--line)}
.ad-pr b{font-size:40px;line-height:1;font-weight:800;color:var(--deep)}
.ad-pr.ask{font-size:20px;font-weight:800;color:var(--deep)}
.ad-act{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.ad-act .btn{flex:1 1 auto}
.ad-note{margin-top:30px;text-align:center;color:var(--mut);font-size:17px}
.ad-note a{color:var(--deep);font-weight:700;text-decoration:underline}
@media (max-width:1100px){.ad-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.ad-grid{grid-template-columns:minmax(0,1fr)}.ad-act .btn{width:100%}}

/* touch targets (mobile / tablet): >=44px hit areas without changing the look */
@media (max-width:1024px){
  .ft ul{gap:0}
  .ft ul a,.ft-links a,.ft-bot a{display:inline-flex;align-items:center;min-height:44px}
  .ft-links{gap:0 24px}
  .logo{display:inline-flex;align-items:center;min-height:44px}
  .faq-item summary{min-height:48px}
}
@media (max-width:1024px){
  .breadcrumb-list a{display:inline-flex;align-items:center;min-height:44px}
  .cb-btn{min-height:44px}
}