/* =========================
       Design tokens (reusable)
       ========================= */
    :root {
      --maxw: 1200px;

      --bg: #f6f3ee;
      --paper: rgba(255,255,255,.66);
      --paper-strong: rgba(255,255,255,.82);
      --stroke: rgba(35, 40, 45, .10);
      --stroke-strong: rgba(35, 40, 45, .16);

      --text: #22272b;
      --muted: rgba(34, 39, 43, .72);
      --muted-2: rgba(34, 39, 43, .58);

      --brand: #2f79a5;
      --brand-2: #2a6b92;
      --brand-soft: rgba(47, 121, 165, .14);

      --radius-lg: 22px;
      --radius-md: 16px;
      --radius-sm: 12px;

      --shadow-lg: 0 18px 44px rgba(0,0,0,.10);
      --shadow-md: 0 10px 28px rgba(0,0,0,.08);
      --shadow-sm: 0 8px 18px rgba(0,0,0,.06);

      --pad-1: 12px;
      --pad-2: 18px;
      --pad-3: 26px;
      --pad-4: 38px;
      --pad-5: 58px;

      --h1: clamp(32px, 4.2vw, 50px);
      --h2: clamp(26px, 3.1vw, 38px);
      --h3: clamp(18px, 2.0vw, 24px);
      --body: clamp(15px, 1.3vw, 17px);

      --font-ui: system-ui, -apple-system, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
      --font-mark: "MarkerFelt-Wide", "Marker Felt", "MarkerFelt", "Bradley Hand", cursive;

      /* Replace with your own file (local or CDN) */
      --map-bg-url: url("./images/background/cloudymapbg_v1.jpg");
    }

    * { box-sizing: border-box; }
    html, body { height: 100%; }
    body {
      margin: 0;
      color: var(--text);
      font-family: var(--font-ui);
      background: transparent; /* var(--bg); */
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    a { color: inherit; text-decoration: none; }
    a:hover { text-decoration: underline; text-underline-offset: 3px; }

    /* =========================
       Fixed background map layer
       ========================= */
    .bg-map {
      position: fixed;
      inset: 0;
      z-index: 0;          
      pointer-events: none;
      background-image: var(--map-bg-url);
      background-position: center;
      background-repeat: no-repeat;
      background-attachment: scroll;   
      background-size: auto 100vh;  /* 100svh if there is a problem with iOS safari because visible height changes */
      opacity: 0.35;
    }
    
    .bg-vignette {
      position: fixed;
      inset: 0;
      z-index: 1;              
      pointer-events: none;
      opacity: 0.75;           
    }
    
    main,
    footer {
      position: relative;
      z-index: 2;
    }
    
    @media (min-aspect-ratio: 3/2) {
      .bg-map {
        background-size: 100vw auto;
      }
    }
    
    
    .site-header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
    
      z-index: 10; /* above content, below modals if any */
      
      background: rgba(255,255,255,.72);
      backdrop-filter: saturate(120%) blur(8px);
      -webkit-backdrop-filter: saturate(120%) blur(8px);
    
      border-bottom: 1px solid rgba(255,255,255,.35);
    }




    .wrap {
      max-width: var(--maxw);
      margin: 0 auto;
      padding: 0 var(--pad-3);
    }

    .header-inner {
      height: 66px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
    }
    
    .logo-img {
      height: 50px;   
      width: auto;
      display: block;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      min-width: 160px;
    }

    .brand-name {
      font-family: var(--font-mark);
      font-size: 22px;
      letter-spacing: .2px;
      line-height: 1;
    }
    .brand-tag {
      display: block;
      font-size: 12px;
      color: var(--muted-2);
      margin-top: 2px;
    }

    .nav {
      display: flex;
      align-items: center;
      gap: 16px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }
    .nav a {
      font-size: 13px;
      color: var(--muted);
      padding: 8px 10px;
      border-radius: 10px;
    }
    .nav a:hover {
      text-decoration: none;
      background: rgba(255,255,255,.55);
      color: var(--text);
    }

    .cta {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 10px 14px;
      border-radius: 12px;
      background: linear-gradient(180deg, rgba(47,121,165,1), rgba(42,107,146,1));
      color: white;
      font-weight: 600;
      font-size: 13px;
      box-shadow: 0 14px 28px rgba(47,121,165,.22);
      border: 1px solid rgba(255,255,255,.12);
      white-space: nowrap;
    }
    .cta:hover { text-decoration: none; filter: brightness(1.02); }
    .cta:active { transform: translateY(1px); }

    .cta .apple {
      width: 16px; height: 16px;
      display: inline-block;
      background: currentColor;
      -webkit-mask: radial-gradient(circle at 52% 46%, #000 58%, transparent 59%) /* placeholder icon trick */
                    ;
      mask: radial-gradient(circle at 52% 46%, #000 58%, transparent 59%);
      opacity: .0; /* replace with SVG icon if you want */
    }

    /* Mobile nav: keep it simple and tidy */
    .menu-toggle { display: none; }
    @media (max-width: 860px) {
      .header-inner { height: auto; padding: 10px 0; align-items: flex-start; }
      .nav { gap: 8px; }
      .nav a { padding: 8px 8px; }
    }
    @media (max-width: 640px) {
      .wrap { padding: 0 16px; }
      .nav { display: none; }
      .menu-toggle { display: inline-flex; }
      .cta { padding: 10px 12px; }
    }

    main {
      padding-top: 86px; /* header offset */
    }
    
    
    /* =========================
   App Store badge (Apple artwork)
   ========================= */

    /* The image itself: never stretch; keep native ratio */
    .appstore-badge {
      display: block;
      height: 40px;        /* Apple badge height */
      width: auto;         /* preserve aspect ratio */
      border-radius: 0;    /* keep artwork unmodified */
    }
    
    /* Generic link wrapper for badge usage (hero, support, etc.) */
    .badge-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
    
      /* Clear space around the badge without touching the artwork */
      padding: 10px;            /* ~1/4 of 40px height */
      border-radius: 12px;
    
      background: rgba(255,255,255,.45);
      border: 1px solid rgba(255,255,255,.35);
      box-shadow: var(--shadow-sm);
    }
    
    .badge-link:hover {
      text-decoration: none;
      background: rgba(255,255,255,.60);
    }
    
    .badge-link:active {
      transform: translateY(1px);
    }
    
    /* Header: keep your layout, but don't paint the blue CTA button behind the badge */
    .cta.cta-badge {
      padding: 10px;                 /* clear space */
      background: transparent;
      border: 1px solid rgba(255,255,255,.35);
      box-shadow: none;
    }
    .cta.cta-badge:hover {
      background: rgba(255,255,255,.35);
    }
    
    /* Small screens: keep badge visible and avoid shrinking below 40px height */
    @media (max-width: 640px) {
      .cta.cta-badge { padding: 10px; } /* overrides your .cta padding rule */
    }


    /* =========================
       Section styling (reused)
       ========================= */
    .section {
      padding: var(--pad-5) 0;
    }
    .section + .section {
      padding-top: 0;
    }

    /* The “panel” matches your mockups: soft paper with rounded corners */
    .panel {
      border-radius: var(--radius-lg);
      background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.62));
      border: 1px solid var(--stroke);
      box-shadow: var(--shadow-md);
      overflow: hidden;
      position: relative;
    }

    /* subtle map overlay inside panels (very light) */
    .panel::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image: var(--map-bg-url);
      background-size: cover;
      background-position: center;
      opacity: .08;
      pointer-events: none;
      transform: translateY(-6px);
    }

    .panel-inner {
      position: relative;
      padding: var(--pad-5);
    }

    .kicker {
      color: var(--muted);
      font-weight: 600;
      letter-spacing: .08em;
      text-transform: uppercase;
      font-size: 12px;
    }
    h1, h2, h3 { margin: 0 0 12px 0; }
    h1 { font-size: var(--h1); letter-spacing: -.02em; }
    h2 { font-size: var(--h2); letter-spacing: -.02em; }
    h3 { font-size: var(--h3); letter-spacing: -.01em; }

    p {
      margin: 0 0 12px 0;
      font-size: var(--body);
      line-height: 1.55;
      color: var(--muted);
    }

    .muted { color: var(--muted); }
    .small { font-size: 13px; color: var(--muted-2); }
    .center { text-align: center; }

    .btn-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 12px 16px;
      border-radius: 12px;
      border: 1px solid var(--stroke);
      background: rgba(255,255,255,.62);
      box-shadow: var(--shadow-sm);
      font-weight: 650;
      font-size: 14px;
      color: var(--text);
    }
    .btn:hover { text-decoration: none; background: rgba(255,255,255,.78); }
    .btn.primary {
      background: linear-gradient(180deg, rgba(47,121,165,1), rgba(42,107,146,1));
      border: 1px solid rgba(255,255,255,.18);
      color: white;
    }
    .btn.primary:hover { filter: brightness(1.02); }

    .pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      border-radius: 999px;
      border: 1px solid var(--stroke);
      background: rgba(255,255,255,.60);
      color: var(--muted);
      font-size: 13px;
    }
    .pill strong { color: var(--text); }

    .grid {
      display: grid;
      gap: 26px;
    }
    .grid.two { grid-template-columns: 1.1fr .9fr; align-items: center; }
    .grid.two.reverse { grid-template-columns: .9fr 1.1fr; }
    @media (max-width: 920px) {
      .panel-inner { padding: 34px; }
      .grid.two, .grid.two.reverse { grid-template-columns: 1fr; }
    }
    @media (max-width: 520px) {
      .panel-inner { padding: 22px; }
      .section { padding: 34px 0; }
    }

    /* =========================
       “Soft parallax” content
       (CSS-only, subtle and safe)
       ========================= */
    .floaty {
      transform: translateY(-4px);
      transition: transform 600ms ease;
    }
    @media (prefers-reduced-motion: reduce) {
      .floaty { transition: none; transform: none; }
      .bg-map { background-attachment: scroll; }
    }

    /* =========================
       Hero
       ========================= */
    .hero {
      padding-top: 26px;
    }

    .hero-card {
      min-height: 420px;
      display: grid;
      grid-template-columns: 1.05fr .95fr;
      align-items: center;
      gap: 18px;
    }
    .hero-copy h1 {
      margin-bottom: 10px;
    }
    .hero-copy p {
      max-width: 52ch;
    }
    .hero-badges {
      margin-top: 16px;
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }

    .hero-visual {
      position: relative;
      min-height: 340px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }

    /* "Phone mock" that is CSS-friendly: you can swap screenshot image later */
    .phone {
      width: min(360px, 100%);
      aspect-ratio: 9 / 19.5;
      border-radius: 34px;
      border: 1px solid rgba(0,0,0,.10);
      background: rgba(255,255,255,.72);
      box-shadow: 0 26px 60px rgba(0,0,0,.16);
      position: relative;
      overflow: hidden;
      transform: rotate(2deg);
    }
    .phone::before {
      content: "";
      position: absolute;
      inset: 12px;
      border-radius: 26px;
      pointer-events: none;
    
      background:
        linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0)),
        radial-gradient(520px 260px at 70% 30%, rgba(47,121,165,.12), rgba(47,121,165,0) 60%);
    }
    .phone-notch {
      position:absolute;
      top: 10px;
      left: 50%;
      transform: translateX(-50%);
      width: 44%;
      height: 24px;
      border-radius: 0 0 16px 16px;
      background: rgba(0,0,0,.10);
      opacity: .6;
    }
    .phone-label {
      position:absolute;
      bottom: 18px;
      left: 24px;
      right: 24px;
      padding: 12px 14px;
      border-radius: 14px;
      background: rgba(255,255,255,.72);
      border: 1px solid var(--stroke);
      color: var(--muted);
      font-size: 13px;
    }
    .phone-screenshot {
      position: absolute;
      inset: 12px;
      width: calc(100% - 24px);
      height: calc(100% - 24px);
      object-fit: cover;
      object-position: center top;
      border-radius: 26px;
    }

    .polaroids {
      position:absolute;
      right: 270px;
      top: 120px;
      display: grid;
      gap: 10px;
    }
    .polaroid {
      --polaroid-img: none;
      width: 140px;
      height: 118px;
      border-radius: 14px;
      background: rgba(255,255,255,.74);
      border: 1px solid var(--stroke);
      box-shadow: var(--shadow-sm);
      transform: rotate(-4deg);
      position: relative;
      overflow: hidden;
    }
    .polaroid:nth-child(2) { transform: rotate(5deg) translateX(14px); }
    .polaroid::before {
      content:"";
      position:absolute;
      inset: 10px 10px 32px 10px;
      border-radius: 10px;
    
      /* image + subtle overlay */
      background:
        linear-gradient(180deg, rgba(47,121,165,.18), rgba(47,121,165,0) 60%),
        var(--polaroid-img);
    
      background-size: cover;
      background-position: center;
    }
    .polaroid::after {
      content: attr(data-label);
      position:absolute;
      left: 12px;
      bottom: 10px;
      font-size: 12px;
      color: var(--muted-2);
    }

    @media (max-width: 920px) {
      .hero-card { grid-template-columns: 1fr; }
      .hero-visual { justify-content: center; }
      .polaroids { display: none; }
    }


    /* =========================
       Why We Built This App
       ========================= */

    .why-image {
      width: min(360px, 100%);
      height: auto;
      border-radius: 18px;
      border: 1px solid rgba(0,0,0,.10);
      background: rgba(255,255,255,.68);
      box-shadow: var(--shadow-sm);
    }


    /* =========================
       Feature rows (alternating)
       ========================= */
    .feature-list {
      display: grid;
      gap: 18px;
      margin-top: 12px;
    }
    .feature-row {
      border-radius: var(--radius-lg);
      border: 1px solid var(--stroke);
      background: rgba(255,255,255,.62);
      box-shadow: var(--shadow-sm);
      overflow: hidden;
      position: relative;
    }
    .feature-row::before {
      content:"";
      position:absolute;
      inset: 0;
      background-image: var(--map-bg-url);
      background-size: cover;
      background-position: center;
      opacity: .06;
      pointer-events: none;
    }
    .feature-row-inner {
      position: relative;
      padding: 26px;
      display: grid;
      grid-template-columns: 1.05fr .95fr;
      gap: 18px;
      align-items: center;
    }
    .feature-row:nth-child(even) .feature-row-inner {
      grid-template-columns: .95fr 1.05fr;
    }

    .feature-copy h3 { margin-bottom: 8px; }
    .feature-copy p { margin-bottom: 0; }

    .feature-visual {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      min-height: 170px;
    }
    .feature-image {
      width: 100%;
      max-width: 360px;          /* visual cap, not required size */
      height: auto;
      border-radius: 18px;
      border: 1px solid rgba(0,0,0,.10);
      background: rgba(255,255,255,.68);
      box-shadow: var(--shadow-sm);
      display: block;
    }


    @media (max-width: 920px) {
      .feature-row-inner { grid-template-columns: 1fr; }
      .feature-row:nth-child(even) .feature-row-inner { grid-template-columns: 1fr; }
      .feature-visual { justify-content: flex-start; }
    }

    /* =========================
       FAQ (details/summary)
       ========================= */
    .faq {
      max-width: 920px;
      margin: 0 auto;
    }
    details {
      border-bottom: 1px solid var(--stroke);
      padding: 14px 0;
    }
    summary {
      list-style: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      font-weight: 650;
      color: var(--text);
      font-size: 16px;
      padding: 10px 0;
    }
    summary::-webkit-details-marker { display: none; }
    .chev {
      width: 10px;
      height: 10px;
      border-right: 2px solid rgba(34,39,43,.55);
      border-bottom: 2px solid rgba(34,39,43,.55);
      transform: rotate(45deg);
      transition: transform .18s ease;
      flex: 0 0 auto;
      margin-right: 2px;
    }
    details[open] .chev {
      transform: rotate(-135deg);
      margin-top: 4px;
    }
    .answer {
      padding: 0 0 12px 0;
    }
    .answer p { margin: 0; }

    /* =========================
       Pricing / Support cards
       ========================= */
    .cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      margin-top: 18px;
    }
    .card {
      border-radius: var(--radius-lg);
      border: 1px solid var(--stroke);
      background: rgba(255,255,255,.64);
      box-shadow: var(--shadow-sm);
      padding: 18px;
    }
    .card h3 { margin: 0 0 8px 0; }
    .card p { margin: 0 0 12px 0; }
    .price {
      font-size: 26px;
      font-weight: 780;
      letter-spacing: -.02em;
      margin: 10px 0 10px 0;
    }
    .card ul {
      margin: 0;
      padding-left: 18px;
      color: var(--muted);
      line-height: 1.5;
      font-size: 14px;
    }
    .card ul li { margin: 6px 0; }

    @media (max-width: 920px) {
      .cards { grid-template-columns: 1fr; }
    }

    /* =========================
       Contact form
       ========================= */
    form {
      max-width: 860px;
      margin: 0 auto;
      display: grid;
      gap: 12px;
    }
    .field-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }
    @media (max-width: 720px) {
      .field-row { grid-template-columns: 1fr; }
    }
    label {
      font-size: 13px;
      font-weight: 650;
      color: var(--muted);
      display: block;
      margin: 0 0 6px 0;
    }
    input, textarea, select {
      width: 100%;
      padding: 12px 12px;
      border-radius: 12px;
      border: 1px solid var(--stroke-strong);
      background: rgba(255,255,255,.70);
      outline: none;
      font-family: var(--font-ui);
      font-size: 14px;
      color: var(--text);
    }
    textarea { min-height: 120px; resize: vertical; }
    input:focus, textarea:focus, select:focus {
      border-color: rgba(47,121,165,.45);
      box-shadow: 0 0 0 4px rgba(47,121,165,.12);
    }

    /* =========================
       Footer
       ========================= */
    footer {
      padding: 26px 0 40px 0;
      color: var(--muted-2);
      font-size: 13px;
    }
    .footer-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
      border-top: 1px solid var(--stroke);
      padding-top: 18px;
    }
    .footer-links {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
    }
    .footer-links a { color: var(--muted-2); }

    /* Anchors offset for fixed header */
    [id] { scroll-margin-top: 90px; }