*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:var(--font-body),Figtree,sans-serif;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.visible{visibility:visible}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.inset-x-0{left:0;right:0}.inset-y-0{top:0;bottom:0}.bottom-0{bottom:0}.left-0{left:0}.right-0{right:0}.right-2{right:.5rem}.right-4{right:1rem}.top-0{top:0}.top-4{top:1rem}.z-50{z-index:50}.z-\[55\]{z-index:55}.mx-auto{margin-left:auto;margin-right:auto}.-mr-2{margin-right:-.5rem}.mt-5{margin-top:1.25rem}.mt-auto{margin-top:auto}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.size-5{width:1.25rem;height:1.25rem}.h-10{height:2.5rem}.h-11{height:2.75rem}.h-14{height:3.5rem}.h-28{height:7rem}.h-4{height:1rem}.h-9{height:2.25rem}.h-\[54px\]{height:54px}.h-full{height:100%}.w-10{width:2.5rem}.w-11{width:2.75rem}.w-3\/4{width:75%}.w-4{width:1rem}.w-\[calc\(100\%-64px\)\]{width:calc(100% - 64px)}.w-full{width:100%}.min-w-0{min-width:0}.max-w-\[320px\]{max-width:320px}.max-w-\[700px\]{max-width:700px}.max-w-page{max-width:1440px}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}.-rotate-180{--tw-rotate:-180deg}.-rotate-180,.rotate-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-0{--tw-rotate:0deg}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes showcase-reveal{0%,30%{opacity:0}to{opacity:1}}.animate-showcase-reveal{animation:showcase-reveal .25s ease-in both}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.place-items-center{place-items:center}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}.space-y-\[-3px\]>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(-3px*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(-3px*var(--tw-space-y-reverse))}.overflow-hidden,.truncate{overflow:hidden}.truncate{text-overflow:ellipsis}.truncate,.whitespace-nowrap{white-space:nowrap}.text-balance{text-wrap:balance}.text-pretty{text-wrap:pretty}.rounded-full{border-radius:9999px}.rounded-md{border-radius:calc(var(--radius) - 2px)}.rounded-sm{border-radius:calc(var(--radius) - 4px)}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-l{border-left-width:1px}.border-r{border-right-width:1px}.border-t{border-top-width:1px}.border-input{border-color:var(--color-input)}.border-white\/15{border-color:hsla(0,0%,100%,.15)}.border-white\/40{border-color:hsla(0,0%,100%,.4)}.bg-background{background-color:var(--color-background)}.bg-black\/80{background-color:rgba(0,0,0,.8)}.bg-destructive{background-color:var(--color-destructive)}.bg-primary{background-color:var(--color-primary)}.bg-secondary{background-color:var(--color-secondary)}.bg-transparent{background-color:transparent}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.bg-white\/50{background-color:hsla(0,0%,100%,.5)}.p-6{padding:1.5rem}.px-12{padding-left:3rem;padding-right:3rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.py-10{padding-top:2.5rem;padding-bottom:2.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.pb-\[55px\]{padding-bottom:55px}.pb-\[64px\]{padding-bottom:64px}.pb-\[calc\(1\.5rem\+env\(safe-area-inset-bottom\)\)\]{padding-bottom:calc(1.5rem + env(safe-area-inset-bottom))}.pt-\[114px\]{padding-top:114px}.text-center{text-align:center}.font-heading{font-family:var(--font-heading),Figtree,sans-serif}.text-\[21px\]{font-size:21px}.text-\[28px\]{font-size:28px}.text-base{font-size:14px;line-height:20px}.text-lg{font-size:16px;line-height:24px}.text-sm{font-size:13px;line-height:18px}.font-medium{font-weight:500}.font-semibold{font-weight:600}.leading-6{line-height:1.5rem}.leading-8{line-height:2rem}.tracking-tight{letter-spacing:-.025em}.text-destructive-foreground{color:var(--color-destructive-foreground)}.text-foreground{color:var(--color-foreground)}.text-muted-foreground{color:var(--color-muted-foreground)}.text-primary{color:var(--color-primary)}.text-primary-foreground{color:var(--color-primary-foreground)}.text-secondary-foreground{color:var(--color-secondary-foreground)}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.text-white\/60{color:hsla(0,0%,100%,.6)}.text-white\/80{color:hsla(0,0%,100%,.8)}.underline-offset-4{text-underline-offset:4px}.opacity-0{opacity:0}.opacity-100{opacity:1}.opacity-70{opacity:.7}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-lg,.shadow-xl{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color)}.outline-none{outline:2px solid transparent;outline-offset:2px}.outline{outline-style:solid}.ring-offset-background{--tw-ring-offset-color:var(--color-background)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}@keyframes enter{0%{opacity:var(--tw-enter-opacity,1);transform:translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0) scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1)) rotate(var(--tw-enter-rotate,0))}}@keyframes exit{to{opacity:var(--tw-exit-opacity,1);transform:translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0) scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1)) rotate(var(--tw-exit-rotate,0))}}.ease-in-out{animation-timing-function:cubic-bezier(.4,0,.2,1)}.running{animation-play-state:running}.\[animation-delay\:100ms\]{animation-delay:.1s}.\[transition-duration\:200ms\]{transition-duration:.2s}.\[transition-timing-function\:cubic-bezier\(0\.4\2c 0\2c 0\.6\2c 1\)\]{transition-timing-function:cubic-bezier(.4,0,.6,1)}.hover\:bg-accent:hover{background-color:var(--color-accent)}.hover\:bg-white\/15:hover{background-color:hsla(0,0%,100%,.15)}.hover\:bg-white\/90:hover{background-color:hsla(0,0%,100%,.9)}.hover\:text-accent-foreground:hover{color:var(--color-accent-foreground)}.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.hover\:underline:hover{text-decoration-line:underline}.hover\:opacity-100:hover{opacity:1}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-ring:focus{--tw-ring-color:var(--color-ring)}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px}.focus-visible\:outline-none:focus-visible{outline:2px solid transparent;outline-offset:2px}.focus-visible\:ring-2:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus-visible\:ring-ring:focus-visible{--tw-ring-color:var(--color-ring)}.focus-visible\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:opacity-50:disabled{opacity:.5}.data-\[state\=open\]\:bg-secondary[data-state=open]{background-color:var(--color-secondary)}.data-\[state\=closed\]\:duration-300[data-state=closed]{transition-duration:.3s}.data-\[state\=open\]\:duration-500[data-state=open]{transition-duration:.5s}.data-\[state\=open\]\:animate-in[data-state=open]{animation-name:enter;animation-duration:.15s;--tw-enter-opacity:initial;--tw-enter-scale:initial;--tw-enter-rotate:initial;--tw-enter-translate-x:initial;--tw-enter-translate-y:initial}.data-\[state\=closed\]\:animate-out[data-state=closed]{animation-name:exit;animation-duration:.15s;--tw-exit-opacity:initial;--tw-exit-scale:initial;--tw-exit-rotate:initial;--tw-exit-translate-x:initial;--tw-exit-translate-y:initial}.data-\[state\=closed\]\:fade-out-0[data-state=closed]{--tw-exit-opacity:0}.data-\[state\=open\]\:fade-in-0[data-state=open]{--tw-enter-opacity:0}.data-\[state\=closed\]\:slide-out-to-bottom[data-state=closed]{--tw-exit-translate-y:100%}.data-\[state\=closed\]\:slide-out-to-left[data-state=closed]{--tw-exit-translate-x:-100%}.data-\[state\=closed\]\:slide-out-to-right[data-state=closed]{--tw-exit-translate-x:100%}.data-\[state\=closed\]\:slide-out-to-top[data-state=closed]{--tw-exit-translate-y:-100%}.data-\[state\=open\]\:slide-in-from-bottom[data-state=open]{--tw-enter-translate-y:100%}.data-\[state\=open\]\:slide-in-from-left[data-state=open]{--tw-enter-translate-x:-100%}.data-\[state\=open\]\:slide-in-from-right[data-state=open]{--tw-enter-translate-x:100%}.data-\[state\=open\]\:slide-in-from-top[data-state=open]{--tw-enter-translate-y:-100%}.data-\[state\=closed\]\:duration-300[data-state=closed]{animation-duration:.3s}.data-\[state\=open\]\:duration-500[data-state=open]{animation-duration:.5s}.group[data-state=open] .group-data-\[state\=open\]\:animate-in{animation-name:enter;animation-duration:.15s;--tw-enter-opacity:initial;--tw-enter-scale:initial;--tw-enter-rotate:initial;--tw-enter-translate-x:initial;--tw-enter-translate-y:initial}.group[data-state=closed] .group-data-\[state\=closed\]\:animate-out{animation-name:exit;animation-duration:.15s;--tw-exit-opacity:initial;--tw-exit-scale:initial;--tw-exit-rotate:initial;--tw-exit-translate-x:initial;--tw-exit-translate-y:initial}.group[data-state=open] .group-data-\[state\=open\]\:\[--tw-enter-opacity\:0\]{--tw-enter-opacity:0}.group[data-state=open] .group-data-\[state\=open\]\:\[--tw-enter-rotate\:180deg\]{--tw-enter-rotate:180deg}.group[data-state=closed] .group-data-\[state\=closed\]\:\[--tw-exit-opacity\:0\]{--tw-exit-opacity:0}.group[data-state=closed] .group-data-\[state\=closed\]\:\[--tw-exit-rotate\:180deg\]{--tw-exit-rotate:180deg}@media (prefers-reduced-motion:reduce){.motion-reduce\:animate-none{animation:none}.motion-reduce\:transition-none{transition-property:none}}@media (min-width:640px){.sm\:flex{display:flex}.sm\:hidden{display:none}.sm\:h-9{height:2.25rem}.sm\:w-auto{width:auto}.sm\:max-w-sm{max-width:24rem}.sm\:flex-row{flex-direction:row}.sm\:justify-end{justify-content:flex-end}.sm\:justify-between{justify-content:space-between}.sm\:gap-2{gap:.5rem}.sm\:space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.5rem*var(--tw-space-x-reverse));margin-left:calc(.5rem*(1 - var(--tw-space-x-reverse)))}.sm\:text-left{text-align:left}}@media (min-width:1024px){.lg\:px-8{padding-left:2rem;padding-right:2rem}}.\[\&_svg\]\:pointer-events-none svg{pointer-events:none}.\[\&_svg\]\:size-4 svg{width:1rem;height:1rem}.\[\&_svg\]\:shrink-0 svg{flex-shrink:0}
/* StylePack — Asset Tracker (green identity)
 *
 * Ocean base re-skinned to a green identity. Geist Mono body, Barlow headings.
 * 0.7rem radius. Light gray surface (#f4f6f7).
 * CTA / accent green #93CA35; the Overview bento canvas is pinned to a deeper
 * green gradient (#446013 → #709A28) at the screen level.
 * Imported AFTER index.css — these values override the neutral defaults.
 */

