/* Meyer reset 2.0, vendored so first paint does not wait on a second
   render-blocking request to cdnjs. Same rules as reset.min.css 2.0. */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

/* =====================================================
   BRAND TOKENS
   ===================================================== */
:root {
  /* brand */
  --arctic-powder: #F1F6F4;
  --mystic-mint: #D9E8E2;
  --nocturnal-expedition: #114C5A;
  --oceanic-noir: #172B36;
  --forsythia: #FFC801;
  --deep-saffron: #FF9932;

  /* status: data layer only */
  --clay: #9C4A3E;
  --moss: #2D5E41;

  /* roles */
  --bg: var(--arctic-powder);
  --bg-alt: var(--mystic-mint);
  --bg-dark: var(--oceanic-noir);
  --bg-band: var(--nocturnal-expedition);
  --text: var(--oceanic-noir);
  --text-secondary: var(--nocturnal-expedition);
  --text-on-dark: var(--arctic-powder);
  --text-secondary-on-dark: var(--mystic-mint);
  --cta-fill: var(--forsythia);
  --cta-text: var(--oceanic-noir);
  --cta-hover: var(--deep-saffron);

  /* Phosphor Icons, Regular weight (MIT). CSS masks so chrome inherits currentColor. */
  --ph-caret-down: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20256%20256%27%3E%3Cpath%20fill%3D%27%23000%27%20d%3D%27M213.66%2C101.66l-80%2C80a8%2C8%2C0%2C0%2C1-11.32%2C0l-80-80A8%2C8%2C0%2C0%2C1%2C53.66%2C90.34L128%2C164.69l74.34-74.35a8%2C8%2C0%2C0%2C1%2C11.32%2C11.32Z%27%2F%3E%3C%2Fsvg%3E");
  --ph-list: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20256%20256%27%3E%3Cpath%20fill%3D%27%23000%27%20d%3D%27M224%2C128a8%2C8%2C0%2C0%2C1-8%2C8H40a8%2C8%2C0%2C0%2C1%2C0-16H216A8%2C8%2C0%2C0%2C1%2C224%2C128ZM40%2C72H216a8%2C8%2C0%2C0%2C0%2C0-16H40a8%2C8%2C0%2C0%2C0%2C0%2C16ZM216%2C184H40a8%2C8%2C0%2C0%2C0%2C0%2C16H216a8%2C8%2C0%2C0%2C0%2C0-16Z%27%2F%3E%3C%2Fsvg%3E");
  --ph-x: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20256%20256%27%3E%3Cpath%20fill%3D%27%23000%27%20d%3D%27M205.66%2C194.34a8%2C8%2C0%2C0%2C1-11.32%2C11.32L128%2C139.31%2C61.66%2C205.66a8%2C8%2C0%2C0%2C1-11.32-11.32L116.69%2C128%2C50.34%2C61.66A8%2C8%2C0%2C0%2C1%2C61.66%2C50.34L128%2C116.69l66.34-66.35a8%2C8%2C0%2C0%2C1%2C11.32%2C11.32L139.31%2C128Z%27%2F%3E%3C%2Fsvg%3E");
  --ph-check: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20256%20256%27%3E%3Cpath%20fill%3D%27%23000%27%20d%3D%27M229.66%2C77.66l-128%2C128a8%2C8%2C0%2C0%2C1-11.32%2C0l-56-56a8%2C8%2C0%2C0%2C1%2C11.32-11.32L96%2C188.69%2C218.34%2C66.34a8%2C8%2C0%2C0%2C1%2C11.32%2C11.32Z%27%2F%3E%3C%2Fsvg%3E");
  --ph-minus: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20256%20256%27%3E%3Cpath%20fill%3D%27%23000%27%20d%3D%27M224%2C128a8%2C8%2C0%2C0%2C1-8%2C8H40a8%2C8%2C0%2C0%2C1%2C0-16H216A8%2C8%2C0%2C0%2C1%2C224%2C128Z%27%2F%3E%3C%2Fsvg%3E");

  --font-body: "Switzer", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-headline: "Lastik", Georgia, serif;
}

/* =====================================================
   SELF-HOSTED FONTS
   Switzer weights actually in use site-wide (400/500/600/700/800).
   Lastik: Regular only, used for major headlines (hero h1 + top-level
   section h2s), per the brand refresh brief.
   ===================================================== */
