/* P2P guide shares typography, glass tokens and the scroll engine with the homepage. */
.p2p-page h2 span {
  color: var(--product-accent);
}
.p2p-hero {
  padding-block: var(--space-10) var(--product-section-space);
  background: var(--product-hero-gradient);
}
.p2p-hero-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--space-9);
}
.p2p-hero h1 {
  font-size: clamp(2.7rem, 4.6vw, 4.3rem);
}
.p2p-intro {
  color: var(--product-muted);
  margin-top: var(--space-5);
  font-size: var(--text-sm);
  max-width: 46ch;
}
.p2p-hero .text-link {
  margin-top: var(--space-7);
}
.p2p-section {
  padding-block: var(--product-section-space);
}
.p2p-section-intro {
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  align-items: end;
  gap: var(--space-10);
  margin-bottom: var(--space-9);
}
.p2p-section-intro p {
  color: var(--product-muted);
  font-size: var(--product-copy);
}
.p2p-hero-diagram {
  margin: 0;
  color: var(--product-white);
}
.p2p-hero-diagram .p2p-diagram-caption > span { color: var(--product-white); }
.p2p-hero-diagram .p2p-diagram-caption > strong { color: var(--app-light-blue); }
.p2p-network { position: relative; margin: 0; min-width: 0; }
.network-halo {
  position: absolute;
  inset: 0 -5%;
  z-index: -1;
  border-radius: 50%;
  background: var(--p2p-panel-gradient);
  filter: blur(var(--product-stage-wash-blur));
  pointer-events: none;
}
.p2p-diagram-caption {
  margin-top: var(--space-5);
  text-align: center;
  font-family: var(--font-family-product);
  font-size: var(--product-caption-size);
  font-weight: 600;
  font-style: normal;
  line-height: 1.25;
  letter-spacing: -0.045em;
}
.p2p-diagram-caption > span,
.p2p-diagram-caption > strong,
.p2p-diagram-caption > small { display: block; }
.p2p-diagram-caption > span { color: var(--app-dark); }
.p2p-diagram-caption > strong { color: var(--product-accent); font-weight: 600; }
.p2p-diagram-caption > small {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: normal;
  color: var(--product-muted);
}
.schematic-phone {
  position: absolute;
  z-index: 1;
  top: 30%;
  width: 31%;
  max-width: 10rem;
  min-height: 15rem;
  padding: var(--space-5) var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid var(--product-glass-border);
  outline: 1px solid var(--product-line);
  background: var(--product-glass);
  box-shadow: var(--product-shadow);
  backdrop-filter: blur(var(--product-blur));
  -webkit-backdrop-filter: blur(var(--product-blur));
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
}
.phone-one {
  left: 5%;
  transform: rotate(-4deg);
}
.phone-two {
  right: 5%;
  transform: rotate(4deg);
}
.schematic-camera {
  width: var(--space-7);
  height: var(--space-1);
  background: var(--product-line);
  border-radius: var(--radius-round);
  position: absolute;
  top: var(--space-3);
}
.schematic-sheets {
  width: 80%;
  border: 1px solid var(--product-glass-border);
  border-radius: var(--radius-sm);
  background: var(--product-glass-solid);
  padding: var(--space-4);
  box-shadow: var(--shadow-soft);
}
.schematic-sheets .icon {
  width: 2rem;
  height: 2rem;
  color: var(--product-accent);
  margin-bottom: var(--space-3);
}
.schematic-sheets > span {
  display: block;
  height: 2px;
  border-radius: var(--radius-round);
  background: var(--product-line);
  margin-top: var(--space-2);
}
.schematic-sheets > span:last-child {
  width: 65%;
}
.schematic-phone strong {
  font-size: var(--text-xs);
  font-weight: 600;
}
.schematic-phone small {
  font-size: var(--text-2xs);
  color: var(--product-muted);
}
.p2p-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-8);
}
.p2p-step h3 {
  font-size: 1.3rem;
  margin-bottom: var(--space-4);
  letter-spacing: -0.035em;
}
.p2p-step > p {
  font-size: var(--text-sm);
  color: var(--product-muted);
}
.p2p-mini-diagram {
  position: relative;
  height: var(--p2p-mini-height);
  margin-bottom: var(--space-7);
  border-radius: var(--radius-xl);
  color: var(--product-white);
  border: 1px solid transparent;
  overflow: visible;
}
.step-number {
  position: absolute;
  top: var(--space-4);
  left: var(--space-5);
  color: var(--app-light-blue);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}