:root {
  --font-heading: "Barlow", sans-serif;
  --font-body: "Geist Mono Variable", ui-monospace, monospace;
  --font-heading-weight: 600;
  --font-body-weight: 400;

  /* Radius */
  --radius: 0.7rem;

  /* Core tokens */
  --color-background: #f4f6f7;
  --color-foreground: #0a2833;
  --color-card: #fff;
  --color-card-foreground: #313234;
  --color-popover: #fafafb;
  --color-popover-foreground: #454648;
  --color-primary: #93CA35;
  --color-primary-foreground: #16300a;
  --color-secondary: oklch(97% 0 0);
  --color-secondary-foreground: oklch(20.5% 0 0);
  --color-muted: #efefef;
  /* Was #7d7e81, which measures 4.06:1 on white — under the 4.5 AA bar, on
   * every piece of secondary text in the app. Found by scripts/a11y-contrast.js
   * rather than by eye, which is the point of having it. #6e6f72 is 5.02:1 and
   * is not distinguishable from the old value side by side. */
  --color-muted-foreground: #6e6f72;
  --color-accent: #edf1f4;
  --color-accent-foreground: #0a2833;
  --color-destructive: oklch(57.7% 0.245 27.325);
  --color-destructive-foreground: #fff;
  --color-border: #e9e9e9;
  --color-input: #e9e9e9;
  --color-ring: #93CA35;
  --color-sidebar: #f4f6f7;
  --color-sidebar-foreground: #454648;
  --color-sidebar-primary: #93CA35;
  --color-sidebar-primary-foreground: #16300a;
  --color-sidebar-accent: #edf1f4;
  --color-sidebar-accent-foreground: #0a2833;
  --color-sidebar-border: #e9e9e9;
  --color-sidebar-ring: #93CA35;
}