@font-face {
  font-family: "Switzer";
  src: url("/fonts/switzer/Switzer-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("/fonts/switzer/Switzer-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("/fonts/switzer/Switzer-Semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("/fonts/switzer/Switzer-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("/fonts/switzer/Switzer-Extrabold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lastik";
  src: url("/fonts/lastik/Lastik-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

* {
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  height: 100%;
  overflow: auto;
}

/* Default (light-surface) focus ring. Dark-band surfaces (nav, hero,
   closing CTA, footer) override to Forsythia below in enterprise.css /
   this file's dark-band block. */
:focus-visible {
  outline: 2px solid var(--nocturnal-expedition);
  outline-offset: 2px;
}

a {
  text-decoration: none;
}

.site-footer {
    background-color: var(--oceanic-noir);
    color: var(--mystic-mint);
    padding: 64px 24px 40px;
    font-family: var(--font-body);
    overflow: visible;
}

.site-footer .footer-inner {
    margin: 0 auto;
    width: 100%;
    max-width: 1320px;
}

.site-footer .footer-main {
    display: grid;
    grid-template-columns: 1fr;
    gap: 56px;
}

.site-footer .footer-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.site-footer .footer-logo {
    display: inline-flex;
    align-items: center;
}

.site-footer .footer-logo img {
    height: 36px;
    width: auto;
    aspect-ratio: 348 / 198;
    display: block;
}

.site-footer .footer-demo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 28px;
    min-height: 44px;
    font-size: 14px;
    font-weight: 600;
    color: var(--mystic-mint);
    text-decoration: none;
    transition: color 160ms ease;
}


.site-footer .footer-demo svg {
    width: 16px;
    height: 16px;
    display: block;
    flex-shrink: 0;
}

.site-footer .footer-demo:hover {
    color: var(--deep-saffron);
    text-decoration: underline;
}

.site-footer .footer-demo:focus-visible,
.site-footer .footer-col a:focus-visible,
.site-footer .footer-bottom a:focus-visible,
.site-footer .footer-social a:focus-visible,
.site-footer .lucis-icon:focus-visible {
    outline: 2px solid var(--forsythia);
    outline-offset: 3px;
}

.site-footer .footer-social {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 28px;
}

.site-footer .footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    color: var(--mystic-mint);
    background: transparent;
    border: 1px solid rgba(241, 246, 244, 0.14);
    border-radius: 50%;
    transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}

.site-footer .footer-social a:hover {
    color: var(--deep-saffron);
    border-color: rgba(241, 246, 244, 0.35);
    background: rgba(241, 246, 244, 0.08);
}

.site-footer .footer-social svg {
    width: 16px;
    height: 16px;
    display: block;
}

.site-footer .footer-cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 32px;
    row-gap: 48px;
    align-items: start;
}

/* styles.css sets `nav` to a fixed header bar — isolate footer columns */
.site-footer .footer-col {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    z-index: auto;
}

.site-footer .footer-col h2,
.site-footer .footer-lucis h2 {
    margin: 0 0 16px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--arctic-powder);
}

.site-footer .footer-col ul {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
    width: auto;
    height: auto;
    flex-grow: 0;
}

.site-footer .footer-col li {
    display: block;
    margin: 0;
    font-size: inherit;
    font-weight: 400;
    height: auto;
}

.site-footer .footer-col a {
    display: inline-block;
    color: var(--mystic-mint);
    font-size: 14px;
    line-height: 1.45;
    text-decoration: none;
    text-underline-offset: 3px;
    transition: color 160ms ease;
}

.site-footer .footer-col a:hover {
    color: var(--deep-saffron);
    text-decoration: underline;
}

.site-footer .footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px 24px;
    margin-top: 56px;
    padding-top: 28px;
    border-top: 1px solid var(--nocturnal-expedition);
    font-size: 14px;
    color: var(--mystic-mint);
}

.site-footer .footer-bottom a {
    color: var(--mystic-mint);
    text-decoration: none;
    text-underline-offset: 3px;
}

.site-footer .footer-bottom a:hover {
    color: var(--deep-saffron);
    text-decoration: underline;
}

.site-footer .footer-copy {
    margin: 0;
}

.site-footer .footer-lucis {
    margin-top: 32px;
    padding-top: 28px;
    border-top: 1px solid var(--nocturnal-expedition);
    text-align: center;
    display: grid;
    gap: 16px;
    justify-items: center;
}

.site-footer .footer-lucis h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.site-footer .lucis-icons {
    display: flex;
    gap: 18px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.site-footer .lucis-icon {
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--arctic-powder);
    text-decoration: none;
}

.site-footer .lucis-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.85;
}

.site-footer .lucis-icon img.lucis-invert {
    filter: none;
}

.site-footer .lucis-icon:hover img {
    opacity: 1;
}

@media (min-width: 640px) {
    .site-footer {
        padding: 80px 24px 40px;
    }

    .site-footer .footer-cols {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .site-footer .footer-main {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: 40px;
        align-items: start;
    }

    .site-footer .footer-brand {
        grid-column: span 4;
    }

    .site-footer .footer-cols {
        grid-column: span 8;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        column-gap: 20px;
        row-gap: 40px;
    }
}

@media (max-width: 639px) {
    .site-footer .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    .site-footer .footer-lucis h2 {
        font-size: 16px;
        line-height: 1.4;
    }

    .site-footer .lucis-icon {
        width: 46px;
        height: 46px;
    }
}

.product-hunt img {
    width: 200px;
}