/* Generated by _build/build_from_claude_design.py from the Claude Design Version F export. */
*, *::before, *::after { box-sizing: border-box; }
  body { margin: 0; background: #F4EFE5; color: #171412; font-family: Archivo, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; text-wrap: pretty; }
  a { color: #C4614A; text-decoration: none; }
  a:hover { color: #171412; }
  @keyframes wtDrift { 0%,100% { transform: translate(0,0); } 50% { transform: translate(1.5px,-2px); } }
  @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition-duration: 1ms !important; } }
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
button:disabled { opacity: 0.6; cursor: default; }
/* hero mock: the middle column is narrow, so drop the domain labels and keep titles on one line */
.r-hero > *, .r-app > * { min-width: 0; }
.r-app > :nth-child(2) span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.r-app > :nth-child(2) span[style*="width: 14px"] { flex: none; }
.r-app > :nth-child(2) span[style*="margin-left: auto"] { display: none; }
.r-app > :nth-child(2) > :first-child > :last-child { display: none; }
.js [data-beat-id="1"]{--b1o:0;--b1y:18;--b1TileO:1;--b1TileX:0;--b1TileY:0;--b1TileS:1;--b1DialogOpacity:0;--b1DialogY:14;--b1ToastOpacity:0;--b1ToastY:14}
[data-beat-id="1"], .js [data-beat-id="1"].seen{--b1o:1;--b1y:0}
[data-beat-id="1"], .js [data-beat-id="1"].play{--b1TileO:0;--b1TileX:90;--b1TileY:-22;--b1TileS:0.7;--b1DialogOpacity:1;--b1DialogY:0;--b1ToastOpacity:1;--b1ToastY:0}
.js [data-beat-id="2"]{--b2o:0;--b2y:18;--b2LeftOpacity:1;--b2RightOpacity:0;--b2ArrowX:-10;--b2ToastOpacity:0;--b2ToastY:12}
[data-beat-id="2"], .js [data-beat-id="2"].seen{--b2o:1;--b2y:0}
[data-beat-id="2"], .js [data-beat-id="2"].play{--b2LeftOpacity:0.5;--b2RightOpacity:1;--b2ArrowX:6;--b2ToastOpacity:1;--b2ToastY:0}
.js [data-beat-id="3"]{--b3o:0;--b3y:18;--b3c1:0;--b3y1:16;--b3c2:0;--b3y2:16;--b3c3:0;--b3y3:16;--b3Footer:0}
[data-beat-id="3"], .js [data-beat-id="3"].seen{--b3o:1;--b3y:0}
[data-beat-id="3"], .js [data-beat-id="3"].play{--b3c1:1;--b3y1:0;--b3c2:1;--b3y2:0;--b3c3:1;--b3y3:0;--b3Footer:1}
.js [data-beat-id="4"]{--b4o:0;--b4y:18;--b4Fill:4%;--b4r1:0;--b4r2:0;--b4r3:0;--b4r4:0}
[data-beat-id="4"], .js [data-beat-id="4"].seen{--b4o:1;--b4y:0}
[data-beat-id="4"], .js [data-beat-id="4"].play{--b4Fill:86%;--b4r1:1;--b4r2:1;--b4r3:1;--b4r4:1}
.js [data-beat-id="5"]{--b5o:0;--b5y:18;--b5Banner:0;--b5BannerY:14;--b5r1:0;--b5r2:0;--b5r3:0}
[data-beat-id="5"], .js [data-beat-id="5"].seen{--b5o:1;--b5y:0}
[data-beat-id="5"], .js [data-beat-id="5"].play{--b5Banner:1;--b5BannerY:0;--b5r1:1;--b5r2:1;--b5r3:1}
/* between replays: snap the illustration back without animating the reset */
.js [data-beat-id].rewind * { transition: none !important; }
.h1:hover{background: #C4614A !important}
.f2:focus{border-color: #C4614A !important}
.h3:hover{background: #171412 !important}
.h4:hover{background: #C4614A !important;color: #F4EFE5 !important}
.h5:hover{background: #171412 !important;color: #FDF6EC !important}
.h6:hover{border-color: #C4614A !important;color: #171412 !important}

/* ---- tablet and phone (added for the live site; the design was desktop-only) ---- */
@media (max-width: 1080px) {
  .r-hero, .r-beat, .r-dark { grid-template-columns: 1fr !important; gap: 40px !important; }
  .r-beatpad { padding: 72px 0 !important; }
}
@media (max-width: 720px) {
  .r-pad { padding-left: 16px !important; padding-right: 16px !important; }
  .r-h1 { font-size: 58px !important; }
  .r-h2 { font-size: 32px !important; }
  .r-h2big { font-size: 40px !important; }
  .r-app { grid-template-columns: 1fr !important; }
  /* hero mock on a phone: keep all three panels, stacked */
  .r-app > :first-child { flex-direction: row !important; overflow-x: auto; gap: 6px !important; padding: 12px !important; border-right: none !important; border-bottom: 1px solid rgba(23,20,18,0.09); scrollbar-width: none; }
  .r-app > :first-child::-webkit-scrollbar { display: none; }
  .r-app > :first-child > :first-child, .r-app > :first-child > :last-child { display: none !important; }
  .r-app > :first-child > div { flex: none; white-space: nowrap; }
  .r-app > :last-child { flex-direction: row !important; flex-wrap: wrap; align-items: center; gap: 4px 12px !important; border-left: none !important; border-top: 1px solid rgba(23,20,18,0.09); }
  .r-app > :last-child > :first-child { width: 100%; }
  .r-app > :last-child > :nth-child(3) { display: none !important; }
  .r-app > :last-child > button { margin: 0 0 0 auto !important; }
  .r-three, .r-two { grid-template-columns: 1fr !important; }
  .r-switch { grid-template-columns: 1fr !important; }
  .r-switch > :nth-child(2) { transform: rotate(90deg); }
  .r-switch > :nth-child(2) > :last-child { transform: rotate(-90deg); }
  .r-app { min-height: 0 !important; }
  .r-darkpad { padding: 28px 20px !important; }
  .r-beatpad { padding: 56px 0 !important; }
  .r-hero > *, .r-beat > *, .r-dark > *, .r-app > * { min-width: 0; }
  /* beat 01 favicon strip: 12 tiles don't fit a phone, show 8 */
  [data-beat-id="1"] > :last-child > :first-child > :nth-child(n+9) { display: none; }
  header .r-pad > :last-child > span:first-child, header.r-pad > :last-child > span:first-child { display: none !important; }
  form[data-signup] { flex-direction: column; }
}
/* stacked layout: the copy sits above its illustration, so show it straight away instead of waiting for the illustration */
@media (max-width: 1080px) {
  .js [data-beat-id="1"]{--b1o:1;--b1y:0}
  .js [data-beat-id="2"]{--b2o:1;--b2y:0}
  .js [data-beat-id="3"]{--b3o:1;--b3y:0}
  .js [data-beat-id="4"]{--b4o:1;--b4y:0}
  .js [data-beat-id="5"]{--b5o:1;--b5y:0}
}
/* devices that can't install an extension (alpha page): swap Install for "send to my computer" */
.on-phone { display: none !important; }
.phone .on-desktop { display: none !important; }
.phone a.on-phone { display: inline-flex !important; }
.phone p.on-phone { display: block !important; }
/* the header has room for the status label once its Install button is gone */
.phone .alpha header.r-pad > :last-child > span:first-child { display: flex !important; }