/* Overview bento canvas + frosted tiles.
 * The green gradient IS the design — tiles sit on it as translucent glass. */
/* The canvas. Deeper than it was, and that is forced by the maths, not taste.
 *
 * Tinted cards with white text only work if the canvas is dark enough. At the
 * old #709A28 bottom end, a 16% white card came out at #87AA4A and white text
 * on it measured 2.67:1 — which is exactly why the first attempt at this look
 * failed and we went to opaque white cards instead. The top end was always
 * fine at 4.87:1; it was the light bottom that broke it.
 *
 * At #284211 the same card is #4A6037: white text lands at 6.95:1 and white at
 * 75% — the secondary label tone — still clears 4.75:1. That is the lightest
 * green that leaves room for dimmed text. */
.nw-canvas {
  background: linear-gradient(180deg, #16280a 0%, #284211 100%);
}

/* THE TILE — one surface, used by the dashboard and the landing marquee.
 *
 * Both classes are defined together on purpose. They were two blocks with two
 * sets of values and they drifted: the marquee sat at 14% white with white
 * text while the dashboard was opaque white with dark text, so the same
 * component read as two different products on the same gradient. Defining them
 * as one selector means they cannot drift again.
 *
 * Tinted glass at 16%, and the history matters because this went back and
 * forth. We tried 14%, then 80%, then 94% with saturate, then opaque white —
 * and this comment argued for opaque white long after the code had returned to
 * glass, which is its own lesson about comments that state a verdict.
 *
 * What settled it was the canvas going darker. The argument for opaque was that
 * a translucent card has as many backgrounds as the thing behind it, so every
 * colour on it needs its own contrast exception. That is still true — it is why
 * the tokens below are all checked against the LIGHTEST card the gradient makes
 * (#4A6037), the worst case. Once they were, 16% reads everywhere and the
 * gradient shows through, which opaque white did not.
 *
 * Three shadow layers, not one: a hairline ring (this replaces the border, so
 * it cannot add to the box size), a tight contact shadow, and a soft ambient
 * glow. On a gradient the tile edge melts into the background wherever the two
 * greens agree — the contact layer is what gives it back.
 *
 * Radius 15 is the reference's. Its shape scale has no 24 and no 32.
 */
.card-solid,
.card-tonal,
.card-sheet {
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.18),
    0 1px 3px rgba(0, 0, 0, 0.15),
    0 0 10px rgba(0, 0, 0, 0.05);
  border-radius: 15px;

  /* Everything a tile body needs, all white or near-white.
   *
   * Checked against the LIGHTEST card the gradient produces (#4A6037):
   * white is 6.95:1 and white at 75% is 4.75:1. Nothing dimmer than 75%
   * passes, so 75% is the floor for any text — there is no fainter tier. */
  --tile-fg: #fff;
  --tile-muted: rgba(255, 255, 255, 0.75);
  --tile-track: rgba(255, 255, 255, 0.22);
  --tile-fill: #93ca35;   /* share bars, not white */
  --tile-line: rgba(255, 255, 255, 0.22);
  --tile-chip: rgba(255, 255, 255, 0.16);
  --tile-hover: rgba(255, 255, 255, 0.20);
  /* Data graphics carry COLOUR, not white. White is for text and for
   * structural lines; anything that encodes a value gets a hue, which is how
   * the weather reference does it — its temperature ranges, air quality and UV
   * scales are all coloured while the compass and pressure dials stay white.
   *
   * All checked against the lightest card (#4A6037). A graphic needs about
   * 3:1 to read; the two that double as TEXT need 4.5:1. */
  --tile-series: #93ca35;  /* 3.56:1 — the brand lime, for chart lines */
  --tile-chart-2: #8fd3e8; /* 4.19:1 — sky, the liquid half of Liquidity */
  --tile-chart-3: #f6c177; /* 4.24:1 — amber */
  --tile-chart-4: #c3a6e0; /* 3.26:1 — lilac */
  /* Money up / money down. Both are used as text as well as bars, so both must
   * clear 4.5 — which is why the negative is a light coral rather than a
   * saturated red: #E88B7D only reaches 2.79:1 here.
   *
   * The negative was #f4b4ab, which measured 3.96:1 and was annotated "see note
   * below" — there was no note below. It failed AA as text for as long as it
   * shipped, on every negative figure on the dashboard. #f7c7bf is the nearest
   * coral to it that actually passes, so nothing else about the design moves. */
  --tile-pos: #c6e89a;     /* 5.10:1 */
  --tile-neg: #f7c7bf;     /* 4.60:1 */
}

