/* Landing-only styles: the journal palette stays shared with the globe app. */
.landing-page {
  --landing-green: #3f6650;
  --landing-rust: #a64f37;
  --landing-rule: #cec4af;
  color: #25362e;
}

.landing-container {
  width: min(1200px, calc(100% - 112px));
  margin-inline: auto;
}

.landing-skip {
  position: fixed;
  z-index: 50;
  top: 12px;
  left: 12px;
  padding: 12px 18px;
  transform: translateY(-160%);
  background: #fff9eb;
  border: 2px solid #25362e;
}

.landing-skip:focus { transform: translateY(0); }

.landing-nav {
  max-width: 1312px;
  padding: 26px 56px;
}

.landing-nav .brand {
  gap: 10px;
  color: #25362e;
  font-size: 2.1rem;
  letter-spacing: -.065em;
}

.landing-nav .brand-logo,
.landing-footer .brand-logo { width: 44px; height: 44px; }
.landing-nav nav { gap: 28px; }
.landing-nav-links { display: flex; align-items: center; gap: 28px; }

.landing-nav .landing-nav-link {
  color: #4f5c51;
  text-decoration: none;
  font-size: .88rem;
  font-weight: 550;
  white-space: nowrap;
}

.landing-nav .landing-nav-link:hover { text-decoration: underline; text-underline-offset: 5px; }

/* Keep the globe page's shared button appearance; only size it for this layout. */
.landing-page .button {
  min-height: 52px;
  font-size: .86rem;
}

.landing-nav .button { min-height: 46px; padding-inline: 18px; font-size: .84rem; }
.landing-google { font: 700 1.08rem/1 Arial, sans-serif; }

.landing-hero {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  align-items: center;
  gap: 52px;
  padding-block: 42px 72px;
}

.landing-hero-copy { min-width: 0; }

.landing-hero h1 {
  margin: 0 0 26px;
  font: 400 clamp(3rem, 5.6vw, 5.2rem)/1.02 Georgia, "Times New Roman", serif;
  letter-spacing: -.065em;
}

.landing-hero h1 em {
  position: relative;
  color: var(--landing-green);
  font-weight: 400;
}

.landing-hero h1 em::after {
  content: "";
  position: absolute;
  bottom: -.04em;
  left: 0;
  width: 100%;
  height: .06em;
  border-radius: 50%;
  background: #c0b573;
  transform: rotate(-3deg);
}

.landing-lead {
  max-width: 370px;
  margin: 0 0 29px;
  color: #596357;
  font-size: .98rem;
  line-height: 1.85;
}

.landing-reassurance {
  margin: 14px 0 0;
  color: #606b5e;
  font-size: .7rem;
  line-height: 1.6;
}

