@charset "UTF-8";
:root {
  --blue:#235adc;
  --blue-dark:#1945b0;
  --ink:#173333;
  --muted:#526462;
  --line:#d8dfd9;
  --paper:#f7f6f2;
  --surface:#fff;
  --white:#fff;
  --sage:#e7eee5;
  --sky:#eaf0fc;
  --pale:#eaf0fc;
  --green:#267454;
  --radius:18px;
  --shadow:0 12px 40px #183c680c;
  font-family:"Segoe UI",Arial,sans-serif;
  color:var(--ink);
  background:var(--paper);
  font-synthesis:none
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  font-size:17px;
  line-height:1.65
}
a {
  color:var(--blue);
  text-decoration:none
}
a:hover {
  text-decoration:underline
}
button,input,select,textarea {
  font:inherit
}
button,a,input,select,summary {
  -webkit-tap-highlight-color:transparent
}
button {
  cursor:pointer
}
button:disabled {
  cursor:wait;
  opacity:.6
}
h1,h2,h3,p {
  margin-top:0
}
h1,h2,h3 {
  line-height:1.2;
  letter-spacing:-.04em
}
h1 {
  font-size:52px;
  font-weight:700;
  margin-bottom:24px
}
h2 {
  font-size:34px;
  font-weight:650
}
h3 {
  font-size:20px;
  font-weight:650
}
p {
  color:var(--muted)
}
svg {
  display:inline-block;
  flex-shrink:0
}
.icon {
  width:22px;
  height:22px;
  vertical-align:middle
}
.container {
  width:min(1200px,calc(100% - 80px));
  margin-inline:auto
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:48px;
  padding:12px 25px;
  border:1px solid var(--blue);
  border-radius:8px;
  background:var(--blue);
  color:#fff;
  font-size:14px;
  font-weight:600;
  line-height:1.45;
  text-decoration:none;
  transition:background .18s,transform .18s
}
.button:hover {
  background:var(--blue-dark);
  text-decoration:none
}
.button-secondary {
  background:#fff;
  border-color:#d6e1ef;
  color:var(--ink)
}
.button-secondary:hover {
  background:#f5f8fd
}
.button-small {
  min-height:40px;
  padding:9px 20px
}
.button-full {
  width:100%
}
.button-danger {
  color:#a22c39;
  border-color:#efc5cb;
  background:#fff
}
.button-danger:hover {
  background:#fff2f3
}
.text-button {
  border:0;
  padding:8px;
  background:none;
  color:var(--muted)
}
.text-button:hover {
  color:var(--blue)
}
.muted {
  color:var(--muted)
}
.lead {
  font-size:18px;
  line-height:1.75;
  max-width:650px
}
.eyebrow {
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:11px;
  letter-spacing:.16em;
  color:var(--blue);
  font-weight:750;
  line-height:1.6
}
.eyebrow-line {
  width:23px;
  height:2px;
  background:var(--blue)
}
.skip-link {
  position:fixed;
  left:16px;
  top:16px;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  background:white;
  padding:0;
  z-index:100
}
.skip-link:focus {
  width:auto;
  height:auto;
  clip-path:none;
  padding:12px;
  border:1px solid #7d8ea4;
  border-radius:8px
}
:focus-visible {
  outline:3px solid #1557bf;
  outline-offset:4px
}
.site-header {
  height:89px;
  border-bottom:1px solid #edf0f5;
  background:#fff
}
.header-inner {
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between
}
.brand {
  display:inline-flex;
  align-items:center;
  gap:11px;
  font-size:19px;
  color:var(--ink);
  font-weight:650;
  letter-spacing:-.04em;
  white-space:nowrap
}
.brand:hover {
  text-decoration:none
}
.brand-top {
  color:var(--blue)
}
.brand-mark {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:37px;
  width:37px;
  border-radius:11px;
  background:var(--blue);
  color:#fff
}
.brand-mark .icon {
  width:23px;
  height:23px
}
.site-nav {
  display:flex;
  align-items:center;
  gap:28px;
  font-size:13px;
  font-weight:550
}
.site-nav>a:not(.button) {
  color:var(--muted)
}
.site-nav>a[aria-current=page]:not(.button) {
  color:var(--blue)
}
.site-nav .login-link {
  margin-left:25px;
  color:var(--ink)!important
}
.nav-toggle {
  display:none;
  background:none;
  border:0;
  padding:8px;
  color:var(--ink)
}
.hero {
  background:linear-gradient(108deg,#fff 42%,#f4f8fe);
  overflow:hidden
}
.hero-grid {
  display:grid;
  grid-template-columns:1.07fr 1fr;
  align-items:center;
  gap:67px;
  padding-top:76px;
  padding-bottom:69px
}
.hero-copy .eyebrow {
  margin-bottom:25px
}
.hero h1 {
  font-size:64px;
  letter-spacing:-.06em;
  line-height:1.09;
  margin-bottom:26px
}
.hero h1 span {
  color:var(--blue)
}
.hero-description {
  font-size:16px;
  line-height:1.85;
  max-width:440px;
  margin-bottom:29px
}
.hero-actions {
  display:flex;
  gap:12px
}
.hero-price {
  display:flex;
  gap:15px;
  align-items:center;
  margin-top:27px;
  font-size:12px;
  color:var(--muted)
}
.hero-price strong {
  font-size:24px;
  color:var(--ink);
  letter-spacing:-.03em;
  white-space:nowrap
}
.hero-price strong span {
  font-size:13px;
  font-weight:400;
  letter-spacing:0
}
.price-divider {
  height:22px;
  width:1px;
  background:#d8e2ee
}
.hero-note {
  font-size:11px;
  display:flex;
  align-items:center;
  gap:7px;
  margin-top:17px;
  margin-bottom:0
}
.hero-note .icon {
  width:15px;
  height:15px;
  color:var(--blue)
}
.connection-visual {
  position:relative;
  padding:20px 0 0
}
.address-bar {
  display:flex;
  align-items:center;
  gap:9px;
  border:1px solid #dde7f4;
  background:#fff;
  padding:14px 17px;
  margin:0 22px -3px;
  position:relative;
  z-index:2;
  border-radius:10px 10px 0 0;
  box-shadow:0 -7px 24px #28599206;
  font-size:12px;
  color:var(--ink)
}
.address-bar>.icon {
  width:15px;
  height:15px;
  color:var(--blue)
}
.address-bar>span>span {
  color:var(--muted)
}
.address-protocol {
  font-size:8px;
  letter-spacing:.08em;
  margin-left:auto;
  color:var(--blue)!important;
  background:#eaf2ff;
  padding:3px 6px;
  border-radius:4px
}
.home-preview {
  padding:24px;
  border-radius:14px;
  background:#fff;
  border:1px solid #dfe7f2;
  box-shadow:0 18px 65px #1e47751a;
  position:relative;
  z-index:3
}
.preview-title {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:11px;
  font-weight:600;
  color:var(--muted);
  padding-bottom:23px
}
.example-label {
  font-size:8px;
  letter-spacing:.1em;
  color:#8190a4;
  font-weight:500
}
.home-greeting {
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:23px
}
.home-icon {
  width:43px;
  height:43px;
  border-radius:12px;
  background:#edf4ff;
  color:var(--blue);
  display:flex;
  align-items:center;
  justify-content:center
}
.home-greeting h2 {
  font-size:22px;
  letter-spacing:-.03em;
  margin-bottom:5px
}
.home-greeting p {
  font-size:11px;
  margin:0
}
.device-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:13px
}
.device-card {
  position:relative;
  border:1px solid #e5eaf2;
  background:#fbfcfe;
  border-radius:11px;
  padding:18px 17px;
  min-height:161px
}
.device-icon {
  display:flex;
  align-items:center;
  justify-content:center;
  height:34px;
  width:34px;
  border-radius:10px;
  margin-bottom:17px
}
.device-icon.warm {
  background:#fff5df;
  color:#c29a3e
}
.device-icon.blue {
  background:#eaf2ff;
  color:var(--blue)
}
.device-icon .icon {
  width:20px;
  height:20px
}
.device-status {
  font-size:9px;
  color:#7d8ba0;
  position:absolute;
  top:27px;
  right:14px
}
.device-card h3 {
  font-size:14px;
  letter-spacing:0;
  margin-bottom:3px
}
.device-card:nth-child(2) h3 {
  font-size:24px
}
.device-card h3 span {
  font-size:15px;
  font-weight:400;
  color:var(--muted)
}
.device-card p {
  font-size:10px;
  margin:0
}
.decorative-switch {
  position:absolute;
  bottom:20px;
  right:16px;
  width:29px;
  height:17px;
  background:var(--blue);
  border-radius:20px
}
.decorative-switch:after {
  content:"";
  position:absolute;
  top:3px;
  right:3px;
  width:11px;
  height:11px;
  border-radius:50%;
  background:#fff
}
.temperature-line {
  height:3px;
  width:75px;
  background:linear-gradient(90deg,#cddffa 0%,#5798f1 65%,#edf2f9 65%);
  border-radius:3px;
  margin-top:10px
}
.preview-security {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  margin-top:20px;
  padding-top:15px;
  border-top:1px solid #edf0f5;
  font-size:9px;
  color:var(--muted)
}
.preview-security .icon {
  width:13px;
  height:13px;
  color:var(--blue)
}
.connection-path {
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top:25px;
  padding:0 15px
}
.connection-path>div {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
  font-size:9px;
  white-space:nowrap;
  color:#718099
}
.connection-path .icon {
  width:21px;
  height:21px;
  color:#7892b5
}
.connection-path .gateway-node .icon {
  color:var(--blue)
}
.path-line {
  flex:1;
  border-top:1px dashed #b9cce7;
  margin:0 16px 19px
}
.visual-caption {
  text-align:center;
  font-size:10px;
  margin:17px 0 0;
  color:#8996a9
}
.benefit-strip {
  border-block:1px solid var(--line);
  background:var(--paper)
}
.benefit-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-block:21px;
  font-size:12px;
  color:#536780
}
.benefit-row>span {
  display:flex;
  align-items:center;
  gap:9px
}
.benefit-row .icon {
  width:17px;
  height:17px;
  color:#6e8ab0
}
.section {
  padding-block:72px
}
.section-title {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:30px;
  margin-bottom:40px
}
.section-title .eyebrow {
  margin-bottom:13px
}
.section-title h2 {
  margin-bottom:0;
  font-size:31px
}
.section-title>p {
  font-size:13px;
  margin:0 0 3px
}
.steps-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px
}
.step {
  position:relative;
  padding-right:22px
}
.step:not(:last-child) {
  border-right:1px solid #edf0f6
}
.step-number {
  display:flex;
  align-items:center;
  justify-content:center;
  width:39px;
  height:39px;
  border-radius:11px;
  background:#eef4fd;
  color:var(--blue);
  font-size:13px;
  font-weight:650;
  margin-bottom:20px
}
.step h3 {
  font-size:17px;
  letter-spacing:-.02em;
  margin-bottom:12px
}
.step p {
  font-size:13px;
  line-height:1.85;
  margin-bottom:16px
}
.step a {
  font-size:12px;
  font-weight:600
}
.pricing-section {
  display:grid;
  grid-template-columns:1fr .9fr;
  gap:95px;
  padding:56px 64px;
  background:#f1f6fd;
  border-radius:20px;
  margin-top:15px;
  align-items:center
}
.pricing-copy h2 {
  font-size:36px;
  margin-top:20px;
  margin-bottom:20px
}
.pricing-copy p {
  font-size:13px;
  line-height:1.85;
  margin-bottom:24px
}
.inline-link {
  font-size:12px;
  font-weight:600
}
.pricing-card {
  background:#fff;
  border:1px solid #dce6f3;
  border-radius:13px;
  padding:28px 30px;
  box-shadow:0 8px 30px #22456f06
}
.plan-label {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  font-size:9px;
  font-weight:700;
  letter-spacing:.09em
}
.plan-tag {
  font-size:8px;
  letter-spacing:0;
  padding:4px 8px;
  background:#eef4fd;
  color:var(--blue);
  border-radius:5px;
  font-weight:500
}
.plan-price {
  font-size:49px;
  letter-spacing:-.05em;
  font-weight:700;
  line-height:1.2;
  margin-top:23px
}
.plan-price>span {
  font-size:14px;
  letter-spacing:0;
  color:var(--muted);
  font-weight:400
}
.plan-billing {
  font-size:11px;
  margin:6px 0 23px
}
.check-list {
  list-style:none;
  padding:20px 0 5px;
  margin:0 0 20px;
  border-top:1px solid var(--line);
  display:grid;
  gap:13px
}
.check-list li {
  display:flex;
  gap:9px;
  align-items:center;
  font-size:11px;
  color:#5b6a80
}
.check-list .icon {
  width:14px;
  height:14px;
  color:var(--blue)
}
.plan-footnote {
  font-size:9px;
  text-align:center;
  margin:11px 0 0
}
.setup-callout {
  display:flex;
  align-items:center;
  gap:20px;
  margin-top:54px;
  margin-bottom:60px;
  padding:26px 30px;
  border:1px solid var(--line);
  border-radius:13px
}
.callout-icon {
  background:#eef4fd;
  color:var(--blue);
  width:44px;
  height:44px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center
}
.setup-callout h3 {
  font-size:17px;
  margin-bottom:6px
}
.setup-callout p {
  font-size:12px;
  margin:0
}
.setup-callout .button {
  margin-left:auto;
  font-size:12px;
  min-height:42px
}
.site-footer {
  border-top:1px solid var(--line);
  padding-top:38px;
  background:#fcfdff
}
.footer-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-bottom:28px
}
.footer-top .brand {
  font-size:16px
}
.footer-top .brand-mark {
  width:31px;
  height:31px;
  border-radius:9px
}
.footer-top .brand-mark .icon {
  width:20px;
  height:20px
}
.footer-top p {
  font-size:11px;
  margin:10px 0 0
}
.footer-top nav {
  display:flex;
  gap:27px;
  font-size:11px
}
.footer-top nav a {
  color:var(--muted)
}
.footer-bottom {
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  font-size:9px;
  color:#8c99ac;
  padding-block:18px
}
.page-heading {
  padding-top:65px;
  padding-bottom:38px
}
.page-heading>.eyebrow {
  margin-bottom:17px
}
.page-heading h1 {
  font-size:45px
}
.card {
  padding:28px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:#fff;
  box-shadow:var(--shadow)
}
.auth-section {
  display:grid;
  grid-template-columns:1fr .88fr;
  gap:115px;
  align-items:center;
  padding-block:72px 92px;
  min-height:650px
}
.auth-intro .eyebrow {
  margin-bottom:22px
}
.auth-intro h1 {
  font-size:49px
}
.auth-intro .lead {
  font-size:17px
}
.auth-intro>.muted {
  font-size:12px
}
.auth-benefit {
  display:flex;
  gap:14px;
  padding-block:22px 28px;
  margin-top:18px
}
.auth-benefit>.icon {
  color:var(--blue);
  margin-top:3px
}
.auth-benefit strong {
  font-size:14px
}
.auth-benefit p {
  font-size:12px;
  max-width:300px;
  margin:5px 0 0
}
.auth-card {
  padding:33px
}
.auth-card h2 {
  font-size:23px;
  margin-bottom:9px
}
.auth-card>.muted {
  font-size:12px;
  margin-bottom:27px
}
.field {
  display:flex;
  flex-direction:column;
  gap:7px;
  margin-bottom:18px;
  min-width:0
}
.field label {
  font-size:12px;
  color:var(--ink);
  font-weight:600
}
.field input,.field select,.field textarea {
  width:100%;
  min-height:44px;
  padding:11px 13px;
  border:1px solid #7d8ea4;
  border-radius:7px;
  background:#fff;
  color:var(--ink);
  font-size:13px;
  outline-offset:2px
}
.field small {
  font-size:10px;
  color:var(--muted);
  line-height:1.6
}
.checkbox-label {
  display:flex;
  align-items:flex-start;
  gap:9px;
  font-size:11px;
  color:var(--muted);
  margin:20px 0
}
.checkbox-label input {
  accent-color:var(--blue);
  margin-top:4px;
  width:15px;
  height:15px
}
.auth-switch {
  font-size:11px;
  text-align:center;
  border-top:1px solid var(--line);
  padding-top:20px;
  margin:23px 0 0
}
.form-result {
  margin-block:15px;
  font-size:12px;
  padding:12px 14px;
  border-radius:7px;
  background:#edf7f1;
  color:#266443;
  overflow-wrap:anywhere;
  white-space:pre-line
}
.form-result.error {
  color:#982c3c;
  background:#fff0f2
}
.form-result.pending {
  color:#80591b;
  background:#fffae9
}
.form-result[hidden] {
  display:none
}
.form-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px
}
.form-grid>.field {
  margin:0
}
.form-grid>.full {
  grid-column:1/-1
}
.notice {
  border:1px solid #cfe0f8;
  background:#eff6ff;
  border-radius:10px;
  padding:18px 20px;
  color:#3d608a;
  font-size:13px;
  line-height:1.8;
  margin-block:22px
}
.notice p {
  color:inherit;
  margin-bottom:8px
}
.notice p:last-child {
  margin-bottom:0
}
.notice-warning {
  background:#fff9ea;
  border-color:#efdfb4;
  color:#846024
}
.notice-danger {
  background:#fff2f3;
  border-color:#efd2d6;
  color:#922e3b
}
.prose {
  max-width:820px;
  padding-bottom:65px
}
.prose h2 {
  font-size:25px;
  margin-top:40px;
  margin-bottom:17px
}
.prose h3 {
  font-size:18px;
  margin-top:28px;
  letter-spacing:-.02em
}
.prose p,.prose li {
  font-size:14px;
  color:var(--muted);
  line-height:1.9
}
.prose ol,.prose ul {
  padding-left:24px
}
.prose li {
  padding-left:5px;
  margin-block:9px
}
.prose code,code {
  font-family:Consolas,monospace;
  font-size:.9em;
  border-radius:4px;
  padding:2px 5px;
  background:#edf3fa;
  color:#35567e;
  overflow-wrap:anywhere
}
.prose pre,pre {
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  background:#f4f7fc;
  border:1px solid var(--line);
  border-radius:9px;
  padding:19px;
  font:12px/1.8 Consolas,monospace;
  color:#35567e
}
.prose pre code,pre code {
  padding:0;
  background:none
}
.faq-list {
  max-width:850px;
  margin-bottom:65px
}
.faq-list details {
  border-bottom:1px solid var(--line);
  padding:23px 0
}
.faq-list summary {
  cursor:pointer;
  font-size:17px;
  font-weight:600;
  line-height:1.5;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px
}
.faq-list summary::-webkit-details-marker {
  display:none
}
.faq-list summary:after {
  content:"+";
  font-size:24px;
  font-weight:400;
  color:var(--blue)
}
.faq-list details[open] summary:after {
  content:"−"
}
.faq-list details p {
  font-size:14px;
  line-height:1.9;
  margin:18px 35px 5px 0
}
.setup-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:25px;
  margin-bottom:30px
}
.setup-grid h2 {
  font-size:23px
}
.setup-grid .card>p {
  font-size:13px
}
.prerequisite-checks {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-bottom:35px
}
.prerequisite-checks .card h3 {
  font-size:17px
}
.prerequisite-checks .card p {
  font-size:12px
}
.content-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:25px;
  margin-bottom:35px
}
.content-grid .card h2 {
  font-size:23px
}
.content-grid .card p {
  font-size:13px
}
.guide-nav {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-block:25px 35px
}
.guide-nav a {
  padding:6px 13px;
  border:1px solid var(--line);
  border-radius:5px;
  font-size:12px
}
.dashboard {
  padding-block:45px 65px;
  min-height:650px
}
.dashboard-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-bottom:30px
}
.dashboard-heading>div { min-width:0; }
.dashboard-heading h1,.dashboard-heading p { overflow-wrap:anywhere; }
.dashboard-heading .eyebrow {
  margin-bottom:11px
}
.dashboard-heading h1 {
  font-size:35px;
  margin-bottom:8px
}
.dashboard-heading p {
  font-size:13px;
  margin:0
}
.summary-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-bottom:35px
}
.summary-card {
  border:1px solid var(--line);
  border-radius:11px;
  padding:21px 23px;
  display:flex;
  gap:16px;
  align-items:center
}
.summary-card>.icon {
  color:var(--blue);
  background:#eef4fd;
  padding:9px;
  box-sizing:content-box;
  width:19px;
  height:19px;
  border-radius:9px
}
.summary-card strong {
  font-size:24px;
  display:block;
  line-height:1.2;
  letter-spacing:-.04em
}
.summary-card p {
  font-size:11px;
  margin:4px 0 0
}
.dashboard-section {
  margin-bottom:34px
}
.dashboard-section-title {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:17px;
  gap:18px
}
.dashboard-section-title h2 {
  font-size:22px;
  margin:0
}
.dashboard-section-title p {
  font-size:11px;
  margin:0
}
.table-wrap {
  width:100%;
  overflow:auto;
  border:1px solid var(--line);
  border-radius:11px
}
.data-table {
  width:100%;
  border-collapse:collapse;
  font-size:12px;
  text-align:left;
  white-space:nowrap
}
.data-table th {
  font-size:10px;
  font-weight:600;
  letter-spacing:.02em;
  color:var(--muted);
  background:#f8fafd;
  padding:15px 19px
}
.data-table td {
  border-top:1px solid var(--line);
  padding:18px 19px
}
.data-table td strong {
  font-weight:550
}
.data-table td small {
  display:block;
  font-size:10px;
  color:var(--muted);
  margin-top:3px
}
.status {
  display:inline-flex;
  align-items:center;
  font-size:10px;
  line-height:1.4;
  padding:5px 8px;
  border-radius:5px;
  background:#edf2f8;
  color:#58718f;
  text-transform:capitalize
}
.status-active {
  background:#edf7f1;
  color:#267454
}
.status-error,.status-expired,.status-revoked {
  background:#fff0f2;
  color:#9d3547
}
.status-pending,.status-provisioning {
  background:#fff8e7;
  color:#88632f
}
.delete-button {
  border:1px solid var(--line);
  background:#fff;
  color:var(--muted);
  padding:7px;
  border-radius:5px
}
.delete-button:hover {
  color:#a73545;
  border-color:#edcbd0
}
.delete-button .icon {
  height:16px;
  width:16px
}
.empty-state {
  padding:45px 25px;
  text-align:center;
  border:1px dashed #ccd9eb;
  border-radius:12px;
  background:#fbfdff
}
.empty-state>.icon {
  width:32px;
  height:32px;
  color:#6d94cf;
  margin-bottom:14px
}
.empty-state h3 {
  font-size:18px;
  margin-bottom:10px
}
.empty-state p a {
  text-decoration:underline;
  text-underline-offset:3px
}
.empty-state p {
  font-size:12px;
  max-width:400px;
  margin:0 auto 20px
}
.license-list {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px
}
.license-card {
  border:1px solid var(--line);
  border-radius:10px;
  padding:20px
}
.license-card-top {
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center
}
.license-card-top strong {
  font-size:12px
}
.license-card p {
  font-size:11px;
  margin:14px 0 0
}
.license-card small {
  font-size:10px;
  color:var(--muted)
}
.connection-create {
  border:1px solid var(--line);
  background:#f8fbff;
  border-radius:13px;
  padding:28px;
  margin-top:35px
}
.connection-create h2 {
  font-size:24px
}
.connection-create>p {
  font-size:13px;
  max-width:650px
}
.connection-create .form-grid {
  margin-top:23px;
  grid-template-columns:1fr 1fr
}
.domain-input {
  display:flex;
  border:1px solid #d8e1ec;
  border-radius:7px;
  background:#fff;
  overflow:hidden;
  align-items:center;
  min-width:0
}
.domain-input input {
  border:none;
  border-radius:0;
  min-width:0
}
.domain-input span {
  font-size:11px;
  color:#76879d;
  padding-right:13px;
  white-space:nowrap
}
.connection-create .form-actions {
  display:flex;
  gap:12px;
  align-items:center;
  margin-top:20px
}
.connection-create .form-actions small {
  font-size:10px;
  color:var(--muted)
}
.connection-steps {
  display:flex;
  gap:20px;
  font-size:11px;
  color:#6d809b;
  margin:22px 0 15px
}
.connection-steps span {
  display:flex;
  align-items:center;
  gap:7px
}
.connection-steps b {
  background:#e6eefb;
  color:var(--blue);
  border-radius:50%;
  width:21px;
  height:21px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:10px
}
.heartbeat-setup {
  padding:23px;
  margin-top:24px;
  background:#f0f7ff;
  border:1px solid #cddff7;
  border-radius:11px
}
.heartbeat-setup h3 {
  font-size:18px
}
.heartbeat-setup p {
  font-size:12px
}
.heartbeat-setup p a:not(.button) {
  text-decoration:underline;
  text-underline-offset:3px
}
.heartbeat-setup[hidden] {
  display:none
}
.heartbeat-setup .field {
  margin-bottom:10px
}
.toast {
  position:fixed;
  bottom:25px;
  left:50%;
  transform:translateX(-50%);
  max-width:min(500px,calc(100% - 40px));
  padding:14px 22px;
  border-radius:9px;
  background:#223d62;
  color:#fff;
  font-size:13px;
  box-shadow:var(--shadow);
  z-index:100;
  overflow-wrap:anywhere
}
.toast[hidden] {
  display:none
}
.toast.error {
  background:#923648
}
[hidden] {
  display:none!important
}
.account-note {
  font-size:11px;
  color:var(--muted);
  margin-top:12px
}
.card.prose>h2:first-child {
  margin-top:0
}
.content-grid .card>h2 {
  margin-top:14px
}
@media(min-width:1500px) {
  .hero-grid {
    padding-top:92px;
    padding-bottom:87px
  }
}
@media(max-width:1100px) {
  .container {
    width:calc(100% - 64px)
  }
  .site-nav {
    gap:20px
  }
  .site-nav .login-link {
    margin-left:10px
  }
  .hero-grid {
    gap:36px
  }
  .hero h1 {
    font-size:55px
  }
  .hero-description {
    font-size:14px
  }
  .hero-price {
    gap:10px;
    font-size:10px
  }
  .hero-price strong {
    font-size:22px
  }
  .hero-price strong span {
    font-size:11px
  }
  .hero-note {
    font-size:9px
  }
  .pricing-section {
    gap:45px;
    padding:40px
  }
  .pricing-copy h2 {
    font-size:32px
  }
  .auth-section {
    gap:65px
  }
  .device-card {
    padding:15px 12px
  }
  .device-status {
    right:10px
  }
  .home-preview {
    padding:21px
  }
  .address-bar {
    margin-inline:15px;
    font-size:10px
  }
  .section-title>p {
    font-size:11px
  }
}
@media(max-width:850px) {
  .container {
    width:calc(100% - 44px)
  }
  .site-header {
    height:76px
  }
  .brand {
    font-size:17px
  }
  .nav-toggle {
    display:block
  }
  .site-nav {
    display:none;
    position:absolute;
    top:76px;
    left:0;
    right:0;
    background:#fff;
    padding:20px 24px;
    box-shadow:0 15px 20px #183c6810;
    z-index:20;
    border-bottom:1px solid var(--line);
    flex-direction:column;
    align-items:stretch;
    gap:18px
  }
  .site-nav.is-open {
    display:flex
  }
  .site-nav .login-link {
    margin-left:0
  }
  .hero-grid {
    gap:25px;
    padding-top:53px;
    padding-bottom:50px;
    grid-template-columns:1fr 1fr
  }
  .hero h1 {
    font-size:43px
  }
  .hero-copy .eyebrow {
    font-size:9px;
    margin-bottom:20px
  }
  .hero-description {
    font-size:12px
  }
  .desktop-break {
    display:none
  }
  .hero-actions {
    gap:9px;
    flex-direction:column;
    align-items:flex-start
  }
  .hero-actions .button {
    font-size:12px;
    min-height:42px;
    padding:11px 18px
  }
  .hero-price {
    flex-wrap:wrap;
    gap:4px
  }
  .price-divider {
    display:none
  }
  .hero-price>span:last-child {
    width:100%
  }
  .hero-note {
    font-size:9px;
    max-width:270px
  }
  .home-preview {
    padding:17px
  }
  .address-bar {
    padding:11px;
    font-size:8px;
    margin-inline:10px;
    gap:6px
  }
  .address-protocol {
    display:none
  }
  .home-greeting {
    gap:10px
  }
  .home-greeting h2 {
    font-size:18px
  }
  .home-greeting p {
    font-size:9px
  }
  .home-icon {
    width:34px;
    height:34px
  }
  .device-grid {
    gap:9px
  }
  .device-card {
    padding:12px 9px;
    min-height:145px
  }
  .device-status {
    display:none
  }
  .device-card h3 {
    font-size:11px
  }
  .device-card p {
    font-size:8px
  }
  .device-icon {
    height:28px;
    width:28px
  }
  .decorative-switch {
    width:22px;
    height:14px;
    bottom:15px;
    right:9px
  }
  .decorative-switch:after {
    height:8px;
    width:8px
  }
  .preview-security {
    font-size:7px;
    gap:4px
  }
  .connection-path {
    padding:0 5px
  }
  .connection-path>div {
    font-size:8px
  }
  .path-line {
    margin-inline:8px
  }
  .benefit-row {
    gap:18px;
    font-size:10px;
    flex-wrap:wrap;
    justify-content:center
  }
  .benefit-row .icon {
    height:15px;
    width:15px
  }
  .section {
    padding-block:50px
  }
  .section-title {
    display:block
  }
  .section-title h2 {
    font-size:27px
  }
  .section-title>p {
    margin-top:13px;
    font-size:12px
  }
  .steps-grid {
    gap:22px
  }
  .step {
    padding-right:14px
  }
  .step h3 {
    font-size:16px
  }
  .step p {
    font-size:12px
  }
  .pricing-section {
    gap:30px;
    padding:33px
  }
  .pricing-copy h2 {
    font-size:28px
  }
  .pricing-card {
    padding:22px
  }
  .check-list li {
    font-size:9px
  }
  .setup-callout {
    padding:23px;
    gap:15px
  }
  .setup-callout h3 {
    font-size:15px
  }
  .setup-callout p {
    font-size:11px
  }
  .setup-callout .button {
    font-size:10px;
    padding-inline:14px
  }
  .footer-top nav {
    gap:18px;
    font-size:10px
  }
  .auth-section {
    gap:35px
  }
  .auth-intro h1 {
    font-size:38px
  }
  .auth-intro .lead {
    font-size:15px
  }
  .auth-card {
    padding:25px
  }
  .summary-grid {
    gap:13px
  }
  .summary-card {
    padding:16px
  }
  .summary-card strong {
    font-size:21px
  }
  .summary-card p {
    font-size:10px
  }
  .license-list {
    grid-template-columns:1fr 1fr
  }
  .page-heading h1 {
    font-size:37px
  }
}
@media(max-width:620px) {
  h1 {
    font-size:38px
  }
  h2 {
    font-size:28px
  }
  .container {
    width:calc(100% - 40px)
  }
  .brand {
    font-size:16px
  }
  .brand-mark {
    height:33px;
    width:33px;
    border-radius:10px
  }
  .hero-grid {
    grid-template-columns:1fr;
    gap:33px;
    padding-top:42px;
    padding-bottom:35px
  }
  .hero h1 {
    font-size:52px;
    margin-bottom:23px
  }
  .hero-copy .eyebrow {
    font-size:9px
  }
  .hero-description {
    font-size:14px;
    max-width:420px
  }
  .hero-actions {
    flex-direction:row
  }
  .hero-actions .button {
    font-size:12px;
    padding-inline:18px;
    min-height:45px
  }
  .hero-price {
    gap:13px;
    flex-wrap:nowrap;
    font-size:10px;
    margin-top:24px
  }
  .hero-price>span:last-child {
    width:auto
  }
  .price-divider {
    display:block
  }
  .hero-note {
    font-size:10px;
    max-width:none
  }
  .connection-visual {
    max-width:425px;
    width:100%;
    margin:auto;
    padding-top:5px
  }
  .home-preview {
    padding:22px
  }
  .home-greeting h2 {
    font-size:22px
  }
  .home-greeting p {
    font-size:10px
  }
  .home-icon {
    width:40px;
    height:40px
  }
  .device-card {
    padding:17px 14px;
    min-height:156px
  }
  .device-card h3 {
    font-size:13px
  }
  .device-card p {
    font-size:10px
  }
  .device-status {
    display:inline-block;
    font-size:8px;
    top:23px;
    right:12px
  }
  .device-icon {
    width:32px;
    height:32px
  }
  .preview-security {
    font-size:9px
  }
  .decorative-switch {
    width:28px;
    height:16px;
    bottom:17px;
    right:13px
  }
  .decorative-switch:after {
    width:10px;
    height:10px
  }
  .address-bar {
    padding:13px 15px;
    font-size:10px;
    margin-inline:18px
  }
  .address-protocol {
    display:inline-block
  }
  .connection-path>div {
    font-size:9px
  }
  .path-line {
    margin-inline:16px
  }
  .benefit-row {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px 12px;
    padding-block:23px;
    font-size:9px
  }
  .benefit-row>span {
    gap:7px
  }
  .section {
    padding-block:44px
  }
  .section-title {
    margin-bottom:28px
  }
  .section-title .eyebrow {
    font-size:9px
  }
  .section-title h2 {
    font-size:27px;
    max-width:300px
  }
  .steps-grid {
    grid-template-columns:1fr;
    gap:28px
  }
  .step {
    display:grid;
    grid-template-columns:40px 1fr;
    gap:0 18px;
    padding:0
  }
  .step:not(:last-child) {
    border-right:none
  }
  .step-number {
    grid-row:1/4;
    margin:0
  }
  .step h3 {
    font-size:17px;
    margin-bottom:10px
  }
  .step p {
    font-size:12px;
    margin-bottom:10px
  }
  .step a {
    grid-column:2
  }
  .pricing-section {
    grid-template-columns:1fr;
    padding:28px 23px;
    gap:26px;
    margin-top:0;
    border-radius:15px
  }
  .pricing-copy h2 {
    font-size:31px;
    margin-top:15px
  }
  .pricing-card {
    padding:24px
  }
  .check-list li {
    font-size:11px
  }
  .plan-price {
    font-size:45px
  }
  .setup-callout {
    display:grid;
    grid-template-columns:40px 1fr;
    margin-block:32px;
    padding:21px 18px;
    gap:14px
  }
  .callout-icon {
    width:38px;
    height:38px
  }
  .setup-callout h3 {
    font-size:16px
  }
  .setup-callout .button {
    grid-column:2;
    margin-left:0;
    justify-self:start;
    font-size:11px
  }
  .footer-top {
    display:block
  }
  .footer-top nav {
    margin-top:24px;
    gap:20px;
    flex-wrap:wrap;
    font-size:11px
  }
  .footer-bottom {
    display:block;
    font-size:9px
  }
  .footer-bottom span {
    display:block;
    margin-block:4px
  }
  .page-heading {
    padding-top:43px;
    padding-bottom:24px
  }
  .page-heading h1 {
    font-size:36px
  }
  .lead {
    font-size:15px
  }
  .auth-section {
    grid-template-columns:1fr;
    padding-block:40px 55px;
    gap:30px;
    min-height:0
  }
  .auth-intro h1 {
    font-size:40px;
    margin-bottom:18px
  }
  .auth-benefit {
    padding:13px 0 0;
    margin-top:14px
  }
  .auth-intro>.muted {
    margin-top:21px
  }
  .auth-card {
    padding:26px 24px
  }
  .form-grid,.content-grid,.setup-grid {
    grid-template-columns:1fr
  }
  .prerequisite-checks {
    grid-template-columns:1fr
  }
  .form-grid>.full {
    grid-column:auto
  }
  .card {
    padding:23px
  }
  .prose {
    padding-bottom:43px
  }
  .prose h2 {
    font-size:23px;
    margin-top:33px
  }
  .prose p,.prose li {
    font-size:13px
  }
  .faq-list summary {
    font-size:15px
  }
  .faq-list details p {
    font-size:13px;
    margin-right:10px
  }
  .dashboard {
    padding-top:30px
  }
  .dashboard-heading {
    align-items:flex-start;
    flex-direction:column
  }
  .dashboard-heading h1 {
    font-size:30px
  }
  .summary-grid {
    grid-template-columns:1fr;
    gap:10px
  }
  .summary-card {
    padding:16px 18px
  }
  .summary-card strong {
    font-size:21px
  }
  .summary-card p {
    font-size:11px
  }
  .dashboard-section-title {
    align-items:flex-start;
    flex-direction:column;
    gap:7px
  }
  .dashboard-section-title h2 {
    font-size:21px
  }
  .license-list {
    grid-template-columns:1fr
  }
  .connection-create {
    padding:23px 20px
  }
  .connection-create .form-grid {
    grid-template-columns:1fr
  }
  .connection-create h2 {
    font-size:23px
  }
  .connection-steps {
    flex-wrap:wrap;
    gap:12px
  }
  .domain-input span {
    font-size:9px;
    padding-right:10px
  }
  .connection-create .form-actions {
    align-items:flex-start;
    flex-direction:column
  }
  .heartbeat-setup {
    padding:19px
  }
  .data-table td,.data-table th {
    padding-inline:15px
  }
  .notice {
    font-size:12px;
    padding:16px
  }
}
@media(prefers-reduced-motion:reduce) {
  * {
    scroll-behavior:auto!important;
    transition:none!important
  }
}