/* The Assets table and the two asset forms — the same tinted glass as a tile.
 *
 * This was an opaque white card, and the comment here used to argue it had to
 * stay one: the table is a shadcn component whose rows, borders and muted text
 * all resolve from light-mode tokens, so a dark surface would leave dark text
 * on dark in a dozen places.
 *
 * That was true, and it is what the block below fixes. shadcn's colours are CSS
 * VARIABLES, so redefining them here re-points every control inside this card
 * at once — no `ui/*` file is touched, which matters because those are shared
 * with the dialogs and must keep their light values.
 *
 * The proof this reads: the Holdings tile is already a scrolling list of these
 * exact asset names and values on this exact surface.
 *
 * Values come from the tile tokens rather than new numbers, so the whole app
 * has one set. The 75% floor on muted text is not a style choice — it is the
 * dimmest that still clears 4.5:1 on the lightest card the gradient makes.
 *
 * CAVEAT: portalled content escapes this scope. A Select's dropdown, tooltips
 * and dialogs render into <body>, outside this card, so they keep the light
 * tokens. That is intended — the reference's popovers and panels are #FFF — but
 * it means a dark trigger can open a light menu.
 *
 * The SURFACE (background, blur, shadow, radius) is declared with .card-solid
 * and .card-tonal above, not here. That block is also where the --tile-* tokens
 * live, and this class has to be in the same selector to see them.
 *
 * It was not, at first, and everything below silently broke: `var(--tile-line)`
 * resolved to nothing, so `--color-border` was invalid, so every border fell
 * back to `currentColor` — pure white. The table got a hard white box and hard
 * white row rules and the whole screen looked flat and outlined. Text still
 * looked fine because it inherited white from the shell, which is why a
 * contrast sweep passed while the screen was visibly wrong. */
