/* Source Serif 4 (the app's Source Serif Pro), self-hosted rather than pulled
   from Google's CDN: a third-party font request would undercut the privacy
   position in the policy, and it would break the offline preview copies.
   SIL Open Font License. */
@font-face{
  font-family:"Source Serif";
  src:url("fonts/source-serif-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Source Serif";
  src:url("fonts/source-serif-600.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Source Serif";
  src:url("fonts/source-serif-700.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}

:root{
    --bg: #fbf6ee;
    --bg2:#f3ede4;
    --text:#1a1a1a;
    --muted:#5a5a5a;
    --ink:#3a2f26;      /* long-form body text */
  
    --brand:#BB8049;        /* app light  */
    --brand2:#753100;       /* app dark   */

    --display: "Source Serif", ui-serif, Georgia, "Times New Roman", serif;
    --card:#ffffffcc;
    --stroke:#e5d6c6;
  
    /* Hero clip width. Source is 720x1486, so height = width * 2.064. */
    --hero-video-w: 449px;   /* == width of the nav text block */
    --topbar-h: 56px;

    --radius: 18px;
    --shadow: 0 12px 35px rgba(0,0,0,.08);
  }
  
  *{box-sizing:border-box}
  html,body{min-height:100%}
  body{
    margin:0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
    color:var(--text);
    background: linear-gradient(180deg,
      var(--bg) 0%, #fffdfa 42%, #fdfaf5 72%, var(--bg2) 100%);
  }
  /* Policy pages: one flat sheet of the app's off-white, top to bottom. */
  body.page-legal{
    background: var(--bg);
  }
  
  a{color:inherit; text-decoration:none}
  img{max-width:100%; display:block}
  
  .container{
    width:min(1100px, 92%);
    margin-inline:auto;
  }
  

  /* Display type matches the app: Source Serif, -3% tracking. */
  h1, h2, h3,
  .legal-page h1, .legal-section h2, .legal-section h3,
  .cta-band h2, .company-dialog h2{
    font-family: var(--display);
    letter-spacing:-.03em;
  }

  /* Topbar */
  .topbar{
    position:sticky;
    top:0;
    z-index:50;
    background: rgba(251,246,238,.8);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(229,214,198,.7);
  }
  .topbar__inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 0;
    gap:12px;
  }
  .brand{
    display:flex;
    align-items:center;
  }
  /* The logo is a wordmark, so it carries the name itself. No icon, no text. */
  .brand__wordmark{
    height:27px;
    width:auto;
    display:block;
  }
  
  .nav{
    display:flex;
    align-items:center;
    gap:18px;
    color: var(--muted);
    font-weight:600;
  }
  .nav a{padding:8px 10px; border-radius:12px}
  .nav a:hover{background: rgba(176,113,62,.08); color: var(--brand2)}
  
  /* Buttons */
  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:12px 16px;
    border-radius: 14px;
    border: 1px solid var(--brand);
    background: var(--brand);
    color: #fff;
    font-weight:700;
    box-shadow: 0 10px 22px rgba(176,113,62,.18);
    cursor:pointer;
  }
  .btn:hover{filter: brightness(.98)}
  .btn--ghost{
    background: transparent;
    color: var(--brand2);
    border-color: rgba(122,74,41,.35);
    box-shadow:none;
  }
  .btn--ghost:hover{background: rgba(176,113,62,.08)}
  .btn--small{padding:10px 12px; font-size:14px}
  
  /* Hero */
  .hero{
    position:relative;
    overflow:visible;         /* the clip runs past the hero on purpose */
    display:flex;
    align-items:center;
    padding: 96px 0 104px;
    /* tall enough to carry most of the clip: it is ~1.95x its width */
    /* frame height (width x 16/9) + top offset + breathing room */
    min-height: calc(var(--hero-video-w) * 1.778 + 150px);
    z-index:0;
  }
  .hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:
      radial-gradient(720px 480px at 92% 12%, rgba(176,113,62,.18), transparent 62%),
      radial-gradient(520px 380px at 4% 88%, rgba(122,74,41,.10), transparent 58%);
    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
    pointer-events:none;
  }
  .hero__grid{
    position:relative;
    z-index:1;
    width:min(1100px, 92%);
    margin-inline:auto;
    display:grid;
    grid-template-columns: 1fr;
    align-items:center;
  }
  .hero__copy{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
  }
  @media (min-width: 1001px){
    /* only constrain the copy while the clip sits beside it */
    .hero__copy{ max-width: calc(min(1100px, 92vw) - var(--hero-video-w) - 46px); }
  }
  .hero__copy .sub{margin-bottom:22px;}
  
  .pill{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 12px;
    border-radius:999px;
    border: 1px solid rgba(176,113,62,.25);
    background: rgba(176,113,62,.08);
    color: var(--brand2);
    font-weight:700;
    margin:0 0 12px;
  }
  
  h1{
    font-size: clamp(32px, 3.2vw, 46px);
    line-height:1.05;
    margin: 0 0 12px;
    letter-spacing:-.6px;
  }
  .sub{
    margin:0 0 18px;
    color: var(--muted);
    font-size: 16.5px;
    line-height:1.6;
  }
  
  .cta-row{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin: 26px 0 0;
  }
  
  /* The clip is wider than the gap beside the copy, so it breaks out of the
     container to the viewport edge and continues past the hero, dissolving into
     the section below instead of being cut off at the boundary. */
  .hero__media{
    position:absolute;
    top: 88px;
    right: calc((100% - min(1100px, 92%)) / 2 + 10px);
    width: var(--hero-video-w);
    aspect-ratio: 9 / 16;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:22px;
    overflow:hidden;
    isolation:isolate;
    /* forces WebKit to clip the composited video layer */
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    z-index:0;
    pointer-events:none;
  }
  .hero__media video,
  .hero__media img{
    height:100%;
    width:auto;               /* whole clip visible: never cropped, never stretched */
    max-width:100%;
    display:block;
    border-radius:22px;
    /* honoured on composited layers where border-radius alone is not */
    -webkit-clip-path: inset(0 round 22px);
            clip-path: inset(0 round 22px);
    background:transparent;   /* Safari paints black behind video otherwise */
  }
  .hero__media img{display:none;}

  .caption{
    margin: 10px 4px 0;
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.5;
  }
  
  /* Sections */
  /* Sit above the hero clip, so its tail slides under them. */
  .section{
    position:relative;
    z-index:1;
  }
  .section{
    padding: clamp(56px, 8vh, 84px) 0;
  }
  /* No ruled edges. The tinted bands fade in and out of the page instead, so
     one section dissolves into the next. */
  .section--alt{
    position:relative;
    z-index:0;
    background: linear-gradient(180deg,
      transparent 0%,
      rgba(243,237,228,.75) 24%,
      rgba(243,237,228,.75) 78%,
      transparent 100%);
    border: 0;
  }
  .section__head{
    margin-bottom: 22px;
    max-width: 640px;
  }
  .section__head h2{
    font-size: clamp(26px, 2.2vw, 32px);
    margin:0 0 6px;
    letter-spacing:-.3px;
  }
  .section__sub{
    margin:0;
    color: var(--muted);
    line-height:1.6;
  }
  
  /* Cards grid */
  .grid3{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:14px;
    margin-top: 18px;
  }
  .card{
    background: rgba(255,255,255,.8);
    border: 1px solid rgba(229,214,198,.95);
    border-radius: var(--radius);
    padding: 16px;
    box-shadow: 0 10px 24px rgba(0,0,0,.05);
  }
  .card h3{
    margin: 0 0 8px;
    font-size: 16px;
  }
  .card p{
    margin:0;
    color: var(--muted);
    line-height:1.6;
    font-size: 14.5px;
  }

  /* Company card */
  .company-card{
    max-width: 640px;
    margin: 0 auto;
    padding: 22px 24px;
  }
  .company-card p{
    margin: 0 0 14px;
    color: var(--ink, #3a2f26);
    line-height: 1.6;
    font-size: 15px;
  }
  .company-card ul{
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
  }
  .company-card li{
    color: var(--muted);
    font-size: 14.5px;
    line-height: 1.5;
  }
  .company-card li strong{
    color: var(--ink, #3a2f26);
  }
  .company-card a{
    color: var(--brand2);
    font-weight: 700;
  }

  
  .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;
  }

  /* Legal Pages */
  /* The policy pages sit on one flat sheet of the app's off-white. No card, no
     border, no shadow: the sectional contrast made them look like a different
     product to the rest of the site. */
  .legal-page{
    max-width: 760px;      /* a comfortable reading measure, not the full column */
    margin: 0 auto;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 26px 0 8px;
    box-shadow: none;
  }
  /* Title block: give it room to breathe, then a clear rule before the body. */
  .legal-page h1{
    font-size: clamp(30px, 3vw, 38px);
    margin: 0 0 10px;
    color: var(--brand2);
    line-height: 1.15;
  }
  .legal-page__date{
    color: var(--muted);
    font-size: 14px;
    margin: 0 0 34px;
    padding-bottom: 26px;
    border-bottom: 1px solid rgba(229,214,198,.9);
  }
  .legal-section{
    margin-bottom: 46px;
  }
  .legal-section:last-of-type{
    margin-bottom: 8px;
  }
  .legal-section h2{
    font-size: 23px;
    margin: 0 0 16px;
    color: var(--brand2);
    padding-top: 0;
    line-height: 1.25;
  }
  .legal-section h3{
    font-size: 17.5px;
    margin: 30px 0 10px;
    color: var(--text);
  }
  .legal-section h3:first-of-type{
    margin-top: 22px;
  }
  .legal-section p{
    margin: 0 0 16px;
    color: var(--ink);
    line-height: 1.75;
    font-size: 15.5px;
  }
  .legal-section p:last-child{
    margin-bottom: 0;
  }
  .legal-section ul{
    margin: 16px 0 18px;
    padding-left: 22px;
    color: var(--ink);
    line-height: 1.75;
    font-size: 15.5px;
  }
  .legal-section li{
    margin-bottom: 10px;
    padding-left: 4px;
  }
  .legal-section li:last-child{
    margin-bottom: 0;
  }
  .legal-section a{
    color: var(--brand2);
    text-decoration: underline;
  }
  .legal-section a:hover{
    color: var(--brand);
  }
  .legal-page__footer{
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid rgba(229,214,198,.95);
  }
  
  /* ===========================================================
     Vertical site polish + components
     =========================================================== */
  html{
    scroll-behavior:smooth;
    scroll-padding-top:84px;   /* clear the sticky topbar on anchor jumps */
  }
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
  }
  section[id]{scroll-margin-top:84px;}

  .eyebrow{
    margin:0 0 14px;
    font-size:13px;
    font-weight:800;
    letter-spacing:.4px;
    text-transform:uppercase;
    color:var(--brand);
  }

  /* Scroll reveal (applied via JS to below-the-fold blocks) */
  .reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
  .reveal.is-in{opacity:1; transform:none;}
  @media (prefers-reduced-motion: reduce){
    .reveal{opacity:1 !important; transform:none !important; transition:none;}
  }
  .nav a.is-active{
    background: rgba(176,113,62,.10);
    color: var(--brand2);
  }

  /* The three hero points: just the words, no subtext. Compact chips rather
     than cards, since a card with one word in it reads as an empty box. */
  .trust{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin:0;
  }
  .trust__item{
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(229,214,198,.85);
    border-radius: 999px;
    padding: 9px 18px 9px 10px;
  }
  .trust__head{
    display:flex;
    align-items:center;
    gap:10px;
  }
  .trust__num{
    width:24px; height:24px;
    flex:0 0 24px;
    border-radius:50%;
    background: rgba(176,113,62,.14);
    border: 1px solid rgba(176,113,62,.32);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
    font-weight:800;
    color: var(--brand2);
  }
  .trust__word{
    font-family: var(--display);
    font-size:18px;
    font-weight:600;
    letter-spacing:-.03em;
    line-height:1.1;
    color: var(--brand2);
  }

  /* Steps (How it Works) */
  .steps{
    list-style:none;
    padding:0;
    margin:18px 0 0;
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:14px;
  }
  .step{
    background: rgba(255,255,255,.8);
    border: 1px solid rgba(229,214,198,.95);
    border-radius: var(--radius);
    padding:18px;
  }
  .step__head{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:8px;
  }
  .step__badge{
    width:26px; height:26px;
    flex:0 0 26px;
    border-radius:8px;
    background: rgba(176,113,62,.13);
    border: 1px solid rgba(176,113,62,.3);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:13px;
    font-weight:800;
    color: var(--brand2);
  }
  .step__head h3{
    margin:0;
    font-size:18px;
    font-weight:700;
    line-height:1.2;
    color: var(--brand2);
  }
  .step p{
    margin:0;
    color: var(--muted);
    line-height:1.65;
    font-size:14.5px;
  }

  .phone-card img.phone-still{ display:none; }
  /* No bottom fade. The shot overlaps the next section and should stay fully
     visible where it does; fading it read as the video being cut off. */
  .phone-card img,
  .phone-card .phone-video{
    width:100%;
    height:auto;
    display:block;
    margin-inline:0;
    border-radius:20px;
  }

  /* Feature icons */
  .card{transition:transform .18s ease, box-shadow .18s ease;}
  .card:hover{transform:translateY(-3px); box-shadow:0 16px 34px rgba(0,0,0,.09);}
  .card__icon{
    width:42px;height:42px;
    display:flex;align-items:center;justify-content:center;
    border-radius:12px;
    margin-bottom:12px;
    color:var(--brand2);
    background:rgba(176,113,62,.12);
    border:1px solid rgba(176,113,62,.22);
  }

  /* How-to-Use swipe gallery (contained component, page still scrolls) */
  .tour{position:relative; margin-top:22px;}
  .tour__track{
    display:flex;
    gap:18px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding:4px 2px 10px;
  }
  .tour__track::-webkit-scrollbar{display:none;}
  .tour__card{
    flex:0 0 100%;
    min-width:0;
    scroll-snap-align:center;
    display:grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap:30px;
    align-items:center;
    background:rgba(255,255,255,.82);
    border:1px solid rgba(229,214,198,.95);
    border-radius:var(--radius);
    padding:26px 30px;
    box-shadow:var(--shadow);
  }
  .tour__media{display:flex; justify-content:center;}
  .tour__media img{
    width:auto;
    max-width:100%;
    max-height:440px;
    border-radius:18px;
    box-shadow:0 12px 28px rgba(0,0,0,.14);
  }
  .tour__step{
    margin:0 0 8px;
    font-size:13px; font-weight:800; letter-spacing:.4px;
    text-transform:uppercase; color:var(--brand);
  }
  .tour__body h3{margin:0 0 12px; font-size:22px; color:var(--brand2);}
  .tour__body p{margin:0 0 14px; color:var(--muted); line-height:1.7; font-size:15px;}
  .tour__body ul{margin:0; padding-left:20px; color:var(--muted); line-height:1.8; font-size:14.5px;}
  .tour__body li{margin-bottom:6px;}

  /* Gallery controls */
  .tour__controls{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;
    margin-top:16px;
  }
  .tour-arrow{
    width:44px;height:44px;
    display:flex;align-items:center;justify-content:center;
    border-radius:999px;
    border:1px solid var(--stroke);
    background:#fff;
    color:var(--brand2);
    box-shadow:0 8px 18px rgba(0,0,0,.07);
    cursor:pointer;
    transition:transform .15s, background .2s, opacity .2s;
  }
  .tour-arrow:hover{transform:scale(1.07);}
  .tour-arrow:disabled{opacity:.35; cursor:default; transform:none;}
  .tour-dots{display:flex; gap:8px;}
  .tour-dot{
    width:9px;height:9px;padding:0;border:0;border-radius:999px;
    background:rgba(122,74,41,.25); cursor:pointer;
    transition:width .25s, background .25s;
  }
  .tour-dot.is-active{width:24px; background:var(--brand);}

  /* Multi-city highlight band */
  .band{
    display:grid;
    grid-template-columns: 1.1fr .9fr;
    gap:36px;
    align-items:center;
    margin-top:8px;
  }
  .band__media{display:flex; justify-content:center;}
  .band__media img{
    width:auto; max-width:100%; max-height:520px;
    border-radius:20px;
    box-shadow:var(--shadow);
  }
  .band__body h3{margin:0 0 12px; font-size: clamp(20px, 1.7vw, 24px); color:var(--brand2);}
  .band__body p{margin:0 0 14px; color:var(--muted); line-height:1.7;}
  .band__body ul{margin:0; padding-left:20px; color:var(--muted); line-height:1.85;}
  .band__body li{margin-bottom:7px;}

  /* Closing CTA band */
  .cta-band{
    position:relative;
    overflow:hidden;
    text-align:center;
    padding:48px 28px;
    border-radius:26px;
    color:#fff;
    background:
      radial-gradient(600px 300px at 15% 0%, rgba(255,255,255,.16), transparent 60%),
      linear-gradient(135deg, var(--brand), var(--brand2));
    box-shadow:0 20px 50px rgba(122,74,41,.28);
  }
  .cta-band h2{
    margin:0 0 10px;
    font-size:clamp(24px, 2.6vw, 34px);
    letter-spacing:-.3px;
  }
  .cta-band p{
    margin:0 auto 22px;
    max-width:520px;
    color:rgba(255,255,255,.9);
    line-height:1.6;
  }
  .btn--light{
    background:#fff;
    color:var(--brand2);
    border-color:#fff;
    box-shadow:0 10px 24px rgba(0,0,0,.14);
  }
  .btn--light:hover{filter:none; background:#fff; transform:translateY(-1px);}

  /* Site footer (vertical page) */
  .sitefoot{
    background: linear-gradient(180deg,
      rgba(243,237,228,0) 0%,
      rgba(243,237,228,.55) 14%,
      rgba(243,237,228,.92) 46%,
      rgba(243,237,228,.98) 100%);
    border-top:0;
    padding:72px 0 32px;      /* the extra top padding is the blend zone */
    color:var(--muted);
  }
  .sitefoot__inner{
    width:min(1100px,92%);
    margin-inline:auto;
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:flex-start;
    gap:24px;
  }
  .sitefoot__brand{display:flex; align-items:center;}
  .sitefoot__brand img{height:30px; width:auto;}
  .sitefoot__tag{margin:10px 0 0; font-size:14px; max-width:340px; line-height:1.6;}
  .sitefoot__media{margin:12px 0 0; font-size:14px;}
  .sitefoot__media a{color:var(--brand2); font-weight:600;}
  .sitefoot__media a:hover{color:var(--brand); text-decoration:underline;}
  .sitefoot__col h4{
    margin:0 0 12px; font-size:13px; text-transform:uppercase;
    letter-spacing:.4px; color:var(--text);
  }
  .sitefoot__col a,
  .linklike{display:block; color:var(--brand2); font-weight:600; margin-bottom:8px;}
  .linklike{
    background:none; border:0; padding:0;
    /* Not `font:inherit` - that shorthand also resets the font-weight and
       line-height set above, so this button lost its weight and sat off the
       baseline of the <a> siblings next to it. */
    font-family:inherit; font-size:inherit; line-height:inherit;
    cursor:pointer; text-align:left;
  }
  .sitefoot__col a:hover,
  .linklike:hover{color:var(--brand); text-decoration:underline;}
  .sitefoot__bottom{
    width:min(1100px,92%);
    margin:28px auto 0;
    padding-top:18px;
    border-top:0;
    background:linear-gradient(90deg,
      transparent, rgba(229,214,198,.85) 12%,
      rgba(229,214,198,.85) 88%, transparent) top/100% 1px no-repeat;
    display:flex; flex-wrap:wrap; gap:6px 14px;
    justify-content:space-between;
    align-items:baseline;
    font-size:13px;
  }
  /* Zero every paragraph, not just the classed one. The copyright <p> carries
     no class, so it kept the browser's default margin and sat off the line
     from its sibling. */
  .sitefoot__bottom p{margin:0;}
  .sitefoot__entity{opacity:.85;}

  .sitefoot__social{
    display:inline-flex; align-items:center; gap:0;
    vertical-align:middle;
    margin-inline:5px;
  }
  /* The glyph stays 16px but the hit area is padded out to 30x36, because a
     16px tap target is far too small for a thumb. Spacing between icons comes
     from that padding rather than gap, so the visual rhythm is unchanged; the
     negative vertical margin keeps the padding from growing the line box. */
  .sitefoot__social a{
    display:inline-flex;
    align-items:center; justify-content:center;
    padding:10px 7px;
    margin:-10px 0;
    color:var(--brand);
    transition:color .15s ease, transform .15s ease;
  }
  .sitefoot__social a:hover,
  .sitefoot__social a:focus-visible{ color:var(--brand2); transform:translateY(-1px); }
  .sitefoot__social svg{ width:16px; height:16px; fill:currentColor; display:block; }

  /* Company modal */
  .company-dialog{
    border:1px solid var(--stroke);
    border-radius:var(--radius);
    padding:28px 30px;
    max-width:520px;
    width:92%;
    color:var(--text);
    background:var(--bg);
    box-shadow:0 30px 80px rgba(0,0,0,.28);
  }
  .company-dialog::backdrop{
    background:rgba(26,26,26,.45);
    backdrop-filter:blur(2px);
  }
  .company-dialog h2{
    margin:0 0 4px;
    color:var(--brand2);
    font-size:24px;
  }
  .company-dialog__sub{
    margin:0 0 16px;
    color:var(--muted);
  }
  .company-dialog p{line-height:1.6;}
  .company-dialog ul{
    list-style:none;
    margin:16px 0 0;
    padding:0;
    display:grid;
    gap:8px;
  }
  .company-dialog li{color:var(--muted); font-size:14.5px;}
  .company-dialog li strong{color:var(--text);}
  .company-dialog a{color:var(--brand2); font-weight:700;}
  .company-dialog__close{
    position:absolute;
    top:12px; right:14px;
    width:34px; height:34px;
    border:0;
    border-radius:999px;
    background:rgba(26,26,26,.06);
    color:var(--brand2);
    font-size:22px;
    line-height:1;
    cursor:pointer;
  }
  .company-dialog__close:hover{background:rgba(26,26,26,.12);}

  /* Responsive */
  @media (max-width: 960px){
    .grid3{grid-template-columns: 1fr 1fr; }
    .tour__card{grid-template-columns: 1fr; gap:18px; text-align:center;}
    .tour__body ul{text-align:left; display:inline-block;}
    .tour__media img{max-height:380px;}
    .band{grid-template-columns: 1fr; gap:20px;}
  }
  /* Below the side-by-side breakpoint the clip becomes a normal block under the
     copy. Floating it behind the text at low opacity looked like a rendering
     fault on a narrow screen, and the copy had to fight it for contrast. */
  @media (max-width: 1000px){
    .hero{
      display:flex;
      flex-direction:column;
      min-height:0;
      padding:52px 0 44px;
    }
    .hero__grid{order:1;}
    .hero__media{order:2;}
    .hero__copy{max-width:none;}
    .hero__media{
      position:static;
      width:min(420px, 62%);
      aspect-ratio:auto;      /* frame hugs the clip: Safari honours 9/16 here and leaves gaps */
      margin:34px auto 0;
      inset:auto;
      overflow:visible;
      border-radius:0;
      box-shadow:none;
    }
    .hero__media{
      -webkit-mask-image:none;
              mask-image:none;
    }
    .hero__media video,
    .hero__media img{
      width:100%;
        height:auto;
        border-radius:22px;
        box-shadow:0 18px 44px rgba(58,47,38,.16);
    }
    .hero::before{display:none;}   /* the ambient tint only reads behind a wide hero */
  }

  @media (max-width: 900px){
    .hero{
      min-height:0;
      padding:48px 0 40px;
    }
    .hero__grid{
      grid-template-columns:1fr;
    }
    .hero__copy{max-width:none;}
    .hero__copy{position:relative; z-index:1;}
    .steps{grid-template-columns: 1fr;}
    .legal-page{padding: 4px 0 0;}
    .legal-section{margin-bottom: 24px;}
    .nav{display:none;} /* keep it simple on mobile */
  }
  /* Phone: the clip spans the container, so its edges line up with the card
     edges below it. Tablets keep the cap above, or a portrait clip at 92% of an
     834px viewport would be over 1500px tall. */
  @media (max-width: 700px){
    .hero__media{ width:min(1100px, 92%); }

    /* Centre the whole bottom bar on phones. justify-content handles the flex
       children, text-align handles the wrapped text inside them: the copyright
       runs to two lines at this width, so without it the second line would sit
       left while the block looked centred. */
    .sitefoot__bottom{ justify-content:center; text-align:center; }
    .sitefoot__entity{ text-align:center; }
  }

  @media (max-width: 560px){
    .hero{padding:36px 0 28px;}
    .phone-card{margin-bottom:0;}
    .section{padding:44px 0;}
    .grid3{grid-template-columns: 1fr; }
    .trust{gap:8px;}
    .trust__item{padding:8px 14px 8px 8px;}
    .trust__word{font-size:17px;}
    .phone-card img, .phone-card .phone-video{max-width:340px; margin-inline:auto;}
    .sitefoot__bottom{flex-direction:column; gap:6px; align-items:center;}
  }

  /* ===========================================================
     Print / PDF export (share-with-customer proofs)
     Keep the real desktop design, show everything, no cut-offs.
     =========================================================== */
  @media print{
    /* Masks force Chrome to rasterise, and on the 24000px-tall print page that
       produced a bitmap so large that Ghostscript's bbox pass hung for minutes.
       These fades are a screen nicety; drop them for the PDF export. */
    .hero__media{ display:none !important; }
    .phone-card img.phone-still{ display:block !important; max-height:620px;
                  width:auto; margin-inline:auto; }
    .phone-card img, .hero::before{
      -webkit-mask-image:none !important;
              mask-image:none !important;
    }

    *{
      -webkit-print-color-adjust:exact !important;
      print-color-adjust:exact !important;
    }
    html,body{ background:#fff !important; }
    .topbar{ position:static !important; }

    /* Reveal-on-scroll blocks must be fully visible in print */
    .reveal{ opacity:1 !important; transform:none !important; }

    /* Keep the swipe gallery exactly as shown in the UI (one step + controls) */

    /* Avoid ugly breaks through cards/rows */
    .card, .tour__card, .band, .step, .cta-band,
    .phone-card, .section__head, .company-dialog{ break-inside:avoid; }
    .hero{ break-after:auto; }

    /* The modal is closed by default; never print it */
    dialog:not([open]){ display:none !important; }
  }
  
  /* ---- App download bar -------------------------------------------------
     Fixed to the bottom of the viewport on phones only. Rendered hidden until
     STORE_LINKS_LIVE is switched on in the page script. */
  .appcta{
    position:fixed;
    left:0; right:0; top:0;
    z-index:60;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:calc(10px + env(safe-area-inset-top)) 16px 10px;
    background:rgba(251,246,238,.94);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--stroke);
    box-shadow:0 6px 24px rgba(0,0,0,.07);
  }
  .appcta[hidden]{display:none;}
  .appcta__text{font-weight:700; font-size:15px; color:var(--brand2);}
  .appcta__btn{
    background:var(--brand);
    color:#fff;
    font-weight:700;
    font-size:14px;
    padding:10px 18px;
    border-radius:999px;
    text-decoration:none;
    white-space:nowrap;
  }
  .appcta__btn:hover{background:var(--brand2); color:#fff; text-decoration:none;}
  /* keep the bar from covering the last line of the page */
  body.has-appcta{padding-top:60px;}
  body.has-appcta .topbar{top:60px;}
  @media (min-width: 901px){
    .appcta{display:none;}   /* phone-only surface */
  }


  /* ---- Analytics consent ------------------------------------------------
     Bottom-left card rather than a full-width bar: it is a small ask, and a
     banner across the whole viewport would fight the app download bar that
     sits along the bottom on phones. */
  .consent{
    position:fixed;
    left:20px;
    bottom:20px;
    z-index:70;
    width:min(380px, calc(100vw - 40px));
    background:rgba(251,246,238,.97);
    backdrop-filter:blur(10px);
    border:1px solid var(--stroke);
    border-radius:var(--radius);
    box-shadow:0 18px 44px rgba(58,47,38,.16);
    padding:18px 18px 16px;
  }
  .consent[hidden]{display:none;}
  .consent__title{
    font-family:var(--display);
    font-size:17px;
    font-weight:700;
    letter-spacing:-.02em;
    color:var(--brand2);
    margin:0 0 6px;
  }
  .consent__text{
    margin:0 0 14px;
    font-size:13.5px;
    line-height:1.6;
    color:var(--ink);
  }
  .consent__text a{color:var(--brand2); font-weight:600; text-decoration:underline;}
  .consent__text a:hover{color:var(--brand);}
  .consent__actions{
    display:flex;
    gap:8px;
    justify-content:flex-end;
  }
  .consent__btn{
    font:inherit;
    font-size:13.5px;
    font-weight:700;
    padding:9px 18px;
    border-radius:999px;
    border:1px solid var(--brand);
    background:var(--brand);
    color:#fff;
    cursor:pointer;
  }
  .consent__btn:hover{background:var(--brand2); border-color:var(--brand2);}
  .consent__btn--ghost{
    background:transparent;
    color:var(--brand2);
    border-color:rgba(117,49,0,.32);
  }
  .consent__btn--ghost:hover{background:rgba(187,128,73,.10); color:var(--brand2);}
  .consent__btn:focus-visible{outline:2px solid var(--brand2); outline-offset:2px;}
  @media (max-width: 560px){
    .consent{left:12px; right:12px; bottom:12px; width:auto; padding:16px;}

  }
  @media print{ .consent{display:none !important;} }

  /* ---- Store buttons ----------------------------------------------------
     Equal squares rather than the official wide badges: those have different
     native aspect ratios (2.99 vs 3.36), so they can never match on width
     without distorting one of them. Same box, same glyph size, same label. */
  .stores{
    display:flex;
    flex-wrap:wrap;
    gap:16px;
    justify-content:center;
    margin-top:24px;
  }
  .stores__link{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:104px;
    height:104px;
    border-radius:20px;
    background:rgba(26,20,14,.92);
    color:#fff;
    text-decoration:none;
    transition:transform .18s ease, background .18s ease;
  }
  .stores__link:hover{transform:translateY(-3px); background:#1a140e;}
  .stores__link:focus-visible{outline:2px solid #fff; outline-offset:3px;}
  .stores__glyph{
    width:34px;
    height:34px;
    display:block;
  }
  .stores__label{
    font-size:12px;
    font-weight:700;
    letter-spacing:.01em;
    line-height:1;
    color:#fff;
  }
  @media (max-width: 560px){
    .stores{gap:12px;}
    .stores__link{width:92px; height:92px; border-radius:18px;}
    .stores__glyph{width:30px; height:30px;}
    .stores__label{font-size:11px;}
  }

  /* ---- Justified body copy ----------------------------------------------
     Requested across the site. Headings are excluded (justifying a two-word
     heading just stretches it), as are the How-to-Use step headings
     specifically. Hyphenation is on because justified text in a narrow column
     opens ugly word gaps without it. */
  .sub,
  .section__sub,
  .card p,
  .step p,
  .band__body p,
  .band__body li,
  .tour__body p,
  .tour__body li,
  .legal-section p,
  .legal-section li,
  .company-dialog p,
  .cta-band p{
    text-align: justify;
    -webkit-hyphens: auto;
            hyphens: auto;
  }
  /* Centred blocks stay centred; justifying them would fight the centring. */
  .cta-band p{ text-align:center; hyphens:none; }
  /* The six step headings keep their natural alignment. */
  .tour__body h3{ text-align:left; hyphens:none; }