/* Resident Assist, shared styles.
   Lifted from the original inline block in index.html so every page shares one
   copy. az.html deliberately keeps its own inline styles: it is a campaign page
   with its own tracking and must not move when this file changes. */

:root{
  /* brand constants, the same in both themes */
  --blue:#00A7E1; --yellow:#FFC629; --green:#93D500; --navy:#0E3A54;

  /* light theme */
  color-scheme:light;
  --bg:#fff; --surface:#fff; --tint:#F2FAFE; --line:#DCEBF4;
  --heading:#0E3A54; --body:#33424E; --muted:#5B6B77; --accent:#00A7E1;
  --footer-bg:#0E3A54; --footer-fg:#CFE3EF; --footer-brand:#fff;
  --shadow:rgba(14,58,84,.18);

  /* dark values, held inert until one of the two rules below switches them in */
  --d-bg:#0B1620; --d-surface:#132430; --d-tint:#101D26; --d-line:#284152;
  --d-heading:#EAF4FA; --d-body:#C6D6E0; --d-muted:#94A9B7; --d-accent:#4CC8F2;
  --d-footer-bg:#132430; --d-footer-fg:#B7CCD9; --d-footer-brand:#fff;
  --shadow-dark:rgba(0,0,0,.5);
}
/* the system asked for dark, and the visitor hasn't overridden it */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:var(--d-bg); --surface:var(--d-surface); --tint:var(--d-tint); --line:var(--d-line);
    --heading:var(--d-heading); --body:var(--d-body); --muted:var(--d-muted); --accent:var(--d-accent);
    --footer-bg:var(--d-footer-bg); --footer-fg:var(--d-footer-fg); --footer-brand:var(--d-footer-brand);
    --shadow:var(--shadow-dark);
  }
}
/* the visitor picked dark from the toggle */
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:var(--d-bg); --surface:var(--d-surface); --tint:var(--d-tint); --line:var(--d-line);
  --heading:var(--d-heading); --body:var(--d-body); --muted:var(--d-muted); --accent:var(--d-accent);
  --footer-bg:var(--d-footer-bg); --footer-fg:var(--d-footer-fg); --footer-brand:var(--d-footer-brand);
  --shadow:var(--shadow-dark);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Nunito',-apple-system,'Segoe UI',sans-serif;color:var(--body);
     background:var(--bg);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
.wrap{max-width:660px;margin:0 auto;padding:0 22px}
/* wider column for the grids on features and pricing. The 660px default is what
   every existing page is measured against, so it does not move. */
.wrap.wide{max-width:960px}
h1,h2{color:var(--heading);line-height:1.12;letter-spacing:-.01em}
h1{font-weight:900;font-size:clamp(1.9rem,6.4vw,2.7rem)}
h2{font-weight:900;font-size:clamp(1.4rem,4.6vw,1.8rem);margin-bottom:14px}
h3{color:var(--heading);font-weight:800;font-size:1.05rem;line-height:1.25}
p{margin-bottom:12px}
section{padding:44px 0}
.tinted{background:var(--tint)}
.skip{position:absolute;left:-9999px;top:0;background:var(--yellow);color:var(--navy);
      font-weight:900;padding:10px 16px;border-radius:0 0 10px 0;z-index:50;text-decoration:none}
.skip:focus{left:0}

/* header */
header{padding:16px 0;border-bottom:3px solid var(--yellow)}
/* The header bar sizes itself. It deliberately does not use .wrap: the logo, the
   nav, and the CTA hold the same line on every page no matter how wide that
   page's content column is. It runs wider than the 960px content column because
   the centered nav below needs room for the widest header CTA on either side. */
header>.bar{max-width:1040px;margin:0 auto;padding:0 22px;
     display:flex;align-items:center;justify-content:space-between;gap:12px}