.card-sheet {
  /* Every shadcn token used by anything inside this card, re-pointed at the
   * dark surface. Miss one and it fails the old way: dark text on dark. */
  --color-foreground: var(--tile-fg);
  --color-card-foreground: var(--tile-fg);
  --color-muted-foreground: var(--tile-muted);
  --color-background: transparent;
  --color-card: transparent;
  --color-muted: var(--tile-chip);
  --color-accent: var(--tile-chip);
  --color-accent-foreground: var(--tile-fg);
  --color-border: var(--tile-line);
  --color-input: var(--tile-line);
  --color-ring: rgba(255, 255, 255, 0.6);
  --color-secondary: var(--tile-chip);
  --color-secondary-foreground: var(--tile-fg);
  /* Negative money in the Value column. Same token the tiles use, so a
   * liability is the same colour wherever you meet it. */
  --color-destructive: var(--tile-neg);

  color: var(--tile-fg);
}

/* The switch's thumb, and why it is not a token.
 *
 * --color-background does two jobs: it fills the input and select fields, where
 * transparent is right on glass, and it paints this thumb, where transparent
 * means invisible. Setting the token to white would turn every field into a
 * white box; leaving it transparent turned the switch into a plain lime pill
 * with no way to tell on from off. So the thumb gets its own rule.
 *
 * Worth noting the contrast checker cannot catch this — a missing thumb is not
 * text, so it has no ratio to fail. Only looking at it finds it. */
.card-sheet button[role="switch"] > span {
  background: #fff;
}

/* The lattice. One number: 192. A two-span is 192 + 16 + 192 = 400, so every
 * size lands on the same grid and nothing is ever half a step out.
 *
 * auto-fill with a FIXED track (not minmax) means columns never stretch — the
 * count changes instead. justify-content: center splits the leftover evenly,
 * so the grid itself needs no breakpoints.
 *
 * Measured against its own container rather than the window. The sidebar that
 * first forced this is gone, so viewport queries would work now too; container
 * queries stay because they also hold up inside the picker's scaled previews. */
.bento-viewport {
  container-type: inline-size;
  container-name: bento;
}

.bento-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* phone: one fluid column */
  gap: 16px;
  justify-content: center;
  max-width: 1232px; /* 6×192 + 5×16 — the six-column cap */
  margin-inline: auto;
}

/* 608px = 3×192 + 2×16. Below this a span-2 tile cannot fit two tracks plus the
 * gap; the browser invents an implicit column and the tile renders squashed
 * (measured: 208×400 at a 375px viewport). So the base state is one fluid
 * column, and the lattice only switches on once three real columns fit. */
@container bento (min-width: 608px) {
  .bento-grid {
    grid-template-columns: repeat(auto-fill, 192px);
    grid-auto-rows: 192px;
    /* NO grid-auto-flow: dense.
     *
     * We had it, the reference does not — its captured CSS is just auto-fill,
     * gap and justify-content (cloudkit-raw-css.md). Dense makes a later small
     * tile jump BACKWARDS to fill a hole an earlier large one left, so the
     * visual position stops matching the list order. That is what made
     * dragging feel broken: the drop index and the place the tile appeared
     * were different things. Without it a gap simply stays a gap and order is
     * order. */
  }
  .bento-2x1 {
    grid-column: span 2;
  }
  .bento-2x2 {
    grid-column: span 2;
    grid-row: span 2;
  }
}

/* Page title. 34/41 w700 at letter-spacing +0.374 — POSITIVE. The reference
 * inverts tracking by size: big text tracks positive, small text negative. Our
 * base.css scale tracks -2.4px at this size, so the title cannot use it. */
.dash-title {
  font-size: 34px;
  line-height: 41px;
  font-weight: 700;
  letter-spacing: 0.374px;
}

/* The metric — every big number on a tile.
 *
 * The reference is explicit: "Numbers use SF Pro Rounded. Everything else is
 * SF Pro Text/Display." `ui-rounded` is the CSS generic that resolves to SF Pro
 * Rounded on Apple platforms and falls back gracefully elsewhere.
 *
 * ONE size, not three. The reference says "the metric is the same 34px in every
 * size — only the chart shrinks", and we had been scaling it down at Small,
 * which broke the rule rather than the pixel.
 *
 * Tracking is POSITIVE here, like the page title: big text tracks positive,
 * small text tracks negative. Our base scale does the opposite at this size, so
 * the metric cannot use it.
 */
