:root {
  --blue:#0757d9; --blue-dark:#043a96; --orange:#ff7900; --text:#14223a; --muted:#667085;
}
* { box-sizing:border-box; }
html,body { min-height:100%; }
body {
  margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text); background:radial-gradient(circle at 50% 0,#f8fbff 0,#edf4ff 46%,#e7efff 100%);
  display:grid; place-items:center; padding:24px;
}
.doorbell-card,.landing-card {
  width:min(100%,560px); background:#fff; border-radius:32px; padding:34px 28px 40px; text-align:center;
  box-shadow:0 18px 70px rgba(26,63,130,.18); border:1px solid rgba(8,85,217,.08);
}
.landing-card { width:min(100%,760px); }
.brand-logo { width:min(100%,440px); height:auto; display:block; margin:0 auto 22px; }
.brand-logo.compact { width:min(78%,380px); }
.visitor-bottom-logo { width:min(39%,190px); height:auto; display:block; margin:32px auto 0; }
h1 { font-size:clamp(28px,6vw,44px); line-height:1.05; margin:4px 0 12px; }
.subtitle,.landing-card p { color:var(--muted); font-size:18px; line-height:1.55; margin:0 auto 24px; max-width:540px; }
.ring-button {
  appearance:none; border:0; background:transparent; width:min(78vw,300px); height:min(78vw,300px);
  border-radius:34%; padding:0; cursor:pointer; transition:transform .12s ease,filter .12s ease;
  filter:drop-shadow(0 18px 24px rgba(2,48,135,.25));
}
.ring-button img { display:block; width:100%; height:100%; border-radius:25%; }
.ring-button:hover { transform:translateY(-2px) scale(1.01); }
.ring-button:active { transform:scale(.965); }
.ring-button:disabled { cursor:default; filter:grayscale(.15) opacity(.72); }

