/* Design tokens, primitives and navigation reused from the Karenderia Kiosk landing page. */

      /* ================================================================
   1. TOKENS & RESET
      Accent = the Kiosk app's orange. Confirm the exact hex from the
      kiosk UI and update --accent / --accent-strong / --accent-deep.
      --accent-strong is used for text & button backgrounds (AA contrast).
================================================================= */
      :root {
        --font-display:
          "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
        --font-body:
          "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;

        --ink: #1f1c19;
        --ink-2: #3d3833;
        --muted: #6c655e;
        --line: #eee7de;
        --line-strong: #ddd3c6;

        --bg: #ffffff;
        --cream: #fbf7f1;
        --cream-2: #f5ede2;
        --char: #1c1a18;
        --char-2: #282522;
        --char-line: #3a3632;
        --char-text: #d9d3cc;
        --char-muted: #a39b93;

        --accent: #f26b1f;
        --accent-strong: #c9500f;
        --accent-deep: #9a3c0a;
        --accent-soft: #fff1e6;
        --accent-tint: #ffe0c8;

        /* Primary button color */
        --btn: #ff8a1f;
        --btn-hover: #f27a0c;

        --green: #16a34a;
        --green-soft: #e8f6ed;

        --r-xl: 28px;
        --r-lg: 20px;
        --r-md: 14px;
        --r-sm: 10px;
        --shadow-sm:
          0 1px 2px rgba(31, 28, 25, 0.05), 0 2px 10px rgba(31, 28, 25, 0.05);
        --shadow-md:
          0 2px 4px rgba(31, 28, 25, 0.05),
          0 16px 36px -14px rgba(31, 28, 25, 0.2);
        --shadow-lg:
          0 4px 10px rgba(31, 28, 25, 0.06),
          0 34px 70px -24px rgba(31, 28, 25, 0.35);
      }
      *,
      *::before,
      *::after {
        box-sizing: border-box;
      }
      * {
        margin: 0;
      }
      html {
        scroll-behavior: smooth;
        -webkit-text-size-adjust: 100%;
      }
      body {
        font-family: var(--font-body);
        font-size: 16px;
        line-height: 1.65;
        color: var(--ink);
        background: var(--bg);
        overflow-x: clip;
      }
      img {
        max-width: 100%;
        height: auto;
        display: block;
      }
      a {
        color: inherit;
        text-decoration: none;
      }
      button {
        font: inherit;
        color: inherit;
        background: none;
        border: 0;
        padding: 0;
        cursor: pointer;
      }
      ul,
      ol {
        list-style: none;
        padding: 0;
      }
      :focus-visible {
        outline: 3px solid rgba(242, 107, 31, 0.55);
        outline-offset: 2px;
        border-radius: 6px;
      }
      ::selection {
        background: var(--accent-tint);
      }
      body.no-scroll {
        overflow: hidden;
      }
      section[id] {
        scroll-margin-top: 80px;
      }
      [hidden] {
        display: none !important;
      }

      /* ================================================================
   2. LAYOUT UTILITIES
================================================================= */
      .container {
        width: min(1200px, calc(100% - 40px));
        margin-inline: auto;
      }
      .section {
        padding: clamp(72px, 9vw, 120px) 0;
      }
      .section-cream {
        background: var(--cream);
      }
      .section-dark {
        background: var(--char);
        color: var(--char-text);
      }

      .eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 12.5px;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--accent-strong);
      }
      .eyebrow::before {
        content: "";
        width: 22px;
        height: 2px;
        border-radius: 2px;
        background: var(--accent);
      }
      .section-dark .eyebrow {
        color: #ff9a5c;
      }

      h1,
      h2,
      h3 {
        font-family: var(--font-display);
        letter-spacing: -0.025em;
        color: var(--ink);
      }
      h2 {
        text-wrap: balance;
        font-weight: 800;
        font-size: clamp(30px, 4.2vw, 46px);
        line-height: 1.12;
        margin-top: 14px;
      }
      h3 {
        font-weight: 700;
        font-size: 19px;
        line-height: 1.3;
        letter-spacing: -0.015em;
      }
      .section-dark h2,
      .section-dark h3 {
        color: #fff;
      }

      .shead {
        max-width: 740px;
        margin: 0 auto clamp(40px, 5vw, 64px);
        text-align: center;
      }
      .lede {
        color: var(--muted);
        font-size: 17.5px;
        line-height: 1.7;
        margin-top: 16px;
      }
      .section-dark .lede {
        color: var(--char-muted);
      }

      .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        padding: 12px 20px;
        border-radius: 12px;
        font-weight: 600;
        font-size: 15px;
        border: 1.5px solid transparent;
        transition:
          transform 0.18s ease,
          box-shadow 0.18s ease,
          background-color 0.18s ease,
          border-color 0.18s ease;
        white-space: nowrap;
      }
      .btn .ic {
        width: 17px;
        height: 17px;
      }
      .btn:hover {
        transform: translateY(-1px);
      }
      .btn:active {
        transform: none;
      }
      .btn-primary {
        background: var(--btn);
        color: #fff;
        box-shadow: 0 10px 22px -10px rgba(255, 138, 31, 0.7);
      }
      .btn-primary:hover {
        background: var(--btn-hover);
        box-shadow: 0 14px 28px -10px rgba(255, 138, 31, 0.75);
      }
      .btn-secondary {
        background: #fff;
        border-color: var(--line-strong);
        color: var(--ink);
      }
      .btn-secondary:hover {
        border-color: #c7bcae;
      }
      .btn-white {
        background: #fff;
        color: var(--accent-deep);
      }
      .btn-white:hover {
        box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.4);
      }
      .btn-ghost-light {
        border-color: rgba(255, 255, 255, 0.55);
        color: #fff;
      }
      .btn-ghost-light:hover {
        background: rgba(255, 255, 255, 0.12);
      }
      .btn-lg {
        padding: 15px 26px;
        font-size: 16px;
        border-radius: 14px;
      }
      .btn[aria-disabled="true"] {
        opacity: 0.55;
        cursor: not-allowed;
        transform: none;
      }
      .btn-row {
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
        align-items: center;
      }
      .btn-row.center {
        justify-content: center;
      }

      .ic {
        width: 20px;
        height: 20px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        flex: none;
      }
      .tile {
        width: 46px;
        height: 46px;
        border-radius: 13px;
        display: grid;
        place-items: center;
        flex: none;
        background: var(--accent-soft);
        color: var(--accent-strong);
      }
      .tile .ic {
        width: 22px;
        height: 22px;
      }

      .checks {
        display: grid;
        gap: 12px;
      }
      .checks li {
        display: flex;
        gap: 12px;
        align-items: flex-start;
        font-weight: 500;
      }
      .checks .ic {
        width: 22px;
        height: 22px;
        padding: 4px;
        border-radius: 50%;
        background: var(--accent-soft);
        color: var(--accent-strong);
        stroke-width: 3;
        margin-top: 1px;
      }
      .section-dark .checks .ic {
        background: rgba(242, 107, 31, 0.18);
        color: #ff9a5c;
      }

      .chips {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
      }
      .chip {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 14px;
        border-radius: 999px;
        background: #fff;
        border: 1px solid var(--line);
        font-size: 14px;
        font-weight: 600;
        color: var(--ink-2);
      }
      .chip .ic {
        width: 16px;
        height: 16px;
        color: var(--accent-strong);
      }

      .note {
        font-size: 14px;
        color: var(--muted);
      }
      .note--center {
        text-align: center;
        margin-top: 24px;
      }
      .section--flush-top {
        padding-top: 0;
      }

      .skip-link {
        position: absolute;
        left: 16px;
        top: -60px;
        z-index: 200;
        background: var(--ink);
        color: #fff;
        padding: 10px 16px;
        border-radius: 10px;
        font-weight: 600;
        transition: top 0.2s;
      }
      .skip-link:focus {
        top: 14px;
      }

      /* Two-column copy + visual layout used by most feature sections */
      .split {
        display: grid;
        gap: clamp(40px, 6vw, 88px);
        align-items: center;
      }
      .split-copy .lede {
        margin-top: 18px;
      }
      .split-copy .checks,
      .split-copy .chips {
        margin-top: 28px;
      }
      .split-media {
        display: flex;
        justify-content: center;
      }
      @media (min-width: 960px) {
        .split {
          grid-template-columns: 1fr 1fr;
        }
        .split--rev .split-media {
          order: -1;
        }
      }

      /* ================================================================
   3. HEADER / NAV
================================================================= */
      .site-header {
        position: sticky;
        top: 0;
        z-index: 60;
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-bottom: 1px solid transparent;
        transition:
          border-color 0.2s,
          box-shadow 0.2s;
      }
      .site-header.scrolled {
        border-color: var(--line);
        box-shadow: 0 8px 24px -18px rgba(31, 28, 25, 0.3);
      }
      .nav-wrap {
        display: flex;
        align-items: center;
        gap: 20px;
        height: 70px;
      }
      .brand {
        display: flex;
        align-items: center;
        gap: 10px;
        font-family: var(--font-display);
        font-weight: 800;
        font-size: 18px;
        letter-spacing: -0.02em;
      }
      .brand-mark {
        width: 36px;
        height: 36px;
        border-radius: 11px;
        background: var(--accent);
        color: #fff;
        display: grid;
        place-items: center;
      }
      .brand-mark .ic {
        width: 20px;
        height: 20px;
      }
      .brand small {
        font-family: var(--font-body);
        font-weight: 600;
        font-size: 11px;
        letter-spacing: 0.04em;
        color: var(--muted);
        display: block;
        line-height: 1.1;
      }
      .brand-text {
        white-space: nowrap;
        line-height: 1.15;
      }
      .brand-name {
        font-size: 15px;
        line-height: 1.2;
      }
      .brand-name span {
        display: block;
        color: var(--accent-strong);
      }
      .site-footer .brand-name span {
        color: #ff9a5c;
      }
      .brand small {
        margin-top: 2px;
      }
      .site-nav {
        display: none;
      }
      .nav-actions {
        margin-left: auto;
        display: flex;
        gap: 10px;
        align-items: center;
      }
      .nav-toggle {
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        border: 1.5px solid var(--line-strong);
        border-radius: 12px;
      }
      .nav-toggle span {
        display: block;
        width: 18px;
        height: 2px;
        background: var(--ink);
        border-radius: 2px;
        transition: transform 0.25s;
      }
      .nav-toggle span + span {
        margin-top: 4px;
      }
      .site-header.nav-open .nav-toggle span:first-child {
        transform: translateY(3px) rotate(45deg);
      }
      .site-header.nav-open .nav-toggle span:last-child {
        transform: translateY(-3px) rotate(-45deg);
      }
      @media (min-width: 1000px) {
        .site-nav {
          display: flex;
          gap: 30px;
          margin: 0 auto;
        }
        .site-nav a {
          font-size: 14.5px;
          font-weight: 500;
          color: var(--ink-2);
          padding: 6px 1px;
          position: relative;
        }
        .site-nav a::after {
          content: "";
          position: absolute;
          left: 0;
          right: 0;
          bottom: 0;
          height: 2px;
          background: var(--accent);
          border-radius: 2px;
          transform: scaleX(0);
          transform-origin: left;
          transition: transform 0.22s;
        }
        .site-nav a:hover {
          color: var(--ink);
        }
        .site-nav a:hover::after {
          transform: scaleX(1);
        }
        .nav-toggle {
          display: none;
        }
        .site-nav .nav-demo {
          display: none;
        }
      }
      @media (max-width: 999px) {
        .site-nav {
          position: absolute;
          top: 100%;
          left: 0;
          right: 0;
          background: #fff;
          border-bottom: 1px solid var(--line);
          box-shadow: 0 24px 48px -24px rgba(31, 28, 25, 0.35);
          padding: 10px 20px 20px;
          flex-direction: column;
        }
        .site-header.nav-open .site-nav {
          display: flex;
        }
        .site-nav a {
          display: block;
          padding: 13px 4px;
          font-weight: 600;
          font-size: 16px;
          border-bottom: 1px solid var(--cream-2);
        }
      }
      @media (max-width: 520px) {
        .brand small,
        .nav-actions .btn {
          display: none;
        }
        .brand-name {
          font-size: 14px;
        }
      }