.metric {
  font-family: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN",
    system-ui, sans-serif;
  font-size: 34px;
  line-height: 41px;
  font-weight: 700;
  letter-spacing: 0.374px;
  font-variant-numeric: tabular-nums;
}

/* Menus and dialogs. Radius 4 — not the app's 0.7rem — and a two-layer shadow.
 * The same shell on the account menu, the tile menu and the confirm dialog. */
.ref-popover {
  background: #fff;
  border-radius: 4px;
  box-shadow:
    0 0 15px rgba(0, 0, 0, 0.15),
    0 0 1px rgba(0, 0, 0, 0.047);
}

body {
  text-rendering: optimizeLegibility;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  font-weight: var(--font-body-weight);
}

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-heading-weight);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Base — landing page element styles.
 *
 * The type scale is defined in tailwind.config.ts (fontSize).
 * This file provides .landing scoped heading styles that use
 * the scale via CSS variables for responsive sizing.
 *
 * Style-pack.css controls font family and weight.
 * This file only controls size, line-height, and tracking.
 */

/* ── Landing page typography ─────────────────────────────────────
 * Scoped to .landing so these element styles only apply on marketing
 * pages. App pages use Tailwind utility classes + shadcn components.
 */

.landing h1,
.landing h2,
.landing h3,
.landing h4 {
  font-family: var(--font-heading);
}

.landing h1 {
  font-size: 40px;
  line-height: 48px;
  letter-spacing: -2.4px;
  text-wrap: balance;
}

.landing h2 {
  font-size: 32px;
  line-height: 40px;
  letter-spacing: -1.28px;
}

.landing h3 {
  font-size: 24px;
  line-height: 32px;
  letter-spacing: -0.96px;
}

.landing h4 {
  font-size: 20px;
  line-height: 28px;
}

