/*
  The page runs from open water to the shore. The header and each page's opening are deep sea,
  the working sections are foam and lagoon, and whatever is about people and place is sand.
  Hanging up, and so every call to action, is the red of ʻōhiʻa lehua.
*/
:root {
  --deep: #062133;
  --sea: #0b4764;
  --lagoon: #0a5568;
  --reef: #3fd0bd;
  --foam: #f4faf9;
  --sand: #f0e4ca;
  --lehua: #c61f3a;
  --ink: #0a2a40;
  --ink-soft: #24404f;

  --font-display: "Bricolage Grotesque", "Instrument Sans", system-ui, sans-serif;
  --font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --bs-body-font-family: var(--font-body);
  --bs-body-color: var(--ink);
  --bs-body-bg: var(--foam);
  --bs-body-font-size: 1.0625rem;
  --bs-body-line-height: 1.6;
  --bs-link-color-rgb: 10, 85, 104;
  --bs-link-hover-color-rgb: 6, 33, 51;
}

h1, h2, h3, .navbar-brand, .footer-name {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}

p, li, dd { max-width: 68ch; }

:focus-visible {
  outline: 3px solid var(--reef);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 10;
  padding: 0.5rem 0.75rem;
  background: var(--foam);
  color: var(--ink);
}

/* ---------- Header ---------- */

.site-header { background: var(--deep); }
.site-header .navbar { padding-block: 1rem; }

.navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.5rem;
  font-weight: 800;
}

/* The hummingbird (marketing/Turquoise Hummingbird Line Art Logo.png, trimmed): a little taller
   than the word beside it, since its lines are fine. */
.brand-mark { width: auto; height: 2.75rem; margin-block: -0.5rem; }

.site-header .nav-link {
  color: rgb(244 250 249 / 0.9);
  font-weight: 500;
  padding-inline: 0.875rem;
}
.site-header .nav-link:hover,
.site-header .nav-link[aria-current="page"] { color: #fff; }
.site-header .nav-link[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--reef);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.45em;
}

/* ---------- Buttons ---------- */

.btn { font-weight: 600; border-radius: 999px; padding-inline: 1.25rem; }
.btn-lg { padding: 0.75rem 1.625rem; font-size: 1.0625rem; }

