/* WayLog common palette: C / blue-ivory. Values: planning/WayLog_共通カラーパレット.md */
:root {
  --color-page:#FBF8F1;
  --color-text:#263044;
  --color-text-muted:#606678;
  --color-primary:#3457B1;
  --color-primary-hover:#25418A;
  --color-surface-soft:#EAEFF8;
  --color-border:#D9DFE9;
  --color-cta-background:#DFE7F5;
  --color-on-primary:#FFFFFF;
  --color-surface:#FFFFFF;
  --color-label-background:#EAEFF8E8;
  --color-photo-label-background:#FBF8F1ED;
  --color-button-shadow:#3457B119;
  --color-phone-shadow:#26304438;
  --color-route-shadow:#3457B10C;
  --font:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
}

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:24px;
}

body {
  margin:0;
  background:var(--color-page);
  color:var(--color-text);
  font-family:var(--font);
  font-size:16px;
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
}

a {
  color:inherit;
  text-decoration:none;
}

a,summary {
  -webkit-tap-highlight-color:transparent;
}

a:focus-visible,summary:focus-visible {
  outline:3px solid var(--color-primary);
  outline-offset:6px;
}

img {
  display:block;
  max-width:100%;
  height:auto;
}

figure,p,h1,h2,h3 {
  margin:0;
}

p+p {
  margin-top:18px;
}

h1,h2,h3 {
  font-weight:750;
  line-height:1.5;
  letter-spacing:.025em;
}

h2 {
  font-size:clamp(26px,2.7vw,36px);
  line-height:1.5;
}

h3 {
  font-size:20px;
}

.container {
  width:min(1160px,calc(100% - 64px));
  margin-inline:auto;
}

.skip-link {
  position:fixed;
  z-index:20;
  top:12px;
  left:20px;
  padding:8px 16px;
  background:var(--color-surface);
  transform:translateY(-180%);
}

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

.site-header {
  height:92px;
}

.header-inner,.header-nav,.footer-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  height:100%;
}

.wordmark {
  display:inline-flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
  font-size:28px;
  font-weight:750;
  line-height:1.2;
  letter-spacing:.015em;
  white-space:nowrap;
}

.brand-icon {
  width:40px;
  height:40px;
  flex:none;
  border-radius:9px;
}

.header-nav {
  font-size:15px;
  gap:32px;
}

.header-nav>a:not(.store-link):hover,.site-footer a:hover {
  color:var(--color-primary);
}

.store-link {
  background:var(--color-text);
  color:var(--color-surface);
  padding:8px 18px;
  border-radius:6px;
  min-height:44px;
}

.store-link:hover {
  background:var(--color-primary-hover);
}

.hero {
  overflow:hidden;
}

.hero-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  min-height:610px;
  gap:36px;
}

.hero-copy {
  padding:22px 0 70px;
  position:relative;
  z-index:2;
}

h1 {
  font-size:clamp(40px,4.5vw,60px);
  line-height:1.45;
  letter-spacing:.01em;
}

.hero-description {
  font-size:18px;
  line-height:1.95;
  max-width:520px;
  margin:24px 0 28px;
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:28px;
  min-height:58px;
  padding:14px 26px;
  background:var(--color-primary);
  color:var(--color-on-primary);
  border-radius:8px;
  font-weight:700;
  line-height:1.6;
  box-shadow:0 3px 0 var(--color-button-shadow);
  transition:background .18s,transform .18s;
}

.button:hover {
  background:var(--color-primary-hover);
  transform:translateY(-2px);
}

.button span {
  font-size:23px;
  line-height:1;
}

.download-note {
  font-size:13px;
  line-height:1.75;
  color:var(--color-text-muted);
  margin-top:12px;
}

.text-link {
  display:inline-flex;
  gap:15px;
  align-items:center;
  border-bottom:1px solid var(--color-primary);
  color:var(--color-primary-hover);
  font-weight:700;
  margin-top:28px;
  min-height:44px;
}

.text-link:hover {
  border-bottom-width:2px;
}

.hero-visual {
  position:relative;
  height:610px;
  isolation:isolate;
}

.photo-frame {
  position:relative;
  overflow:hidden;
  border-radius:8px;
  background:#dedfd3;
}

.hero-photo {
  position:absolute;
  right:-70px;
  top:0;
  width:91%;
  height:100%;
  border-radius:12px 0 0 0;
}

.hero-photo img {
  width:100%;
  height:100%;
  object-fit:cover;
}

.photo-label {
  position:absolute;
  bottom:10px;
  right:10px;
  padding:3px 8px;
  border-radius:4px;
  background:var(--color-photo-label-background);
  color:var(--color-text-muted);
  font-size:11px;
  line-height:1.6;
  max-width:calc(100% - 20px);
}

.phone-preview {
  position:absolute;
  z-index:2;
  left:-16px;
  bottom:39px;
  width:245px;
  background:#17212b;
  padding:8px;
  border-radius:37px;
  box-shadow:0 18px 50px var(--color-phone-shadow);
  border:2px solid #9a9d96;
  transform:rotate(-4deg);
}

.phone-camera {
  position:absolute;
  z-index:3;
  width:86px;
  height:21px;
  background:#17212b;
  top:7px;
  left:50%;
  transform:translateX(-50%);
  border-radius:0 0 14px 14px;
}

.phone-screen {
  overflow:hidden;
  background:var(--color-page);
  border-radius:28px;
  padding:32px 8px 10px;
}

.screen-title {
  text-align:center;
  font-weight:700;
  font-size:15px;
}

.screen-subtitle {
  text-align:center;
  font-size:11px;
  color:var(--color-text-muted);
  margin-top:1px;
}

.phone-map {
  width:100%;
  height:230px;
  object-fit:fill;
  margin-top:12px;
  border-radius:4px;
}

.distance-card {
  position:relative;
  margin:-22px 8px 0;
  padding:8px 15px;
  background:#fffffff5;
  border-radius:9px;
  box-shadow:0 3px 15px #26332410;
}

.distance-card>span,.route-distance>span {
  display:block;
  font-size:12px;
  line-height:1.5;
  color:var(--color-text-muted);
}

.distance-card strong,.route-distance strong {
  font-size:31px;
  line-height:1.4;
  display:block;
  letter-spacing:-.03em;
}

.distance-card small,.route-distance small {
  font-size:17px;
}

.mock-label {
  font-size:12px;
  line-height:1.8;
  color:var(--color-text-muted);
  background:var(--color-label-background);
  border-radius:20px;
  padding:4px 12px;
  text-align:center;
}

.phone-screen>.mock-label {
  margin-top:12px;
  padding:4px 0;
}

.section {
  padding:72px 0;
}

.mint {
  background:var(--color-surface-soft);
}

.section-copy p {
  color:var(--color-text-muted);
  margin-top:20px;
}

.memory-grid {
  display:grid;
  grid-template-columns:1fr 1.25fr;
  align-items:center;
  gap:64px;
}

