html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  font-family: sans-serif;
}

body {
  margin: 0;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

audio, canvas, progress, video {
  vertical-align: baseline;
  display: inline-block;
}

audio:not([controls]) {
  height: 0;
  display: none;
}

[hidden], template {
  display: none;
}

a {
  background-color: rgba(0, 0, 0, 0);
}

a:active, a:hover {
  outline: 0;
}

abbr[title] {
  border-bottom: 1px dotted;
}

b, strong {
  font-weight: bold;
}

dfn {
  font-style: italic;
}

h1 {
  margin: .67em 0;
  font-size: 2em;
}

mark {
  color: #000;
  background: #ff0;
}

small {
  font-size: 80%;
}

sub, sup {
  vertical-align: baseline;
  font-size: 75%;
  line-height: 0;
  position: relative;
}

sup {
  top: -.5em;
}

sub {
  bottom: -.25em;
}

img {
  border: 0;
}

svg:not(:root) {
  overflow: hidden;
}

figure {
  margin: 1em 40px;
}

hr {
  box-sizing: content-box;
  height: 0;
}

pre {
  overflow: auto;
}

code, kbd, pre, samp {
  font-family: monospace;
  font-size: 1em;
}

button, input, optgroup, select, textarea {
  color: inherit;
  font: inherit;
  margin: 0;
}

button {
  overflow: visible;
}

button, select {
  text-transform: none;
}

button, html input[type="button"], input[type="reset"] {
  -webkit-appearance: button;
  cursor: pointer;
}

button[disabled], html input[disabled] {
  cursor: default;
}

button::-moz-focus-inner, input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

input {
  line-height: normal;
}

input[type="checkbox"], input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

input[type="search"] {
  -webkit-appearance: none;
}

input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

fieldset {
  border: 1px solid silver;
  margin: 0 2px;
  padding: .35em .625em .75em;
}

legend {
  border: 0;
  padding: 0;
}

textarea {
  overflow: auto;
}

optgroup {
  font-weight: bold;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td, th {
  padding: 0;
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  min-height: 100%;
  color: #333;
  background-color: #fff;
  margin: 0;
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
}

img {
  max-width: 100%;
  vertical-align: middle;
  display: inline-block;
}

.inline-link {
  max-width: 100%;
  display: inline-block;
}

h1, h2, h3, h4, h5, h6 {
  margin-bottom: 10px;
  font-weight: bold;
}

h1 {
  margin-top: 20px;
  font-size: 38px;
  line-height: 44px;
}

h2 {
  margin-top: 20px;
  font-size: 32px;
  line-height: 36px;
}

h3 {
  margin-top: 20px;
  font-size: 24px;
  line-height: 30px;
}

h4 {
  margin-top: 10px;
  font-size: 18px;
  line-height: 24px;
}

h5 {
  margin-top: 10px;
  font-size: 14px;
  line-height: 20px;
}

h6 {
  margin-top: 10px;
  font-size: 12px;
  line-height: 18px;
}

p {
  margin-top: 0;
  margin-bottom: 10px;
}

blockquote {
  border-left: 5px solid #e2e2e2;
  margin: 0 0 10px;
  padding: 10px 20px;
  font-size: 18px;
  line-height: 22px;
}

figure {
  margin: 0 0 10px;
}

figcaption {
  text-align: center;
  margin-top: 5px;
}

ul, ol {
  margin-top: 0;
  margin-bottom: 10px;
  padding-left: 40px;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

button, [type="button"], [type="reset"] {
  cursor: pointer;
  -webkit-appearance: button;
  border: 0;
}

label {
  margin-bottom: 5px;
  font-weight: bold;
  display: block;
}

.container-max {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
}

.container-max:before, .container-max:after {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.container-max:after {
  clear: both;
}

@media screen and (max-width: 991px) {
.container-max {
    max-width: 728px;
  }
}

@media screen and (max-width: 479px) {
.container-max {
    max-width: none;
  }
}

.nav-shell {
  z-index: 1000;
  background: #ddd;
  position: relative;
}

.nav-shell:before, .nav-shell:after {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.nav-shell:after {
  clear: both;
}

.nav-item {
  vertical-align: top;
  color: #222;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  text-decoration: none;
  display: inline-block;
  position: relative;
}

.nav-item.is-current {
  color: #0082f3;
}

.nav-menu-wrap {
  float: right;
  position: relative;
}

[data-menu-open] {
  text-align: center;
  min-width: 200px;
  background: #c8c8c8;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  overflow: visible;
  display: block !important;
}

.menu-toggle {
  float: right;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding: 18px;
  font-size: 24px;
  display: none;
  position: relative;
}

.menu-toggle:focus {
  outline: 0;
}

@media screen and (max-width: 767px) {
.nav-shell .nav-menu-wrap {
    display: none;
  }

.nav-shell .menu-toggle {
    display: block;
  }
}

:root {
  --gold: #fed31a;
  --white-smoke: #f4f5f5;
}

h3 {
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
}

h4 {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: 400;
  line-height: 24px;
}

p {
  margin-bottom: 10px;
  font-size: 16px;
  line-height: 120%;
}

strong {
  font-weight: 400;
}

.logo {
  margin-left: 24px;
}

.body {
  color: #000;
  font-family: 'Manrope', sans-serif;
  font-size: 16px;
  line-height: 110%;
}

.container {
  background-color: #f2f1f0;
  border-radius: 16px;
  align-items: center;
  margin-left: 0;
  margin-right: 0;
  display: flex;
  overflow: hidden;
  box-shadow: 0 14px 44px rgba(0, 0, 0, .05);
}

.nav-link {
  border-radius: 12px;
  padding: 16px 24px;
  transition: all .2s cubic-bezier(.645, .045, .135, 1.001);
}

.nav-link:hover {
  background-color: #dfdfdf;
}

.nav-link.is-current {
  color: #050505;
}

.nav-menu {
  grid-column-gap: 8px;
  align-items: center;
  margin-left: 40px;
  margin-right: 8px;
  padding-top: 8px;
  padding-bottom: 8px;
  display: flex;
}

.nav-download {
  background-color: var(--gold);
  opacity: 1;
  color: #000;
  text-align: center;
  border-radius: 12px;
  align-self: center;
  margin-left: 8px;
  padding: 16px 24px;
  font-size: 16px;
  font-weight: 500;
  transition: box-shadow .2s cubic-bezier(.77, 0, .175, 1);
  display: block;
}

.nav-download:hover {
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .15);
}

.nav-download.is-current {
  color: #000;
}

.navbar {
  background-color: rgba(0, 0, 0, 0);
  justify-content: center;
  align-items: center;
  padding-top: 48px;
  display: flex;
}

.nav-logo-img {
  height: 40px;
}

.accent-span {
  font-style: italic;
  font-weight: 300;
}

.heading {
  text-align: center;
  font-size: 80px;
  font-weight: 500;
  line-height: 90%;
}

.tagline {
  margin-top: 130px;
  margin-bottom: 120px;
}

.h2 {
  width: 80%;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  font-weight: 300;
  line-height: 122%;
}

.double_container {
  width: 100%;
  max-width: 1600px;
  grid-column-gap: 32px;
  grid-row-gap: 48px;
  mix-blend-mode: multiply;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  margin-bottom: 32px;
  display: flex;
}

.card_container {
  width: 100%;
  height: 712px;
  max-width: 640px;
  min-width: 440px;
  background-color: var(--white-smoke);
  border-radius: 40px;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding-top: 40px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.h3 {
  text-align: center;
  margin-top: 16px;
  margin-bottom: 0;
  font-size: 28px;
  font-weight: 500;
  line-height: 110%;
}

.card-head {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.text-block {
  text-align: center;
  font-size: 48px;
  font-weight: 400;
  line-height: 112%;
}

.text-block.subtext {
  margin-top: 8px;
  margin-bottom: 24px;
  font-size: 20px;
  font-weight: 300;
  line-height: 122%;
}

.text-block.subtext.alt {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 16px;
}

.footer_items {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  padding-bottom: 32px;
  padding-left: 64px;
  padding-right: 64px;
  display: flex;
}

.footer_items.center {
  justify-content: center;
}

.socials {
  grid-column-gap: 32px;
  display: flex;
}

.footer_form_container {
  height: 90%;
  justify-content: center;
  align-items: center;
  display: flex;
}

.footer_form {
  max-width: 500px;
  flex-direction: column;
  justify-content: center;
  display: flex;
}

.section_head {
  z-index: 1;
  background-color: #fff;
  background-image: none;
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: 100%;
  border-radius: 0 0 32px 32px;
  flex-direction: column;
  align-items: center;
  padding-bottom: 64px;
  padding-left: 64px;
  padding-right: 64px;
  display: flex;
  position: relative;
  box-shadow: 0 0 200px -60px rgba(0, 0, 0, .1);
}

.section_footer {
  height: 100vh;
  background-color: #fff;
  background-image: none;
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: 100%;
  background-attachment: scroll;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  display: flex;
  position: fixed;
  top: auto;
  bottom: 0%;
  left: 0%;
  right: 0%;
}

.footer-trigger {
  height: 75vh;
}

.phone-top {
  z-index: 1;
  position: absolute;
  top: auto;
  bottom: 0%;
  left: auto;
  right: auto;
}

.card-media-wide {
  width: 100%;
  justify-content: center;
  align-self: center;
  display: flex;
  position: relative;
}

.card-media {
  z-index: 1;
  width: 100%;
  justify-content: center;
  display: flex;
  position: relative;
}

.footer-inner {
  height: 80vh;
  flex-direction: column;
  justify-content: center;
  display: flex;
}

.footer-logo-img {
  width: auto;
  max-height: 48px;
}

.twitter {
  display: none;
}

.main_container {
  margin-left: 32px;
  margin-right: 32px;
  padding-top: 32px;
  padding-bottom: 64px;
}

.rich-text-block {
  font-family: 'Manrope', sans-serif;
  font-weight: 300;
}

.legal-row {
  grid-column-gap: 8px;
  opacity: .6;
  display: flex;
}

.legal-link {
  color: #000;
  text-decoration: none;
}

.legal-text {
  font-family: 'Manrope', sans-serif;
  font-size: 16px;
}

.store-badge {
  width: 164px;
  align-self: center;
}

.store-link {
  align-self: center;
}

@media screen and (max-width: 991px) {
.heading {
    font-size: 60px;
  }

.h2 {
    font-size: 28px;
  }

.double_container {
    flex-wrap: wrap;
  }

.h3 {
    font-size: 24px;
    line-height: 110%;
  }

.section_footer {
    background-position: 50% 0;
    background-size: cover;
  }
}

@media screen and (max-width: 767px) {
.logo {
    flex: 1;
  }

.container {
    box-shadow: none;
    background-color: rgba(0, 0, 0, 0);
    border-radius: 0;
    flex: 1;
    justify-content: space-between;
  }

.nav-link {
    text-align: center;
    margin: 8px 24px;
  }

.nav-menu {
    background-color: #f2f1f0;
    border-radius: 10px;
    margin-top: 8px;
    margin-left: 0;
    margin-right: 0;
  }

.nav-download {
    text-align: center;
    margin-bottom: 8px;
    margin-left: 24px;
    margin-right: 24px;
  }

.navbar {
    align-self: stretch;
    display: block;
  }

.heading {
    font-size: 48px;
  }

.h2 {
    width: 100%;
  }

.text-block {
    width: 100%;
    align-self: center;
    font-size: 40px;
  }

.text-block.subtext {
    width: 100%;
    align-self: center;
  }

.text-block.subtext.alt {
    width: auto;
  }

.footer_items {
    padding-left: 16px;
    padding-right: 16px;
  }

.socials {
    grid-column-gap: 16px;
  }

.footer_form {
    width: 100%;
    padding-left: 16px;
    padding-right: 16px;
  }

.section_head {
    border-radius: 0 0 24px 24px;
    padding-left: 24px;
    padding-right: 24px;
    display: block;
  }

.phone-top.alt {
    display: none;
  }

.footer-logo-img {
    max-height: 32px;
  }

.menu-button {
    background-color: #f2f1f0;
    border-radius: 10px;
    flex: none;
    display: flex;
  }

.legal-link {
    flex: 1;
  }
}

@media screen and (max-width: 479px) {
.card_container {
    height: auto;
    min-width: auto;
    grid-row-gap: 16px;
  }

.phone-base {
    max-width: 88%;
  }

.text-block {
    font-size: 32px;
  }

.text-block.subtext {
    font-size: 20px;
  }

.text-block.subtext.alt.dot {
    display: none;
  }

.footer_items {
    justify-content: center;
  }

.footer_form {
    width: 100%;
  }

.footer-brand {
    order: 1;
  }

.legal-row {
    flex-wrap: wrap;
    justify-content: center;
  }
}
/* --- self-hosted fonts (Manrope body + Unna serif headings) --- */
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url('/landing/assets/manrope-latin-ext.woff2') format('woff2');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:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url('/landing/assets/manrope-latin.woff2') format('woff2');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:'Unna';font-style:normal;font-weight:400;font-display:swap;src:url('/landing/assets/unna-400-latin-ext.woff2') format('woff2');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:'Unna';font-style:normal;font-weight:400;font-display:swap;src:url('/landing/assets/unna-400-latin.woff2') format('woff2');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:'Unna';font-style:normal;font-weight:700;font-display:swap;src:url('/landing/assets/unna-700-latin-ext.woff2') format('woff2');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:'Unna';font-style:normal;font-weight:700;font-display:swap;src:url('/landing/assets/unna-700-latin.woff2') format('woff2');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;}

/* --- hero + footer background: green-on-linen glow (CSS, replaces the 2.2MB
   PNG). Blob layers sized to ~one viewport at the top; linen base below. --- */
.section_head, .section_footer {
  background-color: #f7f4e9;
  background-image:
    radial-gradient(60% 50% at 16% 8%, rgba(8, 127, 91, 0.30), transparent 70%),
    radial-gradient(55% 48% at 86% 4%, rgba(139, 190, 155, 0.55), transparent 64%),
    radial-gradient(62% 52% at 72% 40%, rgba(8, 127, 91, 0.16), transparent 72%),
    radial-gradient(52% 46% at 4% 46%, rgba(233, 240, 230, 0.90), transparent 64%);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 100% 100vh;
}
/* --- typography: serif (Unna) display + sans (Manrope) body, like the app --- */
.heading, .h3, .text-block, .logo-name { font-family: 'Unna', serif; }
.text-block.subtext { font-family: 'Manrope', sans-serif; }
/* --- load sequence: CSS only.
   The reference hid the whole document (body{opacity:0}) and waited for its JS
   to reveal it, which put the largest text on the page behind script execution
   — the browser had nothing to paint until DOMContentLoaded, and LCP was
   measured from there. These animations start with the first frame instead.
   The hero deliberately animates transform ONLY: an element at opacity 0 has
   not been painted as far as LCP is concerned, so fading the headline in would
   have given back most of what this change buys. --- */
.navbar { animation: v-drop .8s ease .4s both; }
.tagline { animation: v-rise .8s cubic-bezier(.42, 0, .58, 1) .2s both; }
.double_container { animation: v-pop .8s cubic-bezier(.645, .045, .355, 1) .4s both; }
@keyframes v-drop {
  from { opacity: 0; transform: translate3d(0, -40px, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes v-rise {
  from { transform: translate3d(0, 60px, 0); }
  to { transform: none; }
}
@keyframes v-pop {
  from { opacity: 0; transform: translate3d(0, 60px, 0) scale3d(.94, .94, 1); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .navbar, .tagline, .double_container { animation: none; }
}
/* --- continuous-animation targets (footer reveal) --- */
.footer_form, .footer_items, .section_head { will-change: transform; }
/* --- the five feature cards: ONE horizontal scroll-snap strip instead of the
   reference's 2x2 grid, so every frame shows whole instead of being cut off by
   the card bottom. Cards are narrower than a fifth of the strip on purpose: the
   half-visible next card is the only affordance that says "this scrolls". --- */
.double_container {
  flex-wrap: nowrap;
  justify-content: center;
  justify-content: safe center; /* progressive: keeps the first card reachable when it overflows */
  align-items: stretch;
  gap: 24px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  /* Matches the padding above: without it a snap would pull the first card
     flush against the window edge and eat the inset it starts with. */
  scroll-padding-left: 64px;
  scrollbar-width: none;
  /* Run off BOTH edges of the window instead of stopping at the section's
     gutters — a strip that ends in dead space doesn't read as scrollable, and
     a card that vanishes 64px short of the edge on the way past reads as a
     bug. The negative margins need width:auto (a flex item with width:100%
     would just drop them) and the matching padding puts the gutter back as
     the strip's own inset: the first card still starts where the copy above
     it does, it just scrolls out to the window edge instead of to the gutter. */
  align-self: stretch;
  width: auto;
  max-width: none;
  margin-left: -64px;
  margin-right: -64px;
  padding: 4px 64px;
}
@media screen and (max-width: 767px) {
  .double_container {
    margin-left: -24px;
    margin-right: -24px;
    padding-left: 24px;
    padding-right: 24px;
    scroll-padding-left: 24px;
  }
}
.double_container::-webkit-scrollbar { display: none; }
.double_container:focus-visible { outline: 2px solid #087f5b; outline-offset: 2px; border-radius: 44px; }
/* Pinned scroll — anim.js adds .is-pinned (and the pin's height) only where it
   applies; without it these wrappers are inert and the strip behaves as before.
   A mouse has no horizontal scroll gesture and browsers do NOT redirect a
   vertical wheel into a horizontal-only scroller (measured, twice), so pinning
   the section and letting the PAGE scroll drive the strip is what gets a mouse
   user to the last card. Snapping is off while pinned: it fights the
   scroll-driven scrollLeft. */
.strip-pin { align-self: stretch; width: 100%; }
.strip-pin.is-pinned .strip-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column; /* cross axis = horizontal, so the strip still stretches wide */
  justify-content: center;
}
.strip-pin.is-pinned .double_container { scroll-snap-type: none; }
/* The card is the phone and nothing else: no tint, no border, no box. The
   bezel is the only edge, which is why the artwork is baked INTO it — the
   store frame's linen and the page's are the same colour, so a card drawn
   around it would have had to invent an edge that isn't in the design.
   The reference's multiply blend goes with the tints it used to darken. */
.double_container { mix-blend-mode: normal; }
.card_container {
  /* The frame is 1284x2778, so the card's width sets its height: 340px lands a
     whole card on a 900px-tall laptop screen with the section's gutters. */
  flex: 0 0 min(340px, 84vw);
  width: auto;
  min-width: 0;
  max-width: none;
  height: auto;
  padding-top: 0;
  padding-bottom: 0;
  background-color: transparent;
  border: 0;
  scroll-snap-align: start;
}
/* --- card artwork: the phone, shown whole and full width. Its corners are
   transparent, so the page's ground is what shows around the bezel. --- */
.card-shot { display: block; width: 100%; height: auto; }
/* --- store badges (App Store + Google Play), under the hero and in the footer --- */
.store-badges { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px; }
/* The pair is 345px wide at 52px tall, and a 360px phone offers 312px inside
   the section's 24px gutters — so they wrapped onto two rows. Height scales
   with the viewport instead of stepping at a breakpoint, because the width
   they need is a straight multiple of it (the two badges sum to 6.37x their
   height). Floor 40px: Apple's marketing guidelines set that as the minimum
   for the App Store badge, and at a 320px viewport the pair still fits inside
   it. Ceiling 52px, reached at ~416px, so nothing above a phone changes.
   flex-wrap stays as the backstop for anything narrower than 320. */
.store-badge { height: clamp(40px, 12.5vw, 52px); width: auto; display: block; }
.tagline .store-badges { margin-top: 36px; }
.footer_form .store-badges { margin-top: 4px; }
/* --- footer bottom-left: Privacy · Terms links --- */
.footer-legal { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; }
.footer-legal-link { color: #26231c; text-decoration: none; opacity: 0.7; }
.footer-legal-link:hover { opacity: 1; }
.footer-legal-dot { opacity: 0.4; }
/* --- footer social icons (Phosphor SVG) --- */
.socials { align-items: center; }
.social-link { display: inline-flex; color: #100f0d; transition: opacity .2s; }
.social-link:hover { opacity: 0.6; }
.social-link svg { width: 26px; height: 26px; display: block; }
/* --- header: logo only, pinned to the exact mobile spot (48px from the
   left edge, 48px from the top) at EVERY viewport width. The section's
   horizontal padding is 64px on desktop and 24px on mobile, so the logo
   margin compensates to keep 48px total. --- */
.navbar, .container { display: block; }
/* section_head is a centering flex column, so force the header full-width or
   it shrinks to the logo and centers. */
.navbar { align-self: stretch; width: 100%; }
/* was a clipped pill; now transparent + overflow visible so the logo's
   negative margin isn't cut off on desktop. */
.container { max-width: none; background: transparent; border-radius: 0; box-shadow: none; overflow: visible; }
.logo { margin-left: -16px; } /* 64px section padding - 16 = 48px from viewport */
.logo { display: inline-flex; align-items: center; gap: 11px; color: #26231c; }
.logo-mark { height: 38px; width: auto; display: block; }
.logo-name { font-size: 40px; font-weight: 700; line-height: 1; }
@media screen and (max-width: 767px) {
  .logo { margin-left: 24px; } /* 24px section padding + 24 = 48px from viewport */
}