/* Living Mesh interface. Inspired by FreeMHS's dark surfaces and luminous edges. */
.mesh-interface {
  --bg: #070e14;
  --ink: #eaf5f4;
  --muted: #98aeb5;
  --faint: #73909a;
  --edge: #21343e;
  --mint: #79efcd;
  --amber: #efc180;
  --surface: #0c1821;
  --accent-line: rgba(121,239,205,.23);
  isolation: isolate;
  background: radial-gradient(ellipse at 82% 0, #173a3638, transparent 48%), #070e14;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.6;
}
.mesh-interface :is(button,a,input,select,textarea):focus-visible { outline: 2px solid var(--mint); outline-offset: 4px; }
.mesh-interface :is(h1,h2,h3) { font-weight: 550; }
.mesh-interface :is(h1,h2) em { font-style: normal; color: var(--mint); }
.mesh-interface p { color: var(--muted); }
.mesh-interface .button { min-height: 44px; border-radius: 10px; font-size: 12px; padding: 11px 17px; background: #12222c; border-color: #2c414a; }
.mesh-interface .button.primary { color: #06221d; border-color: #a3f7dc99; background: linear-gradient(110deg,#a0f8dd,#79efcd 55%,#52cdbc); box-shadow: 0 8px 30px #46d3b317,inset 0 1px #ffffff70; }
.mesh-interface .button:hover { border-color: #75baaa; background: #1a343b; }
.mesh-interface .button.primary:hover { background: #b3ffe5; box-shadow: 0 8px 32px #46d3b326; }
.mesh-interface .button.subtle { background: #101d2670; }
.mesh-interface .button.small { min-height: 40px; font-size: 11px; }
.mesh-interface .icon-button { min-width: 42px; min-height: 42px; border-radius: 10px; background: #10212bc9; }
.mesh-interface .eyebrow { color: #8dcab9; font-size: 9px; letter-spacing: 1.8px; }
.mesh-interface .tiny-badge { color: #a5ccc3; font-size: 9px; letter-spacing: .9px; padding: 4px 7px; }
.mesh-interface .status-pill { border-radius: 999px; padding: 6px 10px; background: #183b2c55; font-size: 10px; }
.mesh-interface .status-pill.offline { background: #49312166; border-color: #71533b; color: #efd0a8; }
.mesh-interface .brand { gap: 10px; }
.mesh-interface .brand > span { font-size: 25px; letter-spacing: -1px; }
.mesh-interface .brand img { width: 48px; height: 48px; }
.mesh-interface .brand small { color: #789c9f; font-size: 6.5px; letter-spacing: 2.15px; }
.mesh-interface .brand strong { color: #8cf3d6; font-weight: 650; }
.mesh-interface .workspace-watermark { position: fixed; z-index: -1; top: 55px; right: -115px; width: 750px; max-width: 75vw; opacity: .043; mix-blend-mode: screen; pointer-events: none; mask-image: radial-gradient(circle,#000 40%,transparent 70%); }

/* Navigation stays in place while the observation workspace scrolls. */
.mesh-interface .sidebar { width: 242px; padding: 23px 18px 16px; background: linear-gradient(155deg,#0e1c23f5,#09131bf7 68%); border-color: #29403c80; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #31534d transparent; }
.mesh-interface .sidebar .brand { gap: 6px; }
.mesh-interface .sidebar .brand > span { font-size: 24px; }
.mesh-interface .workspace-label { margin-top: 32px; font-size: 9px; color: #80989f; }
.mesh-interface .network-selector { padding: 12px; border-color: #35524a80; background: linear-gradient(120deg,#1f3b325c,#12242b80); border-radius: 12px; }
.mesh-interface .network-selector strong { font-size: 11px; line-height: 1.6; }
.mesh-interface .network-selector small { font-size: 9px; color: #88a2a8; }
.mesh-interface .sidebar nav { margin-top: 10px; }
.mesh-interface .nav-label { color: #79959e; font-size: 8px; margin: 18px 12px 8px; }
.mesh-interface .sidebar nav a { min-height: 40px; padding: 8px 12px; font-size: 12px; color: #a3b5bd; border: 1px solid transparent; border-radius: 9px; margin: 3px 0; }
.mesh-interface .sidebar nav a .icon { width: 18px; height: 18px; color: #829ba4; }
.mesh-interface .sidebar nav a.active { color: #9af6d8; border-color: #487e654d; background: linear-gradient(100deg,#285a443e,#1c44302c); box-shadow: inset 2px 0 var(--mint),inset 0 1px #b2ffe50c; }
.mesh-interface .sidebar nav a.active .icon { color: var(--mint); filter: drop-shadow(0 0 6px #72efd14d); }
.mesh-interface .sidebar nav a:hover { background: #1a303980; color: #edf9f6; }
.mesh-interface .edge-note { padding: 14px; background: radial-gradient(ellipse at 100% 0,#3c845229,transparent),#10211e42; border-color: #325549; }
.mesh-interface .edge-note p { font-size: 10px; }
.mesh-interface .app-shell { margin-left: 242px; }
.mesh-interface .topbar { padding: 0 30px; height: 72px; border-color: #2b464133; background: #091219e8; backdrop-filter: blur(22px); }
.mesh-interface .breadcrumb { color: #d1e6e1; font-size: 11px; }
.mesh-interface .breadcrumb span { color: #8ca5ac; }
.mesh-interface .top-actions { gap: 16px; }
.mesh-interface main#main { max-width: 1620px; padding: 30px 30px 20px; }
.mesh-interface .page-heading { position: relative; align-items: center; gap: 18px; margin-bottom: 27px; }
.mesh-interface .page-heading h1 { font-size: clamp(30px,3.1vw,46px); line-height: 1.12; letter-spacing: -1.8px; margin: 12px 0 12px; }
.mesh-interface .page-heading h1 em { margin-left: .2em; }
.mesh-interface .page-heading p { font-size: 11px; color: #94aeb5; line-height: 1.75; }
.mesh-interface .heading-actions { align-self: center; }

/* The map and actionable status are the centre of the overview. */
.mesh-interface .metric-grid { gap: 14px; margin-bottom: 22px; }
.mesh-interface .metric-card { padding: 18px 19px; border-radius: 14px; border-color: #28463f80; background: radial-gradient(ellipse at 100% 0,#224a3629,transparent 70%),linear-gradient(145deg,#112129eb,#0b1720f5); box-shadow: inset 0 1px #c0ffe30b,0 8px 24px #0000000d; }
.mesh-interface .metric-card::after { width: 120px; height: 120px; right: -55px; bottom: -70px; border-color: #73b9951a; box-shadow: 0 0 0 14px #63917409,0 0 0 29px #63917406; }
.mesh-interface .metric-card::before { position: absolute; content: ''; top: 0; height: 1px; left: 18%; right: 18%; background: linear-gradient(90deg,transparent,#7de8be40,transparent); }
.mesh-interface .metric-label { font-size: 11px; color: #afc4c9; }
.mesh-interface .metric-label .icon { color: #82aeab; }
.mesh-interface .metric-value { font-size: 39px; font-weight: 550; letter-spacing: -1.7px; margin: 12px 0 11px; }
.mesh-interface .metric-value small { color: #8aacae; font-size: 17px; }
.mesh-interface .metric-foot { font-size: 9px; color: #9ab3ba; line-height: 1.6; }
.mesh-interface .metric-foot span:last-child { display: inline; }
.mesh-interface .attention-metric { border-color: #74614066; background: radial-gradient(ellipse at 100% 0,#8964381f,transparent 70%),linear-gradient(145deg,#23282096,#111e23); }
.mesh-interface .attention-metric::before { background: linear-gradient(90deg,transparent,#d6ac6155,transparent); }
.mesh-interface .attention-metric .metric-label .icon { color: #e1b775; }
.mesh-interface .attention-metric .metric-foot { color: #d3bd99; }
.mesh-interface .overview-grid,.mesh-interface .lower-grid { grid-template-columns: minmax(0,1.65fr) minmax(310px,1fr); gap: 20px; }
.mesh-interface .panel { border-color: #28443e70; background: linear-gradient(145deg,#10202af0,#0b1720f7); border-radius: 16px; box-shadow: inset 0 1px #d5ffe707,0 15px 50px #00000012; }
.mesh-interface .feature-panel { position: relative; }
.mesh-interface .feature-panel::before { position: absolute; z-index: 2; top: 0; left: 16%; right: 16%; height: 1px; content: ''; background: linear-gradient(90deg,transparent,#6be2c450,transparent); pointer-events: none; }
.mesh-interface .panel-heading { padding: 20px 22px 17px; min-height: 64px; }
.mesh-interface .panel-heading h2 { font-size: 16px; letter-spacing: -.35px; }
.mesh-interface .panel-heading .eyebrow { font-size: 8px; letter-spacing: 1.5px; color: #81b4ad; }
.mesh-interface .panel-heading .text-link { font-size: 11px; }
.mesh-interface .network-map { min-height: 354px; background: radial-gradient(ellipse at 55% 45%,#22574629,transparent 70%),#09181f; }
.mesh-interface .network-map > svg { min-height: 354px; }
.mesh-interface .network-map::before { background-size: 40px 40px; opacity: .6; }
.mesh-interface .map-controls { gap: 6px; right: 14px; top: 14px; }
.mesh-interface .map-controls .icon-button { width: 36px; height: 36px; min-width: 36px; min-height: 36px; background: #10232be8; border-color: #355c5055; }
.mesh-interface .map-controls .icon { width: 16px; height: 16px; }
.mesh-interface .map-location { color: #9dbebd; font-size: 9px; bottom: 18px; }
.mesh-interface .map-attribution { font-size: 7px; color: #87a4ab; }
.mesh-interface .map-footer { font-size: 9px; color: #a0b9bd; padding: 13px 20px; border-color: #2a48424d; background: #10232955; }
.mesh-interface .map-node text { font-size: 10px; }
.mesh-interface .right-rail { gap: 18px; }
.mesh-interface .gateway-health { padding: 0 22px 19px; gap: 18px; }
.mesh-interface .orb { width: 92px; height: 92px; border-color: #568c744d; background: radial-gradient(circle,#275f443d,transparent 75%); box-shadow: inset 0 0 0 6px #10201e,inset 0 0 0 7px #355a434d,0 0 26px #77efb00b; }
.mesh-interface .orb::before { border-top-color: #a5ffdf; border-right-color: #76e7c355; filter: drop-shadow(0 0 3px #88f6d438); }
.mesh-interface .orb small { color: #a1c5b6; }
.mesh-interface .gateway-health strong { font-size: 13px; }
.mesh-interface .gateway-health p { font-size: 11px; color: #93adb4; }
.mesh-interface .gateway-health .text-link { font-size: 11px; }
.mesh-interface .mini-signal { border-color: #27453d66; color: #9abbb2; font-size: 8px; padding: 11px 22px; }
.mesh-interface .alert-row { padding: 14px 22px; border-color: #34524742; min-height: 104px; }
.mesh-interface .alert-row strong { font-size: 12px; }
.mesh-interface .alert-row p { font-size: 10.5px; color: #9ab0b9; line-height: 1.75; }
.mesh-interface .alert-row small { font-size: 9px; color: #87a3a8; }
.mesh-interface .lower-grid { margin-top: 20px; }
.mesh-interface .directory-head { display: grid; grid-template-columns: minmax(0,1fr) 96px 75px; gap: 15px; padding: 0 40px 12px 22px; color: #8facb0; font-size: 8px; text-transform: uppercase; letter-spacing: 1px; }
.mesh-interface button.node-row { grid-template-columns: 34px minmax(0,1fr) 90px 75px 12px; padding: 15px 22px; min-height: 80px; gap: 11px; border-top-color: #34524742; }
.mesh-interface button.node-row:hover { background: #23493b30; }
.mesh-interface .node-avatar { width: 34px; height: 34px; border-color: #50725d55; background: linear-gradient(140deg,#28523d77,#122c2866); color: #a2dec7; }
.mesh-interface .node-name strong { font-size: 12px; }
.mesh-interface .node-name small { font-size: 9px; color: #7b9b9f; }
.mesh-interface .node-reading strong { font-size: 14px; font-variant-numeric: tabular-nums; }
.mesh-interface .node-reading small { font-size: 9px; color: #9bb6b9; }
.mesh-interface .node-freshness { font-size: 10px; color: #a7dac0; }
.mesh-interface .node-freshness small { font-size: 9px; color: #8aa7ad; }
.mesh-interface .node-freshness.overdue { color: #eac087; }
.mesh-interface .flow-total { padding: 0 22px; }
.mesh-interface .flow-total strong { font-size: 37px; letter-spacing: -1.4px; }
.mesh-interface .flow-total span { font-size: 10px; color: #9bb8bd; }
.mesh-interface .observations-panel svg#flow-chart { height: 127px; margin-top: 23px; }
.mesh-interface .chart-axis { color: #8badae; font-size: 9px; }
.mesh-interface .chart-caption { color: #8eafb2; font-size: 10px; line-height: 1.6; }
.mesh-interface .workspace-footer { color: #7c989e; font-size: 9px; }

/* Forms, directories and operational pages share the same legibility. */
.mesh-interface input,.mesh-interface select,.mesh-interface textarea { color: #e2f0ec; background: #09161ee6; border-color: #35544c80; border-radius: 9px; font-size: 13px; min-height: 44px; }
.mesh-interface input::placeholder,.mesh-interface textarea::placeholder { color: #7e989f; }
.mesh-interface label { color: #bbcece; font-size: 12px; }
.mesh-interface .toolbar { padding: 12px; background: #10222c85; border: 1px solid #35534a50; border-radius: 14px; }
.mesh-interface .search-field { border-color: #35544c80; background: #09161ee6; }
.mesh-interface .search-field input { background: transparent; }
.mesh-interface .gateway-card h2 { font-size: 19px; }
.mesh-interface .gateway-card > p,.mesh-interface .padded > p { font-size: 12px; }
.mesh-interface .detail-grid dt { font-size: 11px; color: #9ab8b8; }
.mesh-interface .detail-grid dd { font-size: 13px; }
.mesh-interface .icon-tile { background: linear-gradient(135deg,#254e3d70,#152e2f60); border-color: #57826b66; color: #a4f1d3; }
.mesh-interface .integration-hero { padding: 34px; background: radial-gradient(ellipse at 100% 0,#35614740,transparent 70%),linear-gradient(120deg,#102623,#101e2b); border-color: #365a4b; border-radius: 18px; }
.mesh-interface .integration-hero h2 { font-size: 34px; }
.mesh-interface .integration-hero p,.mesh-interface .integration-card p,.mesh-interface .local-radio > p { font-size: 13px; }
.mesh-interface .integration-card > small,.mesh-interface .helper-text,.mesh-interface .steps p,.mesh-interface .note-panel p { font-size: 11px; color: #9ab3b8; }
.mesh-interface .integration-card > .tiny-badge { font-size: 8px; }
.mesh-interface .message-row { display: block; border-color: #34524755; }
.mesh-interface .message-row p { font-size: 13px; line-height: 1.75; }
.mesh-interface .message-meta,.mesh-interface .message-meta strong { font-size: 11px; }
.mesh-interface .message-state { display: inline-flex; margin-top: 9px; }
.mesh-interface .compose-panel { padding: 0 22px 22px; }
.mesh-interface .compose-panel .panel-heading { padding-left: 0; padding-right: 0; }
.mesh-interface .padded > .panel-heading { padding: 0 0 17px; }
.mesh-interface .activity-list strong { font-size: 13px; }
.mesh-interface .activity-list p,.mesh-interface .activity-list time { font-size: 11px; }
.mesh-interface .activity-list code { font-size: 10px; }
.mesh-interface dialog { background: linear-gradient(145deg,#132831,#091820); border-color: #497565; box-shadow: 0 50px 160px #000b; }
.mesh-interface dialog .detail-grid > div { background: #0c1d22; border: 1px solid #365a4d55; border-radius: 10px; padding: 13px; }
.mesh-interface dialog .detail-grid dd { font-size: 20px; }
.mesh-interface .toast.visible { transform: translate(-50%,0); }

/* Public site and account pages. */
.mesh-interface .page-width { width: min(1240px,calc(100% - 80px)); margin-inline: auto; }
.mesh-interface .site-header { position: sticky; top: 0; z-index: 60; border-bottom: 1px solid #365b443b; background: #081117ed; backdrop-filter: blur(22px); }
.mesh-interface .site-nav { min-height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.mesh-interface .site-links,.mesh-interface .site-actions { display: flex; align-items: center; gap: 30px; }
.mesh-interface .site-links a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: #a4bbb9; font-size: 12px; }
.mesh-interface .site-links a:hover,.mesh-interface .site-signin:hover { color: #abf9dd; }
.mesh-interface .site-signin { font-size: 12px; color: #bdd2ca; }
.mesh-interface .site-footer { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 35px 0; border-top: 1px solid #3b5c4538; }
.mesh-interface .site-footer .brand > span { font-size: 21px; }
.mesh-interface .site-footer .brand img { width: 36px; height: 36px; }
.mesh-interface .site-footer p,.mesh-interface .site-footer > span { font-size: 11px; color: #8aa3a3; margin: 0; }
.mesh-interface.auth-page main.auth-main { width: min(1120px,calc(100% - 64px)); max-width: 1120px; min-height: calc(100svh - 240px); padding: 70px 0; margin: 0 auto; gap: 70px; }
.mesh-interface .auth-intro h1 { font-size: 58px; line-height: 1.07; }
.mesh-interface .auth-intro p { font-size: 15px; }
.mesh-interface .auth-card { background: linear-gradient(140deg,#152b3188,#0c1923f5); border-color: #40664977; padding: 32px; border-radius: 18px; box-shadow: 0 30px 100px #0003; }
.mesh-interface .auth-card form p label { font-size: 12px; }
.mesh-interface .auth-card .helptext { font-size: 11px; color: #96aeb2; }
.mesh-interface.auth-page main.welcome-main { display: block; width: 100%; max-width: none; margin: 0; padding: 0; }
.welcome-page { background: radial-gradient(ellipse at 80% 10%,#17453524,transparent 50%),#070e14; }
.welcome-page section { position: relative; scroll-margin-top: 95px; }
.brand-atmosphere { position: fixed; right: -250px; top: 40px; z-index: -1; width: min(1040px,90vw); opacity: .065; mix-blend-mode: screen; pointer-events: none; mask-image: radial-gradient(circle,#000 35%,transparent 70%); animation: leaf-atmosphere 14s ease-in-out infinite; }
.landing-hero { isolation: isolate; overflow: hidden; background-image: linear-gradient(#8ece9d08 1px,transparent 1px),linear-gradient(90deg,#8ece9d08 1px,transparent 1px); background-size: 62px 62px; }
.landing-hero::before { content: ''; position: absolute; z-index: -1; width: 1000px; height: 700px; border: 1px solid #85da9a0b; border-radius: 50%; right: -90px; top: -270px; background: radial-gradient(ellipse,#326d2a20,transparent 68%); box-shadow: 0 0 0 100px #85da9a04,0 0 0 200px #85da9a02; }
.landing-hero::after { position: absolute; inset: auto 0 0; height: 80px; content: ''; background: linear-gradient(transparent,#070e14); pointer-events: none; }
.hero-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; min-height: 710px; padding-block: 70px 85px; align-items: center; }
.hero-copy { position: relative; z-index: 2; }
.mesh-interface .hero-kicker { display: inline-flex; align-items: center; gap: 10px; border: 1px solid #65986d33; border-radius: 999px; background: #17352455; padding: 8px 12px; font-size: 8px; letter-spacing: 1.5px; margin: 0; }
.mesh-interface .hero-copy h1 { font-size: clamp(62px,6.5vw,90px); font-weight: 500; letter-spacing: -5px; line-height: .99; margin: 28px 0 25px; }
.mesh-interface .hero-copy h1 em { color: transparent; background: linear-gradient(115deg,#c2ffe5 10%,#79edbd 50%,#4bbdaa 100%); background-clip: text; -webkit-background-clip: text; }
.mesh-interface .hero-lead { color: #a2b8b7; font-size: 16px; line-height: 1.85; max-width: 490px; margin: 23px 0 30px; }
.mesh-interface .hero-copy .button { min-height: 49px; font-size: 12px; }
.mesh-interface .hero-note { display: flex; align-items: center; gap: 9px; color: #8fa79e; font-size: 11px; margin: 22px 0 0; }
.hero-note .icon { color: #9bebc7; width: 14px; height: 14px; }
.mesh-scene { position: relative; height: 550px; isolation: isolate; }
.scene-grid { position: absolute; inset: 6% -6%; border-radius: 50%; background: linear-gradient(#70bdb110 1px,transparent 1px),linear-gradient(90deg,#70bdb110 1px,transparent 1px); background-size: 29px 29px; mask-image: radial-gradient(circle,#000 20%,transparent 70%); }
.scene-orbit { position: absolute; width: 94%; aspect-ratio: 1; top: 4%; left: 3%; border: 1px solid #78caa520; border-radius: 50%; box-shadow: 0 0 0 32px #78caa504; }
.scene-orbit.inner { width: 75%; left: 12.5%; top: 13%; border-style: dashed; border-color: #91ddb620; transform: rotate(-25deg); }
.scene-orbit.outer::before { position: absolute; content: ''; inset: -1px; border-top: 1px solid #89f3c685; border-right: 1px solid transparent; border-radius: 50%; animation: scene-orbit 30s linear infinite; }
.scene-orbit::after { position: absolute; content: ''; width: 7px; height: 7px; border-radius: 50%; background: #a7f7ce; box-shadow: 0 0 15px #75efbaa6; top: 19%; right: 9.5%; }
.scene-orbit.inner::after { top: auto; right: auto; bottom: 10%; left: 18%; width: 5px; height: 5px; }
.scene-leaf { position: absolute; width: 88%; height: auto; top: 0; left: 6%; z-index: 1; mix-blend-mode: lighten; mask-image: radial-gradient(circle,#000 42%,transparent 69%); filter: drop-shadow(0 0 25px #7aecb316); animation: leaf-breathe 10s ease-in-out infinite; }
.scene-caption { position: absolute; top: 70%; left: 0; right: 0; z-index: 2; text-align: center; display: grid; gap: 7px; }
.scene-caption span { color: #c3ecdc; font-size: 11px; letter-spacing: 5px; }
.scene-caption small { color: #88b6a5; font-size: 7px; letter-spacing: 3px; }
.scene-card { position: absolute; z-index: 3; display: flex; align-items: center; gap: 11px; padding: 14px 16px; border: 1px solid #56866b66; border-radius: 12px; background: linear-gradient(125deg,#17332ced,#0c1c24ed); box-shadow: 0 22px 60px #0005,inset 0 1px #bcffdf0c; backdrop-filter: blur(14px); }
.scene-card.capture { top: 2%; left: -2%; }
.scene-card.connect { right: -2%; bottom: 22%; }
.scene-icon { width: 34px; height: 38px; display: grid; place-items: center; color: #a5eccb; border-right: 1px solid #90c2a12e; padding-right: 10px; }
.scene-card > div { display: grid; gap: 4px; }
.scene-card small { font: 8px ui-monospace,monospace; letter-spacing: 1px; color: #92b6a7; }
.scene-card strong { font-size: 12px; font-weight: 600; color: #d9f4e8; }
.scene-card div > span { font-size: 10px; color: #a4bab1; }
.scene-card > .dot { width: 4px; height: 4px; align-self: start; margin-top: 3px; }
.scene-explore { position: absolute; bottom: 1%; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; white-space: nowrap; font-size: 11px; color: #b5d6c8; min-height: 44px; }
.scene-explore .icon { width: 15px; height: 15px; }
.capability-strip { border-block: 1px solid #3b6d502e; background: #10251d26; backdrop-filter: blur(10px); }
.capability-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); }
.capability-grid > div { display: flex; align-items: center; justify-content: center; gap: 16px; border-right: 1px solid #3b6d502e; padding: 28px 14px; }
.capability-grid > div:first-child { border-left: 1px solid #3b6d502e; }
.capability-grid .icon { width: 23px; height: 23px; color: #90b8a2; }
.capability-grid span { display: grid; gap: 6px; }
.capability-grid strong { color: #cfdfd8; font-size: 10px; letter-spacing: 1.4px; }
.capability-grid small { font-size: 10px; color: #96b0a7; }
.landing-section { padding-block: 100px; }
.section-intro { display: grid; grid-template-columns: 1.3fr 1fr; align-items: end; gap: 80px; margin-bottom: 40px; }
.mesh-interface .landing-section h2,.mesh-interface .workflow-layout h2,.mesh-interface .landing-cta h2 { font-size: clamp(34px,4vw,54px); line-height: 1.08; font-weight: 500; letter-spacing: -2.3px; margin: 16px 0 0; }
.mesh-interface .section-intro p { font-size: 15px; line-height: 1.9; margin: 0; color: #9db4b1; }
.platform-cards,.ecosystem-cards { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.platform-card,.ecosystem-cards > a { position: relative; display: flex; flex-direction: column; border: 1px solid #42694f52; border-radius: 18px; padding: 28px; background: radial-gradient(ellipse at 100% 0,#3d704019,transparent 65%),linear-gradient(145deg,#112029e6,#0a161dee); box-shadow: inset 0 1px #caffda09,0 20px 50px #0001; transition: transform .25s,border-color .25s,box-shadow .25s; }
.platform-card:hover,.ecosystem-cards > a:hover { transform: translateY(-4px); border-color: #78d89b80; box-shadow: 0 25px 55px #0004; }
.feature-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 45px; }
.feature-top > span:last-child { color: #789586; font: 11px ui-monospace,monospace; }
.amber-tile { color: #efca95!important; border-color: #b990474d!important; background: #634b2930!important; }
.mesh-interface .platform-card h3 { margin: 5px 0 12px; font-size: 21px; line-height: 1.3; letter-spacing: -.6px; }
.mesh-interface .platform-card p,.mesh-interface .ecosystem-cards p { color: #a0b8b2; font-size: 13px; line-height: 1.9; margin: 0 0 28px; }
.feature-link { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: auto; padding-top: 20px; border-top: 1px solid #638c6333; color: #b4ead3; font-size: 11px; }
.feature-link .icon { width: 15px; height: 15px; }
.mesh-interface .demo-caption { color: #859f99; font-size: 11px; margin: 22px 0 0; }
.workflow-section { border-block: 1px solid #345c442e; background: linear-gradient(105deg,#132b2126,#0b182259); padding-block: 85px; }
.workflow-layout { display: grid; grid-template-columns: 1fr 1.1fr; gap: 100px; align-items: center; }
.field-steps { display: grid; }
.field-steps a { display: flex; align-items: center; gap: 22px; padding: 24px 18px; border-bottom: 1px solid #3e6c4b4d; transition: background .2s; }
.field-steps a:hover { background: #3260421f; }
.field-steps a > span { font: 13px ui-monospace,monospace; color: #9dd7b2; }
.field-steps h3 { color: #d8eee2; font-size: 17px; margin: 0 0 6px; letter-spacing: -.4px; }
.mesh-interface .field-steps p { color: #9fb8ab; font-size: 12px; margin: 0; }
.field-steps .icon { margin-left: auto; width: 16px; height: 16px; color: #9ac2a4; flex-shrink: 0; }
.ecosystem-name { font-size: 32px; letter-spacing: -1.5px; color: #e3f4ed; margin-bottom: 24px; }
.ecosystem-name strong { color: #91dfbb; font-weight: 550; }
.ecosystem-cards > a { min-width: 0; }
.ecosystem-cards .tiny-badge { align-self: start; margin-bottom: 20px; font-size: 8px; }
.landing-cta { display: flex; justify-content: space-between; align-items: center; gap: 30px; margin-bottom: 80px; padding: 48px; border: 1px solid #5f9c674d; border-radius: 24px; background: radial-gradient(ellipse at 75% 0,#4a94432b,transparent 65%),linear-gradient(135deg,#17392d99,#0f202bf2); box-shadow: inset 0 1px #baf8c60b; }
.landing-cta > div:last-child { display: grid; justify-items: start; gap: 18px; }
@keyframes leaf-atmosphere { 0%,100% { transform: rotate(-2deg) scale(.98); opacity: .05; } 50% { transform: rotate(2deg) scale(1.02); opacity: .08; } }
@keyframes leaf-breathe { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes scene-orbit { to { transform: rotate(360deg); } }

/* Tablet and compact desktop. */
@media (max-width:1250px) {
  .mesh-interface .sidebar { width: 210px; padding-inline: 12px; }
  .mesh-interface .sidebar .brand > span { font-size: 21px; }
  .mesh-interface .app-shell { margin-left: 210px; }
  .mesh-interface main#main { padding-inline: 24px; }
  .mesh-interface .overview-grid,.mesh-interface .lower-grid { grid-template-columns: minmax(0,1.5fr) minmax(285px,1fr); gap: 16px; }
  .mesh-interface .metric-card { padding: 16px 14px; }
  .mesh-interface .metric-label { font-size: 10px; }
  .mesh-interface .metric-value { font-size: 34px; }
  .mesh-interface .metric-foot { font-size: 8px; }
  .mesh-interface .panel-heading { padding-inline: 18px; }
  .mesh-interface button.node-row { grid-template-columns: 30px minmax(0,1fr) 78px 12px; padding: 14px 18px; gap: 9px; }
  .mesh-interface .node-freshness,.mesh-interface .directory-head { display: none; }
  .mesh-interface .gateway-health { padding-inline: 18px; gap: 14px; }
  .mesh-interface .orb { width: 82px; height: 82px; }
  .hero-grid { gap: 24px; }
  .mesh-interface .hero-copy h1 { font-size: 72px; letter-spacing: -4px; }
  .mesh-scene { height: 500px; }
  .scene-card { padding: 12px; }
  .scene-card.connect { bottom: 24%; }
  .scene-caption { top: 68%; }
  .scene-orbit { top: 10%; }
  .scene-orbit.inner { top: 17%; }
  .scene-leaf { top: 8%; }
}
@media (max-width:1050px) {
  .mesh-interface .sidebar { width: 76px; padding: 20px 10px; }
  .mesh-interface .sidebar .brand { justify-content: center; }
  .mesh-interface .sidebar .brand > span,.mesh-interface .workspace-label,.mesh-interface .network-selector,.mesh-interface .nav-label,.mesh-interface .sidebar-bottom { display: none; }
  .mesh-interface .sidebar nav { margin-top: 26px; }
  .mesh-interface .sidebar nav a { font-size: 0; justify-content: center; padding: 12px 0; margin-bottom: 8px; }
  .mesh-interface .sidebar nav a span { display: none; }
  .mesh-interface .sidebar nav a .icon { width: 21px; height: 21px; }
  .mesh-interface .app-shell { margin-left: 76px; }
  .mesh-interface .page-heading h1 { font-size: 34px; }
  .mesh-interface .page-heading h1 em { display: block; margin: 3px 0 0; }
  .mesh-interface .overview-grid,.mesh-interface .lower-grid { grid-template-columns: 1fr; }
  .mesh-interface .right-rail { display: grid; grid-template-columns: 1fr 1fr; }
  .mesh-interface .lower-grid { grid-template-columns: 1.2fr 1fr; }
  .mesh-interface .gateway-health { flex-wrap: wrap; }
  .mesh-interface .site-links { gap: 22px; }
  .mesh-interface .site-actions { gap: 18px; }
  .hero-grid { grid-template-columns: 1fr 1fr; min-height: 650px; padding-block: 70px; }
  .mesh-interface .hero-copy h1 { font-size: 62px; letter-spacing: -3.5px; }
  .mesh-interface .hero-kicker { font-size: 7px; letter-spacing: .8px; }
  .mesh-interface .hero-lead { font-size: 14px; }
  .scene-card strong { font-size: 10px; }
  .scene-card div > span { font-size: 9px; }
  .scene-card.capture { top: 7%; }
  .scene-card.connect { bottom: 26%; }
  .scene-caption { top: 64%; }
  .capability-grid > div { padding-inline: 10px; gap: 10px; }
  .capability-grid strong { font-size: 8px; letter-spacing: 1px; }
  .capability-grid small { font-size: 9px; }
  .section-intro { gap: 40px; }
  .workflow-layout { gap: 45px; }
  .platform-card,.ecosystem-cards > a { padding: 22px; }
  .mesh-interface .platform-card h3 { font-size: 19px; }
  .ecosystem-name { font-size: 27px; }
}
/* The field app uses a full-width shell on tablets as well as phones. */
.mesh-interface.mobile-app .sidebar { display: none; }
.mesh-interface.mobile-app .app-shell { margin-left: 0; }
.mesh-interface.mobile-app main#main { max-width: 1000px; padding: 28px 22px 110px; }
.mesh-interface.mobile-app .topbar { height: 74px; padding: 0 20px; }
.mesh-interface.mobile-app .brand > span { font-size: 23px; }
.mesh-interface.mobile-app .brand img { width: 40px; height: 40px; }
.mesh-interface.mobile-app .topbar .status-pill { font-size: 9px; padding: 5px 9px; }
.mesh-interface.mobile-app .topbar .icon-button { min-width: 42px; min-height: 42px; }
.mesh-interface.mobile-app .page-heading h1 { font-size: 39px; }
.mesh-interface.mobile-app .page-heading h1 em { display: block; margin: 0; }
.mesh-interface.mobile-app .page-heading .eyebrow { font-size: 8px; }
.mesh-interface.mobile-app .page-heading p { font-size: 12px; max-width: 400px; }
.mesh-interface.mobile-app .heading-actions .button { width: 44px; height: 44px; }
.mesh-interface.mobile-app .overview-grid,.mesh-interface.mobile-app .lower-grid { grid-template-columns: 1fr; }
.mesh-interface.mobile-app .right-rail { display: grid; grid-template-columns: 1fr 1fr; }
.mesh-interface.mobile-app .bottom-nav,.mesh-interface .bottom-nav {
  position: fixed; z-index: 45; inset: auto 0 0; justify-content: space-around;
  padding: 8px 10px calc(10px + env(safe-area-inset-bottom));
  background: #0d1c23f0; backdrop-filter: blur(22px); border-top: 1px solid #547b665c;
  box-shadow: 0 -8px 36px #0003;
}
.mesh-interface .bottom-nav a { position: relative; flex: 1; font-size: 10px; color: #9eb4bb; min-height: 51px; padding: 6px 4px; gap: 5px; border-radius: 10px; }
.mesh-interface .bottom-nav a.active { color: #a2f5d6; background: linear-gradient(#4c986332,transparent); }
.mesh-interface .bottom-nav a.active::before { top: -9px; width: 22px; box-shadow: 0 2px 12px #a4ffc873; }
.mesh-interface .bottom-nav .icon { width: 22px; height: 22px; }
@media (max-width:760px) {
  .mesh-interface .site-links { display: none; }
  .mesh-interface .page-width { width: calc(100% - 48px); }
  .hero-grid { grid-template-columns: 1fr; padding-block: 65px 30px; gap: 20px; }
  .mesh-interface .hero-copy h1 { font-size: clamp(56px,10vw,78px); letter-spacing: -3.5px; }
  .mesh-interface .hero-kicker { font-size: 8px; letter-spacing: .8px; }
  .mesh-interface .hero-lead { max-width: 550px; font-size: 15px; }
  .mesh-scene { width: min(520px,100%); margin-inline: auto; height: 505px; }
  .scene-leaf { top: 0; }
  .scene-orbit { top: 0; }
  .scene-orbit.inner { top: 9%; }
  .scene-caption { top: 70%; }
  .scene-card.capture { top: 1%; left: 0; }
  .scene-card.connect { right: 0; bottom: 24%; }
  .scene-card strong { font-size: 12px; }
  .scene-card div > span { font-size: 10px; }
  .capability-grid { grid-template-columns: 1fr 1fr; }
  .capability-grid > div { justify-content: flex-start; padding: 22px 15px; border-bottom: 1px solid #3b6d502e; }
  .capability-grid > div:nth-child(3) { border-left: 1px solid #3b6d502e; }
  .capability-grid > div:nth-last-child(-n+2) { border-bottom: 0; }
  .capability-grid strong { font-size: 9px; letter-spacing: .8px; }
  .capability-grid small { font-size: 10px; }
  .section-intro,.workflow-layout { grid-template-columns: 1fr; gap: 24px; }
  .landing-section { padding-block: 70px; }
  .platform-cards { grid-template-columns: 1fr; gap: 16px; }
  .feature-top { margin-bottom: 27px; }
  .mesh-interface .platform-card h3 { font-size: 23px; }
  .ecosystem-cards { grid-template-columns: 1fr; }
  .ecosystem-name { font-size: 32px; }
  .workflow-section { padding-block: 65px; }
  .workflow-layout { gap: 35px; }
  .landing-cta { flex-direction: column; align-items: start; padding: 30px; }
  .mesh-interface.auth-page main.auth-main { grid-template-columns: 1fr; width: calc(100% - 48px); padding: 45px 0; gap: 30px; }
  .mesh-interface.auth-page main.welcome-main { width: 100%; padding: 0; }
  .mesh-interface .auth-intro h1 { font-size: 45px; }
  .mesh-interface .site-footer { flex-wrap: wrap; justify-content: flex-start; gap: 15px 25px; }
  .mesh-interface .site-footer > span { width: 100%; }
  .mesh-interface .passport-summary .detail-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width:600px) {
  .mesh-interface .sidebar { display: none; }
  .mesh-interface .app-shell { margin-left: 0; }
  .mesh-interface .topbar { height: 70px; padding-inline: 16px; }
  .mesh-interface .breadcrumb { display: none; }
  .mesh-interface .mobile-brand { display: flex; }
  .mesh-interface .topbar .brand > span { font-size: 22px; }
  .mesh-interface .topbar .brand img { width: 36px; height: 36px; }
  .mesh-interface .top-actions { gap: 5px; }
  .mesh-interface .top-actions .button.small { min-height: 38px; font-size: 10px; padding: 7px 10px; }
  .mesh-interface .bottom-nav { display: flex; }
  .mesh-interface main#main,.mesh-interface.mobile-app main#main { padding: 25px 18px 105px; }
  .mesh-interface .page-heading { align-items: flex-start; margin-bottom: 24px; gap: 10px; }
  .mesh-interface .page-heading h1,.mesh-interface.mobile-app .page-heading h1 { font-size: 35px; line-height: 1.12; letter-spacing: -1.4px; margin: 12px 0 13px; }
  .mesh-interface .page-heading p,.mesh-interface.mobile-app .page-heading p { font-size: 11px; max-width: 295px; line-height: 1.8; }
  .mesh-interface .page-heading .eyebrow,.mesh-interface.mobile-app .page-heading .eyebrow { font-size: 8px; letter-spacing: 1.3px; }
  .mesh-interface .heading-actions { align-self: flex-start; margin-top: 22px; }
  .mesh-interface .heading-actions .button { min-height: 42px; min-width: 42px; padding: 9px; }
  .mesh-interface .metric-grid { gap: 11px; margin-bottom: 20px; }
  .mesh-interface .metric-card { padding: 15px 14px 14px; }
  .mesh-interface .metric-label { font-size: 10px; }
  .mesh-interface .metric-label .icon { width: 16px; height: 16px; }
  .mesh-interface .metric-value { font-size: 34px; margin: 11px 0 9px; }
  .mesh-interface .metric-value small { font-size: 15px; }
  .mesh-interface .metric-foot,.mesh-interface.mobile-app .metric-foot { font-size: 9px; min-height: 29px; max-width: none; gap: 5px; align-items: center; }
  .mesh-interface .metric-foot .icon { display: none; }
  .mesh-interface .overview-grid,.mesh-interface .lower-grid { grid-template-columns: 1fr; gap: 17px; }
  .mesh-interface .right-rail,.mesh-interface.mobile-app .right-rail { display: flex; flex-direction: column; gap: 17px; }
  .mesh-interface .signal-panel { display: block; }
  .mesh-interface .signal-panel .panel-heading { min-height: 55px; padding-bottom: 10px; }
  .mesh-interface .gateway-health { flex-wrap: nowrap; padding: 0 18px 17px; }
  .mesh-interface .gateway-health p { display: none; }
  .mesh-interface .gateway-health .text-link { display: flex; margin-top: 8px; }
  .mesh-interface .orb { width: 64px; height: 64px; }
  .mesh-interface .orb span { font-size: 23px; }
  .mesh-interface .orb small { font-size: 6px; letter-spacing: 1.4px; }
  .mesh-interface .mini-signal { display: none; }
  .mesh-interface .panel-heading,.mesh-interface .map-panel .panel-heading { padding: 17px 18px; min-height: 68px; }
  .mesh-interface .panel-heading h2,.mesh-interface .map-panel h2 { font-size: 16px; }
  .mesh-interface .panel-heading .eyebrow { font-size: 7px; letter-spacing: 1.4px; }
  .mesh-interface .panel-heading .text-link { font-size: 11px; }
  .mesh-interface .network-map,.mesh-interface .network-map > svg { min-height: 300px; }
  .mesh-interface .map-controls .icon-button { min-width: 42px; min-height: 42px; }
  .mesh-interface .map-location { font-size: 8px; left: 12px; }
  .mesh-interface .map-footer { padding: 12px 14px; font-size: 8px; gap: 6px; }
  .mesh-interface .alert-row { padding: 15px 18px; }
  .mesh-interface .alert-row strong { font-size: 13px; }
  .mesh-interface .alert-row p { font-size: 11px; line-height: 1.8; }
  .mesh-interface .alert-row small { font-size: 10px; }
  .mesh-interface button.node-row { grid-template-columns: 32px minmax(0,1fr) 62px 10px; gap: 9px; padding: 16px 16px; }
  .mesh-interface .node-name strong { font-size: 11px; }
  .mesh-interface .node-name small { font-size: 8px; }
  .mesh-interface .node-reading strong { font-size: 13px; }
  .mesh-interface .node-reading small { font-size: 8px; }
  .mesh-interface .node-avatar { width: 32px; height: 32px; }
  .mesh-interface .observations-panel svg#flow-chart { height: 125px; }
  .mesh-interface .workspace-footer,.mesh-interface.mobile-app .workspace-footer { font-size: 9px; }
  .mesh-interface .gateway-card { padding: 20px; }
  .mesh-interface .gateway-card .panel-heading { padding: 0 0 18px; }
  .mesh-interface .toolbar { flex-wrap: wrap; gap: 10px; padding: 10px; }
  .mesh-interface .toolbar select { width: 100%; }
  .mesh-interface .integration-hero { padding: 24px; }
  .mesh-interface .integration-hero h2 { font-size: 28px; }
  .mesh-interface .integration-card p { font-size: 13px; }
  .mesh-interface .integration-card > small { font-size: 11px; }
  .mesh-interface .compose-panel { padding: 0 18px 22px; }
  .mesh-interface .site-nav { min-height: 74px; gap: 10px; }
  .mesh-interface .site-nav .brand { gap: 4px; }
  .mesh-interface .site-nav .brand > span { font-size: 23px; }
  .mesh-interface .site-nav .brand img { width: 38px; height: 38px; }
  .mesh-interface .site-nav .brand small { font-size: 5.5px; letter-spacing: 1.7px; }
  .mesh-interface .site-actions .site-signin { display: none; }
  .mesh-interface .site-actions .button { font-size: 11px; padding: 9px 12px; }
  .mesh-interface .site-actions .button .icon { width: 15px; }
  .mesh-interface .page-width { width: calc(100% - 40px); }
  .hero-grid { padding-block: 46px 15px; gap: 30px; }
  .mesh-interface .hero-copy h1 { font-size: clamp(51px,12.8vw,70px); letter-spacing: -3px; margin: 24px 0; }
  .mesh-interface .hero-kicker { padding: 7px 9px; font-size: 6.5px; letter-spacing: .55px; }
  .mesh-interface .hero-lead { font-size: 14px; margin: 22px 0 25px; line-height: 1.85; }
  .mesh-interface .hero-copy .card-actions { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .mesh-interface .hero-copy .button { min-height: 47px; font-size: 12px; }
  .mesh-interface .hero-note { font-size: 10px; line-height: 1.7; gap: 7px; margin-top: 19px; }
  .mesh-scene { height: 400px; }
  .scene-orbit { top: 6%; }
  .scene-orbit.inner { top: 14%; }
  .scene-leaf { top: 4%; }
  .scene-card { gap: 8px; padding: 10px 12px; border-radius: 10px; }
  .scene-card.capture { top: 0; }
  .scene-card.connect { bottom: 24%; }
  .scene-card small { font-size: 7px; }
  .scene-card strong { font-size: 10px; }
  .scene-card div > span { font-size: 8px; }
  .scene-icon { width: 28px; height: 30px; padding-right: 8px; }
  .scene-caption { top: 76%; }
  .scene-caption span { font-size: 9px; letter-spacing: 4px; }
  .scene-caption small { font-size: 6px; letter-spacing: 2px; }
  .scene-explore { bottom: 0; font-size: 10px; }
  .capability-grid > div { gap: 9px; padding: 21px 10px; }
  .capability-grid .icon { width: 19px; height: 19px; }
  .capability-grid strong { font-size: 7.5px; letter-spacing: .65px; }
  .capability-grid small { font-size: 8px; }
  .landing-section { padding-block: 60px; }
  .mesh-interface .landing-section h2,.mesh-interface .workflow-layout h2,.mesh-interface .landing-cta h2 { font-size: 35px; letter-spacing: -1.6px; line-height: 1.13; }
  .mesh-interface .section-intro p { font-size: 13px; }
  .section-intro { gap: 23px; margin-bottom: 28px; }
  .platform-card,.ecosystem-cards > a { padding: 24px; }
  .feature-top { margin-bottom: 28px; }
  .field-steps a { padding: 21px 0; gap: 16px; }
  .field-steps h3 { font-size: 16px; }
  .mesh-interface .field-steps p { font-size: 11px; }
  .landing-cta { padding: 27px 24px; margin-bottom: 50px; }
  .mesh-interface .site-footer p { font-size: 10px; }
  .mesh-interface.auth-page main.auth-main { width: calc(100% - 40px); padding-block: 40px; }
  .mesh-interface.auth-page main.welcome-main { width: 100%; padding: 0; }
  .mesh-interface .auth-intro h1 { font-size: 41px; }
  .mesh-interface .auth-intro p { font-size: 14px; }
  .mesh-interface .auth-card { padding: 24px; }
}
@media (prefers-reduced-motion:reduce) {
  .brand-atmosphere,.scene-leaf,.scene-orbit.outer::before { animation: none; }
  .platform-card,.ecosystem-cards > a { transition: none; }
}