header .actions{display:flex;align-items:center;gap:10px}
.logo img{height:54px;width:auto;display:block}
.btn{display:inline-block;background:var(--yellow);color:var(--navy);font-weight:900;
     text-decoration:none;border-radius:999px;padding:13px 24px;font-size:1.02rem;
     box-shadow:0 2px 0 var(--shadow)}
.btn:hover{filter:brightness(1.04)}
.btn:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.btn.small{padding:9px 16px;font-size:.9rem}
/* The secondary CTA. Never the same weight as .btn: whichever action is primary
   on a page wears the yellow, and the other one wears this. */
.btn.ghost{background:transparent;color:var(--heading);border:2px solid var(--line);
     box-shadow:none;padding:11px 22px}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent);filter:none}
.btn.ghost.small{padding:7px 14px}
.ctarow{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:4px}

/* Nav. One <details> is both the inline desktop links and the small-screen
   menu. It ships with the open attribute set, so the links are there even with
   JS off; theme.js collapses it once it knows the screen is narrow. */
.menu{position:relative}
.menu>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;
     justify-content:center;width:40px;height:40px;border:2px solid var(--line);
     border-radius:999px;color:var(--heading);background:var(--surface)}
.menu>summary::-webkit-details-marker{display:none}
.menu>summary:hover{border-color:var(--accent);color:var(--accent)}
.menu>summary:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.menu>summary svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.menu nav{display:none;position:absolute;right:0;top:calc(100% + 10px);z-index:40;
     min-width:190px;background:var(--surface);border:2px solid var(--line);
     border-radius:14px;padding:8px;box-shadow:0 10px 24px var(--shadow)}
.menu[open] nav{display:block}
.menu nav a{display:block;padding:9px 12px;border-radius:9px;text-decoration:none;
     color:var(--heading);font-weight:800;font-size:.95rem}
.menu nav a:hover{background:var(--tint);color:var(--accent)}
.menu nav a[aria-current="page"]{color:var(--accent)}
@media (min-width:900px){
  /* Past this width the menu is always open and inline, so the disclosure
     button and its popover framing get out of the way. */
  .menu>summary{display:none}
  .menu nav,.menu[open] nav{display:flex;position:static;gap:2px;min-width:0;
     background:none;border:0;border-radius:0;padding:0;box-shadow:none}
  .menu nav a{padding:8px 10px}
  /* The nav holds one position on every page. Under plain space-between the
     leftover width was split into the two gaps, so pricing's short "Sign up"
     CTA pushed the links sideways relative to every other page. Here the nav
     packs against the logo instead, which is all this width has room for. */
  .menu{margin-right:auto}
}
@media (min-width:1024px){
  /* Wide enough to center the nav outright: equal side columns park it in the
     middle of the bar. Below this the columns would squeeze the longest header
     CTA onto two lines, which is why the centering waits until here. */
  header>.bar{display:grid;grid-template-columns:1fr auto 1fr}
  header>.bar>.logo{justify-self:start}
  header .actions{justify-self:end}
  .menu{margin-right:0}
}

/* theme toggle */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
     padding:0;border:2px solid var(--line);border-radius:999px;background:var(--surface);
     color:var(--heading);cursor:pointer;flex:none}