.memory-photos {
  display:grid;
  grid-template-columns:1fr 40px 1fr;
  align-items:center;
  gap:8px;
}

.memory-photos .photo-frame {
  height:240px;
}

.memory-photos img {
  height:100%;
  width:100%;
  object-fit:cover;
}

.memory-photos figure:nth-of-type(2) {
  margin-top:44px;
}

.memory-photos figcaption {
  color:var(--color-text-muted);
  font-size:14px;
  line-height:1.8;
  margin-top:10px;
}

.photo-connector {
  font-size:25px;
  color:var(--color-primary);
  font-weight:700;
  margin-top:-18px;
}

.section-intro {
  text-align:center;
}

.section-intro>p {
  color:var(--color-text-muted);
  margin-top:16px;
}

.mobile-break {
  display:none;
}

.steps {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
  list-style:none;
  padding:0;
  margin:40px 0 0;
}

.steps>li {
  display:flex;
  gap:18px;
  padding:24px 24px 24px 0;
  position:relative;
}

.steps>li:not(:last-child) {
  border-right:1px solid var(--color-border);
}

.step-number {
  width:44px;
  height:44px;
  flex:none;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:var(--color-on-primary);
  background:var(--color-primary);
  font-size:22px;
  font-weight:700;
  line-height:1;
}

.step-content {
  position:relative;
  padding-top:62px;
}

.step-content p {
  margin-top:12px;
  color:var(--color-text-muted);
}

.step-symbol {
  position:absolute;
  top:0;
  color:var(--color-primary);
  font-size:32px;
  line-height:44px;
}

.route-grid {
  display:grid;
  grid-template-columns:.8fr 1.3fr;
  gap:60px;
  align-items:center;
}

.sample-explanation {
  font-size:14px;
  line-height:1.9;
}

.route-preview {
  position:relative;
  overflow:hidden;
  border:6px solid #ffffffb3;
  border-radius:14px;
  box-shadow:0 12px 35px var(--color-route-shadow);
}

.route-preview>img {
  width:100%;
}

.route-distance {
  position:absolute;
  top:20px;
  right:20px;
  background:#fffffff4;
  border-radius:10px;
  padding:12px 20px;
  box-shadow:0 4px 10px #1f413810;
}

.route-preview>.mock-label {
  position:absolute;
  right:12px;
  bottom:12px;
}

.journey-labels {
  display:flex;
  list-style:none;
  justify-content:flex-end;
  gap:0;
  padding:0;
  margin:22px 0 0;
  color:var(--color-text-muted);
  font-size:14px;
  line-height:1.6;
}

.journey-labels li {
  display:flex;
  align-items:center;
}

.journey-labels li:not(:last-child)::after {
  content:'→';
  display:block;
  padding:0 24px;
  color:var(--color-primary);
}

.middle-cta {
  text-align:center;
  margin-top:38px;
}

.date-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:100px;
}

.date-grid .section-copy {
  order:2;
}

.calendar-preview {
  order:1;
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:16px;
  padding:26px;
  box-shadow:0 8px 28px #17212b09;
  width:100%;
  max-width:450px;
}

.calendar-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-weight:700;
  margin-bottom:20px;
}

.sample-chip {
  font-size:11px;
  font-weight:500;
  line-height:1.6;
  padding:4px 8px;
  border-radius:20px;
  background:var(--color-surface-soft);
  color:var(--color-primary-hover);
}

.calendar-week,.calendar-days {
  display:grid;
  grid-template-columns:repeat(7,1fr);
  text-align:center;
  gap:5px;
}

.calendar-week {
  font-size:12px;
  color:var(--color-text-muted);
  margin-bottom:10px;
}

.calendar-days {
  font-size:14px;
  line-height:32px;
}

.calendar-days>span {
  width:32px;
  height:32px;
  justify-self:center;
}

.calendar-days .selected {
  background:var(--color-primary);
  color:var(--color-on-primary);
  border-radius:50%;
  font-weight:700;
}

.calendar-record {
  display:flex;
  align-items:center;
  gap:12px;
  border-top:1px solid var(--color-border);
  padding:16px 0;
  margin-top:16px;
}

.record-dot {
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--color-primary);
}

.calendar-record strong {
  font-size:14px;
  line-height:1.6;
  display:block;
}

.calendar-record div>span {
  font-size:12px;
  color:var(--color-text-muted);
  display:block;
  line-height:1.8;
}

.calendar-preview>.mock-label {
  width:fit-content;
  margin-left:auto;
}

.photos-grid {
  display:grid;
  grid-template-columns:.9fr 1.2fr;
  gap:64px;
  align-items:center;
}

.travel-journal {
  transform:rotate(2deg);
  padding:12px 12px 16px;
  background:var(--color-surface);
  box-shadow:0 5px 25px #16392b12;
}

.travel-journal .photo-frame {
  border-radius:2px;
}

.travel-journal img {
  width:100%;
  height:270px;
  object-fit:cover;
}

.travel-journal figcaption {
  font-size:14px;
  text-align:center;
  color:var(--color-text-muted);
  margin-top:14px;
  line-height:1.9;
}

.faq-container {
  max-width:940px;
}

.faq-list {
  margin-top:28px;
}

.faq-list details {
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:8px;
  margin-top:12px;
  overflow:hidden;
}

.faq-list summary {
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:19px 24px;
  font-size:16px;
  font-weight:650;
  line-height:1.8;
  min-height:62px;
}

.faq-list summary::-webkit-details-marker {
  display:none;
}

.faq-list summary:hover {
  background:var(--color-surface-soft);
}

.faq-toggle {
  width:16px;
  height:16px;
  flex:none;
  position:relative;
}

.faq-toggle::before,.faq-toggle::after {
  content:'';
  position:absolute;
  background:var(--color-primary);
  left:1px;
  top:7px;
  width:14px;
  height:2px;
}

.faq-toggle::after {
  transform:rotate(90deg);
  transition:transform .15s;
}

.faq-list details[open] .faq-toggle::after {
  transform:rotate(0);
}

.faq-list details>p {
  margin:0;
  padding:0 24px 24px;
  color:var(--color-text-muted);
  font-size:16px;
  line-height:1.9;
}

.final-cta {
  background:var(--color-cta-background);
  padding:58px 0 52px;
  text-align:center;
}

.final-inner>p:not(.download-note) {
  margin:16px 0 24px;
  color:var(--color-text-muted);
}

.final-inner>.button {
  display:flex;
  width:fit-content;
  margin-inline:auto;
}

.final-store-link {
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  color:var(--color-primary-hover);
  border-bottom:1px solid var(--color-primary);
  margin-top:12px;
  font-size:15px;
  font-weight:650;
}

.final-inner>.download-note {
  margin-top:14px;
}

.site-footer {
  padding:32px 0;
}

.footer-inner {
  height:auto;
}

.site-footer .wordmark {
  font-size:24px;
}

.site-footer .brand-icon {
  width:34px;
  height:34px;
  border-radius:8px;
}

.site-footer nav {
  display:flex;
  gap:28px;
  font-size:14px;
}

