/* Pier page: its accent, and the drawn bar and search panel used by the hero and the feature pictures. */
:root { --tint: #6874a6; --blue: var(--tint); }
@media (prefers-color-scheme: dark) { :root { --tint: #aab5de; } }

.p-hero-icon { width: 96px; height: 96px; border-radius: 22px; box-shadow: var(--shadow); }
.feature .q { color: var(--tint); }
.trust { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 18px; }
.trust span { display: inline-flex; align-items: center; gap: 7px; background: var(--pill); border: 1px solid var(--line); border-radius: 999px; padding: 6px 13px; font-size: 14px; font-weight: 600; }
.trust i { width: 8px; height: 8px; border-radius: 99px; background: var(--tint); }
.privacy-card { display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; align-items: center; background: var(--card); border: 1px solid var(--line);
                border-radius: 28px; padding: 40px; box-shadow: var(--shadow); }
.privacy-card h2 { margin-top: 10px; }
.privacy-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.privacy-card li { background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; color: var(--soft); font-size: 15px; }
.privacy-card li b { color: var(--ink); display: block; font-size: 15.5px; margin-bottom: 2px; }
.privacy-card .lead { margin-bottom: 18px; }
.privacy-card a.more { color: var(--tint); font-weight: 600; }
@media (max-width: 860px) { .privacy-card { grid-template-columns: 1fr; padding: 24px; } }

/* ---------- the drawn Mac (".pm"): wallpaper, glass bar, search panel ---------- */
.pm {
  --glass: rgba(255,255,255,.56); --glass-edge: rgba(255,255,255,.75); --ink2: #1d1d1f; --muted: #6e6e76; --track: rgba(0,0,0,.12);
  --row-sel: rgba(104,116,166,.22); --inset: rgba(0,0,0,.05); --accent2: #5b67a0; --winbg: rgba(255,255,255,.72);
  --wall: radial-gradient(70% 90% at 8% 0%, #c6cff3 0, transparent 62%), radial-gradient(60% 80% at 100% 18%, #f1d6e4 0, transparent 60%),
          radial-gradient(70% 70% at 60% 110%, #b9d7f0 0, transparent 60%), linear-gradient(180deg, #e3e7f6, #d3daf0);
  position: relative; overflow: hidden; color: var(--ink2); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  .pm { --glass: rgba(44,46,58,.58); --glass-edge: rgba(255,255,255,.14); --ink2: #f2f2f6; --muted: #a2a3ae; --track: rgba(255,255,255,.16);
        --row-sel: rgba(170,181,222,.24); --inset: rgba(255,255,255,.07); --accent2: #8f9bd0; --winbg: rgba(36,37,46,.78);
        --wall: radial-gradient(70% 90% at 8% 0%, #2f3966 0, transparent 62%), radial-gradient(60% 80% at 100% 18%, #4a2c4a 0, transparent 60%),
                radial-gradient(70% 70% at 60% 110%, #1d4060 0, transparent 60%), linear-gradient(180deg, #171a2b, #10121d); }
}
.pm .wall { position: absolute; inset: 0; background: var(--wall); }
.pm .glass { background: var(--glass); border: 1px solid var(--glass-edge); backdrop-filter: blur(22px) saturate(170%); -webkit-backdrop-filter: blur(22px) saturate(170%);
             box-shadow: 0 18px 50px rgba(20,24,60,.18), 0 2px 6px rgba(20,24,60,.08); }

/* a plain app window on the desktop, for depth */
.pm .win { position: absolute; border-radius: 12px; background: var(--winbg); border: 1px solid var(--glass-edge); box-shadow: 0 20px 50px rgba(20,24,60,.16); overflow: hidden; }
.pm .win .tb { height: 30px; display: flex; gap: 7px; align-items: center; padding: 0 12px; border-bottom: 1px solid var(--track); }
.pm .win .tb i { width: 11px; height: 11px; border-radius: 99px; background: var(--track); }
.pm .win .ln { height: 9px; border-radius: 5px; background: var(--track); margin: 14px 16px 0; }

/* glyphs: white line icons drawn with a mask, so one class sets the picture */
.pm .tile { width: 48px; height: 48px; border-radius: 11px; display: grid; place-items: center; flex: none; position: relative;
            background: linear-gradient(180deg, hsl(var(--h,225) 62% 64%), hsl(var(--h,225) 58% 48%));
            box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 2px 5px rgba(0,0,0,.14); }
.pm .tile.grey { background: linear-gradient(180deg, #9a9aa2, #6c6c74); }
.pm .g { display: block; width: 58%; height: 58%; background: #fff; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.pm .g.ink { background: var(--muted); }
.pm {
  --folder: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E");
  --mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3.5 7l8.5 6 8.5-6'/%3E%3C/svg%3E");
  --cal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
  --pen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16z'/%3E%3C/svg%3E");
  --globe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c3 3.5 3 14.5 0 18M12 3c-3 3.5-3 14.5 0 18'/%3E%3C/svg%3E");
  --music: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M9 18V5l11-2v13'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='17' cy='16' r='3'/%3E%3C/svg%3E");
  --photo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='9' cy='10' r='1.8'/%3E%3Cpath d='M21 16l-5-5-9 8'/%3E%3C/svg%3E");
  --term: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M7 9l3 3-3 3M12.5 15H17'/%3E%3C/svg%3E");
  --chat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4z'/%3E%3C/svg%3E");
  --code: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 7l-5 5 5 5M16 7l5 5-5 5'/%3E%3C/svg%3E");
  --search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M20 20l-4.8-4.8'/%3E%3C/svg%3E");
  --link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1'/%3E%3C/svg%3E");
  --down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v13M6.5 11.5L12 17l5.5-5.5'/%3E%3C/svg%3E");
  --trash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13M10 11v5M14 11v5'/%3E%3C/svg%3E");
  --doc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M6 3h8l4 4v14H6z'/%3E%3Cpath d='M14 3v4h4M9 13h6M9 17h6'/%3E%3C/svg%3E");
  --gear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h9M17 7h3M4 17h3M11 17h9'/%3E%3Ccircle cx='15' cy='7' r='2'/%3E%3Ccircle cx='9' cy='17' r='2'/%3E%3C/svg%3E");
  --stack: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='9' width='16' height='11' rx='2'/%3E%3Cpath d='M7 6h10M9.5 3h5'/%3E%3C/svg%3E");
  --tray: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M3 13l3-8h12l3 8v6H3z'/%3E%3Cpath d='M3 13h5l1 2h6l1-2h5'/%3E%3C/svg%3E");
  --play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M10 9v6l5-3z'/%3E%3C/svg%3E");
  --zip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='5' rx='1'/%3E%3Cpath d='M5 9v11h14V9M10 13h4'/%3E%3C/svg%3E");
}

/* the bar */
.pm .bar { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; align-items: flex-start; padding: 8px 4px 5px; border-radius: 22px; white-space: nowrap; }
.pm .slot { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 54px; flex: none; }
.pm .dot { width: 4px; height: 4px; border-radius: 9px; background: var(--ink2); opacity: 0; }
.pm .dot.on { opacity: .7; }
.pm .sep { width: 13px; align-self: stretch; display: grid; place-items: center; padding-bottom: 7px; }
.pm .sep::before { content: ""; width: 1px; height: 32px; border-radius: 1px; background: var(--track); }
.pm .badge { position: absolute; top: -4px; right: -4px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 99px; background: #ff3b30; color: #fff;
             font: 700 10.5px/17px -apple-system, system-ui, sans-serif; text-align: center; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.pm .ring { width: 44px; height: 44px; position: relative; margin-top: 2px; }
.pm .ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.pm .ring circle { fill: none; stroke-width: 4; }
.pm .ring .trk { stroke: var(--track); }
.pm .ring .val { stroke-linecap: round; }
.pm .ring b { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; font: 700 13px/1 -apple-system, system-ui, sans-serif; letter-spacing: -.02em; }
.pm .ring b small { display: block; font-size: 6.5px; font-weight: 700; letter-spacing: .04em; color: var(--muted); margin-top: 2px; }

/* the search panel */
.pm .search { position: absolute; left: 50%; top: 30px; width: 560px; margin-left: -280px; }
.pm .field { height: 56px; border-radius: 18px; display: flex; align-items: center; gap: 12px; padding: 0 18px; font-size: 23px; }
.pm .field .g { width: 22px; height: 22px; background: var(--muted); flex: none; }
.pm .field .q:empty::before { content: "Search"; color: var(--muted); opacity: .8; }
.pm .caret { width: 2px; height: 26px; background: var(--accent2); margin-left: -10px; animation: pm-blink 1s steps(1) infinite; }
@keyframes pm-blink { 50% { opacity: 0; } }
.pm .results { margin-top: 8px; border-radius: 18px; padding: 8px; }
.pm .tabs2 { display: flex; gap: 4px; padding: 4px 4px 2px; }
.pm .tabs2 b { font-size: 11px; font-weight: 600; padding: 0 11px; height: 25px; line-height: 25px; border-radius: 99px; background: var(--inset); }
.pm .tabs2 b.on { background: var(--accent2); color: #fff; }
.pm .sec { font-size: 9.5px; font-weight: 650; letter-spacing: .14em; color: var(--muted); padding: 10px 10px 4px; }
.pm .row { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 10px; border-radius: 10px; position: relative; }
.pm .row .tile { width: 28px; height: 28px; border-radius: 7px; }
.pm .row .file { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 6px; background: var(--inset); }
.pm .row .file .g { width: 18px; height: 18px; background: var(--muted); }
.pm .row div { line-height: 1.2; min-width: 0; }
.pm .row div b { display: block; font-size: 13.5px; font-weight: 600; }
.pm .row div small { display: block; font-size: 11px; color: var(--muted); }
.pm .row mark { background: none; color: inherit; text-decoration: underline; text-decoration-color: var(--accent2); text-decoration-thickness: 2px; text-underline-offset: 2px; }
.pm .row kbd { margin-left: auto; font: 600 11px/1 -apple-system, system-ui, sans-serif; color: var(--muted); opacity: 0; }
.pm .row.sel { background: var(--row-sel); }
.pm .row.sel kbd { opacity: 1; }
.pm .hint { font-size: 9.5px; color: var(--muted); text-align: center; padding: 8px 0 2px; }

/* ---------- hero: a fixed-size scene, scaled to fit (pier.js sets --k) ---------- */
.stage-wrap { --k: 1; width: 100%; max-width: 920px; margin: 48px auto 0; height: calc(510px * var(--k)); }
.stage { width: 920px; height: 510px; border-radius: 26px; transform: scale(var(--k)); transform-origin: 0 0;
         box-shadow: 0 0 0 1px var(--line), 0 40px 90px rgba(20,24,60,.20), 0 8px 24px rgba(20,24,60,.08); }
@media (max-width: 640px) { .stage-wrap { height: calc(510px * var(--k)); } .stage { width: 600px; } .stage .wide { display: none; } .stage .w1 { display: none; } }

.stage .w1 { left: 64px; top: 120px; width: 300px; height: 210px; }
.stage .w2 { right: 70px; top: 70px; width: 330px; height: 240px; }

/* the motion: each step is a class on .stage, added by pier.js */
.stage .slot.anim { width: 0; opacity: 0; transform: translateY(18px) scale(.5);
                    transition: width .55s cubic-bezier(.3,.9,.3,1), opacity .35s ease, transform .55s cubic-bezier(.3,1.5,.5,1); transition-delay: var(--d, 0s); }
.stage .sep.anim { transform: none; }
.stage.groups .g1, .stage.groups2 .g2, .stage.tools .g3, .stage.stats .g4 { width: 54px; opacity: 1; transform: none; }
.stage.groups .sep.g1, .stage.groups2 .sep.g2, .stage.tools .sep.g3, .stage.stats .sep.g4 { width: 13px; }
.stage .toast { position: absolute; left: 50%; bottom: 110px; transform: translate(-50%, 14px) scale(.9); opacity: 0; padding: 9px 16px 9px 12px; border-radius: 999px;
                font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 9px; transition: opacity .35s ease, transform .5s cubic-bezier(.3,1.4,.5,1); }
.stage .toast i { width: 22px; height: 22px; border-radius: 99px; background: var(--accent2); color: #fff; display: grid; place-items: center; font-style: normal; font-weight: 700; }
.stage.toasting .toast { opacity: 1; transform: translate(-50%, 0); }
.stage .search { opacity: 0; transform: translateY(-26px) scale(.97); transition: opacity .35s ease, transform .55s cubic-bezier(.2,.9,.25,1); pointer-events: none; }
.stage.searching .search { opacity: 1; transform: none; }
.stage .results { opacity: 0; transform: translateY(-8px); transition: opacity .3s ease, transform .4s ease; }
.stage.found .results { opacity: 1; transform: none; }
.stage .results .row, .stage .results .sec { opacity: 0; transform: translateY(6px); transition: opacity .3s ease, transform .35s ease, background-color .25s ease; transition-delay: var(--d, 0s); }
.stage.found .results .row, .stage.found .results .sec { opacity: 1; transform: none; }
.stage .scene { transition: opacity .5s ease; }
.stage.fade .scene { opacity: 0; }
.stage.still * { transition: none !important; }
@media (prefers-reduced-motion: reduce) { .stage *, .stage { transition: none !important; } .pm .caret { animation: none; } }

/* ---------- Search section: a second scene where results re-rank as you type ---------- */
.s-wrap { --k: 1; width: 100%; max-width: 920px; margin: 40px auto 0; height: calc(500px * var(--k)); }
.s-stage { width: 920px; height: 500px; text-align: left; border-radius: 26px; transform: scale(var(--k)); transform-origin: 0 0;
           box-shadow: 0 0 0 1px var(--line), 0 40px 90px rgba(20,24,60,.18), 0 8px 24px rgba(20,24,60,.08); }
@media (max-width: 640px) { .s-stage { width: 600px; } .s-stage .keys { left: 20px; } }
.s-stage .keys { position: absolute; left: 36px; top: 30px; display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--muted); z-index: 2; }
.s-stage kbd.cap { font: 600 15px/1 -apple-system, system-ui, sans-serif; color: var(--ink2); min-width: 40px; height: 40px; padding: 0 12px; display: grid; place-items: center;
                   border-radius: 9px; background: var(--glass); border: 1px solid var(--glass-edge); box-shadow: 0 3px 0 var(--track), 0 6px 14px rgba(20,24,60,.12);
                   transition: transform .12s ease, box-shadow .12s ease; }
.s-stage.press kbd.cap { transform: translateY(3px); box-shadow: 0 0 0 var(--track), 0 2px 6px rgba(20,24,60,.12); }
.s-stage .search { top: 92px; transition: opacity .3s ease, transform .5s cubic-bezier(.2,.9,.25,1); opacity: 0; transform: translateY(-20px) scale(.97); }
.s-stage.open .search { opacity: 1; transform: none; }
.s-stage .list { position: relative; height: 214px; transition: height .35s ease; }
.s-stage .list .sec { position: absolute; left: 0; top: 0; }
.s-stage .list .row { position: absolute; left: 0; right: 0; top: 24px; opacity: 0; transform: translateY(calc(var(--y, 0) * 44px + 6px));
                      transition: transform .4s cubic-bezier(.2,.8,.2,1), opacity .25s ease, background-color .2s ease; }
.s-stage .list .row.in { opacity: 1; transform: translateY(calc(var(--y) * 44px + var(--gap, 0px))); }
.s-stage .list .row small em { font-style: normal; color: var(--accent2); font-weight: 600; }
.s-stage .why { position: absolute; left: 50%; bottom: 22px; transform: translate(-50%, 8px); opacity: 0; white-space: nowrap; padding: 8px 15px 8px 11px; border-radius: 999px;
                font-size: 13.5px; font-weight: 600; display: flex; gap: 8px; align-items: center; transition: opacity .3s ease, transform .4s ease; }
.s-stage .why i { width: 8px; height: 8px; border-radius: 9px; background: var(--accent2); }
.s-stage .why.on { opacity: 1; transform: translate(-50%, 0); }
.s-stage.still, .s-stage.still * { transition: none !important; }
@media (prefers-reduced-motion: reduce) { .s-stage, .s-stage * { transition: none !important; } }
.reasons { margin-top: 18px; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.reasons .card h3 { display: flex; align-items: center; gap: 10px; }
.reasons code { font: 600 13px/1 ui-monospace, "SF Mono", Menlo, monospace; background: var(--line); padding: 2px 6px; border-radius: 6px; color: var(--ink); }
.proof { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 44px; }
.proof figure { margin: 0; }
.proof figcaption { margin-top: 12px; color: var(--soft); font-size: 15px; text-align: left; }
.proof figcaption b { color: var(--ink); }
.proof .shot img { border-radius: 12px; }
@media (max-width: 860px) { .proof { grid-template-columns: 1fr; } }