/* Fluid hero — modifier class for the primary landing headline */
.landing h1.display {
  font-size: clamp(2.75rem, -2rem + 8vw, 5.5rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
}

/* Mobile — one step down */
@media (max-width: 950px) {
  .landing h1 {
    font-size: 32px;
    line-height: 40px;
    letter-spacing: -1.28px;
  }
  .landing h2 {
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -0.96px;
  }
  .landing h3 {
    font-size: 20px;
    line-height: 28px;
  }
  .landing h4 {
    font-size: 18px;
    line-height: 28px;
  }
}

/**
 * The auth screen's branded background — one full-bleed field of the brand
 * colour, lifted softly towards the bottom.
 *
 * A class rather than a React component, because the auth screen is the only
 * place it is used and a component would be a whole file to say one gradient.
 * Built from the theme's own tokens with color-mix, so a template that repaints
 * --color-primary gets a matching surface for free. See docs/design/auth-screen.md.
 */
.auth-surface {
  background-image:
    linear-gradient(
      180deg,
      transparent 0%,
      color-mix(in oklch, var(--color-primary-foreground) 22%, transparent) 100%
    ),
    linear-gradient(var(--color-primary), var(--color-primary));
}

@font-face{font-family:Geist Mono Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url("./fonts/geist-mono-cyrillic-ext-wght-normal-QXKVIKFD.woff2") format("woff2-variations");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Geist Mono Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url("./fonts/geist-mono-cyrillic-wght-normal-GOIAQAGU.woff2") format("woff2-variations");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Geist Mono Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url("./fonts/geist-mono-symbols2-wght-normal-WZJJVLQO.woff2") format("woff2-variations");unicode-range:U+2000-2001,U+2004-2008,U+200A,U+23B8-23BD,U+2500-259F}@font-face{font-family:Geist Mono Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url("./fonts/geist-mono-vietnamese-wght-normal-KW5NM6YV.woff2") format("woff2-variations");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Geist Mono Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url("./fonts/geist-mono-latin-ext-wght-normal-HU3ZAWN6.woff2") format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Geist Mono Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url("./fonts/geist-mono-latin-wght-normal-CJNQKXUG.woff2") format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Barlow;font-style:normal;font-display:swap;font-weight:600;src:url("./fonts/barlow-vietnamese-600-normal-6TIDILDH.woff2") format("woff2"),url("./fonts/barlow-vietnamese-600-normal-PJWIX6HC.woff") format("woff");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Barlow;font-style:normal;font-display:swap;font-weight:600;src:url("./fonts/barlow-latin-ext-600-normal-MYFVK5MK.woff2") format("woff2"),url("./fonts/barlow-latin-ext-600-normal-WVF2DFOO.woff") format("woff");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Barlow;font-style:normal;font-display:swap;font-weight:600;src:url("./fonts/barlow-latin-600-normal-APFZWJSU.woff2") format("woff2"),url("./fonts/barlow-latin-600-normal-IMDL24A2.woff") format("woff");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root {
  --csin-bg: #16280a;
  --csin-deep: #122107;
  --csin-mid: #284211;
  --csin-panel: #ffffff14;
  --csin-line: #ffffff24;
  --csin-lime: #93ca35;
  --csin-lime-ink: #16280a;
  --csin-text: #f7f8f1;
  --csin-muted: #c4ceb9;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--csin-bg);
  color: var(--csin-text);
  font-family: var(--font-body), "Geist Mono", ui-monospace, monospace;
}

.csin-landing {
  min-height: 100vh;
  overflow-x: clip;
  background: linear-gradient(180deg, var(--csin-bg) 0%, var(--csin-mid) 100%);
  color: var(--csin-text);
}

.csin-landing h1,
.csin-landing h2 {
  font-family: var(--font-heading), Barlow, sans-serif;
  font-weight: 600;
}

.csin-landing a:focus-visible,
.csin-landing button:focus-visible {
  outline: 2px solid var(--csin-lime);
  outline-offset: 3px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.landing-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 74px;
  padding: 0 clamp(16px, 4vw, 72px);
  border-bottom: 1px solid var(--csin-line);
  background: #16280af0;
  backdrop-filter: blur(14px);
}

.landing-brand {
  flex: 0 0 auto;
  color: white;
  font-family: var(--font-heading), Barlow, sans-serif;
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
}

.landing-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-left: auto;
}

.landing-nav a,
.landing-menu a,
.nav-toggle {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--csin-line);
  border-radius: 999px;
  color: white;
  background: transparent;
  font-family: var(--font-heading), "Geist Mono", monospace;
  font-size: 0.88rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.landing-nav a,
.landing-menu a {
  padding: 0 18px;
}

.landing-nav a:hover,
.landing-menu a:hover,
.nav-toggle:hover {
  border-color: var(--csin-lime);
  background: #93ca3514;
}

.landing-nav .nav-primary,
.landing-menu .nav-primary,
.button-solid {
  background: var(--csin-lime);
  border-color: var(--csin-lime);
  color: var(--csin-lime-ink);
  font-weight: 600;
}

.landing-nav .nav-primary:hover,
.landing-menu .nav-primary:hover,
.button-solid:hover {
  background: #a6d84f;
  border-color: #a6d84f;
  color: var(--csin-lime-ink);
}

.nav-toggle,
.landing-menu {
  display: none;
}

.nav-toggle {
  width: 44px;
  padding: 0;
  margin-left: auto;
  cursor: pointer;
}

.nav-toggle svg {
  width: 22px;
  height: 22px;
}

.landing-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: clamp(16px, 4vw, 72px);
  z-index: 40;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  width: min(280px, calc(100vw - 32px));
  padding: 12px;
  border: 1px solid var(--csin-line);
  border-radius: 12px;
  background: #203513;
  box-shadow: 0 18px 48px #08110299;
}

.landing-menu a {
  width: 100%;
}

.landing-hero {
  min-height: calc(100svh - 74px);
  display: grid;
  place-items: center;
  padding: 72px 24px;
  background:
    radial-gradient(circle at 50% 72%, #35551c 0%, transparent 46%),
    linear-gradient(180deg, #16280a 0%, #1d340f 100%);
  border-bottom: 1px solid var(--csin-line);
}

.hero-copy {
  width: min(920px, 100%);
  text-align: center;
}

.eyebrow {
  margin: 0 0 24px;
  color: var(--csin-lime);
  font-family: var(--font-heading), "Geist Mono", monospace;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.hero-copy h1 {
  margin: 0;
  color: white;
  font-size: clamp(4.25rem, 12vw, 8.5rem);
  line-height: 0.86;
  letter-spacing: -0.05em;
}

.hero-line {
  max-width: 680px;
  margin: 36px auto 0;
  color: var(--csin-muted);
  font-family: var(--font-heading), "Geist Mono", monospace;
  font-size: clamp(1.05rem, 2vw, 1.45rem);
  line-height: 1.45;
}

.hero-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
}

.button-outline,
.button-solid {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 24px;
  border-radius: 999px;
  font-family: var(--font-heading), Barlow, sans-serif;
  font-weight: 600;
}

.button-outline {
  border: 1px solid var(--csin-lime);
  color: var(--csin-lime);
  background: transparent;
}

.button-outline:hover {
  background: #93ca3514;
}

.button-solid svg,
.section-heading a svg {
  width: 18px;
  height: 18px;
}

.capability-section {
  padding: clamp(64px, 8vw, 112px) clamp(16px, 4vw, 72px);
  border-bottom: 1px solid var(--csin-line);
}

.scout-capability {
  background: #122107;
}

.screenshot-section {
  background: transparent;
}

.section-heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: end;
  gap: 16px 20px;
  max-width: 1120px;
  margin: 0 auto 28px;
}

.section-heading > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--csin-line);
  border-radius: 50%;
  color: var(--csin-lime);
  font-family: var(--font-heading), "Geist Mono", monospace;
}