.site-footer nav a {
  display:inline-flex;
  align-items:center;
  min-height:44px;
}

@media(min-width:769px) and (max-width:1050px) {
  .hero-grid {
    gap:20px;
    min-height:580px;
  }
  .hero-visual {
    height:580px;
  }
  .hero-photo {
    right:-32px;
  }
  .phone-preview {
    width:220px;
    left:-12px;
  }
  .hero-copy .button {
    gap:15px;
    padding-inline:20px;
    font-size:15px;
  }
  .hero-description {
    font-size:16px;
  }
  .memory-grid,.route-grid,.photos-grid {
    gap:32px;
  }
  .memory-photos {
    grid-template-columns:1fr 1fr;
    gap:12px;
  }
  .photo-connector {
    display:none;
  }
  .memory-photos .photo-frame {
    height:220px;
  }
  .steps {
    gap:20px;
  }
  .steps>li {
    gap:12px;
    padding-right:14px;
  }
  .step-number {
    width:36px;
    height:36px;
    font-size:18px;
  }
  .date-grid {
    gap:50px;
  }
  .calendar-preview {
    padding:20px;
  }
  .journey-labels li:not(:last-child)::after {
    padding:0 16px;
  }
}

@media(max-width:768px) {
  .container {
    width:calc(100% - 40px);
  }
  .site-header {
    height:auto;
  }
  .header-inner {
    min-height:76px;
    height:auto;
    padding-block:16px;
    gap:12px;
    flex-wrap:wrap;
  }
  .wordmark {
    font-size:22px;
    gap:8px;
  }
  .brand-icon {
    width:32px;
    height:32px;
    border-radius:7px;
  }
  .header-nav {
    gap:12px;
    font-size:12px;
  }
  .header-nav>a {
    min-height:44px;
    display:flex;
    align-items:center;
  }
  .header-nav .store-link {
    display:none;
  }
  .hero-grid {
    display:flex;
    flex-direction:column;
    gap:0;
    align-items:stretch;
    min-height:0;
  }
  .hero-copy {
    padding:24px 0 30px;
  }
  h1 {
    font-size:clamp(36px,6.6vw,49px);
    line-height:1.45;
  }
  h2 {
    font-size:26px;
  }
  h3 {
    font-size:19px;
  }
  .hero-description {
    font-size:16px;
    margin:20px 0 24px;
    line-height:1.9;
    max-width:530px;
  }
  .desktop-break {
    display:none;
  }
  .button {
    width:100%;
    font-size:16px;
    gap:18px;
    padding:15px 16px;
    min-height:58px;
  }
  .download-note {
    font-size:11px;
    text-align:center;
    line-height:1.8;
  }
  .text-link {
    margin-top:16px;
    font-size:15px;
  }
  .hero-visual {
    height:410px;
    margin:0 -20px;
  }
  .hero-photo {
    right:0;
    width:100%;
    height:100%;
    border-radius:0;
  }
  .hero-photo img {
    object-position:center 44%;
  }
  .hero-photo .photo-label {
    bottom:12px;
    right:12px;
  }
  .phone-preview {
    left:24px;
    bottom:28px;
    width:206px;
    transform:rotate(-3deg);
    border-radius:30px;
    padding:6px;
  }
  .phone-screen {
    border-radius:23px;
    padding-top:28px;
  }
  .phone-map {
    height:185px;
  }
  .phone-camera {
    width:74px;
    height:18px;
    top:6px;
  }
  .screen-title {
    font-size:14px;
  }
  .distance-card strong {
    font-size:28px;
  }
  .section {
    padding:48px 0;
  }
  .memory-grid,.route-grid,.date-grid,.photos-grid {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:28px;
  }
  .section-copy p {
    margin-top:18px;
    font-size:16px;
  }
  .memory-photos {
    display:flex;
    flex-direction:column;
    gap:22px;
    align-items:stretch;
  }
  .memory-photos figure:nth-of-type(2) {
    margin:0;
  }
  .memory-photos .photo-frame {
    height:210px;
  }
  .memory-photos figcaption {
    font-size:14px;
  }
  .photo-connector {
    display:none;
  }
  .section-intro {
    text-align:left;
  }
  .section-intro>p {
    font-size:16px;
  }
  .mobile-break {
    display:block;
  }
  .steps {
    display:flex;
    flex-direction:column;
    gap:0;
    margin-top:24px;
  }
  .steps>li {
    padding:24px 0;
    gap:18px;
  }
  .steps>li:not(:last-child) {
    border-right:0;
    border-bottom:1px solid var(--color-border);
  }
  .steps>li:last-child {
    padding-bottom:0;
  }
  .step-content {
    padding:0;
  }
  .step-symbol {
    display:none;
  }
  .step-number {
    width:40px;
    height:40px;
    font-size:20px;
  }
  .step-content p {
    margin-top:6px;
    font-size:16px;
  }
  .route-preview {
    border-width:4px;
    border-radius:10px;
  }
  .route-preview>img {
    height:245px;
    object-fit:cover;
  }
  .route-distance {
    top:12px;
    right:12px;
    padding:9px 12px;
  }
  .route-distance strong {
    font-size:26px;
  }
  .route-distance>span {
    font-size:11px;
  }
  .route-preview>.mock-label {
    font-size:11px;
    right:8px;
    bottom:8px;
  }
  .journey-labels {
    justify-content:center;
    flex-wrap:wrap;
    row-gap:10px;
    font-size:12px;
    margin-top:20px;
  }
  .journey-labels li:not(:last-child)::after {
    padding:0 10px;
  }
  .middle-cta {
    margin-top:26px;
  }
  .sample-explanation {
    font-size:14px!important;
  }
  .date-grid .section-copy {
    order:0;
  }
  .calendar-preview {
    order:0;
    max-width:440px;
    margin-inline:auto;
    padding:22px 18px;
  }
  .calendar-top {
    font-size:16px;
  }
  .calendar-week {
    font-size:12px;
  }
  .travel-journal {
    transform:none;
    padding:8px 8px 14px;
  }
  .travel-journal img {
    height:220px;
  }
  .travel-journal figcaption {
    font-size:13px;
  }
  .faq-list {
    margin-top:22px;
  }
  .faq-list summary {
    padding:17px 16px;
    gap:18px;
    font-size:16px;
    min-height:62px;
  }
  .faq-list details>p {
    padding:0 16px 20px;
  }
  .final-cta {
    padding:44px 0;
  }
  .final-inner>.button {
    width:100%;
  }
  .final-inner>p:not(.download-note) {
    font-size:16px;
  }
  .site-footer {
    padding:20px 0;
  }
  .footer-inner {
    gap:16px;
    flex-wrap:wrap;
  }
  .site-footer .wordmark {
    font-size:22px;
  }
  .site-footer nav {
    gap:18px;
    font-size:13px;
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  .button,.faq-toggle::after {
    transition:none;
  }
}

/* Shared navigation and homepage. Generated HTML shares _partials/header/footer. */
.header-inner { position:relative; }
.desktop-nav { margin-left:auto; height:auto; }
.header-actions { display:flex; align-items:center; gap:12px; }
.header-download { display:inline-flex; align-items:center; gap:6px; background:var(--color-primary); white-space:nowrap; font-size:15px; }
.download-mobile,.mobile-menu { display:none; }
.common-footer { padding:48px 0 24px; border-top:1px solid var(--color-border); }
.footer-top { display:grid; grid-template-columns:1.2fr 1fr 1fr 1fr; gap:36px; }
.footer-brand>p { color:var(--color-text-muted); font-size:14px; margin-top:18px; }
.common-footer .footer-group { display:flex; flex-direction:column; align-items:flex-start; gap:0; }
.footer-group h2 { font-size:14px; line-height:1.7; margin:0 0 12px; letter-spacing:.025em; }
.common-footer .footer-group a { min-height:44px; font-size:14px; color:var(--color-text-muted); }
.common-footer .footer-group a:hover { color:var(--color-primary); }
.footer-bottom { border-top:1px solid var(--color-border); margin-top:32px; padding-top:20px; display:flex; justify-content:space-between; gap:16px; color:var(--color-text-muted); font-size:12px; }
.footer-bottom p { margin:0; }
.breadcrumbs { padding:12px 0 4px; color:var(--color-text-muted); font-size:12px; }
.breadcrumbs ol { display:flex; align-items:center; gap:10px; list-style:none; padding:0; margin:0; }
.breadcrumbs li:not(:last-child)::after { content:'›'; margin-left:10px; }
.breadcrumbs a { display:inline-flex; min-height:32px; align-items:center; }
.breadcrumbs a:hover { color:var(--color-primary); }
.hero-local-links { display:flex; gap:24px; flex-wrap:wrap; }
.hero-local-links .faq-jump { font-size:14px; color:var(--color-text-muted); border-color:var(--color-border); }
.eyebrow { color:var(--color-primary); font-size:13px; font-weight:700; line-height:1.7; letter-spacing:.08em; margin-bottom:16px; }
.home-hero { overflow:hidden; }
.home-hero-grid { display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:56px; min-height:660px; }
.home-hero-copy { padding:40px 0 60px; }
.home-hero h1 { font-size:clamp(40px,4.2vw,58px); line-height:1.48; }
.home-lead { font-size:17px; color:var(--color-text-muted); line-height:1.95; margin:24px 0 28px; }
.home-hero-visual { position:relative; isolation:isolate; padding:58px 8px 82px; }
.visual-orbit { position:absolute; z-index:-1; border:1px solid var(--color-border); border-radius:50%; }
.orbit-one { width:580px; height:580px; left:0; top:0; }
.orbit-two { width:420px; height:420px; left:82px; top:80px; background:var(--color-surface-soft); }
.home-record-preview { position:relative; background:var(--color-surface); border:1px solid var(--color-border); border-radius:18px; overflow:hidden; box-shadow:0 18px 50px #26304414; transform:rotate(2deg); }
.record-preview-title { display:flex; justify-content:space-between; gap:12px; align-items:center; padding:20px 24px; font-weight:700; }
.home-record-preview>img { width:100%; height:auto; }
.home-record-stats { display:grid; grid-template-columns:1fr 1fr; padding:22px 24px 8px; gap:16px; }
.home-record-stats>div+div { border-left:1px solid var(--color-border); padding-left:20px; }
.home-record-stats span { display:block; font-size:12px; color:var(--color-text-muted); }
.home-record-stats strong { font-size:35px; line-height:1.6; display:block; letter-spacing:-.03em; }
.home-record-stats small { font-size:18px; }
.home-record-stats .sample-date { font-size:22px; line-height:2.5; white-space:nowrap; }
.home-record-preview>.mock-label { width:fit-content; margin:12px 24px 22px; }
.record-story { position:absolute; bottom:10px; right:-14px; display:flex; align-items:center; gap:16px; padding:18px 24px; background:var(--color-surface); border:1px solid var(--color-border); border-radius:12px; box-shadow:0 8px 28px #26304412; font-size:14px; line-height:1.8; }
.story-dot { width:16px; height:16px; border:4px solid var(--color-primary); border-radius:50%; box-shadow:0 0 0 5px var(--color-surface-soft); }
.story-arrow { font-size:26px; color:var(--color-primary); margin-left:10px; }
.home-section-intro { margin-bottom:36px; }
.home-section-intro>p:not(.eyebrow) { color:var(--color-text-muted); margin-top:16px; }
.home-use-section { padding-top:58px; }
.use-card-grid,.feature-card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.use-card { background:var(--color-surface); border:1px solid var(--color-border); border-radius:12px; overflow:hidden; display:flex; flex-direction:column; }
.use-card-photo { position:relative; height:200px; overflow:hidden; }
.use-card-photo>img { width:100%; height:100%; object-fit:cover; object-position:center 42%; }
.use-card-illustration { height:200px; padding:14px 20px; background:var(--color-surface-soft); display:grid; place-items:center; }
.use-card-illustration svg { width:100%; height:100%; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.land-line { stroke:var(--color-border); stroke-width:3; }
.road-line { stroke:var(--color-primary); stroke-width:4; stroke-dasharray:7 8; }
.scene-point { fill:var(--color-primary); stroke:var(--color-surface); stroke-width:3; }
.car-line { stroke:var(--color-primary-hover); stroke-width:3; fill:var(--color-surface); }
.business-illustration { background:var(--color-cta-background); }
.city-line { stroke:var(--color-primary-hover); stroke-width:3; }
.city-window { stroke:var(--color-border); stroke-width:5; }
.work-route { stroke:var(--color-primary); stroke-width:4; }
.use-card-copy { padding:24px; flex:1; }
.card-kicker { font-size:12px; font-weight:700; color:var(--color-primary); margin-bottom:12px; }
.use-card-copy h3 { font-size:21px; min-height:63px; }
.use-card-copy>p:not(.card-kicker) { font-size:15px; color:var(--color-text-muted); margin-top:16px; }
.use-card-copy .text-link { font-size:14px; margin-top:24px; gap:10px; }
.use-card-copy .use-card-note { font-size:13px; border-top:1px solid var(--color-border); padding-top:14px; margin-top:24px; }
.feature-card { padding:30px 26px; background:var(--color-surface); border-radius:12px; }
.feature-symbol { display:grid; place-items:center; width:48px; height:48px; background:var(--color-surface-soft); color:var(--color-primary); border-radius:10px; font-size:30px; line-height:1; margin-bottom:22px; }
.feature-card h3 { font-size:20px; }
.feature-card>p { color:var(--color-text-muted); margin-top:16px; font-size:15px; }
.feature-card ul { padding-left:20px; margin:20px 0 0; color:var(--color-primary-hover); font-size:13px; }
.feature-more { margin-top:36px; padding-top:28px; border-top:1px solid var(--color-border); }
.feature-more h3 { font-size:17px; }
.feature-tags { display:flex; flex-wrap:wrap; gap:10px; list-style:none; padding:0; margin:18px 0 0; }
.feature-tags li { padding:7px 12px; background:var(--color-surface); border:1px solid var(--color-border); border-radius:6px; font-size:13px; color:var(--color-text-muted); }
.methods-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:80px; align-items:center; }
.method-cards { display:grid; gap:18px; }
.method-card { display:flex; align-items:flex-start; gap:20px; padding:26px; background:var(--color-surface); border:1px solid var(--color-border); border-radius:12px; }
.method-mark { color:var(--color-primary); font-size:16px; line-height:1.8; font-weight:700; }
.method-card h3 { font-size:19px; }
.method-card p { font-size:15px; color:var(--color-text-muted); margin-top:10px; }
.home-first-record { background:var(--color-surface-soft); }
.home-steps .step-content { padding-top:0; }
.home-free-section { background:var(--color-surface); }
.free-grid { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:80px; }
.free-grid>div>p:not(.eyebrow):not(.download-note) { color:var(--color-text-muted); }
.free-grid .button { margin-top:24px; }
.home-page .final-inner>.eyebrow { margin:0 0 16px; color:var(--color-primary); font-size:13px; }

@media(min-width:769px) and (max-width:1050px) {
  .home-hero-grid { gap:32px; }
  .home-hero h1 { font-size:42px; }
  .home-lead { font-size:16px; }
  .home-hero-visual { padding-inline:0; }
  .record-preview-title { padding:16px; font-size:14px; }
  .home-record-stats { padding:16px; gap:8px; }
  .home-record-stats>div+div { padding-left:12px; }
  .home-record-stats .sample-date { font-size:17px; }
  .home-record-preview>.mock-label { margin-inline:16px; font-size:11px; }
  .record-story { right:0; padding:14px; gap:12px; }
  .use-card-grid,.feature-card-grid { gap:16px; }
  .use-card-copy,.feature-card { padding:20px 16px; }
  .use-card-copy h3 { font-size:18px; min-height:54px; }
  .use-card-copy .text-link { font-size:12px; }
  .feature-card h3 { font-size:18px; }
  .methods-grid,.free-grid { gap:40px; }
  .footer-top { gap:32px; }
}

@media(max-width:768px) {
  .common-footer { padding:32px 0 22px; }
  .footer-top { grid-template-columns:1fr 1fr; gap:28px 20px; }
  .footer-brand { grid-column:1/-1; }
  .footer-brand>p { margin-top:14px; }
  .common-footer .footer-group { gap:0; }
  .common-footer .footer-group a { font-size:13px; }
  .footer-group h2 { font-size:13px; }
  .footer-bottom { flex-direction:column; gap:6px; font-size:11px; margin-top:24px; padding-top:16px; }
  .breadcrumbs { padding-top:8px; }
  .hero-local-links { gap:18px; }
  .home-hero-grid { display:flex; flex-direction:column; align-items:stretch; gap:0; min-height:0; }
  .home-hero-copy { padding:28px 0 26px; }
  .home-hero h1 { font-size:clamp(36px,6.6vw,48px); line-height:1.48; }
  .home-lead { font-size:16px; margin:20px 0 24px; }
  .home-hero-visual { padding:10px 0 76px; }
  .home-record-preview { transform:none; border-radius:14px; }
  .record-preview-title { padding:16px; font-size:15px; }
  .home-record-stats { padding:18px 16px 6px; gap:10px; }
  .home-record-stats>div+div { padding-left:14px; }
  .home-record-stats strong { font-size:30px; }
  .home-record-stats .sample-date { font-size:18px; }
  .home-record-stats span { font-size:11px; }
  .home-record-preview>.mock-label { margin:12px 16px 18px; font-size:11px; }
  .record-story { right:0; bottom:12px; padding:14px 18px; font-size:13px; }
  .orbit-one { width:400px; height:400px; top:0; left:0; }
  .orbit-two { width:300px; height:300px; top:50px; left:40px; }
  .home-use-section { padding-top:40px; }
  .home-section-intro { margin-bottom:26px; }
  .eyebrow { margin-bottom:12px; font-size:12px; }
  .use-card-grid,.feature-card-grid { grid-template-columns:1fr; gap:20px; }
  .use-card-photo { height:210px; }
  .use-card-illustration { height:160px; }
  .use-card-copy { padding:22px; }
  .use-card-copy h3 { font-size:22px; min-height:0; }
  .use-card-copy .text-link { font-size:15px; margin-top:18px; }
  .use-card-copy .use-card-note { margin-top:18px; }
  .feature-card { padding:24px; }
  .feature-symbol { margin-bottom:16px; }
  .feature-card h3 { font-size:20px; }
  .feature-more { margin-top:28px; padding-top:24px; }
  .feature-tags { gap:8px; }
  .feature-tags li { font-size:12px; }
  .methods-grid,.free-grid { display:flex; flex-direction:column; align-items:stretch; gap:28px; }
  .method-card { padding:22px 18px; gap:16px; }
  .method-card h3 { font-size:18px; }
  .home-steps { margin-top:0; }
  .free-grid .button { margin-top:22px; }
}

/* Use-case LPs share palette, navigation, CTA, steps and FAQ with travel. */
.lp-hero { overflow:hidden; }
.lp-hero-grid { display:grid; grid-template-columns:1fr 1fr; gap:54px; align-items:center; padding:28px 0 64px; }
.lp-hero-copy { padding:16px 0; min-width:0; }
.lp-hero h1 { font-size:clamp(38px,4.1vw,56px); line-height:1.5; }
.lp-hero .hero-description { font-size:17px; }
.lp-hero .hero-local-links { flex-wrap:wrap; }
.lp-hero .hero-local-links .text-link { font-size:14px; }
.lp-hero-visual { position:relative; padding:6px 0 24px; min-width:0; }
.lp-scene { position:relative; margin-left:20px; border-radius:14px; overflow:hidden; }
.lp-scene>img { width:100%; }
.lp-scene figcaption { position:absolute; right:14px; top:14px; background:var(--color-photo-label-background); color:var(--color-text-muted); padding:3px 10px; font-size:11px; border-radius:20px; }
.lp-map-card { background:var(--color-surface); border:1px solid var(--color-border); border-radius:14px; overflow:hidden; box-shadow:0 12px 36px var(--color-route-shadow); min-width:0; }
.lp-map-title { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:18px 22px; line-height:1.6; }
.lp-map-title strong { font-size:16px; }
.lp-map-title .sample-chip { flex:none; }
.lp-map-card>img { width:100%; height:auto; }
.lp-map-meta { display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:20px 22px 8px; }
.lp-map-meta>div+div { border-left:1px solid var(--color-border); padding-left:18px; }
.lp-map-meta span { display:block; font-size:11px; color:var(--color-text-muted); }
.lp-map-meta strong { display:block; font-size:32px; line-height:1.6; letter-spacing:-.02em; }
.lp-map-meta small { font-size:16px; }
.lp-map-meta .lp-sample-date { font-size:19px; line-height:2.7; white-space:nowrap; }
.lp-map-card>.mock-label { width:fit-content; margin:10px 22px 18px; }
.lp-hero-record { position:relative; width:82%; margin-top:-100px; transform:rotate(-3deg); box-shadow:0 18px 45px #26304419; }
.lp-hero-record>img { height:150px; object-fit:cover; }
.lp-hero-record .lp-map-title { padding:14px 18px; }
.lp-hero-record .lp-map-meta { padding:14px 18px 4px; }
.lp-hero-record>.mock-label { margin:10px 18px 14px; font-size:11px; }
.lp-intro-copy { max-width:760px; }
.lp-value-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.lp-value-cards>article { background:var(--color-surface); border-radius:12px; padding:26px; }
.lp-card-number { color:var(--color-primary); font-size:13px; font-weight:700; display:block; margin-bottom:16px; }
.lp-value-cards h3 { font-size:19px; }
.lp-value-cards p { margin-top:14px; color:var(--color-text-muted); }
.lp-steps .step-content { padding-top:0; }
.lp-detail-grid { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:80px; }
.lp-detail-reverse .section-copy { order:2; }
.lp-graph-preview,.lp-record-list { background:var(--color-surface); border:1px solid var(--color-border); border-radius:14px; padding:8px 0 22px; overflow:hidden; }
.lp-chart-caption { font-size:13px; color:var(--color-text-muted); margin:14px 26px 0; }
.lp-graph-preview svg { display:block; width:calc(100% - 26px); margin:14px auto 0; }
.chart-grid { fill:none; stroke:var(--color-border); stroke-width:1; }
.chart-area { fill:var(--color-surface-soft); }
.chart-line { fill:none; stroke:var(--color-primary); stroke-width:3; stroke-linejoin:round; }
.lp-chart-axis { display:flex; justify-content:space-between; margin:0 38px 22px; color:var(--color-text-muted); font-size:12px; }
.lp-graph-preview>.mock-label,.lp-record-list>.mock-label { width:fit-content; margin:18px 22px 0; }
.lp-list-row { display:flex; gap:20px; padding:22px; border-top:1px solid var(--color-border); }
.lp-record-date { background:var(--color-surface-soft); color:var(--color-primary-hover); padding:8px 10px; border-radius:7px; font-weight:700; height:fit-content; }
.lp-list-row strong { font-size:17px; }
.lp-list-row p { color:var(--color-text-muted); font-size:13px; margin:4px 0 12px; }
.lp-tag { display:inline-block; background:var(--color-surface-soft); color:var(--color-primary-hover); padding:4px 11px; border-radius:5px; font-size:13px; line-height:1.8; margin-right:6px; }
.lp-organize-example { padding:36px; border:1px solid var(--color-border); border-radius:14px; background:var(--color-surface); }
.lp-example-kicker { font-size:13px; color:var(--color-text-muted); margin-bottom:20px; }
.lp-organize-example h3 { font-size:23px; }
.lp-tag-row { margin-top:22px; display:flex; gap:8px; flex-wrap:wrap; }
.lp-tag-row .lp-tag { margin:0; }
.lp-example-note { color:var(--color-text-muted); font-size:14px; margin-top:22px; }
.lp-place-pair { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:24px; }
.lp-place-pair>div { border-top:2px solid var(--color-primary); padding-top:14px; }
.lp-place-pair span { display:block; color:var(--color-text-muted); font-size:13px; }
.lp-place-pair strong { font-size:16px; }
@media(min-width:769px) and (max-width:1050px) {
  .lp-hero-grid { gap:30px; }
  .lp-hero h1 { font-size:40px; }
  .lp-hero .hero-description { font-size:16px; }
  .lp-hero-copy .button { padding-inline:18px; gap:14px; font-size:15px; }
  .lp-hero-record { width:96%; margin-top:-45px; }
  .lp-hero-record .lp-map-title { padding:12px; }
  .lp-hero-record .lp-map-meta { padding-inline:12px; gap:8px; }
  .lp-hero-record .lp-map-meta>div+div { padding-left:12px; }
  .lp-hero-record .lp-sample-date { font-size:16px; line-height:3.2; }
  .lp-hero-record .mock-label { margin-inline:12px; }
  .lp-detail-grid { gap:40px; }
  .lp-value-cards { gap:16px; }
  .lp-value-cards>article { padding:22px 18px; }
}
@media(max-width:768px) {
  .lp-hero-grid { display:flex; flex-direction:column; align-items:stretch; gap:24px; padding:8px 0 42px; }
  .lp-hero h1 { font-size:clamp(34px,6.6vw,48px); line-height:1.48; }
  .lp-hero .hero-description { font-size:16px; }
  .lp-hero-copy { padding:14px 0 0; }
  .lp-hero .hero-local-links { gap:10px 20px; }
  .lp-hero .hero-local-links .text-link { font-size:14px; }
  .lp-hero-visual { padding:0 0 10px; }
  .lp-scene { margin-left:0; }
  .lp-hero-record { width:92%; margin-top:-38px; transform:none; }
  .lp-hero-record>img { height:auto; }
  .lp-map-title { padding:16px; gap:8px; }
  .lp-map-title strong { font-size:14px; }
  .lp-map-title .sample-chip { font-size:10px; }
  .lp-map-meta { padding:16px 14px 6px; gap:10px; }
  .lp-map-meta>div+div { padding-left:12px; }
  .lp-map-meta strong { font-size:29px; }
  .lp-map-meta .lp-sample-date { font-size:16px; line-height:2.9; }
  .lp-hero-record .lp-sample-date { font-size:15px; line-height:3.1; }
  .lp-map-card>.mock-label { margin:10px 14px 16px; font-size:11px; }
  .lp-value-cards { grid-template-columns:1fr; gap:16px; }
  .lp-value-cards>article { padding:24px; }
  .lp-card-number { margin-bottom:10px; }
  .lp-value-cards p { margin-top:12px; }
  .lp-detail-grid { display:flex; flex-direction:column; align-items:stretch; gap:28px; }
  .lp-detail-reverse .section-copy { order:0; }
  .lp-organize-example { padding:26px 22px; }
  .lp-organize-example h3 { font-size:21px; }
  .lp-list-row { padding:20px 16px; gap:14px; }
  .lp-record-date { font-size:14px; }
  .lp-list-row strong { font-size:16px; }
  .lp-graph-preview>.mock-label,.lp-record-list>.mock-label { margin-inline:16px; font-size:11px; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .button,.faq-toggle::after { transition:none; }
}

/* Expanded use-case and feature catalog, sharing the approved C palette. */
.catalog-entry { margin-top:32px; text-align:center; }
.catalog-feature-entry { margin-top:22px; }
.catalog-intro { padding:40px 0 48px; }
.catalog-intro h1 { font-size:clamp(36px,4vw,54px); line-height:1.5; }
.catalog-intro p:not(.eyebrow) { max-width:680px; margin-top:22px; color:var(--color-text-muted); }
.catalog-filters { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.catalog-filters a { display:flex; align-items:center; min-height:44px; padding:8px 18px; border:1px solid var(--color-border); border-radius:24px; background:var(--color-surface); font-size:14px; color:var(--color-primary-hover); }
.catalog-filters a:hover { border-color:var(--color-primary); background:var(--color-surface-soft); }
.catalog-group { border-top:1px solid var(--color-border); }
.catalog-group:nth-of-type(even) { background:var(--color-surface-soft); }
.catalog-group h2 { margin-bottom:28px; }
.catalog-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.catalog-card { display:flex; flex-direction:column; min-width:0; background:var(--color-surface); border:1px solid var(--color-border); border-radius:14px; overflow:hidden; }
.catalog-card:hover { border-color:var(--color-primary); box-shadow:0 8px 28px #26304412; }
.catalog-card-art { position:relative; height:190px; overflow:hidden; background:var(--color-surface-soft); }
.catalog-card-art img { width:100%; height:100%; object-fit:cover; }
.catalog-card-copy { padding:24px; display:flex; flex-direction:column; flex:1; }
.catalog-card-copy h3 { font-size:20px; }
.catalog-card-copy p { color:var(--color-text-muted); font-size:14px; margin:12px 0 22px; }
.catalog-card-link { display:flex; align-items:center; justify-content:space-between; color:var(--color-primary); font-size:14px; font-weight:700; margin-top:auto; min-height:28px; }
.lp-summary-record { background:var(--color-surface); border:1px solid var(--color-border); border-radius:14px; padding:32px; min-width:0; }
.lp-summary-record h3 { font-size:23px; }
.lp-summary-record dl { margin:24px 0 0; }
.lp-summary-record dl>div { display:flex; justify-content:space-between; gap:20px; padding:15px 0; border-bottom:1px solid var(--color-border); }
.lp-summary-record dt { color:var(--color-text-muted); font-size:13px; }
.lp-summary-record dd { margin:0; font-size:17px; font-weight:700; white-space:nowrap; }
.lp-summary-record .mock-label { margin-top:24px; }
.lp-source-note { margin-top:30px; font-size:13px; color:var(--color-text-muted); }
.lp-source-note a { color:var(--color-primary); text-decoration:underline; text-underline-offset:4px; }
.lp-related { margin-top:44px; padding-top:28px; border-top:1px solid var(--color-border); }
.lp-related h3 { font-size:18px; margin-bottom:18px; }
.lp-related>div { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.lp-related a { display:flex; justify-content:space-between; align-items:center; gap:16px; min-height:70px; padding:16px; border:1px solid var(--color-border); border-radius:10px; font-size:14px; color:var(--color-primary-hover); background:var(--color-surface); }
.lp-related a:hover { border-color:var(--color-primary); }
.device-card { color:#fff; background:#263044; border:6px solid #172031; border-radius:18px; padding:24px; min-width:0; box-shadow:0 12px 36px #26304419; }
.device-title { display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid #ffffff38; padding-bottom:16px; }
.device-title>span { font-size:12px; color:#D9DFE9; }
.dashboard-data { display:grid; grid-template-columns:1fr 1fr; gap:24px; padding:24px 0; }
.dashboard-data span { display:block; font-size:12px; color:#D9DFE9; }
.dashboard-data strong { display:block; font-size:30px; line-height:1.65; white-space:nowrap; }
.dashboard-data small { font-size:13px; }
.device-card figcaption { color:#D9DFE9; font-size:11px; border-top:1px solid #ffffff38; padding-top:12px; }
.device-hero { position:relative; margin-top:-70px; width:88%; transform:rotate(-2deg); }
.gpx-flow { background:var(--color-surface); border:1px solid var(--color-border); border-radius:14px; overflow:hidden; box-shadow:0 12px 36px #26304412; min-width:0; }
.file-example { display:flex; align-items:center; gap:18px; padding:22px; }
.file-extension { display:flex; align-items:center; justify-content:center; height:88px; width:66px; flex:none; border:2px solid var(--color-primary); border-radius:6px 18px 6px 6px; color:var(--color-primary); font-size:19px; font-weight:700; background:var(--color-surface-soft); }
.file-example strong { font-size:18px; overflow-wrap:anywhere; }
.file-example p { font-size:12px; color:var(--color-text-muted); margin-top:6px; }
.file-steps { display:flex; align-items:center; justify-content:center; gap:18px; background:var(--color-surface-soft); margin:0 22px 22px; padding:14px; border-radius:8px; color:var(--color-primary-hover); font-size:14px; }
.gpx-flow>.mock-label { margin:0 22px 22px; }
.watch-flow { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; padding:32px 24px; border:1px solid var(--color-border); border-radius:14px; background:var(--color-surface); }
.watch-stage { text-align:center; min-width:0; }
.watch-stage h3 { font-size:18px; margin:20px 0 12px; }
.watch-stage p { font-size:13px; color:var(--color-text-muted); }
.watch-glyph,.phone-glyph { display:flex; align-items:center; justify-content:center; background:var(--color-primary); color:#fff; font-size:30px; margin:0 auto; border:6px solid #263044; }
.watch-glyph { width:72px; height:84px; border-radius:20px; box-shadow:0 -12px 0 -6px #263044,0 12px 0 -6px #263044; }
.phone-glyph { width:64px; height:108px; border-radius:13px; }
.flow-arrow { color:var(--color-primary); font-size:28px; }
.watch-flow>.mock-label { grid-column:1/-1; text-align:center; margin-top:8px; }
@media(max-width:1050px) and (min-width:769px) {
  .catalog-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .device-hero { width:96%; margin-top:-40px; }
  .device-card { padding:18px; }
  .dashboard-data { gap:16px; }
  .dashboard-data strong { font-size:26px; }
  .watch-flow { padding:28px 16px; gap:12px; }
}
@media(max-width:768px) {
  .breadcrumbs ol { flex-wrap:wrap; gap:4px 8px; }
  .mobile-menu nav { max-height:calc(100dvh - 100px); overflow-y:auto; overscroll-behavior:contain; }
  .catalog-intro { padding:28px 0 36px; }
  .catalog-intro h1 { font-size:36px; }
  .catalog-filters { gap:10px; margin-top:24px; }
  .catalog-filters a { padding-inline:14px; font-size:13px; }
  .catalog-grid { grid-template-columns:1fr; gap:20px; }
  .catalog-card-art { height:210px; }
  .catalog-card-copy { padding:24px; }
  .catalog-card-copy h3 { font-size:21px; }
  .catalog-entry { margin-top:26px; }
  .catalog-feature-entry { font-size:14px; }
  .lp-related>div { grid-template-columns:1fr; gap:10px; }
  .lp-related a { min-height:54px; }
  .lp-summary-record { padding:26px 22px; }
  .lp-summary-record h3 { font-size:21px; }
  .lp-summary-record dl>div { gap:12px; }
  .lp-summary-record dd { font-size:16px; }
  .device-hero { width:94%; margin-top:-38px; transform:none; }
  .device-card { padding:20px 18px; border-width:5px; }
  .dashboard-data { gap:18px; padding:20px 0; }
  .dashboard-data strong { font-size:27px; }
  .file-example { padding:20px 16px; gap:14px; }
  .file-example strong { font-size:16px; }
  .file-steps { margin-inline:16px; gap:12px; font-size:13px; }
  .gpx-flow>.mock-label { margin-inline:16px; font-size:11px; }
  .watch-flow { padding:28px 16px; gap:10px; }
  .watch-stage h3 { font-size:16px; }
  .watch-stage p { font-size:12px; }
}

.catalog-art-label { position:absolute; right:10px; top:10px; border-radius:20px; padding:3px 9px; background:var(--color-photo-label-background); color:var(--color-text-muted); font-size:10px; }

/* Keep shared navigation readable as guide links are added. */
@media(max-width:1050px) {
  .header-inner { flex-wrap:nowrap; gap:10px; }
  .desktop-nav { display:none; }
  .header-actions { margin-left:auto; gap:8px; }
  .header-actions .header-download { display:inline-flex; font-size:13px; padding:8px 12px; }
  .download-desktop { display:none; }
  .download-mobile { display:inline; }
  .mobile-menu { display:block; }
  .mobile-menu summary { display:flex; align-items:center; justify-content:center; flex-direction:column; gap:5px; list-style:none; cursor:pointer; min-height:44px; width:54px; font-size:10px; line-height:1.2; }
  .mobile-menu summary::-webkit-details-marker { display:none; }
  .menu-symbol { width:19px; height:12px; border-top:2px solid var(--color-text); border-bottom:2px solid var(--color-text); }
  .mobile-menu[open] .menu-symbol { border-color:var(--color-primary); }
  .mobile-menu nav { position:absolute; z-index:10; right:0; top:calc(100% - 5px); width:min(335px,100%); padding:10px 18px; background:var(--color-surface); border:1px solid var(--color-border); border-radius:10px; box-shadow:0 10px 30px #2630441A; }
  .mobile-menu nav a { display:flex; align-items:center; min-height:48px; font-size:15px; border-bottom:1px solid var(--color-border); }
  .mobile-menu nav a:last-child { border-bottom:0; }
  .mobile-menu nav { max-height:calc(100dvh - 100px); overflow-y:auto; overscroll-behavior:contain; }
}

/* Actual simulator captures with fictional records: preserve the entire UI. */
.lp-app-shot { width:min(100%,300px); margin:0 auto; min-width:0; text-align:center; }
.lp-app-shot>a { display:block; border:7px solid #172a3a; border-radius:32px; overflow:hidden; box-shadow:0 18px 46px #122a4820; background:#fff; transition:transform .2s; }
.lp-app-shot>a:hover { transform:translateY(-3px); }
.lp-app-shot>a:focus-visible { outline:3px solid var(--color-primary); outline-offset:5px; }
.lp-app-shot img { display:block; width:100%; height:auto; }
.lp-app-shot figcaption { margin-top:12px; color:var(--color-text-muted); font-size:11px; line-height:1.7; }
.lp-app-shot figcaption span { display:block; }
.lp-hero-visual:has(.lp-app-hero) { padding:20px 0 35px; }
.lp-generated-photo { margin:0 0 0 22%; border-radius:16px; }
.lp-generated-photo>img { aspect-ratio:4/3; object-fit:cover; }
.lp-app-hero { position:relative; width:210px; margin:-175px 0 0; transform:rotate(-3deg); z-index:2; }
.lp-app-hero figcaption { padding:5px 8px; background:var(--color-surface); border-radius:8px; }
.travel-lp .hero-visual:has(.lp-app-hero) { height:auto; padding:20px 0 35px; }
.travel-lp .hero-visual .lp-generated-photo { position:relative; right:auto; width:auto; height:auto; }
@media(max-width:760px) {
 .lp-hero-visual:has(.lp-app-hero),.travel-lp .hero-visual:has(.lp-app-hero) { padding:4px 0 12px; }
 .lp-generated-photo { margin-left:16%; }
 .lp-app-hero { width:180px; margin-top:-120px; transform:none; }
 .lp-app-shot:not(.lp-app-hero) { width:min(100%,285px); }
}
@media(prefers-reduced-motion:reduce) { .lp-app-shot>a { transition:none; } }
@media(max-width:768px) {
 .travel-lp .hero-visual:has(.lp-app-hero) { margin:0; }
 .travel-lp .lp-app-hero { transform:none; }
}

/* Homepage uses the same photo and actual-screen presentation as the use LPs. */
.home-hero-visual.home-lp-visual { padding:24px 8px 120px; }
.home-lp-visual .lp-generated-photo { margin-left:22%; }
@media(max-width:768px) {
 .home-hero-visual.home-lp-visual { padding:10px 0 104px; }
 .home-lp-visual .lp-generated-photo { margin-left:16%; }
 .home-lp-visual .lp-app-hero { width:180px; margin-top:-120px; transform:none; }
}

/* Watch captures retain their native aspect ratio, without a phone-shaped frame. */
.feature-watch-shot>a { border-radius:38px; background:#000; }
.feature-watch-shot.lp-app-hero { width:250px; margin-top:-95px; }
.feature-watch-pair { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1fr); gap:20px; align-items:center; width:min(100%,440px); margin:0 auto; }
.feature-watch-pair .lp-app-shot { width:100%; margin:0; }
.feature-capture-note { grid-column:1/-1; margin:0; color:var(--color-text-muted); font-size:12px; line-height:1.8; }
.catalog-card[href="/ja/features/apple-watch/"] .catalog-card-art img { object-position:center 68%; }
.feature-carplay-photo>a { display:block; border-radius:16px; overflow:hidden; }
.feature-carplay-photo>a:focus-visible { outline:3px solid var(--color-primary); outline-offset:5px; }
.feature-carplay-photo img { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; object-position:center 47%; }
.carplay-page .lp-hero-visual .feature-carplay-photo { margin-left:0; }
.carplay-page .lp-app-hero { width:180px; margin:-72px 6px 0 auto; transform:rotate(3deg); }
.feature-carplay-detail { margin:0; }
.feature-carplay-example .feature-capture-note { margin-top:14px; }
.catalog-card[href="/ja/features/carplay/"] .catalog-card-art img { object-position:center 47%; }
@media(max-width:760px) {
 .carplay-page .lp-app-hero { transform:none; margin-top:-50px; }
 .feature-watch-shot.lp-app-hero { width:190px; margin-top:-70px; }
 .feature-watch-pair { gap:14px; }
 .feature-watch-pair .lp-app-shot>a { border-width:5px; border-radius:24px; }
}
:where(.language-links) { display:flex; gap:22px; align-items:center; margin:28px 0 8px; font-size:14px; }
:where(.language-links a) { text-decoration:underline; text-underline-offset:4px; }
:where(.language-links [aria-current="page"]) { font-weight:700; }