* { box-sizing: border-box; }
  html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
  body {
    margin: 0; background: #fff; color: #1d1d1f;
    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased; text-wrap: pretty;
  }
  a { color: #0e6b78; text-decoration: none; }
  a:hover { color: #14899a; }
  button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
  input, textarea { font-family: inherit; }
  img { display: block; }
  ::selection { background: #0e6b78; color: #fff; }
  @keyframes lxRise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
  @keyframes lxFade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes lxZoom { from { transform: scale(1.06); } to { transform: scale(1); } }
  @keyframes lxDrop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

  .wrap { max-width: 1180px; margin: 0 auto; }

  .btn-dark { background: #1d1d1f; color: #fff; transition: background .3s, color .3s; }
  .btn-dark:hover { background: #0e6b78; color: #fff; }
  .btn-light { background: #fff; color: #1d1d1f; }
  .btn-light:hover { background: #f0f0f0; color: #1d1d1f; }
  .btn-outline { border: 1px solid rgba(0,0,0,.18); color: #1d1d1f; }
  .btn-outline:hover { border-color: #1d1d1f; color: #1d1d1f; }
  .btn-outline-lt { border: 1px solid rgba(255,255,255,.4); color: #fff; }
  .btn-outline-lt:hover { border-color: #fff; color: #fff; }
  .teal { color: #0e6b78; }
  .teal:hover { color: #14899a; }
  .cyan { color: #4ec3d1; }
  .cyan:hover { color: #7fd8e2; }
  .foot-link { text-align: left; font-size: 15px; color: #1d1d1f; }
  .foot-link:hover { color: #0e6b78; }
  .link-ul { color: #fff; border-bottom: 1px solid rgba(255,255,255,.45); padding-bottom: 3px; display: inline-block; }
  .link-ul:hover { border-color: #fff; color: #fff; }
  .card { box-shadow: 0 1px 3px rgba(0,0,0,.07); transition: box-shadow .3s; }
  .card:hover { box-shadow: 0 12px 40px rgba(0,0,0,.12); }
  .card-flat { transition: box-shadow .3s; }
  .card-flat:hover { box-shadow: 0 12px 40px rgba(0,0,0,.12); }
  .tile { transition: box-shadow .3s; }
  .tile:hover { box-shadow: 0 14px 42px rgba(0,0,0,.15); }
  .tile-dark:hover { box-shadow: 0 14px 42px rgba(0,0,0,.24); }
  .social { width: 38px; height: 38px; border-radius: 999px; border: 1px solid rgba(0,0,0,.16);
    display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600;
    color: #1d1d1f; transition: all .25s; }
  .social:hover { border-color: #1d1d1f; background: #fff; color: #1d1d1f; }
  .pill-btn { padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(0,0,0,.16); font-size: 13px;
    color: #1d1d1f; transition: all .25s; }
  .pill-btn:hover { border-color: #1d1d1f; background: #fff; }

  .nav-item { position: relative; padding: 19px 14px; font-size: 14px; opacity: .75; transition: opacity .2s; white-space: nowrap; }
  .nav-item:hover { opacity: 1; }
  .nav-item.on { opacity: 1; }

  .arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 8; border: 0; padding: 0;
    background: transparent; border-radius: 999px; width: 54px; height: 54px; }
  .arrow > span { position: absolute; inset: 3px; border-radius: 999px; background: rgba(18,18,20,.66);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1; color: #fff; }
  .edge-prev { left: 24px; } .edge-next { right: 24px; }
  .inset-prev { left: 14px; } .inset-next { right: 14px; }
  .slider-pad { padding-left: 28px; padding-right: 28px; }
  @media (max-width: 1319px) {
    .arrow { width: 46px; height: 46px; }
    .edge-prev { left: 10px; } .edge-next { right: 10px; }
    .slider-pad { padding-left: 68px; padding-right: 68px; }
  }

  .dots { display: flex; align-items: center; gap: 11px; }
  .dot { position: relative; overflow: hidden; height: 9px; width: 9px; border-radius: 999px;
    border: 0; padding: 0; transition: all .3s; cursor: pointer; }
  .dot.on { width: 34px; }
  .dot > span { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; border-radius: 999px;
    pointer-events: none; transition: width .1s linear; }

  .autofit { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,260px), 1fr)); gap: 56px; }
  .autofit-320 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,320px), 1fr)); gap: 20px; }
  .autofit-340 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,340px), 1fr)); gap: 64px; }
  .autofit-240 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,240px), 1fr)); gap: 18px; }
  .autofit-150 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,150px), 1fr)); gap: 28px; }
  .autofit-170 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,170px), 1fr)); gap: 40px; }
  .autofit-300 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,300px), 1fr)); gap: 0 56px; }

  .masonry { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,280px), 1fr));
    grid-auto-rows: minmax(196px, auto); gap: 18px; }
  .m-big { grid-row: span 2; grid-column: span 2; min-height: 412px; }
  .m-wide { grid-column: span 2; display: grid; grid-template-columns: 1.15fr 1fr; min-height: 196px; }
  @media (max-width: 900px) {
    .m-big { grid-row: auto; grid-column: auto; min-height: 320px; }
    .m-wide { grid-column: auto; grid-template-columns: 1fr; }
    .m-wide-img { min-height: 200px; }
  }

  .f-input { background: #fff; border: 1px solid rgba(0,0,0,.12); border-radius: 10px;
    padding: 13px 14px; font-size: 16px; color: #1d1d1f; outline: none; width: 100%; }
  .f-input:focus { border-color: #0e6b78; }
  textarea.f-input { resize: vertical; }
  .chip { padding: 9px 16px; border-radius: 999px; font-size: 14px; transition: all .2s;
    background: #fff; border: 1px solid rgba(0,0,0,.14); color: #1d1d1f; }
  .chip:hover { border-color: rgba(0,0,0,.4); }
  .chip.on { background: #1d1d1f; border-color: #1d1d1f; color: #fff; }

  .mega-col { display: block; width: 100%; text-align: left; padding: 10px 11px; margin: 0 0 2px;
    border-radius: 10px; font-size: 14px; transition: background .18s, color .18s;
    background: transparent; color: #424245; }
  .mega-col.on { background: #f0f0f2; color: #1d1d1f; font-weight: 500; }
  .mega-item { display: block; width: 100%; text-align: left; padding: 10px 11px; margin: 0 0 2px;
    border-radius: 10px; background: transparent; transition: background .18s; }
  .mega-item.on { background: #f0f0f2; }
  .mega-label { display: block; font-size: 11px; font-weight: 600; letter-spacing: .14em;
    text-transform: uppercase; color: #a1a1a6; margin-bottom: 12px; }
  .mega-grid { max-width: 1180px; margin: 0 auto; padding: 0 28px;
    display: grid; grid-template-columns: 132px 196px 168px 1fr 292px; min-height: 352px; }

  .cmp-scroll { overflow-x: auto; }
  .cmp-grid { min-width: 720px; border: 1px solid rgba(0,0,0,.1); border-radius: 16px; overflow: hidden; }

  @media (min-width: 1020px) { .narrow-only { display: none !important; } }
  @media (max-width: 1019px) { .wide-only { display: none !important; } }
  @media (max-width: 620px) {
    header .hdr-bar { padding: 0 16px !important; }
    .slider-pad { padding-left: 56px; padding-right: 56px; }
  }

/* ---------------------------------------------------------------------------
   Server-rendered pages.

   Most routes are painted by app.js, which carries its own inline styles. A
   few -- Credentials and Room notes -- are shipped pre-rendered and have no
   client renderer, so their markup arrives as bare semantic HTML. Without
   this block it lands flush against the left edge with no container, which is
   exactly what it did. Anything added as a pre-rendered page inherits these.
   --------------------------------------------------------------------------- */
main.prose {
  display: block;
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 28px 96px;
  font: 400 17px/1.65 -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, sans-serif;
  color: #424245;
}
main.prose nav[aria-label="Breadcrumb"] {
  font-size: 13.5px; color: #86868b; margin-bottom: 26px;
}
main.prose nav[aria-label="Breadcrumb"] a { color: #0e6b78; text-decoration: none; }
main.prose nav[aria-label="Breadcrumb"] a:hover { text-decoration: underline; }

main.prose h1 {
  margin: 0 0 18px; font-size: clamp(30px, 4.4vw, 46px); line-height: 1.08;
  letter-spacing: -.03em; font-weight: 600; color: #1d1d1f;
}
main.prose h2 {
  margin: 44px 0 14px; font-size: clamp(21px, 2.4vw, 28px); line-height: 1.2;
  letter-spacing: -.02em; font-weight: 600; color: #1d1d1f;
}
main.prose h3 { margin: 30px 0 8px; font-size: 18px; font-weight: 600; color: #1d1d1f; }
main.prose p { margin: 0 0 18px; }
main.prose a { color: #0e6b78; }
main.prose a:hover { color: #14899a; }
main.prose strong { color: #1d1d1f; font-weight: 600; }

main.prose ul, main.prose ol { margin: 0 0 20px; padding-left: 22px; }
main.prose li { margin-bottom: 9px; }

/* The credentials tables are label/value pairs, so the row header carries the
   label and needs to read as one, not as a column heading. */
main.prose table {
  width: 100%; border-collapse: collapse; margin: 0 0 26px; font-size: 16px;
}
main.prose th[scope="row"] {
  text-align: left; vertical-align: top; white-space: nowrap;
  padding: 11px 18px 11px 0; color: #6e6e73; font-weight: 500; width: 1%;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
main.prose td {
  vertical-align: top; padding: 11px 0; color: #1d1d1f;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
main.prose tr:last-child th, main.prose tr:last-child td { border-bottom: 0; }

main.prose article { padding: 26px 0; border-bottom: 1px solid rgba(0,0,0,.1); }
main.prose article:last-of-type { border-bottom: 0; }
main.prose article h2 { margin-top: 0; }
main.prose article h2 a { color: #1d1d1f; text-decoration: none; }
main.prose article h2 a:hover { color: #0e6b78; }

@media (max-width: 600px) {
  main.prose { padding: 28px 20px 72px; font-size: 16px; }
  main.prose th[scope="row"] { white-space: normal; }
}

/* ---------------------------------------------------------------------------
   Logo on dark surfaces.

   The brackets use currentColor, so they follow the text colour wherever the
   mark is placed and need no rule at all. The focus dot cannot: #0e6b78 scores
   6.19:1 on white but 2.72:1 on #1d1d1f, under the 3:1 WCAG floor for
   non-text graphics. Dark surfaces raise it to #4ec3d1, which scores 8.05:1.

   Any section that sets light type should carry .on-dark. Doing it with a
   custom property rather than a second SVG file means one mark serves every
   surface, and a partner embedding it inherits the behaviour.
   --------------------------------------------------------------------------- */
.on-dark { --logo-accent: #4ec3d1; }

/* Belt and braces: if a surface declares a dark background but the class was
   forgotten, the mark still clears the floor. */
@media (prefers-color-scheme: dark) {
  :root { --logo-accent: #4ec3d1; }
}

/* ---------------------------------------------------------------------------
   Room notes.

   Uses the site's own scale rather than a second design language: the same
   #f5f5f7 wash for hero bands, the same 20px card radius, the same #0e6b78 for
   links, and the clamp() heading sizes the product pages use. The measure is
   held at 68ch because these are read end to end, not scanned.
   --------------------------------------------------------------------------- */
.note, .notes-index { display: block; color: #424245;
  font: 400 17px/1.7 -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, sans-serif; }
.note-wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; }
.note-body { max-width: 760px; }

.note-hero { background: #f5f5f7; padding: clamp(48px,6vw,88px) 0 clamp(36px,4vw,56px); }
.note-hero .crumb { font-size: 13.5px; color: #86868b; margin-bottom: 24px; }
.note-hero .crumb a { color: #0e6b78; text-decoration: none; }
.note-hero .crumb a:hover { text-decoration: underline; }
.note-hero h1 { margin: 14px 0 0; font-size: clamp(30px,4.4vw,56px); line-height: 1.06;
  letter-spacing: -.032em; font-weight: 600; color: #1d1d1f; max-width: 20ch; }
.note-lede { margin: 20px 0 0; max-width: 62ch; font-size: clamp(17px,1.5vw,20px);
  line-height: 1.6; color: #6e6e73; }

.note-meta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  font-size: 12.5px; color: #86868b; }
.note-kind { font-size: 11px; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: #0e6b78; }

.note-hero-img { margin: 0; background: #f5f5f7; }
.note-hero-img img { display: block; width: 100%; max-width: 1180px; margin: 0 auto;
  height: auto; padding: 0 28px 48px; box-sizing: border-box; }

.note-body h2 { margin: 52px 0 16px; font-size: clamp(22px,2.4vw,30px); line-height: 1.2;
  letter-spacing: -.022em; font-weight: 600; color: #1d1d1f; }
.note-body p { margin: 0 0 20px; }
.note-body a { color: #0e6b78; }

/* Sits under the hero so someone who reads nothing else still leaves with the
   argument. */
.note-key { margin: 0 0 40px; padding: 24px 26px; background: #f5f5f7;
  border-left: 3px solid #0e6b78; border-radius: 0 14px 14px 0; }
.note-key h3 { margin: 0 0 12px; font-size: 11px; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: #0e6b78; }
.note-key ul { margin: 0; padding-left: 18px; }
.note-key li { margin-bottom: 10px; font-size: 15.5px; line-height: 1.6; color: #1d1d1f; }
.note-key li:last-child { margin-bottom: 0; }

.note-fig { margin: 36px 0; }
.note-fig img { display: block; width: 100%; height: auto; border-radius: 14px; background: #f5f5f7; }
.note-fig figcaption { margin-top: 12px; font-size: 13.5px; line-height: 1.55; color: #86868b; }

.note-body blockquote { margin: 36px 0; padding: 0 0 0 24px; border-left: 3px solid #0e6b78;
  font-size: clamp(19px,2vw,23px); line-height: 1.45; letter-spacing: -.015em;
  color: #1d1d1f; font-weight: 500; }

/* Wide tables scroll rather than forcing the page to. */
.note-table { margin: 32px 0; overflow-x: auto; }
.note-table table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 460px; }
.note-table th, .note-table td { text-align: left; vertical-align: top;
  padding: 12px 16px 12px 0; border-bottom: 1px solid rgba(0,0,0,.1); }
.note-table thead th { font-size: 11px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: #86868b; }
.note-table tbody th { font-weight: 500; color: #1d1d1f; white-space: nowrap; }
.note-table tbody td { color: #424245; }

.note-cta { margin: 56px 0 0; padding: 30px 32px; background: #1d1d1f; border-radius: 20px; color: #fff; }
.note-cta h3 { margin: 0; font-size: 21px; font-weight: 600; letter-spacing: -.02em; }
.note-cta p { margin: 12px 0 0; color: rgba(255,255,255,.72); font-size: 15.5px; }
.note-btn { display: inline-block; margin-top: 6px; padding: 11px 22px; background: #fff;
  color: #1d1d1f; border-radius: 10px; font-weight: 600; font-size: 14.5px; text-decoration: none; }
.note-btn:hover { background: #4ec3d1; color: #1d1d1f; }

.note-list, .note-more-list { padding: clamp(48px,6vw,80px) 0 clamp(56px,7vw,100px); }
.note-more-list { background: #f5f5f7; margin-top: 72px; }
.note-more-list h2 { margin: 0 0 28px; font-size: clamp(22px,2.4vw,32px); font-weight: 600;
  letter-spacing: -.022em; color: #1d1d1f; }
.note-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: 26px; }
.note-card { display: block; background: #fff; border-radius: 20px; overflow: hidden;
  color: #1d1d1f; text-decoration: none; border: 1px solid rgba(0,0,0,.08);
  transition: transform .18s ease, box-shadow .18s ease; }
.note-card:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(0,0,0,.12); }
.note-card-img { aspect-ratio: 16/10; background: #f5f5f7; display: flex;
  align-items: center; justify-content: center; padding: 18px; }
.note-card-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.note-card-body { padding: 22px 26px 28px; }
.note-card-body h2, .note-card-body h3 { margin: 12px 0 0; font-size: 21px; line-height: 1.25;
  letter-spacing: -.02em; font-weight: 600; color: #1d1d1f; }
.note-card-body p { margin: 10px 0 0; font-size: 15px; line-height: 1.55; color: #6e6e73; }
.note-more { display: inline-block; margin-top: 16px; font-size: 14.5px;
  font-weight: 600; color: #0e6b78; }

@media (max-width: 600px) {
  .note, .notes-index { font-size: 16px; }
  .note-wrap { padding: 0 20px; }
  .note-hero-img img { padding: 0 20px 32px; }
  .note-cta { padding: 26px 22px; }
}

/* auto-fit collapses empty tracks, so a category holding one product stretched
   its card across the whole container. auto-fill keeps the tracks, so the card
   stays one column wide and the row simply has space to its right. */
.autofit-320.nostretch { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }