/* v2 additions: the comparison section, the TV/tablet browser stage and the
   Premium note under the calendar-sync band. Load after devices.css. */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Calendar sync is Premium; say so quietly. */
.sync-band{flex-wrap:wrap;row-gap:14px}
.sync-band p.sync-premium{flex-basis:100%;text-align:center;font-size:12px;color:var(--readable-muted,#5b6b7e);line-height:1.5;margin-top:-4px}

/* Website calendar on a TV, with a tablet in front. */
.browser-stage{position:relative;padding:46px 9% 64px 6%;background:radial-gradient(ellipse at 40% 35%,#fbfaf6 0,#f3f0e9 70%)}
.browser-stage .browser-tv{width:100%}
.browser-stage .browser-tablet{position:absolute;width:29%;right:3.5%;bottom:26px;transform:rotate(3deg);box-shadow:inset 0 0 0 1.5px #3b4047,0 24px 34px -18px #263d5773}
@media(max-width:1000px){.browser-stage{padding:34px 8% 48px 5%}.browser-stage .browser-tablet{bottom:18px}}
@media(max-width:700px){.browser-stage{padding:22px 16px 40px}.browser-stage .browser-tablet{width:40%;right:10px;bottom:12px;transform:rotate(3deg)}}

/* How HomeWeek compares */
.compare-section{background:#f8fafb;border-top:1px solid #edf0f1}
.compare-section .section-heading{margin-bottom:40px}
.compare-wrap{max-width:1120px;margin:0 auto;background:#fff;border:1px solid #e2e7e8;border-radius:22px;overflow:hidden}
.compare-table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:14px;line-height:1.55;color:#52677d}
.compare-table thead th{font-size:10px;letter-spacing:1.4px;text-transform:uppercase;font-weight:700;color:var(--readable-blue,#3b658e);text-align:left;padding:20px 18px 16px;border-bottom:1px solid #dfe7ee;vertical-align:bottom}
.compare-table thead th:first-child{width:17%}
.compare-table thead th:nth-child(2){width:15%}.compare-table thead th:nth-child(3){width:22%}.compare-table thead th:nth-child(4){width:17%}.compare-table thead th:nth-child(5){width:14%}
.compare-table tbody th,.compare-table td{padding:20px 18px;text-align:left;vertical-align:top;border-bottom:1px solid #edf0f3}
.compare-table tbody tr:last-child th,.compare-table tbody tr:last-child td{border-bottom:0}
.compare-table td strong{font-weight:600;color:var(--ink)}
.compare-name{display:block;font-size:16px;font-weight:600;color:var(--ink);letter-spacing:-.2px;line-height:1.35}
.compare-sub{display:block;font-size:12px;font-weight:400;color:var(--readable-muted,#5b6b7e);margin-top:4px}
.compare-table tr.is-homeweek th,.compare-table tr.is-homeweek td{background:#edf4fb}
.compare-table tr.is-homeweek .compare-name{color:var(--blue-dark)}
.compare-points{list-style:none;max-width:1120px;margin:28px auto 0;display:flex;flex-wrap:wrap;justify-content:center;gap:12px 32px;font-size:14px;color:var(--readable-muted,#5b6b7e);line-height:1.6}
.compare-points li{display:flex;align-items:flex-start;gap:9px}
.compare-points .icon{width:15px;height:15px;color:#6e98b7;margin-top:4px}
.compare-note{max-width:760px;margin:26px auto 0;text-align:center;font-size:12px;line-height:1.7;color:var(--readable-muted,#5b6b7e)}
.compare-note a{color:var(--blue-dark);text-decoration:underline;text-underline-offset:3px}
.compare-note a:hover{color:var(--ink)}

/* Tablet and phone: one card per option, labels beside each fact. */
@media(max-width:900px){
  .compare-wrap{background:none;border:0;border-radius:0;overflow:visible}
  .compare-table,.compare-table tbody,.compare-table tr,.compare-table th,.compare-table td{display:block;width:auto}
  .compare-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .compare-table tbody{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  .compare-table tbody tr{background:#fff;border:1px solid #e2e7e8;border-radius:20px;padding:6px 20px 10px}
  .compare-table tbody tr.is-homeweek{background:#edf4fb;border-color:#b9cfe4}
  .compare-table tbody th{padding:16px 0 12px;border-bottom:1px solid #dfe7ee}
  .compare-table tr.is-homeweek th,.compare-table tr.is-homeweek td{background:none}
  .compare-table td{display:grid;grid-template-columns:minmax(0,40%) minmax(0,1fr);gap:12px;padding:11px 0;border-bottom:1px solid #edf0f3;font-size:13px}
  .compare-table tr.is-homeweek td{border-bottom-color:#d6e3ef}
  .compare-table td:last-child{border-bottom:0}
  .compare-table td::before{content:attr(data-label);font-size:9px;letter-spacing:1.1px;text-transform:uppercase;font-weight:700;color:var(--readable-blue,#3b658e);line-height:1.6;padding-top:2px}
}
@media(max-width:700px){
  .compare-table tbody{grid-template-columns:minmax(0,1fr);gap:16px}
  .compare-points{flex-direction:column;align-items:flex-start;gap:10px;font-size:13px;max-width:420px}
  .compare-note{text-align:left;max-width:420px}
  .compare-section .section-heading br{display:none}
  .compare-section .section-heading h2 br{display:inline}
}

/* Fix: the FAQ grid's percentage columns plus its gap were 3px wider than
   the page between 1001px and 1249px. Fractions keep the same proportions. */
.faq-layout{grid-template-columns:minmax(0,38fr) minmax(0,62fr)}
@media(max-width:1250px){.faq-layout{grid-template-columns:minmax(0,36fr) minmax(0,64fr)}}
@media(max-width:1000px){.faq-layout{grid-template-columns:minmax(0,35fr) minmax(0,65fr)}}
@media(max-width:700px){.faq-layout{grid-template-columns:minmax(0,1fr)}}