.theme-toggle:hover{border-color:var(--accent);color:var(--accent)}
.theme-toggle:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.theme-toggle svg{width:20px;height:20px;display:block;fill:none;stroke:currentColor;
     stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* show the icon for the theme the button switches TO */
.theme-toggle .icon-sun{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-toggle .icon-moon{display:none}
  :root:not([data-theme="light"]) .theme-toggle .icon-sun{display:block}
}
:root[data-theme="dark"] .theme-toggle .icon-moon{display:none}
:root[data-theme="dark"] .theme-toggle .icon-sun{display:block}
/* only while the toggle is being used, so page load stays instant */
.theme-anim *{transition:background-color .22s ease,border-color .22s ease,color .22s ease}

/* hero */
.hero{padding:52px 0 46px}
.kicker{color:var(--accent);font-weight:800;text-transform:uppercase;
        letter-spacing:.09em;font-size:.82rem;margin-bottom:10px}
.hero p.sub{font-size:1.12rem;margin:16px 0 24px;max-width:34em}
.micro{font-size:.9rem;color:var(--muted);margin-top:10px}
.lead{font-size:1.08rem}

/* 15 / 15 / 15 */
.fifteen{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:6px}
.fcard{background:var(--surface);border:2px solid var(--line);border-radius:16px;
       padding:18px 10px;text-align:center}
.fcard .num{font-weight:900;color:var(--accent);font-size:clamp(1.9rem,7vw,2.6rem);line-height:1}
.fcard .num small{font-size:.55em;font-weight:900}
.fcard .lbl{font-weight:800;color:var(--heading);font-size:.86rem;margin-top:4px}
.fcard .det{font-size:.78rem;color:var(--muted);margin-top:2px}

/* three-up columns and the feature grid, both on the .fcard box treatment */
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:6px}
.cols .col{background:var(--surface);border:2px solid var(--line);border-radius:16px;padding:20px 18px}
.cols .col h3{margin-bottom:6px}
.cols .col p{margin-bottom:0;font-size:.97rem}
.featgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:6px 0 18px}
.featgrid .item{background:var(--surface);border:2px solid var(--line);border-radius:14px;
       padding:14px 16px;font-weight:800;color:var(--heading);font-size:.95rem}

/* check bullets */
ul.checks{list-style:none;margin:8px 0 4px}
ul.checks li{padding-left:34px;position:relative;margin-bottom:12px}
ul.checks li img{position:absolute;left:0;top:2px;width:24px;height:24px}
ul.checks b{color:var(--heading)}

/* steps */
ol.steps{list-style:none;counter-reset:s;margin-top:6px}
ol.steps li{counter-increment:s;position:relative;padding:0 0 22px 54px}
ol.steps li::before{content:counter(s);position:absolute;left:0;top:-2px;width:38px;height:38px;
    background:var(--blue);color:#fff;font-weight:900;border-radius:12px;
    display:flex;align-items:center;justify-content:center;font-size:1.05rem}
ol.steps li:not(:last-child)::after{content:"";position:absolute;left:18px;top:40px;bottom:4px;
    width:3px;background:var(--line);border-radius:2px}
ol.steps b{color:var(--heading)}

/* pricing */
.price{background:var(--surface);border:2px solid var(--line);border-radius:20px;padding:26px 22px;text-align:center}
.price .big{font-weight:900;color:var(--heading);font-size:clamp(2.2rem,9vw,3rem);line-height:1}
.price .big span{color:var(--accent)}
.price .per{font-weight:800;color:var(--muted);font-size:.95rem;margin-top:2px}
.deal{margin-top:16px;background:var(--tint);border-radius:14px;padding:14px 16px;font-size:.98rem;text-align:left}

