/* OBRIS public alignment system — v1.10.0.16
   Loaded after site-responsive.css.
   Purpose: centre card collections, equalise side margins and keep same-row
   card content / actions aligned without changing the established hero style. */
body.public-page{
  --obris-grid-width:1120px;
  --obris-grid-gap:18px;
  --obris-section-copy-width:860px;
}

/* ---------- Centred section introductions ---------- */
body.public-page .product-section > .section-head,
body.public-page .blog-preview > .section-head,
body.public-page .section > .section-head{
  display:block!important;
  width:100%!important;
  max-width:var(--obris-section-copy-width)!important;
  margin-left:auto!important;
  margin-right:auto!important;
  margin-bottom:44px!important;
  text-align:center!important;
}
body.public-page .product-section > .section-head .eyebrow,
body.public-page .blog-preview > .section-head .eyebrow,
body.public-page .section > .section-head .eyebrow{
  text-align:center!important;
}
body.public-page .product-section > .section-head h2,
body.public-page .blog-preview > .section-head h2,
body.public-page .section > .section-head h2{
  max-width:820px!important;
  margin:12px auto 14px!important;
}
body.public-page .product-section > .section-head p,
body.public-page .blog-preview > .section-head p,
body.public-page .section > .section-head p{
  max-width:780px!important;
  margin:0 auto!important;
}

/* ---------- Centre all repeated card collections ---------- */
body.public-page .product-grid,
body.public-page .cards,
body.public-page .feature-grid,
body.public-page .pricing-grid,
body.public-page .device-grid,
body.public-page .device-grid.three,
body.public-page .environment-grid,
body.public-page .factor-grid,
body.public-page .principles-grid,
body.public-page .trust-strip,
body.public-page .blog-preview-grid,
body.public-page .posts.single-post,
body.public-page .locations-layout,
body.public-page .split{
  width:100%!important;
  max-width:var(--obris-grid-width)!important;
  margin-left:auto!important;
  margin-right:auto!important;
  align-items:stretch!important;
}

/* Normalise grid gaps where pages previously used different spacing. */
body.public-page .product-grid,
body.public-page .cards,
body.public-page .feature-grid,
body.public-page .pricing-grid,
body.public-page .environment-grid,
body.public-page .factor-grid,
body.public-page .principles-grid,
body.public-page .device-grid,
body.public-page .device-grid.three{
  gap:var(--obris-grid-gap)!important;
}

/* ---------- Equal height cards ---------- */
body.public-page .product-card,
body.public-page .card,
body.public-page .feature-card,
body.public-page .price-card,
body.public-page .device-card,
body.public-page .environment-card,
body.public-page .panel,
body.public-page .post-card,
body.public-page .timeline-step,
body.public-page .flow-step,
body.public-page .factor-grid>div,
body.public-page .principles-grid>div,
body.public-page .blog-preview-grid a{
  height:100%!important;
}

/* Product cards: price and actions finish on the same baseline. */
body.public-page .product-grid > .product-card{
  display:flex!important;
  flex-direction:column!important;
}
body.public-page .product-grid > .product-card > p{
  margin-bottom:18px!important;
}
body.public-page .product-grid > .product-card .feature-list{
  align-content:flex-start!important;
  min-height:76px!important;
  margin-top:0!important;
  margin-bottom:18px!important;
}
body.public-page .product-grid > .product-card .price-line{
  min-height:48px!important;
  margin-top:auto!important;
  margin-bottom:0!important;
  align-items:baseline!important;
}
body.public-page .product-grid > .product-card .hero-actions{
  margin-top:18px!important;
}

/* Pricing cards: feature lists absorb differences so CTA buttons line up. */
body.public-page .pricing-grid > .price-card{
  display:flex!important;
  flex-direction:column!important;
}
body.public-page .pricing-grid > .price-card ul{
  flex:1 1 auto!important;
}
body.public-page .pricing-grid > .price-card .button{
  margin-top:auto!important;
}

/* Common card collections keep internal content sitting naturally from top. */
body.public-page .cards > .card,
body.public-page .feature-grid > .feature-card,
body.public-page .environment-grid > .environment-card,
body.public-page .device-grid > .device-card,
body.public-page .device-grid.three > .device-card,
body.public-page .split > .panel{
  align-self:stretch!important;
}

/* Device cards should not end at visibly different heights. */
body.public-page .device-card{
  display:flex!important;
  flex-direction:column!important;
}
body.public-page .device-card .device-copy{flex:1 1 auto!important;}

/* Home trust cells and similar matrices keep equal internal rhythm. */
body.public-page .trust-strip > div{
  min-height:118px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-start!important;
}

