/* Product-component integration for the owner-approved public pages. */
.approved-product-phone,
.hero-phone.approved-product-phone,
.card-phone.approved-product-phone{
  display:block;
  padding:0;
  background:url('/home-assets/simpllee_blank_phone_frame.png') center/contain no-repeat;
  border-radius:0;
  box-shadow:none;
  aspect-ratio:2/3;
  width:auto;
  overflow:visible;
  filter:drop-shadow(0 18px 22px rgba(41,31,24,.2));
}
.approved-product-phone .approved-phone-screen{
  position:absolute;
  z-index:1;
  left:20.55%;
  top:7.2%;
  width:58.9%;
  height:85.1%;
  min-height:0;
  max-height:none;
  overflow-y:auto;
  overflow-x:hidden;
  border-radius:clamp(18px,2vw,29px);
  box-shadow:none;
  scrollbar-width:none;
}
.approved-product-phone .approved-phone-screen::-webkit-scrollbar{display:none}
.approved-product-phone .ghead{position:relative;padding:28px 10px 8px}
.approved-product-phone .gmark{width:30px;height:30px;border-radius:8px}
.approved-product-phone .gbrand strong{font-size:11px}
.approved-product-phone .gbrand span{font-size:8px}
.approved-product-phone .homebtn{font-size:8px;padding:5px 6px}
.approved-product-phone .gmain{padding:9px}
.approved-product-phone .guest-property-image{width:calc(100% + 18px);height:104px;margin:-9px -9px 9px}
.approved-product-phone .eyebrow{font-size:7px}
.approved-product-phone .gmain h2{font-size:21px;margin:3px 0}
.approved-product-phone .lede{font-size:8px;line-height:1.35}
.approved-product-phone .welcome{padding:8px;margin:8px 0;font-size:8px}
.approved-product-phone .search-label{font-size:8px}
.approved-product-phone .search{padding:7px;font-size:8px}
.approved-product-phone .tiles{gap:6px;margin:8px 0}
.approved-product-phone .tile{min-height:68px;padding:8px;border-radius:9px}
.approved-product-phone .tile .ico{width:27px;height:27px;border-radius:8px}
.approved-product-phone .tile .ico svg{width:17px;height:17px}
.approved-product-phone .tile strong{font-size:9px;margin:6px 0 2px}
.approved-product-phone .tile small{font-size:7px}
.approved-product-phone .gfooter{font-size:7px;padding:10px}
.approved-product-phone .card{padding:8px;margin:6px 0}
.approved-product-phone .card img{width:calc(100% + 16px);margin:-8px -8px 7px}
.approved-product-phone .card b{font-size:10px}
.approved-product-phone .card p{font-size:8px}
.approved-product-phone .card a{font-size:7px;padding:5px}

/* One canonical guest-phone canvas shared by Home, How It Works, Demo and
   Showroom. Its transparent PNG margins, handset opening and screen inset
   always scale together as a single component. */
.canonical-guest-phone{
  display:block;
  padding:0;
  background:url('/home-assets/simpllee_blank_phone_frame.png') center/contain no-repeat;
  border-radius:0;
  box-shadow:none;
  aspect-ratio:2/3;
  overflow:visible;
  filter:drop-shadow(0 20px 25px rgba(32,24,18,.18));
  container-type:inline-size;
}
.canonical-guest-phone .canonical-guest-screen{
  position:absolute;
  z-index:1;
  left:20.55%;
  top:7.2%;
  width:58.9%;
  height:85.1%;
  min-height:0;
  max-height:none;
  display:block;
  overflow-y:auto;
  overflow-x:hidden;
  border-radius:7.57cqi;
  background:#fffdfa;
  color:#171914;
  font-family:Arial,Helvetica,sans-serif;
  container-type:inline-size;
  overscroll-behavior:contain;
  touch-action:pan-y;
  scrollbar-width:none;
}
.canonical-guest-phone .canonical-guest-screen::-webkit-scrollbar{display:none;width:0;height:0}