.btn-lehua { background: var(--lehua); border-color: var(--lehua); color: #fff; }
.btn-lehua:hover, .btn-lehua:focus-visible { background: #a81730; border-color: #a81730; color: #fff; }

.btn-foam { border: 1.5px solid rgb(244 250 249 / 0.55); color: var(--foam); }
.btn-foam:hover, .btn-foam:focus-visible { background: var(--foam); border-color: var(--foam); color: var(--deep); }

.text-link {
  display: inline-block;
  margin-top: 1.5rem;
  font-weight: 600;
  text-underline-offset: 0.3em;
  text-decoration-thickness: 2px;
}

/* ---------- Openings: the hero and each page's head ---------- */

.hero, .page-head {
  position: relative;
  background: linear-gradient(180deg, var(--deep) 0%, var(--sea) 62%, var(--lagoon) 100%);
  color: var(--foam);
}

.hero { padding-top: clamp(3rem, 8vw, 6.5rem); overflow: hidden; }
.hero:has(.hero-screen) + .band { padding-top: clamp(5rem, 9vw, 7.5rem); }
.page-head { padding-top: clamp(2.5rem, 6vw, 5rem); }

.hero-title, .page-title {
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-wrap: balance;
  margin-bottom: 1.5rem;
}
.hero-title { font-size: clamp(2.6rem, 6.4vw, 5.25rem); }
.page-title { font-size: clamp(2.3rem, 5vw, 4rem); }

.hero-copy {
  max-width: 56ch;
  font-size: clamp(1.125rem, 1.6vw, 1.3125rem);
  color: rgb(244 250 249 / 0.95);
  margin-bottom: 2rem;
}

/* The screenshot rides low in the water: the shoreline below is drawn across its foot. */
.hero-screen { position: relative; z-index: 1; margin-top: 2.5rem; margin-bottom: -9rem; }
@media (min-width: 992px) {
  .hero-screen { margin-top: 0; margin-bottom: -11rem; }
}
.hero-screen .screen { margin: 0; }
.hero-screen .screen-frame { box-shadow: 0 2.5rem 5rem -1.5rem rgb(2 14 22 / 0.7); }

.shoreline {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: clamp(2.75rem, 7vw, 5.625rem);
  margin-top: clamp(2rem, 5vw, 3.5rem);
  margin-bottom: -1px;
}
.shoreline-foam { fill: #fff; opacity: 0.55; }
/* The strip of background closes the hairline a stretched drawing leaves at its foot. */
.shoreline.to-foam { background: linear-gradient(to top, var(--foam) 3px, transparent 3px); }
.shoreline.to-sand { background: linear-gradient(to top, var(--sand) 3px, transparent 3px); }
.shoreline.to-foam .shoreline-water { fill: var(--foam); }
.shoreline.to-sand .shoreline-water { fill: var(--sand); }

@media (prefers-reduced-motion: no-preference) {
  .shoreline-foam { animation: swell 9s ease-in-out infinite alternate; }
  @keyframes swell {
    from { transform: translate(-1.2%, 5px); }
    to { transform: translate(1.2%, -3px); }
  }
}

/* ---------- Bands ---------- */

.band { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.band-foam { background: var(--foam); }
.band-sand { background: var(--sand); }
.band-lagoon { background: var(--lagoon); color: var(--foam); }
.band-deep { background: var(--deep); color: var(--foam); }

.band-lagoon a, .band-deep a:not(.btn), .hero-copy a, .hero-promise a { color: #fff; }

.section-title {
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  font-weight: 700;
  line-height: 1.04;
  text-wrap: balance;
  margin-bottom: 1.25rem;
}

.lead-copy { font-size: 1.1875rem; }
.band-foam .lead-copy, .band-sand .lead-copy { color: var(--ink-soft); }
.band-sand .lead-copy { color: var(--ink-soft); }

/* Short points in columns: a rule above each, the color of the reef. */
.points { margin-top: 2.5rem; row-gap: 2.25rem; }
.points > div > h3 {
  padding-top: 1rem;
  border-top: 3px solid var(--reef);
  font-size: 1.3125rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.points p { margin-bottom: 0; color: var(--ink-soft); }

/* ---------- Screenshots ---------- */

.screen { margin: 0 0 1.25rem; }
.screen-frame {
  overflow: hidden;
  border-radius: 0.875rem;
  background: #000;
  box-shadow: 0 0 0 1px rgb(6 33 51 / 0.14), 0 1.5rem 3rem -1.25rem rgb(6 33 51 / 0.45);
}
.screen-frame img { display: block; width: 100%; height: auto; }

.screen-title { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.5rem; }

.tour-stop + .tour-stop { margin-top: clamp(3rem, 7vw, 5.5rem); }
@media (min-width: 768px) {
  .tour-stop:nth-child(even) > :first-child { order: 2; }
}

/* ---------- Feature lists ---------- */

.feature-group + .feature-group {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid rgb(10 42 64 / 0.14);
}
.feature-group h2 { font-size: 2rem; font-weight: 700; }
.feature-group > :first-child p { color: var(--ink-soft); }

.feature-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 1.75rem 2.5rem;
  margin: 0;
}
.feature-list dt { font-weight: 600; font-size: 1.0625rem; margin-bottom: 0.25rem; }
.feature-list dd { margin: 0; color: var(--ink-soft); font-size: 1rem; }
.feature-list.on-dark dd { color: rgb(244 250 249 / 0.95); }

code {
  color: inherit;
  font-size: 0.95em;
  padding: 0.05em 0.35em;
  border-radius: 0.3em;
  background: rgb(10 42 64 / 0.08);
}

.honest-list, .story-list { padding-left: 1.1rem; }
.honest-list li, .story-list li { margin-bottom: 0.875rem; }
.honest-list li::marker, .story-list li::marker { color: var(--lagoon); }

/* ---------- Story ---------- */

.story h2 { font-size: 1.75rem; font-weight: 700; margin-top: 2.75rem; margin-bottom: 0.875rem; }

.story-aside {
  position: sticky;
  top: 2rem;
  padding: 0.25rem 0 0.25rem 1.5rem;
  border-left: 3px solid var(--lagoon);
}
.story-aside h2 { font-size: 1.1875rem; margin-top: 1.5rem; margin-bottom: 0.25rem; }
.story-aside h2:first-child { margin-top: 0; }
.story-aside p { margin-bottom: 0; }

/* ---------- Contact band and footer ---------- */

.contact .lead-copy { color: rgb(244 250 249 / 0.95); }

.site-footer {
  position: relative;
  padding-block: clamp(3rem, 6vw, 4.5rem) 1.75rem;
  background: #041723;
  color: rgb(244 250 249 / 0.78);
  font-size: 0.9375rem;
  border-top: 1px solid rgb(63 208 189 / 0.22);
}
.footer-top {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 62rem) {
  .footer-top { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; }
}
.footer-home {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  margin-bottom: 1rem;
}
.footer-mark {
  width: auto;
  height: 4rem;
  filter: brightness(0) invert(1);
}
.footer-name {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #fff;
}
.footer-tagline { max-width: 34rem; margin-bottom: 1.5rem; line-height: 1.6; }
.footer-cols {
  display: grid;
  gap: 2rem 1.5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 40rem) {
  .footer-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.footer-heading {
  margin-bottom: 0.875rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--reef);
}
.footer-links li { margin-bottom: 0.625rem; }
.site-footer a:not(.btn) { color: rgb(244 250 249 / 0.85); text-decoration: none; }
.site-footer a:not(.btn):hover, .site-footer a:not(.btn):focus-visible { color: #fff; text-decoration: underline; text-underline-offset: 0.25em; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.25rem;
  border-top: 1px solid rgb(244 250 249 / 0.12);
  font-size: 0.8125rem;
  color: rgb(244 250 249 / 0.6);
}
.footer-bottom p { margin: 0; max-width: none; }

/* A measurement, set apart from the claims above it. */
.measured {
  margin: 2.5rem 0 0;
  padding-left: 1.25rem;
  border-left: 3px solid var(--lagoon);
  color: var(--ink-soft);
}

/* Marks something that exists but is not released. */
.in-testing, .feature-group > :first-child p.in-testing {
  display: inline-block;
  padding: 0.2rem 0.75rem;
  border: 1.5px solid var(--lagoon);
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--lagoon);
}
.companion { border-top: 1px solid rgb(10 42 64 / 0.1); }

/* ---------- The iPhone app's screens ---------- */

.app-screens {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 3vw, 2.5rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.app-phone { margin: 0; text-align: center; }
.app-phone img {
  display: block;
  width: 100%;
  height: auto;
  border: 0.4rem solid #04121c;
  border-radius: 2.1rem;
  box-shadow: 0 1.5rem 3rem -1.25rem rgb(6 33 51 / 0.55);
}
.app-phone figcaption { margin-top: 0.875rem; font-weight: 600; font-size: 0.9375rem; }
.screens-note { margin: 1.5rem 0 0; font-size: 0.9375rem; color: var(--ink-soft); }
.note-mark { margin-left: 0.1em; color: inherit; text-decoration: none; }

/* Too narrow for four: a row to swipe along. */
@media (max-width: 767.98px) {
  .app-screens {
    grid-template-columns: repeat(4, 62%);
    overflow-x: auto;
    padding-bottom: 1rem;
    scroll-snap-type: x mandatory;
  }
  .app-phone { scroll-snap-align: center; }
}

.in-testing.on-dark { border-color: var(--reef); color: var(--reef); margin-bottom: 1.25rem; }

/* ---------- The person to talk to ---------- */

.person { display: flex; align-items: center; gap: 1.25rem; margin: 1.5rem 0 0; }
/* The whole photograph, uncropped, so the shoulders show as well as the face. */
.person img {
  flex: none;
  width: 8rem;
  height: auto;
  aspect-ratio: 600 / 714;
  border-radius: 0.875rem;
  object-fit: cover;
  box-shadow: 0 0 0 3px var(--foam), 0 0 0 5px var(--lagoon);
}
.person figcaption, .person-lead { margin: 0; display: flex; flex-direction: column; gap: 0.125rem; }
.person-name { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; }
.person-role { color: var(--ink-soft); font-size: 0.9375rem; }
.person a { font-weight: 600; text-underline-offset: 0.25em; }
.story-aside .person { margin: 0 0 1.75rem; }

/* The developers, under the person to talk to: no photographs, so initials. */
.team { display: flex; flex-wrap: wrap; gap: 0.875rem 1.75rem; margin: 1.25rem 0 0; padding: 1.25rem 0 0; border-top: 1px solid color-mix(in srgb, var(--lagoon) 25%, transparent); list-style: none; }
.team li { display: flex; align-items: center; gap: 0.75rem; }
.team li > span:last-child { display: flex; flex-direction: column; }
.team .person-name { font-size: 1.0625rem; }
.team-photo { flex: none; width: 2.75rem; height: 2.75rem; border-radius: 50%; object-fit: cover; object-position: center 30%; }
.team-initials {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--lagoon);
  color: var(--foam);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
}

/* ---------- Questions and answers ---------- */

.answers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr));
  gap: 0 3rem;
  margin: 2.5rem 0 0;
}
.answers > div { padding-block: 1.5rem; border-top: 1px solid rgb(10 42 64 / 0.14); }
.answers dt {
  font-family: var(--font-display);
  font-size: 1.3125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}
.answers dd { margin: 0; color: var(--ink-soft); }

/* ---------- Roadmap ---------- */

.roadmap-note { margin-top: 0; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.feature-group > :first-child p.stage {
  display: inline-block;
  margin-bottom: 0.75rem;
  padding: 0.2rem 0.75rem;
  border-radius: 999px;
  background: var(--deep);
  color: var(--foam);
  font-size: 0.875rem;
  font-weight: 600;
}

/* The person card where it sits on a dark band. */
.person-card { padding: 1.5rem; border-radius: 1rem; background: var(--foam); color: var(--ink); }
.person-card .person { margin: 0; }
.band-lagoon .person-card a { color: var(--lagoon); }

/* ---------- The name ---------- */

.name-label { margin-bottom: 0.75rem; font-weight: 600; color: var(--reef); }
.name-formula {
  font-size: clamp(2.1rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  text-wrap: balance;
  margin-bottom: 0;
}
.name-parts { margin-top: clamp(2rem, 4vw, 3.25rem); row-gap: 1.75rem; }
.name-parts h3 { font-size: 1.375rem; font-weight: 700; color: var(--reef); margin-bottom: 0.375rem; }
.name-parts p { margin-bottom: 0; color: rgb(244 250 249 / 0.95); }

/* Which kind of product a point is about, under its heading. */
.points p.which { margin-bottom: 0.5rem; font-weight: 600; color: var(--ink); }

/* ---------- Home: the short version, under the hero ---------- */

.short-version { padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.short-version .points { margin-top: 0; }
.band-deep .story-list li::marker { color: var(--reef); }
.band-deep .text-link { color: #fff; }

/* Home: the two ways a business gets Kahevo. */
.how-to-get { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.how-to-get h3 { font-size: 1.3125rem; font-weight: 700; }
.how-to-get .text-link { margin-top: 0.25rem; }

/* For business: who gets what, on the lagoon band. */
.roles { margin-top: 2rem; }
.roles h3 { font-size: 1.3125rem; font-weight: 700; padding-top: 1rem; border-top: 3px solid var(--reef); }
.band-lagoon .story-list li::marker { color: var(--reef); }
.band-deep .how-to-get { margin-top: 1.5rem; }
.band-deep .how-to-get p { color: rgb(244 250 249 / 0.95); }

/* ---------- System layout diagram ---------- */

.system-diagram { margin: 2.5rem 0 0; }
.system-diagram-scroll { overflow-x: auto; }
.system-diagram svg { display: block; width: 100%; min-width: 44rem; height: auto; font-family: var(--font-body); }
.system-diagram figcaption { margin-top: 1rem; max-width: 68ch; font-size: 0.9375rem; color: var(--ink-soft); }
.system-diagram text { font-size: 13px; fill: var(--ink-soft); }
.system-diagram .dg-title { font-family: var(--font-display); font-size: 17px; font-weight: 700; fill: var(--ink); }
.system-diagram .dg-heading text { font-size: 14px; font-weight: 600; fill: var(--ink-soft); }
.system-diagram .dg-server { fill: #fff; stroke: var(--lagoon); stroke-width: 2; }
.system-diagram .dg-calls rect { fill: var(--deep); }
.system-diagram .dg-web rect { fill: var(--lagoon); }
.system-diagram .dg-calls text, .system-diagram .dg-web text { fill: rgb(244 250 249 / 0.95); }
.system-diagram .dg-calls .dg-title, .system-diagram .dg-web .dg-title { fill: #fff; }
.system-diagram .dg-store rect { fill: var(--foam); stroke: rgb(10 42 64 / 0.2); }
.system-diagram .dg-outside rect { fill: var(--sand); }
.system-diagram .dg-branch rect { fill: none; stroke: var(--lagoon); stroke-width: 1.5; stroke-dasharray: 6 5; }
.system-diagram .dg-along rect { fill: var(--foam); stroke: var(--lagoon); stroke-width: 1.5; stroke-dasharray: 6 5; }
.system-diagram .dg-people rect { fill: #fff; stroke: rgb(10 42 64 / 0.25); stroke-width: 1.5; }
.system-diagram .dg-tag { font-weight: 600; fill: var(--lagoon); }
.system-diagram .dg-line path { fill: none; stroke: var(--ink-soft); stroke-width: 1.6; }
.system-diagram .dg-line .dg-dash { stroke-dasharray: 5 4; stroke: var(--lagoon); }
.system-diagram .dg-label text { font-size: 12px; font-weight: 600; fill: var(--ink); paint-order: stroke; stroke: var(--foam); stroke-width: 5px; stroke-linejoin: round; }
.tour-pages { margin-top: clamp(3.5rem, 7vw, 5.5rem); margin-bottom: 2.5rem; }

/* Tour: something explained for a reader with no telephone knowledge. */
.plain-note {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid rgb(10 42 64 / 0.14);
}
.plain-note .section-title { font-size: clamp(1.6rem, 2.8vw, 2.25rem); }

/* ---------- The partner map and the form that puts a partner on it ---------- */

.partner-map {
  height: clamp(22rem, 60vh, 36rem);
  border-radius: 1rem;
  border: 1px solid color-mix(in srgb, var(--lagoon) 30%, transparent);
  background: #aad3df;
  /* Under the page's header and menus. */
  z-index: 0;
}
.partner-map .leaflet-popup-content { font-family: inherit; font-size: 0.9375rem; color: var(--ink); line-height: 1.4; }
.partner-map .leaflet-popup-content strong { font-family: var(--font-display); font-size: 1.0625rem; }
/* A lehua-red drop, pointing at the address. Drawn on ::before, because the map moves the
   pin itself about with a transform and anything turned here would turn that too. */
.partner-pin::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50% 50% 50% 0;
  background: var(--lehua);
  border: 3px solid #fff;
  box-shadow: 0 2px 6px rgb(6 33 51 / 0.45);
  transform: translateY(-5px) rotate(-45deg);
}
.partner-count { margin-top: clamp(2rem, 4vw, 3rem); }
.partner-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1.25rem 2rem; margin: 0; padding: 0; list-style: none; }
.partner-list li { display: flex; flex-direction: column; gap: 0.125rem; padding-top: 0.875rem; border-top: 2px solid var(--reef); }
.partner-list a { font-weight: 600; text-underline-offset: 0.25em; }

.partner-form .form-part { font-size: 1.5rem; font-weight: 700; margin: 2.25rem 0 1rem; }
.partner-form .form-part:first-of-type { margin-top: 0; }
.partner-form .form-label { font-weight: 600; margin-bottom: 0.25rem; }
.partner-form .form-control, .partner-form .form-select { border-color: color-mix(in srgb, var(--lagoon) 45%, transparent); padding: 0.625rem 0.875rem; }
.partner-form .form-control:focus, .partner-form .form-select:focus { border-color: var(--lagoon); box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--reef) 45%, transparent); }
.partner-form .form-select { padding-right: 2.5rem; }
.partner-form .form-note { color: var(--ink-soft); font-size: 0.9375rem; }
.partner-form .form-problem { display: block; color: var(--lehua); font-size: 0.9375rem; font-weight: 600; }
.partner-form .form-problem:empty { display: none; }
.partner-form .form-problem ul { margin: 0 0 1rem; padding-left: 1.1rem; }
.partner-form .btn { margin-top: 1rem; }
.form-extra { position: absolute; left: -200vw; width: 1px; height: 1px; overflow: hidden; }

/* Eight things in the menu: each stays on one line, drawn a little closer on a laptop. */
@media (min-width: 992px) {
  .site-header .nav-link, .site-header .navbar-nav .btn { white-space: nowrap; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .site-header .nav-link { padding-inline: 0.4rem; font-size: 0.9375rem; }
  .site-header .navbar-nav .btn { padding-inline: 0.875rem; font-size: 0.9375rem; }
  .site-header .nav-item.ms-lg-3 { margin-left: 0.5rem !important; }
}

/* The robot check under a form: a line that says how it stands. */
.captcha { margin-top: 2rem; }
.captcha-state { display: flex; align-items: center; gap: 0.625rem; margin: 0; color: var(--ink-soft); font-size: 0.9375rem; }
.captcha-mark { flex: none; width: 1.125rem; height: 1.125rem; border-radius: 50%; border: 2.5px solid color-mix(in srgb, var(--lagoon) 30%, transparent); border-top-color: var(--lagoon); animation: captcha-turn 0.8s linear infinite; }
[data-captcha="passed"] .captcha-mark { animation: none; border-color: var(--lagoon); background: var(--lagoon); box-shadow: inset 0 0 0 3px var(--foam); }
[data-captcha="failed"] .captcha-mark { animation: none; border-color: var(--lehua); }
[data-captcha="failed"] .captcha-state { color: var(--lehua); font-weight: 600; }
@keyframes captcha-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .captcha-mark { animation: none; } }
.form-part-aside { font-size: 1.5rem; font-weight: 700; margin: 0; }
.form-note-aside { margin-top: 1.5rem; color: var(--ink-soft); }
/* On the contact page itself, the person's "ask" link would only lead back here. */
.form-part-aside + .person a { display: none; }

/* ---------- Updates: the list of posts, and one post ---------- */

.year-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.year-pills a {
  padding: 0.375rem 1rem;
  border-radius: 999px;
  border: 1.5px solid color-mix(in srgb, var(--lagoon) 40%, transparent);
  color: var(--lagoon);
  font-weight: 600;
  text-decoration: none;
}
.year-pills a:hover, .year-pills a:focus-visible { border-color: var(--lagoon); }
.year-pills a[aria-current="page"] { background: var(--lagoon); border-color: var(--lagoon); color: var(--foam); }

/* A line down the side with a mark at each post, like buoys along a channel. */
.post-list { margin: 0; padding: 0; list-style: none; border-left: 2px solid color-mix(in srgb, var(--reef) 70%, transparent); max-width: 46rem; }
.post-list li { position: relative; padding: 0 0 2.25rem 1.75rem; }
.post-list li:last-child { padding-bottom: 0; }
.post-list li::before {
  content: "";
  position: absolute;
  left: -0.4375rem;
  top: 0.3rem;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: var(--foam);
  border: 2.5px solid var(--lagoon);
}
.post-list time { display: block; color: var(--ink-soft); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.02em; }
.post-list h3 { font-size: 1.375rem; font-weight: 700; margin: 0.25rem 0 0.375rem; }
.post-list h3 a { color: var(--ink); text-decoration: none; }
.post-list h3 a:hover, .post-list h3 a:focus-visible { color: var(--lagoon); text-decoration: underline; text-underline-offset: 0.2em; }
.post-list p { margin: 0; color: var(--ink-soft); }
.post-more { margin: 2.5rem 0 0; color: var(--ink-soft); }

.post-back { margin-bottom: 0.75rem; font-weight: 600; }
.post-back a { color: var(--reef); text-decoration: none; }
.post-back a::before { content: "\2190\00a0"; }
.post-byline { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin: 1rem 0 0; color: rgb(244 250 249 / 0.8); font-size: 0.9375rem; }
.post-body { font-size: 1.0625rem; }
.post-body p, .post-body ul { margin-bottom: 1.25rem; }
.post-body li { margin-bottom: 0.5rem; }
.post-body li::marker { color: var(--lagoon); }
.post-turn { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem; margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.5rem; border-top: 1px solid color-mix(in srgb, var(--lagoon) 25%, transparent); }
.post-turn a { display: flex; flex-direction: column; max-width: 22rem; font-weight: 600; text-underline-offset: 0.25em; }
.post-turn span { color: var(--ink-soft); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.post-turn-newer { margin-left: auto; text-align: right; }

/* Inside a post: headings, tables, and bar charts drawn as lists. */
.post-body h2 { font-size: 1.5rem; font-weight: 700; margin: 2.25rem 0 0.75rem; }
.post-body > .lead-copy + h2 { margin-top: 1.75rem; }
.post-table { overflow-x: auto; margin-bottom: 1.5rem; }
.post-table table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.post-table th, .post-table td { padding: 0.625rem 0.875rem 0.625rem 0; text-align: left; vertical-align: top; border-bottom: 1px solid color-mix(in srgb, var(--lagoon) 22%, transparent); }
.post-table th { font-family: var(--font-display); font-size: 0.9375rem; color: var(--lagoon); border-bottom: 2px solid var(--reef); white-space: nowrap; }
.post-table td:first-child { font-weight: 600; }

.post-chart { margin: 0.5rem 0 1.75rem; padding: 1.25rem 1.5rem 1.375rem; border-radius: 1rem; background: #fff; border: 1px solid color-mix(in srgb, var(--lagoon) 18%, transparent); }
.post-chart figcaption { font-family: var(--font-display); font-weight: 700; margin-bottom: 1rem; }
.post-chart dl { margin: 0; display: grid; gap: 0.875rem; }
.post-chart dt { font-size: 0.9375rem; font-weight: 600; color: var(--ink-soft); margin-bottom: 0.25rem; }
.post-chart dd { margin: 0; display: flex; align-items: center; gap: 0.75rem; }
/* The bar is a share of its track, so two bars compare truly whatever the numbers beside them. */
.post-track { flex: 1; min-width: 0; }
.post-bar { display: block; height: 1.5rem; border-radius: 0 0.375rem 0.375rem 0; background: var(--lagoon); }
/* The last row is the one the post is about: what it is now, against what it was. */
.post-chart dl > div:last-child .post-bar { background: var(--reef); }
.post-bar-value { flex: none; min-width: 5.5rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* A table under a feature group's list, such as what a branch box carries. */
.feature-table-title { font-size: 1.25rem; font-weight: 700; margin: 2.25rem 0 0.75rem; }
.feature-group .post-table { margin-bottom: 0.75rem; }

/* ---------- Pictures of the old pages, in Updates posts ---------- */

.post-screen { margin: 0.5rem 0 1.75rem; }
.post-screen img { display: block; width: 100%; height: auto; border-radius: 0.75rem; border: 1px solid color-mix(in srgb, var(--lagoon) 25%, transparent); }
.post-screen figcaption { margin-top: 0.625rem; color: var(--ink-soft); font-size: 0.9375rem; }

/* A browser window of the time around the page. */
.old-window { border: 1px solid #8a8f94; border-radius: 0.5rem; overflow: hidden; background: #fff; box-shadow: 0 6px 18px rgb(6 33 51 / 0.12); }
.old-bar { display: flex; align-items: center; gap: 0.375rem; padding: 0.4375rem 0.625rem; background: #dfe3e6; border-bottom: 1px solid #b9bfc4; }
.old-bar i { width: 0.625rem; height: 0.625rem; border-radius: 50%; background: #a9b0b6; }
.old-bar span { flex: 1; min-width: 0; margin-left: 0.5rem; padding: 0.125rem 0.625rem; border-radius: 0.25rem; background: #fff; color: #555; font: 0.75rem/1.5 ui-monospace, Menlo, Consolas, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Inside it, the site's own styles are taken away, so that what is left is what a browser
   does with bare HTML: Times, blue links, grey table borders. Each era then adds its own. */
.old-ui { padding: 0.75rem 1rem 1rem; background: #fff; color: #000; font: 16px/1.25 "Times New Roman", Times, serif; overflow-x: auto; text-align: left; }
.old-ui * { all: revert; }
/* Written this heavily because the reset for links with no address would otherwise win. */
.old-window .old-ui a:not(.btn) { color: #0000ee; text-decoration: underline; }
/* border="1" as a browser draws it: taking the site's styles away takes the attribute's too. */
.old-ui table[border] { border: 1px outset #808080; border-spacing: 2px; }
.old-ui table[border] th, .old-ui table[border] td { border: 1px inset #808080; padding: 4px; }
.old-ui tr[bgcolor] { background: #dddddd; }
.old-ui font[color="green"] { color: green; }
.old-ui h1, .old-ui .old-h1 { font-size: 1.75em; font-weight: bold; margin: 0.2em 0 0.3em; }
.old-ui h2 { font-size: 1.3em; margin: 0.6em 0 0.4em; }

/* 2023: the first colour, and a typeface chosen on purpose. */
.old-pidgin-2023-menus, .old-pidgin-2023-sidebar, .old-pidgin-2024-dashboard { padding: 0; font-family: Verdana, Geneva, sans-serif; font-size: 13px; }
.old-ui .old-head { background: #336699; color: #fff; font-weight: bold; font-size: 1.25em; padding: 0.5em 0.75em; }
.old-ui .old-head span { float: right; font-weight: normal; font-size: 0.75em; padding-top: 0.3em; }
.old-ui .old-links { background: #e8eef4; border-bottom: 1px solid #99aabb; padding: 0.4em 0.75em; }
.old-ui .old-links a, .old-ui .old-links b { margin-right: 0.9em; }
.old-ui .old-body { padding: 0.25em 0.9em 0.9em; }

/* Late 2023: the links ran out of room across the top and went down the side. */
.old-ui .old-frame { width: 100%; }
.old-ui .old-side { width: 9.5em; vertical-align: top; background: #e8eef4; border-right: 1px solid #99aabb; padding: 0.5em 0; }
.old-ui .old-side a, .old-ui .old-side b { display: block; padding: 0.25em 0.9em; }
.old-ui .old-side b { background: #fff; border-left: 3px solid #336699; padding-left: calc(0.9em - 3px); }
.old-ui .old-main { vertical-align: top; padding: 0.25em 0.9em 0.9em; }
.old-ui .old-grid { width: 100%; border-collapse: collapse; }
.old-ui .old-grid th { text-align: left; background: #dde5ee; border: 1px solid #99aabb; padding: 0.3em 0.5em; }
.old-ui .old-grid td { border: 1px solid #c5d0db; padding: 0.3em 0.5em; }

/* 2024: a darker bar, grouped links, and numbers that mean something at a glance. */
.old-ui .old-head-2 { background: #1f4e79; }
.old-ui .old-side-2 { background: #f2f5f8; font-size: 0.95em; }
.old-ui .old-tiles { display: flex; flex-wrap: wrap; gap: 0.6em; margin: 0.4em 0 0.9em; }
.old-ui .old-tiles div { flex: 1 1 6.5em; border: 1px solid #99aabb; background: #f7f9fb; padding: 0.5em 0.7em; }
.old-ui .old-tiles big { display: block; font-size: 1.9em; font-weight: bold; color: #1f4e79; }

/* =====================================================================
   The site for Hawaiʻi businesses (14 October 2026)
   ===================================================================== */

.btn-ink { border: 1.5px solid var(--ink); color: var(--ink); }
.btn-ink:hover, .btn-ink:focus-visible { background: var(--ink); color: var(--foam); }

.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.hero-promise {
  margin: 1.5rem 0 0;
  font-size: 0.9375rem;
  color: rgb(244 250 249 / 0.78);
}
.hero-ai {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1.75rem;
  padding: 0.4rem 1rem 0.4rem 0.75rem;
  border: 1px solid rgb(244 250 249 / 0.28);
  border-radius: 1.25rem;
  line-height: 1.35;
  background: rgb(244 250 249 / 0.06);
  font-size: 0.9375rem;
  font-weight: 600;
  color: rgb(244 250 249 / 0.95);
  text-decoration: none;
  transition: background-color 0.15s, border-color 0.15s;
}
.hero-ai svg { width: 1.1rem; height: 1.1rem; fill: var(--reef); flex: none; }
.hero-ai:hover, .hero-ai:focus-visible { color: #fff; background: rgb(244 250 249 / 0.12); border-color: var(--reef); }
.hero-home { padding-bottom: 0; }
.hero-home .shoreline { margin-top: clamp(3rem, 6vw, 5rem); }

/* ---------- The world, greeted: the home page's opening animation (js/world.js) ---------- */

.world {
  position: relative;
  aspect-ratio: 1;
  margin: 2.5rem 0 0;
}
@media (min-width: 992px) {
  .world { margin: -2rem -12% -1rem -4%; }
}
.world canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  -webkit-mask-image: radial-gradient(circle, #000 62%, transparent 71%);
  mask-image: radial-gradient(circle, #000 62%, transparent 71%);
}
.world-caption {
  position: absolute;
  left: 4%;
  bottom: 6%;
  display: grid;
  gap: 0.25rem;
  pointer-events: none;
  text-shadow: 0 2px 24px rgb(6 33 51 / 0.85);
}
.world-word {
  font-family: var(--font-display), system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(2.25rem, 5.5vw, 4rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: #fff;
}
.world-lang {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--reef);
}
.world-pause {
  position: absolute;
  top: 4%;
  right: 4%;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 1px solid rgb(244 250 249 / 0.3);
  background: rgb(6 33 51 / 0.45);
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0.65;
  transition: opacity 0.15s, border-color 0.15s;
}
.world-pause:hover, .world-pause:focus-visible { opacity: 1; border-color: var(--reef); }
.world-pause::before {
  content: "";
  width: 0.7rem;
  height: 0.8rem;
  border-inline: 0.22rem solid var(--foam);
}
.world-pause[aria-pressed="true"]::before {
  width: 0;
  height: 0;
  border-block: 0.45rem solid transparent;
  border-inline: 0;
  border-left: 0.75rem solid var(--foam);
  margin-left: 0.2rem;
}

/* ---------- Four plain promises ---------- */

.proof {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 2rem 2.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.proof li { display: flex; flex-direction: column; gap: 0.375rem; padding-top: 1rem; border-top: 3px solid var(--reef); }
.proof strong { font-family: var(--font-display); font-size: 1.3125rem; letter-spacing: -0.02em; }
.proof span { color: var(--ink-soft); }

/* ---------- A day on Kahevo: one strip, from sunrise to night ---------- */

.day { padding-block: clamp(3.5rem, 8vw, 6.5rem); background: var(--foam); }
.day-list { list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; border-radius: 1.75rem; overflow: hidden; }
.day-list li {
  display: grid;
  grid-template-columns: minmax(7rem, 11rem) 1fr;
  gap: 0.5rem 2rem;
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 4vw, 3rem);
  color: var(--ink);
}
.day-list time {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.day-list h3 { font-size: 1.3125rem; font-weight: 700; margin-bottom: 0.375rem; }
.day-list p { margin: 0; }
.day-list li:nth-child(1) { background: linear-gradient(180deg, #f9dfae, #f4e9d2); }
.day-list li:nth-child(2) { background: linear-gradient(180deg, #f4e9d2, #ecf6f2); }
.day-list li:nth-child(3) { background: linear-gradient(180deg, #ecf6f2, #d4efe9); }
.day-list li:nth-child(4) { background: linear-gradient(180deg, #d4efe9, #a8dcd3); }
.day-list li:nth-child(5) { background: linear-gradient(180deg, #a8dcd3, #6cb8b6); }
.day-list li:nth-child(6) { background: linear-gradient(180deg, #1d6a7a, #0e4d66); color: var(--foam); }
.day-list li:nth-child(7) { background: linear-gradient(180deg, #0e4d66, #082e47); color: var(--foam); }
.day-list li:nth-child(8) { background: linear-gradient(180deg, #082e47, #041a2a); color: var(--foam); }
.day-list li:nth-child(n+6) p { color: rgb(244 250 249 / 0.88); }
.day-list li:nth-child(-n+5) p { color: var(--ink-soft); }
@media (max-width: 575.98px) {
  .day-list li { grid-template-columns: 1fr; }
}

/* Something real that is not released yet, said where it is said. */
.tag {
  display: inline-block;
  margin-left: 0.25rem;
  padding: 0 0.5rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
  opacity: 0.8;
  vertical-align: 0.1em;
}

/* ---------- Kinds of business, and other short sets ---------- */

.kinds {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 2rem 2.5rem;
  margin-top: 2.5rem;
}
.kinds-three { grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.kind { padding-top: 1rem; border-top: 3px solid var(--reef); }
.kind h3 { font-size: 1.3125rem; font-weight: 700; margin-bottom: 0.5rem; }
.band-foam .kind p { color: var(--ink-soft); }
.kind .story-list { margin: 0; }
.band-lagoon .story-list li::marker { color: var(--reef); }

.showcase .screen-frame { box-shadow: 0 2rem 4rem -1.5rem rgb(2 14 22 / 0.7); }
.showcase .lead-copy { color: rgb(244 250 249 / 0.92); }

/* ---------- Steps: a real sequence, so numbered ---------- */

.steps {
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 2rem 2.5rem;
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
}
.steps li { counter-increment: step; }
.steps li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: var(--deep);
  color: var(--foam);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
}
.steps h3 { font-size: 1.3125rem; font-weight: 700; margin-bottom: 0.5rem; }
.steps p { margin: 0; color: var(--ink-soft); }

/* ---------- Hosted or in the office ---------- */

.choice {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.choice-option { padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: 1.25rem; background: #fffdf8; }
.choice-option:first-child { box-shadow: inset 0 0 0 2px var(--lagoon); }
.choice-option h3 { font-size: 1.625rem; font-weight: 700; margin-bottom: 0.25rem; }
.choice-for { color: var(--lagoon); font-weight: 600; margin-bottom: 1.25rem; }
.choice-option .story-list { margin: 0; }

/* ---------- The last word on a page ---------- */

.closing .lead-copy { margin-bottom: 1.5rem; }
.closing-aside { margin: 1.5rem 0 0; color: var(--ink-soft); font-size: 0.9375rem; }

/* Lists laid out as rows and grids take their width from the layout, not the reading measure. */
.day-list li, .steps li, .proof li { max-width: none; }
.day-list p, .steps p, .proof span { max-width: 62ch; }

@media (min-width: 992px) {
  .day-list time { font-size: 1.75rem; }
}

/* ---------- Features: parts by who reads them ---------- */

.feature-group h3 { font-size: 1.75rem; font-weight: 700; }
.features-nav { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.features-nav a {
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgb(10 42 64 / 0.16);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}
.features-nav a:hover { box-shadow: inset 0 0 0 1.5px var(--lagoon); }
.features-part { margin: clamp(3.5rem, 7vw, 5.5rem) 0 clamp(2rem, 4vw, 3rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 3px solid var(--deep); scroll-margin-top: 1.5rem; }
.features-nav + .features-part { margin-top: 0; }
.features-part h2 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; letter-spacing: -0.03em; margin-bottom: 0.5rem; }
.features-part p { color: var(--ink-soft); font-size: 1.1875rem; margin: 0; }

/* The privacy policy and the terms: a list of the page's parts beside the text. */
.legal-dates { margin: 0.75rem 0 0; font-size: 0.9375rem; color: rgb(244 250 249 / 0.75); }
.legal h2 { scroll-margin-top: 6rem; }
.legal-toc { margin-bottom: 2rem; }
.legal-toc-title { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.02em; color: var(--ink-soft); margin-bottom: 0.5rem; }
.legal-toc ol { list-style: none; padding: 0; margin: 0; font-size: 0.9375rem; }
.legal-toc li { margin-bottom: 0.375rem; }
.legal-toc a { color: var(--ink-soft); text-decoration: none; }
.legal-toc a:hover, .legal-toc a:focus-visible { color: var(--lagoon); text-decoration: underline; }
@media (min-width: 992px) { .legal-toc ol { position: sticky; top: 6rem; } }
.legal-address { margin-top: 1rem; font-style: normal; }
.form-privacy { margin: 0.875rem 0 0; font-size: 0.875rem; color: var(--ink-soft); }
.footer-legal { display: flex; gap: 1.25rem; }

/* "How the pieces fit", played: diagram.js lights what each scene is about, draws the path
   something takes with a dot along it, rings phones and raises a few words. */
.dg-scenes { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem; margin-bottom: 1rem; }
.dg-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.dg-chips button {
  border: 1px solid rgb(10 42 64 / 0.18); background: #fff; color: var(--ink);
  border-radius: 999px; padding: 0.375rem 0.875rem; font-size: 0.9375rem; font-weight: 600;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.dg-chips button:hover { border-color: var(--lagoon); }
.dg-chips button[aria-selected="true"] { background: var(--deep); border-color: var(--deep); color: #fff; }
.dg-play {
  display: inline-grid; place-items: center; width: 2.375rem; height: 2.375rem; flex: none;
  border-radius: 50%; border: 1px solid rgb(10 42 64 / 0.18); background: #fff;
}
.dg-play:hover { border-color: var(--lagoon); }
.dg-play-icon { width: 0.75rem; height: 0.875rem; border-left: 4px solid var(--ink); border-right: 4px solid var(--ink); }
.is-paused .dg-play-icon {
  width: 0; height: 0; border-style: solid; border-color: transparent transparent transparent var(--ink);
  border-width: 0.4375rem 0 0.4375rem 0.75rem; margin-left: 0.1875rem;
}
.dg-story { max-width: 68ch; min-height: 4.9em; margin: 0 0 0.5rem; font-size: 1.0625rem; color: var(--ink); }

.system-diagram .dg-node { transition: opacity 0.5s ease, filter 0.5s ease; }
.system-diagram.is-playing .dg-node:not(.is-lit) { opacity: 0.34; }
.system-diagram .dg-node.is-down { opacity: 0.22; filter: grayscale(1); }
.system-diagram.is-playing .dg-node.is-lit:not(.dg-main) rect { filter: drop-shadow(0 6px 14px rgb(10 85 104 / 0.28)); }

.system-diagram .dg-trace { fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; opacity: 0.85; }
.system-diagram .dg-trace.dg-k-call { stroke: var(--lehua); }
.system-diagram .dg-trace.dg-k-audio { stroke: var(--reef); stroke-dasharray: 2 7; }
.system-diagram .dg-trace.dg-k-message { stroke: var(--sea); }
.system-diagram .dg-trace.dg-k-data { stroke: var(--lagoon); }
.system-diagram .dg-dot { stroke: #fff; stroke-width: 2.5; transition: opacity 0.7s ease 0.2s; }
.system-diagram .dg-dot.dg-k-call { fill: var(--lehua); }
.system-diagram .dg-dot.dg-k-audio { fill: var(--reef); }
.system-diagram .dg-dot.dg-k-message { fill: var(--sea); }
.system-diagram .dg-dot.dg-k-data { fill: var(--lagoon); }
.system-diagram .dg-dot.is-arrived { opacity: 0; }

.system-diagram .dg-rings circle { fill: none; stroke: none; transform-box: fill-box; transform-origin: center; }
.system-diagram .dg-rings .is-ringing { stroke: var(--lehua); stroke-width: 2.5; animation: dg-ring 1.1s ease-out infinite; }
@keyframes dg-ring { from { transform: scale(0.5); opacity: 1; } to { transform: scale(2.4); opacity: 0; } }

.system-diagram .dg-line .is-cut { stroke: var(--lehua); stroke-width: 2.5; stroke-dasharray: 3 6; }
.system-diagram .dg-flag { opacity: 0; transform: translateY(6px); transform-box: fill-box; transition: opacity 0.4s ease, transform 0.4s ease; }
.system-diagram .dg-flag.is-up { opacity: 1; transform: none; }
.system-diagram .dg-flag rect { fill: #0f7a5a; }
.system-diagram .dg-flag-bad rect { fill: var(--lehua); }
.system-diagram .dg-flag text { fill: #fff; font-size: 12px; font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .system-diagram .dg-node, .system-diagram .dg-flag, .dg-chips button { transition: none; }
  .system-diagram .dg-rings .is-ringing { animation: none; }
}