.landing-reassurance > span { padding-inline: 6px; color: #a19477; }

/* The actual shared viewer is isolated in a landing-only frame. */
.landing-featured { min-width: 0; }
.landing-featured-viewer { position: relative; height: clamp(500px, 46vw, 600px); overflow: hidden; border: 1px solid #b8ac92; border-radius: 8px; background: #dce3d5; box-shadow: 4px 5px 0 #d6cbb4; }
.landing-globe-frame { display: block; width: 100%; height: 100%; border: 0; }
.landing-globe-unavailable { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 28px; text-align: center; }
.landing-globe-unavailable > p:first-child { margin: 0 0 14px; color: #354731; font: 1.8rem/1.2 Georgia, serif; letter-spacing: -.04em; }
.landing-globe-unavailable > p { margin: 0; color: #596357; font-size: .9rem; line-height: 1.7; }
.landing-globe-unavailable > div { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 24px; margin-top: 26px; }

.landing-walkthrough { padding-block: 72px 82px; border-top: 1px solid var(--landing-rule); scroll-margin-top: 30px; }
.landing-section-heading { display: grid; grid-template-columns: 1.2fr 1fr; align-items: end; column-gap: 100px; margin-bottom: 42px; }
.landing-section-heading h2,
.landing-plan h2,
.landing-final h2 { margin: 0; font: 400 clamp(2.2rem, 3.4vw, 3.2rem)/1.12 Georgia, serif; letter-spacing: -.055em; }
.landing-section-heading > p:last-child { max-width: 330px; margin: 0 0 3px; color: #65705f; font-size: .86rem; line-height: 1.8; }
.landing-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 38px; }
.landing-step { min-width: 0; }
.step-illustration { display: flex; flex-direction: column; justify-content: center; height: 190px; margin-bottom: 26px; padding: 25px; background: #e7e8d9; border-radius: 3px; overflow: hidden; }
.step-search-label { margin-bottom: 12px; color: #68705e; font: italic .78rem Georgia, serif; }
.step-search-field { display: flex; align-items: center; gap: 10px; padding: 10px; background: #fffaf0; border: 1px solid #c7c7ae; border-radius: 3px; color: #45573f; font-size: .72rem; }
.step-search-field svg { width: 15px; height: 15px; stroke: #697759; stroke-width: 1.6; }
.step-search-field > span { margin-left: auto; color: #8d967d; }
.step-search-result { display: flex; align-items: center; gap: 11px; padding: 13px 10px 0; color: #43583e; font-size: .7rem; }
.step-search-result svg { width: 17px; height: 23px; stroke: #597648; stroke-width: 1.5; }
.step-search-result small { display: block; margin-top: 3px; color: #75816d; font-size: .58rem; }
.step-search-result b { margin-left: auto; color: #6c784c; font-weight: 500; font-size: .65rem; }
.step-memory { position: relative; flex-direction: row; align-items: center; background: #e8ddc9; }
.step-memory > img { position: absolute; left: 21px; top: 31px; width: 49%; height: 123px; padding: 5px 5px 16px; background: #fffaf0; object-fit: cover; transform: rotate(-7deg); box-shadow: 1px 2px 3px #574a2a1a; }
.step-memory-note { position: absolute; right: 18px; top: 42px; width: 47%; padding: 15px 12px; background: #fbf3df; transform: rotate(4deg); box-shadow: 1px 2px 3px #574a2a1a; }
.step-memory-note > span:first-child { color: #a16d3c; font: .52rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.step-memory-note p { margin: 10px 0 13px; color: #665b40; font: italic 1.05rem/1.2 Georgia, serif; }
.step-memory-stars { color: #92782d; font-size: .72rem; letter-spacing: .08em; }
.step-memory-stars i { color: #cdc3a6; font-style: normal; }
.step-collection { gap: 8px; padding: 23px 18px; background: #e0e5d8; }
.step-collection > div { display: flex; align-items: center; gap: 9px; padding: 12px 10px; background: #f8f6e9; border: 1px solid #c3c9b6; border-radius: 3px; color: #42533b; font-size: .67rem; }
.collection-dot { flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; background: #3d9b7a; }
.collection-dot-purple { background: #a77bd1; }
.step-collection small { display: block; margin-top: 4px; color: #7a826f; font-size: .55rem; }
.step-collection b { margin-left: auto; color: #92782d; font-size: .56rem; font-weight: 400; }
.step-collection-caption { margin-top: 3px; text-align: center; color: #68775b; font: italic .7rem Georgia, serif; }
.step-number { margin: 0 0 10px; color: #9e593e; font: .57rem/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .035em; }
.landing-step h3 { margin: 0 0 12px; color: #2e3e30; font: 400 1.35rem/1.2 Georgia, serif; letter-spacing: -.035em; }
.landing-step > p:last-child { max-width: 320px; margin: 0; color: #65705f; font-size: .8rem; line-height: 1.85; }

.landing-details { display: grid; grid-template-columns: 1fr 1.15fr; gap: 100px; align-items: start; padding-block: 70px 90px; border-top: 1px solid var(--landing-rule); scroll-margin-top: 30px; }
.landing-plan > p { max-width: 330px; margin: 20px 0 24px; color: #65705f; font-size: .85rem; line-height: 1.8; }
.landing-plan-limits { max-width: 365px; margin: 0 0 20px; }
.landing-plan-limits > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-block: 12px; border-bottom: 1px solid #d7cfbc; }
.landing-plan-limits dt { color: #65705f; font-size: .75rem; }
.landing-plan-limits dd { margin: 0; color: #354d35; font: 1.4rem Georgia, serif; white-space: nowrap; }
.landing-plan-limits dd > span { margin-left: 3px; color: #65705f; font: .65rem "Avenir Next", Avenir, "Segoe UI", sans-serif; }
.landing-free-label { color: #61704f; font-size: .65rem; }
.landing-faq { padding-top: 5px; }
.landing-faq details { border-bottom: 1px solid var(--landing-rule); }
.landing-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 72px; padding-block: 18px; color: #354731; font: 1.12rem/1.4 Georgia, serif; cursor: pointer; list-style: none; }
.landing-faq summary::-webkit-details-marker { display: none; }
.landing-faq summary::after { content: "+"; flex-shrink: 0; color: #6d795d; font: 300 1.25rem/1 "Avenir Next", sans-serif; }
.landing-faq details[open] summary::after { content: "−"; }
.landing-faq details > div { padding: 0 28px 16px 0; }
.landing-faq p { margin: 0 0 12px; color: #65705f; font-size: .78rem; line-height: 1.85; }
.landing-faq a { color: #465e48; text-decoration: underline; text-underline-offset: 3px; }
.landing-faq summary:focus-visible { outline: 2px solid var(--landing-rust); outline-offset: 3px; }

.landing-final { position: relative; padding: 65px 0 61px; border-top: 1px solid #c6c9af; border-bottom: 1px solid #c6c9af; background: #e1e5d4; text-align: center; }
.landing-final-mark { display: block; margin-bottom: 15px; color: #7c8965; font: 2rem/1 Georgia, serif; }
.landing-final h2 { font-size: clamp(2.7rem, 4vw, 3.7rem); }
.landing-final .landing-container > p:not(.landing-reassurance) { margin: 19px 0 25px; color: #66735b; font-size: .87rem; }
.landing-final .landing-reassurance { margin-top: 16px; font-size: .64rem; }
.landing-footer { max-width: 1312px; padding: 36px 56px; border: 0; color: #6b7364; font: .78rem/1.5 "Avenir Next", Avenir, "Segoe UI", sans-serif; }
.landing-footer > div { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; }
.landing-footer .brand { gap: 10px; color: #354731; font-size: 2.1rem; font-weight: 600; text-decoration: none; }
.landing-footer nav { display: flex; align-items: center; gap: 22px; }
.landing-footer nav a { font-size: .8rem; text-decoration: none; }
.landing-footer nav a:hover { text-decoration: underline; text-underline-offset: 4px; }

.landing-page [hidden] { display: none !important; }

@media (min-width: 1450px) {
  .landing-hero { padding-top: 58px; }
}

@media (max-width: 1100px) {
  .landing-container { width: calc(100% - 72px); }
  .landing-nav, .landing-footer { padding-inline: 36px; }
  .landing-hero { gap: 32px; }
  .landing-section-heading { column-gap: 50px; }
  .landing-steps { gap: 25px; }
  .step-illustration { padding-inline: 16px; }
  .step-collection { padding-inline: 10px; }
  .step-collection > div { gap: 6px; padding-inline: 7px; font-size: .6rem; }
  .step-collection b { font-size: .48rem; }
  .landing-details { gap: 65px; }
  .landing-footer { flex-wrap: wrap; gap: 24px; }
  .landing-footer > div { width: 100%; }
}

@media (max-width: 1000px) {
  .landing-nav { position: relative; flex-wrap: wrap; gap: 12px; }
  .landing-nav nav { width: 100%; margin: 0; }
  .landing-nav-links { justify-content: space-between; width: 100%; gap: 18px; }
  .landing-nav .landing-nav-link { display: inline-flex; align-items: center; min-height: 44px; }
  .landing-nav .button { position: absolute; top: 26px; right: 36px; }
}

@media (max-width: 767px) {
  .landing-container { width: calc(100% - 44px); }
  .landing-nav { padding: 20px 22px; }
  .landing-nav .brand { font-size: 1.8rem; }
  .landing-nav .brand-logo,
  .landing-footer .brand-logo { width: 38px; height: 38px; }
  .landing-nav nav { gap: 0; }
  .landing-nav .landing-nav-link { font-size: .76rem; }
  .landing-nav .button { top: 20px; right: 22px; min-height: 44px; padding-inline: 12px; font-size: .7rem; gap: 9px; }
  .landing-hero { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-block: 30px 46px; }
  .landing-featured-viewer { height: 500px; min-height: 430px; max-height: 75svh; border-radius: 6px; box-shadow: 3px 4px 0 #d6cbb4; }
  .landing-hero h1 { margin-bottom: 21px; font-size: clamp(2.95rem, 10.5vw, 4.8rem); line-height: 1.02; letter-spacing: -.06em; }
  .landing-lead { max-width: 460px; margin-bottom: 23px; font-size: .9rem; line-height: 1.8; }
  .landing-hero-actions { display: inline-flex; flex-direction: column; align-items: flex-start; }
  .landing-page .button { min-height: 50px; font-size: .8rem; }
  .landing-reassurance { font-size: .64rem; margin-top: 12px; }
  .landing-walkthrough { padding-block: 44px 48px; }
  .landing-section-heading { display: block; margin-bottom: 29px; }
  .landing-section-heading h2 { font-size: clamp(2rem, 7vw, 2.8rem); }
  .landing-section-heading > p:last-child { max-width: 450px; margin-top: 17px; font-size: .82rem; }
  .landing-steps { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .step-illustration { height: 183px; margin-bottom: 20px; padding-inline: 27px; }
  .step-memory > img { left: 30px; width: 47%; }
  .step-memory-note { right: 27px; width: 43%; }
  .step-collection { padding-inline: 24px; }
  .step-collection > div { padding: 13px; gap: 10px; font-size: .72rem; }
  .step-collection small { font-size: .6rem; }
  .step-collection b { font-size: .64rem; }
  .landing-step h3 { font-size: 1.35rem; margin-bottom: 10px; }
  .landing-step > p:last-child { max-width: 460px; font-size: .82rem; line-height: 1.8; }
  .step-number { font-size: .56rem; }
  .landing-details { grid-template-columns: minmax(0, 1fr); gap: 30px; padding-block: 45px 49px; }
  .landing-plan h2 { font-size: 2.4rem; }
  .landing-plan > p { max-width: 450px; font-size: .84rem; }
  .landing-plan-limits { max-width: none; }
  .landing-plan-limits dt { font-size: .76rem; }
  .landing-free-label { font-size: .68rem; }
  .landing-faq summary { min-height: 67px; font-size: 1.1rem; }
  .landing-faq p { font-size: .8rem; }
  .landing-final { padding-block: 44px 42px; }
  .landing-final h2 { font-size: 2.8rem; }
  .landing-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 22px 15px; padding: 30px 22px; font-size: .72rem; }
  .landing-footer > div { width: 100%; }
  .landing-footer .brand { font-size: 1.8rem; }
  .landing-footer nav { gap: 20px; }
  .landing-footer nav a { font-size: .76rem; }
}

@media (max-width: 360px) {
  .landing-nav .brand { gap: 7px; font-size: 1.6rem; }
  .landing-nav .brand-logo { width: 32px; height: 32px; }
  .landing-nav-links { gap: 10px; }
  .landing-nav .landing-nav-link { font-size: .69rem; }
  .landing-nav .button { font-size: .64rem; padding-inline: 10px; }
  .landing-hero h1 { font-size: 2.8rem; }
  .landing-footer nav { gap: 15px; }
  .step-collection { padding-inline: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .landing-page *, .landing-page *::before, .landing-page *::after,
  .landing-nav .button { transition: none !important; scroll-behavior: auto !important; }
}