/* Blog featured card remains centred and visually balanced. */
body.public-page .posts.single-post,
body.public-page .blog-preview-grid.single{
  max-width:850px!important;
}

/* Plans: both columns start at the common hero top line. */
body.public-page.plans-page > main{
  align-items:start!important;
}
body.public-page.plans-page .hero{
  align-self:start!important;
  padding-top:0!important;
  margin-top:0!important;
}
body.public-page.plans-page .checkout-card{
  align-self:start!important;
}

/* VPN: centre screenshot pair and keep feature blocks symmetrical. */
body.public-page.vpn-page .platforms{
  justify-content:center!important;
  align-items:stretch!important;
}
body.public-page.vpn-page .platform-card{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
}
body.public-page.vpn-page .platform-card .platform-cta{
  margin-top:20px!important;
}

/* ---------- Tablet ---------- */
@media(max-width:1024px){
  body.public-page{
    --obris-grid-width:100%;
    --obris-grid-gap:16px;
    --obris-section-copy-width:760px;
  }
  body.public-page .product-grid > .product-card .feature-list{
    min-height:0!important;
  }
}

/* ---------- Mobile ---------- */
@media(max-width:640px){
  body.public-page{
    --obris-grid-gap:12px;
  }
  body.public-page .product-section > .section-head,
  body.public-page .blog-preview > .section-head,
  body.public-page .section > .section-head{
    margin-bottom:30px!important;
    text-align:left!important;
  }
  body.public-page .product-section > .section-head .eyebrow,
  body.public-page .blog-preview > .section-head .eyebrow,
  body.public-page .section > .section-head .eyebrow{
    text-align:left!important;
  }
  body.public-page .product-section > .section-head h2,
  body.public-page .blog-preview > .section-head h2,
  body.public-page .section > .section-head h2,
  body.public-page .product-section > .section-head p,
  body.public-page .blog-preview > .section-head p,
  body.public-page .section > .section-head p{
    margin-left:0!important;
    margin-right:0!important;
  }
  body.public-page .product-grid > .product-card .feature-list{
    min-height:0!important;
  }
  body.public-page .trust-strip > div{min-height:0!important;}
}


/* ================================================================
   OBRIS PUBLIC PAGE FRAME — v1.10.0.17
   Keep OUTER maximum width and INNER content width distinct.
   With a 1240px frame and 30px gutters, visible cards are 1180px.
   This file should load AFTER the page's own styles.
   ================================================================ */
body.public-page {
  --obris-frame-width:1240px;
  --obris-frame-gutter:30px;
  --obris-grid-width:100%;
}

/* Public content pages use one centered frame. Plans has its own
   rounded checkout frame and must keep its specialised padding. */
body.public-page:not(.plans-page) > main {
  box-sizing:border-box!important;
  width:100%!important;
  max-width:var(--obris-frame-width)!important;
  padding-left:var(--obris-frame-gutter)!important;
  padding-right:var(--obris-frame-gutter)!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* Home cards use exactly the inner width of that same frame.
   Keep the already-approved 72px card separation. */
body.public-page.home-page > main.ol-main {
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  gap:72px!important;
  margin-top:64px!important;
  margin-bottom:110px!important;
  padding-top:0!important;
  padding-bottom:0!important;
}
body.public-page.home-page > main.ol-main > .ol-panel {
  box-sizing:border-box!important;
  grid-column:1!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  margin:0!important;
  justify-self:stretch!important;
}

/* Some older pages add a second inset to the hero itself.
   Keep outer card edges flush with the shared content frame. */
body.public-page:not(.plans-page) > main > .hero,
body.public-page:not(.plans-page) > main > .vpn-showcase,
body.public-page:not(.plans-page) > main > .split-section,
body.public-page:not(.plans-page) > main > .yubikey-section,
body.public-page:not(.plans-page) > main > .closing-section {
  box-sizing:border-box!important;
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
}

/* On narrow screens, the same consistent gutters apply everywhere. */
@media(max-width:1024px){
  body.public-page{--obris-frame-gutter:24px;}
}
@media(max-width:860px){
  body.public-page{--obris-frame-gutter:20px;}
  body.public-page.home-page > main.ol-main{margin-top:45px!important;}
}
@media(max-width:640px){
  body.public-page{--obris-frame-gutter:16px;}
  body.public-page.home-page > main.ol-main{margin-top:34px!important;margin-bottom:80px!important;}
}
@media(max-width:400px){
  body.public-page{--obris-frame-gutter:12px;}
}