/* ShipLock public site: "the kitchen table". Cream paper, ink type, one purple (the logo's), hairline rules,
   and the product shown as the things it makes: a printed card, a text message, a sticky note. */
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
:root{
  --paper:#f6f1e7;--paper2:#efe8da;--card:#fffdf8;--ink:#1d1a22;--ink2:#4c4756;--mute:#857d8f;--line:#d9d0c0;--line2:#e8e0d0;
  --vi:#6d4ae8;--vi-ink:#4b2fc4;--vi-soft:#ece6ff;--am:#f4c95d;--am-ink:#6b4c00;--am-soft:#fff3cf;--bl-soft:#e3ebff;--bl-ink:#2b4a9e;
  --gr-ink:#1f6f43;--gr-soft:#dff3e6;--rd-ink:#9b2c2c;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;--sans:ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;--mono:ui-monospace,Menlo,Consolas,monospace;
}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font:17px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit}
::selection{background:var(--am-soft)}
.wrap{max-width:1080px;margin:0 auto;padding:0 1.25rem}

/* masthead */
nav{display:flex;align-items:center;justify-content:space-between;padding:1.1rem 0 .9rem;border-bottom:1px solid var(--line)}
.logo{display:flex;align-items:center;gap:.55rem;text-decoration:none;font:600 1.3rem/1 var(--serif);letter-spacing:-.01em}
.logo img{height:30px}
nav .links{display:flex;gap:1.3rem;align-items:center;font-size:.95rem;color:var(--ink2)}
nav .links a{text-decoration:none;white-space:nowrap}
nav .links a:not(.btn){padding:.6rem .1rem}
nav .links a:hover{color:var(--ink)}
.btn{display:inline-block;background:var(--ink);color:var(--paper);font:600 1rem var(--sans);border:0;border-radius:999px;padding:.8rem 1.35rem;text-decoration:none;cursor:pointer;line-height:1.2}
.btn:hover{background:#000}
.btn.vi{background:var(--vi)}.btn.vi:hover{background:var(--vi-ink)}
.btn.ghost{background:none;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn.ghost:hover{background:var(--card)}
nav .btn{padding:.55rem 1rem;font-size:.9rem}

/* type */
h1{font:900 clamp(2.6rem,6.2vw,4.6rem)/.98 var(--serif);letter-spacing:-.035em;font-variation-settings:"opsz" 144,"SOFT" 60}
h1 em{font-style:italic;font-weight:600;color:var(--vi-ink);font-variation-settings:"opsz" 144,"SOFT" 100,"WONK" 1}
h2{font:700 clamp(1.7rem,3.4vw,2.5rem)/1.08 var(--serif);letter-spacing:-.025em;margin:0 0 .5rem;font-variation-settings:"opsz" 96}
h3{font:600 1.05rem/1.3 var(--serif);margin:0 0 .4rem}
.eyebrow{font:600 .72rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:.9rem;display:flex;align-items:center;gap:.6rem}
.eyebrow:before{content:"";width:1.6rem;height:1px;background:var(--line)}
.lead{color:var(--ink2);font-size:1.2rem;max-width:32rem;margin:1.1rem 0 1.4rem}
.fine{color:var(--mute);font-size:.86rem;margin-top:.7rem;max-width:32rem}
.sub2{color:var(--ink2);max-width:36rem;margin-bottom:1.3rem;font-size:1.05rem}
section{padding:3.4rem 0 0}
section.rule{border-top:1px solid var(--line);margin-top:3.4rem}
code{font:.9em var(--mono);background:var(--card);border:1px solid var(--line2);border-radius:4px;padding:.05em .35em}

/* hero */
.hero{display:grid;grid-template-columns:1.15fr 1fr;gap:2.5rem;align-items:center;padding:3.2rem 0 1rem}
.join{display:flex;gap:.5rem;flex-wrap:wrap;max-width:30rem}
.join input{flex:1;min-width:12rem;background:var(--card);border:1.5px solid var(--ink);color:var(--ink);border-radius:999px;padding:.8rem 1.1rem;font:inherit;min-height:50px}
.join input::placeholder{color:var(--mute)}
.join button{min-height:50px}
/* the table: a printed card, a message, a sticky note */
.table{position:relative;min-height:400px}
.card-print{position:absolute;left:2%;top:27%;width:62%;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:1.1rem 1.1rem 1rem;box-shadow:0 18px 40px -18px rgba(29,26,34,.35),0 2px 0 rgba(29,26,34,.04);transform:rotate(-3deg)}
.card-print h4{font:700 1.25rem/1.1 var(--serif);margin:0 0 .15rem}
.card-print .small{font-size:.74rem;color:var(--mute);margin-bottom:.7rem}
.card-print .qr{width:112px;height:112px;background:#fff;border:1px solid var(--line2);border-radius:6px;padding:4px;line-height:0;float:left;margin:0 .8rem .2rem 0}
.card-print .qr svg{width:100%;height:100%}
.card-print .say{font:italic 600 1.05rem/1.25 var(--serif);margin:.25rem 0 .5rem}
.card-print .addr{clear:both;font:.68rem var(--mono);color:var(--mute);word-break:break-all;padding-top:.4rem;border-top:1px dashed var(--line2);margin-top:.4rem}
.ticket{display:inline-block;font:600 .72rem/1 var(--sans);letter-spacing:.04em;text-transform:uppercase;padding:.3rem .55rem;border-radius:4px}
.t-view{background:var(--bl-soft);color:var(--bl-ink)}.t-sub{background:var(--am-soft);color:var(--am-ink)}.t-edit{background:var(--vi-soft);color:var(--vi-ink)}.t-none{background:#eee9e0;color:var(--mute)}
.bubble{position:absolute;right:0;top:0;max-width:56%;background:#1f8a3a;color:#fff;border-radius:18px 18px 4px 18px;padding:.7rem .95rem;font-size:.92rem;line-height:1.35;box-shadow:0 10px 24px -14px rgba(0,0,0,.4)}
.bubble .u{display:block;font:.8rem var(--mono);opacity:.92;margin-top:.25rem;text-decoration:underline;word-break:break-all}
.bubble .who{display:block;font-size:.7rem;opacity:.75;margin-bottom:.15rem}
.sticky{position:absolute;right:2%;bottom:0;width:44%;background:var(--am);color:#3b2a00;padding:.8rem .9rem .9rem;font:600 .95rem/1.3 var(--serif);transform:rotate(2.5deg);box-shadow:0 12px 24px -14px rgba(0,0,0,.5)}
.sticky small{display:block;font:500 .75rem var(--sans);opacity:.75;margin-top:.3rem}

/* role demo on a paper planner */
.b-view{background:var(--bl-soft);color:var(--bl-ink)}.b-sub{background:var(--am-soft);color:var(--am-ink)}.b-edit{background:var(--vi-soft);color:var(--vi-ink)}.b-prv{background:#eee9e0;color:var(--mute)}

/* how it works: a numbered ledger */

/* phones on paper */

/* gallery */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem 1.2rem}
.gal figure img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:top;border-radius:10px;border:1px solid var(--line);box-shadow:0 12px 28px -20px rgba(29,26,34,.5)}
.gal figcaption{display:flex;justify-content:space-between;align-items:center;margin-top:.5rem;font:600 .98rem var(--serif)}

/* what you get: a ledger */

/* faq */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;font:600 1.08rem var(--serif);padding:.95rem 2rem .95rem 0;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";position:absolute;right:.2rem;top:.8rem;font:400 1.3rem var(--serif);color:var(--mute)}
.faq details[open] summary:after{content:"–"}
.faq p{color:var(--ink2);padding:0 0 1.1rem;max-width:44rem}
.faq a{color:var(--vi-ink)}

/* final */
.final{text-align:center;padding:3.5rem 0 1rem}
.final .join{margin:1rem auto 0}
.final .fine{margin:.8rem auto 0}
footer{color:var(--mute);font-size:.84rem;padding:2.2rem 0 3rem;margin-top:2.5rem;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
footer a{color:var(--mute)}

/* blog */
.post{max-width:42rem;margin:0 auto}
.post h1{font-size:clamp(2.1rem,5vw,3.2rem);margin:1.6rem 0 .6rem}
.post h2{font-size:1.5rem;margin:2rem 0 .5rem}
.post .lead{font-size:1.15rem}
.post p,.post li{margin:.6rem 0;line-height:1.6;color:var(--ink2)}
.post ol,.post ul{padding-left:1.3rem}
.post b{color:var(--ink)}
.post a{color:var(--vi-ink)}
.post figure{margin:1.4rem 0}.post img{width:100%;border-radius:12px;border:1px solid var(--line)}
.post figure.phone img{display:block;max-width:300px;margin:0 auto}
.post figcaption{color:var(--mute);font-size:.84rem;margin-top:.4rem}
.post pre{background:var(--ink);color:var(--paper);border-radius:10px;padding:.9rem 1rem;overflow:auto;font:.86rem/1.5 var(--mono);margin:.8rem 0}
.post pre code{background:none;border:0;padding:0;color:inherit;font:inherit}
.post .tip{background:var(--vi-soft);border-left:3px solid var(--vi);padding:.8rem 1rem;margin:1rem 0;border-radius:0 8px 8px 0;color:var(--ink)}
.post .role{display:inline-block;font:600 .72rem var(--sans);letter-spacing:.04em;text-transform:uppercase;padding:.2rem .5rem;border-radius:4px;vertical-align:middle}
.date{color:var(--mute);font-size:.84rem;letter-spacing:.06em;text-transform:uppercase;margin-top:1.8rem}
.posts{list-style:none;display:grid;gap:0;border-top:1px solid var(--line);margin-top:1.4rem}
.posts a{display:block;padding:1.1rem 0;border-bottom:1px solid var(--line);text-decoration:none}
.posts a:hover b{color:var(--vi-ink)}
.posts b{display:block;font:600 1.25rem var(--serif);margin-bottom:.2rem}
.posts span{color:var(--ink2);font-size:.95rem}

img{max-width:100%;height:auto}
@media(max-width:860px){
  .hero{grid-template-columns:1fr;gap:2rem;padding-top:2rem}
  .table{min-height:0;display:grid;gap:.9rem;padding:.4rem 0 .6rem}
  .table .bubble,.table .card-print,.table .sticky{position:static;max-width:none;width:auto}
  .table .bubble{justify-self:end;max-width:78%}
  .table .card-print{width:84%;transform:rotate(-1.5deg)}
  .table .sticky{width:62%;justify-self:end;transform:rotate(1.5deg)}
  .gal{grid-template-columns:1fr 1fr}
}
@media(max-width:480px){
  nav .links{gap:.8rem;font-size:.88rem}
  .gal{grid-template-columns:1fr}
  .bubble{font-size:.84rem}
}

/* ---- the front page: a prompt box, four starters, and the card that appears when the app is live ---- */
.hero1{display:block;padding:2.6rem 0 .5rem}
.hero1 .lead,.hero1 .ask,.hero1 .scen,.hero1 .fine1,.hero1 .building,.hero1 .err,.hero1 .live,.hero1 .keep,.hero1 .made,.hero1 .eyebrow{max-width:44rem}
.hero1 .lead em{font-style:italic;color:var(--vi-ink)}
.hero1 h1{font-size:clamp(2.3rem,7vw,3.6rem)}
.ask{margin-top:1.5rem;background:var(--card);border:1.5px solid var(--ink);border-radius:18px;padding:.9rem 1rem .8rem;box-shadow:0 18px 40px -26px rgba(29,26,34,.45)}
.ask textarea{width:100%;border:0;background:none;font:1.15rem/1.4 var(--sans);color:var(--ink);resize:none;min-height:4.2rem;outline:none}
.ask textarea::placeholder{color:var(--mute)}
.ask .row{display:flex;justify-content:space-between;align-items:center;gap:.6rem;margin-top:.3rem}
.ask .row small{color:var(--mute);font-size:.8rem}
.ask .row .btn{white-space:nowrap}
.ask .row .btn[disabled]{opacity:.6}
.scen{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.scen button{text-align:left;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:.9rem 1rem;cursor:pointer;font:inherit;color:var(--ink);display:grid;gap:.35rem;align-content:start}
.scen button:hover{border-color:var(--ink)}
.scen button.on{border-color:var(--vi);box-shadow:inset 0 0 0 1px var(--vi)}
.scen b{font:600 1.1rem var(--serif)}
.scen span{color:var(--ink2);font-size:.92rem;line-height:1.35}
.scen i{font-style:normal;display:flex;gap:.35rem;flex-wrap:wrap;margin-top:.25rem}
.scen .ticket{font-size:.66rem;padding:.25rem .45rem;letter-spacing:.02em;text-transform:none}
.fine1{color:var(--mute);font-size:.86rem;margin-top:1rem}
.building{margin-top:1.2rem;color:var(--ink2);font:italic 600 1.1rem/1.4 var(--serif)}
.building small{font:500 .86rem var(--sans);color:var(--mute)}
.building .dots{display:inline-block;animation:dots 1.2s steps(4,end) infinite;overflow:hidden;vertical-align:bottom;width:1.2em}
@keyframes dots{to{width:0}}
.err{margin-top:1rem;color:var(--rd-ink);background:#fbe9e9;border-radius:10px;padding:.7rem .9rem;font-size:.95rem}
.live{margin-top:1.5rem}
.live .card-print{position:static;transform:rotate(-1.5deg);width:auto;max-width:24rem}
.live .lk{clear:both;display:grid;gap:.4rem;padding-top:.5rem;border-top:1px dashed var(--line2);margin-top:.4rem}
.lrow{display:flex;align-items:center;gap:.5rem;font:.78rem var(--mono);color:var(--mute)}
.lrow .ticket{flex:none;font-size:.66rem;padding:.25rem .45rem;letter-spacing:.02em;text-transform:none}.lrow a{color:var(--ink2);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lrow .copy{flex:none;font:600 .72rem var(--sans);background:none;border:1px solid var(--line);border-radius:999px;padding:.25rem .6rem;color:var(--ink2);cursor:pointer;min-height:28px}
.lrow .copy:hover{border-color:var(--ink);color:var(--ink)}
.live .next{margin-top:1.2rem;display:flex;gap:.5rem;flex-wrap:wrap}
.live .keep{margin-top:1.4rem;border-top:1px solid var(--line);padding-top:1rem;max-width:34rem}
.live .keep p{color:var(--ink2);font-size:.98rem;margin-bottom:.7rem}.live .keep p b{color:var(--ink)}
.made{margin-top:2rem;border-top:1px solid var(--line);padding-top:1.2rem}
.made .one{display:grid;gap:.4rem;padding:.7rem 0;border-bottom:1px solid var(--line2)}
.made .one b{font:600 1.05rem var(--serif)}
.byo{color:var(--ink2);max-width:40rem}.byo a{color:var(--vi-ink)}
.toast{position:fixed;left:50%;bottom:1.4rem;transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:.7rem 1.1rem;border-radius:999px;font-size:.92rem;box-shadow:0 10px 30px -10px rgba(0,0,0,.5);z-index:9}
@media(max-width:600px){.scen{grid-template-columns:1fr}}

/* ---- the scene: a phone with the chat in the middle, the app on three devices around it, each with its ticket ---- */
.scene{position:relative;margin:2rem auto 0;max-width:900px;aspect-ratio:900/640;cursor:pointer}
.wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.wires path{fill:none;stroke:var(--vi);stroke-width:2;stroke-dasharray:5 6;opacity:0;transition:opacity .5s}
.scene.go .wires path{opacity:.7}
.dev{position:absolute;margin:0;display:grid;gap:.6rem}
.dev .screen{background:#fff;border:7px solid var(--ink);border-radius:30px;overflow:hidden;box-shadow:0 20px 44px -22px rgba(29,26,34,.55);position:relative}
.dev.phone .screen{aspect-ratio:9/16.5}
.dev.main .screen{aspect-ratio:9/17}
.dev.phone .screen:before{content:"";position:absolute;left:50%;top:7px;width:32%;height:13px;background:var(--ink);border-radius:999px;transform:translateX(-50%)}
.dev.tablet .screen{aspect-ratio:4/2.75;border-radius:16px;border-width:9px}
.dev.main{left:37.5%;top:3%;width:23%}
.dev.tablet{left:0;top:3%;width:32%}
.dev.sm#d-you{left:9%;top:49%;width:14.5%}
.dev.sm#d-cli{left:82%;top:22%;width:14.5%}
.dev figcaption{display:grid;gap:.25rem;justify-items:start}
.dev figcaption small{color:var(--ink2);font-size:.82rem;line-height:1.3}
.dev .ticket{font-size:.68rem;padding:.3rem .5rem;letter-spacing:.02em;text-transform:none}
.dev.out{opacity:0;transform:translateY(14px) scale(.96);transition:opacity .55s,transform .55s}
.scene.go .dev.out{opacity:1;transform:none}
.scene.go #d-you{transition-delay:.15s}.scene.go #d-tab{transition-delay:.45s}.scene.go #d-cli{transition-delay:.8s}
/* the chat */
.chat-h{display:flex;align-items:center;gap:.4rem;font:600 .66rem var(--sans);color:var(--mute);padding:1.6rem .7rem .4rem;border-bottom:1px solid var(--line2)}
.chat-h i{width:14px;height:14px;border-radius:50%;background:var(--vi)}
.msgs{padding:.6rem .55rem;display:grid;gap:.5rem;align-content:start}
.m{font:.7rem/1.35 var(--sans);padding:.45rem .55rem;border-radius:12px;max-width:94%}
.m.you{justify-self:end;background:var(--vi);color:#fff;border-bottom-right-radius:3px;min-height:1.2rem}
.m.ai{justify-self:start;background:var(--paper2);color:var(--ink);border-bottom-left-radius:3px}
.m .chips{display:grid;gap:.25rem;margin-top:.4rem}.m .chips .ticket{font-size:.58rem;padding:.22rem .4rem;justify-self:start}
.m .caret{display:inline-block;width:.45em;height:1em;background:#fff;vertical-align:-.15em;margin-left:.1em;animation:blink 1s steps(2,end) infinite}
@keyframes blink{50%{opacity:0}}
/* the little app on each device */
.app{padding:1.4rem .55rem .5rem;font:.62rem/1.4 var(--sans);color:var(--ink);display:grid;gap:.2rem;align-content:start}
.tablet .app{padding:.6rem .7rem}
.app b{font:700 .78rem var(--serif);display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.15rem}
.app i{font-style:normal;display:flex;justify-content:space-between;padding:.18rem 0;border-bottom:1px solid var(--line2)}
.app u{text-decoration:none;color:var(--vi-ink);font-weight:700;font-size:.58rem}
.app label{display:grid;gap:.1rem;font-size:.56rem;color:var(--mute)}.app label span{height:1.2rem;border:1px solid var(--line);border-radius:5px;background:var(--card)}
.app em{font-style:normal;justify-self:start;background:var(--am);color:#3b2a00;font-weight:700;padding:.25rem .6rem;border-radius:999px;font-size:.6rem;margin-top:.15rem}
.app small{color:var(--mute);font-size:.54rem}
/* the right size */
.size{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:2.4rem auto 0;max-width:900px;align-items:end}
.sz{display:grid;gap:.35rem;align-content:end}
.sz .blk{display:flex;flex-wrap:wrap;gap:.3rem;align-content:flex-start;border-radius:12px;padding:.7rem}
.sz.aws .blk{min-height:9.5rem;background:#e2ddd2;border:1px solid var(--line)}
.sz.sb .blk{min-height:6.2rem;background:#e9e3d6;border:1px solid var(--line)}
.sz.sl .blk{min-height:3.2rem;background:var(--card);border:1.5px solid var(--ink)}
.sz .blk span{font:.7rem var(--mono);background:rgba(255,255,255,.55);border:1px solid rgba(29,26,34,.12);border-radius:5px;padding:.2rem .4rem;color:var(--ink2)}
.sz .blk .ticket{font:600 .68rem var(--sans);background:none;border:0;padding:.3rem .5rem}
.sz .blk .t-view{background:var(--bl-soft);color:var(--bl-ink)}.sz .blk .t-sub{background:var(--am-soft);color:var(--am-ink)}.sz .blk .t-edit{background:var(--vi-soft);color:var(--vi-ink)}
.sz b{font:600 1rem var(--serif);margin-top:.3rem}.sz small{color:var(--ink2);font-size:.86rem}
@media(prefers-reduced-motion:reduce){.m .caret{animation:none}.dev.out,.wires path{transition:none}}
@media(max-width:700px){
  .scene{aspect-ratio:auto;display:grid;grid-template-columns:1fr 1fr;gap:1.2rem 1rem;max-width:26rem}
  .wires{display:none}
  .dev,.dev.main,.dev.tablet,.dev.sm#d-you,.dev.sm#d-cli{position:static;width:auto}
  .dev.main{grid-column:1/-1;width:64%;justify-self:center}
  .dev.main .screen{aspect-ratio:9/14.5}
  .dev.tablet{grid-column:1/-1}
  .dev figcaption small{font-size:.78rem}
  .size{grid-template-columns:1fr;gap:1.2rem}
  .sz.aws .blk,.sz.sb .blk,.sz.sl .blk{min-height:0}
}