/*
 URUSLY — ALL PUBLIC PAGES SECTION ALIGNMENT POLISH
 Design rule:
 eyebrow/tag at top -> main title centred -> muted subtitle below -> cards/content below.
 This file loads last so old section-specific layouts cannot push headings left/right.
*/

:root{
  --u-title:#0b1837;
  --u-copy:#6f7f94;
  --u-cyan:#54d9ff;
  --u-blue:#0a70ff;
  --u-dark:#061a39;
}

/* ---------- universal section rhythm ---------- */
main > .section{
  padding-top:68px!important;
  padding-bottom:68px!important;
}

.section > .wrap,
.section > .hub-wrap{
  position:relative;
}

/* The actual section-heading system */
.section-head,
.section .center.narrow,
.section .builder-heading,
.section .domain-intro,
.section .care-intro{
  display:block!important;
  width:min(100%,820px)!important;
  max-width:820px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  text-align:center!important;
}

.section-head{
  margin-bottom:30px!important;
}

.section-head > div:not(.tag),
.section-head > div:first-child:not(.tag){
  width:100%!important;
  max-width:820px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  text-align:center!important;
}

.section-head .tag,
.section .center.narrow > .tag,
.section .builder-heading > .tag,
.section > .wrap > .tag,
.service-about .tag{
  display:table!important;
  width:auto!important;
  max-width:100%!important;
  margin:0 auto 12px!important;
  text-align:center!important;
  color:var(--u-blue)!important;
  font-size:10px!important;
  line-height:1.2!important;
  font-weight:900!important;
  letter-spacing:.16em!important;
  white-space:normal!important;
}

/* thin decorative lines like the approved WHY URUSLY reference */
.section-head .tag::before,
.section-head .tag::after,
.section .center.narrow > .tag::before,
.section .center.narrow > .tag::after{
  content:"";
  display:inline-block;
  vertical-align:middle;
  width:34px;
  height:1px;
  margin:0 11px 3px;
  background:currentColor;
  opacity:.62;
}

.section-head h2,
.section .center.narrow > h2,
.section .builder-heading > h2,
.section .domain-intro > h2,
.section .care-intro > h2{
  width:100%!important;
  max-width:820px!important;
  margin:0 auto 11px!important;
  text-align:center!important;
  color:var(--u-title)!important;
  font-size:clamp(32px,4vw,48px)!important;
  line-height:1.08!important;
  letter-spacing:-.035em!important;
  text-wrap:balance;
}

.section-head > p,
.section .center.narrow > p,
.section .builder-heading > p,
.section .domain-intro > p,
.section .care-intro > p{
  width:min(100%,690px)!important;
  max-width:690px!important;
  margin:0 auto!important;
  text-align:center!important;
  color:var(--u-copy)!important;
  font-size:14px!important;
  line-height:1.58!important;
  text-wrap:pretty;
}

/* Never let a section heading sit beside decorative content */
.demo-head{
  display:block!important;
  grid-template-columns:1fr!important;
  text-align:center!important;
}
.demo-head > div:first-child{
  width:min(100%,820px)!important;
  margin:0 auto!important;
  text-align:center!important;
}
.demo-head .hand-note{
  display:block!important;
  width:max-content!important;
  max-width:100%!important;
  margin:13px auto 0!important;
  text-align:center!important;
  transform:none!important;
}

/* ---------- dark sections ---------- */
.about-dark .section-head h2,
.about-dark .center.narrow > h2,
.dark .section-head h2,
.dark .center.narrow > h2,
.service-examples .section-head h2,
.hub-why-exact .section-head h2{
  color:#fff!important;
}
.about-dark .section-head > p,
.about-dark .center.narrow > p,
.dark .section-head > p,
.dark .center.narrow > p,
.service-examples .section-head > p,
.hub-why-exact .section-head > p{
  color:#fff!important;
}
.about-dark .section-head .tag,
.about-dark .center.narrow > .tag,
.dark .section-head .tag,
.dark .center.narrow > .tag,
.service-examples .section-head .tag,
.hub-why-exact .section-head .tag{
  color:var(--u-cyan)!important;
}

/* ---------- homepage ---------- */

/* Main solution heading follows the same centred hierarchy */
.hub-build-section .section-head,
.hub-quiz-section .section-head,
.hub-addons-section .section-head,
.hub-process-exact .section-head,
.hub-status-section .section-head,
.urusly-domain-section .section-head,
.shared-project-terms .section-head,
.shared-global-faq .section-head{
  text-align:center!important;
}