/* Shared reading rhythm, control visibility, and responsive page refinements. */
body { font-size:16px; }
h1,h2,h3 { text-wrap:balance; }
p,li { overflow-wrap:break-word; }
.button,.button-small,.text-button,.nav-toggle,.delete-button { min-height:44px; }
.nav-toggle,.delete-button { min-width:44px; }
.button { font-size:15px; border-radius:10px; }
.button-secondary { border-color:#9bacc2; }
.site-header { position:relative; z-index:30; height:84px; border-color:var(--line); }
.site-nav { font-size:14px; gap:24px; }
.site-nav>a:not(.button) { padding-block:10px; }
.site-nav>a[aria-current=page]:not(.button) { text-decoration:underline; text-underline-offset:8px; text-decoration-thickness:2px; }
.hero { background:radial-gradient(ellipse at 90% 35%,#e7f1ff 0,transparent 48%),linear-gradient(115deg,#fff 38%,#f7faff); }
.hero-grid { grid-template-columns:1.12fr 1fr; gap:60px; padding-block:80px; }
.hero h1 { font-size:clamp(42px,4.6vw,62px); line-height:1.1; letter-spacing:-.045em; }
.hero-description { font-size:18px; line-height:1.75; max-width:490px; }
.eyebrow,.hero-copy .eyebrow,.section-title .eyebrow { font-size:11px; letter-spacing:.13em; }
.hero-actions { flex-direction:row; flex-wrap:wrap; gap:12px; }
.hero-actions .button { font-size:15px; min-height:48px; padding:12px 22px; }
.hero-price { gap:15px; font-size:13px; flex-wrap:wrap; }
.hero-price strong { font-size:28px; }
.hero-price strong span { font-size:14px; }
.hero-price>span:last-child { width:auto; }
.hero-note { font-size:13px; align-items:flex-start; max-width:470px; line-height:1.6; }
.hero-note .icon { margin-top:3px; width:17px; height:17px; }
.connection-visual { isolation:isolate; }
.connection-visual::before { content:""; position:absolute; inset:9% -5% 18%; z-index:-1; background:#e4efff; border-radius:50%; filter:blur(30px); opacity:.7; }
.address-bar { font-size:13px; padding:15px 17px; }
.address-protocol { font-size:10px; font-weight:650; display:inline-block; }
.home-preview { padding:26px; border-radius:18px; box-shadow:0 24px 70px #23496e1a,0 3px 10px #23496e08; }
.preview-title { font-size:13px; }
.example-label { font-size:10px; color:var(--muted); }
.home-greeting h2,.preview-greeting { display:block; font-size:24px; line-height:1.3; font-weight:650; letter-spacing:-.025em; margin:0 0 5px; color:var(--ink); }
.home-greeting p { font-size:12px; }
.device-card { padding:18px 16px; min-height:170px; }
.device-status { font-size:11px; color:var(--muted); right:12px; }
.device-card h3,.device-value { display:block; font-size:15px; font-weight:650; letter-spacing:0; line-height:1.3; margin:0 0 4px; color:var(--ink); }
.device-card:nth-child(2) .device-value { font-size:26px; }
.device-value span { font-size:16px; font-weight:400; color:var(--muted); }
.device-card p { font-size:12px; }
.preview-security { font-size:11px; line-height:1.5; text-align:center; }
.connection-path>div { font-size:11px; color:var(--muted); }
.connection-path .icon { color:var(--muted); }
.visual-caption { font-size:12px; color:var(--muted); }
.benefit-row { font-size:13px; padding-block:24px; gap:20px; }
.benefit-row .icon { color:var(--blue); }
.section { padding-block:76px; }
.section-title h2 { font-size:34px; }
.section-title>p { font-size:15px; }
.steps-grid { gap:24px; }
.step { padding:26px; border:1px solid var(--line); border-radius:16px; background:linear-gradient(160deg,#fff,#f9fbff); }
.step:not(:last-child) { border-right:1px solid var(--line); }
.step-number { width:42px; height:42px; font-size:14px; }
.step h3 { font-size:20px; }
.step p,.step a { font-size:15px; }
.step a,.inline-link { text-decoration:underline; text-underline-offset:4px; }
.pricing-section { gap:64px; padding:52px 56px; background:linear-gradient(125deg,#edf4ff,#f7faff); border:1px solid #dbe7f8; border-radius:24px; }
.pricing-copy h2 { font-size:39px; }
.pricing-copy p { font-size:16px; }
.inline-link { font-size:15px; }
.pricing-card { padding:32px; border-radius:18px; box-shadow:0 14px 36px #23496e0c; }
.plan-label { font-size:11px; flex-wrap:wrap; }
.plan-tag { font-size:11px; font-weight:600; }
.plan-price { font-size:56px; }
.plan-billing { font-size:14px; }
.check-list li { font-size:14px; align-items:flex-start; color:var(--muted); }
.check-list .icon { width:18px; height:18px; margin-top:3px; }
.plan-footnote { font-size:12px; }
.page-home .card.prose { max-width:none; padding:36px; }
.page-home .card.prose p { max-width:85ch; }
.setup-callout { padding:30px; background:#fbfdff; border-radius:18px; }
.setup-callout h2 { font-size:22px; letter-spacing:-.02em; margin-bottom:8px; }
.setup-callout p { font-size:14px; }
.setup-callout .button { font-size:14px; min-height:44px; flex-shrink:0; }
.footer-top { align-items:flex-start; gap:30px; }
.footer-top p { font-size:13px; }
.footer-top nav { font-size:14px; flex-wrap:wrap; gap:12px 24px; justify-content:flex-end; }
.footer-top nav a { padding-block:8px; }
.footer-bottom { color:var(--muted); font-size:12px; gap:24px; }
.breadcrumbs { padding-top:24px; font-size:13px; }
.breadcrumbs ol { display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0; }
.breadcrumbs li { display:flex; gap:8px; align-items:center; }
.breadcrumbs li+li::before { content:"/"; color:var(--muted); }
.breadcrumbs [aria-current] { color:var(--muted); }
.breadcrumbs a { text-decoration:underline; text-underline-offset:3px; }
.page-heading { padding-top:42px; padding-bottom:34px; }
.page-heading h1 { font-size:clamp(34px,4.3vw,48px); }
.lead { font-size:19px; line-height:1.75; }
.prose { max-width:850px; }
.prose p,.prose li,.faq-list details p { font-size:16px; line-height:1.85; }
.prose h2 { font-size:28px; }
.prose h3 { font-size:21px; }
.prose pre,pre { font-size:14px; }
.article-intro { max-width:900px; margin-bottom:28px; }
.article-intro .lead { max-width:72ch; }
.page-faq main>.container,.page-terms main>.container,.page-port-forwarding main>.container { max-width:900px; }
.page-prerequisites main>.container { max-width:1000px; }
.page-prerequisites .card.prose { max-width:none; }
.page-port-forwarding .prose.card { margin-bottom:44px; }
.page-terms .prose.card { margin-bottom:64px; }
.page-faq main,.page-prerequisites main { padding-bottom:60px; }
.section-anchor,[id] { scroll-margin-top:24px; }
.guide-toc { display:flex; flex-wrap:wrap; gap:10px 20px; max-width:900px; border:1px solid #d3e1f5; border-radius:14px; background:#f2f7ff; padding:22px 26px; margin-block:20px 36px; }
.guide-toc a { padding-block:5px; text-decoration:underline; text-underline-offset:3px; font-size:14px; }
.guide-toc h2 { margin:0 0 12px; font-size:20px; }
.guide-toc ul { columns:2; column-gap:28px; margin:0; padding-left:20px; }
.guide-toc li { break-inside:avoid; }
.fact-list { padding-left:24px; font-size:15px; color:var(--muted); line-height:1.85; }
.fact-list li { margin-block:10px; }
.faq-list { max-width:900px; }
.faq-list details { padding:25px 0; scroll-margin-top:24px; }
.faq-list summary { font-size:19px; min-height:44px; }
.prose a:not(.button),.muted a:not(.button),.faq-list a,.notice a:not(.button),.field small a,.checkbox-label a,.auth-switch a,.account-note a,.plan-footnote a,.hero-note a,.fact-list a { text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.prose a:hover,.faq-list a:hover { text-decoration-thickness:2px; }
.setup-grid .card>p,.content-grid .card p,.prerequisite-checks .card p { font-size:15px; }
.auth-section { gap:72px; padding-block:64px 80px; align-items:start; }
.auth-intro { padding-top:20px; }
.auth-intro h1 { font-size:clamp(36px,4vw,50px); }
.auth-intro .lead { font-size:18px; }
.auth-intro>.muted,.auth-benefit p,.auth-card>.muted,.auth-switch { font-size:14px; }
.auth-benefit strong { font-size:16px; }
.auth-card { padding:34px; box-shadow:0 14px 48px #183c6812; }
.auth-card h2 { font-size:25px; }
.field label { font-size:14px; }
.field input,.field select,.field textarea { font-size:16px; min-height:48px; border-color:#7d8ea4; border-radius:8px; }
.field input::placeholder,.field textarea::placeholder { color:#5e6e83; opacity:1; }
.field small { font-size:13px; }
.checkbox-label { font-size:14px; }
.checkbox-label input { width:18px; height:18px; flex-shrink:0; }
.form-result { font-size:14px; }
.form-result:empty { padding:0; margin:0; min-height:0; }
.notice { font-size:15px; }
.notice-warning { color:#74511b; }
.notice-warning a { color:#144fab; }
.dashboard-heading p,.dashboard-section-title p,.summary-card p,.empty-state p,.account-note,.license-card p,.connection-create>p { font-size:14px; }
.summary-card { background:linear-gradient(150deg,#fff,#f8fbff); border-radius:14px; padding:24px; }
.summary-card strong { font-size:28px; }
.dashboard-section-title h2 { font-size:25px; }
.data-table { font-size:14px; }
.data-table th,.data-table td small { font-size:12px; }
.data-table caption { text-align:left; padding:14px 19px; font-weight:600; color:var(--ink); background:#f8fafd; }
.data-table td { vertical-align:top; }
.status { font-size:12px; }
.status-active { color:#206243; }
.license-card { padding:24px; border-radius:14px; background:#fbfdff; }
.license-card-top strong { font-size:14px; }
.connection-steps { font-size:13px; color:var(--muted); }
.connection-steps span { color:var(--muted); }
.domain-input span { font-size:12px; color:var(--muted); }
.domain-input { border-color:#7d8ea4; }
.domain-input:focus-within { outline:3px solid #1557bf; outline-offset:3px; }
.domain-input input:focus-visible { outline:none; }
.domain-input input { min-width:0; }
.license-card small,.connection-create .form-actions small { font-size:13px; }
.heartbeat-setup p { font-size:14px; }
.table-wrap:focus-visible { outline-offset:3px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.toast { display:flex; align-items:center; gap:18px; font-size:14px; max-width:min(520px,calc(100% - 32px)); padding:16px 18px; }
.toast[hidden] { display:none; }
.toast button { flex-shrink:0; min-width:44px; min-height:44px; padding:8px 12px; color:#fff; background:transparent; border:1px solid #a5bad5; border-radius:6px; font-weight:600; }
.toast button:focus-visible { outline-color:#fff; }

@media(max-width:1100px) {
  .hero-grid { gap:32px; }
  .hero h1 { font-size:50px; }
  .hero-description { font-size:17px; }
  .pricing-section { gap:36px; padding:38px; }
  .step { padding:22px; }
  .site-nav { gap:18px; font-size:13px; }
  .home-preview { padding:22px; }
  .address-bar { font-size:11px; }
}
@media(max-width:900px) {
  .hero-grid { grid-template-columns:1fr; gap:42px; padding-block:56px; }
  .hero-copy { max-width:640px; }
  .hero h1 { font-size:clamp(42px,7vw,62px); }
  .hero-description { max-width:620px; font-size:18px; }
  .connection-visual { max-width:500px; width:100%; margin-inline:auto; }
  .home-preview { padding:26px; }
  .address-bar { font-size:13px; }
  .device-status { display:inline-block; }
  .hero-price { flex-wrap:wrap; }
  .price-divider { display:block; }
  .pricing-section { grid-template-columns:1fr 1fr; padding:32px; gap:28px; }
  .pricing-card { padding:26px; }
  .pricing-copy h2 { font-size:32px; }
  .auth-section { grid-template-columns:1fr; max-width:650px; gap:30px; padding-block:40px 64px; }
  .auth-intro { padding-top:0; }
  .steps-grid { grid-template-columns:1fr; }
  .step { display:grid; grid-template-columns:44px 1fr; gap:0 20px; padding:26px; }
  .step-number { grid-row:1/4; margin:0; }
  .step a { grid-column:2; }
  .section-title { display:block; }
  .section-title>p { margin-top:14px; }
  .benefit-row { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
  .footer-top { flex-direction:column; }
  .footer-top nav { justify-content:flex-start; }
  .summary-grid { gap:14px; }
  .summary-card { padding:20px; }
  .setup-callout { flex-wrap:wrap; }
  .setup-callout .button { margin-left:64px; }
}
@media(max-width:850px) {
  .site-header { height:76px; }
  .site-nav { gap:8px; font-size:15px; }
  .site-nav>a:not(.button) { padding-block:12px; }
  .site-nav .button { margin-top:4px; }
  .brand { font-size:17px; }
}
@media(max-width:620px) {
  .container { width:calc(100% - 40px); }
  .brand { font-size:16px; }
  .hero-grid { padding-block:44px; gap:32px; }
  .hero h1 { font-size:clamp(34px,9.4vw,52px); }
  .hero-description { font-size:17px; }
  .hero-actions { flex-direction:column; align-items:stretch; }
  .hero-actions .button { width:100%; }
  .hero-price { font-size:12px; gap:12px; }
  .hero-note { font-size:12px; }
  .home-preview { padding:20px; }
  .preview-greeting { font-size:22px; }
  .address-bar { margin-inline:12px; padding:13px 12px; font-size:11px; }
  .address-protocol { font-size:9px; }
  .device-card { padding:16px 12px; min-height:165px; }
  .device-value { font-size:14px; }
  .device-status { top:22px; right:10px; font-size:10px; }
  .device-card p { font-size:11px; }
  .connection-path { padding-inline:0; }
  .connection-path>div { font-size:10px; }
  .path-line { margin-inline:10px; }
  .benefit-row { font-size:12px; gap:16px 12px; }
  .benefit-row>span { align-items:flex-start; }
  .benefit-row .icon { margin-top:3px; }
  .section { padding-block:48px; }
  .section-title h2 { font-size:30px; max-width:none; }
  .step { padding:22px 18px; gap:0 14px; }
  .step h3 { font-size:19px; }
  .step p,.step a { font-size:15px; }
  .pricing-section { grid-template-columns:1fr; padding:26px 20px; border-radius:18px; }
  .pricing-copy h2 { font-size:34px; }
  .pricing-card { padding:26px 20px; }
  .plan-label { font-size:10px; }
  .plan-price { font-size:52px; }
  .check-list li { font-size:14px; }
  .page-home .card.prose { padding:26px 22px; }
  .setup-callout { padding:24px 20px; grid-template-columns:38px 1fr; }
  .setup-callout h2 { font-size:21px; }
  .setup-callout .button { margin-left:0; grid-column:1/-1; width:100%; }
  .footer-top nav { font-size:14px; gap:8px 20px; }
  .footer-bottom { font-size:12px; }
  .breadcrumbs { padding-top:20px; font-size:12px; }
  .page-heading { padding-top:30px; }
  .lead { font-size:17px; }
  .prose p,.prose li,.faq-list details p { font-size:16px; }
  .prose h2 { font-size:26px; }
  .guide-toc { padding:20px; }
  .guide-toc ul { columns:1; }
  .faq-list summary { font-size:18px; }
  .auth-card { padding:26px 22px; }
  .auth-intro h1 { font-size:39px; }
  .auth-intro .lead { font-size:17px; }
  .dashboard-heading h1 { font-size:32px; }
  .summary-card strong { font-size:26px; }
  .summary-card p { font-size:14px; }
  .connection-steps { font-size:12px; }
  .domain-input span { font-size:11px; padding-right:10px; }
  .notice { font-size:14px; }
}
@media(max-width:360px) {
  .container { width:calc(100% - 32px); }
  .brand { font-size:14px; gap:8px; }
  .address-protocol { display:none; }
  .home-preview { padding:16px; }
  .device-status { display:none; }
  .device-grid { gap:9px; }
  .hero-price { align-items:flex-start; }
  .price-divider { display:none; }
  .hero-price>span:last-child { width:100%; }
  .benefit-row { grid-template-columns:1fr; }
  .step { grid-template-columns:1fr; }
  .step-number { grid-row:auto; margin-bottom:16px; }
  .step a { grid-column:1; }
  .domain-input { flex-wrap:wrap; }
  .domain-input span { padding:4px 12px 8px; }
}

/* Guides and practical service examples. */
.section-intro { max-width:75ch; font-size:17px; line-height:1.8; margin:-12px 0 30px; }
.section-note { font-size:14px; margin:24px 0 0; }
.everyday-section { padding-bottom:36px; }
.everyday-section+.how-section { padding-top:36px; }
.use-case-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.use-case-card { padding:28px; border:1px solid var(--line); border-radius:18px; background:#fbfdff; }
.content-icon { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:12px; background:#eaf2ff; color:var(--blue); flex-shrink:0; margin-bottom:20px; }
.use-case-card h3 { font-size:21px; letter-spacing:-.02em; margin-bottom:14px; }
.use-case-card p { font-size:15px; line-height:1.85; margin-bottom:0; }
.learning-section { padding-top:0; padding-bottom:28px; }
.resource-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.resource-card { display:flex; gap:22px; padding:32px; border:1px solid #d8e4f4; border-radius:18px; background:linear-gradient(145deg,#fff,#f3f8ff); }
.resource-card .content-icon { margin:0; }
.resource-label { font-size:12px; font-weight:650; letter-spacing:.08em; margin-bottom:12px; }
.resource-card h3 { font-size:24px; letter-spacing:-.025em; margin-bottom:16px; }
.resource-card h3 a { color:var(--ink); text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px; }
.resource-card h3 a:hover { color:var(--blue); }
.resource-card p:not(.resource-label) { font-size:15px; line-height:1.8; }
.resource-card .inline-link { font-size:14px; }
.resource-card .inline-link .icon { width:16px; height:16px; }
.page-remote-access-guide main>.container,.page-security-checklist main>.container { max-width:900px; }
.page-remote-access-guide main,.page-security-checklist main { padding-bottom:56px; }
.guide-article { max-width:900px; margin-bottom:32px; }
.guide-article h2:first-child { margin-top:0; }
.guide-article .table-wrap { margin-block:20px 24px; }
.comparison-table { min-width:720px; white-space:normal; table-layout:fixed; }
.comparison-table th,.comparison-table td { padding:17px 16px; overflow-wrap:break-word; }
.comparison-table thead th { font-size:13px; vertical-align:bottom; }
.comparison-table tbody th[scope=row] { font-size:14px; background:#fbfdff; color:var(--ink); font-weight:650; border-top:1px solid var(--line); vertical-align:top; letter-spacing:0; }
.comparison-table td { font-size:14px; line-height:1.7; color:var(--muted); }
.comparison-table caption { white-space:normal; }
.preparation-notes { margin-top:24px; }
.activation-checks { margin-top:30px; }
.connection-details-list { margin-block:24px; }
.connection-details-list>div { display:grid; grid-template-columns:190px minmax(0,1fr); gap:24px; padding-block:18px; border-top:1px solid var(--line); }
.connection-details-list dt { font-weight:650; color:var(--ink); }
.connection-details-list dd { margin:0; color:var(--muted); line-height:1.8; }
.page-faq .card>p a { text-decoration:underline; text-underline-offset:3px; }
.page-relay-guide main>.container,.page-plans main>.container { max-width:1000px; }
.page-relay-guide main,.page-plans main { padding-bottom:56px; }

/* Outbound relay: calm account settings and a retained, live entity grid. */
.footer-conversion { display:flex; justify-content:space-between; align-items:center; gap:40px; padding:36px 0 40px; margin-bottom:34px; border-bottom:1px solid #d3dff0; }
.footer-conversion>div:first-child { max-width:690px; }
.footer-conversion h2 { font-size:27px; letter-spacing:-.03em; line-height:1.25; margin:12px 0; }
.footer-conversion p { font-size:14px; line-height:1.8; margin:0; }
.footer-conversion>div:last-child { flex-shrink:0; display:flex; flex-direction:column; gap:14px; align-items:center; }
.footer-plan-link { font-size:13px; text-decoration:underline; text-underline-offset:3px; }
.free-relay-promotion { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:52px; padding:40px 44px; margin-top:38px; margin-bottom:40px; border:1px solid #c5d8f4; border-radius:22px; background:linear-gradient(130deg,#f4f8ff,#e8f2ff); }
.free-relay-promotion h2 { font-size:clamp(28px,3.5vw,36px); letter-spacing:-.04em; line-height:1.2; margin:14px 0 20px; }
.free-relay-promotion p { font-size:16px; line-height:1.85; margin:0; }
.free-relay-promotion-action { display:flex; flex-direction:column; gap:18px; justify-content:center; align-items:flex-start; }
.free-relay-promotion-action>strong { font-size:45px; letter-spacing:-.05em; color:var(--ink); }
.free-relay-promotion-action>strong span { font-size:16px; font-weight:400; letter-spacing:0; color:var(--muted); }
.free-relay-promotion-action>a:last-child { font-size:14px; text-decoration:underline; text-underline-offset:3px; }
.home-large-note { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:22px 28px; border:1px solid #d3dff0; border-radius:14px; margin-bottom:22px; }
.home-large-note p { font-size:14px; line-height:1.8; margin:8px 0 0; }
.home-large-note>a { flex-shrink:0; font-size:14px; text-decoration:underline; text-underline-offset:3px; }
.account-plan-offers { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:28px; }
.account-plan-offers article { background:#f4f8ff; border:1px solid #c5d8f0; border-radius:14px; padding:24px; }
.account-plan-offers h3 { font-size:20px; letter-spacing:-.025em; line-height:1.4; margin:12px 0; }
.account-plan-offers p { font-size:13px; line-height:1.8; }
.account-checkout-unavailable { font-size:13px; color:#526680; }
@media(max-width:1100px) { .account-plan-offers { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.plan-offer-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-bottom:34px; }
.plan-offer-card { display:flex; flex-direction:column; padding:28px; background:#fff; border:1px solid #cddcf0; border-radius:18px; min-width:0; }
.plan-offer-card.is-featured { border:2px solid #1d61d0; background:linear-gradient(145deg,#fff,#f1f6ff); padding:27px; box-shadow:0 12px 32px #1d61d010; }
.plan-offer-card h2 { font-size:24px; letter-spacing:-.025em; margin:8px 0 12px; }
.plan-offer-card h3 { font-size:24px; letter-spacing:-.025em; margin:8px 0 12px; line-height:1.35; }
.product-choice-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.product-choice-card { display:flex; flex-direction:column; padding:32px; border:1px solid #c4d6ee; border-radius:20px; background:#fff; min-width:0; }
.product-choice-card.product-proxy { border-top:4px solid #1d61d0; }
.product-choice-card.product-relay { border-top:4px solid #267a88; background:linear-gradient(145deg,#fff,#f1f8fb); }
.product-choice-card>.content-icon { align-self:flex-start; margin-bottom:20px; }
.product-kicker { color:#345575; font-size:11px; line-height:1.8; font-weight:650; letter-spacing:.06em; margin:0 0 10px; }
.product-choice-card h3 { font-size:30px; letter-spacing:-.035em; line-height:1.2; margin:0 0 20px; }
.product-choice-card>p:not(.product-kicker):not(.product-price) { font-size:15px; line-height:1.85; }
.product-feature-list { list-style:none; padding:0; margin:4px 0 22px; font-size:14px; line-height:1.8; }
.product-feature-list li { padding:10px 0; border-bottom:1px solid #dce6f3; }
.product-requirement { color:#405978; font-size:13px!important; line-height:1.85; }
.product-requirement a { text-decoration:underline; text-underline-offset:3px; }
.product-price { margin-top:auto; padding-top:18px; color:var(--ink); font-size:15px; line-height:1.7; }
.product-price strong { font-size:34px; letter-spacing:-.035em; }
.product-price>span { display:block; font-size:12px; color:#526680; margin:3px 0 18px; }
.product-choice-card>.button { align-self:flex-start; }
.proxy-product-section { margin-bottom:54px; }
.relay-product-section { margin-bottom:40px; }
.proxy-plan-card { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(250px,1fr); align-items:center; gap:40px; padding:34px; border:1px solid #bdd0ee; border-radius:20px; background:linear-gradient(140deg,#fff,#f1f6ff); }
.proxy-plan-copy>h3 { font-size:27px; letter-spacing:-.03em; line-height:1.3; margin:20px 0 18px; }
.proxy-plan-copy>p { font-size:15px; line-height:1.85; }
.proxy-plan-price { padding:20px 0 20px 32px; border-left:1px solid #c8d8ef; }
.proxy-plan-price>.button { width:100%; white-space:normal; text-align:center; }
.proxy-plan-price>.inline-link { display:inline-block; margin-top:20px; font-size:14px; }
@media(max-width:900px) { .product-choice-card { padding:26px; } .product-choice-card h3 { font-size:26px; } .proxy-plan-card { grid-template-columns:1fr; gap:18px; padding:28px; } .proxy-plan-price { padding:24px 0 0; border-left:0; border-top:1px solid #c8d8ef; } .proxy-plan-price>.button { width:auto; } }
@media(max-width:740px) { .product-choice-grid { grid-template-columns:1fr; } .product-choice-card>.button { align-self:stretch; text-align:center; } .proxy-plan-card { padding:24px; } .proxy-plan-price>.button { width:100%; } }
.plan-offer-card>p { font-size:14px; line-height:1.8; }
.plan-offer-price { color:var(--ink); font-size:42px!important; letter-spacing:-.04em; margin:16px 0 2px!important; line-height:1.2!important; font-weight:700; }
.plan-offer-price span { font-size:14px; letter-spacing:0; font-weight:400; color:var(--muted); }
.plan-offer-billing { font-size:12px!important; line-height:1.8; margin-bottom:20px; }
.plan-offer-card ul { list-style:none; padding:0; margin:0 0 24px; font-size:13px; line-height:1.8; }
.plan-offer-card li { border-top:1px solid #e0e8f4; padding:10px 0; }
.plan-offer-card .button { margin-top:auto; font-size:14px; }
@media(max-width:880px) { .plan-offer-grid { grid-template-columns:1fr; } .plan-offer-card { padding:26px; } .plan-offer-card.is-featured { padding:25px; } }
.relay-page { padding-top:48px; padding-bottom:64px; }
.relay-page-heading { display:flex; justify-content:space-between; align-items:center; gap:32px; margin-bottom:30px; }
.relay-page-heading>div { max-width:750px; }
.relay-page-heading h1 { font-size:clamp(32px,4.4vw,48px); line-height:1.12; letter-spacing:-.045em; margin:14px 0 18px; }
.relay-page-heading p { line-height:1.8; margin:0; }
.relay-page-heading .eyebrow { display:block; }
.back-link { display:inline-block; font-size:14px; margin-bottom:24px; text-decoration:underline; text-underline-offset:4px; }
.relay-page-heading>.button { flex-shrink:0; }
.relay-plan-strip { display:flex; align-items:center; gap:18px 26px; flex-wrap:wrap; background:#eef5ff; border:1px solid #c5d8f4; border-radius:14px; padding:18px 24px; margin-bottom:30px; font-size:14px; }
.relay-plan-strip a { margin-left:auto; text-decoration:underline; text-underline-offset:3px; }
.relay-setup-grid { display:grid; grid-template-columns:1.15fr 1fr; gap:24px; align-items:start; }
.relay-settings-card { padding:30px; border:1px solid #d3dff0; border-radius:20px; background:#fff; box-shadow:0 8px 32px #163b6b05; min-width:0; }
.relay-settings-card h2 { font-size:25px; line-height:1.25; letter-spacing:-.025em; margin:10px 0 18px; }
.relay-settings-card p { font-size:15px; line-height:1.8; }
.relay-step-label { font-size:11px; letter-spacing:.095em; font-weight:700; color:#315b94; }
.relay-settings-card .field { margin-bottom:22px; }
.relay-settings-card textarea { width:100%; resize:vertical; min-height:100px; border:1px solid #7d8ea4; border-radius:10px; padding:14px; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:16px; line-height:1.65; background:#fbfdff; color:var(--ink); }
.relay-settings-card .field small { display:block; margin-top:9px; line-height:1.65; }
.relay-sensitive-fieldset { border:1px solid #d3dff0; border-radius:12px; margin:20px 0; padding:18px; min-width:0; }
.relay-sensitive-fieldset legend { padding:0 6px; font-weight:650; font-size:15px; }
.relay-sensitive-fieldset p { margin:0 0 16px; font-size:14px; }
.relay-sensitive-fieldset .field { margin-bottom:0; }
.relay-management-actions { display:flex; gap:12px; flex-wrap:wrap; margin:24px 0 16px; }
.relay-management-actions .text-button { min-height:44px; text-align:left; }
.relay-config-status { color:var(--ink); font-weight:600; }
.relay-once-secret { background:#f0f7ff; border:1px solid #bad0ed; border-radius:14px; margin-top:24px; padding:20px; }
.relay-once-secret h3 { font-size:20px; line-height:1.4; margin-bottom:12px; }
.relay-integration-token-field { margin-top:24px; }
.relay-package-card { margin-top:24px; }
.relay-package-actions { display:flex; gap:12px; flex-wrap:wrap; margin:24px 0 16px; }
.relay-settings-card pre { background:#102642; color:#f0f5ff; padding:22px; border-radius:12px; white-space:pre; overflow:auto; max-height:540px; font-size:13px; line-height:1.75; margin-bottom:20px; }
.relay-once-secret pre { white-space:pre-wrap; overflow-wrap:anywhere; }
.relay-package-card>.text-button { display:inline-flex; padding:14px 10px; margin-left:10px; }
.relay-live-summary { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; border:1px solid #c9daf0; background:#f3f8ff; border-radius:16px; padding:20px 24px; }
.relay-live-label { display:flex; gap:10px; align-items:center; color:var(--ink); }
.relay-dot { width:10px; height:10px; flex-shrink:0; border-radius:50%; background:#198046; box-shadow:0 0 0 4px #19804612; }
.relay-dot.is-stale { background:#b72c3e; box-shadow:0 0 0 4px #b72c3e12; }
.relay-live-summary p { font-size:14px; margin:0; }
.relay-summary-separator { padding:0 10px; }
.relay-refresh-status { min-height:26px; font-size:14px; margin:12px 0; color:var(--muted); }
.relay-category { margin-top:34px; }
.relay-category>h2 { font-size:27px; letter-spacing:-.025em; margin-bottom:18px; }
.relay-room { margin-top:20px; }
.relay-room-heading { font-size:13px; letter-spacing:.035em; text-transform:none; font-weight:650; color:#4a6180; margin-bottom:12px; }
.relay-room-entities { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.relay-entity { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:16px; background:#fff; border:1px solid #d3dff0; border-radius:15px; padding:22px; min-width:0; transition:background-color .2s,border-color .2s; }
.relay-entity-identity { min-width:0; }
.relay-entity-name { font-size:18px; letter-spacing:-.02em; line-height:1.5; margin:0 0 7px; overflow-wrap:anywhere; }
.relay-entity-id { display:block; font-size:11px; color:#526680; line-height:1.6; overflow-wrap:anywhere; }
.relay-entity-changed { display:block; font-size:12px; color:#526680; line-height:1.7; margin-top:6px; }
.relay-state { display:block; justify-self:end; text-align:right; font-size:14px; line-height:1.5; background:#edf2f8; border-radius:8px; padding:7px 10px; color:#314963; max-width:170px; overflow-wrap:anywhere; }
.relay-state.is-on { background:#e4f3ec; color:#166342; }
.relay-state.is-unavailable { background:#fbecee; color:#952838; }
.relay-entity-actions { grid-column:1/-1; display:flex; gap:9px; flex-wrap:wrap; }
.relay-action { min-width:66px; min-height:44px; padding:9px 18px; border:1px solid #b2c5df; color:#24518c; background:#f7faff; border-radius:9px; cursor:pointer; font:inherit; font-size:14px; font-weight:600; }
.relay-action:hover:not(:disabled) { background:#eaf2ff; border-color:#5684c3; }
.relay-action.is-active { color:#fff; background:#1d61d0; border-color:#1d61d0; }
.relay-action:disabled { cursor:default; opacity:.6; }
.relay-entity.is-pending { border-color:#c48e2e; background:#fff9ec; }
.relay-entity.is-sent { border-color:#6697d8; background:#eef5ff; }
.relay-command { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; gap:12px; border-top:1px solid #e9d7b0; padding-top:14px; }
.relay-command-chip { color:#79501a; font-size:13px; font-weight:600; line-height:1.8; }
.relay-entity.is-sent .relay-command { border-color:#c5d8f3; }
.relay-entity.is-sent .relay-command-chip { color:#20538e; }
.relay-command-chip.is-sending::before { content:''; display:inline-block; width:12px; height:12px; margin-right:8px; vertical-align:-2px; border:2px solid #a2bfdf; border-top-color:#20538e; border-radius:50%; animation:relay-spin 1.1s linear infinite; }
@keyframes relay-spin { to { transform:rotate(360deg); } }
.relay-cancel { background:none; border:0; min-height:44px; padding:6px 4px; color:#79501a; text-decoration:underline; text-underline-offset:3px; font:inherit; font-size:13px; cursor:pointer; }
.relay-cancel:disabled { opacity:.6; cursor:default; }
.relay-empty { text-align:center; padding:64px 26px; border:1px dashed #b8cce9; border-radius:18px; margin-top:24px; background:linear-gradient(145deg,#fff,#f3f8ff); }
.relay-empty h2 { font-size:27px; letter-spacing:-.03em; margin:18px 0 14px; }
.relay-empty p { max-width:58ch; margin:0 auto; line-height:1.8; }
.relay-empty-icon { display:inline-flex; padding:16px; border-radius:18px; color:var(--blue); background:#e6f0ff; }
.relay-empty-icon .icon { width:28px; height:28px; }
.relay-help-strip { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; padding:22px 0; margin-top:28px; border-top:1px solid #d3dff0; font-size:13px; }
.relay-help-strip>span { display:flex; align-items:center; gap:10px; line-height:1.8; }
.relay-help-strip .icon { flex-shrink:0; }
.relay-account-section { background:linear-gradient(145deg,#fff,#f4f8ff); }
.relay-account-section>p { max-width:78ch; line-height:1.8; }
.relay-free-callout { display:flex; align-items:center; justify-content:space-between; gap:24px; border:1px solid #c3d6f1; background:#eff5ff; border-radius:14px; padding:24px; margin-top:24px; }
.relay-free-callout p { margin:8px 0 0; font-size:14px; }
.relay-account-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:24px; }
.relay-account-card { padding:24px; border:1px solid #d0ddf0; border-radius:14px; background:#fff; min-width:0; }
.relay-account-card-top { display:flex; gap:16px; justify-content:space-between; align-items:flex-start; }
.relay-account-card-top p { font-size:13px; margin:8px 0 0; }
.relay-account-card .account-note { overflow-wrap:anywhere; }
.relay-account-actions { display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top:18px; }
.relay-page a:not(.button):not(.back-link) { text-decoration:underline; text-underline-offset:3px; }
.relay-page [hidden],.relay-account-section [hidden] { display:none!important; }
.relay-diagnostics { margin-top:32px; border:1px solid #ccdbee; border-radius:18px; padding:28px; background:#f8fbff; }
.relay-diagnostics-heading { display:flex; justify-content:space-between; align-items:center; gap:24px; margin-bottom:24px; }
.relay-diagnostics-heading h2 { font-size:26px; letter-spacing:-.03em; line-height:1.3; margin:10px 0 12px; }
.relay-diagnostics-heading p { margin:0; font-size:14px; }
.relay-diagnostics-heading>a { font-size:13px; flex-shrink:0; }
.relay-usage-card { display:flex; align-items:center; justify-content:space-between; gap:30px; padding:20px; border:1px solid #cfddf0; border-radius:12px; background:#fff; }
.relay-usage-card p { font-size:13px; margin:8px 0 0; line-height:1.8; }
.relay-usage-meter { width:220px; flex-shrink:0; }
.relay-usage-meter meter { width:100%; height:16px; accent-color:#1d61d0; }
.relay-usage-meter span { display:block; font-size:12px; margin-top:6px; }
.relay-stat-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-top:18px; }
.relay-stat { border:1px solid #cfddf0; border-radius:12px; padding:20px; background:#fff; min-width:0; }
.relay-stat>span { font-size:12px; line-height:1.5; color:#4b6281; }
.relay-stat>strong { display:block; font-size:30px; line-height:1.4; letter-spacing:-.045em; color:var(--ink); margin:6px 0; }
.relay-stat>small { display:block; font-size:11px; line-height:1.7; color:#526680; }
.relay-stats-period { font-size:12px; line-height:1.8; margin:16px 0 24px; }
.relay-request-details { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:18px; font-size:13px; margin:24px 0; }
.relay-request-details dt { font-size:12px; color:#526680; margin-bottom:8px; }
.relay-request-details dd { margin:0; color:var(--ink); overflow-wrap:anywhere; }
.relay-recognized-details { border-top:1px solid #cfddf0; padding-top:18px; }
.relay-recognized-details summary { cursor:pointer; min-height:44px; color:#24518c; font-weight:600; font-size:14px; line-height:1.8; }
.relay-recognized-details summary>span { font-weight:400; color:#526680; }
.relay-recognized-details>p { font-size:13px; line-height:1.8; }
.relay-recognized-table { min-width:660px; white-space:normal; }
.relay-recognized-table th[scope=row] { font-size:12px; font-weight:500; color:var(--ink); }
.relay-recognized-table th,.relay-recognized-table td { font-size:12px; vertical-align:top; overflow-wrap:anywhere; }
.relay-recognized-table code { font-size:12px; }
.relay-upgrade-inline { margin-top:24px; padding:20px; border:1px solid #bfd2ed; border-radius:12px; background:#edf4ff; display:flex; justify-content:space-between; align-items:center; gap:24px; }
.relay-upgrade-inline p { font-size:13px; line-height:1.8; margin:8px 0 0; }
.relay-upgrade-inline>.button { flex-shrink:0; }
@media(max-width:900px) { .relay-stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .relay-usage-card { flex-direction:column; align-items:stretch; gap:16px; } .relay-usage-meter { width:100%; } }
@media(max-width:620px) { .relay-diagnostics { padding:20px; } .relay-diagnostics-heading,.relay-upgrade-inline { flex-direction:column; align-items:flex-start; gap:16px; } .relay-request-details { grid-template-columns:1fr; } .relay-stat { padding:16px; } }
@media(prefers-reduced-motion:reduce) { .relay-entity { transition:none; } .relay-command-chip.is-sending::before { animation:none; } }
@media(max-width:1000px) { .relay-setup-grid { grid-template-columns:1fr; } .relay-page-heading { align-items:flex-start; } .relay-page-heading>.button { margin-top:40px; } }
@media(max-width:740px) { .relay-page { padding-top:30px; } .relay-page-heading { flex-direction:column; gap:20px; } .relay-page-heading>.button { margin-top:0; } .relay-room-entities,.relay-account-list { grid-template-columns:1fr; } .relay-settings-card { padding:24px; } .relay-live-summary { padding:20px; gap:14px; } .relay-live-summary p { width:100%; } .relay-live-summary>.text-button { padding:0; } .relay-plan-strip { padding:18px; gap:12px 20px; } .relay-plan-strip a { margin-left:0; } .relay-free-callout { flex-direction:column; align-items:flex-start; padding:22px; } .relay-page-heading h1 { font-size:34px; } }
@media(max-width:740px) { .footer-conversion { flex-direction:column; align-items:flex-start; gap:22px; } .footer-conversion>div:last-child { align-items:flex-start; } .free-relay-promotion { grid-template-columns:1fr; gap:24px; padding:28px; } .hero-actions .button { font-size:14px; } }
@media(max-width:740px) { .home-large-note { flex-direction:column; align-items:flex-start; padding:22px; } .account-plan-offers { grid-template-columns:1fr; } }
@media(max-width:390px) { .relay-entity { padding:18px; gap:12px; } .relay-entity-name { font-size:17px; } .relay-state { max-width:110px; } .relay-settings-card { padding:20px; } .relay-sensitive-fieldset { padding:14px; } .relay-package-card>.text-button { margin-left:0; padding-inline:0; } .relay-account-card { padding:20px; } .relay-account-card-top { flex-wrap:wrap; } }
@media(max-width:900px) {
  .use-case-grid { gap:18px; }
  .use-case-card { padding:24px 20px; }
  .use-case-card h3 { font-size:20px; }
  .resource-card { flex-direction:column; padding:26px; gap:20px; }
  .resource-card .content-icon { margin:0; }
}
@media(max-width:620px) {
  .section-intro { font-size:16px; margin-top:0; }
  .use-case-grid,.resource-grid { grid-template-columns:1fr; gap:18px; }
  .use-case-card { padding:26px 24px; }
  .use-case-card h3 { font-size:22px; }
  .resource-card { padding:26px 24px; }
  .resource-card h3 { font-size:23px; }
  .connection-details-list>div { grid-template-columns:1fr; gap:8px; }
  .guide-article { margin-bottom:24px; }
}

/* Annual subscription checkout and private payment status. */
.billing-paypal-button { background:#174ea6; border-color:#174ea6; }
.billing-renewal-consent { color:#354d6d; font-size:13px; line-height:1.85; }
.billing-purchase-terms { display:block; margin-top:14px; font-size:12px; line-height:1.8; }
.billing-purchase-terms a,.billing-status-link { text-decoration:underline; text-underline-offset:3px; }
.billing-result { margin-top:16px; overflow-wrap:anywhere; }
.billing-test-notice { margin-top:24px; }
.billing-test-label { color:#715117; font-size:13px; font-weight:600; }
.billing-subscription-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-top:26px; }
.billing-subscription { border:1px solid #c8d8ed; background:#f8fbff; border-radius:16px; padding:28px; min-width:0; }
.billing-subscription-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.billing-subscription-heading h3 { font-size:21px; line-height:1.4; margin:0; letter-spacing:-.02em; }
.billing-subscription-description { font-size:14px; line-height:1.85; margin:20px 0; }
.billing-subscription-details { display:grid; grid-template-columns:1fr; gap:16px; margin:24px 0; }
.billing-subscription-details dt { font-size:12px; color:#526680; margin-bottom:6px; }
.billing-subscription-details dd { font-size:14px; color:var(--ink); margin:0; overflow-wrap:anywhere; }
.billing-cancel { border-top:1px solid #ccdaed; padding-top:16px; margin-top:20px; }
.billing-cancel summary { cursor:pointer; min-height:44px; font-size:14px; color:#24518c; font-weight:600; line-height:1.8; }
.billing-cancel>p { font-size:13px; line-height:1.85; margin:10px 0 18px; }
.billing-status-link { display:inline-block; font-size:13px; min-height:44px; line-height:1.8; padding-top:18px; }
.billing-page { max-width:920px; padding-top:40px; padding-bottom:70px; }
.billing-page-heading { margin:28px 0 36px; }
.billing-page-heading h1 { font-size:clamp(32px,5vw,48px); letter-spacing:-.045em; line-height:1.2; margin:12px 0 20px; }
.billing-page-heading p { font-size:17px; line-height:1.8; }
.billing-page h2 { font-size:25px; letter-spacing:-.025em; line-height:1.35; margin-bottom:22px; }
.billing-page .billing-subscription { background:#f8fbff; }
.billing-page .billing-subscription-details { grid-template-columns:repeat(3,minmax(0,1fr)); }
.billing-poll-message { color:#3c5574; font-size:14px; line-height:1.8; margin:22px 0; }
.billing-next-actions { display:flex; gap:14px; flex-wrap:wrap; }
.billing-help { border-top:1px solid #cfddf0; padding-top:30px; margin-top:40px; }
.billing-help>p { font-size:15px; line-height:1.85; }
.billing-help>a { display:inline-block; font-size:14px; margin-top:12px; text-decoration:underline; text-underline-offset:3px; }
.billing-page [hidden],.billing-account [hidden],[data-paypal-offer] [hidden] { display:none!important; }
@media(max-width:740px) { .billing-subscription-list { grid-template-columns:1fr; } .billing-page .billing-subscription-details { grid-template-columns:1fr; } .billing-subscription { padding:22px; } .billing-page { padding-top:30px; padding-bottom:50px; } }

/* Accessible, static product diagrams and an illustrative Relay preview. */
.service-visuals { margin-top:48px; margin-bottom:54px; }
.service-visuals-intro { max-width:78ch; font-size:16px; line-height:1.85; margin:0 0 28px; }
.service-visuals-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.service-visuals-card { min-width:0; display:flex; flex-direction:column; padding:28px; border:1px solid #c5d7ee; border-radius:22px; background:linear-gradient(150deg,#fff,#f3f8ff); }
.service-visuals-card--relay { background:linear-gradient(150deg,#fff,#f0f8fa); border-color:#bfd8de; }
.service-visuals-card-heading { display:flex; gap:16px; align-items:center; margin-bottom:28px; }
.service-visuals-card-heading>div { min-width:0; }
.service-visuals-product-icon { display:flex; justify-content:center; align-items:center; width:48px; height:48px; border:1px solid #c5d8f4; border-radius:14px; background:#eaf2ff; color:#1c59b4; flex-shrink:0; }
.service-visuals-card--relay .service-visuals-product-icon { background:#e7f3f6; color:#246674; border-color:#c0dbe2; }
.service-visuals-kicker { font-size:10px; line-height:1.7; letter-spacing:.075em; font-weight:650; color:#3d5b7c; margin:0 0 8px; }
.service-visuals-card h3 { font-size:25px; line-height:1.25; letter-spacing:-.035em; margin:0; }
.service-visuals-diagram { margin:0 0 26px; }
.service-visuals-flow { display:grid; grid-template-columns:minmax(0,1fr) 46px minmax(0,1fr) 46px minmax(0,1fr); align-items:start; gap:4px; padding:8px 0 22px; }
.service-visuals-node { min-width:0; display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; }
.service-visuals-node-icon { width:62px; height:62px; display:flex; align-items:center; justify-content:center; border:1px solid #bcd0eb; border-radius:19px; background:#fff; box-shadow:0 5px 14px #17365708; color:#2058a8; }
.service-visuals-node-icon>.icon { width:30px; height:30px; }
.service-visuals-node--service .service-visuals-node-icon { background:#1d61d0; border-color:#1d61d0; color:#fff; box-shadow:0 7px 18px #1d61d019; }
.service-visuals-node--outbound .service-visuals-node-icon { background:#edf7f8; border-color:#a6cbd3; color:#245f6c; }
.service-visuals-node>strong { font-size:13px; line-height:1.5; font-weight:650; color:var(--ink); }
.service-visuals-node>span:last-child { font-size:11px; line-height:1.65; color:#526680; }
.service-visuals-link { color:#2c5ea0; text-align:center; padding-top:20px; min-width:0; }
.service-visuals-link>svg { width:40px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.service-visuals-link>span { display:block; font-size:11px; line-height:1.6; margin-top:8px; color:#325981; }
.service-visuals-link--back>svg { transform:rotate(180deg); }
.service-visuals-link--http,.service-visuals-link--http>span { color:#79511e; }
.service-visuals-diagram figcaption { margin:0; font-size:12px; line-height:1.9; color:#405978; }
.service-visuals-outcome { display:flex; gap:12px; align-items:flex-start; padding-top:20px; margin-top:auto; border-top:1px solid #ccdaed; }
.service-visuals-outcome>span { display:flex; align-items:center; justify-content:center; border-radius:9px; width:34px; height:34px; background:#e7effc; color:#24589d; flex-shrink:0; }
.service-visuals-outcome .icon { width:18px; height:18px; }
.service-visuals-outcome strong { display:block; font-size:14px; line-height:1.65; color:var(--ink); }
.service-visuals-outcome p { font-size:12px; line-height:1.9; margin:6px 0 0; color:#405978; }
.service-visuals-showcase { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:48px; margin-top:34px; }
.service-visuals-example { margin:0; min-width:0; padding:26px; border:1px solid #bdd1ed; border-radius:22px; background:#fff; box-shadow:0 12px 32px #19395b08; }
.service-visuals-example-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:22px; }
.service-visuals-example-heading>div { min-width:0; }
.service-visuals-example-heading p { color:#405e81; font-size:10px; font-weight:650; letter-spacing:.07em; margin:0 0 10px; }
.service-visuals-example-heading h3 { font-size:24px; line-height:1.3; margin:0; }
.service-visuals-example-heading>span { display:block; color:#3d5b7c; font-size:9px; letter-spacing:.05em; font-weight:650; padding:6px 8px; border:1px solid #c8d9ef; border-radius:6px; background:#f3f7fd; white-space:nowrap; }
.service-visuals-readings { display:grid; gap:10px; margin:0 0 20px; }
.service-visuals-readings>div { display:flex; gap:16px; align-items:center; justify-content:space-between; background:#f5f8fd; border:1px solid #dde7f4; border-radius:11px; padding:13px 14px; }
.service-visuals-readings dt { display:flex; gap:12px; align-items:center; font-size:13px; line-height:1.55; color:var(--ink); min-width:0; }
.service-visuals-readings dt>span { color:#235ca8; display:flex; align-items:center; flex-shrink:0; }
.service-visuals-readings .icon { width:20px; height:20px; }
.service-visuals-readings dd { font-size:13px; line-height:1.6; color:#23476e; font-weight:650; margin:0; text-align:right; flex-shrink:0; }
.service-visuals-example figcaption { color:#526680; font-size:11px; line-height:1.85; }
.service-visuals-resources { min-width:0; }
.service-visuals-resources>.eyebrow { display:block; margin-bottom:12px; }
.service-visuals-resources h3 { font-size:29px; line-height:1.25; letter-spacing:-.035em; margin-bottom:18px; }
.service-visuals-resources>p { font-size:14px; line-height:1.9; margin-bottom:22px; }
.service-visuals-resource-list { list-style:none; padding:0; margin:0; }
.service-visuals-resource-list li+li { border-top:1px solid #d7e3f2; }
.service-visuals-resource-list a { display:flex; align-items:center; gap:14px; min-height:72px; padding:14px 0; color:#1c538e; }
.service-visuals-resource-list a>span:first-child { display:flex; align-items:center; justify-content:center; width:34px; height:34px; border:1px solid #cbdcf0; background:#edf4ff; border-radius:10px; flex-shrink:0; }
.service-visuals-resource-list a>span:nth-child(2) { min-width:0; }
.service-visuals-resource-list strong { display:block; font-size:13px; line-height:1.6; font-weight:650; text-decoration:underline; text-underline-offset:3px; }
.service-visuals-resource-list small { display:block; margin-top:4px; color:#526680; font-size:11px; line-height:1.75; }
.service-visuals-resource-list a>span:last-child { color:#2d5d9f; margin-left:auto; flex-shrink:0; }
.home-everyday-overview { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:44px; align-items:center; margin-bottom:32px; }
.home-everyday-overview .section-intro { margin-bottom:0; }
.home-away-illustration { margin:0; min-width:0; }
.home-away-illustration img { display:block; width:100%; height:auto; border-radius:22px; border:1px solid #d5e2f4; background:#eef5ff; }
.home-away-illustration figcaption { font-size:11px; line-height:1.8; color:#526680; margin-top:12px; }
@media(max-width:1000px) {
  .service-visuals-card { padding:22px; }
  .service-visuals-card-heading { gap:12px; }
  .service-visuals-card h3 { font-size:22px; }
  .service-visuals-product-icon { width:42px; height:42px; }
  .service-visuals-node-icon { width:52px; height:52px; border-radius:16px; }
  .service-visuals-node-icon>.icon { width:26px; height:26px; }
  .service-visuals-link { padding-top:15px; }
  .service-visuals-showcase { gap:28px; }
  .home-everyday-overview { gap:30px; }
}
@media(max-width:740px) {
  .service-visuals-grid,.service-visuals-showcase,.home-everyday-overview { grid-template-columns:1fr; }
  .service-visuals { margin-top:34px; margin-bottom:34px; }
  .service-visuals-intro { font-size:15px; }
  .service-visuals-card { padding:24px; }
  .service-visuals-card-heading { margin-bottom:24px; }
  .service-visuals-card h3 { font-size:24px; }
  .service-visuals-showcase { gap:28px; margin-top:26px; }
  .service-visuals-example { padding:24px; }
  .service-visuals-resources h3 { font-size:27px; }
  .home-everyday-overview { gap:26px; }
}
@media(max-width:520px) {
  .service-visuals-flow { grid-template-columns:1fr; gap:12px; padding:0 0 24px; }
  .service-visuals-node { display:grid; grid-template-columns:52px minmax(0,1fr); column-gap:16px; row-gap:3px; align-items:center; text-align:left; }
  .service-visuals-node-icon { grid-column:1; grid-row:1/3; width:52px; height:52px; }
  .service-visuals-node>strong { grid-column:2; font-size:14px; line-height:1.5; align-self:end; }
  .service-visuals-node>span:last-child { grid-column:2; font-size:12px; line-height:1.7; align-self:start; }
  .service-visuals-link { display:flex; align-items:center; gap:20px; padding:0; margin-left:6px; text-align:left; min-height:40px; }
  .service-visuals-link>svg { width:40px; height:40px; transform:rotate(90deg); }
  .service-visuals-link--back>svg { transform:rotate(-90deg); }
  .service-visuals-link>span { font-size:12px; line-height:1.7; margin:0; }
}
@media(max-width:390px) {
  .service-visuals-card { padding:20px 16px; }
  .service-visuals-card h3 { font-size:22px; }
  .service-visuals-kicker { font-size:10px; }
  .service-visuals-product-icon { width:38px; height:38px; border-radius:11px; }
  .service-visuals-node-icon { border-radius:16px; }
  .service-visuals-node-icon>.icon { width:23px; height:23px; }
  .service-visuals-example { padding:20px; }
  .service-visuals-example-heading { flex-direction:column; gap:14px; }
  .service-visuals-example-heading h3 { font-size:23px; }
  .service-visuals-readings>div { gap:8px; padding:12px 10px; }
  .service-visuals-readings dt { font-size:12px; gap:8px; }
  .service-visuals-readings dd { font-size:12px; }
  .service-visuals-resource-list a { gap:10px; }
  .service-visuals-resource-list strong { font-size:12px; }
}

/* Focused, signed-in address setup and the pre-purchase connection test. */
/* Keep the complete navigation readable on small desktop screens. */
.page-plans .article-intro a[href="/connection-test"] { text-decoration:underline; text-underline-offset:3px; }
@media(min-width:851px) and (max-width:1100px) {
  .site-nav { gap:12px; font-size:13px; }
  .site-nav .login-link { margin-left:0; }
  .site-nav .button-small { padding-inline:13px; }
}
.account-connect-license { margin-top:18px; align-self:flex-start; }
.account-address-start>p { max-width:78ch; font-size:14px; line-height:1.9; }
.account-connection-choices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:24px 0; }
.account-connection-choice { display:flex; flex-direction:column; align-items:flex-start; gap:20px; min-width:0; padding:22px; border:1px solid #c8d8ed; border-radius:14px; background:#f7faff; }
.account-connection-choice strong { display:block; font-size:16px; line-height:1.55; color:var(--ink); }
.account-connection-choice p { margin:8px 0; font-size:13px; line-height:1.8; }
.account-connection-choice small { color:#526680; font-size:12px; line-height:1.8; }
.account-connection-choice>.button { margin-top:auto; }
.account-address-empty { padding:24px; border:1px solid #ccdbee; background:#f6faff; border-radius:14px; margin:22px 0; }
.account-address-empty p { font-size:14px; line-height:1.9; margin:12px 0; }
.account-address-empty .form-actions { flex-wrap:wrap; gap:12px; margin-top:20px; }
.connect-page,.connection-test-page { max-width:880px; padding-top:36px; padding-bottom:64px; }
.connect-page-heading { margin:12px 0 30px; }
.connect-page-heading h1 { font-size:clamp(32px,4.5vw,44px); line-height:1.18; letter-spacing:-.04em; margin:14px 0 20px; }
.connect-page-heading>p { font-size:16px; line-height:1.85; max-width:68ch; margin:0; }
.connect-license-summary { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:18px 22px; border:1px solid #c6d8f0; border-radius:14px; background:#eff5ff; font-size:14px; margin-bottom:26px; }
.connect-license-summary>.icon { color:#2058a8; }
.connect-license-summary>a { font-size:12px; margin-left:auto; text-decoration:underline; text-underline-offset:3px; }
.connect-progress { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; list-style:none; padding:0; margin:0 0 26px; }
.connect-progress li { display:flex; align-items:center; gap:10px; font-size:13px; line-height:1.6; color:#526680; padding:12px 0; border-bottom:2px solid #d7e2f0; }
.connect-progress li>span { display:flex; align-items:center; justify-content:center; width:28px; height:28px; border:1px solid #bfd0e7; background:#f6f9fd; color:#405b7e; border-radius:50%; font-size:12px; font-weight:650; flex-shrink:0; }
.connect-progress li[aria-current=step] { color:#154e9c; border-color:#1d61d0; font-weight:650; }
.connect-progress li[aria-current=step]>span { background:#1d61d0; border-color:#1d61d0; color:#fff; }
.connect-progress li.is-complete { border-color:#6a9ca3; color:#28626b; }
.connect-progress li.is-complete>span { background:#eaf5f6; border-color:#a4c9cf; color:#28626b; }
.connect-wizard,.connection-test-card { border:1px solid #cbdbee; border-radius:20px; padding:32px; background:#fff; box-shadow:0 10px 28px #19395b05; }
.connect-form-help { font-size:13px; line-height:1.85; margin:0 0 26px; }
.connect-step h2,.connection-test-results h2 { font-size:24px; line-height:1.3; letter-spacing:-.025em; margin:0 0 24px; }
.connect-step-lead { font-size:14px; line-height:1.9; margin:0 0 24px; }
.connect-wizard .form-grid,.connection-test-card .form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
.connect-wizard .field,.connection-test-card .field { margin-bottom:22px; min-width:0; }
.connect-wizard .field small,.connection-test-card .field small { display:block; font-size:12px; line-height:1.85; margin-top:8px; }
.connect-wizard a:not(.button),.connection-test-card a:not(.button),.connect-footer-note a { text-decoration:underline; text-underline-offset:3px; }
.connect-wizard .domain-input { flex-wrap:wrap; }
.connect-wizard .domain-input>input { min-width:150px; flex:1 1 160px; }
.connect-wizard .domain-input>span { flex:0 1 auto; padding:13px 14px; font-size:13px; overflow-wrap:anywhere; }
.connect-advanced { border-top:1px solid #d7e3f2; padding-top:14px; margin-top:20px; }
.connect-advanced summary { cursor:pointer; min-height:44px; font-size:13px; font-weight:600; color:#24518e; line-height:1.8; padding:5px 0; }
.connect-advanced[open] summary { margin-bottom:16px; }
.connect-advanced p { font-size:13px; line-height:1.9; }
.connect-advanced pre { margin:18px 0 0; padding:18px; border-radius:10px; background:#edf4ff; color:#254971; overflow:auto; white-space:pre; max-height:460px; font-size:12px; line-height:1.9; }
.connect-step-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:24px; }
.connect-step-actions .button { white-space:normal; text-align:center; }
.domain-name-status { margin:8px 0 0; padding:9px 12px; border-radius:7px; font-size:14px; line-height:1.5; color:#43556e; background:#f1f5fa; overflow-wrap:anywhere; }
.domain-name-status[data-state="available"] { color:#216349; background:#edf8f2; }
.domain-name-status[data-state="invalid"],.domain-name-status[data-state="taken"],.domain-name-status[data-state="error"] { color:#9b2438; background:#fff0f2; }
.domain-name-status[data-state="checking"] { color:#765415; background:#fffae9; }
.connect-source-address { display:flex; flex-direction:column; gap:7px; padding:18px 22px; border:1px solid #bcd2ee; background:#edf4ff; border-radius:12px; margin:0 0 24px; }
.connect-source-address>span { font-size:12px; line-height:1.8; color:#405b7e; }
.connect-source-address>strong { font-size:24px; letter-spacing:-.02em; color:#174e98; overflow-wrap:anywhere; }
.connect-home-checklist { padding-left:22px; margin:0; font-size:14px; line-height:1.9; color:#405978; }
.connect-home-checklist li+li { margin-top:18px; }
.connect-home-checklist strong { color:var(--ink); }
.connect-help-links { margin:22px 0 0; font-size:13px; line-height:1.9; }
.connect-http-consent { padding:18px; border:1px solid #b8cce7; background:#f3f8ff; border-radius:12px; margin-top:22px; }
.connect-http-consent .checkbox-label { align-items:flex-start; line-height:1.85; }
.connect-success { padding:30px; border:1px solid #c6d8f0; border-radius:18px; background:#f7faff; margin-top:26px; }
.connect-success h2,.connect-success h3 { font-size:26px; line-height:1.3; margin:0 0 18px; }
.connect-success p { font-size:14px; line-height:1.9; }
.connect-success a:not(.button) { text-decoration:underline; text-underline-offset:3px; }
.connect-heartbeat-details { margin-top:24px; }
.connect-footer-note { font-size:13px; line-height:1.9; color:#526680; margin:24px 0 0; }
.connect-wizard [hidden],.connect-page [hidden],.connection-test-page [hidden] { display:none!important; }
.connection-test-card>#connection-test-help { font-size:14px; line-height:1.9; margin-bottom:26px; }
.connection-test-results { margin-top:26px; border-top:1px solid #ccdcee; padding-top:28px; }
.connection-test-statuses { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:0 0 20px; }
.connection-test-statuses>div { background:#f3f8ff; border:1px solid #ccdcee; border-radius:12px; padding:18px; min-width:0; }
.connection-test-statuses dt { font-size:12px; color:#405b7e; line-height:1.7; margin-bottom:8px; }
.connection-test-statuses dd { font-size:16px; font-weight:650; color:var(--ink); margin:0; line-height:1.6; overflow-wrap:anywhere; }
.connection-test-results p,.connection-test-results li { font-size:14px; line-height:1.9; }
.connection-test-results ul { padding-left:20px; margin:16px 0; }
.connection-test-results li+li { margin-top:8px; }
.connection-test-results .connection-test-meta { font-size:12px; line-height:1.85; overflow-wrap:anywhere; }
.connection-test-proof-note { background:#eff5fd; border:1px solid #cbdbee; border-radius:12px; padding:18px; }
.connection-test-next-steps { background:#f3f8ff; border:1px solid #ccdcee; border-radius:12px; padding:20px; margin:20px 0; }
.connection-test-next-steps h3 { font-size:20px; line-height:1.4; margin:0 0 14px; }
.connection-test-next-steps ol { margin:0 0 16px; padding-left:22px; }
.connection-test-next-steps p { margin:0; }
.connection-test-relay-note { padding:26px 0; margin-top:14px; }
.connection-test-relay-note h2 { font-size:26px; line-height:1.3; margin-bottom:18px; }
.connection-test-relay-note p { font-size:14px; line-height:1.9; }
.connection-test-relay-note>.inline-link { display:inline-block; margin:14px 0 0 14px; font-size:13px; }
@media(max-width:740px) {
  .account-connection-choices { grid-template-columns:1fr; }
  .connect-page,.connection-test-page { padding-top:28px; padding-bottom:44px; }
  .connect-wizard,.connection-test-card,.connect-success { padding:24px; }
  .connect-license-summary { padding:18px; }
  .connect-license-summary>a { margin-left:0; }
  .connect-progress { gap:12px; }
  .connect-progress li { flex-direction:column; align-items:flex-start; gap:8px; font-size:12px; }
  .connect-progress li>span { width:26px; height:26px; }
  .connect-step h2,.connection-test-results h2 { font-size:22px; }
}
@media(max-width:620px) {
  .connect-wizard .form-grid,.connection-test-card .form-grid,.connection-test-statuses { grid-template-columns:1fr; gap:0; }
  .connection-test-statuses { gap:12px; }
  .connect-step-actions { align-items:stretch; }
  .connect-step-actions>.button { flex:1 1 150px; }
  .connect-wizard .domain-input>span { width:100%; border-top:1px solid #cdd9e9; padding:10px 12px; }
}
@media(max-width:390px) {
  .connect-wizard,.connection-test-card,.connect-success { padding:20px; border-radius:16px; }
  .connect-source-address { padding:18px; }
  .connect-home-checklist { padding-left:18px; font-size:13px; }
  .connect-http-consent { padding:16px; }
  .connect-success h2,.connect-success h3 { font-size:24px; }
  .connection-test-relay-note>.inline-link { margin-left:0; }
  .account-address-empty { padding:20px; }
}

/* Relay is a small home control page: one list, three setup steps. */
.relay-home,.relay-simple-setup { max-width:900px; padding-top:30px; }
.relay-home .relay-page-heading,.relay-simple-setup .relay-page-heading { gap:18px; margin-bottom:22px; }
.relay-home .relay-page-heading h1,.relay-simple-setup .relay-page-heading h1 { font-size:clamp(30px,4vw,38px); margin:10px 0 12px; }
.relay-home .relay-page-heading p,.relay-simple-setup .relay-page-heading p { font-size:15px; line-height:1.7; }
.relay-home .relay-live-summary { padding:15px 18px; gap:12px; border-radius:12px; }
.relay-home .relay-refresh-status:empty { min-height:0; margin:0; }
.relay-home .relay-refresh-status:not(:empty) { margin:10px 0; }
.relay-home .relay-category { margin-top:24px; }
.relay-home .relay-category>h2 { font-size:13px; letter-spacing:.07em; text-transform:uppercase; color:#4a6180; margin:0 0 10px; }
.relay-home .relay-room { margin-top:12px; }
.relay-home .relay-room-heading { margin:12px 0 7px; }
.relay-home .relay-room-entities { display:block; border:1px solid #d3dff0; border-radius:14px; overflow:hidden; background:#fff; }
.relay-home .relay-entity { grid-template-columns:minmax(0,1fr) auto auto; gap:12px; padding:14px 16px; border:0; border-left:3px solid transparent; border-bottom:1px solid #e4ebf4; border-radius:0; }
.relay-home .relay-entity:last-child { border-bottom:0; }
.relay-home .relay-entity-name { font-size:15px; letter-spacing:0; line-height:1.5; margin:0 0 2px; }
.relay-home .relay-entity-id { font-size:11px; background:transparent; padding:0; }
.relay-home .relay-entity-changed { margin-top:2px; font-size:11px; }
.relay-home .relay-entity-actions { grid-column:auto; gap:6px; }
.relay-home .relay-state { font-size:13px; border-radius:999px; padding:5px 10px; max-width:150px; }
.relay-home .relay-action { min-width:55px; padding:8px 12px; font-size:13px; }
.relay-home .relay-entity.is-pending { border-left-color:#c48e2e; }
.relay-home .relay-entity.is-sent { border-left-color:#6697d8; }
.relay-home .relay-command { padding-top:7px; }
.relay-home .relay-help-strip { margin-top:24px; padding:16px 0; }
.relay-more { border:1px solid #d3dff0; background:#fff; border-radius:12px; margin:14px 0; padding:0 18px; min-width:0; }
.relay-more>summary { cursor:pointer; min-height:48px; padding:13px 0; color:#24518c; font-size:14px; font-weight:600; line-height:1.65; }
.relay-more>p { font-size:14px; line-height:1.8; }
.relay-more .relay-diagnostics { border:0; border-top:1px solid #d3dff0; padding:20px 0; margin:0; border-radius:0; background:transparent; }
.relay-more .relay-diagnostics-heading h2 { font-size:22px; }
.relay-footer-links { display:flex; justify-content:center; flex-wrap:wrap; gap:12px 24px; padding:24px 16px; font-size:13px; }
.relay-footer-links a { text-decoration:underline; text-underline-offset:3px; min-height:30px; }
.relay-simple-setup .relay-settings-card { padding:24px; border-radius:16px; margin-bottom:20px; }
.relay-simple-setup .relay-settings-card h2 { font-size:22px; margin:8px 0 14px; }
.relay-simple-setup .relay-plan-strip { padding:13px 18px; gap:12px 20px; margin-bottom:22px; }
.relay-setup-progress { display:flex; flex-wrap:wrap; gap:10px 24px; padding:0; margin:0 0 24px; list-style:none; font-size:14px; color:#4a6180; }
.relay-setup-step { margin-top:20px; }
.relay-connected-summary { padding:14px 18px; border:1px solid #b8dac9; border-radius:12px; background:#f1faf5; font-size:14px; line-height:1.8; }
.relay-connected-summary:not(.is-connected):not(.is-warning) { background:#f3f8ff; border-color:#ccdcee; color:#3c587d; }
.relay-connected-summary.is-warning { background:#fff0f2; border-color:#e7b9c3; color:#982c3c; }
.relay-extra-settings { margin:16px 0; min-width:0; }
.relay-extra-settings>summary { cursor:pointer; min-height:44px; padding:10px 0; color:#24518c; font-size:14px; font-weight:600; line-height:1.7; }
.relay-extra-settings[open]>summary { margin-bottom:12px; }
.relay-extra-settings>p { font-size:14px; line-height:1.8; }
.relay-token-panel { border:1px solid #ccdcee; border-radius:12px; padding:18px; margin-top:22px; background:#f3f8ff; }
.relay-token-panel h3 { font-size:16px; line-height:1.5; margin:0 0 14px; }
.relay-token-panel input { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:13px; background:#fff; }
.relay-token-panel .relay-management-actions { gap:8px 12px; margin-top:12px; }
.relay-simple-setup [data-relay-package],.relay-simple-setup [data-relay-configuration] { max-height:420px; overflow:auto; white-space:pre; border-radius:12px; background:#f5f8fc; color:#243d5d; padding:18px; font-size:12px; line-height:1.65; margin:18px 0; }
.relay-extra-settings .relay-sensitive-fieldset { margin:10px 0 20px; }
.relay-simple-setup .relay-extra-settings.relay-settings-card { padding-top:8px; padding-bottom:8px; }
.relay-simple-setup .relay-extra-settings .relay-diagnostics { border:0; padding:8px 0 12px; margin:0; }
.relay-install-steps { padding-left:22px; margin:20px 0; font-size:14px; line-height:1.9; }
.relay-install-steps li { margin-bottom:10px; padding-left:3px; }
.relay-setup-progress a { min-height:36px; display:inline-flex; align-items:center; text-decoration:underline; text-underline-offset:3px; }
@media(max-width:620px) {
  .relay-home .relay-page-heading,.relay-simple-setup .relay-page-heading { flex-direction:column; align-items:flex-start; }
  .relay-home .relay-live-summary p { width:100%; overflow-wrap:anywhere; }
  .relay-home .relay-entity { grid-template-columns:minmax(0,1fr) auto; padding:13px 12px; gap:8px 12px; }
  .relay-home .relay-entity-actions { grid-column:1/-1; justify-content:flex-end; }
  .relay-home .relay-action { min-width:62px; }
  .relay-home .relay-state { max-width:105px; }
  .relay-home .relay-help-strip { gap:12px; }
  .relay-simple-setup .relay-settings-card { padding:20px; }
  .relay-more { padding:0 14px; }
}

/* The private home dashboard follows the compact Home prototype. */
.page-relay-dashboard {
  --relay-background:#f4f6fa; --relay-panel:#fff; --relay-ink:#172b45;
  --relay-muted:#526680; --relay-line:#d7e1ed; --relay-accent:#245ec2;
  --relay-on:#176541; --relay-on-bg:#e4f3eb; --relay-off:#526072; --relay-off-bg:#edf1f6;
  --relay-error:#a52b3d; --relay-error-bg:#fff0f2;
  --relay-pending:#80511a; --relay-pending-bg:#fff8e9; --relay-pending-line:#d69b3d;
  --relay-sent:#24538f; --relay-sent-bg:#edf5ff; --relay-sent-line:#76a3df;
  background:var(--relay-background);
}
.page-relay-dashboard .relay-home { max-width:760px; padding-top:18px; padding-bottom:44px; color:var(--relay-ink); }
.relay-home .relay-home-topbar { position:sticky; top:8px; z-index:20; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px; padding:12px 16px; border:1px solid var(--relay-line); border-radius:14px; background:var(--relay-panel); box-shadow:0 3px 14px #19334f08; }
.relay-home .relay-home-topbar h1 { margin:0; font-size:21px; letter-spacing:-.02em; line-height:1.3; color:var(--relay-ink); }
.relay-home .relay-live-summary { display:flex; flex-direction:column; justify-content:center; align-items:flex-end; gap:3px; min-width:0; padding:0; border:0; background:transparent; }
.relay-home .relay-live-label { font-size:12px; gap:7px; color:var(--relay-muted); }
.relay-home .relay-live-label strong { font-weight:600; }
.relay-home .relay-live-summary p { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:0; width:auto; color:var(--relay-muted); font-size:12px; line-height:1.65; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; text-align:right; }
.relay-home .relay-summary-separator { padding:0 6px; }
.relay-home .relay-home-logout { min-height:44px; padding:7px 0 7px 5px; color:var(--relay-muted); font-size:12px; }
.relay-home .relay-home-utility { display:flex; flex-wrap:wrap; align-items:center; gap:4px 22px; padding:8px 3px 0; font-size:12px; }
.relay-home .relay-home-utility a,.relay-home .relay-home-utility button { min-height:44px; display:inline-flex; align-items:center; font-size:12px; color:var(--relay-accent); }
.relay-home .relay-home-utility button { margin-left:auto; padding:0; }
.relay-home .relay-home-plan { color:var(--relay-muted); font-size:12px; line-height:1.8; margin:0 3px 16px; }
.relay-home .relay-dot { width:9px; height:9px; background:var(--relay-on); box-shadow:none; animation:relay-home-pulse 2s infinite; }
.relay-home .relay-dot.is-stale { background:var(--relay-error); animation:none; box-shadow:none; }
@keyframes relay-home-pulse { 0% { box-shadow:0 0 0 0 #19804640; } 70% { box-shadow:0 0 0 6px #19804600; } 100% { box-shadow:0 0 0 0 #19804600; } }
.relay-home .relay-category { margin-top:22px; }
.relay-home .relay-category>h2 { color:var(--relay-muted); font-size:12px; letter-spacing:.08em; margin:0 0 8px 4px; }
.relay-home .relay-category-card { border:1px solid var(--relay-line); border-radius:14px; overflow:hidden; background:var(--relay-panel); box-shadow:0 2px 6px #19334f05; }
.relay-home .relay-room { margin:0; }
.relay-home .relay-room-heading { padding:8px 15px; margin:0; font-size:11px; line-height:1.6; font-weight:650; letter-spacing:.045em; color:var(--relay-muted); background:var(--relay-background); border-bottom:1px solid var(--relay-line); }
.relay-home .relay-room:not(:first-child) .relay-room-heading { border-top:1px solid var(--relay-line); }
.relay-home .relay-room-entities { border:0; border-radius:0; background:transparent; }
.relay-home .relay-entity { padding:13px 15px; gap:10px 12px; background:var(--relay-panel); border-bottom-color:var(--relay-line); }
.relay-home .relay-entity-name { color:var(--relay-ink); }
.relay-home .relay-entity-id,.relay-home .relay-entity-changed { color:var(--relay-muted); }
.relay-home .relay-state { color:var(--relay-off); background:var(--relay-off-bg); font-size:12px; font-weight:650; line-height:1.5; }
.relay-home .relay-state.is-on { color:var(--relay-on); background:var(--relay-on-bg); }
.relay-home .relay-state.is-unavailable { color:var(--relay-error); background:var(--relay-error-bg); }
.relay-home .relay-state.is-value { color:var(--relay-ink); background:transparent; font-size:14px; padding-inline:2px; }
.relay-home .relay-action { border-color:var(--relay-line); color:var(--relay-ink); background:var(--relay-panel); }
.relay-home .relay-action:hover:not(:disabled) { border-color:var(--relay-accent); background:var(--relay-background); }
.relay-home .relay-action.is-active.is-positive { color:#fff; background:#176541; border-color:#176541; }
.relay-home .relay-action.is-active.is-negative { color:#fff; background:#526072; border-color:#526072; }
.relay-home .relay-entity.is-pending { background:var(--relay-pending-bg); border-left-color:var(--relay-pending-line); }
.relay-home .relay-entity.is-sent,.relay-home .relay-entity.is-requesting { background:var(--relay-sent-bg); border-left-color:var(--relay-sent-line); }
.relay-home .relay-command { border:0; padding-top:2px; gap:8px; }
.relay-home .relay-command-chip { display:inline-block; padding:3px 9px; border:1px solid var(--relay-pending-line); border-radius:999px; background:var(--relay-pending-bg); color:var(--relay-pending); font-size:12px; font-variant-numeric:tabular-nums; }
.relay-home .relay-entity.is-sent .relay-command-chip,.relay-home .relay-entity.is-requesting .relay-command-chip { background:var(--relay-sent-bg); color:var(--relay-sent); border-color:var(--relay-sent-line); }
.relay-home .relay-command-chip.is-sending::before { border-color:var(--relay-sent-line); border-top-color:var(--relay-sent); width:11px; height:11px; margin-right:6px; }
.relay-home .relay-cancel { color:var(--relay-pending); padding:4px 2px; }
.relay-home .relay-home-stale { border-color:var(--relay-error); background:var(--relay-error-bg); color:var(--relay-error); }
.relay-home .relay-home-stale strong,.relay-home .relay-home-stale p { color:inherit; }
.relay-home .relay-refresh-status { color:var(--relay-muted); }
.relay-home .relay-help-strip { color:var(--relay-muted); border-color:var(--relay-line); }
.relay-home .relay-more { color:var(--relay-ink); border-color:var(--relay-line); background:var(--relay-panel); }
.relay-home .relay-more>summary { color:var(--relay-accent); }
.relay-home .relay-more>p { color:var(--relay-muted); }
.relay-home .relay-empty { color:var(--relay-ink); background:var(--relay-panel); border-color:var(--relay-line); }
.relay-home .relay-layout-settings form { margin:16px 0 22px; }
.relay-home .relay-layout-settings p,.relay-home .relay-layout-settings small { color:var(--relay-muted); }
.relay-home .relay-layout-settings label { color:var(--relay-ink); }
.relay-home .relay-layout-settings textarea { background:var(--relay-panel); border-color:var(--relay-line); color:var(--relay-ink); font-size:13px; }
.relay-home .relay-layout-settings textarea::placeholder { color:var(--relay-muted); opacity:1; }
.relay-home .relay-layout-settings textarea:disabled { background:var(--relay-background); }
.relay-home .relay-layout-settings .notice { background:var(--relay-sent-bg); border-color:var(--relay-sent-line); color:var(--relay-ink); }
.relay-home .relay-layout-settings .text-button { color:var(--relay-accent); }
.relay-home .relay-layout-settings .form-result { color:var(--relay-on); background:var(--relay-on-bg); }
.relay-home .relay-layout-settings .form-result.error { color:var(--relay-error); background:var(--relay-error-bg); }
@media(max-width:620px) {
  .relay-home .relay-home-topbar { gap:8px; padding:10px 12px; }
  .relay-home .relay-home-topbar h1 { font-size:19px; }
  .relay-home .relay-live-summary p { width:auto; }
  .relay-home .relay-home-utility { gap:4px 14px; }
  .relay-home .relay-entity { padding:12px; }
  .relay-home .relay-command { flex-wrap:wrap; }
  .relay-home .relay-command-chip { max-width:100%; overflow-wrap:anywhere; }
}
@media(prefers-color-scheme:dark) {
  .page-relay-dashboard {
    --relay-background:#0d1522; --relay-panel:#162132; --relay-ink:#e8eef8;
    --relay-muted:#a9b8cd; --relay-line:#35465e; --relay-accent:#9fc4ff;
    --relay-on:#91ddb7; --relay-on-bg:#123d2d; --relay-off:#bdc8d9; --relay-off-bg:#283447;
    --relay-error:#ffb4bf; --relay-error-bg:#43222c;
    --relay-pending:#f1c778; --relay-pending-bg:#392e18; --relay-pending-line:#967234;
    --relay-sent:#b2d1ff; --relay-sent-bg:#1a304d; --relay-sent-line:#5179ac;
  }
  .page-relay-dashboard .site-header,.page-relay-dashboard .site-footer { background:var(--relay-panel); color:var(--relay-ink); border-color:var(--relay-line); }
  .page-relay-dashboard .brand,.page-relay-dashboard .site-nav>a:not(.button),.page-relay-dashboard .site-nav .text-button,.page-relay-dashboard .nav-toggle,.page-relay-dashboard .footer-bottom,.page-relay-dashboard .relay-footer-links a { color:var(--relay-muted); }
  .page-relay-dashboard .site-nav { background:var(--relay-panel); }
  .page-relay-dashboard .brand-top,.page-relay-dashboard .relay-home a:not(.button):not(.back-link) { color:var(--relay-accent); }
  .relay-home .relay-diagnostics,.relay-home .relay-stat,.relay-home .relay-usage-card,.relay-home .relay-upgrade-inline { color:var(--relay-ink); background:var(--relay-panel); border-color:var(--relay-line); }
  .relay-home .relay-diagnostics h2,.relay-home .relay-stat>strong,.relay-home .relay-request-details dd,.relay-home .relay-recognized-table th[scope=row],.relay-home .relay-recognized-table code { color:var(--relay-ink); }
  .relay-home .relay-diagnostics-heading p,.relay-home .relay-stat>span,.relay-home .relay-stat>small,.relay-home .relay-request-details dt,.relay-home .relay-usage-meter span,.relay-home .relay-recognized-details summary>span { color:var(--relay-muted); }
  .relay-home .relay-diagnostics p { color:var(--relay-muted); }
  .relay-home .relay-diagnostics .eyebrow { color:var(--relay-accent); }
  .relay-home .relay-recognized-details,.relay-home .relay-more .relay-diagnostics { border-color:var(--relay-line); }
  .relay-home .relay-recognized-details summary,.relay-home .relay-diagnostics-heading>a { color:var(--relay-accent); }
  .relay-home .relay-recognized-table th,.relay-home .relay-recognized-table td { background:var(--relay-panel); border-color:var(--relay-line); color:var(--relay-muted); }
  .relay-home code { background:transparent; color:var(--relay-ink); }
  .relay-home [data-relay-disabled],.relay-home [data-relay-rejection] { background:var(--relay-sent-bg); border-color:var(--relay-sent-line); color:var(--relay-ink); }
  .relay-home [data-relay-error] { color:var(--relay-error); }
}
@media(prefers-reduced-motion:reduce) { .relay-home .relay-dot { animation:none; } }

/* The direct home sign-in is a compact door to the user's dashboard. */
.my-home-auth { max-width:460px; min-height:calc(100svh - 240px); display:flex; align-items:center; padding-top:28px; padding-bottom:40px; }
.my-home-login-card { width:100%; margin:0; padding:30px; border:1px solid #d2dfef; border-radius:16px; box-shadow:0 6px 28px #14315108; }
.my-home-login-card h1 { margin:0 0 14px; font-size:28px; line-height:1.25; letter-spacing:-.035em; }
.my-home-login-card>p { font-size:13px; line-height:1.75; }
.my-home-login-card form { margin-top:22px; }
.my-home-login-card .field { margin-bottom:18px; }
.my-home-login-card .auth-switch { margin:20px 0 0; font-size:12px; }
.my-home-login-card .auth-switch a { display:inline-flex; align-items:center; min-height:32px; text-decoration:underline; text-underline-offset:3px; }
@media(max-width:620px) { .my-home-auth { min-height:0; padding-top:26px; padding-bottom:32px; } .my-home-login-card { padding:24px; } .my-home-login-card h1 { font-size:26px; } }

/* Private Proxy setup keeps contact reports and IP controls in one place. */
.proxy-setup-page { max-width:900px; padding-top:36px; padding-bottom:64px; }
.proxy-setup-heading { margin:20px 0 28px; max-width:720px; }
.proxy-setup-heading h1 { margin:9px 0 14px; font-size:clamp(30px,4vw,42px); letter-spacing:-.045em; line-height:1.15; }
.proxy-setup-heading p { color:#53647c; line-height:1.7; }
.proxy-setup-card { padding:26px; margin-top:20px; border:1px solid #d6e1ef; border-radius:16px; background:#fff; box-shadow:0 5px 24px #18355305; }
.proxy-setup-card h2 { font-size:23px; letter-spacing:-.025em; margin:0 0 14px; overflow-wrap:anywhere; }
.proxy-setup-card p,.proxy-copy-setup li { line-height:1.75; color:#53647c; }
.proxy-card-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.proxy-card-heading .status { flex-shrink:0; }
.proxy-connection-details { display:grid; grid-template-columns:1fr 1fr; gap:20px 26px; margin:20px 0; }
.proxy-connection-details div { min-width:0; }
.proxy-connection-details dt { margin-bottom:6px; color:#52647b; font-size:12px; font-weight:600; }
.proxy-connection-details dd { margin:0; color:#1e3553; font-weight:600; overflow-wrap:anywhere; }
.proxy-setup-card form { margin:20px 0; }
.proxy-setup-card .field { max-width:650px; }
.proxy-setup-card .notice { margin:20px 0; }
.proxy-copy-setup pre { margin:18px 0; border:1px solid #d5e3f3; border-radius:10px; padding:18px; background:#f4f8fe; color:#203751; font:12px/1.7 Consolas,monospace; max-height:380px; max-width:100%; overflow:auto; white-space:pre; }
.proxy-copy-setup section+section { margin-top:28px; }
.proxy-copy-setup ol { padding-left:24px; }
.proxy-copy-setup li+li { margin-top:10px; }
.proxy-setup-actions { display:flex; align-items:center; gap:10px 14px; flex-wrap:wrap; }
.proxy-token-panel { margin-top:26px; border-top:1px solid #d6e1ef; padding-top:24px; }
.proxy-token-panel h3 { margin:0 0 18px; font-size:19px; }
.proxy-token-panel input[readonly] { font:12px/1.5 Consolas,monospace; background:#f5f8fd; color:#233d5d; }
.proxy-setup-card .form-result,.proxy-copy-setup .form-result { color:#216349; background:#edf8f2; border-radius:8px; padding:12px 14px; margin-top:16px; }
.proxy-setup-card .form-result.error,.proxy-copy-setup .form-result.error { color:#9b2438; background:#fff0f2; }
.account-address-actions { display:flex; align-items:center; gap:12px; }
.account-address-actions>a { display:inline-flex; align-items:center; min-height:44px; max-width:130px; line-height:1.4; }
.account-dashboard-access { padding:26px; border:1px solid #d2e0f2; border-radius:18px; background:linear-gradient(135deg,#f3f8ff,#fff); }
.account-dashboard-access>.dashboard-section-title { margin-bottom:10px; }
.account-dashboard-access>.dashboard-section-title .eyebrow { margin-bottom:8px; }
.account-dashboard-access>p { max-width:82ch; margin:0 0 24px; color:#526680; font-size:14px; line-height:1.8; }
.account-dashboard-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.account-dashboard-card { display:flex; flex-direction:column; min-width:0; padding:24px; background:#fff; border:1px solid #cad9ee; border-radius:14px; box-shadow:0 4px 18px #16385306; }
.account-dashboard-card-heading { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px 14px; margin-bottom:16px; }
.account-dashboard-product { display:flex; align-items:center; gap:8px; color:#255ea2; font-size:11px; font-weight:700; letter-spacing:.025em; line-height:1.6; }
.account-dashboard-product>.icon { width:19px; height:19px; flex-shrink:0; }
.account-dashboard-license { color:#536780; font-size:12px; white-space:nowrap; }
.account-dashboard-card h3 { margin:0 0 10px; font-size:22px; line-height:1.3; letter-spacing:-.025em; }
.account-dashboard-card p { font-size:13px; line-height:1.8; margin:0 0 10px; }
.account-dashboard-details { color:#475e7b; }
.account-dashboard-card .account-dashboard-address { color:#203f68; font-weight:600; overflow-wrap:anywhere; }
.account-dashboard-description { color:#526680; }
.account-dashboard-actions { display:flex; flex-direction:column; gap:8px; margin-top:auto; padding-top:14px; }
.account-dashboard-primary { width:100%; min-height:48px; text-align:center; }
.account-dashboard-secondary { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:4px 12px; }
.account-dashboard-secondary>.text-button { min-height:44px; font-size:13px; padding-inline:0; line-height:1.6; }
.account-dashboard-secondary>small { color:#526680; font-size:12px; line-height:1.6; }
.account-dashboard-empty p { margin:10px 0 18px; color:#526680; font-size:14px; line-height:1.8; }
@media(max-width:620px) {
  .account-dashboard-access { padding:20px; border-radius:14px; }
  .account-dashboard-grid { grid-template-columns:1fr; }
  .account-dashboard-card { padding:20px; }
  .account-dashboard-card h3 { font-size:21px; }
  .account-dashboard-secondary { flex-direction:column; align-items:stretch; gap:2px; }
  .account-dashboard-secondary>.text-button { width:100%; justify-content:center; text-align:center; }
  .account-dashboard-secondary>small { text-align:center; }
  .account-dashboard-empty>.button { width:100%; }
  .relay-account-actions>.button,.relay-account-actions>.text-button { width:100%; justify-content:center; text-align:center; }
  .proxy-setup-page { padding-top:24px; padding-bottom:40px; }
  .proxy-setup-card { padding:20px; border-radius:13px; }
  .proxy-setup-card h2 { font-size:21px; }
  .proxy-card-heading { flex-direction:column; gap:0; }
  .proxy-connection-details { grid-template-columns:1fr; gap:18px; }
  .proxy-copy-setup pre { padding:14px; }
  .proxy-setup-actions { gap:10px; }
  .proxy-setup-actions .button { flex:1 1 auto; }
}

/* Product audit: focus on the current setup step and saved reading age. */
[data-relay-stage][hidden]{display:none!important}.relay-secondary-settings{margin:1rem 0;border:1px solid var(--border,#d8dfeb);border-radius:12px;padding:1rem}.relay-secondary-settings>summary{cursor:pointer;font-weight:600}.relay-reported-age{display:block;color:#795a28;margin:.25rem 0}.is-stale-reading .relay-state{background:#fff5dd;color:#695023}.plans-scroll-hint{display:none}@media(max-width:760px){.plans-scroll-hint{display:block;font-size:.875rem;color:#52616a}}