/* The showroom enlarges the complete canonical phone; its opening radius
   therefore scales with the same ratio instead of becoming an independent
   fixed-size phone treatment. */
.showroom-preview .canonical-guest-phone .canonical-guest-screen{border-radius:7.57cqi}

@media(max-width:760px){
  .showroom-preview .canonical-guest-phone{
    position:relative;
    width:min(100%,520px);
    aspect-ratio:2/3;
    margin-inline:auto;
    background:url('/home-assets/simpllee_blank_phone_frame.png') center/contain no-repeat;
    filter:drop-shadow(0 20px 25px rgba(32,24,18,.18));
  }
  .showroom-preview .canonical-guest-phone .canonical-guest-screen{
    position:absolute;
    left:20.55%;
    top:7.2%;
    width:58.9%;
    height:85.1%;
    min-height:0;
    border:0;
    border-radius:7.57cqi;
  }
}
body[data-approved-page="home"] .approved-home-guide-head{
  flex:0 0 13%;
  min-height:0;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:end;
  gap:7px;
  padding:20px 9px 7px;
  background:#344138;
  color:#fff;
}
body[data-approved-page="home"] .approved-home-guide-mark{
  width:29px;
  height:29px;
  display:grid;
  place-items:center;
  border:1px solid #a6aa79;
  border-radius:8px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:13px;
  font-weight:800;
}
body[data-approved-page="home"] .approved-home-guide-head strong,
body[data-approved-page="home"] .approved-home-guide-head small{display:block}
body[data-approved-page="home"] .approved-home-guide-head strong{font-size:10px;line-height:1.15}
body[data-approved-page="home"] .approved-home-guide-head small{margin-top:2px;color:#69706a;font-size:7px;line-height:1.15}
body[data-approved-page="home"] .approved-home-guide-head small{color:#d4dcde}
body[data-approved-page="home"] .approved-home-guide-head i{
  position:relative;
  width:18px;
  height:14px;
  margin-bottom:5px;
  border-top:2px solid currentColor;
  border-bottom:2px solid currentColor;
}
body[data-approved-page="home"] .approved-home-guide-head i::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:4px;
  border-top:2px solid currentColor;
}
body[data-approved-page="home"] .approved-home-guide-gallery{
  flex:0 0 22%;
  min-height:0;
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:4px;
  padding:0 9px;
}
body[data-approved-page="home"] .approved-home-guide-gallery img{
  width:100%;
  height:100%;
  min-height:0;
  object-fit:cover;
}
body[data-approved-page="home"] .approved-home-guide-gallery img:first-child{object-position:34% 74%;border-radius:8px 0 0 8px}
body[data-approved-page="home"] .approved-home-guide-gallery img:last-child{object-position:100% 55%;border-radius:0 8px 8px 0}
body[data-approved-page="home"] .approved-home-guide-welcome{
  flex:0 0 18%;
  min-height:0;
  padding:14px 10px 7px;
}
body[data-approved-page="home"] .approved-home-guide-welcome strong,
body[data-approved-page="home"] .approved-home-guide-welcome span{display:block}
body[data-approved-page="home"] .approved-home-guide-welcome strong{font-family:Georgia,"Times New Roman",serif;font-size:19px;line-height:1}
body[data-approved-page="home"] .approved-home-guide-welcome span{margin-top:4px;color:#64706b;font-size:7.5px;line-height:1.25}
body[data-approved-page="home"] .approved-home-guide-tiles{
  flex:1 1 auto;
  min-height:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(4,minmax(0,1fr));
  gap:6px;
  padding:0 9px 10px;
}
body[data-approved-page="home"] .approved-home-guide-tile{
  min-width:0;
  min-height:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  border-radius:9px;
  background:#f5eee3;
  text-align:center;
}
body[data-approved-page="home"] .approved-home-guide-tile:nth-child(2),
body[data-approved-page="home"] .approved-home-guide-tile:nth-child(5){background:#eef0df}
body[data-approved-page="home"] .approved-home-guide-tile:nth-child(3),
body[data-approved-page="home"] .approved-home-guide-tile:nth-child(6){background:#e8f0f3}
body[data-approved-page="home"] .approved-home-guide-tile:nth-child(4),
body[data-approved-page="home"] .approved-home-guide-tile:nth-child(7){background:#f8eddc}
body[data-approved-page="home"] .approved-home-guide-tile:nth-child(8){background:#f4e8df}
body[data-approved-page="home"] .approved-home-guide-tile span{display:grid;place-items:center}
body[data-approved-page="home"] .approved-home-guide-tile svg{width:19px;height:19px;stroke-width:1.9}
body[data-approved-page="home"] .approved-home-guide-tile strong{font-size:7.5px;line-height:1.05;white-space:nowrap}

@media(max-width:1100px){
  body[data-approved-page="home"] .approved-home-guide-head{gap:5px;padding-inline:7px}
  body[data-approved-page="home"] .approved-home-guide-mark{width:24px;height:24px;font-size:11px}
  body[data-approved-page="home"] .approved-home-guide-head strong{font-size:8px}
  body[data-approved-page="home"] .approved-home-guide-head small{font-size:6px}
  body[data-approved-page="home"] .approved-home-guide-gallery{padding-inline:7px}
  body[data-approved-page="home"] .approved-home-guide-welcome{padding-inline:8px}
  body[data-approved-page="home"] .approved-home-guide-welcome strong{font-size:16px}
  body[data-approved-page="home"] .approved-home-guide-welcome span{font-size:6px}
  body[data-approved-page="home"] .approved-home-guide-tiles{gap:4px;padding:0 7px 8px}
  body[data-approved-page="home"] .approved-home-guide-tile{gap:3px;border-radius:7px}
  body[data-approved-page="home"] .approved-home-guide-tile svg{width:15px;height:15px}
  body[data-approved-page="home"] .approved-home-guide-tile strong{font-size:6px}
}

.owner-placeholder.approved-owner-host{
  display:block;
  padding:0;
  overflow:hidden;
  border:1px solid rgba(35,35,35,.1);
  background:#fffdfa;
}
.owner-placeholder.approved-owner-host span{
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
}
.approved-owner-editor{
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  border:0;
  border-radius:inherit;
  box-shadow:none;
  overflow:hidden;
  color:var(--ink);
  text-align:left;
  letter-spacing:normal;
  text-transform:none;
}
.approved-owner-editor .mini-product-head{padding:11px 13px 5px}
.approved-owner-editor .mini-product-head strong{font-size:12px}
.approved-owner-editor .mini-product-head span{font-size:9px}
.approved-owner-editor .editor-tabs{position:static;flex:0 0 auto;padding:7px;gap:4px}
.approved-owner-editor .editor-tabs .step{padding:6px 8px;font-size:9px}
.approved-owner-editor .approved-owner-body{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  padding:12px;
  scrollbar-width:none;
}
.approved-owner-editor .approved-owner-body::-webkit-scrollbar{display:none}
.approved-owner-editor .approved-owner-body h2{font-size:19px}
.approved-owner-editor .approved-owner-body .hint{font-size:10px;margin-bottom:10px}
.approved-owner-editor .approved-owner-body .field{margin-bottom:8px}
.approved-owner-editor .approved-owner-body .field label{font-size:9px;margin-bottom:4px}
.approved-owner-editor .approved-owner-body input,
.approved-owner-editor .approved-owner-body textarea,
.approved-owner-editor .approved-owner-body select{padding:7px 8px;font-size:10px}
.approved-owner-editor .approved-owner-body textarea{min-height:58px}
.approved-owner-editor .approved-owner-body .theme-grid{grid-template-columns:repeat(5,1fr);gap:5px}
.approved-owner-editor .approved-owner-body .theme{padding:6px;font-size:8px}
.approved-owner-editor .approved-owner-body .swatches i{width:11px;height:11px}

body[data-approved-page="how-it-works"] .approved-owner-editor .approved-owner-body .form-grid .field:nth-child(n+5),
body[data-approved-page="how-it-works"] .approved-owner-editor .approved-owner-body .home-warning{display:none}
body[data-approved-page="how-it-works"] .approved-owner-editor .approved-owner-body .theme-grid{grid-template-columns:repeat(5,1fr)}
body[data-approved-page="how-it-works"] .approved-owner-editor .approved-owner-body .theme{padding:4px 5px}
body[data-approved-page="how-it-works"] .approved-owner-editor .approved-owner-body h2{margin:0 0 3px;letter-spacing:-.02em;text-transform:none}
body[data-approved-page="how-it-works"] .approved-owner-editor .approved-owner-body h3{margin:7px 0 3px;font-size:13px;letter-spacing:normal;text-transform:none}
body[data-approved-page="how-it-works"] .approved-owner-editor .approved-owner-body .hint{margin-bottom:7px;letter-spacing:normal;text-transform:none}
body[data-approved-page="how-it-works"] .approved-owner-editor .approved-owner-body .form-grid{gap:7px}
body[data-approved-page="how-it-works"] .approved-owner-editor .approved-owner-body .field{margin-bottom:5px}

.demo-card .card-phone-window .approved-product-phone{
  position:relative;
  margin:0 auto;
}
.demo-card .card-phone-window .approved-phone-screen{pointer-events:none}
.demo-card .card-phone-window .ghead{padding-top:25px}
.demo-card .card-phone-window .guest-property-image{height:90px}
.demo-card .card-phone-window .welcome,
.demo-card .card-phone-window .search-label,
.demo-card .card-phone-window .home-important-notice,
.demo-card .card-phone-window .gfooter{display:none}
.demo-card:nth-child(2) .card-phone-window .guest-property-image,
.demo-card:nth-child(2) .card-phone-window .guest-hero{display:none}
.demo-card:nth-child(2) .card-phone-window .home-view .tile small{display:block}
.demo-card .card-phone-window .tile{min-height:58px}
.demo-card .card-phone-window .tile:nth-child(n+5){display:none}
.approved-demo-message{height:100%;display:grid;align-content:start;padding:62px 15px 24px;background:#fffdfa;color:#36383a;font-family:Arial,Helvetica,sans-serif}
.approved-demo-message>span{display:block;margin-bottom:16px;text-align:center;color:#8a8d8d;font-size:8px}
.approved-demo-message>div{display:grid;grid-template-columns:15px 1fr;gap:7px;align-items:end}
.approved-demo-message i{display:grid;place-items:center;width:15px;height:15px;border-radius:50%;background:#60915d;color:#fff;font-size:7px;font-style:normal}
.approved-demo-message p{margin:0;padding:10px;border-radius:12px 12px 12px 3px;background:#eef1f2;font-size:8px;line-height:1.45}
.approved-demo-message a{color:#2778b8;text-decoration:underline}

body[data-approved-page="how-it-works"] .hero-phone.approved-product-phone{top:0!important;height:460px!important}

.logo{cursor:pointer}

@media(min-width:1101px) and (max-width:1450px){
  body[data-approved-page="how-it-works"] .hero-copy{width:520px}
  body[data-approved-page="how-it-works"] .hero-note{width:100%}
  body[data-approved-page="how-it-works"] .hero-product{right:-60px}
  body[data-approved-page="how-it-works"] .hero-phone.approved-product-phone{height:410px!important}
}
@media(min-width:801px) and (max-width:1100px){
  body[data-approved-page="how-it-works"] .hero-copy{width:350px}
  body[data-approved-page="how-it-works"] .hero-note{width:100%}
  body[data-approved-page="how-it-works"] .hero-phone.approved-product-phone{height:350px!important}
}
@media(min-width:621px) and (max-width:800px){
  .phone.approved-product-phone,
  .hero-phone.approved-product-phone{width:min(58vw,430px)}
  body[data-approved-page="how-it-works"] .hero-product{transform:translateY(-19px)}
  body[data-approved-page="how-it-works"] .hero-phone.approved-product-phone{height:290px!important;width:auto}
  body[data-approved-page="demo"] .hero-phone{transform:translateY(-6px)}
}
@media(max-width:620px){
  .phone.approved-product-phone,
  .hero-phone.approved-product-phone{width:min(58vw,430px)}
  body[data-approved-page="how-it-works"] .hero-phone.approved-product-phone{height:230px!important;width:auto}
}

body[data-approved-page="faq"] .faq-section{padding-top:46px;padding-bottom:30px}
body[data-approved-page="faq"] .faq-group-head{margin-bottom:22px}
body[data-approved-page="faq"] .faq-list{max-width:none;padding:0}
body[data-approved-page="faq"] .faq-list details{
  margin:0;
  overflow:visible;
  border:0;
  border-bottom:1px solid var(--line);
  border-radius:0;
  background:transparent;
}
body[data-approved-page="faq"] .faq-item summary{padding-top:20px;padding-bottom:20px}
body[data-approved-page="faq"] .faq-answer p{padding:0}
body[data-approved-page="faq"] .reassurance-wrap{padding-bottom:22px}

.canonical-guest-screen .ghead{position:relative;padding:13.33cqw 4.76cqw 3.81cqw}
.canonical-guest-screen .gtop{gap:4.28cqw}
.canonical-guest-screen .gmark{width:14.28cqw;height:14.28cqw;border-radius:3.81cqw;font-size:6.67cqw}
.canonical-guest-screen .gbrand strong{font-size:5.24cqw;line-height:1.15}
.canonical-guest-screen .gbrand span{font-size:3.81cqw;line-height:1.15}
.canonical-guest-screen .gmain{padding:4.28cqw}
.canonical-guest-screen .guest-hero{padding:4.28cqw .95cqw 0}
.canonical-guest-screen .gmain h2{margin:1.43cqw 0;font-size:10cqw;line-height:1}
.canonical-guest-screen .lede{margin:0;font-size:3.81cqw;line-height:1.35}
.canonical-guest-phone .canonical-guest-screen .tiles{gap:2.86cqw;margin:3.81cqw 0 0}
.canonical-guest-screen .gmain.home-view .tile{
  min-height:32.37cqw;
  padding:3.81cqw;
  border-radius:4.28cqw;
  box-shadow:none;
}
.canonical-guest-screen .tile .ico,
.canonical-guest-screen .guest-section-title .ico{
  width:12.85cqw;
  height:12.85cqw;
  border-radius:3.81cqw;
}
.canonical-guest-screen .tile .ico svg,
.canonical-guest-screen .guest-section-title .ico svg{width:8.09cqw;height:8.09cqw}
.canonical-guest-screen .tile strong{margin:2.86cqw 0 0;font-size:4.28cqw;line-height:1.18}
.canonical-guest-screen .tile small{display:none}
.canonical-guest-screen .welcome,
.canonical-guest-screen .home-important-notice,
.canonical-guest-screen .search-label,
.canonical-guest-screen .gfooter{display:none}
.canonical-guest-screen .owner-home-view .owner-welcome{padding:1.9cqw .95cqw 0;margin-bottom:3.81cqw}
.canonical-guest-screen .owner-home-view .owner-welcome .formatted-text,
.canonical-guest-screen .owner-home-view .owner-welcome .formatted-list{margin:0;font-size:3.81cqw;line-height:1.35}
.canonical-guest-screen .owner-home-view .home-important-notice{
  display:block;
  margin:3.81cqw 0;
  padding:4.28cqw;
  border-radius:4.76cqw;
  font-size:3.81cqw;
  line-height:1.35
}
.canonical-guest-screen .owner-home-view .home-important-notice strong{margin-bottom:1.43cqw;font-size:4.28cqw}
.canonical-guest-screen .back{gap:2.86cqw;padding:1.9cqw 0 4.28cqw;font-size:5cqw}
.canonical-guest-screen .back svg{width:5.71cqw;height:5.71cqw}
.canonical-guest-screen .guest-section-title{gap:3.81cqw;margin-bottom:5.71cqw}
.canonical-guest-screen .guest-section-title h2{font-size:10.5cqw!important;line-height:1!important}
.canonical-guest-screen .guest-fact{padding:4.76cqw 5.24cqw;margin:3.81cqw 0;border-radius:5.71cqw;font-size:4.76cqw}
.canonical-guest-screen .guest-fact> b{margin-bottom:1.9cqw;font-size:5.24cqw}
.canonical-guest-screen .copy-row{gap:2.86cqw}
.canonical-guest-screen .copy-row code{padding:3.81cqw;border-radius:3.81cqw;font-size:4.28cqw}
.canonical-guest-screen .copy-row button,
.canonical-guest-screen .guest-actions a{padding:3.33cqw 3.81cqw;border-radius:3.81cqw;font-size:4.28cqw}
.canonical-guest-screen .wifi-qr{width:min(78%,55cqw);margin:6.67cqw auto;border-width:4.28cqw;border-radius:5.24cqw}
.canonical-guest-screen .card{padding:5.24cqw;margin:3.81cqw 0;border-radius:5.71cqw}
.canonical-guest-screen .card img{width:calc(100% + 10.48cqw);margin:-5.24cqw -5.24cqw 4.76cqw}
.canonical-guest-screen .card b{font-size:6.19cqw}
.canonical-guest-screen .card p{margin:2.38cqw 0;font-size:4.76cqw;line-height:1.42}
.canonical-guest-screen .card a{padding:3.33cqw 3.81cqw;border-radius:3.81cqw;font-size:4.28cqw}

/* Home establishes the right-hand hero datum. Move only the How It Works
   product group to that datum at the existing non-stacked breakpoints. */
@media(min-width:1451px) and (min-height:821px){
  body[data-approved-page="how-it-works"] .hero-product{top:calc(100% - 773px)}
}
@media(min-width:1451px) and (max-height:820px){
  body[data-approved-page="how-it-works"] .hero-product{top:calc(100% - 670px)}
}
@media(min-width:1101px) and (max-width:1450px) and (min-height:821px){
  body[data-approved-page="how-it-works"] .hero-product{top:calc(100% - 738px)}
}
@media(min-width:1101px) and (max-width:1450px) and (max-height:820px){
  body[data-approved-page="how-it-works"] .hero-product{top:calc(100% - 670px)}
}
@media(min-width:801px) and (max-width:1100px){
  body[data-approved-page="how-it-works"] .hero-product{top:calc(100% - 650px)}
}

/* Approved-page mobile navigation. Desktop and tablet headers retain their
   existing markup and presentation; the compact menu is narrow-mobile only. */
@media(max-width:800px){
  body[data-approved-page] .site-header>.header-cta{display:none}
  body[data-approved-page] .site-header>.approved-mobile-menu-button{
    display:block;
    justify-self:end;
  }
  body[data-approved-page] .site-header>.approved-mobile-nav{
    position:absolute;
    left:0;
    right:0;
    top:100%;
    z-index:30;
    padding:8px 22px 18px;
    background:#fffdf9;
    border-top:1px solid rgba(20,20,16,.08);
    border-bottom:1px solid rgba(20,20,16,.1);
    box-shadow:0 14px 28px rgba(35,27,20,.12);
  }
}

@media(max-width:620px){
  /* The approved How It Works product pair stacks only on narrow mobile so
     neither real shared component is squeezed into a half-width column. */
  body[data-approved-page="how-it-works"] .hero-product{
    flex-direction:column;
    align-items:center;
    gap:18px;
  }
  body[data-approved-page="how-it-works"] .owner-placeholder.approved-owner-host{
    width:100%;
    height:430px;
  }
  body[data-approved-page="how-it-works"] .hero-phone.approved-product-phone{
    width:min(100%,320px);
    height:auto!important;
  }

  /* Keep the approved handwritten asset, but restore its supporting scale
     and proximity to the Demo phone on narrow mobile. */
  body[data-approved-page="demo"] .hero-note-image{
    width:min(190px,52vw);
    margin:10px auto 18px;
  }
}