/* "Not sure?" was previously side-by-side. Stack it cleanly. */
.hub-help-exact > .wrap{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:17px!important;
  text-align:center!important;
}
.hub-help-exact > .wrap > div{
  width:min(100%,760px)!important;
  margin:0 auto!important;
  text-align:center!important;
}
.hub-help-exact .tag{
  display:table!important;
  margin:0 auto 10px!important;
}
.hub-help-exact h2{
  margin:0 auto 9px!important;
  max-width:760px!important;
  text-align:center!important;
  font-size:clamp(30px,4vw,44px)!important;
  line-height:1.08!important;
}
.hub-help-exact p{
  max-width:650px!important;
  margin:0 auto!important;
  text-align:center!important;
  color:var(--u-copy)!important;
}

/* Quiz title/question in the middle; choices stay underneath */
.hub-quiz-step > small{
  display:block!important;
  text-align:center!important;
  color:#7e8ea2!important;
}
.hub-quiz-step > h3{
  max-width:720px!important;
  margin:8px auto 19px!important;
  text-align:center!important;
  color:var(--u-title)!important;
  font-size:clamp(20px,3vw,30px)!important;
  line-height:1.18!important;
  text-wrap:balance;
}
.hub-quiz-options{
  width:100%!important;
  max-width:700px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* Approved WHY URUSLY composition */
.hub-why-exact{
  overflow:hidden;
}
.hub-why-exact .section-head{
  margin-bottom:32px!important;
}
.hub-why-exact .section-head h2{
  max-width:850px!important;
}
.hub-why-four{
  width:min(100%,940px)!important;
  margin:0 auto!important;
  align-items:stretch!important;
}
.hub-why-four article{
  height:100%!important;
  text-align:left!important;
}

/* Domain title must always be above the domain cards */
.urusly-domain-section .section-head{
  margin-bottom:28px!important;
}
.urusly-domain-grid{
  margin-top:0!important;
}

/* Start-project form intro centred above form */
.home-project-form-layout{
  grid-template-columns:1fr!important;
  gap:24px!important;
}
.home-project-form-copy{
  position:static!important;
  width:min(100%,780px)!important;
  margin:0 auto!important;
  padding:0!important;
  text-align:center!important;
}
.home-project-form-copy .tag{
  display:table!important;
  margin:0 auto 11px!important;
}
.home-project-form-copy h2{
  max-width:760px!important;
  margin:0 auto 10px!important;
  text-align:center!important;
  color:var(--u-title)!important;
  font-size:clamp(32px,4vw,46px)!important;
  line-height:1.08!important;
}
.home-project-form-copy > p{
  max-width:680px!important;
  margin:0 auto!important;
  text-align:center!important;
  color:var(--u-copy)!important;
}
.home-form-points{
  width:min(100%,660px)!important;
  margin:18px auto 0!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
.home-form-points span{
  justify-content:center!important;
}

/* ---------- generic Website / Landing / E-Commerce ---------- */

/* About page: title first, visual below, never title on the left */
.service-about .about-layout{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:26px!important;
  align-items:start!important;
}
.service-about .about-layout > div:first-child{
  width:min(100%,820px)!important;
  margin:0 auto!important;
  text-align:center!important;
}
.service-about .about-layout > div:first-child .tag{
  margin-bottom:12px!important;
}
.service-about .about-layout > div:first-child h2{
  max-width:820px!important;
  margin:0 auto 11px!important;
  text-align:center!important;
  color:#fff!important;
  font-size:clamp(32px,4vw,48px)!important;
  line-height:1.08!important;
  text-wrap:balance;
}
.service-about .about-layout > div:first-child .body-lg{
  max-width:700px!important;
  margin:0 auto!important;
  text-align:center!important;
  color:#fff!important;
}
.service-about .dark-chips{
  justify-content:center!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
.service-about-visual{
  width:min(100%,760px)!important;
  margin:0 auto!important;
}

/* Keep content grids clearly below headings */
.service-feature-grid,
.service-scope-grid,
.demo-grid,
.service-demo-grid,
.completed-project-grid,
.steps,
.service-pricing-grid,
.website-cms-grid,
.ecommerce-cms-info-grid,
.service-domain-grid,
.service-addon-grid,
.faq-list{
  margin-top:0!important;
}

/* Service builder should no longer have a left-heavy heading */
.service-builder .builder-heading{
  margin-bottom:25px!important;
  text-align:center!important;
}

/* ---------- Custom Business System ---------- */
.domain-section > .wrap > .tag{
  display:table!important;
  margin:0 auto 12px!important;
  text-align:center!important;
}
.domain-section .domain-intro{
  text-align:center!important;
  margin:0 auto 27px!important;
}
.domain-section .domain-box,
.domain-section .domain-benefits,
.domain-section .info-strip{
  width:min(100%,980px)!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

.feature-section .section-head.light,
.demos-section .section-head,
.notification-section .center.narrow,
.duo-section .center.narrow,
.addons-section .center.narrow,
.completed-projects-section .center.narrow,
.builder-section .builder-heading,
.faq-section .center.narrow{
  text-align:center!important;
}

/* ---------- card consistency ---------- */
.hub-build-grid,
.hub-why-four,
.service-feature-grid,
.service-scope-grid,
.service-demo-grid,
.completed-project-grid,
.service-pricing-grid,
.website-cms-grid,
.ecommerce-cms-info-grid,
.service-domain-grid,
.notification-grid,
.duo-grid,
.addon-grid{
  align-items:stretch!important;
}
.hub-build-card,
.hub-why-four article,
.service-feature-card,
.scope-card,
.service-demo-card,
.completed-project-card,
.price-card,
.website-cms-card,
.ecommerce-cms-info-card,
.service-domain-card,
.notification-card,
.duo-card,
.addon-card{
  min-width:0!important;
}

/* ---------- tablet ---------- */
@media(max-width:900px){
  main > .section{
    padding-top:58px!important;
    padding-bottom:58px!important;
  }
  .section-head h2,
  .section .center.narrow > h2,
  .section .builder-heading > h2,
  .section .domain-intro > h2,
  .section .care-intro > h2{
    font-size:36px!important;
  }
}

/* ---------- mobile: matches the approved screenshot hierarchy ---------- */
@media(max-width:680px){
  main > .section{
    padding-top:48px!important;
    padding-bottom:48px!important;
  }

  .section-head,
  .section .center.narrow,
  .section .builder-heading,
  .section .domain-intro,
  .section .care-intro{
    width:100%!important;
    max-width:none!important;
    padding-left:3px!important;
    padding-right:3px!important;
  }

  .section-head{
    margin-bottom:22px!important;
  }

  .section-head .tag,
  .section .center.narrow > .tag,
  .section .builder-heading > .tag,
  .section > .wrap > .tag,
  .service-about .tag{
    margin-bottom:10px!important;
    font-size:8px!important;
    letter-spacing:.18em!important;
  }

  .section-head .tag::before,
  .section-head .tag::after,
  .section .center.narrow > .tag::before,
  .section .center.narrow > .tag::after{
    width:25px!important;
    margin-left:8px!important;
    margin-right:8px!important;
  }

  .section-head h2,
  .section .center.narrow > h2,
  .section .builder-heading > h2,
  .section .domain-intro > h2,
  .section .care-intro > h2,
  .service-about .about-layout > div:first-child h2,
  .home-project-form-copy h2{
    max-width:620px!important;
    font-size:29px!important;
    line-height:1.08!important;
    margin-bottom:9px!important;
    letter-spacing:-.035em!important;
  }

  .section-head > p,
  .section .center.narrow > p,
  .section .builder-heading > p,
  .section .domain-intro > p,
  .section .care-intro > p,
  .service-about .about-layout > div:first-child .body-lg,
  .home-project-form-copy > p{
    max-width:560px!important;
    font-size:11.5px!important;
    line-height:1.5!important;
  }

  /* screenshot-like 2 x 2 WHY cards */
  .hub-why-four{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }
  .hub-why-four article{
    padding:15px!important;
    border-radius:18px!important;
  }
  .hub-why-four article > span{
    width:42px!important;
    height:42px!important;
    margin-bottom:11px!important;
  }
  .hub-why-four h3{
    font-size:13px!important;
    line-height:1.2!important;
    margin:0 0 6px!important;
  }
  .hub-why-four p{
    font-size:9.5px!important;
    line-height:1.48!important;
  }

  /* Quiz choices appear as clean vertical rows, question centred above */
  .hub-quiz-card{
    padding:16px!important;
  }
  .hub-quiz-step > h3{
    font-size:20px!important;
    margin-bottom:15px!important;
  }
  .hub-quiz-options{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
  }
  .hub-quiz-options button{
    width:100%!important;
    min-height:54px!important;
    text-align:left!important;
    border-radius:14px!important;
  }

  /* Domain: heading centred, cards below */
  .urusly-domain-grid,
  .service-domain-grid{
    margin-top:0!important;
  }

  /* Form benefits compact */
  .home-form-points{
    grid-template-columns:1fr!important;
    gap:7px!important;
    max-width:360px!important;
  }
  .home-form-points span{
    justify-content:flex-start!important;
  }

  /* Custom System demo hand-note cannot sit to the side */
  .demo-head .hand-note{
    font-size:10px!important;
    line-height:1.35!important;
  }

  /* Keep all section cards inside the viewport */
  .wrap,
  .hub-wrap{
    max-width:100%!important;
  }
  .service-about-visual,
  .service-flow-card,
  .domain-box,
  .info-strip{
    max-width:100%!important;
  }
}

/* very small phones */
@media(max-width:390px){
  .section-head h2,
  .section .center.narrow > h2,
  .section .builder-heading > h2,
  .section .domain-intro > h2,
  .section .care-intro > h2,
  .service-about .about-layout > div:first-child h2,
  .home-project-form-copy h2{
    font-size:26px!important;
  }
  .hub-why-four{
    gap:8px!important;
  }
  .hub-why-four article{
    padding:13px!important;
  }
}


/* FINAL: all blue mini section titles / eyebrows removed */
main .tag,
main .eyebrow,
main .pill-tag,
main .section-head .tag,
main .center.narrow > .tag,
main .builder-heading > .tag,
main .domain-intro > .tag,
main .care-intro > .tag,
main .demo-head .tag,
main .service-about .tag,
main .home-project-form-copy .tag,
main .final-cta .tag{
  display:none!important;
}

/* Main title becomes the first visible heading in every section */
main .section-head h2,
main .center.narrow > h2,
main .builder-heading > h2,
main .domain-intro > h2,
main .care-intro > h2,
main .service-about h2,
main .home-project-form-copy h2,
main .final-cta h2{
  margin-top:0!important;
}


/* =========================================================
   CANONICAL DARK-SECTION CONTRAST
   Loaded last. All public dark sections use white text.
   ========================================================= */
main .dark,
main .about-dark,
main .service-examples,
main .hub-why-exact,
main .care-section{
  color:#fff!important;
}

main .dark h1,main .dark h2,main .dark h3,main .dark h4,main .dark h5,main .dark h6,
main .about-dark h1,main .about-dark h2,main .about-dark h3,main .about-dark h4,main .about-dark h5,main .about-dark h6,
main .service-examples h1,main .service-examples h2,main .service-examples h3,main .service-examples h4,
main .hub-why-exact h1,main .hub-why-exact h2,main .hub-why-exact h3,main .hub-why-exact h4,
main .care-section h1,main .care-section h2,main .care-section h3,main .care-section h4,
main .dark b,main .dark strong,
main .about-dark b,main .about-dark strong,
main .service-examples b,main .service-examples strong,
main .hub-why-exact b,main .hub-why-exact strong,
main .care-section b,main .care-section strong{
  color:#fff!important;
}

main .dark p,main .dark li,main .dark small,
main .about-dark p,main .about-dark li,main .about-dark small,
main .service-examples p,main .service-examples li,main .service-examples small,
main .hub-why-exact p,main .hub-why-exact li,main .hub-why-exact small,
main .care-section p,main .care-section li,main .care-section small{
  color:#fff!important;
  opacity:.94;
}

/* Annual System Care specifically */
main .care-section .care-intro h2,
main .care-section .care-intro p,
main .care-section .care-intro .light-p,
main .care-section .care-intro .note,
main .care-section .care-grid>div,
main .care-section .care-grid>div b,
main .care-section .care-grid>div strong,
main .care-section .care-grid>div small{
  color:#fff!important;
}

/* Final explicit dark-copy hook. This is the last stylesheet. */
main .dark-copy .dark-section-title,
main .dark-copy .dark-section-subtitle,
main .dark-copy > .wrap > .center h2,
main .dark-copy > .wrap > .center > p,
main .dark-copy .section-head h2,
main .dark-copy .section-head > p{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  opacity:1!important;
}

/* Duo is a dark section; never inherit navy page heading colours. */
main .duo-section h2,
main .duo-section .center h2,
main .duo-section .narrow h2,
main .duo-section .center > p,
main .duo-section .narrow > p{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}


/* FINAL QA — overflow, cards and mobile footer spacing */
html,body{max-width:100%;overflow-x:hidden}
img,svg,video{max-width:100%}
@media(max-width:680px){
  main > .section{overflow:hidden}
  .service-demo-grid,.completed-project-grid,.service-pricing-grid,.website-cms-grid,.ecommerce-cms-info-grid,.service-domain-grid{width:100%;max-width:100%}
  .price-card,.website-cms-card,.ecommerce-cms-info-card,.service-domain-card,.service-demo-card,.completed-project-card{min-width:0;max-width:100%}
  .mobile-sticky-cta{z-index:80}
  footer,.footer{padding-bottom:calc(82px + env(safe-area-inset-bottom))!important}
}


/* Final hero cleanup: no floating decorative text/cards behind mockups */
.hub-main-visual > .service-float,
.service-device > .service-float,
.product-showcase .float-card,
.product-showcase .scribble{
  display:none!important;
}

/* Keep mockup clean and centered after removing decorations */
.hub-main-browser,
.service-device,
.product-showcase .mockup{
  position:relative;
  z-index:2;
}


/* Quote-only pricing + Portal + CMS */
.hub-starts-from{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;margin:10px 0 12px;padding:8px 10px;border-radius:12px;background:#eef6ff;color:#0b2448}
.hub-starts-from small{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#60758e}
.hub-starts-from strong{font-size:16px;color:#0b70f5}
.hub-starts-from span{font-size:10px;color:#60758e}
.quote-only-label{display:inline-flex;align-items:center;justify-content:center;margin:7px 0 10px;padding:7px 11px;border-radius:999px;background:#eaf4ff;color:#0b70f5;font-size:12px;font-weight:900}
.system-starts-from{display:inline-flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:12px auto 20px;padding:10px 14px;border:1px solid #d8e8fb;border-radius:14px;background:#f7fbff}
.system-starts-from small{font-size:10px;font-weight:900;color:#63778e;letter-spacing:.06em}
.system-starts-from strong{font-size:20px;color:#0b70f5}
.system-starts-from span{font-size:11px;color:#63778e}

.portal-catalog-ui{overflow:hidden}
.portal-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid #e6edf6;background:#fff}
.portal-head b{font-size:12px;color:#102846}.portal-head span{font-size:10px;color:#6d8095}.portal-head button{border:0;background:#0b70f5;color:#fff;padding:7px 10px;border-radius:9px;font-size:9px;font-weight:800}
.portal-hero{padding:20px 18px;background:linear-gradient(135deg,#edf6ff,#fff)}
.portal-hero small{font-size:9px;font-weight:900;color:#0b70f5;letter-spacing:.08em}.portal-hero strong{display:block;margin:5px 0;font-size:19px;line-height:1.15;color:#102846}.portal-hero p{margin:0;color:#667b92;font-size:10px}
.portal-catalog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:12px;background:#fff}
.portal-catalog-grid article{padding:10px;border:1px solid #e2ebf5;border-radius:10px;background:#fbfdff}.portal-catalog-grid span{display:grid;place-items:center;width:100%;aspect-ratio:1.35;border-radius:8px;background:#eaf4ff;color:#0b70f5;font-weight:900}.portal-catalog-grid b{display:block;margin-top:7px;font-size:9px;color:#142a43}.portal-catalog-grid small{font-size:8px;color:#708297}
.portal-cms-bar{display:flex;gap:8px;align-items:center;margin:0 12px 12px;padding:9px 11px;border-radius:10px;background:#0b2448;color:#fff;font-size:9px;font-weight:800}
.portal-cms-section{background:#f7fbff}
.portal-cms-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:900px;margin:22px auto}
.portal-cms-card{display:flex;align-items:center;gap:10px;padding:15px 16px;border:1px solid #dce8f5;border-radius:14px;background:#fff;box-shadow:0 8px 24px rgba(18,52,90,.05)}
.portal-cms-card i{display:grid;place-items:center;flex:0 0 28px;width:28px;height:28px;border-radius:50%;background:#eaf4ff;color:#0b70f5}
.portal-cms-card span{font-size:13px;font-weight:750;color:#18314f}
.portal-use-note{display:flex;gap:12px;align-items:flex-start;max-width:900px;margin:14px auto 0;padding:16px 18px;border-radius:16px;background:#0b2448;color:#fff}
.portal-use-note>i{font-size:24px}.portal-use-note p{margin:0;color:#dce8f5}.portal-use-note strong{color:#fff}
@media(max-width:680px){
 .hub-starts-from{gap:4px;padding:7px 9px}.hub-starts-from strong{font-size:14px}.hub-starts-from span{width:100%}
 .portal-catalog-grid{grid-template-columns:repeat(3,1fr);gap:5px;padding:8px}.portal-catalog-grid article{padding:6px}.portal-catalog-grid b{font-size:7.5px}.portal-catalog-grid small{font-size:7px}
 .portal-cms-grid{grid-template-columns:1fr;gap:8px}.portal-cms-card{padding:12px 13px}.portal-cms-card span{font-size:11px}
 .portal-use-note{padding:13px 14px}.portal-use-note p{font-size:10.5px}
}