/* Shared alignment: 10% gutters on wide screens, 6% on laptops. */
.landing {
  --landing-width: 80%;
  --landing-gap: clamp(36px, 4vw, 160px);
  background: #f7f9fc;
}
.landing-header, .hero, .principles, .how-inner, .privacy-line, .landing-footer {
  width: var(--landing-width);
  margin-inline: auto;
}
.landing-header {
  padding-block: clamp(24px, 1.6vw, 54px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.landing .brand { font-size: clamp(1rem, .65vw, 1.5rem); }
.landing .brand img { width: clamp(44px, 2.3vw, 80px); height: clamp(44px, 2.3vw, 80px); }
.landing-header nav { display: flex; align-items: center; gap: 32px; font-size: clamp(.9rem, .6vw, 1.375rem); }
.landing-header nav > a:not(.btn) { text-decoration: none; }
.landing-header nav > a:hover { text-decoration: underline; text-underline-offset: 4px; }
.landing .btn { font-size: clamp(.95rem, .6vw, 1.375rem); padding: .8em 1.3em; }
.landing .eyebrow { font-size: clamp(.76rem, .48vw, 1.125rem); margin-bottom: 1.5em; }
.hero {
  padding-block: clamp(44px, 3.5vw, 134px) clamp(56px, 4vw, 154px);
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: var(--landing-gap);
  align-items: center;
}
.hero h1 {
  font-size: clamp(2.6rem, 3.5vw, 7.5rem);
  line-height: 1.08;
  margin-bottom: .4em;
  letter-spacing: -.045em;
}
.hero .intro {
  font-size: clamp(1.125rem, .9vw, 2rem);
  line-height: 1.65;
  max-width: 58ch;
  margin-bottom: 1.4em;
}
.expedition-definition { max-width: 62ch; margin-bottom: clamp(26px, 1.4vw, 52px); font-size: clamp(1rem, .7vw, 1.625rem); }
.expedition-definition h2 { font-size: 1em; letter-spacing: -.015em; margin-bottom: .5em; }
.expedition-definition p { margin: 0; line-height: 1.65; }
.landing .micro { font-size: clamp(.8rem, .48vw, 1.125rem); }
.hero-art {
  background: var(--navy);
  border-radius: 12px;
  padding: clamp(20px, 1.6vw, 60px);
  box-shadow: 0 20px 60px #0a1c3514;
  min-width: 0;
}
.hero-art-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  color: #b9c9dc;
  font-size: clamp(.75rem, .58vw, 1.375rem);
  margin-bottom: clamp(20px, 1.4vw, 50px);
}
.hero-art-header span:last-child { color: #e5bb69; }
.desktop-preview {
  aspect-ratio: 1.64;
  background: #edf2f7;
  border-radius: 5px;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.preview-document {
  padding: clamp(20px, 2.2vw, 80px);
  background: #fff;
  width: 76%;
  box-shadow: 0 5px 20px #142c4410;
}
.preview-document .doc-meta { font-size: clamp(.55rem, .5vw, 1.2rem); color: #718195; letter-spacing: .12em; text-transform: uppercase; }
.preview-document h3 { font-size: clamp(1.1rem, 1.6vw, 3.8rem); font-weight: 500; margin: .7em 0; }
.preview-document .document-rule { width: 12%; height: 2px; background: #c5a164; margin-block: 1.2em; }
.document-lines { display: grid; gap: clamp(7px, .55vw, 20px); }
.document-lines span { display: block; height: clamp(3px, .15vw, 6px); background: #e7ecf1; }
.document-lines span:nth-child(2) { width: 90%; }
.document-lines span:nth-child(3) { width: 68%; }
.perimeter { position: absolute; inset: 2px; width: calc(100% - 4px); height: calc(100% - 4px); pointer-events: none; overflow: visible; }
.perimeter rect { fill: none; }
.perimeter .base { vector-effect: non-scaling-stroke; stroke: #d8efff; stroke-width: .7; }
.perimeter .marker { stroke: #b7d7f8; stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 14 986; animation: landing-circuit 36s linear infinite; }
.perimeter.pulsing .base { animation: landing-pulse 1.7s ease-in-out 2; }
.preview-caption { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-top: clamp(18px, 1vw, 38px); color: #b9c9dc; font-size: clamp(.8rem, .55vw, 1.3rem); }
.preview-caption button { border: 1px solid #64748b; color: #e6eef8; background: transparent; padding: .6em .8em; min-height: 44px; border-radius: 5px; font-size: inherit; }
.preview-caption button:hover { background: #21344c; }
.preview-explanation { color: #b9c9dc; font-size: clamp(.85rem, .6vw, 1.4rem); line-height: 1.65; margin: 1.1em 0 0; max-width: 65ch; }
.principles {
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--landing-gap);
  padding-block: clamp(32px, 2vw, 76px) clamp(44px, 3vw, 110px);
}
.principle .number { color: #946621; font-size: clamp(.8rem, .5vw, 1.2rem); }
.principle h2 { font-size: clamp(1.6rem, 1.25vw, 3rem); margin-block: .45em; }
.principle p, .steps p, .setup-intro > p { font-size: clamp(1rem, .7vw, 1.625rem); line-height: 1.7; margin-bottom: 0; }
.how { background: #eaf0f6; padding-block: clamp(44px, 3vw, 110px); scroll-margin-top: 24px; }
.setup-intro { display: grid; grid-template-columns: 1fr 1fr; gap: var(--landing-gap); align-items: center; margin-bottom: clamp(32px, 2vw, 76px); }
.setup-intro h2 { font-size: clamp(2rem, 1.8vw, 4.25rem); margin-bottom: 0; }
.setup-intro > p { max-width: 66ch; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--landing-gap); margin: 0; padding: 0; list-style: none; }
.steps li { border-top: 1px solid #ccd7e3; padding-top: clamp(20px, 1.2vw, 44px); }
.steps .step-index { color: #946621; font-size: clamp(1rem, .7vw, 1.625rem); }
.steps h3 { font-size: clamp(1.15rem, .85vw, 2rem); margin-block: .8em .6em; }
.setup-actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: clamp(32px, 2vw, 76px); }
.setup-actions p { margin: 0; font-size: clamp(.9rem, .6vw, 1.4rem); }
.setup-actions a:not(.btn), .landing-footer a { text-underline-offset: 4px; }
.privacy-line { display: flex; align-items: center; gap: 32px; padding-block: clamp(32px, 2vw, 70px); font-size: clamp(.95rem, .65vw, 1.5rem); }
.privacy-line strong { flex: 0 0 auto; }
.privacy-line p { margin: 0; max-width: 88ch; }
.landing-footer { border-top: 1px solid var(--line); padding-block: 28px; display: flex; justify-content: space-between; gap: 24px; color: var(--muted); font-size: clamp(.85rem, .55vw, 1.3rem); }
@keyframes landing-circuit { to { stroke-dashoffset: -1000; } }
@keyframes landing-pulse { 0%, 100% { stroke-width: .7; filter: none; } 50% { stroke-width: 2; filter: drop-shadow(0 0 3px #99ccff); } }
@media (max-width: 1800px) {
  .landing { --landing-width: 88%; }
}
@media (max-width: 1000px) {
  .hero { grid-template-columns: 1fr; gap: 36px; }
  .hero h1 { font-size: clamp(2.6rem, 5.5vw, 3.8rem); }
  .hero .intro { max-width: 65ch; }
  .hero-art { width: 100%; max-width: 700px; justify-self: center; }
  .preview-document { padding: clamp(20px, 5vw, 50px); }
  .preview-document h3 { font-size: clamp(1.1rem, 3vw, 2rem); }
  .preview-document .doc-meta { font-size: .7rem; }
  .setup-intro { grid-template-columns: 1fr; gap: 20px; }
  .privacy-line { display: block; }
  .privacy-line strong { display: block; margin-bottom: 10px; }
}
@media (max-width: 740px) {
  .landing { --landing-width: calc(100% - 40px); }
  .landing-header { padding-block: 20px; gap: 16px; flex-wrap: wrap; }
  .landing-header nav { width: 100%; gap: 14px; flex-wrap: wrap; justify-content: space-between; }
  .landing .brand { font-size: .8rem; gap: 8px; }
  .landing .brand img { width: 38px; height: 38px; }
  .landing-header .btn { padding: 10px 12px; font-size: .8rem; }
  .hero { padding-block: 30px 42px; }
  .hero h1 { font-size: clamp(2rem, 5.8vw, 2.65rem); line-height: 1.12; }
  .hero .eyebrow { letter-spacing: .11em; font-size: .7rem; }
  .hero-art { padding: 18px; }
  .desktop-preview { width: 100%; min-height: 210px; }
  .hero-art-header { font-size: .7rem; gap: 8px; }
  .preview-caption { align-items: flex-start; flex-direction: column; }
  .principles, .steps { grid-template-columns: 1fr; gap: 28px; }
  .principles { padding-block: 30px 40px; }
  .principle h2 { margin-top: .25em; }
  .how { padding-block: 40px; }
  .setup-intro h2 { font-size: 1.85rem; }
  .landing-footer { flex-wrap: wrap; gap: 12px; padding-block: 24px; }
}
@media (max-width: 380px) {
  .landing .brand { font-size: .7rem; gap: 5px; }
  .landing .brand img { width: 30px; height: 30px; }
  .landing-header .btn { font-size: .75rem; padding-inline: 9px; }
  .hero h1 { font-size: 1.9rem; }
  .hero-art-header { flex-direction: column; align-items: flex-start; }
  .preview-document { padding: 16px; }
  .preview-document .doc-meta { font-size: .6rem; }
}