/* bed calculator */
.calc{background:var(--surface);border:2px solid var(--line);border-radius:20px;padding:24px 22px;margin-top:18px}
.calc label{display:block;font-weight:800;color:var(--heading);margin-bottom:8px}
.calc input[type=range]{width:100%;accent-color:var(--accent);margin:6px 0 2px;display:block}
.calc .beds{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.calc input[type=number]{width:104px;font:inherit;font-weight:800;color:var(--heading);
     background:var(--bg);border:2px solid var(--line);border-radius:10px;padding:9px 12px}
.calc input:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.calc .out{font-weight:900;color:var(--heading);font-size:clamp(1.8rem,7vw,2.4rem);
     line-height:1.1;margin-top:18px}
.calc .out span{color:var(--accent)}
.calc .outnote{font-size:.95rem;color:var(--muted);font-weight:800;margin-top:2px}

/* FAQ */
.faq{border:2px solid var(--line);border-radius:14px;background:var(--surface);margin-bottom:10px}
.faq summary{cursor:pointer;list-style:none;padding:16px 18px;font-weight:800;
     color:var(--heading);display:flex;justify-content:space-between;align-items:center;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.4rem;font-weight:900;color:var(--accent);line-height:1}
.faq[open] summary::after{content:"\2212"}
.faq summary:focus-visible{outline:3px solid var(--accent);outline-offset:-3px;border-radius:12px}
.faq .ans{padding:0 18px 16px}
.faq .ans p:last-child{margin-bottom:0}

/* Screenshot placeholders. Swap the whole block for an <img> when the real
   capture lands. The caption text is the starting point for its alt. */
.shot{background:var(--tint);border:2px dashed var(--line);border-radius:16px;
     padding:34px 20px;text-align:center;color:var(--muted);font-weight:800;
     font-size:.9rem;margin-top:14px}
/* A real screenshot drops the dashed placeholder box for a solid frame. The
   captures are light-only UI, so the frame stays white in both themes. */
img.shot{display:block;width:100%;height:auto;padding:0;background:#fff;
     border-style:solid;border-color:#DCEBF4}
.feature{padding:34px 0;border-top:2px solid var(--line)}
.feature:first-of-type{border-top:0}

/* booking */
#book .embed{position:relative;min-height:644px;margin-top:18px;border:2px solid var(--line);
     border-radius:16px;overflow:hidden;background:#fff}
/* the Bookings page is light-only, so keep its frame white in both themes */
#book iframe{display:block;width:100%;height:640px;border:0;color-scheme:light;
     position:relative;z-index:1;opacity:0;transition:opacity .25s ease}
#book iframe.ready{opacity:1}
/* Sits behind the frame until it loads. The box is white in both themes, so
   these colors are the light-theme literals rather than the theme vars. */
.embed-skeleton{display:none;position:absolute;inset:0;align-items:center;justify-content:center;
     gap:10px;color:#5B6B77;font-weight:800;font-size:.95rem}
.js .embed-skeleton{display:flex}
.embed.ready .embed-skeleton{display:none}
.embed-skeleton .spin{width:18px;height:18px;border:3px solid #DCEBF4;border-top-color:#00A7E1;
     border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.nojs{padding:28px;text-align:center;color:#33424E}
.fallback{font-size:.95rem;margin-top:14px}
.fallback a,.textlink{color:var(--accent);font-weight:800;text-decoration:none}
.fallback a:hover,.textlink:hover{text-decoration:underline}

footer{background:var(--footer-bg);color:var(--footer-fg);padding:34px 0;margin-top:20px;font-size:.9rem}
footer .brand{color:var(--footer-brand);font-weight:900;font-size:1.05rem}
footer .reach{color:var(--yellow);font-weight:800}
footer a{color:var(--footer-fg)}
footer .legal{margin-top:4px}
.footlinks{display:flex;flex-wrap:wrap;gap:6px 18px;margin:16px 0 14px;padding:14px 0;
     border-top:1px solid rgba(255,255,255,.16);border-bottom:1px solid rgba(255,255,255,.16)}
.footlinks a{font-weight:800;text-decoration:none}
.footlinks a:hover{text-decoration:underline}

@media (max-width:420px){ .logo img{height:46px} .fifteen{gap:8px} }
/* At 320px the header row is the one thing that still will not fit, and an
   overflowing row scrolls the whole page sideways. Buy the width back from the
   logo, the gaps, and the button padding rather than from the label. */
@media (max-width:400px){
  .logo img{height:42px}
  header>.bar{gap:8px}
  header .actions{gap:8px}
  header .btn.small{padding:9px 13px}
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .theme-anim *{transition:none}
  #book iframe{transition:none} .embed-skeleton .spin{animation:none} }

/* The header CTA is the widest thing in the bar. Below this the full label
   pushes the row past the viewport and the whole page scrolls sideways, so the
   button drops to "Book a call". The in-page CTAs keep the full wording. */
@media (max-width:620px){ .nb{display:none} }