.mini-network { position: absolute; inset: var(--space-8) var(--space-4) var(--space-4); }
.mini-network .connection-node { padding: var(--space-2); gap: var(--space-1); }
.mini-network .connection-node > .icon { width: 1.5rem; height: 1.5rem; }
.mini-network .connection-node span { font-size: 0.68rem; }
.mini-network .connection-node--server { height: 36%; }
.mini-share .connection-node { top: 32.5%; }
.mini-share .connection-p2p { top: 32%; }
.mini-shared-note {
  position: absolute;
  bottom: 0;
  inset-inline: 4%;
  padding: var(--space-3);
  border: 1px solid var(--product-dark-line);
  border-radius: var(--radius-round);
  background: var(--product-dark-glass);
  color: var(--app-light-blue);
  text-align: center;
  font-size: var(--text-2xs);
}
.p2p-flow-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.p2p-flow-route,
.p2p-flow-mask {
  fill: none;
  stroke: var(--app-light-blue);
  stroke-width: 4;
  stroke-dasharray: 8 9;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.p2p-flow-mask { stroke: var(--product-white); }
.p2p-flow-packet {
  fill: none;
  stroke: var(--product-connection-shimmer);
  stroke-width: 8;
  stroke-dasharray: 22 120;
  stroke-linecap: round;
  animation: p2p-flow-travel var(--p2p-flow-duration) linear infinite;
  animation-play-state: paused;
}
.p2p-flow--alternate .p2p-flow-packet {
  animation-direction: alternate;
  animation-duration: var(--product-connection-duration);
  animation-timing-function: ease-in-out;
}
.motion-in-view .p2p-flow-packet { animation-play-state: running; }
@keyframes p2p-flow-travel { from { stroke-dashoffset: 22; } to { stroke-dashoffset: -100; } }
.p2p-relay-section { padding-top: 0; }
.p2p-explain-layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-10); align-items: center; }
.p2p-note { font-size: var(--text-sm) !important; }
.relay-scene { position: relative; height: var(--p2p-relay-height); isolation: isolate; }
.relay-scene .p2p-flow-route { stroke: var(--p2p-direct-line); }
.relay-node {
  position: absolute;
  z-index: 1;
  top: 6%;
  left: 37%;
  width: 26%;
  height: 30%;
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  border: 1px solid var(--product-glass-border);
  border-radius: var(--radius-md);
  background: var(--product-glass-solid);
  box-shadow: var(--product-shadow);
  text-align: center;
}
.relay-vault { width: 1.75rem; height: 1.75rem; color: var(--product-accent); }
.relay-node strong { display: block; font-size: var(--text-sm); }
.relay-node small { display: block; font-size: var(--text-2xs); line-height: 1.4; color: var(--product-muted); }
.p2p-hosting-layout { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-10); align-items: center; }
.p2p-hosting-visual {
  padding: var(--space-9);
  border: 1px solid transparent;
  border-radius: var(--product-stage-radius);
  text-align: center;
}
/* Blur only the background perimeter: diagrams, captions and flag remain sharp. */
.p2p-hero-diagram,
.p2p-mini-diagram,
.p2p-hosting-visual {
  position: relative;
  isolation: isolate;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.p2p-hero-diagram::before,
.p2p-mini-diagram::before,
.p2p-hosting-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--product-dark-gradient);
  filter: blur(var(--p2p-panel-edge-blur));
  pointer-events: none;
}
.p2p-hosting-visual::before {
  background: var(--product-stage-gradient);
  filter: blur(var(--product-stage-wash-blur));
}
.p2p-hosting-flag {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  padding: var(--space-8);
  border: 1px solid var(--product-glass-border);
  border-radius: var(--radius-xl);
  background: var(--product-glass);
  box-shadow: var(--product-shadow);
}
.p2p-france-flag { width: min(100%, 11.25rem); height: auto; border-radius: var(--radius-sm); box-shadow: var(--product-shadow); margin-bottom: var(--space-3); }
.p2p-hosting-flag strong { font-size: var(--text-xl); letter-spacing: -0.045em; }
.p2p-hosting-flag > span { color: var(--product-muted); font-size: var(--text-sm); }
.p2p-hosting-visual > p { margin-top: var(--space-7); font-size: var(--text-sm); color: var(--product-muted); }
.p2p-hosting-visual > p strong { color: var(--product-accent); font-weight: 600; }
.p2p-hosting .text-link { margin-top: var(--space-6); }
.motion-enabled .relay-scene .phone-one { translate: calc(var(--scene-progress, 0) * var(--p2p-node-shift)) 0; }
.motion-enabled .relay-scene .phone-two { translate: calc(var(--scene-progress, 0) * var(--p2p-node-shift) * -1) 0; }
.motion-enabled .network-halo { translate: 0 calc(var(--scene-progress, 0) * var(--product-parallax-glow)); }
.motion-enabled .mini-note { translate: 0 calc(var(--scene-progress, 0) * -12px); }
.motion-enabled .p2p-hosting-flag { translate: 0 calc(var(--scene-progress, 0) * var(--p2p-hosting-shift)); }
.mini-phone {
  position: absolute;
  width: 50%;
  height: 76%;
  left: 25%;
  top: 12%;
  border: 1px solid var(--product-dark-line);
  outline: 1px solid var(--product-dark-line);
  border-radius: var(--radius-lg);
  background: var(--product-dark-glass);
  padding: var(--space-5) var(--space-3);
  text-align: center;
  display: grid;
  align-content: center;
  gap: var(--space-4);
  box-shadow: var(--product-shadow);
}
.mini-phone > span {
  font-size: var(--text-xs);
  font-weight: 600;
}
.mini-phone > small {
  font-size: var(--text-2xs);
  color: var(--product-dark-muted);
}
.mini-note {
  background: var(--product-glass-solid);
  border: 1px solid var(--product-glass-border);
  box-shadow: var(--shadow-soft);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  color: var(--product-accent);
}
.p2p-principles-section {
  padding-block: var(--product-section-space);
  background: var(--product-dark-gradient);
  color: var(--product-white);
}
.p2p-principles-section h2,
.p2p-principles-section h3 {
  color: var(--product-white);
}
.p2p-principles-section h2 span {
  color: var(--app-light-blue);
}
.p2p-principles-section .p2p-section-intro p {
  color: var(--product-dark-muted);
}
.p2p-principles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-9) var(--space-10);
}
.p2p-principles article {
  border-top: 1px solid var(--product-dark-line);
  padding-top: var(--space-6);
}
.principle-number {
  display: block;
  margin-bottom: var(--space-5);
  font-size: var(--text-xs);
  color: var(--app-light-blue);
}
.p2p-principles h3 {
  font-size: 1.3rem;
  margin-bottom: var(--space-4);
}
.p2p-principles article p {
  font-size: var(--text-sm);
  color: var(--product-dark-muted);
  max-width: 48ch;
}
.p2p-transparency {
  padding-bottom: 0;
}
.p2p-transparency-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-10);
  padding: var(--space-9);
  border: 1px solid var(--product-glass-border);
  border-radius: var(--product-stage-radius);
  background: var(--product-glass);
  box-shadow: var(--product-shadow);
}
.p2p-transparency-panel p {
  margin-top: var(--space-5);
  font-size: var(--text-sm);
  color: var(--product-muted);
}
.p2p-transparency-panel > div:last-child p:first-child {
  margin-top: 0;
}
.p2p-transparency-panel .text-link {
  margin-top: var(--space-6);
}
.p2p-end {
  padding-top: 0;
}
.p2p-end .product-button {
  margin-top: var(--space-7);
  font-size: var(--text-sm);
}
.product-nav [aria-current="page"] {
  color: var(--product-accent);
}
@media (max-width: 1000px) {
  .p2p-hero-layout { grid-template-columns: 1fr; gap: var(--space-7); }
  .p2p-hero .hero-copy { max-width: 42rem; }
  .p2p-hero-network { width: min(100%, 39rem); margin-inline: auto; }
  .p2p-section-intro { grid-template-columns: 1fr; gap: var(--space-5); }
  .p2p-explain-layout, .p2p-transparency-panel, .p2p-hosting-layout { gap: var(--space-8); }
  .p2p-steps { gap: var(--space-5); }
  .p2p-step h3 { font-size: var(--text-lg); }
}
@media (max-width: 760px) {
  .p2p-hero { padding-top: var(--space-8); }
  .p2p-hero h1 { font-size: clamp(2.4rem, 7.2vw, 3.7rem); }
  .p2p-explain-layout, .p2p-transparency-panel, .p2p-hosting-layout { grid-template-columns: 1fr; }
  .p2p-network, .p2p-hosting-visual { width: min(100%, 39rem); margin-inline: auto; }
  .p2p-steps { grid-template-columns: 1fr; gap: var(--space-8); }
  .p2p-step { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-6); align-content: center; }
  .p2p-mini-diagram { grid-row: span 2; margin: 0; }
  .p2p-step h3 { align-self: end; }
  .p2p-transparency-panel { padding: var(--space-7); }
  .p2p-principles { gap: var(--space-8); }
}
@media (max-width: 540px) {
  .p2p-steps { gap: var(--space-9); }
  .p2p-step { display: block; }
  .p2p-mini-diagram { margin-bottom: var(--space-6); }
  .p2p-hero-diagram, .p2p-transparency-panel, .p2p-hosting-visual { padding: var(--space-6); }
  .relay-scene { --p2p-relay-height: 24rem; }
  .schematic-phone { min-height: 12rem; padding: var(--space-5) var(--space-2); width: 33%; }
  .phone-one { left: 2%; }
  .phone-two { right: 2%; }
  .schematic-sheets { padding: var(--space-3); }
  .schematic-sheets .icon { width: 1.5rem; height: 1.5rem; }
  .schematic-phone strong { font-size: 0.72rem; }
  .schematic-phone small { font-size: 0.65rem; }
  .relay-node { width: 28%; left: 36%; }
  .relay-node small { font-size: 0.65rem; }
  .p2p-principles { grid-template-columns: 1fr; }
  .p2p-hosting-flag { padding: var(--space-6); }
}
@media (prefers-reduced-motion: reduce) {
  .p2p-flow-packet { display: none; animation: none; }
  .motion-enabled .relay-scene .schematic-phone,
  .motion-enabled .network-halo,
  .motion-enabled .mini-note,
  .motion-enabled .p2p-hosting-flag { translate: none; }
}