.ring-status { min-height:34px; margin-top:24px; color:var(--blue-dark); font-size:20px; font-weight:700; }
.ring-status.error { color:#b42318; }
@media (max-width:480px) { body{padding:14px}.doorbell-card{padding:26px 18px 32px;border-radius:26px} }

/* Privacy policy */
body.privacy-page {
  display:block;
  padding:24px;
}
.privacy-card {
  width:min(100%,900px);
  margin:0 auto;
  background:#fff;
  border-radius:28px;
  padding:34px 38px 42px;
  box-shadow:0 18px 70px rgba(26,63,130,.14);
  border:1px solid rgba(8,85,217,.08);
  text-align:left;
}
.privacy-logo {
  width:min(100%,360px);
  margin:8px auto 26px;
}
.privacy-card h1 {
  text-align:center;
  margin-bottom:8px;
}
.privacy-card h2 {
  font-size:24px;
  line-height:1.25;
  margin:32px 0 10px;
}
.privacy-card h3 {
  font-size:19px;
  line-height:1.35;
  margin:22px 0 6px;
}
.privacy-card p,
.privacy-card li {
  font-size:16px;
  line-height:1.65;
}
.privacy-card ul {
  padding-left:24px;
}
.privacy-updated {
  text-align:center;
  color:var(--muted);
  margin:0 0 28px;
}
.back-link {
  display:inline-block;
  color:#fff;
  background:var(--blue);
  padding:11px 16px;
  border-radius:12px;
  text-decoration:none;
  font-weight:700;
}
.back-link:hover {
  background:var(--blue-dark);
}
.back-link-bottom {
  margin-top:28px;
}
.site-footer-link {
  display:inline-block;
  margin-top:8px;
  color:var(--blue);
  font-weight:600;
}
@media (max-width:600px) {
  body.privacy-page { padding:12px; }
  .privacy-card { padding:24px 20px 30px; border-radius:22px; }
  .privacy-card h2 { font-size:21px; }
}

/* Main website shell */
body.site-page {
  display:block;
  min-height:100vh;
  margin:0;
  padding:0;
  background:#fff;
  color:#14223a;
}
.site-shell {
  min-height:100vh;
}
.site-sidebar {
  position:fixed;
  inset:0 auto 0 0;
  width:280px;
  height:100vh;
  height:100dvh;
  background:#fff;
  border-right:1px solid #e8edf5;
  padding:32px 26px 26px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  z-index:20;
}
.sidebar-logo-link { display:block; text-decoration:none; }
.sidebar-logo {
  display:block;
  width:100%;
  height:auto;
  margin:0 0 40px;
}
.site-nav { display:flex; flex-direction:column; gap:8px; }
.site-nav-link {
  display:block;
  color:#384860;
  text-decoration:none;
  font-size:16px;
  font-weight:700;
  padding:12px 14px;
  border-radius:12px;
  transition:background .18s ease,color .18s ease,transform .18s ease;
}
.site-nav-link:hover { background:#f3f7ff; color:#0757d9; transform:translateX(2px); }
.site-nav-link.active { background:#eaf2ff; color:#0757d9; }
.sidebar-bottom { color:#7a8698; font-size:13px; line-height:1.55; }
.sidebar-contact,
.sidebar-privacy {
  display:block;
  width:max-content;
  max-width:100%;
  color:#52627a;
  text-decoration:none;
  font-weight:700;
}
.sidebar-contact {
  margin-bottom:8px;
  overflow-wrap:anywhere;
}
.sidebar-privacy { margin-bottom:14px; }
.sidebar-contact:hover,
.sidebar-privacy:hover { color:#0757d9; }
.sidebar-copyright { border-top:1px solid #edf0f5; padding-top:14px; }
.site-main {
  margin-left:280px;
  min-height:100vh;
  padding:56px clamp(28px,5vw,82px) 72px;
  background:#fff;
}
.home-top-banner {
  width:100%;
  margin:0 0 56px;
}
.home-top-banner img {
  display:block;
  width:100%;
  height:auto;
}
.home-hero {
  max-width:1180px;
  margin:0 auto;
  min-height:430px;
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);
  gap:60px;
  align-items:center;
  padding:22px 0 66px;
  border-bottom:1px solid #edf0f5;
}
.eyebrow,.section-kicker {
  display:inline-block;
  color:#0757d9;
  font-size:13px;
  line-height:1.2;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.home-hero h1,.history-hero h1 {
  max-width:760px;
  margin:13px 0 20px;
  font-size:clamp(42px,6vw,76px);
  line-height:.98;
  letter-spacing:-.045em;
  color:#14223a;
}
.hero-text {
  max-width:750px;
  margin:0;
  color:#5c687b;
  font-size:clamp(18px,2vw,22px);
  line-height:1.6;
}
.hero-points { display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; }
.hero-points span {
  background:#f6f8fb;
  border:1px solid #e7ebf1;
  color:#33445d;
  font-size:14px;
  font-weight:700;
  padding:9px 12px;
  border-radius:999px;
}
.hero-visual { display:grid; place-items:center; }
.hero-visual img {
  width:min(100%,300px);
  height:auto;
  border-radius:28%;
  filter:drop-shadow(0 24px 32px rgba(7,87,217,.18));
}
.home-doorbell-demo {
  max-width:1180px;
  margin:58px auto 0;
  padding:38px 42px;
  border:1px solid #e8edf5;
  border-radius:28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  background:#fff;
  box-shadow:0 14px 45px rgba(21,43,77,.06);
}
.home-doorbell-demo h2,.section-heading h2,.history-promo h2,.history-doorbell-widget h2 {
  margin:7px 0 8px;
  font-size:clamp(28px,3vw,40px);
  line-height:1.12;
  letter-spacing:-.025em;
}
.home-doorbell-demo p,.history-promo p,.history-doorbell-widget p { margin:0; color:#667085; font-size:17px; }
.demo-action,.history-demo-action { display:flex; align-items:center; gap:18px; flex-shrink:0; }
.demo-bell-button {
  appearance:none;
  border:0;
  width:108px;
  height:108px;
  border-radius:50%;
  background:linear-gradient(145deg,#ffad28,#ff7200);
  color:#fff;
  cursor:pointer;
  display:grid;
  place-items:center;
  box-shadow:0 8px 0 #d85b00,0 18px 32px rgba(255,121,0,.25);
  transition:transform .12s ease,box-shadow .12s ease,filter .15s ease;
}
.demo-bell-button svg { width:43px; height:43px; }
.demo-bell-button:hover { filter:brightness(1.04); }
.demo-bell-button:active,.demo-bell-button.is-ringing { transform:translateY(5px); box-shadow:0 3px 0 #d85b00,0 9px 18px rgba(255,121,0,.20); }
.demo-bell-button.is-ringing svg { animation:bell-wiggle .55s ease; }
.demo-bell-button.small { width:86px; height:86px; }
.demo-bell-button.small svg { width:34px; height:34px; }
.demo-status { min-width:104px; color:#0757d9; font-size:15px; font-weight:800; }
@keyframes bell-wiggle { 0%,100%{transform:rotate(0)} 20%{transform:rotate(-12deg)} 40%{transform:rotate(10deg)} 60%{transform:rotate(-7deg)} 80%{transform:rotate(4deg)} }
.how-it-works { max-width:1180px; margin:72px auto 0; }
.section-heading { margin-bottom:24px; }
.steps-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.step-card {
  border:1px solid #e8edf5;
  border-radius:22px;
  padding:26px;
  background:#fff;
}
.step-number {
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border-radius:12px;
  color:#fff;
  background:#0757d9;
  font-weight:900;
  margin-bottom:22px;
}
.step-card h3 { margin:0 0 8px; font-size:22px; }
.step-card p { margin:0; color:#667085; line-height:1.6; }
.history-promo {
  max-width:1180px;
  margin:72px auto 0;
  padding:38px 42px;
  background:#f7f9fc;
  border:1px solid #edf0f5;
  border-radius:28px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:34px;
}
.history-promo p { max-width:720px; line-height:1.65; }
.primary-link-button {
  display:inline-block;
  white-space:nowrap;
  color:#fff;
  background:#0757d9;
  text-decoration:none;
  padding:14px 18px;
  border-radius:13px;
  font-weight:800;
  transition:background .18s ease,transform .18s ease;
}
.primary-link-button:hover { background:#043a96; transform:translateY(-1px); }

/* History of Doorbell */
.history-main { max-width:none; }
.history-hero { max-width:960px; margin:0 auto; padding:18px 0 42px; text-align:left; }
.history-hero h1 { font-size:clamp(40px,5.5vw,68px); }
.history-hero p { margin:0; color:#667085; font-size:20px; }
.history-doorbell-widget {
  max-width:960px;
  margin:0 auto 34px;
  border:1px solid #e8edf5;
  border-radius:24px;
  padding:30px 34px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px;
  box-shadow:0 10px 32px rgba(21,43,77,.05);
}
.filter-controls {
  max-width:960px;
  margin:0 auto 28px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.filter-btn {
  appearance:none;
  border:1px solid #dfe5ee;
  background:#fff;
  color:#40506a;
  padding:9px 15px;
  border-radius:999px;
  cursor:pointer;
  font-weight:800;
  transition:all .18s ease;
}
.filter-btn:hover,.filter-btn.active { background:#0757d9; border-color:#0757d9; color:#fff; }
.history-timeline { max-width:960px; margin:0 auto; position:relative; padding-left:28px; }
.history-timeline::before {
  content:"";
  position:absolute;
  left:6px;
  top:10px;
  bottom:20px;
  width:2px;
  background:#e7ecf4;
}
.history-timeline-item {
  position:relative;
  margin:0 0 22px;
  padding:26px 28px;
  border:1px solid #e8edf5;
  border-radius:20px;
  background:#fff;
  box-shadow:0 8px 26px rgba(21,43,77,.045);
}
.history-timeline-item::before {
  content:"";
  position:absolute;
  left:-28px;
  top:35px;
  width:14px;
  height:14px;
  border-radius:50%;
  background:#ff7900;
  border:4px solid #fff;
  box-shadow:0 0 0 2px #ff7900;
}
.history-timeline-item.hidden { display:none; }
.era-tag {
  display:inline-block;
  background:#fff1e6;
  color:#c75c00;
  padding:5px 9px;
  border-radius:8px;
  font-size:12px;
  line-height:1;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.04em;
  margin-bottom:12px;
}
.history-timeline-item h2 { margin:0 0 8px; font-size:25px; line-height:1.25; color:#14223a; }
.history-timeline-item p,.history-timeline-item li { font-size:16px; line-height:1.7; color:#59677b; }
.history-timeline-item p { margin:0; }
.history-timeline-item ul { margin:12px 0 0; padding-left:21px; }

@media (max-width:900px) {
  .site-sidebar {
    position:relative;
    width:100%;
    height:auto;
    padding:20px 22px 16px;
    border-right:0;
    border-bottom:1px solid #e8edf5;
    display:block;
  }
  .sidebar-top { display:flex; align-items:center; gap:24px; }
  .sidebar-logo { width:210px; margin:0; }
  .site-nav { flex-direction:row; gap:4px; flex-wrap:wrap; margin-left:auto; }
  .site-nav-link { padding:9px 11px; font-size:14px; }
  .sidebar-bottom { display:none; }
  .site-main { margin-left:0; padding:42px 24px 56px; }
  .home-top-banner { margin-bottom:44px; }
  .home-hero { grid-template-columns:1fr; min-height:0; gap:38px; }
  .hero-visual { justify-content:start; }
  .hero-visual img { width:190px; }
  .home-doorbell-demo,.history-promo,.history-doorbell-widget { align-items:flex-start; }
  .steps-grid { grid-template-columns:1fr; }
}
@media (max-width:640px) {
  .site-sidebar { padding:16px 16px 14px; }
  .sidebar-top { display:block; }
  .sidebar-logo { width:190px; margin-bottom:13px; }
  .site-nav { margin:0; }
  .site-nav-link { flex:1 1 auto; text-align:center; }
  .site-main { padding:32px 16px 46px; }
  .home-top-banner { margin-bottom:36px; }
  .home-hero { padding-top:8px; padding-bottom:46px; }
  .home-hero h1,.history-hero h1 { font-size:clamp(38px,13vw,56px); }
  .hero-text { font-size:18px; }
  .home-doorbell-demo,.history-promo,.history-doorbell-widget { padding:26px 22px; flex-direction:column; }
  .demo-action,.history-demo-action { width:100%; justify-content:flex-start; }
  .history-promo .primary-link-button { width:100%; text-align:center; }
  .history-timeline { padding-left:20px; }
  .history-timeline-item { padding:22px 20px; }
  .history-timeline-item::before { left:-20px; }
}