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 --- */
body { transition: opacity .4s ease; }
body.anim-in { opacity: 1 !important; }
body.anim-in .navbar {
  transition: opacity .8s ease .4s, transform .8s ease .4s;
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) scale3d(1, 1, 1) !important;
}
body.anim-in .tagline {
  transition: opacity .8s cubic-bezier(.645, .045, .355, 1) .2s, transform .8s cubic-bezier(.42, 0, .58, 1) .2s;
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
}
body.anim-in .double_container {
  transition: opacity .8s cubic-bezier(.645, .045, .355, 1) .4s, transform .8s ease .4s;
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) scale3d(1, 1, 1) !important;
}
/* --- continuous-animation targets (footer reveal) --- */
.footer_form, .footer_items, .section_head { will-change: transform; }
/* --- the four feature cards: ONE horizontal scroll-snap strip instead of the
   reference's 2x2 grid, so every phone shows whole instead of being cut off by
   the card bottom. Cards are wider than a quarter 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;
  scroll-padding-left: 0;
  scrollbar-width: none;
  /* Run off the right edge of the window instead of stopping at the section's
     gutter — a strip that ends in dead space doesn't read as scrollable. The
     negative margin needs width:auto (a flex item with width:100% would just
     drop the margin) and the matching padding is the inset at scroll end. */
  align-self: stretch;
  width: auto;
  max-width: none;
  margin-right: -64px;
  padding: 4px 64px 4px 0;
}
@media screen and (max-width: 767px) {
  .double_container { margin-right: -24px; padding-right: 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; }
/* Card tints = the four App Store frame backgrounds, so the landing and the
   store listing read as one set. The reference's multiply blend has to go: it
   would darken every tint and none of them would match Figma any more. */
.double_container { mix-blend-mode: normal; }
.card_container:nth-child(1) { background-color: #ccd5ae; }
.card_container:nth-child(2) { background-color: #dbe1bc; }
.card_container:nth-child(3) { background-color: #e9edc9; }
.card_container:nth-child(4) { background-color: #f4f4d5; }
.card_container {
  /* Narrow card + wide phone: the phone stays the size it was at 420/66%, but
     the card loses the dead side margins AND ~140px of height, so a whole card
     still fits on a 900px-tall laptop screen. */
  flex: 0 0 min(340px, 84vw);
  width: auto;
  min-width: 0;
  max-width: none;
  height: auto;
  padding-bottom: 28px;
  scroll-snap-align: start;
}
/* --- card copy: title + the store frame's subtitle under it --- */
/* #5c5745, not the page's --muted: on the darkest card tint (#ccd5ae) --muted
   only reaches 3.6:1, this one clears AA at 4.7:1. */
.card-sub { max-width: 92%; margin: 10px auto 0; text-align: center; text-wrap: balance; font-size: 16px; font-weight: 300; line-height: 138%; color: #5c5745; }
/* --- card phone: the iPhone mockup below the copy, shown in full --- */
.card-shot { display: block; width: 86%; height: auto; margin-top: 20px; }
/* the cards lead with the title now, so drop the h3's icon-gap top margin */
.card_container .h3 { margin-top: 0; }
/* --- 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; }
.store-badge { height: 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 */
}