.section-heading h2 {
  margin: 0 0 10px;
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1;
  letter-spacing: -0.04em;
}

.section-heading p {
  margin: 0;
  max-width: 36rem;
  color: var(--csin-muted);
  font-size: 1rem;
  line-height: 1.45;
}

.section-heading > a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--csin-lime);
  font-family: var(--font-heading), "Geist Mono", monospace;
  font-weight: 700;
  border-bottom: 1px solid var(--csin-lime);
  padding-bottom: 2px;
}

.product-frame,
.network-showcase {
  max-width: 1120px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid var(--csin-line);
  border-radius: 8px;
  background: var(--csin-panel);
}

.product-frame img {
  display: block;
  width: 100%;
  height: auto;
}

.network-showcase svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 640px;
  background: radial-gradient(circle at 46% 45%, #35551c 0%, #1b300d 62%, #16280a 100%);
}

.network-caption {
  display: flex;
  justify-content: space-between;
  gap: 12px 20px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--csin-line);
  color: var(--csin-muted);
  font: 700 0.75rem/1.35 var(--font-heading), "Geist Mono", monospace;
  letter-spacing: 0.08em;
}

.network-bottom {
  border-top: 1px solid var(--csin-line);
  border-bottom: 0;
}

.mini-province {
  fill: #426126;
  stroke: #88a273;
  stroke-width: 0.65;
}

.network-lines {
  fill: none;
  stroke: var(--csin-lime);
  stroke-width: 1.5;
  stroke-dasharray: 5 7;
  opacity: 0.7;
}

.network-showcase text {
  fill: white;
  font-family: var(--font-heading), "Geist Mono", monospace;
  font-size: 16px;
}

.mini-pulse {
  fill: #93ca3524;
  stroke: #93ca3588;
  animation: node-pulse 3s ease-in-out infinite;
}

.preview-lens {
  animation: lens-scout 12s ease-in-out infinite;
}

.map-fallback {
  min-height: 280px;
  display: grid;
  place-items: center;
  padding: 24px;
  color: var(--csin-muted);
  text-align: center;
}

.landing-close {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 88px 24px;
  text-align: center;
}

.landing-close p {
  margin: 0;
  color: var(--csin-lime);
  font: 700 0.82rem var(--font-heading), "Geist Mono", monospace;
  letter-spacing: 0.12em;
}

.landing-close h2 {
  margin: 8px 0 20px;
  font-size: clamp(2.1rem, 5vw, 3.75rem);
  letter-spacing: -0.045em;
}

.landing-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  min-height: 74px;
  padding: 20px clamp(16px, 4vw, 72px);
  border-top: 1px solid var(--csin-line);
  color: var(--csin-muted);
  font-family: var(--font-heading), "Geist Mono", monospace;
  font-size: 0.8rem;
}

.landing-footer span:first-child {
  color: white;
  font-family: var(--font-heading), Barlow, sans-serif;
  font-size: 1rem;
  font-weight: 600;
}

@keyframes node-pulse {
  50% {
    opacity: 0.35;
  }
}

@keyframes lens-scout {
  0%,
  100% {
    transform: translate(91.5px, 505px);
  }
  33% {
    transform: translate(184.3px, 510.6px);
  }
  66% {
    transform: translate(575.6px, 586.9px);
  }
  85% {
    transform: translate(703.3px, 543.9px);
  }
}

@media (max-width: 960px) {
  .section-heading {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .section-heading > a {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

@media (max-width: 720px) {
  .landing-nav {
    display: none;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .landing-menu {
    display: flex;
  }
}

@media (max-width: 640px) {
  .landing-hero {
    min-height: 0;
    padding: 64px 18px 72px;
  }

  .hero-copy h1 {
    font-size: clamp(3.6rem, 20vw, 4.6rem);
  }

  .hero-line {
    margin-top: 24px;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-actions a {
    width: 100%;
  }

  .capability-section {
    padding: 56px 16px;
  }

  .section-heading h2 {
    font-size: 2rem;
  }

  .network-caption {
    flex-wrap: wrap;
    font-size: 0.68rem;
  }

  .landing-close {
    padding: 64px 16px;
  }

  .landing-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .preview-lens {
    transform: translate(575.6px, 586.9px);
  }
}