/* Start page: landscape hero, display comparison, signposts, plans. */

.hero { position: relative; background: linear-gradient(to bottom, var(--sky), var(--bg) 70%); overflow: hidden; }
.hero-text { position: relative; z-index: 1; padding-block: clamp(2.5rem, 7vw, 5.5rem) 0; }
.hero h1 {
  font-size: clamp(2.6rem, 7.2vw, 5.6rem); line-height: .95; letter-spacing: -.035em; font-weight: 900;
  max-width: 16ch; margin: 0 0 1.25rem; text-wrap: balance;
}
.hero-lead { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--muted); max-width: 38rem; margin: 0 0 1.5rem; }
.hero .actions { gap: .75rem; }

.landscape { display: block; width: 100%; height: clamp(16rem, 34vw, 30rem); margin-top: -2rem; }
[dir="rtl"] .landscape { transform: scaleX(-1); }
.contours path { stroke: var(--contour); }
.ridge-far { fill: var(--ridge-far); }
.ridge { fill: var(--ridge); }
.snow { fill: var(--surface); }
.city rect { fill: var(--city); }
.window { fill: var(--sky); opacity: .9; }
.walker circle { fill: var(--fg); }
.walker path { fill: none; stroke: var(--fg); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.walker .walker-pack { fill: var(--accent); stroke: none; }
.walker .walker-tester { fill: var(--accent); stroke: var(--fg); stroke-width: 2; }
.ground { fill: var(--bg); }
.mast { fill: none; stroke: var(--fg); stroke-width: 3; stroke-linecap: round; }
.mast-head { fill: var(--accent); }
.pulse { fill: none; stroke: var(--accent); stroke-width: 3; transform-box: fill-box; transform-origin: center; opacity: 0; animation: pulse 3.6s ease-out infinite; }
.pulse.p2 { animation-delay: 1.2s; }
.pulse.p3 { animation-delay: 2.4s; }
.trail { fill: none; stroke: var(--fg); stroke-width: 3; stroke-dasharray: 2 12; stroke-linecap: round; opacity: .55; }
.points circle { stroke: var(--bg); stroke-width: 4; transform-box: fill-box; transform-origin: center; animation: point .5s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(.6s + var(--i) * .22s); }
.points .good { fill: var(--good); }
.points .fair { fill: var(--fair); }
.points .weak { fill: var(--weak); }

@keyframes pulse { 0% { transform: scale(.2); opacity: .9; } 100% { transform: scale(3.4); opacity: 0; } }
@keyframes point { from { transform: scale(0); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .pulse { animation: none; opacity: .35; }
  .pulse.p2 { transform: scale(2); opacity: .2; }
  .pulse.p3 { display: none; }
  .points circle { animation: none; }
}

/* Display before and after */
.compare { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); gap: clamp(1.5rem, 5vw, 4rem); align-items: center; margin-block: 1rem 3rem; }
.compare h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1; letter-spacing: -.03em; font-weight: 900; margin: 0 0 1rem; }
.compare-text p { color: var(--muted); font-size: 1.05rem; max-width: 34rem; }
.compare-text p:last-child { color: var(--fg); }
.device { cursor: pointer; }
.device { position: relative; background: linear-gradient(160deg, #9aa1a4, #6f777b); border-radius: 26px; padding: 14px; box-shadow: 0 1.5rem 3rem -1.2rem rgb(28 43 48 / .55), inset 0 2px 0 rgb(255 255 255 / .35); }
.bezel { background: #0b0d0e; border-radius: 14px; padding: 12px; }
.screen { aspect-ratio: 4 / 3; container-type: inline-size; background: #263238; color: #f2f5f4; border-radius: 3px; overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; font-variant-numeric: tabular-nums; }
.screen .bar, .screen .foot-bar { background: #172024; display: flex; align-items: center; gap: 2.2cqi; padding: 1.6cqi 3cqi; font-size: 4.2cqi; }
.screen .idle { background: #b9dcdc; color: #172024; border-radius: 1cqi; padding: .3cqi 4cqi; font-weight: 600; }
.screen .sent { color: #9fd7a2; }
.screen .gps { width: 6cqi; height: 6cqi; fill: #b9dcdc; margin-inline-start: auto; }
.screen .battery { width: 13cqi; height: 6cqi; border-radius: 1cqi; background: #b9dcdc; position: relative; }
.screen .battery::after { content: ""; position: absolute; right: -1.2cqi; top: 1.8cqi; width: 1cqi; height: 2.4cqi; background: #b9dcdc; border-radius: 0 .5cqi .5cqi 0; }
.screen .body { display: grid; grid-template-columns: 1fr 1fr; gap: 3cqi; padding: 1.5cqi 3cqi; font-size: 3.9cqi; line-height: 1.3; align-content: center; }
.screen .line { display: flex; gap: 1.6cqi; align-items: baseline; white-space: nowrap; }
.screen .line.gap { margin-top: 2cqi; }
.screen b { font-weight: 500; font-size: 4.5cqi; }
.screen .line b + b { margin-inline-start: 4cqi; }
.screen i.up, .screen i.down { font-style: normal; color: #e3e38f; margin-inline-start: auto; }
.screen em { font-style: normal; color: #9fd7a2; }
.screen strong { font-weight: 700; }
.screen .sig { display: grid; grid-template-columns: auto auto; align-items: end; }
.screen .sig > div:not(.bars) { display: flex; gap: 1.6cqi; grid-column: 1; }
.screen .bars { grid-column: 2; grid-row: 1 / 3; display: flex; align-items: flex-end; gap: .9cqi; height: 10cqi; justify-self: end; }
.screen .bars i { width: 1.8cqi; border-radius: 1cqi; background: #3b4a50; }
.screen .bars i:nth-child(1) { height: 25%; } .screen .bars i:nth-child(2) { height: 42%; } .screen .bars i:nth-child(3) { height: 60%; } .screen .bars i:nth-child(4) { height: 80%; } .screen .bars i:nth-child(5) { height: 100%; }
.screen .bars.on i, .device.connected .screen .bars i:nth-child(-n+4) { background: #e3e38f; }
.screen [data-v] { transition: color .3s; }
.device.connected .screen [data-v] { color: #e3e38f; animation: lit .7s ease-out both; animation-delay: calc(var(--d, 0) * 90ms); }
@keyframes lit { 0% { background: rgb(227 227 143 / .55); } 100% { background: transparent; } }
.mode-tag {
  position: absolute; z-index: 2; inset-block-start: -.9rem; inset-inline-start: 1.2rem; padding: .3rem .85rem; border-radius: 999px;
  font-weight: 800; font-size: .9rem; background: var(--surface); color: var(--fg); box-shadow: 0 .4rem 1rem -.4rem rgb(28 43 48 / .45), inset 0 0 0 2px var(--line);
  transition: background .3s, color .3s;
}
.device.connected .mode-tag { background: var(--accent); color: var(--accent-fg); box-shadow: 0 .4rem 1rem -.4rem rgb(28 43 48 / .45); }
.mode-tag [data-on] { display: none; }
.device.connected .mode-tag [data-on] { display: inline; }
.device.connected .mode-tag [data-off] { display: none; }
/* Progress of the automatic switch: a thin line under the device. */
.device::after { content: ""; position: absolute; inset-inline: 26px; bottom: 6px; height: 3px; border-radius: 2px; background: var(--accent); transform-origin: left; transform: scaleX(0); opacity: 0; }
[dir="rtl"] .device::after { transform-origin: right; }
.device.cycling::after { opacity: .9; animation: progress var(--cycle, 3.6s) linear infinite; }
@keyframes progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .device.connected .screen [data-v] { animation: none; } }
.screen .foot-bar { gap: 3cqi; }
.screen .pos { display: grid; grid-template-columns: auto auto; column-gap: 2cqi; font-size: 3.7cqi; line-height: 1.25; }
.screen .label { background: #9fd7a2; color: #172024; border-radius: 1cqi; padding: .2cqi 2cqi; margin-inline-start: auto; font-weight: 600; }
.screen .pause { width: 7cqi; height: 7cqi; border-radius: 2.5cqi; background: #4a90d9 linear-gradient(90deg, transparent 32%, #111 32% 44%, transparent 44% 56%, #111 56% 68%, transparent 68%) center / 60% 55% no-repeat; }
.screen .gear { font-size: 6cqi; line-height: 1; }

/* Steps as trail signposts */
.how h2, .plans h2, .faq h2 { font-size: clamp(1.6rem, 3.5vw, 2.3rem); letter-spacing: -.03em; font-weight: 900; line-height: 1.05; }
.signposts { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); counter-reset: post; }
.signposts li {
  counter-increment: post; position: relative; background: var(--surface); padding: 1.25rem 1.25rem 1.25rem 1.4rem;
  border-radius: 4px 18px 18px 4px; border-inline-start: 8px solid var(--fair); font-size: 1.02rem;
}
.signposts li::before { content: counter(post); display: block; font-size: 2.6rem; font-weight: 900; line-height: 1; letter-spacing: -.04em; margin-bottom: .4rem; color: var(--fg); }
.signposts .arrow { position: absolute; inset-block-start: 1.35rem; inset-inline-end: 1.2rem; width: 2.2rem; height: 1.1rem; background: var(--fair); clip-path: polygon(0 25%, 65% 25%, 65% 0, 100% 50%, 65% 100%, 65% 75%, 0 75%); }
[dir="rtl"] .signposts .arrow { transform: scaleX(-1); }
[dir="rtl"] .signposts li { border-radius: 18px 4px 4px 18px; }

/* Plans: deliberately unlike each other */
.plan-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.plan-free, .plan-pro { padding: 1.75rem; border-radius: 22px; }
.plan-free { border: 2px solid var(--fg); }
.plan-pro { background: var(--granite); color: var(--on-granite); position: relative; overflow: hidden; }
.plan-pro::after { content: ""; position: absolute; inset-inline-end: -4.5rem; inset-block-start: -4.5rem; width: 10rem; height: 10rem; border-radius: 50%; border: 16px solid var(--accent); }
.plan-pro h3 { position: relative; z-index: 1; }
.plan-pro .button { position: relative; z-index: 1; }
.plan-free h3, .plan-pro h3 { font-size: 2rem; font-weight: 900; letter-spacing: -.03em; margin: 0 0 .75rem; }
.plan-pro h3 { color: var(--accent); }
.plan-free ul, .plan-pro ul { padding-inline-start: 1.1rem; margin: 0 0 1.25rem; position: relative; z-index: 1; }
.plan-free li, .plan-pro li { margin-block: .35rem; }


/* Supported devices */
.devices h2 { font-size: clamp(1.6rem, 3.5vw, 2.3rem); letter-spacing: -.03em; font-weight: 900; line-height: 1.05; }
.device-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.tile { background: var(--surface); border-radius: 22px; padding: 1.4rem; position: relative; overflow: hidden; }
.tile h3 { font-size: 1.45rem; font-weight: 900; letter-spacing: -.02em; margin: 1rem 0 .1rem; }
.tile-line { color: var(--muted); margin: 0 0 1rem; font-size: .95rem; }
.tile-status { display: inline-block; font-weight: 800; font-size: .9rem; padding: .2rem .7rem; border-radius: 999px; margin: 0 0 .6rem; }
.tile-text { margin: 0; }
.tile-ok .tile-status { background: var(--good); color: #fff; }
.tile-test .tile-status { background: var(--fair); color: #1c2b30; }
.tile-plan .tile-status { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 2px var(--line); }
.tile-plan { background: transparent; box-shadow: inset 0 0 0 2px var(--line); }
/* A small tester: grey body, dark screen */
.tile-device { display: block; position: relative; width: 4.2rem; height: 3.3rem; border-radius: 12px; background: linear-gradient(160deg, #9aa1a4, #6f777b); margin-top: .2rem; }
.tile-device::before { content: ""; position: absolute; inset: 6px; border-radius: 6px; background: #263238; }
.tile-device i { position: absolute; left: 13px; right: 13px; top: 15px; height: 4px; border-radius: 2px; background: #e3e38f; box-shadow: 0 8px 0 #9fd7a2; z-index: 1; }
.tile-plan .tile-device { opacity: .55; }

@media (max-width: 44rem) {
  /* Narrow screens: keep the stretch from the gateway on the peak to the walker, uncropped. */
  .landscape { width: 165%; height: auto; aspect-ratio: 1440 / 520; margin-top: 0; margin-inline-start: -12%; }
  .points circle { r: 20px; stroke-width: 6; }
  .compare { grid-template-columns: 1fr; }
}

/* Questions and answers: one line each, opened on demand */
.faq { max-width: 50rem; margin-bottom: 1rem; }
.faq details { border-block-end: 2px solid var(--line); }
.faq details:first-of-type { border-block-start: 2px solid var(--line); margin-top: 1.5rem; }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.05rem 0; font-weight: 800; font-size: 1.1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--surface); font-weight: 900; font-size: 1.2rem; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); background: var(--accent); color: var(--accent-fg); }
.faq summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.faq details p { margin: 0 0 1.2rem; max-width: 42rem; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .faq summary::after { transition: none; } }