:root {
  color-scheme:dark;
  --bg:#0c0d0e;
  --panel:#141517;
  --line:#292a2d;
  --text:#f2f0eb;
  --muted:#a0a09f;
  --accent:#edff9a;
  --sans:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Consolas,monospace;
}
* {
  box-sizing:border-box;
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:32px;
}
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:16px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;
}
button,input {
  font:inherit;
}
button,a,input {
  touch-action:manipulation;
}
button,a {
  -webkit-tap-highlight-color:transparent;
}
button {
  cursor:pointer;
}
a {
  color:inherit;
  text-decoration:none;
}
button {
  color:inherit;
}
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:5px;
}
h1,h2,h3,h4,p {
  margin:0;
}
h1,h2,h3,h4 {
  font-weight:500;
}
em {
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
}
button {
  border:0;
}
button:disabled {
  cursor:default;
}
button:hover:not(:disabled) {
  filter:brightness(1.15);
}
.shell {
  width:min(1200px,calc(100% - 96px));
  margin-inline:auto;
}
.skip {
  position:fixed;
  z-index:20;
  top:8px;
  left:8px;
  background:var(--accent);
  color:#111;
  padding:12px;
  transform:translateY(-200%);
}
.skip:focus {
  transform:none;
}
.masthead {
  height:100px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
}
.brand {
  font-size:27px;
  font-weight:650;
  letter-spacing:-1.5px;
  display:flex;
  align-items:center;
  gap:9px;
}
.brand-period {
  font-size:10px;
  align-self:flex-start;
  margin:10px 0 0 -5px;
}
.brand-icon {
  display:flex;
  align-items:center;
  gap:3px;
  width:27px;
  height:27px;
  transform:skew(-12deg);
}
.brand-icon i {
  width:6px;
  height:21px;
  background:var(--accent);
  border-radius:2px;
}
.brand-icon i:nth-child(2) {
  height:27px;
}
.masthead nav {
  display:flex;
  gap:32px;
  font-size:13px;
  color:#b8b8b5;
}
.masthead nav a:hover {
  color:var(--accent);
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:34px;
  background:var(--accent);
  color:#171c0e;
  border:1px solid var(--accent);
  border-radius:7px;
  padding:16px 24px;
  font-size:14px;
  font-weight:600;
  line-height:1.4;
  transition:background .2s,transform .2s;
}
.button:hover {
  background:#f4ffc4;
  transform:translateY(-2px);
}
.button-small {
  padding:12px 16px;
  font-size:12px;
  gap:20px;
}
.masthead .button {
  background:#20231c;
  color:var(--accent);
  border-color:#3a4030;
}
.eyebrow,.feature-index {
  font:10px/1.6 var(--mono);
  letter-spacing:1.7px;
  color:var(--muted);
}
.eyebrow {
  display:flex;
  align-items:center;
  gap:9px;
}
.status-dot {
  display:inline-block;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 10px #edff9a30;
  flex-shrink:0;
}
.hero {
  padding-top:78px;
  text-align:center;
}
.hero .eyebrow {
  justify-content:center;
}
.hero h1 {
  font-size:clamp(56px,6.8vw,90px);
  line-height:1.02;
  letter-spacing:-5px;
  margin-top:25px;
}
.hero h1 .hero-highlight {
  color:var(--accent);
  font-family:Georgia,"Times New Roman",serif;
  font-style:italic;
  font-weight:400;
}
.hero-copy {
  color:var(--muted);
  font-size:17px;
  line-height:1.7;
  margin-top:27px;
}
.hero-actions {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  margin-top:30px;
}
.hero-actions .button {
  gap:10px;
}
.quiet {
  font-size:11px;
  color:var(--muted);
}
.browser {
  border:1px solid #42443a;
  border-radius:12px;
  overflow:hidden;
  background:#151618;
  box-shadow:0 35px 100px #0007,0 0 100px #b7cd4a08;
}
.hero-browser {
  margin-top:60px;
  text-align:left;
  transform:perspective(1600px) rotateX(3deg);
  transform-origin:bottom center;
}
.browser-top {
  height:42px;
  display:flex;
  align-items:center;
  border-bottom:1px solid #2c2c2d;
  gap:20px;
  padding:0 18px;
  background:#1a1b1d;
}
.window-dots {
  display:flex;
  gap:6px;
}
.window-dots i {
  width:7px;
  height:7px;
  background:#4d4e50;
  border-radius:50%;
}
.window-dots i:first-child {
  background:#8e6b5a;
}
.browser-tab {
  height:34px;
  align-self:end;
  border:1px solid #353638;
  border-bottom:0;
  border-radius:7px 7px 0 0;
  padding:7px 12px;
  display:flex;
  align-items:center;
  gap:16px;
  font-size:10px;
  color:#b6b6b1;
  background:#232427;
}
.tiny-mark {
  color:var(--accent);
}
.browser-plus {
  font-size:16px;
  color:#81817c;
}
.browser-label {
  margin-left:auto;
  font:8px var(--mono);
  letter-spacing:2px;
  color:#82847e;
}
.browser-address {
  height:45px;
  display:flex;
  align-items:center;
  gap:22px;
  padding:0 20px;
  font-size:12px;
  color:#9b9b99;
}
.address {
  background:#0e0f10;
  border:1px solid #292a2c;
  border-radius:5px;
  padding:5px 12px;
  display:flex;
  gap:10px;
  flex:1;
  max-width:650px;
  margin:auto;
  font-size:10px;
}
.shield-label {
  color:var(--accent);
  font-size:9px;
}
.wall-preview {
  height:455px;
  position:relative;
  overflow:hidden;
  background:#171719;
}
.wall-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:225px;
  gap:7px;
  padding:7px;
  transform:scale(1.08);
  animation:wall-drift 18s ease-in-out infinite alternate;
  animation-play-state:var(--wall-state,running);
}
.scene {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:#413721;
}
.scene:before {
  content:"";
  position:absolute;
  inset:-25%;
  z-index:-1;
  background:radial-gradient(ellipse at 65% 35%,var(--glow,#e7ad74) 0,transparent 40%),radial-gradient(ellipse at 15% 90%,var(--shadow,#2b140e),transparent 65%),linear-gradient(145deg,var(--tone,#836344),#171614);
  transform:rotate(-18deg);
}
.scene:after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,#0005,transparent 50%);
  pointer-events:none;
  z-index:1;
}
.scene-amber {
  --glow:#e1ae72;
  --tone:#8c6349;
  --shadow:#24100c;
}
.scene-violet {
  --glow:#a39aba;
  --tone:#676476;
  --shadow:#231e33;
}
.scene-mint {
  --glow:#bcc7a3;
  --tone:#607267;
  --shadow:#172b29;
}
.scene-rose {
  --glow:#d9aaa4;
  --tone:#865f5e;
  --shadow:#311a26;
}
.scene-orbit {
  position:absolute;
  width:90%;
  height:160%;
  left:35%;
  top:-25%;
  border-radius:50%;
  transform:rotate(-32deg);
  background:linear-gradient(110deg,#fff1 12%,#fff5 20%,#fff0 28%,#0002 35%,#000c 75%);
  box-shadow:inset 18px 0 30px #fff2,-20px 10px 40px #0003;
}
.wall-tile {
  border-radius:5px;
}
.wall-tile:nth-child(2n) .scene-orbit {
  transform:rotate(38deg);
  left:12%;
}
.wall-tile:nth-child(3n) {
  filter:brightness(.8);
}
.tile-number {
  position:absolute;
  bottom:16px;
  left:18px;
  color:#ffffff9c;
  font:8px var(--mono);
  letter-spacing:2px;
  z-index:2;
}
.wall-shade {
  position:absolute;
  inset:0;
  background:linear-gradient(transparent 15%,#0003 45%,#000c);
}
.wall-floating {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  text-align:center;
  white-space:nowrap;
  text-shadow:0 2px 25px #0008;
}
.wall-floating strong {
  font-size:clamp(20px,3vw,35px);
  font-weight:500;
  display:block;
  letter-spacing:-1px;
}
.wall-floating>span:last-child {
  font-size:12px;
  color:#ddd;
}
.wall-toolbar {
  position:absolute;
  bottom:24px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:22px;
  align-items:center;
  padding:12px 18px;
  background:#131514e8;
  border:1px solid #ffffff26;
  border-radius:9px;
  backdrop-filter:blur(20px);
  white-space:nowrap;
  font-size:10px;
  box-shadow:0 10px 35px #0004;
}
.wall-toolbar label {
  display:flex;
  gap:8px;
  align-items:center;
  color:#b0b1aa;
}
.wall-toolbar input {
  width:80px;
}
.wall-toolbar button {
  background:#2c2e28;
  border-radius:4px;
  font-size:10px;
  padding:5px 9px;
}
.hero-caption {
  display:flex;
  justify-content:space-between;
  margin-top:20px;
  color:#94978e;
  font:9px/1.6 var(--mono);
}
.hero-caption>span:first-child {
  display:flex;
  align-items:center;
  gap:8px;
  letter-spacing:1px;
}
.feature-strip {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  border-bottom:1px solid var(--line);
  padding-block:47px;
  color:#a8aaa3;
  font-size:12px;
}
.feature-strip i {
  font-size:18px;
  color:#575d4c;
  font-style:normal;
}
.experience {
  padding-top:105px;
}
.section-heading h2,.speed-section h2,.wall-note h2 {
  font-size:clamp(34px,4vw,49px);
  line-height:1.15;
  letter-spacing:-2px;
  margin-top:22px;
}
.section-heading h2>span,.wall-note h2>span {
  color:#82867d;
}
.section-heading>p:last-child {
  color:var(--muted);
  font-size:14px;
  margin-top:22px;
}
.feature-row {
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:85px;
  align-items:center;
  margin-top:75px;
  margin-bottom:110px;
}
.feature-copy h3,.loop-copy h3 {
  font-size:33px;
  line-height:1.17;
  letter-spacing:-1.25px;
  margin-top:22px;
}
.feature-copy>p,.loop-copy>p {
  color:var(--muted);
  font-size:14px;
  line-height:1.85;
  margin-top:22px;
  max-width:380px;
}
.feature-note {
  display:flex;
  align-items:center;
  gap:12px;
  color:#c5c7ba;
  font-size:11px;
  margin-top:28px;
}
.feature-note>span {
  color:var(--accent);
  font-size:20px;
}
.demo {
  border:1px solid #30322d;
  border-radius:12px;
  background:linear-gradient(135deg,#1c1e1a,#141514);
  overflow:hidden;
  min-width:0;
}
.demo-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font:8px/1.5 var(--mono);
  letter-spacing:1px;
  color:#a3a69a;
  padding:19px 23px;
  border-bottom:1px solid #ffffff0a;
}
.demo-tag {
  font-size:7px;
  border:1px solid #4a4d40;
  border-radius:4px;
  padding:3px 6px;
  color:var(--accent);
}
.ad-demo {
  padding-bottom:20px;
}
.ad-page {
  margin:20px 30px 0;
  position:relative;
  height:215px;
  border:1px solid #ffffff12;
  border-radius:5px;
  padding:16px;
  background:#101110;
  overflow:hidden;
}
.fake-page-head {
  display:flex;
  gap:8px;
  height:21px;
}
.fake-page-head span {
  background:#686d5c;
  width:70px;
  height:6px;
  border-radius:2px;
  margin-right:auto;
}
.fake-page-head i {
  background:#363a31;
  width:24px;
  height:4px;
}
.ad-banner {
  height:31px;
  background:#97715b33;
  border:1px dashed #b38a714d;
  border-radius:3px;
  color:#c7a489;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 10px;
  font:7px var(--mono);
  letter-spacing:1px;
  transition:opacity .35s,height .35s,margin .35s;
  margin-bottom:10px;
}
.ad-content {
  display:grid;
  grid-template-columns:1fr 65px;
  gap:14px;
}
.ad-content .scene {
  height:130px;
  border-radius:4px;
  transition:height .35s;
}
.fake-lines i {
  height:25px;
  margin-bottom:10px;
  display:block;
  background:#242722;
  border-radius:3px;
}
.media-play {
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:#fff9;
  font-size:22px;
  z-index:2;
}
.ad-popup {
  position:absolute;
  right:10px;
  bottom:10px;
  background:#705344;
  border:1px solid #b28b6c;
  border-radius:5px;
  padding:18px;
  color:#fff;
  font:10px var(--mono);
  box-shadow:0 10px 25px #0006;
  transition:opacity .35s,transform .35s;
}
.ad-popup span {
  display:block;
  font:8px var(--sans);
  margin-top:8px;
}
.ad-demo[data-blocked=true] .ad-banner {
  height:0;
  opacity:0;
  margin:0;
  border:0;
}
.ad-demo[data-blocked=true] .ad-popup {
  opacity:0;
  transform:translateY(20px);
  pointer-events:none;
}
.ad-demo[data-blocked=true] .ad-content .scene {
  height:155px;
}
.blocker-card {
  position:relative;
  display:flex;
  align-items:center;
  gap:13px;
  background:#24271f;
  border:1px solid #535b3a;
  border-radius:9px;
  padding:16px 19px;
  margin:-8px 50px 0;
  box-shadow:0 15px 30px #0005;
  z-index:3;
}
.shield-icon {
  font-size:27px;
  color:var(--accent);
}
.blocker-card strong {
  font-size:13px;
  font-weight:500;
  display:block;
}
.blocker-card div>span {
  display:block;
  font-size:10px;
  color:#acb19d;
  margin-top:2px;
}
.switch {
  margin-left:auto;
  width:35px;
  height:21px;
  background:var(--accent);
  border-radius:20px;
  padding:3px;
  flex-shrink:0;
}
.switch span {
  width:15px;
  height:15px;
  background:#263117;
  display:block;
  border-radius:50%;
  transform:translateX(14px);
  transition:transform .2s;
}
.switch[aria-checked=false] {
  background:#66695e;
}
.switch[aria-checked=false] span {
  transform:none;
}
.demo-hint {
  text-align:center;
  font-size:9px;
  color:#989c8e;
  margin-top:18px;
}
.reverse {
  grid-template-columns:1.15fr 1fr;
}
.reverse .feature-copy {
  order:2;
}
.reverse .demo {
  order:1;
}
.player-screen {
  height:265px;
  margin:0 14px;
  border-radius:5px;
}
.scene-word {
  position:absolute;
  left:25px;
  bottom:35px;
  z-index:3;
  font:italic 37px/1.1 Georgia,serif;
  color:#fff9;
  letter-spacing:-1px;
}
.player-badge {
  position:absolute;
  top:16px;
  left:17px;
  font:7px var(--mono);
  letter-spacing:2px;
  color:#ffffffa6;
  z-index:3;
}
.player-controls {
  display:flex;
  align-items:center;
  gap:12px;
  padding:18px;
}
.player-controls button {
  background:transparent;
  font-size:13px;
  padding:5px;
}
.player-controls>span {
  font:9px var(--mono);
  color:#c1c4b6;
}
.player-controls input {
  min-width:30px;
  flex:1;
  width:100%;
}
input[type=range] {
  accent-color:var(--accent);
  height:18px;
  cursor:pointer;
}
.loop-section {
  border-block:1px solid #292d23;
  background:radial-gradient(ellipse at 50% 0%,#a7ba6e09,transparent 60%),#11130f;
  padding:95px 0 70px;
}
.centered {
  text-align:center;
}
.centered .eyebrow {
  justify-content:center;
}
.centered h2 {
  font-size:56px;
}
.centered h2 em {
  color:var(--accent);
}
.loop-layout {
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:90px;
  align-items:center;
  margin-top:60px;
}
.loop-screen {
  height:265px;
  margin:16px 16px 0;
  border-radius:5px;
}
.loop-badge {
  position:absolute;
  right:14px;
  top:14px;
  background:#171a15a6;
  color:var(--accent);
  font:9px var(--mono);
  padding:8px 11px;
  border:1px solid #ffffff30;
  border-radius:5px;
  z-index:3;
}
.timeline {
  position:relative;
  margin:20px 20px 5px;
  height:54px;
}
.timeline-frames {
  display:flex;
  gap:3px;
  height:100%;
  border-radius:4px;
  overflow:hidden;
}
.timeline-frames span {
  flex:1;
  background:linear-gradient(115deg,#7a7188,#b0a3b2 25%,#595063 45%,#33303d);
}
.timeline-frames span:nth-child(2n) {
  background:linear-gradient(135deg,#7a7188,#b0a3b2 40%,#595063 65%,#33303d);
}
.loop-selection {
  position:absolute;
  top:-3px;
  bottom:-3px;
  left:26.66%;
  width:40%;
  border:2px solid var(--accent);
  border-radius:4px;
  display:flex;
  justify-content:space-between;
  background:#edff9a12;
  pointer-events:none;
}
.loop-handle {
  position:absolute;
  top:-2px;
  bottom:-2px;
  width:24px;
  padding:0;
  background:transparent;
  pointer-events:auto;
  touch-action:none;
  cursor:ew-resize;
  z-index:2;
}
.loop-handle::before {
  content:"";
  position:absolute;
  width:6px;
  inset-block:0;
  left:9px;
  background:var(--accent);
  border-radius:3px;
}
.loop-handle-start { left:-13px; }
.loop-handle-end { right:-13px; }
.loop-selection i {
  position:absolute;
  top:0;
  bottom:0;
  width:1px;
  left:0;
  background:#fff;
  animation:playhead 3s linear infinite;
}
.loop-bottom {
  padding:15px 20px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
}
.loop-bottom>span {
  color:#a4a997;
  font-size:9px;
}
.mini-divider {
  height:1px;
  background:#2f3527;
  width:40px;
  margin:30px 0;
}
.loop-copy h3 {
  font-size:28px;
  margin-top:13px;
}
.loop-copy>p {
  font-size:13px;
  margin-top:15px;
}
.library {
  margin-top:58px;
  border-top:1px solid #303528;
  padding-top:28px;
}
.library-title {
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.library-title h4 {
  font-size:18px;
  margin-top:7px;
  letter-spacing:-.4px;
}
.library-title>span {
  font:9px var(--mono);
  color:#9ba28c;
}
.library-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-top:22px;
}
.library-card {
  min-width:0;
}
.library-card>.scene {
  height:150px;
  border:1px solid #ffffff12;
  border-radius:7px;
}
.clip-duration {
  position:absolute;
  bottom:10px;
  right:10px;
  font:9px var(--mono);
  padding:4px 8px;
  border-radius:4px;
  background:#10120fa6;
  color:#e4e6de;
  z-index:3;
}
.library-card>div:last-child {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:11px 2px;
  gap:10px;
}
.library-card strong {
  font-size:11px;
  font-weight:500;
}
.library-card>div:last-child>span {
  font:8px var(--mono);
  color:#969c8c;
}
.library-status {
  font-size:10px;
  color:#9ca38e;
  margin-top:12px;
  min-height:18px;
}
.speed-section {
  padding-top:10px;
}
.speed-section .feature-row {
  margin-block:90px;
}
.speed-section h2 {
  margin-top:18px;
}
.wall-note {
  border-block:1px solid var(--line);
  padding-block:65px;
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:85px;
}
.wall-note>.feature-index {
  grid-column:1/-1;
}
.wall-note h2 {
  grid-row:2/4;
}
.wall-note p {
  color:var(--muted);
  font-size:14px;
  margin-top:26px;
  max-width:420px;
}
.text-link {
  font-size:12px;
  color:var(--accent);
  margin-top:22px;
}
.faq-section {
  padding-block:95px;
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:85px;
}
.faq-section h2 {
  font-size:34px;
  letter-spacing:-1px;
  margin-top:18px;
}
.faq details {
  border-bottom:1px solid var(--line);
}
.faq summary {
  display:flex;
  justify-content:space-between;
  gap:20px;
  list-style:none;
  font-size:13px;
  cursor:pointer;
  padding:20px 0;
}
.faq summary::-webkit-details-marker {
  display:none;
}
.faq summary span {
  color:#8c9381;
}
.faq details[open] summary span {
  transform:rotate(45deg);
}
.faq details p {
  font-size:12px;
  color:var(--muted);
  line-height:1.8;
  padding-bottom:22px;
}
.closing {
  text-align:center;
  padding:80px 0 85px;
  background:radial-gradient(ellipse at 50% 120%,#8caa3420,transparent 65%);
  border-top:1px solid var(--line);
}
.closing .eyebrow {
  justify-content:center;
}
.closing h2 {
  font-size:clamp(50px,6vw,76px);
  letter-spacing:-3px;
  line-height:1.08;
  margin-top:25px;
}
.closing h2 em {
  color:var(--accent);
}
.closing p {
  font-size:14px;
  color:var(--muted);
  margin-top:24px;
}
.launch-pill {
  display:inline-flex;
  align-items:center;
  gap:30px;
  border:1px solid #414b2e;
  border-radius:7px;
  background:#242b1b;
  padding:14px 18px;
  margin-top:30px;
  font-size:13px;
}
.launch-pill span {
  font:9px var(--mono);
  color:var(--accent);
  padding-left:20px;
  border-left:1px solid #424d2e;
}
footer {
  min-height:120px;
  border-top:1px solid var(--line);
  display:flex;
  gap:30px;
  align-items:center;
}
footer .brand {
  font-size:23px;
}
footer>span,footer>a:not(.brand) {
  font-size:10px;
  color:#9c9f95;
}
footer>a:not(.brand) {
  margin-left:auto;
}
.feature-media {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:2;
}
.player-demo:fullscreen {
  display:flex;
  flex-direction:column;
  justify-content:center;
  max-width:none;
  background:#101210;
}
.player-demo:fullscreen .player-screen {
  height:75vh;
}
.legal {
  max-width:750px;
  padding-block:75px;
}
.legal h1 {
  font-size:44px;
  letter-spacing:-2px;
}
.legal h2 {
  margin-top:32px;
  font-size:24px;
}
.legal p {
  color:var(--muted);
  margin-top:18px;
}
.legal a {
  text-decoration:underline;
}
@keyframes wall-drift {
  from {
    transform:scale(1.08) translateX(1.5%);
  }
  to {
    transform:scale(1.08) translateX(-1.5%);
  }
}
@keyframes playhead {
  from {
    left:0;
  }
  to {
    left:100%;
  }
}
@media(min-width:1500px) {
  .shell {
    width:min(1280px,calc(100% - 120px));
  }
  .hero h1 {
    font-size:96px;
  }
  .wall-preview {
    height:490px;
  }
  .wall-grid {
    grid-auto-rows:250px;
  }
}
@media(max-width:1000px) {
  .shell {
    width:calc(100% - 56px);
  }
  .masthead nav {
    gap:20px;
  }
  .feature-row,.loop-layout,.faq-section,.wall-note {
    gap:40px;
  }
  .hero h1 {
    letter-spacing:-3px;
  }
  .feature-copy h3 {
    font-size:29px;
  }
  .wall-preview {
    height:380px;
  }
  .wall-grid {
    grid-auto-rows:195px;
  }
  .blocker-card {
    margin-inline:28px;
  }
  .loop-layout {
    grid-template-columns:1.2fr 1fr;
  }
  .library-card>div:last-child {
    align-items:start;
    flex-direction:column;
    gap:4px;
  }


}
@media(max-width:720px) {
  .shell {
    width:calc(100% - 40px);
  }
  .masthead {
    height:78px;
  }
  .masthead nav {
    display:none;
  }
  .masthead .button-small {
    font-size:10px;
    padding:10px 12px;
    gap:12px;
  }
  .brand {
    font-size:24px;
  }
  .hero {
    padding-top:50px;
  }
  .hero h1 {
    font-size:60px;
    letter-spacing:-3px;
  }
  .hero-copy {
    font-size:15px;
  }
  .hero-actions {
    gap:14px;
    flex-direction:column;
  }
  .hero-browser {
    margin-top:38px;
    transform:none;
  }
  .browser-top {
    height:34px;
    padding-inline:12px;
    gap:12px;
  }
  .browser-tab {
    height:29px;
    font-size:8px;
  }
  .browser-label {
    display:none;
  }
  .browser-address {
    height:38px;
    padding-inline:12px;
    gap:10px;
  }
  .browser-address>span:first-child {
    display:none;
  }
  .address {
    font-size:8px;
  }
  .shield-label {
    font-size:7px;
  }
  .wall-preview {
    height:310px;
  }
  .wall-grid {
    grid-template-columns:repeat(3,1fr);
    grid-auto-rows:160px;
    width:130%;
    margin-left:-15%;
  }
  .tile-number {
    font-size:6px;
    left:8px;
  }
  .wall-floating strong {
    font-size:23px;
  }
  .wall-floating>span:last-child {
    font-size:10px;
  }
  .wall-toolbar {
    bottom:16px;
    gap:12px;
    padding:9px 12px;
    font-size:8px;
  }
  .wall-toolbar input {
    width:55px;
  }
  .wall-toolbar button {
    font-size:8px;
  }
  .hero-caption {
    flex-direction:column;
    align-items:center;
    gap:8px;
    font-size:8px;
  }
  .feature-strip {
    flex-wrap:wrap;
    justify-content:center;
    gap:15px 20px;
    padding-block:32px;
    font-size:10px;
  }
  .feature-strip i {
    font-size:12px;
  }
  .feature-strip i:nth-of-type(2) {
    display:none;
  }
  .experience {
    padding-top:65px;
  }
  .section-heading h2 {
    font-size:33px;
    letter-spacing:-1.5px;
  }
  .section-heading>p:last-child {
    font-size:13px;
  }
  .feature-row,.reverse,.loop-layout,.faq-section,.wall-note {
    grid-template-columns:1fr;
    gap:30px;
  }
  .feature-row {
    margin-block:45px 65px;
  }
  .reverse .feature-copy,.reverse .demo {
    order:initial;
  }
  .feature-copy>p {
    max-width:none;
  }
  .feature-copy h3 {
    font-size:31px;
  }
  .feature-note {
    margin-top:19px;
  }
  .demo {
    width:100%;
  }
  .player-screen {
    height:260px;
  }
  .loop-section {
    padding-block:60px 40px;
  }
  .centered h2 {
    font-size:40px;
  }
  .loop-layout {
    margin-top:35px;
  }
  .loop-copy {
    display:grid;
    grid-template-columns:1fr;
    gap:0;
  }
  .loop-copy h3 {
    font-size:28px;
  }
  .loop-copy>p {
    max-width:none;
  }
  .loop-copy .mini-divider {
    margin-block:25px;
  }
  .library {
    margin-top:35px;
  }
  .library-title h4 {
    font-size:15px;
  }
  .library-title>span {
    font-size:8px;
  }
  .library-grid {
    gap:10px;
  }
  .library-card>.scene {
    height:100px;
  }
  .library-card strong {
    font-size:10px;
  }
  .library-card>div:last-child>span {
    font-size:7px;
  }
  .clip-duration {
    font-size:7px;
    right:5px;
    bottom:5px;
  }
  .speed-section .feature-row {
    margin-block:60px;
  }


  .wall-note {
    padding-block:45px;
    gap:0;
  }
  .wall-note h2 {
    grid-row:auto;
  }
  .wall-note p {
    margin-top:22px;
  }
  .faq-section {
    padding-block:60px;
  }
  .closing {
    padding-block:60px;
  }
  .closing h2 {
    font-size:57px;
  }
  footer {
    flex-wrap:wrap;
    gap:15px 20px;
    padding-block:30px;
  }
  footer>span:first-of-type {
    display:none;
  }
  footer>span:last-child {
    flex-basis:100%;
  }
  .eyebrow,.feature-index {
    font-size:9px;
  }
  .loop-screen {
    height:240px;
  }
}
@media(max-width:380px) {
  .shell {
    width:calc(100% - 32px);
  }
  .hero h1 {
    font-size:51px;
  }
  .masthead .button-small {
    gap:7px;
    font-size:9px;
  }
  .wall-toolbar {
    gap:8px;
  }
  .wall-toolbar input {
    width:40px;
  }
  .loop-bottom {
    flex-wrap:wrap;
  }
  .blocker-card {
    margin-inline:18px;
  }
  .library-title {
    gap:15px;
  }
  .library-title h4 {
    font-size:13px;
  }
  .library-card strong {
    font-size:9px;
  }
  .player-controls {
    gap:7px;
  }
  .scene-word {
    font-size:30px;
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,*::before,*::after {
    animation:none!important;
    transition:none!important;
  }
  .hero-browser {
    transform:none;
  }
}
/* Keep controls above optional footage, and hide placeholder words once supplied. */
.wall-shade {
  z-index:3;
  pointer-events:none;
}
.wall-floating,.wall-toolbar {
  z-index:4;
}
.has-media>.scene-word,.has-media>.scene-orbit {
  visibility:hidden;
}
.no-script {
  text-align:center;
  padding:12px 20px;
  background:#242b1b;
  color:#d5ddc4;
  font-size:12px;
}

/* Small demo controls retain comfortable pointer and keyboard targets. */
.wall-toolbar button, .text-button {
  min-height: 28px;
  min-width: 28px;
}
.player-controls button {
  min-height: 32px;
  min-width: 28px;
}

/* A distinct, full-width surface separates the comparison from the hero copy. */
.hero-comparison {
  margin-top:60px;
  padding:64px 0 48px;
  background:#141712;
  border-block:1px solid #272d22;
}
.comparison-heading {
  text-align:center;
  margin-bottom:48px;
}
.comparison-heading p {
  color:var(--muted);
  font-size:clamp(14px,1.3vw,17px);
  line-height:1.6;
}
.comparison-heading p span {
  font-style:italic;
  font-weight:500;
  text-decoration:underline;
}
.comparison-heading h2 {
  max-width:900px;
  margin:14px auto 0;
  font-size:clamp(30px,3.5vw,48px);
  font-weight:500;
  line-height:1.15;
  letter-spacing:-1.6px;
  text-wrap:balance;
}
.comparison-heading h2 span {
  display:block;
  color:var(--accent);
}
/* Original before/after execution, integrated with the desktop site's palette. */
.ba {
  display:grid;
  grid-template-columns:minmax(0,1fr) 48px minmax(0,1fr);
  gap:14px 16px;
  width:min(1680px,calc(100vw - 64px));
  margin:0 auto;
  text-align:left;
}
.ba-lead {
  margin:0;
  font:400 clamp(22px,2.2vw,30px)/1.3 var(--sans);
  letter-spacing:-0.6px;
  color:var(--text);
  text-align:center;
  padding-bottom:10px;
}
.ba-lead-before { grid-column:1; grid-row:1; }
.ba-lead-after { grid-column:3; grid-row:1; color:var(--accent); }
.bw {
  min-width:0;
  margin:0;
  overflow:hidden;
  border:1px solid #353733;
  border-radius:10px;
  background:#151618;
  box-shadow:0 20px 50px #0004;
}
.bw-before { grid-column:1; grid-row:2; }
.bw-after { grid-column:3; grid-row:2; border-color:#50593b; }
.bw-chrome { background:#1a1b1d; }
.bw-bar { display:flex; align-items:center; gap:13px; height:38px; padding:0 13px; }
.bw-dots { display:flex; gap:5px; flex-shrink:0; }
.bw-dots i { width:8px; height:8px; border-radius:50%; background:#f16d65; }
.bw-dots i:nth-child(2) { background:#e9bf53; }
.bw-dots i:nth-child(3) { background:#6abb78; }
.bw-tab { display:flex; align-items:center; gap:8px; align-self:end; width:clamp(135px,32%,210px); min-width:0; height:31px; padding:0 11px; background:#292c2d; border:1px solid #ffffff0e; border-bottom:0; border-radius:8px 8px 0 0; }
.bw-tab-icon { width:12px; height:12px; flex-shrink:0; color:#9a9e98; }
.bw-after .bw-tab-icon { color:var(--accent); }
.bw-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:11px var(--sans); color:#c2c7bc; }
.bw-tab-close { margin-left:auto; color:#93998f; font-size:15px; }
.bw-new-tab { font-size:20px; font-weight:400; color:#a2a79d; }
.bw-toolbar { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px; padding:7px 13px; height:43px; background:#292c2d; border-bottom:1px solid #ffffff0c; }
.bw-toolbar svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.bw-navigation { display:flex; align-items:center; gap:12px; color:#a3aa9d; }
.bw-navigation svg:nth-child(2) { opacity:.4; }
.bw-address { display:flex; align-items:center; gap:8px; min-width:0; height:28px; padding:0 10px; border:1px solid #ffffff0b; border-radius:6px; background:#181b1a; color:#9ca596; font:10px var(--sans); }
.bw-address svg { width:12px; height:12px; color:#87917f; }
.bw-address span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bw-menu { color:#a3aa9d; }
.bw-after .bw-toolbar { grid-template-columns:auto minmax(0,1fr) auto auto; }
.bw-wall-toggle { display:inline-flex; align-items:center; gap:7px; height:28px; padding:0 3px; border:0; border-radius:5px; background:transparent; color:#cdd2c8; font:500 11px var(--sans); white-space:nowrap; cursor:pointer; }
.bw-wall-toggle:hover:not(:disabled) { background:#ffffff0a; filter:none; }
.bw-wall-toggle:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.bw-wall-switch { position:relative; width:28px; height:16px; flex-shrink:0; border-radius:999px; background:#535a50; box-shadow:inset 0 0 0 1px #ffffff12; transition:background .15s ease; }
.bw-wall-switch>span { position:absolute; width:12px; height:12px; left:2px; top:2px; border-radius:50%; background:#e5e9e0; box-shadow:0 1px 2px #0004; transition:transform .15s ease,background .15s ease; }
.bw-wall-toggle[aria-checked="true"] .bw-wall-switch { background:var(--accent); }
.bw-wall-toggle[aria-checked="true"] .bw-wall-switch>span { transform:translateX(12px); background:#27301e; }
.bw-screen video[hidden] { display:none; }
@media(max-width:720px) {
  .bw-bar { height:34px; padding-inline:10px; gap:10px; }
  .bw-tab { height:28px; width:145px; }
  .bw-toolbar { height:39px; padding:6px 10px; gap:9px; }
  .bw-navigation { gap:8px; }
  .bw-address { height:26px; padding-inline:8px; }
}
.bw-screen { aspect-ratio:1728 / 950; background:#111; }
.bw-screen video { display:block; width:100%; height:100%; object-fit:contain; }
.ba-arrow { grid-column:2; grid-row:2; display:grid; place-items:center; color:var(--accent); font-size:27px; }
.ba-cap { font-size:11px; line-height:1.7; color:var(--muted); margin:0; }
.ba-cap-before { grid-column:1; grid-row:3; }
.ba-cap-after { grid-column:3; grid-row:3; }
.hero-caption { align-items:center; }
.hero-provenance { max-width:760px; margin:14px auto 0; font-size:10px; line-height:1.8; color:var(--muted); }
.hero-caption [hidden] { display:none; }
@media(max-width:999px) {
  .ba { width:calc(100% - 56px); grid-template-columns:minmax(0,1fr); gap:12px; }
  .ba-lead-before,.bw-before,.ba-arrow,.ba-lead-after,.bw-after,.ba-cap-before,.ba-cap-after { grid-column:1; }
  .ba-lead-before { grid-row:1; }
  .bw-before { grid-row:2; }
  .ba-cap-before { grid-row:3; }
  .ba-arrow { grid-row:4; height:30px; }
  .ba-arrow span { transform:rotate(90deg); }
  .ba-lead-after { grid-row:5; }
  .bw-after { grid-row:6; }
  .ba-cap-after { grid-row:7; }
}
@media(max-width:720px) {
  .hero-comparison { margin-top:38px; padding-block:36px 30px; }
  .comparison-heading { margin-bottom:32px; }
  .comparison-heading h2 { letter-spacing:-1px; }
  .ba { width:calc(100% - 40px); }
  .ba-cap { font-size:10px; }
}

/* Player transformation: one piece of footage, two radically different experiences. */
.player-comparison { min-width:0; }
.reverse .player-comparison { order:1; }
.player-demo { position:relative; }
.player-demo .demo-top { min-height:53px; }
.player-demo .player-screen { margin-top:0; }
.player-comparison .player-badge { opacity:0; transition:opacity .45s ease; }
.player-comparison[data-experience="wallreel"] .player-badge { opacity:1; }
.usual-obstacles { position:absolute; inset:0; z-index:5; pointer-events:none; transition:opacity .35s ease,transform .45s ease; }
.usual-banner { position:absolute; top:15px; left:12px; right:12px; padding:14px 26px 14px 12px; background:#962e69; border:2px solid #e2a554; text-align:center; box-shadow:0 6px 25px #0005; }
.usual-banner>span:first-child { display:block; font:8px var(--mono); letter-spacing:2px; color:#f3d4e5; }
.usual-banner strong { display:block; margin-top:4px; font-size:clamp(11px,1.1vw,15px); color:#fff2ba; }
.fake-close { position:absolute; right:6px; top:0; color:#fff; font-size:14px; }
.usual-center-play { position:absolute; top:51%; left:50%; transform:translate(-50%,-50%); background:#090909b3; border:1px solid #ffffff66; border-radius:50%; width:49px; height:49px; display:grid; place-items:center; padding-left:3px; color:#fff; font-size:21px; }
.usual-popup { position:absolute; width:205px; left:50%; top:51%; transform:translate(-50%,-50%); border:1px solid #b1a394; border-radius:4px; background:#e5dfd4; color:#28231e; box-shadow:0 12px 45px #0009; opacity:0; }
.usual-popup>div { padding:7px 10px; background:#bfb6a8; display:flex; justify-content:space-between; font:9px var(--mono); }
.usual-popup strong { display:block; margin:15px 14px 6px; font-size:18px; letter-spacing:-.5px; }
.usual-popup p { margin:0 14px; color:#5d5144; font-size:11px; line-height:1.5; }
.fake-popup-button { display:block; text-align:center; padding:8px; margin:12px 14px; background:#766038; color:#fff; font:9px var(--mono); }
.usual-popunder { position:absolute; bottom:12px; left:10px; right:10px; padding:10px 12px; border:1px solid #ae7d76; background:#582f2d; color:#ffe1d9; font-size:10px; box-shadow:0 5px 15px #0005; opacity:0; }
.usual-popunder>span { margin-right:6px; }
.player-control-stage { display:grid; min-height:108px; }
.usual-controls,.wallreel-controls { grid-area:1/1; min-width:0; transition:opacity .4s ease,transform .4s ease; }
.usual-controls { display:flex; align-items:center; gap:20px; padding:24px; color:#777; background:#1a1a1a; font-size:13px; }
.usual-progress { height:4px; background:#404040; flex:1; position:relative; }
.usual-progress::before { content:""; display:block; width:6%; height:100%; background:#986d6d; }
.wallreel-controls { opacity:0; transform:translateY(5px); }
.player-comparison .player-controls { gap:10px; padding:12px 16px 2px; }
.player-tools { display:flex; align-items:center; gap:14px; padding:0 17px 13px; }
.player-tools button,.player-loop-link { background:#2b3024; border:1px solid #414934; border-radius:5px; padding:5px 9px; font:10px var(--mono); color:#dbe7c5; min-height:28px; }
.volume-control { display:flex; align-items:center; gap:7px; min-width:0; }
.volume-control>span { color:var(--muted); }
.volume-control input { width:65px; }
.quality-control {
  margin-left:auto;
  min-height:28px;
  padding:4px 7px;
  border:1px solid #414934;
  border-radius:5px;
  background:#171b13;
  color:#dbe7c5;
  font:10px var(--mono);
  cursor:pointer;
  color-scheme:dark;
}
.quality-control:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.player-loop-link { white-space:nowrap; }
.player-comparison[data-experience="wallreel"] .usual-obstacles { opacity:0; transform:scale(.97); }
.player-comparison[data-experience="wallreel"] .usual-controls { opacity:0; pointer-events:none; }
.player-comparison[data-experience="wallreel"] .wallreel-controls { opacity:1; transform:none; }
.player-comparison[data-experience="wallreel"] .player-demo { border-color:#505e36; }
.demo-cursor { position:absolute; width:32px; height:42px; top:40%; left:68%; z-index:9; pointer-events:none; filter:drop-shadow(0 3px 3px #0006); opacity:0; }
.demo-click-ring { position:absolute; width:36px; height:36px; border:2px solid #fff9; border-radius:50%; top:calc(51% - 60px); left:49%; z-index:8; pointer-events:none; opacity:0; }
.website-example[data-sequence="true"] .demo-cursor { animation:website-cursor 4s linear infinite both; }
.website-example[data-sequence="true"] .demo-click-ring { animation:website-click 4s linear infinite both; }
.website-example[data-sequence="true"] .usual-popup { animation:unwanted-popup 4s steps(1,end) infinite both; }
.website-example[data-sequence="true"] .usual-popunder { animation:unwanted-window 4s steps(1,end) infinite both; }
.player-comparison[data-running="false"] .demo-cursor,.player-comparison[data-running="false"] .demo-click-ring,.player-comparison[data-running="false"] .usual-popup,.player-comparison[data-running="false"] .usual-popunder { animation-play-state:paused; }
.experience-switcher { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:18px; font-size:11px; color:#92998b; }
.experience-switcher .switch { margin:0; width:40px; height:24px; padding:4px; }
.experience-switcher .switch span { width:16px; height:16px; transform:translateX(16px); }
.experience-switcher .switch[aria-checked="false"] span { transform:none; }
.player-comparison[data-experience="usual"] #usual-label { color:var(--text); }
.player-comparison[data-experience="wallreel"] #wallreel-label { color:var(--accent); }
@keyframes frustrated-cursor {
  0% { opacity:0; top:40%; left:68%; }
  8% { opacity:1; top:40%; left:68%; }
  24%,30% { opacity:1; top:calc(51% - 55px); left:50%; transform:scale(.85); }
  40%,49% { opacity:1; top:29%; left:67%; transform:scale(1); }
  65%,73% { opacity:1; top:87%; left:82%; transform:scale(.85); }
  86% { opacity:1; top:67%; left:65%; transform:scale(1); }
  100% { opacity:0; top:67%; left:65%; }
}
@keyframes frustrated-click {
  0%,23% { opacity:0; transform:scale(.5); top:calc(51% - 60px); left:49%; }
  24% { opacity:1; transform:scale(.5); }
  32% { opacity:0; transform:scale(1.5); top:calc(51% - 60px); left:49%; }
  33%,64% { opacity:0; transform:scale(.5); top:86%; left:81%; }
  65% { opacity:1; transform:scale(.5); }
  73%,100% { opacity:0; transform:scale(1.5); top:86%; left:81%; }
}
@keyframes unwanted-popup { 0% { opacity:0; } 30%,100% { opacity:1; } }
@keyframes unwanted-window { 0% { opacity:0; } 73%,100% { opacity:1; } }
@media(max-width:720px) {
  .reverse .player-comparison { order:initial; }
  .player-tools { gap:9px; padding-inline:14px; }
  .volume-control input { width:48px; }
  .experience-switcher { font-size:10px; gap:10px; }
}
@media(prefers-reduced-motion:reduce) {
  .player-comparison .demo-cursor,.player-comparison .demo-click-ring { display:none; }
  .player-comparison[data-experience="usual"] .usual-popup { opacity:1; }
}

/* Announce state and playback errors without adding a visible footer. */
.player-status {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* A desktop browser shell around a true black, uncropped video stage. */
.player-comparison .player-demo {
  background:#171819;
  border-color:#3b3d3e;
  box-shadow:0 24px 65px #0005,0 1px 0 #ffffff08 inset;
}
.player-browser-tabs {
  display:flex;
  align-items:center;
  gap:14px;
  height:43px;
  padding:0 14px;
  background:#222426;
}
.player-window-dots { display:flex; gap:5px; flex-shrink:0; }
.player-window-dots i { width:7px; height:7px; border-radius:50%; background:#e76a61; }
.player-window-dots i:nth-child(2) { background:#d7b451; }
.player-window-dots i:nth-child(3) { background:#78af67; }
.player-browser-tab {
  display:flex;
  align-items:center;
  gap:10px;
  align-self:end;
  height:34px;
  padding:0 12px;
  width:min(240px,70%);
  min-width:0;
  border:1px solid #414446;
  border-bottom:0;
  border-radius:8px 8px 0 0;
  background:#2c2e30;
  color:#d1d3d0;
  font-size:10px;
}
.player-browser-tab #experience-heading { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.player-browser-tab>span:last-child { margin-left:auto; color:#979b94; }
.tab-favicon { font-size:8px; color:#a6aaa3; }
.player-comparison[data-experience="wallreel"] .tab-favicon { color:var(--accent); }
.player-new-tab { color:#9da19b; font-size:14px; }
.player-browser-toolbar {
  display:flex;
  align-items:center;
  gap:13px;
  height:43px;
  padding:0 14px;
  background:#2c2e30;
  border-bottom:1px solid #080909;
  color:#9da29a;
}
.browser-navigation { font-size:13px; white-space:nowrap; }
.player-url { display:flex; align-items:center; gap:8px; min-width:0; flex:1; border:1px solid #3b3e40; background:#1a1c1e; border-radius:6px; padding:5px 10px; font-size:10px; }
.player-url svg { width:12px; height:12px; flex-shrink:0; }
.player-url>span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.browser-menu { font-size:20px; line-height:1; }
.player-canvas { position:relative; margin:16px; border:1px solid #303233; border-radius:5px; overflow:hidden; background:#000; }
.player-demo .player-screen {
  height:auto;
  aspect-ratio:16 / 9;
  margin:0;
  border-radius:0;
  background:#000;
}
.player-demo .player-screen::before,.player-demo .player-screen::after { display:none; }
.player-demo .player-screen>.scene-orbit,.player-demo .player-screen>.scene-word { display:none; }
.player-demo .player-screen .feature-media { object-fit:contain; background:#000; }
.player-demo .player-control-stage { background:#000; border-top:1px solid #191919; }
.player-demo .usual-controls { background:#080808; }
.player-demo .player-controls,.player-demo .player-tools { background:#000; }
.player-demo .player-tools button,.player-demo .player-loop-link { background:#171b13; }
.player-demo:fullscreen .player-canvas { flex:1; display:flex; flex-direction:column; }
.player-demo:fullscreen .player-screen { flex:1; min-height:0; height:auto; }
@media(max-width:720px) {
  .player-browser-tabs { gap:10px; padding-inline:11px; }
  .player-browser-toolbar { gap:9px; padding-inline:11px; }
  .player-canvas { margin:10px; }
  .browser-navigation { font-size:11px; }
  .player-url { font-size:9px; padding-inline:8px; }
  .player-demo .player-tools { gap:8px; padding-inline:10px; }
  .player-demo .volume-control input { width:42px; }
  .player-demo .quality-control { font-size:9px; }
}

/* Persistent side-by-side comparison: clearly named, visibly different players. */
.player-feature { margin:90px 0 110px; }
.player-feature-heading { max-width:640px; margin-bottom:38px; }
.experience > .player-feature { margin-top:0; }
.player-feature-heading h2 { font-size:clamp(32px,3.5vw,44px); line-height:1.13; letter-spacing:-1.5px; margin-top:0; }
.player-feature-heading p { margin-top:20px; font-size:14px; color:var(--muted); line-height:1.8; max-width:540px; }
.player-side-by-side { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; }
.player-example-heading { min-height:54px; display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.player-example-heading h4 { font-size:21px; letter-spacing:-.6px; font-weight:500; }
.wallreel-example .player-example-heading h4 { color:var(--accent); }
.player-example-tag { font:8px var(--mono); letter-spacing:1px; color:#aab797; text-align:right; }
.player-example-caption { margin-top:15px; font-size:12px; line-height:1.6; color:var(--muted); }
.website-demo { border-radius:5px; background:#252326; border-color:#4b4448; }
.website-browser-bar { display:flex; align-items:center; gap:12px; height:43px; padding:0 14px; background:#a6a3a5; color:#383438; font-size:13px; }
.website-address { flex:1; min-width:0; border:1px solid #858085; border-radius:2px; background:#d7d3d6; color:#4d464d; padding:5px 9px; font-size:10px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.website-page-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; height:43px; padding:0 16px; background:#2e1d2b; border-bottom:2px solid #a02e70; }
.website-page-heading strong { color:#e783bb; font-size:12px; font-weight:800; font-style:italic; }
.website-page-heading>span { font:8px var(--mono); color:#c3a0b5; }
.website-demo .player-screen { position:relative; isolation:isolate; overflow:hidden; height:auto; aspect-ratio:16 / 9; margin:0; border-radius:0; background:#000; }
.website-demo .feature-media { object-fit:contain; background:#000; }
.website-demo .player-canvas { border-radius:0; border-color:#484047; }
.website-demo .usual-controls { background:linear-gradient(#353035,#151215); padding:24px 16px; gap:14px; color:#aaa; border-top:1px solid #62545e; }
.legacy-play { border:1px solid #747074; background:linear-gradient(#787278,#423c42); padding:3px 9px; color:#ddd; }
.website-demo .usual-progress { background:#090809; border:1px solid #575157; height:7px; }
.website-demo .usual-progress::before { background:#a03570; }
.website-example .demo-cursor { top:calc(100% - 55px); left:70%; }
@keyframes website-cursor {
  0% { opacity:0; top:calc(100% - 55px); left:70%; }
  8% { opacity:1; top:calc(100% - 55px); left:70%; }
  24%,30% { opacity:1; top:calc(100% - 55px); left:6%; transform:scale(.85); }
  40%,49% { opacity:1; top:29%; left:67%; transform:scale(1); }
  65%,73% { opacity:1; top:calc(100% - 55px); left:84%; transform:scale(.85); }
  86% { opacity:1; top:67%; left:65%; transform:scale(1); }
  100% { opacity:0; top:67%; left:65%; }
}
@keyframes website-click {
  0%,23% { opacity:0; transform:scale(.5); top:calc(100% - 60px); left:5%; }
  24% { opacity:1; transform:scale(.5); }
  32% { opacity:0; transform:scale(1.5); top:calc(100% - 60px); left:5%; }
  33%,64% { opacity:0; transform:scale(.5); top:calc(100% - 60px); left:83%; }
  65% { opacity:1; transform:scale(.5); }
  73%,100% { opacity:0; transform:scale(1.5); top:calc(100% - 60px); left:83%; }
}
@media(max-width:850px) {
  .player-side-by-side { grid-template-columns:minmax(0,1fr); gap:36px; }
  .player-feature { margin-block:60px; }
  .player-example-heading { min-height:38px; }
}
@media(max-width:720px) {
  .player-feature-heading { margin-bottom:26px; }
  .player-example-heading h4 { font-size:20px; }
  .player-example-tag { font-size:7px; max-width:100px; }
}

/* Dim the stalled website video while keeping its ad overlays legible. */
.website-demo .player-screen::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  background:rgba(128,128,128,0.45);
  pointer-events:none;
}

.player-download {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  gap:6px;
  padding:5px 9px;
  font:10px var(--mono);
  min-height:28px;
  border:1px solid #414934;
  border-radius:5px;
  color:#dbe7c5;
  background:#171b13;
}
.player-download:hover { background:#2b3024; }
.player-download[hidden] { display:none; }
.player-tools { flex-wrap:wrap; }

.player-controls .player-skip {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  padding:3px;
  color:#c1c8b4;
}
.player-skip svg { width:23px; height:23px; }
.player-skip text { fill:currentColor; font:600 8px var(--sans); }
.player-controls .player-skip:hover { color:var(--accent); }
@media(max-width:720px) {
  .player-comparison .player-controls { gap:6px; padding-inline:10px; }
  .player-controls .player-skip { min-width:26px; }
}

.player-loop-link { display:inline-flex; align-items:center; justify-content:center; gap:6px; }
.player-loop-link svg { flex-shrink:0; width:18px; height:18px; }

/* Three selectable excerpts, one playhead that skips the gaps. */
.loop-editor .timeline { margin-top:39px; }
.loop-editor .timeline-frames { opacity:.5; }
.loop-selection { border-color:#798b51; background:#edff9a12; box-shadow:0 0 0 1px #0004; }
.loop-selection[data-loop-part="0"] { left:8%; width:18%; }
.loop-selection[data-loop-part="1"] { left:40%; width:19%; }
.loop-selection[data-loop-part="2"] { left:73%; width:19%; }
.loop-selection.is-active { border-color:var(--accent); background:#edff9a28; box-shadow:0 0 17px #edff9a0c; }
.loop-part-number { position:absolute; top:-23px; left:0; font:9px var(--mono); color:#9ca68b; }
.loop-selection.is-active .loop-part-number { color:var(--accent); }
.loop-handle::before { background:#a5b781; }
.loop-selection.is-active .loop-handle::before { background:var(--accent); }
.loop-playhead { position:absolute; top:-6px; bottom:-6px; width:2px; background:#fff; z-index:3; pointer-events:none; left:8%; box-shadow:0 0 8px #ffffff70; }
.loop-playhead::before { content:""; position:absolute; top:-3px; left:-3px; width:8px; height:5px; border-radius:2px; background:#fff; }
.loop-sequence-summary { display:flex; align-items:center; justify-content:space-between; margin:16px 20px 0; font:9px var(--mono); color:#a4ac96; }
.loop-sequence-order { display:inline-flex; align-items:center; gap:9px; }
.loop-sequence-order>span { padding:3px 6px; border-radius:3px; border:1px solid #39412e; }
.loop-sequence-order>span.is-active { background:#303a22; border-color:#6f8148; color:var(--accent); }
.loop-sequence-order i { font-style:normal; color:#737e64; }
@media(max-width:380px) {
  .loop-sequence-summary { margin-inline:16px; font-size:8px; }
  .loop-sequence-order { gap:5px; }
}

/* Preserve the complete frame in the loop preview, with black letterboxing. */
.loop-screen .feature-media {
  object-fit:contain;
  background:#000;
}

/* Match the supplied 16:9 clips so they fill the stage without cropping. */
.loop-editor .loop-screen {
  height:auto;
  aspect-ratio:16 / 9;
}

/* The same built-in player, with its loop-editing drawer open. */
.loop-player { background:#171819; border-color:#505e36; box-shadow:0 24px 65px #0004; }
.loop-player .loop-screen { margin:0; border-radius:0; background:#000; }
.loop-player .loop-screen::before,.loop-player .loop-screen::after { display:none; }
.loop-player .loop-screen>.scene-orbit,.loop-player .loop-screen>.scene-word { display:none; }
.loop-player .player-badge { top:16px; left:17px; }
.loop-player .loop-badge { font-size:8px; padding:6px 8px; }
.loop-player-controls { background:#000; border-top:1px solid #191919; }
.loop-player-controls .player-controls { padding:10px 14px 0; gap:10px; }
.loop-player-time { margin-left:5px; }
.loop-player-time .time-divider { color:#6d7565; }
#loop-fullscreen { margin-left:auto; }
.loop-player-controls .player-tools { padding:0 17px 13px; }
.loop-mode-chip { display:inline-flex; align-items:center; gap:6px; color:var(--accent); background:#252f17; border:1px solid #697d3f; border-radius:5px; min-height:28px; padding:4px 9px; font:10px var(--mono); white-space:nowrap; }
.loop-edit-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 18px 0; border-top:1px solid #303726; font:8px var(--mono); color:#919e80; }
.loop-edit-heading>span:first-child { letter-spacing:1.1px; color:#bcc9a8; }
.loop-player .timeline { margin-inline:18px; margin-top:34px; }
.loop-player .loop-sequence-summary { margin-inline:18px; }
.loop-player .loop-bottom { padding:16px 18px 18px; }
.loop-player:fullscreen { overflow:auto; background:#0c0d0e; }
.loop-player:fullscreen .loop-player-canvas { max-width:1100px; margin-inline:auto; }
.loop-player:fullscreen .loop-screen { max-height:65vh; }
@media(max-width:720px) {
  .loop-player-controls .player-controls { gap:7px; padding-inline:10px; }
  .loop-player-controls .player-tools { gap:8px; padding-inline:10px; }
  .loop-player-controls .volume-control input { width:42px; }
  .loop-mode-chip { font-size:9px; padding-inline:6px; }
  .loop-edit-heading { padding-inline:12px; font-size:7px; gap:8px; }
  .loop-player .loop-badge { top:12px; right:12px; font-size:7px; }
  .loop-player .player-badge { top:14px; left:12px; font-size:6px; }
  .loop-player .loop-bottom { flex-wrap:wrap; }
}

/* Two seamless rows of website names, with soft fades at the page gutters. */
.sites-marquee-intro { margin:58px 0 22px; color:#969b91; font-size:15px; font-weight:400; line-height:1.6; text-align:center; }
.sites-marquee-intro span { color:#d4d7ce; white-space:nowrap; }
.sites-marquee {
  --marquee-gap:16px;
  --marquee-card:184px;
  margin-top:0;
  display:grid;
  gap:var(--marquee-gap);
  overflow:hidden;
  mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent);
}
.sites-marquee:focus-visible { outline:1px solid #68734b; outline-offset:8px; border-radius:8px; }
.sites-marquee-row { min-width:0; overflow:hidden; }
.sites-marquee-track { display:flex; width:max-content; animation:sites-marquee-scroll 52s linear infinite; }
.sites-marquee-set {
  display:flex;
  flex:none;
  align-items:center;
  gap:var(--marquee-gap);
  list-style:none;
  margin:0;
  padding:0 var(--marquee-gap) 0 0;
}
.sites-marquee-set li {
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 var(--marquee-card);
  width:var(--marquee-card);
  height:66px;
  border:1px solid #ffffff0b;
  border-radius:8px;
  background:#ffffff02;
  color:#b9bdb2;
  font-size:22px;
  font-weight:650;
  letter-spacing:-.7px;
  white-space:nowrap;
  user-select:none;
}
.sites-marquee-row-reverse .sites-marquee-track { animation-direction:reverse; animation-duration:57s; }
.sites-marquee:hover .sites-marquee-track,.sites-marquee:focus-within .sites-marquee-track { animation-play-state:paused; }
@keyframes sites-marquee-scroll { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@media(max-width:720px) {
  .sites-marquee-intro { margin-top:40px; margin-bottom:20px; font-size:14px; }
  .sites-marquee { --marquee-gap:12px; --marquee-card:154px; gap:12px; }
  .sites-marquee-set li { height:56px; font-size:19px; letter-spacing:-.5px; }
}
@media(prefers-reduced-motion:reduce) {
  .sites-marquee { mask-image:none; -webkit-mask-image:none; }
  .sites-marquee-track { width:100%; animation:none; }
  .sites-marquee-set { width:100%; flex-wrap:wrap; justify-content:center; padding:0; }
  .sites-marquee-set[aria-hidden="true"] { display:none; }
  .sites-marquee-set li { flex:1 1 120px; width:auto; max-width:184px; height:48px; font-size:17px; }
}

/* Collection preview: an explorable desktop-browser library. */
.collection-comparison { margin-top:80px; }
.collection-comparison .library-title h4 { font-size:clamp(26px,3.5vw,44px); letter-spacing:-1.5px; }
.collection-concept { margin-top:48px; }
.concept-heading { display:flex; justify-content:space-between; align-items:end; gap:28px; margin-bottom:22px; }
.concept-heading h5 { margin:8px 0 0; font-size:23px; font-weight:500; letter-spacing:-.7px; }
.concept-heading>p { max-width:300px; font-size:13px; color:#a6aa9d; }
.collection-stage { padding:36px; border:1px solid #ffffff0d; border-radius:20px; background:radial-gradient(ellipse at 15% 5%,#66745566,transparent 65%),linear-gradient(130deg,#2c3425,#171d17 70%); }
.collection-browser { border:1px solid #ffffff28; border-radius:12px; overflow:hidden; background:#171a16; box-shadow:0 28px 55px #0006,0 2px 8px #0005; }
.collection-chrome { height:44px; display:flex; align-items:center; gap:18px; background:#2a2e26; padding:0 17px; font-size:13px; color:#acb0a4; }
.collection-dots { display:flex; gap:6px; margin-right:18px; }
.collection-dots i { width:9px; height:9px; border-radius:50%; background:#ff6b60; }
.collection-dots i:nth-child(2) { background:#e8bb50; }.collection-dots i:nth-child(3) { background:#61b86a; }
.collection-tab { align-self:end; height:35px; width:215px; display:flex; align-items:center; justify-content:space-between; border-radius:8px 8px 0 0; background:#191d17; padding:0 13px; font-size:11px; color:#e1e4d8; }
.collection-browser-body { display:grid; grid-template-columns:190px minmax(0,1fr); }
.collection-sidebar { display:flex; flex-direction:column; background:#20261d; border-right:1px solid #ffffff09; padding:24px 14px 17px; }
.collection-brand { color:var(--accent); font-size:24px; display:flex; align-items:center; gap:8px; padding:0 8px; }.collection-brand strong { color:#e7e9df; font-size:19px; letter-spacing:-.8px; }
.collection-address { font-size:10px; border:1px solid #ffffff13; background:#ffffff05; border-radius:7px; padding:9px; color:#a3ad98; margin:22px 0 29px; }
.collection-nav-label { font:9px var(--mono); color:#87947e; padding:0 10px; letter-spacing:1px; margin-bottom:12px; }
.collection-sidebar nav { display:grid; gap:6px; }
.collection-sidebar button { display:flex; gap:10px; align-items:center; width:100%; padding:11px 10px; border-radius:7px; background:transparent; color:#acb7a3; font-size:13px; text-align:left; }
.collection-sidebar button[aria-pressed=true] { background:#edff9a15; color:#e8f6b5; }
.collection-sidebar button small { margin-left:auto; font-size:10px; opacity:.65; }
.collection-sidebar-bottom { display:flex; align-items:center; gap:10px; padding:80px 8px 0; margin-top:auto; font-size:11px; }
.collection-sidebar-bottom small { display:block; font-size:9px; color:#8f9c85; }.collection-avatar { display:grid; place-items:center; width:29px; height:29px; background:#414d35; color:#d9eabf; border-radius:50%; }
.collection-content { padding:27px; min-width:0; }.collection-breadcrumb { font:8px var(--mono); color:#86907c; letter-spacing:1px; }
.collection-content-title { display:flex; justify-content:space-between; align-items:center; margin:17px 0 20px; }.collection-content h6 { font-size:25px; line-height:1.2; letter-spacing:-.8px; margin:0; font-weight:500; }.collection-content-title p { color:#9ba58f; font-size:11px; margin-top:7px; }.collection-view-icon { font-size:20px; color:#bcc7ae; }
.collection-search { display:flex; align-items:center; gap:10px; background:#ffffff05; border:1px solid #ffffff16; border-radius:7px; padding:8px 12px; color:#a4ad9b; }.collection-search input { width:100%; min-width:0; border:0; background:transparent; color:#f1f3e8; font-size:12px; }.collection-search input::placeholder { color:#8d9784; }
.collection-grid-heading { display:flex; justify-content:space-between; color:#b3bcaa; font-size:10px; margin-top:25px; }.collection-grid-heading span:last-child { color:#85907a; }
.collection-content .library-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:19px 13px; margin-top:12px; }
.collection-content .library-card>.scene { height:auto; aspect-ratio:1.5; border-radius:7px; overflow:hidden; }.collection-content .library-card video { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.collection-content .library-card>div:last-child { display:block; padding:9px 0 0; }.collection-content .library-card strong { font-size:11px; display:block; }.collection-content .library-card>div:last-child>span { display:block; margin-top:3px; font-size:9px; color:#8d9783; }
.collection-open { position:absolute; inset:0; width:100%; background:transparent; display:grid; place-items:center; }.collection-open span { display:grid; place-items:center; background:#1119; backdrop-filter:blur(8px); border:1px solid #fff4; border-radius:50%; width:34px; height:34px; font-size:11px; opacity:0; transition:opacity .15s; }.collection-open:hover span,.collection-open:focus-visible span { opacity:1; }.collection-open:focus-visible { outline-offset:-4px; }.collection-content .clip-duration { font-size:8px; bottom:7px; right:7px; pointer-events:none; }
.collection-browser-foot { display:flex; justify-content:space-between; padding:10px 18px; background:#22271d; border-top:1px solid #ffffff0b; color:#859079; font-size:9px; }
.concept-caption { text-align:center; font-size:11px; color:#a4ac99; margin-top:16px; }
.collection-empty { font-size:13px; padding:28px 0; color:#b5bfa9; }







.collection-dialog { max-width:850px; width:calc(100% - 32px); padding:20px; background:#191d16; color:var(--text); border:1px solid #ffffff30; border-radius:12px; }.collection-dialog::backdrop { background:#000b; backdrop-filter:blur(8px); }.collection-dialog>div { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:15px; }.collection-dialog h6 { font-size:20px; margin:0; font-weight:500; }.collection-close { width:40px; height:40px; background:#ffffff10; border-radius:50%; font-size:25px; }.collection-dialog video { display:block; width:100%; max-height:65vh; background:#000; }
.collection-comparison [hidden] { display:none!important; }
@media(min-width:1200px) { .collection-comparison { width:calc(100% + 120px); margin-left:-60px; } }
@media(max-width:900px) { .collection-stage { padding:20px; }.collection-browser-body { grid-template-columns:150px minmax(0,1fr); }.collection-content { padding:20px; }.collection-content .library-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { .collection-comparison .library-title { display:block; }.collection-comparison .library-title>span { display:block; margin-top:10px; }.concept-heading { display:block; }.concept-heading h5 { font-size:21px; }.concept-heading>p { margin-top:8px; max-width:none; font-size:12px; }.collection-stage { padding:10px; border-radius:12px; }.collection-chrome { padding-inline:10px; gap:10px; }.collection-dots { gap:4px; margin-right:4px; }.collection-dots i { width:7px; height:7px; }.collection-tab { width:auto; flex:1; font-size:10px; }.collection-browser-body { display:block; }.collection-sidebar { padding:12px; border-right:0; border-bottom:1px solid #ffffff0d; }.collection-brand,.collection-address,.collection-nav-label,.collection-sidebar-bottom { display:none; }.collection-sidebar nav { grid-template-columns:repeat(3,1fr); gap:3px; }.collection-sidebar button { padding:9px 6px; font-size:10px; justify-content:center; gap:5px; }.collection-sidebar button small { display:none; }.collection-content { padding:18px 14px; }.collection-content h6 { font-size:23px; }.collection-content .library-grid { gap:18px 10px; }.collection-content .library-card strong { font-size:10px; }.collection-content .library-card>div:last-child>span { font-size:8px; }.collection-open span { opacity:1; width:27px; height:27px; font-size:9px; }.collection-browser-foot { font-size:8px; gap:10px; padding-inline:12px; }.concept-caption { font-size:10px; padding-inline:8px; } }
@media(prefers-reduced-motion:reduce) { .collection-open span { transition:none; } }

/* Collection footage stays free of overlaid playback buttons. */
.collection-open span { display:none; }

/* Two speed concepts for visual comparison. */
.speed-concepts { padding-block:95px; }
.speed-section-heading { max-width:660px; margin-bottom:65px; }
.speed-section-heading>p { color:#a6aaa1; font-size:16px; margin-top:18px; }
.speed-section-heading h2 { font-size:clamp(46px,6vw,78px); line-height:1.02; letter-spacing:-3px; margin-block:16px 24px; }
.speed-option + .speed-option { margin-top:75px; }
.speed-option-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:24px; }
.speed-option-heading h3 { font-size:25px; line-height:1.25; letter-spacing:-.7px; margin-top:10px; }
.speed-replay { flex-shrink:0; display:flex; align-items:center; gap:14px; border:1px solid #ffffff25; background:transparent; padding:9px 15px; border-radius:30px; color:#c8ccbF; font-size:12px; }
.speed-replay span { font-size:19px; line-height:1; }
.speed-concept-note { font-size:11px; color:#92968c; margin-top:15px; text-align:center; }
.speed-benchmark { display:grid; grid-template-columns:.9fr 1.1fr; align-items:center; gap:65px; padding:75px; background:#f3f4ed; color:#20251c; border-radius:22px; min-height:510px; }
.speed-kicker { font:10px var(--mono); letter-spacing:2px; }
.speed-number { font-size:clamp(100px,13vw,185px); font-weight:650; line-height:.9; letter-spacing:-12px; margin:32px 0 0 -7px; }
.speed-number>span { font-size:.68em; vertical-align:15%; font-weight:400; }
.speed-number-label { font-size:54px; line-height:1.1; font-weight:600; letter-spacing:-2px; }
.speed-benchmark-intro>p { color:#737b6b; font-size:18px; line-height:1.45; margin-top:22px; letter-spacing:-.3px; }
.speed-chart-heading { display:flex; justify-content:space-between; align-items:center; gap:15px; font-size:12px; color:#717966; padding-bottom:28px; border-bottom:1px solid #20251c20; }
.speed-chart-heading span:first-child { color:#222b19; font-weight:600; }
.speed-bar-row { margin-top:27px; }
.speed-bar-label { display:flex; justify-content:space-between; gap:10px; font-size:13px; font-weight:600; margin-bottom:12px; }
.speed-bar-label>span { font-size:11px; font-weight:400; color:#7a826f; }
.speed-bar-track { height:28px; display:flex; align-items:center; gap:12px; }
.speed-bar-fill { height:100%; border-radius:4px; transform:scaleX(0); transform-origin:left; }
.fast-bar .speed-bar-fill { width:20%; background:#64813a; }
.usual-bar .speed-bar-fill { width:100%; background:#c3c9bc; }
.speed-bar-end { color:#567132; font-size:10px; white-space:nowrap; opacity:0; }
.is-running .fast-bar .speed-bar-fill { animation:speed-bar-grow 1s linear both; }
.is-running .usual-bar .speed-bar-fill { animation:speed-bar-grow 5s linear both; }
.is-running .speed-bar-end { animation:speed-reveal .2s 1s both; }
.is-complete .speed-bar-fill { transform:scaleX(1); }.is-complete .speed-bar-end { opacity:1; }
.speed-chart-axis { display:flex; justify-content:space-between; border-top:1px solid #20251c20; margin-top:23px; padding-top:10px; font:9px var(--mono); color:#87907b; }
.speed-chart-payoff { margin-top:37px; font-size:18px; font-weight:500; letter-spacing:-.5px; }
.speed-loading-stage { padding:48px 34px 25px; border:1px solid #ffffff14; border-radius:22px; background:radial-gradient(ellipse at 80% 10%,#303b2466,transparent 70%),#151813; }
.speed-loading-intro { text-align:center; font-size:clamp(26px,3.5vw,42px); line-height:1.2; letter-spacing:-1.5px; margin-bottom:40px; }.speed-loading-intro>span { color:#b1bd9a; }
.loading-comparison { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.load-example-label { display:flex; align-items:center; gap:9px; font-size:13px; margin-bottom:15px; color:#a4aa9b; }.load-fast .load-example-label { color:var(--accent); }.speed-status-dot { width:6px; height:6px; background:var(--accent); border-radius:50%; }
.loading-browser { border:1px solid #ffffff20; border-radius:10px; overflow:hidden; background:#20221e; box-shadow:0 15px 30px #0004; }
.loading-toolbar { height:39px; display:flex; align-items:center; gap:12px; padding:0 12px; border-bottom:1px solid #ffffff0c; background:#30332c; color:#999f8f; font-size:12px; }.loading-toolbar .collection-dots { gap:4px; margin:0; }.loading-toolbar .collection-dots i { width:6px; height:6px; }.loading-url { font:8px var(--mono); text-align:center; background:#171b1499; border:1px solid #ffffff0a; border-radius:4px; padding:4px; flex:1; }
.loading-page { position:relative; padding:16px; overflow:hidden; }.loading-site-nav { display:flex; justify-content:space-between; align-items:center; gap:10px; padding-bottom:13px; }.loading-site-nav strong { font-size:10px; letter-spacing:1px; }.loading-site-nav>span { font-size:7px; color:#888e7f; }.loading-banner { height:28px; display:grid; place-items:center; background:#403026; border:1px solid #a8784526; color:#bb9673; font:7px var(--mono); letter-spacing:2px; margin-bottom:12px; transition:opacity .3s; }.load-fast .loading-banner { visibility:hidden; }
.loading-video { aspect-ratio:16/10; position:relative; overflow:hidden; border-radius:5px; background:#0a0c08; }.loading-video video { width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .4s; }.is-ready .loading-video video { opacity:1; }.loading-cover { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:15px; background:#10120e; }.is-ready .loading-cover { display:none; }.loading-cover-label { color:#8e9782; font:9px var(--mono); }.loading-spinner { width:25px; height:25px; border:2px solid #323a2a; border-top-color:#a7b78d; border-radius:50%; }.is-running .loading-spinner { animation:speed-spin 1s linear infinite; }.is-complete .loading-spinner { animation:none; }
.loading-page-meta { margin-top:17px; }.loading-skeleton { display:block; width:75%; height:6px; border-radius:3px; background:#383e31; margin-bottom:8px; }.loading-skeleton.short { width:45%; background:#2c3127; }.loading-page-chip { display:block; margin-top:13px; color:#777f6b; font-size:8px; }
.loading-ad-popup { position:absolute; width:76%; left:12%; top:40%; background:#ede6da; color:#392c20; border-radius:6px; box-shadow:0 8px 25px #0009; padding:27px 16px; text-align:center; opacity:0; transform:translateY(10px); transition:opacity .25s,transform .25s; pointer-events:none; }.loading-ad-popup>span:first-child { font:7px var(--mono); letter-spacing:1px; color:#9b6e4c; }.loading-ad-popup strong { display:block; font-size:16px; margin-top:10px; letter-spacing:-.4px; }.loading-fake-close { position:absolute; right:10px; top:3px; font-size:15px; color:#ad9e8b; }.has-ad .loading-ad-popup { opacity:1; transform:none; }
.loading-status { display:flex; gap:8px; align-items:center; min-height:24px; font-size:11px; color:#999e90; margin-top:15px; }.is-ready .loading-status { color:#d1e99f; }.loading-status-symbol { font-size:15px; }.loading-stage-footer { display:flex; align-items:center; justify-content:space-between; gap:20px; border-top:1px solid #ffffff0c; padding-top:20px; margin-top:27px; }.loading-stage-footer>span:first-child { font-size:11px; color:#8f9882; }.speed-brand { font-size:18px; letter-spacing:-.8px; }.speed-brand .brand-icon { transform:scale(.7); transform-origin:right; }
@keyframes speed-bar-grow { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes speed-reveal { from { opacity:0; } to { opacity:1; } }
@keyframes speed-spin { to { transform:rotate(360deg); } }


@media(max-width:900px) { .speed-benchmark { gap:30px; padding:40px; }.speed-loading-stage { padding:30px 20px 20px; }.loading-comparison { gap:15px; }.loading-page { padding:12px; }.loading-ad-popup strong { font-size:13px; } }
@media(max-width:600px) { .speed-concepts { padding-block:60px; }.speed-section-heading h2 { letter-spacing:-2px; }.speed-section-heading>p { font-size:14px; }.speed-option-heading { align-items:center; gap:12px; }.speed-option-heading .feature-index { font-size:8px; }.speed-option-heading h3 { font-size:20px; }.speed-replay { font-size:10px; padding:8px 11px; gap:8px; }.speed-benchmark { grid-template-columns:1fr; gap:35px; padding:32px 24px; }.speed-benchmark-intro { text-align:center; }.speed-number { font-size:135px; letter-spacing:-9px; }.speed-number-label { font-size:45px; }.speed-benchmark-intro>p { font-size:16px; }.speed-chart-payoff { font-size:16px; margin-top:25px; }.speed-chart-heading { font-size:10px; }.speed-bar-label { font-size:11px; }.speed-bar-label>span { font-size:9px; }.speed-concept-note { font-size:10px; padding-inline:8px; }.speed-loading-stage { padding:28px 14px 18px; }.speed-loading-intro { font-size:27px; letter-spacing:-1px; margin-bottom:28px; }.loading-comparison { grid-template-columns:1fr; gap:27px; }.loading-video { aspect-ratio:16/9; }.loading-banner { height:21px; margin-bottom:8px; }.loading-site-nav { padding-bottom:9px; }.loading-ad-popup { padding:20px 12px; }.loading-stage-footer>span:first-child { font-size:9px; }.speed-brand { font-size:15px; } }
@media(prefers-reduced-motion:reduce) { .speed-option *, .speed-option *::before { animation:none!important; transition:none!important; }.speed-option .speed-bar-fill { transform:none; } }

/* Dark palette for the speed benchmark. */
.speed-benchmark {
  background:radial-gradient(ellipse at 0 0,#38324655,transparent 75%),#19181e;
  border:1px solid #ffffff14;
  color:#f2f0eb;
}
.speed-benchmark .speed-kicker { color:#b9aecb; }
.speed-benchmark-intro>p { color:#a29eac; }
.speed-chart-heading { color:#a29eac; border-bottom-color:#ffffff18; }
.speed-chart-heading span:first-child { color:#e1dde8; }
.speed-bar-label>span { color:#a29eac; }
.fast-bar .speed-bar-label { color:var(--accent); }
.fast-bar .speed-bar-fill { background:var(--accent); }
.usual-bar .speed-bar-fill { background:#686170; }
.speed-bar-end { color:var(--accent); }
.speed-chart-axis { border-top-color:#ffffff18; color:#a29eac; }
.speed-chart-payoff { color:#e1edc6; }

/* Usual-browser choreography: late paint, then one contained ad-slot layout shift. */
.loading-detail-title { display:block; font-size:12px; line-height:1.4; color:#c5cbbd; }
.loading-detail-description { display:block; font-size:9px; color:#858e79; margin-top:5px; }
.load-usual { --ad-shift:40px; }
.load-usual .loading-site-nav strong,
.load-usual .loading-site-nav>span,
.load-usual .loading-banner,
.load-usual .loading-video,
.load-usual .loading-detail-title,
.load-usual .loading-detail-description,
.load-usual .loading-page-chip { opacity:0; }
.load-usual .loading-video,
.load-usual .loading-page-meta { transform:translateY(calc(-1 * var(--ad-shift))); }
.load-usual .loading-banner { clip-path:inset(0 0 100% 0); }
.load-usual.has-brand .loading-site-nav strong,
.load-usual.has-nav .loading-site-nav>span,
.load-usual.has-frame .loading-video,
.load-usual.has-banner .loading-banner,
.load-usual.has-title .loading-detail-title,
.load-usual.has-details .loading-detail-description,
.load-usual.has-chip .loading-page-chip { opacity:1; }
.load-usual.has-banner .loading-banner { clip-path:inset(0); }
.load-usual.has-banner .loading-video,
.load-usual.has-banner .loading-page-meta { transform:none; }
/* Static completed state is also the reduced-motion presentation. */
.is-complete .load-usual .loading-site-nav strong,
.is-complete .load-usual .loading-site-nav>span,
.is-complete .load-usual .loading-banner,
.is-complete .load-usual .loading-video,
.is-complete .load-usual .loading-detail-title,
.is-complete .load-usual .loading-detail-description,
.is-complete .load-usual .loading-page-chip { opacity:1; clip-path:none; }
.is-complete .load-usual .loading-video,
.is-complete .load-usual .loading-page-meta { transform:none; }
@media(max-width:600px) { .load-usual { --ad-shift:29px; } }

/* Network arrivals paint instantly, including ads, layout shifts, and video. */
[data-speed-concept="loading"] .loading-banner,
[data-speed-concept="loading"] .loading-video,
[data-speed-concept="loading"] .loading-video video,
[data-speed-concept="loading"] .loading-page-meta,
[data-speed-concept="loading"] .loading-ad-popup { transition:none; }
[data-speed-concept="loading"] .loading-ad-popup { transform:none; }

/* A native-style loading strip, synchronized with the illustrated paint stages. */
.browser-loading-strip { height:3px; background:#ffffff08; overflow:hidden; }
.browser-loading-strip>span { display:block; width:100%; height:100%; background:#a59caf; transform:scaleX(var(--load-progress,0)); transform-origin:left; }
.load-fast .browser-loading-strip>span { background:var(--accent); }
.is-running .load-fast .browser-loading-strip>span { transition:transform 1.1s linear; }
@media(prefers-reduced-motion:reduce) { .browser-loading-strip>span { transition:none!important; } }

/* One benefit story: compact metric, then the experience underneath. */
.speed-section-heading { margin-bottom:40px; }
.speed-benchmark { min-height:0; padding:40px 55px; gap:70px; grid-template-columns:.8fr 1.2fr; border-radius:18px; }
.speed-number { font-size:132px; margin-top:20px; letter-spacing:-8px; }
.speed-number-label { font-size:42px; }
.speed-chart-heading { padding-bottom:18px; }
.speed-bar-row { margin-top:20px; }
.speed-bar-track { height:22px; }
.speed-chart-axis { margin-top:18px; }
.speed-option + .speed-option { margin-top:36px; }
.speed-loading-stage { padding:32px; border-radius:18px; border-color:#ffffff14; background:radial-gradient(ellipse at 0 0,#38324655,transparent 75%),#19181e; }
.speed-loading-intro { font-size:clamp(26px,3vw,36px); margin-bottom:28px; }
.speed-loading-intro>span { color:#c8d6ae; }
.speed-experience-footer { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:18px; }
.speed-experience-footer .speed-concept-note { margin:0; text-align:left; max-width:650px; }
.is-running .fast-bar .speed-bar-fill { animation-duration:1.1s; }
.is-running .usual-bar .speed-bar-fill { animation-duration:5.5s; }
.is-running .speed-bar-end { animation-delay:1.1s; }
@media(max-width:900px) { .speed-benchmark { padding:32px; gap:35px; }.speed-loading-stage { padding:25px 20px; } }
@media(max-width:600px) {
  .speed-benchmark { grid-template-columns:1fr; padding:28px 24px; gap:28px; }
  .speed-benchmark-intro { display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline; gap:0 12px; }
  .speed-benchmark-intro .speed-kicker { flex-basis:100%; }
  .speed-number { font-size:90px; letter-spacing:-6px; margin-top:16px; }
  .speed-number-label { font-size:35px; letter-spacing:-1px; }
  .speed-option + .speed-option { margin-top:24px; }
  .speed-loading-stage { padding:25px 14px 18px; }
  .speed-loading-intro { font-size:25px; }
  .speed-experience-footer { flex-direction:column-reverse; gap:14px; }
  .speed-experience-footer .speed-concept-note { text-align:center; }
}

/* A consistent next step after each main product demonstration. */
.section-cta { display:flex; justify-content:center; margin-top:32px; }
.hero-comparison>.section-cta { margin:32px auto 0; }
.section-cta .button { min-width:180px; justify-content:space-between; }
@media(max-width:600px) { .section-cta { margin-top:26px; } }

/* Privacy: a physical lid-close sequence and an empty-until-unlocked collection. */
.privacy-features { padding-block:30px 100px; }
.privacy-section-heading { max-width:750px; margin-bottom:60px; }
.privacy-section-heading>p { max-width:610px; font-size:16px; color:#a5ac9b; margin-top:20px; }
.privacy-section-heading h2 { font-size:clamp(43px,5.5vw,72px); line-height:1.05; letter-spacing:-2.8px; margin:22px 0; }.privacy-section-heading h2>span { color:var(--accent); }
.privacy-feature + .privacy-feature { margin-top:70px; }
.privacy-feature-heading { display:grid; grid-template-columns:1fr 1fr; align-items:end; gap:60px; margin-bottom:30px; }
.privacy-feature-heading h3 { font-size:35px; line-height:1.15; letter-spacing:-1px; margin-top:15px; }
.privacy-feature-heading>p { font-size:14px; color:#a1aa96; max-width:440px; }
.lid-demo,.pin-demo { padding:30px 38px 26px; border:1px solid #ffffff16; border-radius:20px; background:radial-gradient(ellipse at 45% 0,#49503c55,transparent 70%),#151914; }
.privacy-demo-top { display:flex; justify-content:space-between; align-items:center; gap:15px; }.privacy-demo-top>span:last-child { font:9px var(--mono); color:#7f8a75; letter-spacing:1px; }.privacy-demo-tag { display:flex; align-items:center; gap:8px; font:9px var(--mono); letter-spacing:1px; color:#a7b995; }.privacy-demo-tag i { width:6px; height:6px; background:var(--accent); border-radius:50%; }
.laptop-scene { width:88%; max-width:900px; margin:45px auto 30px; perspective:1800px; position:relative; padding-bottom:20px; }
.laptop-lid { position:relative; background:#252922; padding:16px 10px 11px; border:1px solid #656c5b; border-bottom:3px solid #3a3f33; border-radius:17px 17px 6px 6px; transform-origin:center bottom; transition:transform 850ms cubic-bezier(.45,0,.25,1); z-index:2; box-shadow:0 18px 40px #0006; backface-visibility:hidden; }
.laptop-camera { position:absolute; width:4px; height:4px; background:#080b07; border-radius:50%; top:6px; left:50%; }
.laptop-display { aspect-ratio:16/10; position:relative; overflow:hidden; border-radius:6px; background:#101b1b; }
.privacy-desktop { position:absolute; inset:0; background:linear-gradient(145deg,#1f3034,#597061 55%,#394342); overflow:hidden; }
.desktop-menu { position:absolute; z-index:1; inset:0 0 auto; display:flex; justify-content:space-between; padding:5px 12px; background:#0b181b50; font-size:8px; color:#d7e0d7; }
.desktop-wallpaper { position:absolute; inset:0; overflow:hidden; }.desktop-wallpaper i { position:absolute; width:110%; height:80%; background:#9eada54d; border-radius:50%; transform:rotate(-30deg); left:20%; top:40%; }.desktop-wallpaper i:nth-child(2) { top:54%; left:25%; background:#778d8066; }.desktop-wallpaper i:nth-child(3) { top:70%; background:#122f3655; }

.desktop-dock { position:absolute; bottom:12px; left:50%; transform:translateX(-50%); display:flex; padding:7px 10px; gap:7px; border:1px solid #ffffff25; border-radius:10px; background:#d4e0d326; backdrop-filter:blur(10px); }.desktop-dock>i { width:20px; height:20px; background:#cbd6d077; border-radius:5px; }.desktop-dock>i:nth-of-type(2) { background:#a5c4d299; }.desktop-dock>i:nth-of-type(3) { background:#d2c8ac88; }
.lid-browser { position:absolute; inset:8% 4% 10%; background:#191e16; border:1px solid #72836360; border-radius:8px; overflow:hidden; box-shadow:0 12px 30px #0006; }
.lid-tabs { height:33px; background:#30382a; display:flex; align-items:center; gap:6px; padding:0 10px; }.lid-tabs .collection-dots { margin-right:6px; gap:4px; }.lid-tabs .collection-dots i { width:6px; height:6px; }.lid-tab { display:flex; justify-content:space-between; gap:15px; align-items:center; background:#252d1f; padding:5px 8px; font-size:8px; border-radius:5px 5px 0 0; align-self:end; min-width:90px; }.lid-tab b { color:#7c8a6e; font-weight:400; }
.lid-address { display:flex; justify-content:space-between; padding:7px 12px; font-size:8px; color:#86967a; border-bottom:1px solid #ffffff0c; }
.lid-browser-content { padding:17px; }.privacy-brand { font-size:19px; letter-spacing:-.9px; }.privacy-brand .brand-icon { transform:skew(-12deg) scale(.7); width:21px; transform-origin:left; margin-right:-6px; }
.lid-content-heading { display:flex; align-items:center; justify-content:space-between; gap:15px; margin:12px 0; }.lid-content-heading h4 { font-size:16px; letter-spacing:-.4px; }.lid-content-heading>span { font-size:8px; color:#8d9c7e; }
.privacy-thumbnail-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }.privacy-thumbnail { min-width:0; }.privacy-thumbnail video { display:block; width:100%; aspect-ratio:1.65; object-fit:cover; border-radius:5px; background:#323d2a; }.privacy-thumbnail>span { display:block; font-size:8px; color:#9daa90; margin-top:7px; }
.lid-history { display:flex; gap:15px; font-size:8px; color:#69785b; margin-top:18px; padding-top:12px; border-top:1px solid #ffffff0c; }.lid-history>span:first-child { color:#a2b38f; font:7px var(--mono); }
.laptop-base { position:absolute; bottom:9px; height:15px; background:linear-gradient(#7a8171,#414a39); left:-5%; width:110%; border-radius:2px 2px 50% 50% / 2px 2px 12px 12px; z-index:3; box-shadow:0 4px 7px #0006; }.laptop-base>span { display:block; width:14%; height:4px; margin:auto; background:#323c2b; border-radius:0 0 6px 6px; }.laptop-shadow { position:absolute; left:-3%; bottom:-3%; width:106%; height:9%; background:#0008; filter:blur(13px); border-radius:50%; }
.lid-demo[data-lid-state="closing"] .laptop-lid,.lid-demo[data-lid-state="closed"] .laptop-lid { transform:rotateX(-89deg); }
.lid-demo[data-lid-state="closed"] .lid-browser,.lid-demo[data-lid-state="cleared"] .lid-browser { display:none; }


.privacy-demo-actions { display:flex; justify-content:space-between; align-items:center; gap:20px; padding-top:23px; min-height:68px; }.privacy-demo-actions>p { font-size:12px; color:#9aa98c; }.privacy-demo-actions strong { color:#d8eabf; letter-spacing:2px; }.privacy-demo-actions .button { min-width:177px; }
.pin-demo { background:radial-gradient(ellipse at 90% 0,#38324666,transparent 75%),#19181e; }.pin-browser { background:#181b16; }.pin-browser-toolbar { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:17px 24px; border-bottom:1px solid #ffffff0c; }.pin-browser-toolbar>span:nth-child(2) { font:10px var(--mono); color:#77856b; }.pin-unlock { display:flex; align-items:center; gap:7px; font-size:11px; color:#aebd9c; background:#ffffff05; border:1px solid #ffffff13; border-radius:6px; padding:8px 12px; }.pin-unlock svg { width:14px; height:14px; }
.pin-content { position:relative; padding:28px; min-height:390px; }.pin-content-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; }.pin-content-heading .feature-index { font-size:8px; }.pin-content-heading h4 { font-size:25px; margin-top:6px; letter-spacing:-.7px; }.pin-content-heading>span { font:9px var(--mono); color:#849476; }.pin-empty { text-align:center; padding:36px 0 60px; }.pin-empty-icon { font-size:60px; line-height:1.2; color:#515f44; }.pin-empty h5 { font-weight:500; font-size:20px; margin:10px 0; color:#bcc9ae; }.pin-empty p { font-size:12px; color:#7f9070; }.pin-saved { margin-top:30px; }.pin-saved .privacy-thumbnail video { aspect-ratio:1.8; }.pin-saved .privacy-thumbnail>span { font-size:11px; margin-top:12px; }.pin-welcome { margin-top:22px; color:#b5c99b; font-size:12px; }
.pin-form { position:absolute; inset:0; background:#181d16fa; display:flex; align-items:center; justify-content:center; flex-direction:column; padding:25px; }.pin-form-close { position:absolute; top:15px; right:20px; width:32px; height:32px; background:transparent; font-size:25px; color:#8e9f7f; }.pin-lock-icon svg { width:28px; height:28px; color:#c9e3a6; }.pin-form h5 { font-size:22px; font-weight:500; letter-spacing:-.5px; margin:13px 0 5px; }.pin-form>p { font-size:11px; color:#94a582; }.pin-input-label { font-size:10px; margin-top:16px; color:#b4c5a1; }.pin-form input { display:block; width:180px; border:1px solid #5b6b4a; border-radius:8px; background:#ffffff05; color:var(--accent); font-size:26px; text-align:center; letter-spacing:12px; padding:8px 8px 8px 20px; margin:6px 0 14px; }.pin-form .button { font-size:12px; padding:12px 20px; gap:10px; }.pin-form #pin-form-error { min-height:18px; margin-top:10px; color:#e5ba9b; }
.privacy-demo-note { font-size:11px; line-height:1.7; color:#8b9680; max-width:780px; text-align:center; margin:23px auto 0; }.privacy-features [hidden] { display:none!important; }
@media(max-width:900px) { .lid-demo,.pin-demo { padding:25px; }.laptop-scene { width:92%; }.lid-browser-content { padding:12px; }.lid-history { margin-top:11px; padding-top:8px; gap:9px; }.lid-content-heading h4 { font-size:13px; }.lid-tab { min-width:70px; }.privacy-feature-heading { gap:30px; }.privacy-feature-heading h3 { font-size:30px; } }
@media(max-width:600px) {
 .privacy-features { padding-bottom:60px; }.privacy-section-heading { margin-bottom:40px; }.privacy-section-heading h2 { font-size:42px; letter-spacing:-1.8px; }.privacy-section-heading>p { font-size:14px; }.privacy-feature-heading { grid-template-columns:1fr; gap:15px; }.privacy-feature-heading h3 { font-size:30px; }.privacy-feature-heading>p { font-size:13px; }.lid-demo,.pin-demo { padding:18px 12px; border-radius:14px; }.privacy-demo-top>span:last-child { display:none; }.privacy-demo-tag { font-size:8px; }.laptop-scene { margin-top:30px; width:94%; }.laptop-lid { padding:12px 5px 7px; border-radius:10px 10px 4px 4px; }.laptop-display { aspect-ratio:1.2; }.lid-browser { inset:10% 3% 12%; }.lid-tabs { padding:0 5px; height:25px; gap:3px; }.lid-tabs .collection-dots { margin-right:0; gap:3px; }.lid-tabs .collection-dots i { width:4px; height:4px; }.lid-tab { font-size:6px; min-width:0; flex:1; gap:4px; padding:4px; }.lid-address { font-size:6px; padding:5px; }.lid-browser-content { padding:9px; }.lid-browser .privacy-brand { font-size:13px; height:20px; }.lid-browser .brand-icon { transform:skew(-12deg) scale(.5); width:15px; margin-right:-9px; }.lid-content-heading { margin:8px 0; }.lid-content-heading h4 { font-size:10px; }.lid-content-heading>span { display:none; }.privacy-thumbnail-grid { gap:7px; }.lid-browser .privacy-thumbnail>span { font-size:5px; }.lid-history { gap:6px; font-size:5px; margin-top:8px; padding-top:6px; }.lid-history>span:first-child { font-size:5px; }.laptop-base { height:10px; bottom:13px; }.desktop-dock { bottom:8px; padding:4px 7px; }.desktop-dock>i { width:14px; height:14px; }.privacy-demo-actions { flex-direction:column; align-items:stretch; gap:15px; }.privacy-demo-actions>p { font-size:11px; text-align:center; }.privacy-demo-actions>.privacy-demo-tag { justify-content:center; }.pin-browser-toolbar { padding:12px; gap:10px; }.pin-browser-toolbar>span:nth-child(2) { display:none; }.pin-browser-toolbar .privacy-brand { font-size:16px; }.pin-unlock { padding:7px 9px; font-size:10px; }.pin-content { padding:20px 14px; min-height:345px; }.pin-content-heading h4 { font-size:22px; }.pin-content-heading>span { font-size:8px; }.pin-content-heading { gap:8px; }.pin-saved .privacy-thumbnail-grid { grid-template-columns:1fr; }.pin-saved .privacy-thumbnail>span { font-size:10px; }.pin-saved .privacy-thumbnail { margin-bottom:8px; }.pin-form { padding:20px 12px; }.pin-form h5 { font-size:20px; }.pin-form>p { font-size:10px; }.privacy-demo-note { font-size:10px; }
}
@media(prefers-reduced-motion:reduce) { .laptop-lid { transition:none; } }

/* Wallreel leaves the dock when the lid-close cleanup quits the app. */
.desktop-wallreel-icon { display:grid; place-items:center; width:20px; height:20px; border-radius:5px; background:#202718; }
.desktop-wallreel-icon .brand-icon { transform:skew(-12deg) scale(.48); transform-origin:center; }
.lid-demo[data-lid-state="closed"] .desktop-wallreel-icon,
.lid-demo[data-lid-state="cleared"] .desktop-wallreel-icon { display:none; }
@media(max-width:600px) {
  .desktop-wallreel-icon { width:14px; height:14px; border-radius:4px; }
  .desktop-wallreel-icon .brand-icon { transform:skew(-12deg) scale(.34); }
}

/* Center the full-size mark before scaling it inside the smaller dock tile. */
.desktop-wallreel-icon { position:relative; }
.desktop-wallreel-icon .brand-icon {
  position:absolute;
  left:calc(50% + 1px);
  top:50%;
  transform:translate(-50%,-50%) skew(-12deg) scale(.48);
}
@media(max-width:600px) {
  .desktop-wallreel-icon .brand-icon { transform:translate(-50%,-50%) skew(-12deg) scale(.34); }
}

/* Replay closes the empty laptop before restoring the open browser session. */
.lid-demo[data-lid-state="replay-closing"] .laptop-lid { transform:rotateX(-89deg); }
.lid-demo[data-lid-state="replay-closing"] .lid-browser,
.lid-demo[data-lid-state="replay-closing"] .desktop-wallreel-icon { display:none; }
.lid-replay-message { position:absolute; left:50%; top:45%; transform:translate(-50%,-50%); z-index:5; padding:13px 23px; border:1px solid #edff9a30; border-radius:10px; background:#151c11eF; box-shadow:0 8px 25px #0005; color:#edffce; font-size:20px; font-weight:500; white-space:nowrap; pointer-events:none; }
@media(max-width:600px) { .lid-replay-message { font-size:15px; padding:10px 16px; } }

.lid-cleanup-message { position:absolute; left:50%; top:44%; transform:translate(-50%,-50%); z-index:5; width:min(470px,90%); text-align:center; pointer-events:none; }
.lid-cleanup-message strong { display:block; color:var(--accent); font-size:clamp(20px,2.6vw,31px); font-weight:500; letter-spacing:-.6px; line-height:1.2; }
.lid-cleanup-message>span { display:block; max-width:380px; margin:14px auto 0; font-size:14px; line-height:1.65; color:#b3c3a3; }
@media(max-width:600px) { .lid-cleanup-message>span { font-size:11px; margin-top:10px; } }

/* Make the lid interaction an unmistakable invitation, with one central action. */
.lid-demo .lid-invitation {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:0; text-align:center; margin:10px -38px -26px; padding:28px 25px 34px;
  border-top:1px solid #edff9a22;
  background:radial-gradient(ellipse at 50% 100%,#edff9a12,transparent 75%);
  border-radius:0 0 20px 20px;
}
.lid-invitation .feature-index { color:#c0d6a2; font-size:9px; letter-spacing:2px; }
.lid-invitation h4 { font-size:clamp(24px,3vw,34px); line-height:1.2; letter-spacing:-.8px; margin-top:10px; }
.lid-demo .lid-invitation>p { font-size:14px; color:#adbba0; margin-top:9px; }
.lid-demo .lid-invitation .button {
  margin-top:23px; min-width:275px; min-height:62px; padding:18px 28px;
  gap:15px; font-size:17px; border-radius:11px; box-shadow:0 0 0 5px #edff9a09,0 8px 28px #0004;
  transition:transform .18s,box-shadow .18s;
}
.lid-invitation .button svg { width:24px; height:24px; flex-shrink:0; }
.lid-invitation .button:hover:not(:disabled) { transform:translateY(-2px); box-shadow:0 0 0 7px #edff9a12,0 12px 30px #0005; }
.lid-invitation .button:active:not(:disabled) { transform:translateY(0); }
.lid-invitation .button:disabled { opacity:.65; }
@media(max-width:900px) { .lid-demo .lid-invitation { margin-inline:-25px; margin-bottom:-25px; } }
@media(max-width:600px) {
  .lid-demo .lid-invitation { margin-inline:-12px; margin-bottom:-18px; padding:25px 18px 28px; border-radius:0 0 14px 14px; }
  .lid-demo .lid-invitation>p { font-size:12px; }
  .lid-demo .lid-invitation .button { width:100%; min-width:0; font-size:16px; min-height:60px; }
}
@media(prefers-reduced-motion:reduce) { .lid-invitation .button { transition:none; }.lid-invitation .button:hover:not(:disabled) { transform:none; } }

.lid-demo .lid-invitation>p:empty { display:none; }

/* The desktop counterpart: a tactile close-up of the Escape key. */
.escape-feature { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:65px; padding:38px 40px; margin-top:24px; border:1px solid #ffffff12; border-radius:16px; background:#151813; }
.escape-copy .feature-index { font-size:9px; color:#a7b795; }
.escape-copy h4 { font-size:35px; line-height:1.12; letter-spacing:-1.1px; margin-top:16px; }
.escape-copy>p { font-size:13px; line-height:1.75; color:#a0ad94; max-width:400px; margin-top:17px; }
.escape-copy kbd { font:11px var(--mono); border:1px solid #ffffff2a; border-bottom-width:2px; padding:2px 5px; border-radius:4px; color:#dae8c7; background:#ffffff05; }
.escape-demo { position:relative; min-width:0; padding:10px 0 0; overflow:hidden; }
.escape-keyboard { height:204px; width:380px; padding:20px; margin:0 auto; border:1px solid #6e79603b; border-radius:16px; background:linear-gradient(140deg,#394332,#242c1e 60%,#161c13); transform:perspective(800px) rotateX(22deg) rotateZ(-9deg); box-shadow:inset 0 1px #ffffff12,0 18px 30px #0006; mask-image:linear-gradient(110deg,#000 45%,transparent 95%); }
.escape-key-row { display:flex; gap:13px; align-items:start; }
.escape-key { flex:0 0 125px; height:95px; padding:0; border-radius:12px; background:#6d7b49; box-shadow:0 8px 0 #10170c,0 10px 15px #0009; position:relative; }
.escape-key-face { position:absolute; inset:0; padding:17px 19px; border-radius:12px; display:flex; align-items:start; justify-content:space-between; background:linear-gradient(145deg,#edffae,#cee48b); border:1px solid #f6ffd3; color:#273714; transform:translateY(-8px); box-shadow:inset 0 2px 0 #ffffff77,0 7px 0 #81974d; transition:transform 100ms ease-out,box-shadow 100ms ease-out; }
.escape-key-face>span { font:24px var(--sans); letter-spacing:-.5px; }.escape-key-face svg { width:20px; height:20px; align-self:end; }
.escape-key:hover:not(:disabled) { filter:none; }.escape-key:focus-visible { outline-offset:12px; }
.escape-neighbor { display:block; flex:0 0 90px; height:90px; border-radius:10px; border:1px solid #ffffff15; background:linear-gradient(135deg,#4b5540,#303b28); box-shadow:0 7px 0 #171e12; font:13px var(--sans); padding:14px; color:#8d9b7e; }
.escape-bottom-row { margin-top:18px; }.escape-bottom-row>span { display:block; flex:0 0 74px; height:72px; background:#36412c; border:1px solid #ffffff0b; box-shadow:0 6px 0 #171e12; border-radius:8px; padding:12px; font-size:14px; color:#6e805d; }
.escape-demo[data-escape-state="pressed"] .escape-key-face { transform:translateY(-1px); box-shadow:inset 0 2px 0 #ffffff50,0 1px 0 #81974d; }
.escape-feedback { position:relative; min-height:20px; margin-top:28px; text-align:center; font-size:11px; color:#9fad90; }.escape-feedback>span { display:block; }.escape-done { position:absolute; inset:0; opacity:0; color:#d4edac; }
.escape-demo[data-escape-state="pressed"] .escape-ready,.escape-demo[data-escape-state="done"] .escape-ready { opacity:0; }
.escape-demo[data-escape-state="pressed"] .escape-done,.escape-demo[data-escape-state="done"] .escape-done { opacity:1; }
.escape-hint { text-align:center; font-size:10px; color:#738366; margin-top:8px; }
.escape-announcement { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
@media(max-width:900px) { .escape-feature { gap:30px; padding:30px; }.escape-keyboard { margin-left:0; }.escape-copy h4 { font-size:31px; } }
@media(max-width:600px) { .escape-feature { grid-template-columns:1fr; gap:25px; padding:26px 22px; }.escape-copy h4 { font-size:30px; }.escape-keyboard { width:340px; height:186px; padding:20px 14px; }.escape-key { flex-basis:115px; height:85px; }.escape-neighbor { flex-basis:82px; height:80px; }.escape-feedback { font-size:10px; margin-top:24px; }.escape-copy>p { font-size:12px; } }
@media(prefers-reduced-motion:reduce) { .escape-key-face { transition:none; } }

.privacy-copy-emphasis { color:var(--text); font-weight:650; }
.pin-protection-lead { color:#fff; }
.pin-demo > .privacy-demo-actions { padding-top:0; padding-bottom:23px; min-height:0; }

/* Added only by motion.js: no-JS content is never hidden. */
.hero-entrance-word { display:inline-block; }
.entrance-pending { opacity:0; }
@media(prefers-reduced-motion:reduce) { .entrance-pending { opacity:1; } }
@media print { .entrance-pending { opacity:1; } }