:root{
  /* grid */
  --page: 960px;          /* one container: nav, cards, visuals */
  --measure: 640px;       /* all running text */
  --pad: 40px;            /* side padding desktop */
  /* spacing scale: only these */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 40px; --s5: 64px; --s6: 96px;
  /* type scale: only these four sizes */
  --t-display: 40px;      /* H1 name / case title. lh 1.1, weight 600 */
  --t-title: 20px;        /* home one-line, card titles, note titles. lh 1.35, 600 (one-line: 400) */
  --t-body: 17px;         /* outcome line, beat text. lh 1.6, 400 */
  --t-small: 14px;        /* labels, meta, captions, dates, links row. lh 1.5, 400 */
  /* color */
  --ink: #1a1a1a; --ink-2: #6b6b6b; --line: #e7e7e4; --surface: #f6f6f4; --bg: #fff;
  --radius: 12px;
  --media-radius: 16px;
}
@media (max-width: 600px){ :root{ --pad: 20px; --t-display: 32px; --s6: 64px; --s5: 48px; } }

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body{ background:var(--bg); color:var(--ink); font: 400 var(--t-body)/1.6 Roboto, system-ui, sans-serif; }
p{ margin:0; }
.wrap{ max-width:calc(var(--page) + 2*var(--pad)); margin:0 auto; padding:0 var(--pad); }
footer.wrap{ margin-top:var(--s6); }
.text{ max-width:var(--measure); }
h1{ font-size:var(--t-display); line-height:1.1; font-weight:600; margin:0; }
h1:has(> .back){
  display:flex;
  align-items:flex-start;
  gap:2px;
}
h1:has(> .back){ margin-left:-36px; }
h1 > .back{
  flex:none;
  display:inline-grid;
  place-items:center;
  width:44px;
  height:44px;
  margin:-2px 0 0 0;
  border-radius:999px;
  color:inherit;
  font-size:22px;
  font-weight:400;
  line-height:1;
  text-decoration:none;
}
h1 > .back:hover{ background:#f4f4f2; }
h1 > .back:focus-visible{ outline:2px solid currentColor; outline-offset:2px; }
h1:has(> .back) > span{ min-width:0; }
.outcome{ font-size:var(--t-body); color:var(--ink); margin-top:var(--s2); max-width:var(--measure); }
.meta, .label, figcaption, .date, .links{ font-size:var(--t-small); color:var(--ink-2); line-height:1.5; }
.meta{ margin-top:var(--s1); }
.label{ display:block; margin-bottom:var(--s1); font-weight:500; text-transform:none; letter-spacing:0; }
a{ color:inherit; text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:3px; }
a:hover{ text-decoration-color:var(--ink); }

.site-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s2);
  padding-top:var(--s3);
  padding-bottom:var(--s3);
  font-size:var(--t-small);
  line-height:1.5;
}
.site-nav > a{ font-weight:600; text-decoration:none; color:var(--ink); }
.site-nav-links{ display:flex; gap:var(--s3); }
.site-nav-links a{ color:var(--ink-2); text-decoration:none; }
.site-nav a:hover{ text-decoration:underline; text-decoration-color:var(--ink); }

.media{ width:100%; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.media > video{ display:block; width:100%; height:auto; }
/* Still images stay at their natural pixel width. A wide column must not stretch them. */
.media > img,
.media > picture > img{
  display:block;
  width:auto;
  max-width:100%;
  height:auto;
  margin-left:0;
  margin-right:auto;
}
.media--phone{ aspect-ratio: 4/3; display:grid; place-items:center; }
.media--phone .phone{ height:88%; }
.pair{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s2); align-items:start; }
@media (max-width: 600px){
  .pair{ grid-template-columns:1fr; }
  h1:has(> .back){ margin-left:0; }
  footer.wrap a{
    display:inline-flex;
    align-items:center;
    min-height:44px;
    padding:10px 4px;
  }
}
.pair .media--phone{ aspect-ratio: 3/4; }
.pair-slot{ position:relative; width:100%; overflow:hidden; }
.pair-slot > .pair{
  position:absolute;
  left:0;
  top:0;
  width:960px;
  transform-origin:top left;
}
.pair-slot > .pair:not([data-scaled]){ visibility:hidden; }
figure{ margin:0; }
figcaption{ margin-top:var(--s1); max-width:var(--measure); }
.hero .hero-swap{ display:none; }
.hero .hero-desk{ display:block; width:100%; height:auto; }

.hero{ margin-top:var(--s4); }
.beat{ margin-top:var(--s6); }
.beat p + p{ margin-top:var(--s2); }
.beat .a2ui p + p{ margin-top:2px; }
.beat .a2ui .cart-note{ margin-top:8px; }
.beat .media, .beat .pair, .beat .demo-stage{ margin-top:var(--s3); }
/* The scaler sizes the slot to the pair box. Keep the gap on the slot so the phones are not pushed out of the clip. */
.beat .pair-slot{ margin-top:var(--s3); }
.beat .pair-slot > .pair{ margin-top:0; }
.ending{ margin-top:var(--s6); font-size:var(--t-small); color:var(--ink-2); line-height:1.5; }
.concept{ margin-top:var(--s4); font-size:var(--t-small); color:var(--ink-2); line-height:1.5; }
.next{ margin-top:var(--s4); font-size:var(--t-title); font-weight:600; line-height:1.35; }
.next a{ text-decoration:none; }
.next a:hover{ text-decoration:underline; }
.case-end .next{ margin-top:var(--s2); font-size:var(--t-small); font-weight:400; line-height:1.5; }
footer{ margin-top:var(--s6); padding:0 0 var(--s4); border-top:0; font-size:var(--t-small); color:var(--ink-2); line-height:1.5; }
footer.wrap > p:first-child{ padding-top:var(--s4); border-top:1px solid var(--line); }
footer p{ margin:0; }
footer p + p{ margin-top:var(--s1); }

.intro{ margin-top:var(--s5); }
.intro .oneline{ font-size:var(--t-title); font-weight:400; line-height:1.35; margin:var(--s1) 0 0; }
.intro .info{ margin-top:var(--s2); }
.intro .info a{ color:inherit; }

.bento{
  margin-top:var(--s5);
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:10px;
}
.bento-tile{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
  padding:12px;
  background:#f7f6f4;
  border-radius:18px;
  color:inherit;
  text-decoration:none;
  overflow:hidden;
  touch-action:pan-y;
}
.bento-tile--hero{ grid-column:span 4; }
.bento-tile--half{ grid-column:span 2; }
.bento-tile--note{ grid-column:span 1; }
.bento-media{
  position:relative;
  flex:1 1 auto;
  min-height:0;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:10px;
  background:#f7f6f4;
}
.bento-tile--hero .bento-media{ aspect-ratio:1200 / 760; }
.bento-tile--half .bento-media{ aspect-ratio:1 / 1; }
.bento-tile--note .bento-media{ aspect-ratio:1280 / 880; }
.bento-media video,
.bento-media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  background:#f7f6f4;
}
.bento-media--phone{ background:#f7f6f4; padding:14px 10px; }
.bento-media--phone .handset{ height:100%; }
.bento-media--phone .handset__device{
  height:calc(100% / 1.06);
  box-shadow:none;
  transform-origin:center center;
  transition:transform 0.55s ease;
}
.bento-tile--note .bento-media video{
  object-fit:contain;
  transform:none;
  transition:transform 0.55s ease;
}
.bento-tile--hero .bento-media video{ transition:transform 0.55s ease; }
.bento-media img.bento-still{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:0 0;
  background:#f7f6f4;
}
.bento-media--still{
  aspect-ratio:1 / 1;
  background:#f7f6f4;
  padding:14px;
  box-sizing:border-box;
}
.bento-media--still img.bento-still{
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  object-fit:cover;
  object-position:left top;
  background:#fff;
  border-radius:8px;
}
.bento-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:0 2px;
  font-size:var(--t-small);
  line-height:1.4;
  color:var(--ink);
}
.bento-go{
  flex:none;
  color:var(--ink-2);
  transition:transform 0.35s ease;
}
@media (hover:hover) and (pointer:fine){
  .bento-tile{
    transition:transform 150ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 150ms cubic-bezier(0.23, 1, 0.32, 1);
  }
  .bento-tile:hover{
    transform:translateY(-2px);
    box-shadow:0 14px 32px -18px rgba(30, 30, 40, 0.28);
  }
}
@media (prefers-reduced-motion: reduce){
  .bento-tile:hover .bento-media video,
  .bento-tile--note:hover .bento-media video,
  .bento-tile:hover .bento-media--phone .handset__device,
  .bento-tile:hover .bento-go{ transform:none; }
}
.bento-tile--note-wide{ grid-column:span 4; }
@media (min-width: 601px){
  .bento-tile--note.bento-tile--note-wide{ grid-column:span 4; }
  .bento-tile--note-wide .bento-media{
    aspect-ratio:auto;
    height:300px;
    background:#f3f0eb;
  }
  .bento-tile--note-wide .bento-media video{
    width:calc(300px * 640 / 440);
    height:300px;
    max-width:100%;
    object-fit:contain;
    background:#f3f0eb;
  }
}
@media (min-width: 700px){
  .bento-tile--note{ grid-column:span 2; }
  .bento-tile--note.bento-tile--note-wide{ grid-column:span 4; }
}
@media (max-width: 600px){
  .bento{ grid-template-columns:minmax(0, 1fr); }
  .bento-tile--hero,
  .bento-tile--half,
  .bento-tile--note,
  .bento-tile--note.bento-tile--note-wide{ grid-column:auto; }
  .bento-tile--note-wide .bento-media{ aspect-ratio:1280 / 880; height:auto; }
  .bento-tile--note-wide .bento-media video{ width:100%; height:100%; }
}
.work{ margin-top:var(--s5); display:grid; grid-template-columns:1fr 1fr; gap:var(--s2); }
.card{ background:var(--surface); border-radius:var(--radius); padding:var(--s3); text-decoration:none; color:inherit; display:block; }
.card--hero{ grid-column:1 / -1; }
.card .title{ display:block; font-size:var(--t-title); font-weight:600; line-height:1.35; margin-top:var(--s1); color:var(--ink); }
.card .line{ display:block; font-size:var(--t-small); color:var(--ink-2); line-height:1.5; margin-top:var(--s1); }
.card .label{ margin-bottom:0; }
.card .media{ margin-top:var(--s2); border:0; background:#ecece9; }
.card .media img{ width:auto; max-width:100%; height:auto; margin-left:auto; margin-right:auto; }
@media (max-width:600px){ .work{ grid-template-columns:1fr; } }
.notes-strip{ margin-top:var(--s5); }
.notes-strip ul{ list-style:none; margin:0; padding:0; }
.notes-strip li{ display:flex; justify-content:space-between; gap:var(--s2); padding:var(--s2) 0; border-top:1px solid var(--line); }
.notes-strip li a{ font-size:var(--t-body); font-weight:600; text-decoration:none; color:var(--ink); }
.notes-strip li a:hover{ text-decoration:underline; }
.notes-strip .links{ margin-top:var(--s2); }

.handset{
  background:transparent;
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  height:88%;
}
.handset__device{
  width:100%;
  height:100%;
  max-width:100%;
  box-sizing:border-box;
  padding:2.7%;
  background:#1a1a1c;
  border-radius:8.6% / 4%;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.2), 0 12px 28px -14px rgba(0,0,0,0.4);
}
.handset__screen{
  position:relative;
  height:100%;
  background:#fff;
  border-radius:6.2% / 2.8%;
  overflow:hidden;
}
.handset__screen video,
.handset__screen img{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  margin:0;
  object-fit:contain;
  object-position:center top;
  border:0;
  border-radius:0;
  background:#fff;
}
/* The scan before file includes its own device. Show only the screen so the CSS handset is the one frame. */
.handset__screen img.is-screen{
  inset:auto;
  left:-9.05%;
  top:-3.57%;
  width:117.86%;
  height:107.56%;
  max-width:none;
  max-height:none;
  margin:0;
  object-fit:fill;
}
/* One Pixel punch-hole, sized to the hole already in the screenshot. */
.handset__screen::after,
.handset__nocam{
  content:"";
  position:absolute;
  left:50%;
  top:2.43%;
  width:7.1%;
  aspect-ratio:1;
  transform:translate(-50%, -50%);
  background:#0c0c0e;
  border-radius:50%;
  z-index:5;
  pointer-events:none;
}

/* notes: same left edge and type scale, copy unchanged */
body.note-page{ background:var(--bg); color:var(--ink); }
body.note-page nav.wrap,
body.note-page main.wrap{
  width:100%;
  max-width:calc(var(--page) + 2*var(--pad));
  margin-left:auto;
  margin-right:auto;
  padding-left:var(--pad);
  padding-right:var(--pad);
  box-sizing:border-box;
}
body.note-page main.wrap{ padding-top:0; padding-bottom:var(--s6); }
body.note-page .note h1,
body.note-page .note-index h1{
  font-size:var(--t-display);
  line-height:1.1;
  font-weight:600;
  letter-spacing:0;
  color:var(--ink);
}
body.note-page .note-intro,
body.note-page .note-meta,
body.note-page .note-email{
  font-size:var(--t-small);
  line-height:1.5;
  color:var(--ink-2);
  max-width:var(--measure);
}
body.note-page .note-intro{ margin-top:var(--s2); }
body.note-page .note-body{ margin-top:0; }
body.note-page .note-split{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(440px, 0.92fr);
  column-gap:48px;
  align-items:start;
  margin-top:var(--s4);
}
body.note-page .note-stage{
  position:sticky;
  top:72px;
  display:flex;
  flex-direction:column;
  gap:var(--s3);
}
body.note-page .note-stage .note-figure{ margin-top:0; }
body.note-page .note-copy .note-next{ margin-top:var(--s4); }
body.note-page .note-body p{
  font-size:var(--t-body);
  line-height:1.6;
  color:var(--ink);
  max-width:66ch;
}
body.note-page .note-body p + p{ margin-top:var(--s2); }
body.note-page .note-figure{ margin-top:var(--s3); max-width:100%; }
body.note-page .note-figure video{
  display:block;
  width:100%;
  height:auto;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
}
body.note-page .note-figure figcaption{
  margin-top:var(--s1);
  font-size:var(--t-small);
  line-height:1.5;
  color:var(--ink-2);
  max-width:66ch;
}
@media (max-width:800px){
  body.note-page .note-split{
    display:flex;
    flex-direction:column;
    gap:var(--s4);
  }
  body.note-page .note-stage{
    position:static;
    order:-1;
  }
}

/* Catalog note: paragraph, then the same items as components. */
.note-a2{
  background:#f7f6f4;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px 18px;
  overflow:hidden;
  touch-action:pan-y;
}
.note-a2-card{
  background:#fff;
  border:1px solid #e7e7e4;
  border-radius:12px;
  padding:8px 0;
  color:#1a1a1a;
  font-family:Inter, Roboto, system-ui, sans-serif;
}
.note-a2-para{
  margin:0;
  font-size:18px;
  line-height:1.4;
  letter-spacing:-0.02em;
}
.note-a2-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.note-a2-item{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:48px;
  padding:8px 12px;
  border:0;
  border-top:1px solid #ececea;
  border-radius:0;
  background:#fff;
}
.note-a2-item:first-child{ border-top:0; }
.note-a2-slot{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:#f4f4f2;
  border:1px solid #ececea;
  flex:none;
}
.note-a2-slot svg{ width:58%; height:58%; display:block; }
.note-a2-copy{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.note-a2-name{
  font-size:13px;
  font-weight:600;
  line-height:1.3;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.note-a2-meta{
  font-size:12px;
  line-height:1.35;
  color:#6b6b6b;
  white-space:nowrap;
}
.note-a2-add{
  margin-left:auto;
  flex:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:52px;
  height:28px;
  padding:0 10px;
  border:1px solid #d9d9d9;
  border-radius:999px;
  background:#fff;
  color:#1a1a1a;
  font-size:12px;
  font-weight:500;
  line-height:1;
}
@media (prefers-reduced-motion: no-preference){
  .note-a2-item{
    animation:note-a2-in 7.5s ease infinite;
  }
  .note-a2-item:nth-child(1){ animation-delay:0.15s; }
  .note-a2-item:nth-child(2){ animation-delay:0.9s; }
  .note-a2-item:nth-child(3){ animation-delay:1.65s; }
}
@keyframes note-a2-in{
  0%, 8%{ opacity:0; transform:translateY(8px); }
  18%, 80%{ opacity:1; transform:none; }
  92%, 100%{ opacity:0; transform:none; }
}
body.note-page .note-next{ margin-top:var(--s4); font-size:var(--t-title); font-weight:600; line-height:1.35; }
body.note-page .note-next a{ text-decoration:none; color:var(--ink); }
body.note-page .note-next a:hover{ text-decoration:underline; }
body.note-page .note-email{ margin-top:var(--s2); }
body.note-page .note-email a{ color:inherit; }
body.note-page .note-list{
  list-style:none;
  margin:var(--s4) 0 0;
  padding:0;
  max-width:none;
}
body.note-page .note-list li{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:var(--s2);
  align-items:baseline;
  padding:var(--s2) 0;
  border-top:1px solid var(--line);
  margin:0;
}
body.note-page .note-list a{
  display:flex;
  flex-direction:column;
  gap:var(--s1);
  color:inherit;
  text-decoration:none;
}
body.note-page .note-list-title{ font-size:var(--t-body); font-weight:600; line-height:1.35; }
body.note-page .note-list-dek{ font-size:var(--t-small); font-weight:400; color:var(--ink-2); line-height:1.5; }
body.note-page .note-list time{ font-size:var(--t-small); color:var(--ink-2); line-height:1.5; }

.chip, .tag, .pill, .badge, .callout, .solution-table, .m3-docs-resources-label, .eyebrow, .breadcrumb { display:none !important; }

/* Homepage intake tile: live catalog, not a scaled video. */
.bento-media--live{
  display:block;
  aspect-ratio:auto;
  padding:10px 8px 8px;
  background:#f7f6f4;
}
.bento-tile--hero .bento-media--live{
  aspect-ratio:auto;
  display:flex;
  align-items:center;
  padding:16px;
}
.bento-tile--hero .bento-media--live .a2ui{ width:100%; }
@media (max-width:600px){
  .bento-tile--hero .bento-media--live{ padding:12px; }
}
.a2ui{
  position:relative;
  display:grid;
  grid-template-columns:minmax(190px, 250px) minmax(0, 1fr);
  gap:14px;
  align-items:stretch;
  min-width:0;
  color:#1a1a1a;
  font-family:Inter, Roboto, system-ui, sans-serif;
}
.a2ui-chat{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:10px;
  min-width:0;
  padding:4px 2px 8px;
}
.chat-bubble{
  max-width:100%;
  padding:10px 12px;
  font-size:13px;
  line-height:1.45;
}
.chat-bubble--user{
  align-self:flex-end;
  background:#efefef;
  color:#1a1a1a;
  border-radius:999px;
}
.chat-plain{
  margin:0;
  padding:0;
  background:transparent;
  border:0;
  border-radius:0;
  font-size:13px;
  line-height:1.45;
  color:#1a1a1a;
}
.chat-plain b{ font-weight:600; }
.catalog-list{
  min-width:0;
  background:#fff;
  border:1px solid #e7e7e4;
  border-radius:12px;
  overflow:hidden;
}
.catalog-head{
  padding:12px 14px 10px;
}
.catalog-count{
  margin:0;
  font-size:13px;
  font-weight:600;
  line-height:1.35;
  color:#1a1a1a;
}
.catalog-note{
  margin:2px 0 0;
  font-size:12px;
  line-height:1.4;
  color:#6b6b6b;
}
.product-row{
  display:grid;
  grid-template-columns:40px minmax(0, 1fr) auto;
  gap:10px 12px;
  align-items:center;
  padding:11px 14px;
  border-top:1px solid #ececea;
}
.product-title{ white-space:nowrap; }
.product-mark{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:#f4f4f2;
  border:1px solid #ececea;
}
.product-mark svg{ display:block; }
.product-copy{ min-width:0; }
.product-title{
  margin:0;
  font-size:13px;
  font-weight:600;
  line-height:1.3;
  color:#1a1a1a;
}
.product-spec,
.product-sku{
  margin:2px 0 0;
  font-size:12px;
  line-height:1.35;
  color:#6b6b6b;
}
.product-sku{ font-size:11px; }
.a2-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.a2-chip{
  display:inline-flex;
  align-items:center;
  height:20px;
  padding:0 8px;
  border:1px solid #e6e6e3;
  border-radius:999px;
  background:#f4f4f2;
  color:#3a3a3a;
  font-size:11px;
  line-height:1;
  font-weight:500;
}
.product-each{
  margin:6px 0 0;
  font-size:13px;
  font-weight:400;
  line-height:1.3;
  color:#1a1a1a;
}
.product-buy{
  display:flex;
  align-items:center;
  gap:8px;
}
.qty-stepper{
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:auto;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
}
.qty-btn{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border:1px solid #d9d9d9;
  border-radius:50%;
  background:#fff;
  font-size:14px;
  line-height:1;
  color:#1a1a1a;
}
.qty-val{
  min-width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border:1px solid #d9d9d9;
  border-radius:6px;
  background:#fff;
  font-size:13px;
  font-weight:500;
  font-variant-numeric:tabular-nums;
}
.add-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:64px;
  height:32px;
  padding:0 14px;
  border:1px solid #d9d9d9;
  border-radius:999px;
  background:#fff;
  color:#1a1a1a;
  font-size:13px;
  font-weight:500;
  line-height:1;
}
.add-btn.is-added{ border-color:#1a1a1a; }
.in-cart-chip{
  max-width:0;
  opacity:0;
  padding:0;
  border-color:transparent;
  overflow:hidden;
}
.in-cart-chip.is-on{
  max-width:92px;
  opacity:1;
  padding:0 8px;
  border-color:#e6e6e3;
}
@media (prefers-reduced-motion: no-preference){
  .add-btn{ transition:transform 0.16s cubic-bezier(.2,.7,.2,1), border-color 0.2s linear; }
  .add-btn.is-down{ transform:scale(0.96); }
  .in-cart-chip{ transition:opacity 0.35s linear, max-width 0.35s cubic-bezier(.2,.7,.2,1), padding 0.35s linear; }
}
.a2ui-cursor{
  position:absolute;
  left:0;
  top:0;
  width:16px;
  height:16px;
  margin:-8px 0 0 -8px;
  border:2px solid #1a1a1a;
  border-radius:50%;
  background:rgba(255,255,255,0.92);
  box-shadow:0 1px 3px rgba(0,0,0,0.16);
  pointer-events:none;
  opacity:0;
  z-index:3;
}
@media (prefers-reduced-motion: no-preference){
  .a2ui .chat-bubble--assistant{
    opacity:0;
    transform:translateY(8px);
  }
  .a2ui .chat-bubble--assistant.is-in{
    opacity:1;
    transform:translateY(0);
  }
  .a2ui .chat-bubble--assistant{
    transition:opacity 0.45s cubic-bezier(.2,.7,.2,1), transform 0.45s cubic-bezier(.2,.7,.2,1);
  }
  .a2ui--split .chat-bubble--user{
    opacity:0;
    transform:translateY(8px);
    transition:opacity 0.4s cubic-bezier(.2,.7,.2,1), transform 0.4s cubic-bezier(.2,.7,.2,1);
  }
  .a2ui--split .chat-bubble--user.is-in{ opacity:1; transform:none; }
  .a2ui--split .split-status,
  .a2ui--split [data-confirm]{
    transition:max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s linear, padding 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }
}
.a2ui--split{
  grid-template-columns:minmax(220px, 34%) minmax(0, 1fr);
  gap:12px;
  align-items:stretch;
}
.split-chat{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:16px;
  min-width:0;
  min-height:100%;
  padding:12px 16px;
}
.split-thread{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:0;
}
.a2ui--split .chat-bubble--user{
  align-self:flex-end;
  max-width:85%;
  background:#e8e8e8;
  border-radius:999px;
  padding:10px 14px;
  font-size:14px;
  line-height:1.4;
}
.a2ui--split .chat-plain{
  font-size:14px;
  line-height:1.45;
}
.split-status{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:8px;
  margin:0;
  padding:24px 16px;
  border-radius:16px;
  background:#efefef;
  font-size:13px;
  line-height:1.4;
  color:#3b3b3b;
  opacity:0;
}
.split-status.is-in{ opacity:1; }
.split-status svg{ flex:none; margin-top:1px; }
.split-composer{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  margin-top:auto;
  padding:0 6px 0 12px;
  border:1px solid #e1e4e9;
  border-radius:999px;
  background:#fff;
}
.split-plus,
.split-send{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  flex:none;
  line-height:1;
}
.split-plus{ color:#3b3b3b; font-size:18px; }
.split-send{
  border-radius:50%;
  background:#8a8a8a;
  color:#fff;
  font-size:14px;
}
.split-placeholder{
  flex:1;
  min-width:0;
  color:#8a8a8a;
  font-size:14px;
  line-height:1.3;
}
.canvas-bar{
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px 14px 0;
}
.canvas-x{
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  flex:none;
  color:#3b3b3b;
  font-size:18px;
  line-height:1;
}
.canvas-title{
  flex:1;
  min-width:0;
  margin:0;
  font-size:15px;
  font-weight:600;
  line-height:1.3;
  color:#1a1a1a;
}
.canvas-review{
  flex:none;
  display:inline-flex;
  align-items:center;
  height:32px;
  padding:0 12px;
  border-radius:999px;
  background:#1a1a1a;
  color:#fff;
  font-size:13px;
  font-weight:500;
  line-height:1;
}
.canvas-tabs{
  display:flex;
  gap:6px;
  padding:12px 14px 0;
  border-bottom:0;
  font-size:13px;
  line-height:1.3;
  color:#6b6b6b;
}
.canvas-tabs span{
  padding:6px 12px;
  border:0;
  border-radius:8px;
}
.canvas-tabs .is-on{
  color:#1a1a1a;
  font-weight:500;
  background:#ececec;
  border:0;
}
.canvas-search{
  margin:12px 14px 0;
  height:36px;
  display:flex;
  align-items:center;
  padding:0 12px;
  border:1px solid #e7e7e4;
  border-radius:8px;
  background:#fff;
  color:#6b6b6b;
  font-size:13px;
  line-height:1;
}
.canvas-filters{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:10px 14px 0;
}
.canvas-filters span{
  display:inline-flex;
  align-items:center;
  height:32px;
  padding:0 10px;
  border:1px solid #e6e6e3;
  border-radius:8px;
  background:#fff;
  color:#1a1a1a;
  font-size:12px;
  line-height:1;
}
.canvas-filters span::after{
  content:"▾";
  margin-left:6px;
  color:#6b6b6b;
  font-size:10px;
}
@media (max-width: 600px){
  .a2ui{ grid-template-columns:minmax(0, 1fr); gap:12px; }
  .a2ui-chat{ justify-content:flex-start; padding-bottom:0; }
  .product-row--later{ display:none; }
  .product-row{
    grid-template-columns:36px minmax(0, 1fr);
    align-items:start;
  }
  .product-buy{
    grid-column:1 / -1;
    justify-content:flex-end;
  }
  .product-mark{ width:36px; height:36px; }
  .product-title{ font-size:12px; }
}

/* Notes on the homepage: a text-led list, not project cards. */
.thinking{ margin-top:var(--s5); }
.thinking-label{ margin-bottom:var(--s1); }
.thinking-list{ list-style:none; margin:0; padding:0; }
.thinking-row{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 200px;
  gap:40px;
  align-items:center;
  padding:28px 0;
  border-top:1px solid var(--line);
  color:inherit;
  text-decoration:none;
  touch-action:pan-y;
}
.thinking-list li:last-child .thinking-row{ border-bottom:1px solid var(--line); }
.thinking-copy{ min-width:0; }
.thinking-thumb{
  width:200px;
  height:132px;
  justify-self:end;
  border-radius:8px;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--line);
}
.thinking-thumb video{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  background:#f3f1ec;
  /* Posters are a card on a beige stage. Scale until the card meets the tile. */
  transform:scale(1.88);
  transform-origin:center center;
}
.thinking-thumb video[poster*="note-verify"]{
  transform:scale(1.44);
}
.thinking-title{
  display:block;
  font-size:var(--t-title);
  font-weight:600;
  line-height:1.3;
  color:var(--ink);
}
.thinking-pin{
  display:block;
  margin-bottom:8px;
  font-size:11px;
  font-weight:500;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--ink-2);
}
.thinking-dek{
  display:block;
  margin-top:8px;
  font-size:var(--t-small);
  line-height:1.5;
  color:var(--ink-2);
}
.thinking-side{
  display:block;
  margin-top:12px;
  color:var(--ink-2);
  font-size:var(--t-small);
  line-height:1.4;
}
.thinking-arrow{ transition:transform 0.35s ease; }
.thinking-row:hover .thinking-title{
  text-decoration:underline;
  text-underline-offset:3px;
}
.thinking-row:hover .thinking-arrow{ transform:translateX(4px); }
@media (prefers-reduced-motion: reduce){
  .a2ui .chat-bubble--assistant,
  .in-cart-chip.is-on,
  .split-status{
    opacity:1;
    transform:none;
    transition:none;
  }
  .add-btn.is-down{ transform:none; }
  .thinking-row:hover .thinking-arrow{ transform:none; }
}
@media (max-width: 600px){
  .thinking-row{ grid-template-columns:minmax(0, 1fr) 112px; gap:16px; padding:22px 0; align-items:center; }
  .thinking-thumb{ width:112px; height:84px; }
  .thinking-title{ font-size:var(--t-body); }
  .thinking-dek{ margin-top:4px; }
  .thinking-side{ margin-top:8px; }
}

/* Case and note pages: sticky bar, hairline only after scroll. */
.nav-sentinel{ height:1px; }
.nav-bar{
  position:sticky;
  top:0;
  z-index:30;
  background:#fff;
  border-bottom:1px solid transparent;
}
.nav-bar.is-scrolled{ border-bottom-color:var(--line); }
.nav-bar .site-nav{ padding-top:16px; padding-bottom:16px; }
@media (max-width:600px){
  .nav-bar .site-nav{ padding-top:10px; padding-bottom:10px; }
  .nav-bar .site-nav-links{ gap:14px; }
}
.tldr{ margin-top:var(--s4); display:grid; gap:var(--s2); }
.tldr p{ max-width:var(--measure); }
.tldr .label{ display:inline; margin:0 6px 0 0; color:var(--ink); font-weight:600; }
.tldr-cols{
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:var(--s3);
  max-width:none;
}
.tldr-cols .label{
  display:block;
  margin:0 0 6px;
  color:var(--ink-2);
  font-weight:500;
}
.tldr-cols p{
  max-width:none;
  font-size:var(--t-body);
  line-height:1.45;
  color:var(--ink);
}
@media (max-width:600px){
  .tldr-cols{ grid-template-columns:1fr; gap:var(--s2); }
}
.claim{
  margin:0 0 var(--s2);
  max-width:var(--measure);
  font-size:var(--t-title);
  font-weight:600;
  line-height:1.35;
}
.demo-stage{
  background:#f7f6f4;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px;
  overflow:hidden;
  touch-action:pan-y;
}
.demo-stage .a2ui{ min-height:0; }
.a2ui-stack{
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:stretch;
}
.a2ui-chip-row{ justify-content:flex-end; }
.cart-card{
  background:#fff;
  border:1px solid #e1e4e9;
  border-radius:12px;
  overflow:hidden;
  color:#3b3b3b;
}
.cart-card-head{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 14px 12px;
  padding:14px 0 10px;
  border-bottom:1px solid #e1e4e9;
}
.cart-card-title{
  margin:0;
  font-size:15px;
  font-weight:600;
  line-height:1.3;
  color:#3b3b3b;
}
.cart-lines{
  margin:0 14px;
  border:1px solid #e1e4e9;
  border-radius:10px;
  overflow:hidden;
}
.cart-lines .product-row--cart{ border-top:0; }
.cart-lines .product-row--cart + .product-row--cart{ border-top:1px solid #ececea; }
.product-row--cart{ align-items:center; }
.product-row--cart .product-title{ font-size:14px; color:#3b3b3b; white-space:normal; }
.product-row--cart .product-sku{ color:#6b6b6b; }
.cart-end{
  display:flex;
  align-items:baseline;
  gap:14px;
  margin:0;
  font-size:14px;
  font-weight:600;
  line-height:1.2;
  color:#1a1a1a;
  font-variant-numeric:tabular-nums;
}
.cart-end span:last-child{ font-weight:400; }
.cart-sum{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  margin:0;
  padding:12px 14px 0;
  font-size:14px;
  font-weight:600;
  line-height:1.3;
  color:#3b3b3b;
}
.cart-sum b{ color:#1a1a1a; font-variant-numeric:tabular-nums; }
.cart-confirm-row{
  display:flex;
  justify-content:flex-end;
  padding:10px 14px 14px;
}
.cart-composer{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  padding:0 8px 0 12px;
  border:1px solid #e1e4e9;
  border-radius:999px;
  background:#fff;
}
.cart-plus,
.cart-send{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  flex:none;
  font-size:18px;
  line-height:1;
}
.cart-plus{ color:#3b3b3b; }
.cart-send{
  border-radius:50%;
  background:#9db8e8;
  color:#fff;
  font-size:14px;
}
.cart-placeholder{
  flex:1;
  min-width:0;
  color:#8a8a8a;
  font-size:14px;
  font-weight:400;
  line-height:1.3;
}
.confirm-btn{
  position:relative;
  display:inline-grid;
  place-items:center;
  min-width:0;
  height:32px;
  padding:0 18px;
  border-radius:999px;
  background:#2a64c5;
  color:#fff;
  font-size:14px;
  font-weight:600;
  line-height:1;
}
.confirm-face{ display:inline-flex; align-items:center; gap:6px; }
.confirm-face,
.confirm-face--done{
  grid-area:1 / 1;
  position:static;
  inset:auto;
}
.confirm-face--done{
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
}
.confirm-btn.is-done .confirm-face[data-face="ready"]{ opacity:0; }
.confirm-btn.is-done .confirm-face--done{ opacity:1; }
@media (prefers-reduced-motion: no-preference){
  .confirm-btn{ transition:transform 0.16s cubic-bezier(.2,.7,.2,1); }
  .confirm-btn.is-down{ transform:scale(0.96); }
  .confirm-face{ transition:opacity 0.2s linear; }
}
.cart-ask{
  margin:0;
  font-size:14px;
  font-weight:600;
  line-height:1.4;
  color:#3b3b3b;
}
.cart-note{
  margin:0;
  font-size:12px;
  line-height:1.4;
  color:#6b6b6b;
  text-align:center;
}
.case-end{
  margin-top:var(--s6);
  padding-top:var(--s3);
  border-top:1px solid var(--line);
}
.case-end-full{
  font-size:var(--t-body);
  font-weight:500;
  line-height:1.5;
  text-decoration:none;
}
.case-end-full:hover{ text-decoration:underline; }
.case-end-note{
  margin-top:var(--s1);
  font-size:var(--t-small);
  color:var(--ink-2);
  line-height:1.5;
}
.case-end-back,
.note-home a{
  color:var(--ink-2);
  text-decoration:none;
}
.case-end-back{
  display:inline-block;
  margin-top:var(--s2);
  font-size:var(--t-small);
  line-height:1.5;
}
.case-end-back:hover,
.note-home a:hover{ text-decoration:underline; }
.note-home{
  margin-top:var(--s4);
  padding-top:var(--s3);
  border-top:1px solid var(--line);
  font-size:var(--t-small);
  line-height:1.5;
}
@media (max-width:600px){
  .demo-stage{ padding:12px; }
  .product-row--cart{
    grid-template-columns:36px minmax(0, 1fr) auto;
    align-items:center;
  }
  .cart-end{ gap:8px; }
  .cart-foot{ flex-wrap:wrap; }
}

/* Goal loop: one stage, scaled into the note figure and the 160×110 thumb. */
.goal-frame{
  position:relative;
  width:min(100%, 640px);
  aspect-ratio:640 / 440;
  container-type:inline-size;
  overflow:hidden;
  background:#f7f6f4;
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.thinking-thumb{ position:relative; }
.thinking-thumb .goal-frame{
  position:absolute;
  inset:0;
  width:auto;
  height:auto;
  aspect-ratio:auto;
  border:0;
  border-radius:0;
}
.goal{
  position:absolute;
  left:0;
  top:0;
  width:640px;
  height:440px;
  transform:none;
  transform-origin:0 0;
  padding:28px 32px 24px;
  display:flex;
  flex-direction:column;
  gap:14px;
  color:#1a1a1a;
  font-family:Inter, Roboto, system-ui, sans-serif;
  pointer-events:none;
}
body.note-page .note-body .goal p{
  margin:0;
  max-width:none;
  color:#1a1a1a;
}
body.note-page .note-body .goal p + p{ margin-top:0; }
body.note-page .note-body .goal .goal-req-title{
  font-size:15px;
  font-weight:600;
  line-height:1.35;
}
body.note-page .note-body .goal .goal-req-meta{
  font-size:14px;
  line-height:1.3;
}
.goal-pill{
  align-self:flex-start;
  max-width:100%;
  padding:8px 14px;
  border-radius:999px;
  background:#efefef;
  color:#1a1a1a;
  font-size:15px;
  font-weight:500;
  line-height:1.35;
}
.goal-work{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-height:0;
}
.goal-agents,
.goal-req{
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid #e7e7e4;
  border-radius:12px;
}
.goal-agents{ align-items:flex-start; padding:12px 14px 10px; }
.goal-row{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:40px;
  padding:0 14px;
  font-size:15px;
  line-height:1.3;
}
.goal-row + .goal-row{ border-top:1px solid #ececea; }
.goal-line{ color:#1a1a1a; }
.goal-line span{ color:#6b6b6b; }
.goal-mark{
  position:relative;
  width:16px;
  height:16px;
  flex:none;
}
.goal-mark::before,
.goal-spin{
  position:absolute;
  inset:0;
  border-radius:50%;
  border:1.5px solid #e1e1de;
}
.goal-spin{
  border-top-color:#1a1a1a;
  opacity:0;
}
.goal-row.is-spin .goal-spin{
  opacity:1;
  animation:goal-spin 0.8s linear infinite;
}
.goal-row.is-spin .goal-mark::before{ opacity:0; }
.goal-row.is-check .goal-mark::before{ border-color:#1a1a1a; }
.goal-tick{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  opacity:0;
  transform:scale(0.6);
}
.goal-row.is-check .goal-tick{
  opacity:1;
  transform:scale(1);
}
@keyframes goal-spin{ to{ transform:rotate(360deg); } }
.goal-req{ padding:14px 14px 12px; }
.goal-req-title{
  display:block;
  font-size:15px;
  font-weight:600;
  line-height:1.35;
  white-space:nowrap;
}
.goal-req-meta{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-top:6px;
  font-size:14px;
  line-height:1.3;
  font-variant-numeric:tabular-nums;
}
.goal-req-meta b{ font-weight:600; }
.goal-req-meta span{ font-weight:400; color:#1a1a1a; }
.goal-req-rule{
  display:block;
  height:0;
  margin:12px 0 10px;
  border-top:1px solid #e7e7e4;
}
.goal-req-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.goal-ready{
  font-size:14px;
  line-height:1.3;
  color:#3b3b3b;
}
.goal-confirm{
  position:relative;
  display:inline-grid;
  place-items:center;
  height:32px;
  padding:0 16px;
  border-radius:999px;
  background:#1a1a1a;
  color:#fff;
  font-size:13px;
  font-weight:500;
  line-height:1;
}
.goal-face,
.goal-face--done{
  grid-area:1 / 1;
  position:static;
  inset:auto;
  white-space:nowrap;
}
.goal-face--done{ opacity:0; }
.goal-confirm.is-confirmed .goal-face[data-face="ready"]{ opacity:0; }
.goal-confirm.is-confirmed .goal-face--done{ opacity:1; }
.goal-cursor{
  position:absolute;
  left:0;
  top:0;
  width:16px;
  height:16px;
  margin:-8px 0 0 -8px;
  border:2px solid #1a1a1a;
  border-radius:50%;
  background:rgba(255,255,255,0.92);
  box-shadow:0 1px 3px rgba(0,0,0,0.16);
  opacity:0;
  z-index:3;
}
@media (prefers-reduced-motion: no-preference){
  .goal-tick{ transition:opacity 0.25s linear, transform 0.25s cubic-bezier(.2,.7,.2,1); }
  .goal-confirm{ transition:transform 0.16s cubic-bezier(.2,.7,.2,1); }
  .goal-confirm.is-down{ transform:scale(0.96); }
  .goal-face{ transition:none; }
}
@media (prefers-reduced-motion: reduce){
  .goal-row.is-spin .goal-spin{ animation:none; }
  .goal-confirm.is-down{ transform:none; }
}

.thought-line {
  --tl-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --tl-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --tl-font: 16px;
  --tl-color: currentColor;
  --tl-glyph: currentColor;
  --tl-settle: 350ms;
  --tl-blur: 2px;
  --tl-shimmer: 1.8s;
  --tl-done: 0.75;
  --tl-timer: 0.55;

  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  color: var(--tl-color);
  font-family: inherit;
  font-size: var(--tl-font);
  font-weight: 500;
  line-height: 1.2;
}

.thought-line__head {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  white-space: nowrap;
  outline: none;
  cursor: default;
}

.thought-line__head[data-toggle] {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.thought-line__glyph {
  display: inline-flex;
  flex: none;
  width: 1.1em;
  height: 1.1em;
  margin-right: 0.2em;
  color: var(--tl-glyph);
}

.thought-line__glyph svg {
  display: block;
  width: 100%;
  height: 100%;
}

.thought-line__dot {
  width: 0.5em;
  height: 0.5em;
  margin: auto;
  border-radius: 50%;
  background: currentColor;
}

.thought-line__label {
  display: inline-grid;
}

.thought-line__text {
  grid-area: 1 / 1;
  width: max-content;
  opacity: 0;
  filter: blur(var(--tl-blur));
  transition:
    opacity var(--tl-settle) var(--tl-ease-out),
    filter var(--tl-settle) var(--tl-ease-out);
}

.thought-line__text[data-active] {
  opacity: 1;
  filter: blur(0);
}

.thought-line__text--done[data-active] {
  opacity: var(--tl-done);
}

.thought-line__breath {
  display: inline-block;
}

.thought-line[data-working] .thought-line__breath[data-shimmer] {
  background: linear-gradient(
    100deg,
    color-mix(in srgb, var(--tl-color) 50%, transparent) 30%,
    var(--tl-color) 50%,
    color-mix(in srgb, var(--tl-color) 50%, transparent) 70%
  );
  background-size: 250% 100%;
  background-position: 125% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: thought-line-shimmer var(--tl-shimmer) linear infinite;
}

@keyframes thought-line-shimmer {
  to {
    background-position: -125% 0;
  }
}

.thought-line__timer {
  font-variant-numeric: tabular-nums;
  opacity: var(--tl-timer);
  transition:
    opacity var(--tl-settle) ease,
    transform var(--tl-settle) var(--tl-ease-in-out);
}

.thought-line__timer[data-done] {
  opacity: var(--tl-done);
}

.thought-line__chevron {
  display: inline-flex;
  margin-left: 0.1em;
  opacity: 0;
  transition:
    opacity 200ms ease,
    transform 200ms var(--tl-ease-out);
}

.thought-line__chevron[data-on] {
  opacity: 0.55;
}

.thought-line[data-open] .thought-line__chevron {
  transform: rotate(180deg);
}

.thought-line__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.thought-line__trace {
  display: grid;
  grid-template-rows: 0fr;
  width: 0;
  min-width: 100%;
  transition: grid-template-rows var(--tl-settle) var(--tl-ease-out);
}

.thought-line__trace[data-open] {
  grid-template-rows: 1fr;
}

.thought-line__fold {
  min-height: 0;
  overflow-x: visible;
  overflow-y: clip;
}

.thought-line__steps {
  display: flex;
  flex-direction: column;
  gap: 0.45em;
  width: max-content;
  padding: 0.6em 0 0.2em 1.6em;
  font-size: 0.875em;
  font-weight: 400;
  white-space: nowrap;
}

.thought-line__step {
  display: flex;
  align-items: center;
  gap: 0.5em;
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 200ms var(--tl-ease-out),
    transform 200ms var(--tl-ease-out);
}

@starting-style {
  .thought-line__step {
    opacity: 0;
    transform: translateY(-4px);
  }
}

.thought-line__mark {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 1em;
  height: 1em;
  opacity: 0.55;
}

.thought-line__pulse {
  display: block;
  width: 0.4em;
  height: 0.4em;
  border-radius: 50%;
  background: currentColor;
  animation: thought-line-pulse 1.6s var(--tl-ease-in-out) infinite;
}

@keyframes thought-line-pulse {
  0%,
  100% {
    opacity: 0.55;
  }

  50% {
    opacity: 1;
  }
}

.thought-line__step-text {
  transition: opacity var(--tl-settle) ease;
}

.thought-line__step[data-done] .thought-line__step-text {
  opacity: 0.55;
}

@media (prefers-reduced-motion: reduce) {
  .thought-line__text {
    filter: none !important;
    transition: opacity var(--tl-settle) ease;
  }

  .thought-line__timer {
    transition: opacity var(--tl-settle) ease;
  }

  .thought-line__step {
    transform: none !important;
    transition: opacity 200ms ease;
  }

  .thought-line__pulse {
    animation-duration: 2.4s;
  }
}


/* React Bits ports. Motion matches the originals; colors are the light palette. */
html.bits-list [data-catalog-classic]{ display:none; }
html:not(.bits-list) [data-bits-catalog]{ display:none; }
.bits-catalog .scroll-list-container{ position:relative; width:100%; }
.bits-catalog .scroll-list{
  position:relative;
  max-height:360px;
  overflow:hidden;
  padding:0;
  touch-action:pan-y;
}
.bits-catalog .scroll-track{
  position:relative;
  will-change:transform;
}
.bits-catalog .top-gradient{ opacity:0; }
.bits-catalog .bottom-gradient{ opacity:1; }
.bits-catalog .no-scrollbar::-webkit-scrollbar{ display:none; }
.bits-catalog .no-scrollbar{ -ms-overflow-style:none; scrollbar-width:none; }
.bits-catalog .top-gradient{
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:50px;
  background:linear-gradient(to bottom, #fff, transparent);
  pointer-events:none;
  transition:opacity 0.3s ease;
  z-index:2;
}
.bits-catalog .bottom-gradient{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:100px;
  background:linear-gradient(to top, #fff, transparent);
  pointer-events:none;
  transition:opacity 0.3s ease;
  z-index:2;
}
.product-row.is-selected{ background:#f4f4f2; }
.bits-catalog .product-title{ overflow:hidden; text-overflow:ellipsis; }
@media (max-width:600px){
  .bits-catalog .scroll-list{ max-height:360px; }
}

.bits-stepper{
  width:100%;
  color:#1a1a1a;
  font-family:Inter, Roboto, system-ui, sans-serif;
}
.bits-stepper .outer-container{
  display:flex;
  min-height:0;
  flex:1 1 0%;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:0;
  aspect-ratio:auto;
}
.bits-stepper .step-circle-container{
  margin-left:auto;
  margin-right:auto;
  width:100%;
  max-width:28rem;
  border-radius:2rem;
  border:1px solid #e7e7e4;
  background:#fff;
  box-shadow:0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
}
.bits-stepper .step-indicator-row{
  display:flex;
  width:100%;
  align-items:center;
  padding:2rem;
}
.bits-stepper .step-content-default{ position:relative; overflow:hidden; }
.bits-stepper .step-default{ padding-left:2rem; padding-right:2rem; }
.bits-stepper .footer-container{ padding:0 2rem 2rem; }
.bits-stepper .footer-nav{ margin-top:2.5rem; display:flex; }
.bits-stepper .footer-nav.spread{ justify-content:space-between; }
.bits-stepper .footer-nav.end{ justify-content:flex-end; }
.bits-stepper .back-button{
  transition:all 350ms;
  border:0;
  border-radius:0.25rem;
  padding:0.25rem 0.5rem;
  background:transparent;
  color:#6b6b6b;
  font:inherit;
  cursor:pointer;
}
.bits-stepper .back-button:hover{ color:#1a1a1a; }
.bits-stepper .next-button{
  transition:all 350ms;
  display:flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:9999px;
  background-color:#1a1a1a;
  color:#fff;
  font:inherit;
  font-weight:500;
  letter-spacing:-0.025em;
  padding:0.375rem 0.875rem;
  cursor:pointer;
}
.bits-stepper .next-button:hover,
.bits-stepper .next-button:active{ background-color:#1a1a1a; }
.bits-stepper .step-indicator{ position:relative; cursor:pointer; outline:none; }
.bits-stepper .step-indicator-inner{
  display:flex;
  height:2rem;
  width:2rem;
  align-items:center;
  justify-content:center;
  border-radius:9999px;
  font-weight:600;
}
.bits-stepper .active-dot{
  height:0.75rem;
  width:0.75rem;
  border-radius:9999px;
  background-color:#fff;
}
.bits-stepper .step-number{ font-size:0.875rem; }
.bits-stepper .step-connector{
  position:relative;
  margin-left:0.5rem;
  margin-right:0.5rem;
  height:0.125rem;
  flex:1;
  overflow:hidden;
  border-radius:0.25rem;
  background-color:#e7e7e4;
}
.bits-stepper .step-connector-inner{ position:absolute; left:0; top:0; height:100%; }
.bits-stepper .check-icon{ height:1rem; width:1rem; color:#fff; }
.bits-q{ font-size:20px; font-weight:600; line-height:1.35; color:#1a1a1a; }
.bits-q-note{ margin-top:8px; font-size:14px; line-height:1.45; color:#6b6b6b; }
.thinking-thumb .bits-fit{ position:absolute; inset:0; overflow:hidden; }
.thinking-thumb .bits-stepper{
  position:absolute;
  left:0;
  top:0;
  width:260px;
  transform-origin:0 0;
  pointer-events:none;
}
.thinking-thumb .bits-stepper .step-indicator-row{ padding:12px 14px; }
.thinking-thumb .bits-stepper .step-default{ padding:0 14px; }
.thinking-thumb .bits-stepper .footer-container{ padding:0 14px 12px; }
.thinking-thumb .bits-stepper .footer-nav{ margin-top:12px; }
.thinking-thumb .bits-stepper .bits-q{ font-size:16px; }
.thinking-thumb .bits-stepper .bits-q-note{ font-size:13px; }
.thinking-thumb .bits-stepper .step-circle-container{ border-radius:16px; box-shadow:none; }

/* Goal stage: JS sets scale (Firefox and Safari <26 reject calc(cqw / px)). */
@container (max-width: 200px){
  .goal{
    width:240px;
    height:165px;
    padding:10px 12px;
    gap:7px;
    justify-content:flex-start;
  }
  .goal-pill{ padding:6px 12px; }
  .goal-work{ position:relative; flex:1; gap:0; }
  .goal-agents{ padding:6px 8px; }
  .goal-agents .thought-line{ --tl-font:13px !important; }
  .goal-req{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    padding:8px 10px;
    box-shadow:0 -4px 12px rgba(0,0,0,.06);
  }
  .goal-req-title,
  .goal-req-rule,
  .goal-ready{ display:none; }
  .goal-req-meta{ margin:0 0 6px; font-size:15px; }
  .goal-req-foot{ justify-content:flex-end; }
  .goal-confirm{ height:28px; font-size:15px; }
  .thought-line__steps,
  .thought-line__step-text{ white-space:normal; }
  .thought-line__step-text{
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:168px;
  }
}
@media (max-width:800px){
  body.note-page .note-figure .a2-chip{ font-size:14px; height:24px; }
  body.note-page .note-figure .goal .product-meta{ font-size:13px; }
}
@media (max-width:600px){
  body.note-page .note-figure .goal-frame{ aspect-ratio:400 / 360; }
  body.note-page .note-figure .goal{ width:400px; height:360px; padding:20px; }
  body.note-page .note-figure .thought-line__steps{ font-size:1em; }
  body.note-page .note-figure .a2-chip{ font-size:14px; height:24px; }
}

/* Goal thumbnail: pill + one large line. Confirm overlays; it does not reserve a hole. */
.thinking-thumb .goal{
  width:158px;
  height:108px;
  padding:0;
  gap:3px;
  justify-content:stretch;
  background:#f3f1ec;
  box-sizing:border-box;
}
.thinking-thumb .goal-pill{
  display:block;
  align-self:stretch;
  width:100%;
  box-sizing:border-box;
  margin:0;
  padding:6px 8px;
  border-radius:0;
  font-size:13px;
  font-weight:600;
  line-height:1.15;
  letter-spacing:-0.02em;
  white-space:normal;
}
.thinking-thumb .goal-work{
  position:relative;
  flex:1 1 auto;
  gap:0;
  width:100%;
  min-height:0;
}
.thinking-thumb .goal-agents{
  flex:1 1 auto;
  align-self:stretch;
  align-items:stretch;
  width:100%;
  height:100%;
  min-height:0;
  justify-content:flex-start;
  padding:8px 8px 36px;
  border-radius:0;
  box-sizing:border-box;
  overflow:hidden;
}
.thinking-thumb .goal-agents .thought-line{
  --tl-font:14px !important;
  display:flex;
  width:100%;
  max-width:100%;
  min-width:0;
}
.thinking-thumb .thought-line__head{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:1px;
  white-space:normal;
  width:100%;
  max-width:100%;
  min-width:0;
}
.thinking-thumb .thought-line__glyph,
.thinking-thumb .thought-line__chevron,
.thinking-thumb .thought-line__trace,
.thinking-thumb .thought-line__timer,
.thinking-thumb .goal-req-title,
.thinking-thumb .goal-req-meta,
.thinking-thumb .goal-req-rule,
.thinking-thumb .goal-ready{ display:none; }
.thinking-thumb .thought-line__label{
  display:grid;
  width:100%;
  max-width:100%;
  min-width:0;
}
.thinking-thumb .thought-line__text{
  width:100%;
  max-width:100%;
  white-space:normal;
}
.thinking-thumb .goal-req{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  width:auto;
  padding:4px;
  box-shadow:none;
  box-sizing:border-box;
  background:#fff;
  border-radius:0;
  border-left:0;
  border-right:0;
  border-bottom:0;
}
.thinking-thumb .goal-req-foot{ justify-content:stretch; }
.thinking-thumb .goal-confirm{
  width:100%;
  height:28px;
  font-size:13px;
}
.thinking-thumb .goal-cursor{
  width:10px;
  height:10px;
  margin:-5px 0 0 -5px;
}
.thinking-thumb .note-a2{
  position:absolute;
  inset:0;
  border:0;
  border-radius:0;
  padding:0;
  display:flex;
  background:#f3f0eb;
}
.thinking-thumb .note-a2-card{
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:0;
  padding:3px;
  border:0;
  border-radius:0;
}
.thinking-thumb .note-a2-list{
  flex:1;
  justify-content:stretch;
  gap:3px;
  min-height:0;
}
.thinking-thumb .note-a2-item{
  flex:1;
  min-height:0;
  padding:0 5px;
  gap:4px;
  border-radius:4px;
  animation:none;
}
.thinking-thumb .note-a2-slot{ width:12px; height:12px; border-radius:3px; }
.thinking-thumb .note-a2-name,
.thinking-thumb .note-a2-price{
  font-size:11px;
  letter-spacing:-0.03em;
  white-space:nowrap;
}
@media (max-width:600px){
  .thinking-thumb .note-a2{ padding:2px; }
  .thinking-thumb .note-a2-card{ padding:2px; border-radius:4px; }
  .thinking-thumb .note-a2-list{ gap:2px; }
  .thinking-thumb .note-a2-item{ padding:0 3px; gap:3px; border-radius:3px; }
  .thinking-thumb .note-a2-slot{ width:8px; height:8px; }
  .thinking-thumb .note-a2-name,
  .thinking-thumb .note-a2-price{ font-size:7px; }
}

/* Clarifying-question stepper. JS sets scale; no calc(cqw / px). */
.clarify-frame{
  position:relative;
  width:min(100%, 440px);
  container-type:inline-size;
  overflow:hidden;
}
.thinking-thumb .clarify-frame{ width:100%; height:100%; }
.clarify{
  display:block;
  position:relative;
  width:440px;
  transform:none;
  transform-origin:0 0;
  color:#1a1a1a;
  font-family:Inter, Roboto, system-ui, sans-serif;
  pointer-events:none;
}
.thinking-thumb .clarify-frame{
  position:absolute;
  inset:0;
  width:auto;
  height:auto;
  overflow:hidden;
}
.thinking-thumb .clarify{
  position:absolute;
  left:0;
  top:0;
  width:200px;
}
.clarify-card{
  display:block;
  background:#fff;
  border:1px solid #e7e7e4;
  border-radius:16px;
  box-shadow:none;
  padding:16px 18px 14px;
}
.clarify-indicators{
  display:flex;
  align-items:center;
  gap:0;
}
.clarify-ind{
  position:relative;
  display:grid;
  place-items:center;
  width:2rem;
  height:2rem;
  flex:none;
  border-radius:999px;
  background:#ececea;
  color:#6b6b6b;
  font-size:14px;
  font-weight:600;
  line-height:1;
  transition:background-color 0.3s cubic-bezier(.42,0,.58,1), color 0.3s cubic-bezier(.42,0,.58,1);
}
.clarify-ind.is-active,
.clarify-ind.is-complete{ background:#1a1a1a; color:#fff; }
.clarify-num,
.clarify-pip,
.clarify-check{ grid-area:1 / 1; }
.clarify-num{ transition:opacity 0.2s linear; }
.clarify-ind.is-active .clarify-num,
.clarify-ind.is-complete .clarify-num{ opacity:0; }
.clarify-pip{
  width:0.75rem;
  height:0.75rem;
  border-radius:999px;
  background:#fff;
  opacity:0;
  transform:none;
  transition:opacity 0.2s linear;
}
.clarify-ind.is-active .clarify-pip{ opacity:1; transform:none; }
.clarify-check{
  width:1rem;
  height:1rem;
  opacity:0;
  transition:opacity 0.2s linear;
}
.clarify-ind.is-complete .clarify-check{ opacity:1; }
.clarify-check path{
  fill:none;
  stroke:#fff;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:var(--len, 22);
  stroke-dashoffset:var(--len, 22);
  transition:stroke-dashoffset 0.3s ease-out 0.1s;
}
.clarify-ind.is-complete .clarify-check path{ stroke-dashoffset:0; }
.clarify-conn{
  position:relative;
  flex:1;
  height:2px;
  margin:0 8px;
  border-radius:2px;
  background:#e7e7e4;
  overflow:hidden;
}
.clarify-conn-fill{
  display:block;
  width:0;
  height:100%;
  background:#1a1a1a;
  transition:width 0.4s cubic-bezier(.42,0,.58,1);
}
.clarify-conn.is-on .clarify-conn-fill{ width:100%; }
.clarify-view{
  position:relative;
  display:block;
  overflow:hidden;
  margin-top:14px;
  transition:height 0.4s linear(0, .096, .299, .521, .715, .861, .958, 1.014, 1.04, 1.046, 1.041, 1.032, 1.021, 1.013, 1.006, 1.002, .999, .998, .998, .998, 1);
}
.clarify-panel{ display:none; }
.clarify-panel.is-current{ display:block; }
.clarify.is-live .clarify-panel{
  display:block;
  position:absolute;
  left:0;
  right:0;
  top:0;
  transform:translate3d(-100%, 0, 0);
  opacity:0;
  transition:transform 0.4s cubic-bezier(.42,0,.58,1), opacity 0.4s cubic-bezier(.42,0,.58,1);
}
.clarify.is-live .clarify-panel.is-on{
  transform:translate3d(0, 0, 0);
  opacity:1;
}
.clarify.is-live .clarify-panel.is-exit{
  transform:translate3d(50%, 0, 0);
  opacity:0;
}
.clarify.is-fade .clarify-panel{
  transform:none;
  transition:opacity 0.45s linear;
}
.clarify-q{
  display:block;
  font-size:18px;
  font-weight:600;
  line-height:1.35;
}
.clarify-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}
.clarify-chip{
  display:inline-flex;
  align-items:center;
  height:28px;
  padding:0 12px;
  border:1px solid #e6e6e3;
  border-radius:999px;
  background:#f4f4f2;
  color:#1a1a1a;
  font-size:14px;
  font-weight:500;
  line-height:1;
}
.clarify-chip.is-picked{ border-color:#1a1a1a; background:#fff; }
.clarify-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  max-height:48px;
  margin-top:16px;
  overflow:hidden;
  transition:max-height 0.4s cubic-bezier(.23,1,.32,1), opacity 0.35s linear, margin-top 0.4s cubic-bezier(.23,1,.32,1);
}
.clarify.is-summary .clarify-foot{ max-height:0; margin-top:0; opacity:0; }
.clarify-back{
  visibility:hidden;
  color:#6b6b6b;
  font-size:14px;
  font-weight:500;
  line-height:1;
}
.clarify-back.is-on{ visibility:visible; }
.clarify-next{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:32px;
  margin-left:auto;
  padding:0 14px;
  border:1px solid #d9d9d9;
  border-radius:999px;
  background:#fff;
  color:#1a1a1a;
  font-size:14px;
  font-weight:500;
  line-height:1;
}
.clarify-next.is-complete{
  border-color:#1a1a1a;
  background:#1a1a1a;
  color:#fff;
}
.clarify-chip,
.clarify-next{ transition:transform 0.16s cubic-bezier(.2,.7,.2,1); }
.clarify-chip.is-down,
.clarify-next.is-down{ transform:scale(0.96); }
.clarify-cursor{
  position:absolute;
  left:0;
  top:0;
  width:16px;
  height:16px;
  margin:-8px 0 0 -8px;
  border:2px solid #1a1a1a;
  border-radius:50%;
  background:rgba(255,255,255,0.92);
  box-shadow:0 1px 3px rgba(0,0,0,0.16);
  opacity:0;
  z-index:4;
  pointer-events:none;
}
@container (max-width: 200px){
  .clarify{ width:200px; }
  .clarify-card{ padding:8px 10px; border-radius:12px; }
  .clarify-ind{ width:18px; height:18px; font-size:11px; }
  .clarify-pip{ width:7px; height:7px; }
  .clarify-check{ width:12px; height:12px; }
  .clarify-conn{ margin:0 6px; }
  .clarify-view{ margin-top:8px; }
  .clarify-q{ font-size:15px; }
  .clarify-chips{ gap:6px; margin-top:6px; }
  .clarify-chip{ height:22px; padding:0 8px; font-size:12px; }
  .clarify-foot{ margin-top:8px; }
  .clarify-back,
  .clarify-next{ font-size:12px; }
  .clarify-next{ height:24px; padding:0 10px; }
}
@media (max-width:600px){
  body.note-page .note-figure .clarify{ width:360px; }
}
@media (prefers-reduced-motion: reduce){
  .clarify-view,
  .clarify-conn-fill,
  .clarify-check path,
  .clarify.is-live .clarify-panel,
  .clarify-foot{ transition:none; }
  .clarify-chip.is-down,
  .clarify-next.is-down{ transform:none; }
}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0, 0, 0, 0);
  white-space:nowrap;
  border:0;
}

/* Admin recipe: shadcn-style cards. Motion is transform and opacity only. */
.recipe{
  width:926px;
  transform-origin:top left;
  color:#18181b;
  font-family:Inter, Roboto, system-ui, sans-serif;
}
.recipe:not([data-scaled]){ visibility:hidden; }
.recipe-cam{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:16px;
  transform-origin:50% 40%;
}
.recipe-card{
  background:#fff;
  border:1px solid #e4e4e7;
  border-radius:12px;
  box-shadow:0 1px 2px rgba(24,24,27,.04);
}
.recipe-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border-bottom:1px solid #f4f4f5;
}
.recipe-head h3{
  margin:0;
  font-size:15px;
  font-weight:600;
  line-height:1.3;
  letter-spacing:-0.01em;
}
.recipe-cols,
.recipe-row{
  display:grid;
  grid-template-columns:32px minmax(0, 1fr) auto;
  gap:12px;
  align-items:start;
}
.recipe-cols{
  padding:10px 16px 0;
  color:#71717a;
  font-size:12px;
  font-weight:500;
  line-height:1.3;
}
.recipe-cols span:first-child{ grid-column:2; }
.recipe-body{ padding:10px 16px 16px; }
.recipe-rows{ display:flex; flex-direction:column; gap:10px; }
.recipe-row{
  position:relative;
  padding:10px;
  border:1px solid #e4e4e7;
  border-radius:8px;
  background:#fff;
}
.recipe-move{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding-top:2px;
}
.recipe-arrow{
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  border:1px solid #e4e4e7;
  border-radius:6px;
  background:#fff;
  color:#3f3f46;
}
.recipe-arrow svg{ display:block; }
.recipe-arrow.is-down{ transform:scale(0.92); }
.recipe-field,
.recipe-copy{
  min-width:0;
}
.recipe-field{
  margin:0;
  min-height:64px;
  padding:8px 10px 14px;
  border:1px solid #e4e4e7;
  border-radius:6px;
  background:#fff;
  box-shadow:0 1px 2px rgba(24,24,27,.03);
  color:#18181b;
  font-size:13px;
  line-height:1.45;
  position:relative;
}
.recipe-field::after{
  content:"";
  position:absolute;
  right:4px;
  bottom:4px;
  width:8px;
  height:8px;
  background:
    linear-gradient(135deg, transparent 50%, #d4d4d8 50%, #d4d4d8 62%, transparent 62%),
    linear-gradient(135deg, transparent 62%, #d4d4d8 62%, #d4d4d8 74%, transparent 74%);
}
.recipe-title{
  margin:0;
  font-size:14px;
  font-weight:600;
  line-height:1.35;
}
.recipe-desc{
  margin:4px 0 0;
  font-size:13px;
  line-height:1.45;
  color:#3f3f46;
}
.recipe-note{
  margin:8px 0 0;
  font-size:12px;
  line-height:1.4;
  color:#71717a;
}
.recipe-actions{
  position:relative;
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px;
}
.recipe-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  height:32px;
  padding:0 12px;
  border:1px solid #e4e4e7;
  border-radius:6px;
  background:#fff;
  color:#18181b;
  font-size:13px;
  font-weight:500;
  line-height:1;
  white-space:nowrap;
  box-shadow:0 1px 1px rgba(24,24,27,.04);
}
.recipe-btn svg{ display:block; }
.recipe-btn.is-down{ transform:scale(0.97); }
.recipe-pop{
  position:absolute;
  z-index:4;
  top:calc(100% + 8px);
  right:0;
  width:300px;
  padding:12px 14px;
  border:1px solid #e4e4e7;
  border-radius:8px;
  background:#fff;
  box-shadow:0 10px 28px rgba(24,24,27,.12);
  opacity:0;
  transform:translate3d(0, 8px, 0);
}
.recipe-pop p{
  margin:0;
  font-size:13px;
  line-height:1.45;
  color:#18181b;
}
.recipe-pop .recipe-pop-kicker{
  margin-bottom:4px;
  font-size:11px;
  font-weight:600;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:#71717a;
}
.recipe-cursor{
  position:absolute;
  left:0;
  top:0;
  z-index:5;
  width:16px;
  height:16px;
  margin:-8px 0 0 -8px;
  border:2px solid #18181b;
  border-radius:50%;
  background:rgba(255,255,255,.92);
  box-shadow:0 1px 3px rgba(0,0,0,.16);
  opacity:0;
}
@media (prefers-reduced-motion: reduce){
  .recipe-pop,
  .recipe-cursor{ opacity:0; transform:none; }
  .recipe-cam,
  .recipe-row,
  .recipe-btn,
  .recipe-arrow{ transform:none; }
}

/* Live demos play like video. A swipe scrolls the page; nothing inside moves with the finger. */
.note-figure,
.hero,
.media--phone,
.goal-frame,
.clarify-frame{
  touch-action:pan-y;
}
.bento-media--live,
.bento-media--phone,
.thinking-thumb,
.demo-stage,
.goal-frame,
.clarify-frame,
.hero .media,
.media--phone{
  overflow:hidden;
  touch-action:pan-y;
}
.bento-media--live,
.bento-media--live *,
.bento-media--phone,
.bento-media--phone *,
.thinking-thumb,
.thinking-thumb *,
.demo-stage,
.demo-stage *,
.goal,
.goal *,
.clarify,
.clarify *,
.note-figure video,
.note-a2,
.note-a2 *,
.hero .media,
.hero .media *,
.media--phone,
.media--phone *{
  pointer-events:none;
  -webkit-user-select:none;
  user-select:none;
  touch-action:pan-y;
}

/* #51: TL;DR reads as label + text rows. The 3-column wrap cut lines at 1280. */
@media (min-width:601px){
  .tldr-cols{ grid-template-columns:1fr; gap:var(--s1); }
  .tldr-cols > div{ display:grid; grid-template-columns:96px minmax(0,1fr); column-gap:16px; align-items:baseline; }
  .tldr-cols .label{ margin:0; }
}

/* Notes stack like the case studies, so the stage keeps its design size. */

/* #51: note pages keep the page grid. Material theme paints a grey centered band. */
body.note-page footer.wrap{
  width:100%;
  max-width:calc(var(--page) + 2*var(--pad));
  margin:var(--s6) auto 0;
  padding:0 var(--pad) var(--s4);
  background:none;
  text-align:left;
  box-sizing:border-box;
}

/* Handoff thumb is recomposed to the tile. Do not zoom it. */
.thinking-thumb video[poster*="note-handoff-thumb"],
.thinking-thumb video[poster*="note-teammates-thumb"],
.thinking-thumb video[poster*="note-latch-thumb"],
.thinking-thumb video[poster*="note-action-thumb"]{
  transform:none;
}
.thinking-thumb video[poster*="note-latch-thumb"],
.thinking-thumb video[poster*="note-action-thumb"]{
  position:absolute;
  inset:0;
  object-fit:cover;
  object-position:center center;
  background:#eef3f8;
}
.thinking-thumb .latch-thumb-still{
  display:none;
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  background:#eef3f8;
}
@media (prefers-reduced-motion: reduce){
  .thinking-thumb video[poster*="note-latch-thumb"],
  .thinking-thumb video[poster*="note-action-thumb"]{ display:none; }
  .thinking-thumb:has(video[poster*="note-latch-thumb"]) .latch-thumb-art,
  .thinking-thumb:has(video[poster*="note-action-thumb"]) .latch-thumb-art{ display:none; }
  .thinking-thumb .latch-thumb-still{ display:block; }
}
/* Reserve the hero tile's final height so the AnimatedList mount doesn't push the half tiles down ~320px (CLS 0.09 -> ~0). */
.bento-tile--hero .bento-media--live{ min-height:452px; align-items:flex-start; box-sizing:border-box; }
/* N2 follow-up (desktop only): with align-items:flex-start the .a2ui grid only grows to 420px once the catalog mounts, so the chat bubbles (justify-content:flex-end) paint at the top (y≈345) and drop 322px ~100ms later. Stretch it to the reserved height from first paint. Not needed at <=600px (chat stacks above the list). */
@media (min-width:601px){ .bento-tile--hero .bento-media--live > .a2ui{ align-self:stretch; } }
/* Safari (seen in WebKit 17.4, and intermittently in current WebKit): the phone frame on /inventory-picking and the
   Inventory tile on the homepage collapse to 0px wide, so every screenshot and video inside disappears.
   Cause: .handset is shrink-to-fit (grid place-items:center) and its only child gets its width from
   aspect-ratio + a percentage height. WebKit doesn't transfer that width up, so .handset = 0px, and
   .handset__device{max-width:100%} clamps the phone to 0. Fix: give .handset the same width explicitly.
   Container units keep the device's 2.778% bezel padding identical (it resolves against .handset's width). */
.media--phone, .bento-media--phone{ container-type:size; }
.media--phone .handset{ width:calc(88cqh * 0.465); max-width:100%; }
.bento-media--phone .handset{ width:calc(100cqh / 1.06 * 0.465); max-width:100%; }

/* Shared Intake stage. The canvas slides inside its frame. Homepage and the case study mount the same component. */
.a2ui--split .canvas-frame{
  grid-column:1;
  grid-row:1;
  justify-self:end;
  align-self:stretch;
  width:calc(66% - 6px);
  min-width:0;
  overflow:hidden;
  border-radius:12px;
  z-index:2;
  transform:translate3d(110%,0,0);
}
.a2ui--split.is-canvas .canvas-frame{ transform:translate3d(0,0,0); }
.a2ui--split .catalog-list{
  position:relative;
  transform:none;
}
.a2ui--split .scroll-list-container{ position:relative; width:100%; }
.a2ui--split .scroll-list{
  position:relative;
  max-height:300px;
  overflow:hidden;
  padding-bottom:120px;
  box-sizing:border-box;
}
.a2ui--split .top-gradient{ height:12px; }
.a2ui--split .bottom-gradient{ height:24px; }
.a2ui--split.is-instant .canvas-frame,
.a2ui--split.is-instant .split-chat,
.a2ui--split.is-instant .split-col,
.a2ui--split.is-instant .cart-toast,
.a2ui--split.is-instant .product-more,
.a2ui--split.is-instant .split-status,
.a2ui--split.is-instant [data-confirm],
.a2ui--split.is-instant .chat-bubble{ transition:none; }
@media (prefers-reduced-motion: no-preference){
  .a2ui--split.is-motion .canvas-frame,
  .a2ui--split.is-motion .split-col{
    transition:transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s linear;
  }
  .a2ui--split.is-instant .canvas-frame,
  .a2ui--split.is-instant .split-col{ transition:none; }
}
@media (prefers-reduced-motion: reduce){
  .a2ui--split .canvas-frame,
  .a2ui--split .split-chat,
  .a2ui--split .split-col{ transform:none; transition:none; }
}
.bento-tile--hero:hover .bento-media--live,
.bento-tile--hero:hover .bento-media--live .a2ui{ transform:none; }

/* Compact catalog row: name + one meta line, details only when selected. */
.product-row--compact{
  grid-template-columns:36px minmax(0, 1fr) auto;
  align-items:start;
}
.product-row--compact .product-mark{ width:36px; height:36px; }
.product-row--compact .product-title{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.product-meta{
  margin:2px 0 0;
  font-size:12px;
  line-height:1.35;
  color:#6b6b6b;
}
.product-more{
  max-height:0;
  opacity:0;
  overflow:hidden;
  transform:translate3d(0,-4px,0);
}
.product-row--compact.is-open .product-more{
  max-height:140px;
  opacity:1;
  transform:none;
  margin-top:8px;
}
.product-more .qty-stepper{ margin-top:8px; }
.add-btn--compact{
  min-width:52px;
  height:28px;
  padding:0 10px;
  font-size:12px;
}
/* Intake stays the desktop layout at every viewport. The stage is a fixed 926px design, scaled by script.
   Two chat columns are pre-wrapped: a 580px centered column, and the narrow left column. Opening the canvas crossfades them. */
.a2ui.a2ui--split{
  grid-template-columns:minmax(0, 1fr);
  gap:0;
  overflow:hidden;
  box-sizing:border-box;
  background:#fff;
  border:1px solid rgba(0,0,0,0.08);
  border-radius:16px;
  box-shadow:0 1px 2px rgba(0,0,0,0.04), 0 10px 28px rgba(0,0,0,0.06);
  container-type:inline-size;
}
.a2ui.a2ui--split:not([data-scaled]){ visibility:hidden; }
.a2ui--split .split-chat{
  position:relative;
  grid-column:1;
  grid-row:1;
  align-self:stretch;
  z-index:1;
  width:auto;
  margin-left:0;
  padding:0;
  min-height:0;
  overflow:hidden;
  box-sizing:border-box;
}
.a2ui--split .split-col{
  position:absolute;
  top:0;
  bottom:0;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:16px;
  padding:12px 16px;
}
.a2ui--split .split-col--wide{
  left:50%;
  width:580px;
  transform:translate3d(-50%,0,0);
  opacity:1;
}
.a2ui--split .split-col--narrow{
  left:0;
  width:calc(34cqw - 6px);
  opacity:0;
}
.a2ui--split.is-canvas .split-col--wide{ opacity:0; }
.a2ui--split.is-canvas .split-col--narrow{ opacity:1; }
@media (prefers-reduced-motion: reduce){
  .a2ui--split .split-col--wide{ opacity:0; }
  .a2ui--split .split-col--narrow{ opacity:1; }
  .a2ui--split .split-col,
  .a2ui--split .canvas-frame{ transition:none; }
}
.a2ui--split .catalog-list:has(.cart-toast.is-on) .bottom-gradient{
  height:84px;
  background:#fff;
  opacity:1 !important;
}
.a2ui--split .catalog-list:has(.cart-toast.is-on) .scroll-list{
  -webkit-mask-image:linear-gradient(#000 0, #000 calc(100% - 84px), transparent calc(100% - 84px));
  mask-image:linear-gradient(#000 0, #000 calc(100% - 84px), transparent calc(100% - 84px));
}
.a2ui--split .split-status{
  max-height:0;
  margin:0;
  padding-top:0;
  padding-bottom:0;
  opacity:0;
  overflow:hidden;
}
.a2ui--split.is-canvas .split-status.is-in{
  max-height:160px;
  padding:24px 16px;
  opacity:1;
}
.a2ui--split [data-confirm]{
  max-height:0;
  margin:0;
  opacity:0;
  overflow:hidden;
}
.a2ui--split.is-settled [data-confirm].is-in{
  max-height:140px;
  opacity:1;
}
.canvas-x.is-down{ transform:scale(0.92); }
.a2ui--split .product-title{
  font-size:13px;
  white-space:nowrap;
  display:block;
}
.a2ui--split .product-row--compact .product-buy{
  grid-column:auto;
  justify-content:flex-end;
}
@media (prefers-reduced-motion: no-preference){
  .product-more{ transition:max-height 0.35s cubic-bezier(.2,.7,.2,1), opacity 0.25s linear, transform 0.35s cubic-bezier(.2,.7,.2,1); }
}
@media (prefers-reduced-motion: reduce){
  .product-more{ transform:none; transition:none; }
}

/* Added-to-cart confirmation. Transform and opacity only. */
.cart-toast{
  position:absolute;
  left:8px;
  right:8px;
  bottom:8px;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:44px;
  padding:0 16px 0 14px;
  border-radius:999px;
  background:#1a1a1a;
  color:#fff;
  font-family:Inter, Roboto, system-ui, sans-serif;
  font-size:14px;
  font-weight:500;
  line-height:1;
  opacity:0;
  transform:translate3d(0,16px,0);
  pointer-events:none;
}
.cart-toast.is-on{ opacity:1; transform:translate3d(0,0,0); }
.cart-toast-main{ display:inline-flex; align-items:center; gap:8px; min-width:0; }
.cart-toast-main svg{ flex:none; }
.cart-toast-view{ flex:none; font-weight:500; opacity:0.92; }
@media (prefers-reduced-motion: no-preference){
  .cart-toast{ transition:transform 0.45s cubic-bezier(0.22, 1.2, 0.36, 1), opacity 0.28s linear; }
}
@media (prefers-reduced-motion: reduce){
  .cart-toast{ transform:none; transition:none; }
}

/* Goal note: chat column, inline thinking, result card. Not a thinking card. */
.goal-user{
  align-self:flex-end;
  max-width:92%;
  background:#e8e8e8;
  border-radius:999px;
  padding:10px 14px;
  font-size:15px;
  font-weight:500;
  line-height:1.4;
}
.goal-think{
  margin:0;
  max-width:40ch;
  font-size:14px;
  line-height:1.45;
  color:#6b6b6b;
  background:none;
  border:0;
  opacity:0;
}
.goal-req{ opacity:0; }
.goal-req-row{
  display:flex;
  align-items:flex-start;
  gap:10px;
}
.goal-req .a2-chips{ margin-top:10px; }
.goal-req-foot{ margin-top:12px; }
.thought-line--inline{
  margin:0;
  font-size:14px;
  line-height:1.45;
  color:#6b6b6b;
  background:none;
  border:0;
}
.thinking-thumb .goal{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto 1fr;
  align-content:start;
  width:160px;
  height:110px;
  padding:6px;
  row-gap:4px;
  justify-content:flex-start;
  background:#f7f6f4;
}
.thinking-thumb .goal > *{ flex-shrink:0; min-height:0; }
.thinking-thumb .goal-user{
  justify-self:end;
  font-size:11px;
  font-weight:600;
  line-height:1.2;
  padding:4px 6px;
  max-width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.thinking-thumb .goal-think,
.thinking-thumb .goal-req{ grid-row:2; grid-column:1; align-self:start; }
.thinking-thumb .goal-think{
  font-size:10px;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.thinking-thumb .goal-req{
  position:relative;
  left:auto;
  right:auto;
  bottom:auto;
  padding:4px 6px;
  border-radius:8px;
  border:1px solid #e7e7e4;
}
.thinking-thumb .goal-req-title{ display:block; font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.thinking-thumb .goal-req .product-meta{ font-size:10px; }
.thinking-thumb .goal-req .a2-chips,
.thinking-thumb .goal-req .product-mark,
.thinking-thumb .goal-ready{ display:none; }
.thinking-thumb .goal-req-foot{ margin-top:4px; }
.thinking-thumb .goal-confirm{ width:auto; height:20px; padding:0 8px; font-size:10px; }
.thinking-thumb .note-a2{ background:#f7f6f4; }
.thinking-thumb .note-a2-card{ background:#fff; border-radius:0; padding:0; }
.thinking-thumb .note-a2-item{ min-height:0; padding:2px 4px; gap:4px; }
.thinking-thumb .note-a2-slot{ width:14px; height:14px; border-radius:3px; }
.thinking-thumb .note-a2-name{ font-size:10px; }
.thinking-thumb .note-a2-meta{ font-size:8px; }
.thinking-thumb .note-a2-add{ min-width:0; height:14px; padding:0 4px; font-size:8px; }
@media (max-width:600px){
  .thinking-thumb .note-a2-name{ font-size:8px; }
  .thinking-thumb .note-a2-meta{ font-size:7px; }
  .thinking-thumb .note-a2-add{ font-size:7px; height:12px; }
}

/* Shared Note frame: the same 926×537 Intake stage. Hidden until the wide chat is positioned. */
.agent-slot{ position:relative; width:100%; overflow:hidden; }
.thinking-thumb .agent-slot{ position:absolute; inset:0; width:auto; height:auto; }
.agent-note{
  width:926px;
  height:537px;
}
.agent-slot > .agent-note{ position:absolute; left:0; top:0; }
.agent-canvas{
  position:relative;
  height:100%;
  box-sizing:border-box;
  padding:8px 16px 16px;
  background:#fff;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.agent-card{
  border:1px solid #e7e7e4;
  border-radius:12px;
  background:#fff;
  padding:14px 16px;
}
.agent-row{
  display:flex;
  align-items:center;
  gap:12px;
}
.agent-row + .agent-row{ margin-top:10px; padding-top:10px; border-top:1px solid #efefef; }
.agent-copy{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.agent-name{ margin:0; font-size:15px; font-weight:600; line-height:1.35; color:#1a1a1a; }
.agent-meta{ margin:0; font-size:13px; line-height:1.35; color:#6b6b6b; }
.agent-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.agent-chip,
.agent-opt{
  display:inline-flex;
  align-items:center;
  height:32px;
  padding:0 12px;
  border:1px solid #e6e6e3;
  border-radius:999px;
  background:#f4f4f2;
  color:#1a1a1a;
  font-size:13px;
  font-weight:500;
  line-height:1;
}
.agent-chip.is-picked,
.agent-opt.is-picked{ border-color:#1a1a1a; background:#fff; }
.agent-btn.is-down,
.agent-chip.is-down,
.agent-opt.is-down{ transform:scale(0.96); }
.agent-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:14px;
}
.agent-ready{ font-size:13px; color:#3b3b3b; }
.agent-btn{
  position:relative;
  display:inline-grid;
  place-items:center;
  min-width:96px;
  height:36px;
  padding:0 14px;
  border-radius:999px;
  background:#1a1a1a;
  color:#fff;
  font-size:13px;
  font-weight:500;
  line-height:1;
  white-space:nowrap;
}
.agent-btn > span{ grid-area:1 / 1; }
.agent-note [data-beat].is-on.is-down,
.agent-btn.is-down,
.agent-chip.is-down,
.agent-opt.is-down{ transform:scale(0.9); }
.agent-btn--line{
  background:#fff;
  color:#1a1a1a;
  box-shadow:inset 0 0 0 1px #d4d4d0;
}
.agent-card--hug{ width:fit-content; max-width:100%; }
.agent-foot--start{ justify-content:flex-start; }
.agent-actions{ margin-top:14px; }
.a2-stack{ position:relative; }
.a2-stack > .agent-think{
  position:absolute;
  left:64px;
  right:16px;
  top:14px;
}
.agent-qslot--line{ min-height:56px; }
.agent-qslot--line > [data-beat]{ position:absolute; left:0; right:0; top:0; }
.agent-note.is-chat .split-col{ justify-content:flex-start; padding-top:24px; }
.agent-note .chat-bubble--user{ width:fit-content; max-width:min(85%, 46ch); }
.agent-note .chat-plain,
.agent-note .chat-bubble--assistant{ max-width:min(46ch, calc(100% - 80px)); }
.agent-note.is-chat .split-composer{
  position:absolute;
  left:16px;
  right:16px;
  bottom:14px;
}
.agent-note.is-chat .split-thread{
  width:100%;
  gap:10px;
  margin-bottom:36px;
}
.agent-note .chat-bubble--user{ position:relative; }
.agent-note .agent-sizer{ visibility:hidden; }
.agent-note [data-typed]{
  position:absolute;
  left:14px;
  right:14px;
  top:10px;
  text-align:left;
}
.agent-note [data-beat]{
  opacity:0;
  transform:translateY(8px);
}
.agent-note [data-beat].is-on,
.agent-note .chat-bubble--user.is-in,
.agent-note .chat-bubble--assistant.is-in{
  opacity:1;
  transform:none;
}
.agent-chip.is-added{
  background:#1a1a1a;
  color:#fff;
  border-color:#1a1a1a;
}
.agent-rows{
  margin:auto;
  width:min(100%, 520px);
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
@media (prefers-reduced-motion: no-preference){
  .agent-note.is-motion [data-beat]{
    transition:opacity 0.45s cubic-bezier(.2,.7,.2,1), transform 0.45s cubic-bezier(.2,.7,.2,1);
  }
  .agent-note.is-motion [data-beat].is-driven{ transition:transform 0.45s cubic-bezier(.2,.7,.2,1); }
  .agent-note.is-motion .split-col{ transition:opacity 0.01s linear; }
  .agent-note.is-motion .agent-btn,
  .agent-note.is-motion .agent-chip,
  .agent-note.is-motion .agent-opt,
  .agent-note.is-motion .a2-btn,
  .agent-note.is-motion .a2-chip,
  .agent-note.is-motion .a2-line{
    transition:transform 0.16s cubic-bezier(.2,.7,.2,1), background 0.2s linear, color 0.2s linear, border-color 0.2s linear;
  }
  .agent-note.is-instant [data-beat],
  .agent-note.is-instant .agent-btn,
  .agent-note.is-instant .agent-chip,
  .agent-note.is-instant .agent-opt,
  .agent-note.is-instant .a2-btn,
  .agent-note.is-instant .a2-chip,
  .agent-note.is-instant .a2-line{ transition:none; }
}
.agent-canvas .agent-copy{ flex:0 1 auto; }
.agent-canvas .agent-row{ padding:6px 0; }
.agent-canvas .agent-chip{
  margin-left:28px;
  min-width:72px;
  justify-content:center;
  background:#fff;
  border-color:#d9d9d9;
  color:#1a1a1a;
}
.agent-canvas .agent-chip.is-added{
  background:#1a1a1a;
  color:#fff;
  border-color:#1a1a1a;
}
.agent-think{
  margin:0;
  color:#8a8a8a;
  font-size:14px;
  line-height:1.45;
}
.agent-q{ margin:0 0 8px; font-size:15px; font-weight:500; line-height:1.4; color:#1a1a1a; }
.agent-qslot{ position:relative; min-height:88px; }
.agent-qslot > [data-beat]{ position:absolute; left:0; right:0; top:0; }
.agent-swap{ position:relative; display:inline-grid; }
.agent-swap > *{ grid-area:1 / 1; }
.agent-change{ margin:12px 0 0; font-size:13px; color:#3b3b3b; }
.agent-change span{ text-decoration:underline; text-underline-offset:2px; }
.agent-picker{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.agent-log{ margin:0; font-size:13px; color:#6b6b6b; }
.agent-note.is-chat .canvas-frame{ transform:translate3d(110%,0,0); }
/* One card surface. Header, rows, footer. Same metrics as the catalog list. */
.agent-note .a2{
  width:100%;
  background:#fff;
  border:1px solid #e7e7e4;
  border-radius:12px;
  overflow:hidden;
  color:#1a1a1a;
}
.agent-note .a2-head,
.agent-note .a2-fields,
.agent-note .a2-foot,
.agent-note .a2-sum{
  padding:12px 16px;
}
.agent-note .a2-head{
  display:flex;
  align-items:center;
  gap:12px;
}
.agent-note .a2-copy{ min-width:0; }
.agent-note .a2-title{
  margin:0;
  font-size:15px;
  font-weight:600;
  line-height:1.3;
}
.agent-note .a2-sub,
.agent-note .a2-meta,
.agent-note .a2-label{
  margin:2px 0 0;
  font-size:12px;
  line-height:1.35;
  color:#6b6b6b;
}
.agent-note .a2-label{ margin:0 0 8px; font-weight:500; }
.agent-note .a2-name{
  margin:0;
  font-size:13px;
  font-weight:600;
  line-height:1.3;
}
.agent-note .a2-line{
  display:grid;
  grid-template-columns:36px minmax(0, 1fr) auto;
  gap:12px;
  align-items:center;
  padding:12px 16px;
  border-top:1px solid #ececea;
}
.agent-note .a2-line.is-picked{ background:#f4f4f2; }
.agent-note .a2-price,
.agent-note .a2-sum b{
  margin:0;
  font-size:13px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
}
.agent-note .a2-sum{
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid #ececea;
  font-size:13px;
}
.agent-note .a2-fields{ border-top:1px solid #ececea; }
.agent-note .a2-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.agent-note .a2-chip{
  display:inline-flex;
  align-items:center;
  height:32px;
  padding:0 10px;
  border:1px solid #e6e6e3;
  border-radius:8px;
  background:#fff;
  color:#1a1a1a;
  font-size:12px;
  font-weight:500;
  line-height:1;
}
.agent-note .a2-chip.is-picked{ border-color:#1a1a1a; background:#f4f4f2; }
.agent-note .a2-field{
  display:flex;
  align-items:center;
  height:36px;
  margin-top:8px;
  padding:0 12px;
  border:1px solid #e7e7e4;
  border-radius:8px;
  background:#fff;
  color:#8a8a8a;
  font-size:13px;
}
.agent-note .a2-foot{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  width:auto;
  margin:0;
  border-top:1px solid #ececea;
  background:#fff;
  text-align:start;
  font-size:13px;
  color:#1a1a1a;
}
.agent-note .a2--dense .a2-head,
.agent-note .a2--dense .a2-fields,
.agent-note .a2--dense .a2-foot,
.agent-note .a2--dense .a2-sum,
.agent-note .a2--dense .a2-line{
  padding-top:8px;
  padding-bottom:8px;
}
.agent-note .a2-note{
  margin-right:auto;
  font-size:12px;
  color:#6b6b6b;
}
.agent-note .a2-btn{
  display:inline-grid;
  place-items:center;
  width:auto;
  height:32px;
  padding:0 12px;
  border-radius:999px;
  background:#1a1a1a;
  color:#fff;
  font-size:13px;
  font-weight:500;
  line-height:1;
  white-space:nowrap;
}
.agent-note .a2-btn > span{ grid-area:1 / 1; }
.agent-note .a2-btn--line{
  background:#fff;
  color:#1a1a1a;
  box-shadow:inset 0 0 0 1px #d9d9d9;
}
.agent-note .a2-pill{
  display:inline-flex;
  align-items:center;
  height:32px;
  padding:0 12px;
  border-radius:999px;
  background:#1a1a1a;
  color:#fff;
  font-size:13px;
  font-weight:500;
  line-height:1;
  white-space:nowrap;
}
.agent-note .a2-swap{
  position:relative;
  display:inline-grid;
  justify-items:end;
  align-items:center;
}
.agent-note .a2-swap > *{ grid-area:1 / 1; }
.agent-note .a2-line--choice{ grid-template-columns:minmax(0, 1fr); font-size:13px; font-weight:500; }
.agent-note .a2.is-picking .a2-summary{ display:none; }
.agent-note .a2-picker{ display:none; }
.agent-note .a2.is-picking .a2-picker{ display:block; }
.agent-note .a2.is-resolved .a2-form{ display:none; }
.agent-note .a2-done{ display:none; }
.agent-note .a2.is-resolved .a2-done{ display:block; }
.agent-note .product-mark{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  flex:none;
  border-radius:8px;
}
.agent-note .product-mark svg{ width:18px; height:18px; }
.agent-note .agent-think{ font-size:13px; color:#8a8a8a; }
.agent-canvas .agent-row{ padding:12px 0; }
.agent-canvas .agent-name{ font-size:13px; font-weight:600; }
.agent-canvas .agent-meta{ font-size:12px; }
.agent-canvas .agent-chip{
  height:32px;
  min-width:64px;
  margin-left:auto;
  padding:0 14px;
  font-size:13px;
  border-radius:999px;
}
.agent-note .a2-btn.is-down,
.agent-note .a2-chip.is-down,
.agent-note .a2-line.is-down,
.agent-note [data-beat].is-on.is-down{ transform:scale(0.9); }
.agent-note .a2-chip.is-down{ background:#f4f4f2; }
.agent-note .a2-btn.is-down{ background:#000; }
.agent-note .a2-btn--line.is-down{ background:#f4f4f2; }
@media (prefers-reduced-motion: reduce){
  .agent-note.is-chat .split-col--wide{ opacity:1; }
  .agent-note.is-chat .split-col--narrow{ opacity:0; }
  .agent-note.is-chat .canvas-frame{ transform:translate3d(110%,0,0); }
}

/* Homepage work row: three equal-width tiles. The procurement stage stays the 926px
   desktop layout and scales down; it does not reflow into the tile. */
.bento-label{ grid-column:1 / -1; margin-bottom:0; }
@media (max-width: 899px){
  .bento{ grid-template-columns:minmax(0, 1fr); }
  .bento-tile--hero,
  .bento-tile--half{ grid-column:auto; }
}
@media (min-width: 900px){
  .bento{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .bento-tile--hero,
  .bento-tile--half{ grid-column:auto; }
}
.bento-tile--hero,
.bento-tile--half{ align-self:start; }
.bento-tile--hero .bento-media--live{
  flex:0 0 auto;
  min-height:0;
  aspect-ratio:auto;
  align-items:flex-start;
}
/* Match the scaled desktop stage, including its 16px frame padding. */
.bento .bento-tile--half .bento-media{
  flex:0 0 auto;
  width:100%;
  min-height:0;
  height:auto;
  aspect-ratio:289.3 / 182;
}
.bento .bento-tile--hero .bento-media--live{
  flex:0 0 auto;
  width:100%;
  min-height:0;
  height:auto;
  aspect-ratio:auto;
  position:relative;
  overflow:hidden;
}
.bento .bento-meta{ margin-top:auto; }

/* Inventory uses the neutral plate. Procurement and Compliance keep their own plates. */
.bento-tile--sand,
.bento-tile--mist,
.bento-tile--sage{
  border-radius:22px;
}
.bento-tile--mist{ background:#f7f6f4; }
.bento-tile--sand{
  background:
    radial-gradient(120% 80% at 50% 0%, #fff8f3 0%, rgba(255,248,243,0) 58%),
    #f3e4d6;
}
.bento-tile--sage{ background:#f7f6f4; }
.bento-tile--sand .bento-media,
.bento-tile--sand .bento-media--live,
.bento-tile--sand .bento-media--phone,
.bento-tile--sand .bento-media--still,
.bento-tile--sage .bento-media,
.bento-tile--sage .bento-media--live,
.bento-tile--sage .bento-media--phone,
.bento-tile--sage .bento-media--still{
  background:transparent;
}
.bento-tile--mist .bento-media{
  width:100%;
  border-radius:22px 22px 0 0;
  background:#f7f6f4;
  container-type:size;
}
.bento-tile--mist .bento-media img.bento-still{ background:#f7f6f4; }

/* Live inventory composition. 868×546 poster, scaled to the art box. */
.inv-art{
  position:absolute;
  left:0;
  top:0;
  width:868px;
  height:546px;
  transform-origin:0 0;
  background:transparent;
}
.inv-art .phone{ position:absolute; container-type:inline-size; }
.inv-art .device{
  box-sizing:border-box;
  width:100%;
  aspect-ratio:0.465;
  padding:2.7cqw;
  background:#1a1a1c;
  border-radius:8.4cqw;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.22),
    0 1px 3px rgba(60,55,45,0.08),
    0 10px 36px -8px rgba(60,55,45,0.18);
}
.inv-art .screen{
  position:relative;
  height:100%;
  overflow:hidden;
  background:#fff;
  border-radius:calc(8.4cqw - 2.7cqw);
}
.inv-art .screen img{ display:block; width:100%; height:100%; object-fit:fill; background:#fff; }
.inv-art .cam{
  position:absolute;
  left:50%;
  top:2.43%;
  width:7.1%;
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:#0c0c0e;
  border-radius:50%;
  z-index:2;
  pointer-events:none;
}
.inv-art .back{ width:192px; left:280px; top:74px; transform:rotate(-5deg); z-index:1; }
.inv-art .front{ width:213px; left:353px; top:44px; transform:rotate(3deg); z-index:2; }
.inv-art .inv-pill{
  position:absolute;
  z-index:4;
  height:74px;
  display:flex;
  align-items:center;
  gap:3px;
  padding:0 27px;
  background:#fff;
  border-radius:999px;
  box-shadow:0 1px 2px rgba(60,55,45,0.08), 0 10px 24px -8px rgba(60,55,45,0.18);
  font-family:Roboto, system-ui, sans-serif;
  font-size:28px;
  font-weight:600;
  font-synthesis:none;
  letter-spacing:-0.01em;
  line-height:1;
  color:#1d1d1f;
  white-space:nowrap;
}
.inv-art .inv-pill .ico{ width:47px; height:47px; display:grid; place-items:center; flex:none; }
.inv-art .inv-pill .ico svg{ width:47px; height:47px; }
.inv-art .inv-pill .inv-label{
  display:inline;
  margin:0;
  font-size:28px;
  font-weight:600;
  font-synthesis:none;
  letter-spacing:-0.01em;
  line-height:1;
  text-transform:none;
  color:#1d1d1f;
}
.inv-art .inv-scan{ left:54px; top:335px; transform:rotate(-3deg); }
.inv-art .inv-scan .ico{ color:#0975e1; }
.inv-art .inv-gloves{ left:552px; top:148px; transform:rotate(2deg); }
.inv-art .star{ position:absolute; z-index:3; opacity:0.4; }
.inv-art .inv-chip-mask{
  position:absolute;
  left:77.6%;
  top:29.0%;
  width:16.4%;
  height:2.9%;
  background:#fff;
  z-index:3;
}
.inv-art .inv-chip{
  position:absolute;
  left:78.25%;
  top:29.38%;
  width:14.8%;
  height:2.33%;
  z-index:4;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:#e1fce9;
  color:#447e56;
  font-family:Roboto, system-ui, sans-serif;
  font-weight:500;
  font-size:7px;
  line-height:1;
  border-radius:3px;
}

.bento-tile--sage .bento-media{
  width:100%;
  border-radius:22px 22px 0 0;
  background:#f7f6f4;
  container-type:size;
}
/* Notes read like a research index: date, title, one line, a small figure.
   Tight enough that a seventh note still fits. */
.thinking{ margin-top:40px; }
.thinking-row{
  grid-template-columns:minmax(0, 1fr) 132px;
  gap:24px;
  padding:8px 0;
}
.thinking-copy{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  column-gap:16px;
  align-items:baseline;
}
.thinking-list:not(.is-open) > li:nth-child(n + 4){ display:none; }
.thinking-list:not(.is-open) > li:nth-child(3) .thinking-row{ border-bottom:1px solid var(--line); }
.thinking-more{
  margin:8px 0 0;
  padding:0;
  border:0;
  background:none;
  color:var(--ink-2);
  font:inherit;
  font-size:13px;
  line-height:1.4;
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:3px;
}
.thinking-more:hover{ color:var(--ink); }
.thinking-more:focus-visible{ outline:2px solid currentColor; outline-offset:3px; }
.thinking-title{
  grid-column:1;
  grid-row:1;
  font-size:16px;
  line-height:1.3;
}
.thinking-dek{
  grid-column:1 / -1;
  grid-row:2;
  margin-top:2px;
  font-size:13px;
  line-height:1.35;
}
.thinking-side{
  grid-column:2;
  grid-row:1;
  margin:0;
  font-size:11px;
  line-height:1.2;
  white-space:nowrap;
}
.thinking-thumb{
  width:132px;
  height:84px;
  border:0;
  border-radius:10px;
  background:#f4f1ea;
}
@media (max-width: 600px){
  .thinking-row{
    grid-template-columns:minmax(0, 1fr) 92px;
    gap:12px;
    padding:8px 0;
  }
  .thinking-copy{ display:block; }
  .thinking-thumb{ width:92px; height:64px; }
  .thinking-title{ font-size:16px; }
  .thinking-dek{ margin-top:2px; }
  .thinking-side{ display:block; margin:4px 0 0; font-size:11px; }
}

/* The citations note uses the same figure as the homepage. The rest of the index stays text. */
body.note-page .note-list{ margin-top:20px; }
body.note-page .note-list li{ padding:10px 0; gap:16px; align-items:start; }
body.note-page .note-list a{ gap:2px; }
body.note-page .note-list-title{ font-size:16px; line-height:1.35; }
body.note-page .note-list-dek{ font-size:13px; line-height:1.4; }
body.note-page .note-list time{ font-size:13px; white-space:nowrap; }
body.note-page .note-list a:has(.thinking-thumb){
  display:grid;
  grid-template-columns:132px minmax(0, 1fr);
  column-gap:16px;
  align-items:center;
  min-width:0;
}
body.note-page .note-list .note-list-copy{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:2px;
}
body.note-page .note-list .thinking-thumb{ justify-self:start; }
body.note-page .note-list li:has(.thinking-thumb){ align-items:center; }
@media (max-width:600px){
  body.note-page .note-list a:has(.thinking-thumb){
    grid-template-columns:92px minmax(0, 1fr);
    column-gap:12px;
  }
}

/* Individual notes: the animation sits on a paper plate, caption under it. */
html.theme-material body.note-page .note h1,
body.note-page .note h1{
  font-family:"Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  max-width:900px;
  margin-left:auto;
  margin-right:auto;
  font-size:48px;
  font-weight:590;
  letter-spacing:-0.022em;
  line-height:1;
}
body.note-page{
  --note:624px;
}
body.note-page .note-lede,
body.note-page .note-meta,
body.note-page .note-body,
body.note-page .note-next,
body.note-page .note-home{
  max-width:var(--note);
  margin-left:auto;
  margin-right:auto;
}
body.note-page .note-lede,
body.note-page .note-body p,
body.note-page .note-body li,
body.note-page .note-body h2{
  font-family:"Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  letter-spacing:normal;
}
body.note-page .note-lede{
  margin-top:20px;
  font-size:17px;
  font-weight:400;
  line-height:1.6;
  color:var(--ink);
}
body.note-page .note-meta{ margin-top:12px; }
body.note-page .note-body h2{
  margin:56px 0 0;
  font-size:24px;
  font-weight:590;
  line-height:1.33;
  letter-spacing:-0.012em;
  color:var(--ink);
}
body.note-page .note-body ul{
  margin:12px 0 0;
  padding:0 0 0 24px;
  list-style:disc;
}
body.note-page .note-body li{
  margin:0;
  padding:0;
  font-size:17px;
  line-height:1.6;
}
body.note-page .note-body li + li{ margin-top:8px; }
body.note-page .note-body li strong{
  font-weight:590;
  text-decoration:underline;
  text-underline-offset:2.5px;
  text-decoration-thickness:1.5px;
}
body.note-page .note-body a{
  color:inherit;
  text-decoration:underline;
  text-underline-offset:2.5px;
  text-decoration-thickness:1.5px;
}
body.note-page .note-split{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:28px;
  margin-top:28px;
}
body.note-page .note-stage{
  position:static;
  order:-1;
  top:auto;
  width:100%;
  max-width:none;
  gap:0;
}
body.note-page .note-body p,
body.note-page .note-lede{
  font-size:17px;
  line-height:1.6;
}
body.note-page .note-body p + p{ margin-top:20px; }
body.note-page .note-next{ margin-top:28px; font-size:17px; }
@media (max-width:768px){
  html.theme-material body.note-page .note-lede,
  html.theme-material body.note-page .note-body p,
  html.theme-material body.note-page .note-body li,
  body.note-page .note-lede,
  body.note-page .note-body p,
  body.note-page .note-body li{
    font-size:15px;
    line-height:24px;
    letter-spacing:-0.011em;
  }
  html.theme-material body.note-page .note-body h2,
  body.note-page .note-body h2{
    font-size:20px;
    line-height:1.33;
    letter-spacing:-0.012em;
  }
}
@media (max-width:640px){
  html.theme-material body.note-page .note h1,
  body.note-page .note h1{
    font-size:32px;
    line-height:1.125;
    letter-spacing:-0.022em;
  }
}
/* Notes use the same centred article head as case studies. */
body.note-page .note-header{
  display:block;
  width:100%;
  max-width:640px;
  margin:0 auto;
  text-align:center;
  font-family:"Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
body.note-page .note-header .note-back{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  gap:0.35em;
  font-size:var(--t-small);
  font-weight:400;
  line-height:1.5;
  color:var(--ink-2);
  text-decoration:none;
}
body.note-page .note-header .note-back:hover{
  color:var(--ink);
}
html.theme-material body.note-page .note-header .note-meta,
body.note-page .note-header .note-meta{
  margin:0;
  max-width:none;
  font-size:var(--t-small);
  font-weight:400;
  line-height:1.5;
  color:var(--ink-2);
}
html.theme-material body.note-page .note-header h1,
body.note-page .note-header h1{
  max-width:none;
  margin:0;
  text-align:center;
}
html.theme-material body.note-page .note-header .note-lede,
body.note-page .note-header .note-lede{
  margin:var(--s2) 0 0;
  max-width:none;
  font-size:var(--t-title);
  font-weight:400;
  line-height:1.45;
  letter-spacing:normal;
  color:var(--ink-2);
}
body.note-page .note-header + .note-split{
  margin-top:var(--s4);
}
body.note-page .note-figure{
  margin:0;
  padding:12px 12px 14px;
  background:
    radial-gradient(120% 80% at 50% 0%, #fbfaf7 0%, rgba(251,250,247,0) 70%),
    #f3f0ea;
  border-radius:18px;
}
body.note-page .note-figure .agent-slot{
  border-radius:12px;
  background:#fff;
}
body.note-page .note-figure figcaption{
  margin:10px 2px 0;
  font-size:13px;
  line-height:1.45;
}

/* Notes and homepage thumbnails. Fineliner ink on off-white paper,
   inside the frame only. The page behind the frame stays white.
   Titles and labels are handwritten. Body copy in the UI stays Inter. */
body.note-page .note-figure--sketch{
  padding:20px 18px 14px;
  background:#f7f4ee;
  border-radius:20px;
}
body.note-page .note-figure--sketch .agent-slot{
  box-sizing:border-box;
  border:0;
  border-radius:12px;
  box-shadow:none;
  background:transparent;
}
.thinking-thumb{
  background:#f7f4ee;
  border-radius:12px;
}
body.note-page .note-figure--sketch .a2ui.a2ui--split,
.thinking-thumb .a2ui.a2ui--split{
  border-color:transparent;
  box-shadow:none;
  background:transparent;
}
.note-figure--sketch .a2ui,
.thinking-thumb .a2ui,
.note-figure--sketch .a2ui *,
.thinking-thumb .a2ui *{
  font-family:Inter, "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-variant-ligatures:none;
  letter-spacing:0;
  color:#1a1a1a;
}
.note-figure--sketch .chat-plain,
.thinking-thumb .chat-plain,
.note-figure--sketch .agent-think,
.thinking-thumb .agent-think,
.note-figure--sketch .a2-meta,
.thinking-thumb .a2-meta,
.note-figure--sketch .a2-name,
.thinking-thumb .a2-name,
.note-figure--sketch .agent-name,
.thinking-thumb .agent-name,
.note-figure--sketch .agent-meta,
.thinking-thumb .agent-meta{
  font-weight:400;
  color:#1a1a1a;
}
.note-figure--sketch .a2ui .a2-title,
.thinking-thumb .a2ui .a2-title,
.note-figure--sketch .a2ui .canvas-title,
.thinking-thumb .a2ui .canvas-title,
.note-figure--sketch .a2ui .a2-label,
.thinking-thumb .a2ui .a2-label,
.note-figure--sketch .a2ui .a2-sub,
.thinking-thumb .a2ui .a2-sub,
.note-figure--sketch .a2ui .a2-note,
.thinking-thumb .a2ui .a2-note{
  font-family:"Caveat", "Long Cang", cursive;
  font-weight:500;
  letter-spacing:0.01em;
  color:#1a1a1a;
}
.note-figure--sketch .a2ui .a2-title,
.thinking-thumb .a2ui .a2-title,
.note-figure--sketch .a2ui .canvas-title,
.thinking-thumb .a2ui .canvas-title{
  font-size:30px;
  line-height:1.05;
}
.note-figure--sketch .a2ui .a2-label,
.thinking-thumb .a2ui .a2-label,
.note-figure--sketch .a2ui .a2-note,
.thinking-thumb .a2ui .a2-note{
  font-size:20px;
  line-height:1.2;
}
.note-figure--sketch .a2ui .a2-sub,
.thinking-thumb .a2ui .a2-sub{
  font-size:18px;
  line-height:1.2;
}
.note-figure--sketch .a2ui--split .chat-bubble--user,
.thinking-thumb .a2ui--split .chat-bubble--user,
.note-figure--sketch .split-composer,
.thinking-thumb .split-composer,
.note-figure--sketch .agent-note .a2,
.thinking-thumb .agent-note .a2,
.note-figure--sketch .agent-canvas,
.thinking-thumb .agent-canvas{
  position:relative;
  border:0;
  background:#fbf8f3;
  color:#1a1a1a;
  box-shadow:1px 8px 18px rgba(48, 38, 22, 0.09), 0 1px 2px rgba(48, 38, 22, 0.04);
}
.note-figure--sketch .agent-note .a2,
.thinking-thumb .agent-note .a2{
  overflow:visible;
  border-radius:14px 18px 16px 12px;
}
.note-figure--sketch .agent-canvas,
.thinking-thumb .agent-canvas{
  border-radius:14px 16px 18px 12px;
}
.note-figure--sketch .a2ui--split .chat-bubble--user,
.thinking-thumb .a2ui--split .chat-bubble--user{
  border-radius:18px 22px 16px 20px;
  font-size:16px;
  font-weight:400;
  line-height:1.35;
  transition:none;
}
.note-figure--sketch .split-composer,
.thinking-thumb .split-composer{
  border-radius:22px 26px 20px 24px;
}
.note-figure--sketch .chat-bubble--user:not(.is-in),
.thinking-thumb .chat-bubble--user:not(.is-in){
  display:none;
}
.note-figure--sketch .agent-note .a2-chip,
.thinking-thumb .agent-note .a2-chip,
.note-figure--sketch .agent-note .a2-btn,
.thinking-thumb .agent-note .a2-btn,
.note-figure--sketch .agent-note .a2-btn.is-down,
.thinking-thumb .agent-note .a2-btn.is-down,
.note-figure--sketch .agent-note .a2-pill,
.thinking-thumb .agent-note .a2-pill,
.note-figure--sketch .agent-note .a2-field,
.thinking-thumb .agent-note .a2-field,
.note-figure--sketch .agent-chip,
.thinking-thumb .agent-chip,
.note-figure--sketch .agent-canvas .agent-chip.is-added,
.thinking-thumb .agent-canvas .agent-chip.is-added{
  position:relative;
  border:0;
  border-radius:9px 11px 8px 10px;
  background:#fbf8f3;
  color:#1a1a1a;
  box-shadow:none;
  font-family:Inter, "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size:13px;
  font-weight:500;
}
.note-figure--sketch .agent-note .a2-chip.is-picked,
.thinking-thumb .agent-note .a2-chip.is-picked,
.note-figure--sketch .agent-chip.is-picked,
.thinking-thumb .agent-chip.is-picked,
.note-figure--sketch .agent-canvas .agent-chip.is-added,
.thinking-thumb .agent-canvas .agent-chip.is-added{
  background:#fbf8f3;
  color:#1a1a1a;
  box-shadow:inset 0 -1.25px 0 #1a1a1a;
}
.note-figure--sketch .agent-note .a2-line.is-picked,
.thinking-thumb .agent-note .a2-line.is-picked{
  background:transparent;
}
.note-figure--sketch .split-send,
.thinking-thumb .split-send{
  position:relative;
  border:0;
  border-radius:50%;
  box-shadow:none;
  background:#fbf8f3;
  color:#1a1a1a;
  font-family:Inter, "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size:0;
  font-weight:500;
  color:transparent;
}
.note-figure--sketch .rough-stroke,
.thinking-thumb .rough-stroke{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
  pointer-events:none;
}
.note-figure--sketch .agent-canvas,
.thinking-thumb .agent-canvas{
  overflow:visible;
}
.note-figure--sketch .a2-head,
.thinking-thumb .a2-head,
.note-figure--sketch .canvas-bar,
.thinking-thumb .canvas-bar{
  align-items:flex-start;
}
.note-figure--sketch .ink-tale,
.thinking-thumb .ink-tale{
  flex:none;
  width:96px;
  height:78px;
  margin-left:12px;
  pointer-events:none;
}
.note-figure--sketch [data-sketch="catalog"] .ink-tale,
.thinking-thumb [data-sketch="catalog"] .ink-tale{
  width:88px;
  height:72px;
  margin-top:2px;
}
.note-figure--sketch .ink-tale[data-tale="goal"],
.thinking-thumb .ink-tale[data-tale="goal"]{ transform:rotate(-2.5deg); }
.note-figure--sketch .ink-tale[data-tale="teammates"],
.thinking-thumb .ink-tale[data-tale="teammates"]{ transform:rotate(1.5deg); }
.note-figure--sketch .ink-tale[data-tale="catalog"],
.thinking-thumb .ink-tale[data-tale="catalog"]{ transform:rotate(-1deg); }
.note-figure--sketch .ink-tale[data-tale="handoff"],
.thinking-thumb .ink-tale[data-tale="handoff"]{ transform:rotate(1deg); }
.note-figure--sketch .ink-tale[data-tale="clarify"],
.thinking-thumb .ink-tale[data-tale="clarify"]{ transform:rotate(-1.5deg); }
.note-figure--sketch .ink-tale[data-tale="verify"],
.thinking-thumb .ink-tale[data-tale="verify"]{ transform:rotate(2deg); }
.note-figure--sketch .ink-tale svg,
.thinking-thumb .ink-tale svg,
.note-figure--sketch .sketch-pet svg,
.thinking-thumb .sketch-pet svg{
  display:block;
  width:100%;
  height:100%;
  overflow:visible;
  filter:none;
}
.note-figure--sketch .sketch-pet,
.thinking-thumb .sketch-pet{
  position:absolute;
  z-index:2;
  right:-4px;
  bottom:0;
  width:112px;
  height:96px;
  pointer-events:none;
  transform-origin:78% 92%;
  transition:transform 0.16s ease-out;
}
.note-figure--sketch .sketch-pet.is-pressing,
.thinking-thumb .sketch-pet.is-pressing{
  transform:translate(8px,18px) rotate(12deg);
}
.thinking-thumb .sketch-pet{ display:none; }
.thinking-thumb .is-canvas .split-chat{ visibility:hidden; }
.note-figure--sketch .split-send,
.thinking-thumb .split-send{
  transition:transform 0.12s ease-out;
}
.note-figure--sketch .split-send.is-pressing,
.thinking-thumb .split-send.is-pressing{
  transform:scale(0.84);
}
.note-figure--sketch .split-composer.is-draft .split-placeholder,
.thinking-thumb .split-composer.is-draft .split-placeholder{
  color:#2a2a2a;
  white-space:nowrap;
}
.note-figure--sketch .split-composer.is-typing .split-placeholder::after,
.thinking-thumb .split-composer.is-typing .split-placeholder::after{
  content:"";
  display:inline-block;
  width:2px;
  height:0.9em;
  margin-left:2px;
  background:#1a1a1a;
  vertical-align:-0.05em;
}
.note-figure--sketch .split-chat > .split-composer,
.thinking-thumb .split-chat > .split-composer{
  position:absolute;
  z-index:4;
  right:auto;
  bottom:14px;
  left:50%;
  width:548px;
  max-width:calc(100% - 32px);
  margin:0;
  background-color:#fbf8f3;
  transform:translate3d(-50%,0,0);
  transition:none;
  animation:none;
}
.note-figure--sketch .is-canvas .split-chat > .split-composer,
.thinking-thumb .is-canvas .split-chat > .split-composer{
  left:16px;
  width:calc(34cqw - 38px);
  transform:none;
}
.note-figure--sketch .split-placeholder,
.thinking-thumb .split-placeholder{
  font-family:Inter, "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size:16px;
  font-weight:400;
  letter-spacing:0;
  color:#4e4942;
}
.note-figure--sketch .split-plus,
.thinking-thumb .split-plus{
  font-family:Inter, "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size:22px;
  font-weight:400;
  color:#1a1a1a;
}
.note-figure--sketch .agent-note .a2-fields,
.thinking-thumb .agent-note .a2-fields,
.note-figure--sketch .agent-note .a2-foot,
.thinking-thumb .agent-note .a2-foot,
.note-figure--sketch .agent-note .a2-line,
.thinking-thumb .agent-note .a2-line,
.note-figure--sketch .agent-note .a2-sum,
.thinking-thumb .agent-note .a2-sum,
.note-figure--sketch .agent-row + .agent-row,
.thinking-thumb .agent-row + .agent-row{
  border-top-color:rgba(26,26,26,0.45);
}
@media (max-width:800px){
  body.note-page .note-figure--sketch .a2-chip,
  body.note-page .note-figure--sketch .agent-chip,
  body.note-page .note-figure--sketch .a2-btn,
  .thinking-thumb .a2-chip,
  .thinking-thumb .agent-chip,
  .thinking-thumb .a2-btn{
    font-size:13px;
    height:32px;
    font-family:Inter, "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  }
  body.note-page .note-figure--sketch .a2ui .a2-title,
  body.note-page .note-figure--sketch .a2ui .canvas-title,
  .thinking-thumb .a2ui .a2-title,
  .thinking-thumb .a2ui .canvas-title{
    font-size:30px;
    font-family:"Caveat", "Long Cang", cursive;
  }
}
@media (max-width:800px){
  body.note-page .note-split{ gap:20px; }
}

/* Case studies use the same article scale as the notes.
   Figures, demos, and screenshots keep the original page width and their own type. */
body.case-page h1{
  max-width:900px;
  margin-left:auto;
  margin-right:auto;
  font-family:"Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size:48px;
  font-weight:590;
  letter-spacing:-0.022em;
  line-height:1;
}
body.case-page .outcome,
body.case-page .meta,
body.case-page .text,
body.case-page .case-end{
  max-width:624px;
  margin-left:auto;
  margin-right:auto;
}
body.case-page .outcome,
body.case-page .text > p,
body.case-page .beat.text > p{
  font-family:"Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size:17px;
  font-weight:400;
  line-height:1.6;
  letter-spacing:normal;
  color:var(--ink);
}
body.case-page .outcome{ margin-top:20px; }
body.case-page .text > p + p,
body.case-page .beat.text > p + p{ margin-top:20px; }
body.case-page .claim,
body.case-page .text > .label,
body.case-page .beat.text > .label{
  font-family:"Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size:24px;
  font-weight:590;
  line-height:1.33;
  letter-spacing:-0.012em;
  color:var(--ink);
}
body.case-page .claim{ margin:0 0 12px; max-width:none; }
body.case-page .text > .label,
body.case-page .beat.text > .label{
  display:block;
  margin:0 0 12px;
  text-transform:none;
}
@media (max-width:768px){
  body.case-page .outcome,
  body.case-page .text > p,
  body.case-page .beat.text > p{
    font-size:15px;
    line-height:24px;
    letter-spacing:-0.011em;
  }
  body.case-page .claim,
  body.case-page .text > .label,
  body.case-page .beat.text > .label{
    font-size:20px;
    line-height:1.33;
    letter-spacing:-0.012em;
  }
}
@media (max-width:640px){
  body.case-page h1{
    font-size:32px;
    line-height:1.125;
    letter-spacing:-0.022em;
  }
}

/* Latch citations note. The chat fills the note column. The file stack
   opens over that column, so a wide window does not grow the page. */
.latch-fit{
  position:relative;
  width:100%;
  max-width:100%;
  height:560px;
  margin-top:20px;
  overflow:hidden;
  border-radius:16px;
}
.latch-fit.is-flow{
  height:auto;
  overflow:visible;
}
.latch-fit.is-flow > .latch-root{
  height:auto;
  min-height:0;
}
.note-body .latch-fit + p,
.note-body .latch-fit + ul{ margin-top:20px; }
body.note-page .note-body a.btn-secondary{
  color:#37352f;
  text-decoration:none;
}
body.note-page .note-body a.btn-secondary:focus-visible{
  border-radius:999px;
}
body.note-page .note-body .latch-github svg{
  display:block;
  width:16px;
  height:16px;
  flex:none;
}
@media (max-width:640px){
  body.note-page .note-body a.btn-secondary{
    min-height:44px;
  }
}
.latch-fit > .latch-root{
  position:relative;
  width:100%;
  height:100%;
  min-height:0;
}
.thinking-thumb .latch-thumb-art{
  display:block;
  width:100%;
  height:100%;
}
/* The note column is narrower than the embed's wide layout.
   On a wide window the file stack opens over the column, under the chip.
   On a phone the embed's own rule turns it into a bottom sheet. */
.latch-fit .latch-root.is-open .latch-frame{ display:flex; }
@media (min-width: 800px){
  .latch-fit .latch-root.is-open .latch-stack{
    position:absolute;
    right:12px;
    left:12px;
    bottom:auto;
    z-index:5;
    max-height:calc(100% - 16px);
    background:var(--latch-card, rgba(255, 255, 255, 0.78));
    border:1px solid var(--latch-glass-line, rgba(255, 255, 255, 0.86));
    border-radius:var(--latch-radius, 18px);
    box-shadow:var(--latch-shadow, 0 10px 28px -12px rgba(30, 36, 48, 0.18));
    -webkit-backdrop-filter:blur(18px) saturate(1.25);
    backdrop-filter:blur(18px) saturate(1.25);
  }
}
@media (max-width: 799px){
  .latch-fit:has(.latch-root.is-open){ overflow:visible; }
}
/* Note type rules are more specific than the embed. Put the embed's sizes back. */
html.theme-material body.note-page .note-body .latch-root h2,
html.theme-material body.note-page .note-body .latch-root h3,
body.note-page .note-body .latch-root h2,
body.note-page .note-body .latch-root h3{
  max-width:none;
  margin:0;
  font-size:var(--a2ui-font-size-m, 1rem);
  font-weight:400;
  line-height:var(--a2ui-line-height-body, 1.5);
  letter-spacing:normal;
  text-align:left;
}
html.theme-material body.note-page .note-body .latch-root h4,
body.note-page .note-body .latch-root h4{
  max-width:none;
  margin:var(--a2ui-spacing-m, 0.5rem) 0 0;
  font-size:var(--a2ui-font-size-m, 1rem);
  font-weight:400;
  line-height:var(--a2ui-line-height-body, 1.5);
  letter-spacing:normal;
  text-align:left;
}
html.theme-material body.note-page .note-body .latch-root p,
body.note-page .note-body .latch-root p{
  max-width:none;
  margin:0;
  font-size:var(--a2ui-font-size-m, 1rem);
  font-weight:400;
  line-height:var(--a2ui-line-height-body, 1.5);
  letter-spacing:normal;
  color:inherit;
}
html.theme-material body.note-page .note-body .latch-root .latch-review-title,
body.note-page .note-body .latch-root .latch-review-title{
  font-size:var(--a2ui-font-size-l, 1.2rem);
  font-weight:700;
  letter-spacing:-0.022em;
  line-height:1.2;
}
html.theme-material body.note-page .note-body .latch-root .latch-change-values,
body.note-page .note-body .latch-root .latch-change-values{
  font-size:var(--a2ui-font-size-m, 1rem);
  line-height:var(--a2ui-line-height-body, 1.5);
}
html.theme-material body.note-page .note-body .latch-root .latch-verb,
body.note-page .note-body .latch-root .latch-verb,
html.theme-material body.note-page .note-body .latch-root .is-after,
body.note-page .note-body .latch-root .is-after{
  font-weight:400;
  color:var(--latch-ink, #1e2430);
}
html.theme-material body.note-page .note-body .latch-root .is-before,
body.note-page .note-body .latch-root .is-before{
  color:var(--latch-meta, #3d4654);
}
html.theme-material body.note-page .note-body .latch-root .latch-review-context,
html.theme-material body.note-page .note-body .latch-root .latch-change-label,
html.theme-material body.note-page .note-body .latch-root .latch-why,
html.theme-material body.note-page .note-body .latch-root .latch-receipt-kicker,
html.theme-material body.note-page .note-body .latch-root .latch-receipt-meta,
html.theme-material body.note-page .note-body .latch-root .latch-undo-note,
body.note-page .note-body .latch-root .latch-review-context,
body.note-page .note-body .latch-root .latch-change-label,
body.note-page .note-body .latch-root .latch-why,
body.note-page .note-body .latch-root .latch-receipt-kicker,
body.note-page .note-body .latch-root .latch-receipt-meta,
body.note-page .note-body .latch-root .latch-undo-note{
  color:var(--latch-meta, #3d4654);
  font-size:var(--a2ui-font-size-xs, 0.694rem);
  line-height:var(--a2ui-line-height-body, 1.5);
}
html.theme-material body.note-page .note-body .latch-root .latch-policy-hint,
body.note-page .note-body .latch-root .latch-policy-hint{
  color:var(--latch-error, #9f1239);
  font-size:var(--a2ui-font-size-xs, 0.694rem);
  line-height:var(--a2ui-line-height-body, 1.5);
}
html.theme-material body.note-page .note-body .latch-root .latch-receipt-line,
body.note-page .note-body .latch-root .latch-receipt-line{
  color:var(--latch-ink, #1e2430);
  font-size:var(--a2ui-font-size-m, 1rem);
  line-height:var(--a2ui-line-height-body, 1.5);
}
html.theme-material body.note-page .note-body .latch-root p + p,
body.note-page .note-body .latch-root p + p{ margin-top:0; }
html.theme-material body.note-page .note-body .latch-root p.latch-answer,
body.note-page .note-body .latch-root p.latch-answer{
  line-height:var(--a2ui-line-height-body, 1.5);
}
html.theme-material body.note-page .note-body .latch-root p.latch-user,
body.note-page .note-body .latch-root p.latch-user{
  max-width:min(100%, 42ch);
  border-radius:18px 18px 6px 18px;
  background:var(--bubble, #1e3348);
  color:var(--bubble-ink, #f3f6fa);
  line-height:1.6;
  letter-spacing:0.01em;
}
html.theme-material body.note-page .note-body .latch-root .latch-stack-head p:not(.latch-stack-title),
body.note-page .note-body .latch-root .latch-stack-head p:not(.latch-stack-title){
  overflow:hidden;
  color:var(--latch-meta, #3d4654);
  font-size:var(--a2ui-font-size-xs, 0.694rem);
  line-height:var(--a2ui-line-height-body, 1.5);
  white-space:nowrap;
  text-overflow:ellipsis;
}
html.theme-material body.note-page .note-body .latch-root .latch-stack-head p.latch-stack-title,
body.note-page .note-body .latch-root .latch-stack-head p.latch-stack-title{
  overflow:hidden;
  color:var(--latch-ink, #1e2430);
  font-size:var(--a2ui-font-size-l, 1.2rem);
  font-weight:700;
  letter-spacing:-0.02em;
  line-height:1.2;
  white-space:nowrap;
  text-overflow:ellipsis;
}
html.theme-material body.note-page .note-body .latch-root .latch-page-no,
body.note-page .note-body .latch-root .latch-page-no{
  margin:var(--a2ui-spacing-m, 0.5rem) 0 0;
  color:var(--latch-meta, #3d4654);
  font-size:var(--a2ui-font-size-xs, 0.694rem);
  line-height:var(--a2ui-line-height-body, 1.5);
}
html.theme-material body.note-page .note-body .latch-root ul,
body.note-page .note-body .latch-root ul{
  margin:var(--a2ui-spacing-m, 0.5rem) 0 0;
  padding:0;
  list-style:none;
}
html.theme-material body.note-page .note-body .latch-root li,
body.note-page .note-body .latch-root li{
  margin:0;
  border-radius:var(--latch-radius-mark, 8px);
  padding:var(--a2ui-spacing-s, 0.25rem) var(--a2ui-spacing-m, 0.5rem);
  color:var(--latch-meta, #3d4654);
  font-size:var(--a2ui-font-size-xs, 0.694rem);
  line-height:var(--a2ui-line-height-body, 1.5);
  letter-spacing:normal;
}
html.theme-material body.note-page .note-body .latch-root li.is-cited,
body.note-page .note-body .latch-root li.is-cited{
  background:var(--latch-cited, #e6eefb);
  color:var(--latch-ink, #1e2430);
}
html.theme-material body.note-page .note-body .latch-root li + li,
body.note-page .note-body .latch-root li + li{ margin-top:0; }
html.theme-material body.note-page .note-body .latch-root li strong,
body.note-page .note-body .latch-root li strong{
  font-weight:inherit;
  text-decoration:none;
}
body.note-page .latch-root,
body.note-page .latch-preview{
  color-scheme:light;
  --accent:#1d4ed8;
  color:var(--latch-ink, #1e2430);
  font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, sans-serif;
}
body.note-page .latch-root .latch-sheet{
  font-family:inherit;
}

/* One large work tile, two below. The 900px equal-column rule is replaced. */
@media (min-width: 601px){
  .bento{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
  .bento-tile--hero{ grid-column:span 4; }
  .bento-tile--half{ grid-column:span 2; }
}

/* Procurement tile: warm plate, stage on the right, floating cards on the left. */
.bento-tile--sand{
  background:
    radial-gradient(90% 120% at 0% 0%, #fdf3ea 0%, rgba(253,243,234,0) 55%),
    radial-gradient(80% 100% at 100% 100%, #f1eee9 0%, rgba(241,238,233,0) 60%),
    #f7f6f4 !important;
}
.bento-tile--sand .bento-media--live{
  background:transparent !important;
  padding:0 !important;
  min-height:0 !important;
  aspect-ratio:auto !important;
  display:block !important;
  overflow:hidden !important;
  width:100% !important;
  height:auto;
}
.pc-art{ position:absolute; left:0; top:0; transform-origin:0 0; font-family:Inter, Roboto, system-ui, sans-serif; color:#1d1d1f; visibility:hidden; }
.bento-tile--sand .bento-media--live{ aspect-ratio:936 / 380; }
.pc-holder{ position:absolute; overflow:hidden; border-radius:16px; background:#fff; }
.pc-frame{
  position:absolute;
  left:0;
  top:0;
  width:1200px;
  height:640px;
  border:0;
  transform-origin:top left;
  pointer-events:none;
  background:#fff;
}
.pc-card{
  position:absolute;
  z-index:5;
  background:#fff;
  border-radius:calc(var(--u) * 14px);
  box-shadow:0 1px 2px rgba(60,55,45,0.08), 0 calc(var(--u) * 10px) calc(var(--u) * 24px) calc(var(--u) * -8px) rgba(60,55,45,0.2);
  white-space:nowrap;
  line-height:1.25;
}
.pc-bubble{ padding:calc(var(--u) * 12px) calc(var(--u) * 16px); font-size:calc(var(--u) * 15px); font-weight:500; letter-spacing:-0.01em; }
.pc-row{ display:flex; align-items:center; gap:calc(var(--u) * 12px); padding:calc(var(--u) * 12px) calc(var(--u) * 14px); }
.pc-row .ico{ width:calc(var(--u) * 36px); height:calc(var(--u) * 36px); flex:none; display:grid; place-items:center; border-radius:calc(var(--u) * 9px); background:#f4f3f1; }
.pc-row .ico svg{ width:calc(var(--u) * 20px); height:calc(var(--u) * 20px); }
.pc-row .txt{ display:flex; flex-direction:column; gap:calc(var(--u) * 3px); }
.pc-row b{ font-size:calc(var(--u) * 13.5px); font-weight:600; letter-spacing:-0.01em; }
.pc-row i{ font-style:normal; font-size:calc(var(--u) * 12px); color:#6b6b6b; }
.pc-row .add{ margin-left:calc(var(--u) * 8px); font-size:calc(var(--u) * 12.5px); font-weight:500; padding:calc(var(--u) * 6px) calc(var(--u) * 12px); border:1px solid #d9d9d9; border-radius:calc(var(--u) * 8px); }
.pc-steps{ padding:calc(var(--u) * 12px) calc(var(--u) * 16px); display:flex; flex-direction:column; gap:calc(var(--u) * 8px); font-size:calc(var(--u) * 13px); }
.pc-steps p{ margin:0; display:flex; align-items:center; gap:calc(var(--u) * 8px); color:#1d1d1f; }
.pc-steps p.dim{ color:#8a8680; }
.pc-steps svg{ width:calc(var(--u) * 16px); height:calc(var(--u) * 16px); flex:none; }
.pc-star{ position:absolute; z-index:3; opacity:0.4; }
.pc-art[data-mode="d"] .pc-bubble{ left:44px; top:52px; transform:rotate(-2deg); }
.pc-art[data-mode="d"] .pc-steps{ left:64px; top:128px; transform:rotate(1deg); }
.pc-art[data-mode="d"] .pc-row{ left:150px; top:270px; transform:rotate(-1deg); }
.pc-art[data-mode="d"] .pc-star.s1{ left:36px; top:236px; width:18px; height:18px; }
.pc-art[data-mode="d"] .pc-star.s2{ left:900px; top:14px; width:16px; height:16px; }
.pc-art[data-mode="m"] .pc-bubble{ left:10px; top:14px; transform:rotate(-2deg); }
.pc-art[data-mode="m"] .pc-steps{ display:none; }
.pc-art[data-mode="m"] .pc-row{ left:16px; top:214px; transform:rotate(1deg); }
.pc-art[data-mode="m"] .pc-star.s1{ left:300px; top:20px; width:12px; height:12px; }
.pc-art[data-mode="m"] .pc-star.s2{ display:none; }

/* One flat plate. No second rounded rectangle inside the tile. */
.bento-tile--sage .bento-media,
.bento-tile--mist .bento-media{
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
.bento-tile--sage img.bento-still{
  object-fit:cover;
  background:#f7f6f4 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

/* Case studies: one centred 640px column. Text, headings, and media share its edges. */
body.case-page{ overflow-x:hidden; }
body.case-page main.wrap{
  max-width:640px;
  padding-left:0;
  padding-right:0;
}
.article-head{
  width:min(640px, 100%);
  margin-left:auto;
  margin-right:auto;
}
.article-head .case-crumb{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  margin:8px 0 14px;
  font-size:14px;
  line-height:1.4;
  color:var(--ink-2);
  text-align:center;
}
.article-head .case-crumb a{ color:inherit; text-decoration:none; }
.article-head h1{
  text-align:center;
}
.article-meta{
  margin:14px 0 0;
  font-size:14px;
  line-height:1.5;
  color:var(--ink-2);
  text-align:center;
}
body.note-page .article-head h1{
  font-size:48px;
  font-weight:590;
  letter-spacing:-0.022em;
  line-height:1;
  text-align:center;
}
@media (max-width:678px){
  body.note-page main.note.wrap{ padding-left:19px; padding-right:19px; }
  body.note-page .article-head h1{ font-size:32px; line-height:1.125; }
}
body.case-page h1,
body.case-page h1:has(> .back){
  display:block;
  width:100%;
  max-width:none;
  margin:0 0 28px;
  text-align:center;
}
body.case-page h1 > .back{ display:none; }
body.case-page .media,
body.case-page .demo-stage,
body.case-page figure,
body.case-page .hero,
body.case-page .text,
body.case-page .outcome,
body.case-page .meta,
body.case-page .case-end,
body.case-page .claim,
body.case-page figcaption{
  width:100%;
  max-width:none;
  margin-left:0;
  margin-right:0;
  text-align:left;
}
body.case-page .claim,
body.case-page .text > .label,
body.case-page .beat.text > .label{
  margin:0 0 30px;
}
body.case-page figcaption{ text-align:left; margin-top:8px; }
body.case-page .demo-stage,
body.case-page .media:not(.media--phone){
  border-radius:var(--media-radius);
  overflow:hidden;
  border:0;
}
body.case-page .hero:not(.media--phone){
  border-radius:var(--media-radius);
  overflow:hidden;
  border:0;
}
body.case-page .hero img,
body.case-page .media:not(.media--phone) img,
body.case-page .demo-stage{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
}
body.case-page .hero.media--phone,
body.case-page figure:has(.media--phone){
  background:#f7f6f4;
  border-radius:var(--media-radius);
  overflow:hidden;
  padding:28px 16px 16px;
}
body.case-page .media--phone{
  width:100%;
  max-width:none;
  height:520px;
  background:transparent;
  aspect-ratio:auto;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:0;
}
body.case-page .pair .media--phone{ height:460px; }
body.case-page .pair{
  position:static;
  width:100%;
  max-width:none;
}
@media (max-width:678px){
  body.case-page main.wrap{
    max-width:none;
    width:auto;
    padding-left:19px;
    padding-right:19px;
  }
}
@media (max-width: 600px){
  .bento-media--live .a2ui{
    grid-template-columns:minmax(190px, 250px) minmax(0, 1fr);
    gap:14px;
  }
  .bento-media--live .a2ui-chat{ justify-content:flex-end; padding-bottom:0; }
  .bento-media--live .product-row--later{ display:grid; }
  .bento-media--live .product-row{ grid-template-columns:36px minmax(0, 1fr) auto; align-items:center; }
  .bento-media--live .product-buy{ grid-column:auto; }
  .bento-media--live .product-title{ font-size:13px; }
}

/* Phone shots share a height on the neutral plate. */
.media{ border:0; background:#f7f6f4; }
.media--phone{
  aspect-ratio:auto;
  min-height:0;
  background:#f7f6f4;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:16px 0;
}
.media--phone .handset,
.media--phone .phone{
  height:480px;
  width:calc(480px * 0.465);
  max-width:100%;
}
figcaption, .cs-caption{ margin-top:8px; text-align:left; }

body.note-page .note-index .thinking-thumb{ display:none !important; }
body.note-page .note-index .note-list a,
body.note-page .note-index .note-list a:has(.thinking-thumb){
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  grid-template-columns:none;
  width:100%;
  min-width:0;
  text-align:left;
}
body.note-page .note-index .note-list li,
body.note-page .note-index .note-list li:has(.thinking-thumb){
  align-items:start;
}
body.note-page .note-list li{ border-top:1px solid var(--line); border-bottom:0; }

.cs-chapter-num{ display:none; }
.cs-snapshot-cta{ margin-top:24px; }
.cs-caption{ margin:8px 0 0; font-size:14px; color:#6b6b6b; }

/* One radius on the picture itself, so a square frame cannot show behind it. */
.bento-media,
.bento-tile--sage .bento-media,
.bento-tile--mist .bento-media,
.bento-media img.bento-still,
.bento-tile--sage img.bento-still,
.pc-holder,
.thinking-thumb,
.thinking-thumb img,
.thinking-thumb video{
  border-radius:var(--media-radius) !important;
  overflow:hidden;
}
body.case-page .media--phone{
  border-radius:var(--media-radius);
  border:0;
}
body.case-page .hero:not(.media--phone) img,
body.case-page .media:not(.media--phone) img,
body.case-page .demo-stage img,
body.case-page .demo-stage video,
body.case-page figure img,
body.case-page figure video{
  border-radius:var(--media-radius);
  overflow:hidden;
}
body.case-page .handset img,
body.case-page .handset video,
body.case-page .handset__screen{
  border-radius:0;
}
body.note-page .note-body img,
body.note-page .note-body video,
body.note-page .latch-fit,
body.note-page .demo-stage,
body.note-page .note-figure,
body.note-page figure img,
body.note-page figure video,
body.note-page .thinking-thumb img,
body.note-page .thinking-thumb video{
  border-radius:var(--media-radius);
  overflow:hidden;
}
body.note-page .handset img,
body.note-page .handset video{ border-radius:0; }

/* Case info block. Sits under the title, inside the 640 column. */
.sx-info{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:16px 24px;
  margin:28px 0 0;
  padding:18px 0;
  border-top:1px solid #e6e4df;
  border-bottom:1px solid #e6e4df;
  text-align:left;
}
.sx-info div{ min-width:0; }
.sx-info dt{ font-size:12px; line-height:1.4; letter-spacing:0.02em; color:#8a8680; margin:0 0 4px; }
.sx-info dd{ margin:0; font-size:14px; line-height:1.45; color:#1d1d1f; }
@media (max-width:600px){ .sx-info{ grid-template-columns:1fr 1fr; } }

/* Phone pairs stay in the text column. Plates size the handset; the screen clips the shot. */
.sx-plate{
  position:relative;
  background:#f7f6f4;
  border-radius:16px;
  overflow:hidden;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:48px 16px 28px;
}
.sx-plate .sx-tag{
  position:absolute;
  left:16px;
  top:14px;
  font-size:13px;
  line-height:1;
  color:#6b6b6b;
  background:#fff;
  padding:6px 10px;
  border-radius:999px;
}
.sx-gallery .sx-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.sx-gallery .sx-plate{ --ph:520px; }
.sx-plate .handset{
  height:var(--ph,520px) !important;
  width:calc(var(--ph,520px) * 0.465) !important;
  max-width:100%;
}
.sx-plate .handset__device{ height:100%; }
.sx-plate .media{
  container-type:normal !important;
  height:auto !important;
  overflow:visible !important;
  background:transparent !important;
  padding:0 !important;
  border-radius:0 !important;
}
body.case-page figure.sx-gallery{
  width:100% !important;
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
  margin-top:28px !important;
  background:transparent !important;
  padding:0 !important;
  border-radius:0 !important;
  overflow:visible !important;
}
@media (max-width:678px){
  .sx-gallery .sx-grid{ grid-template-columns:1fr; gap:12px; }
  .sx-gallery .sx-plate{ --ph:min(540px, calc((100vw - 70px) / 0.465)); }
}
body.case-page .hero.sx-hero{
  background:#fff;
  box-shadow:none;
  border-radius:16px;
  overflow:hidden;
}
body.case-page .hero.sx-hero img{
  border-radius:16px;
  outline:1px solid #e3e1dc;
  outline-offset:-1px;
}
body.case-page .handset__screen{
  border-radius:6.2% / 2.8%;
  overflow:hidden;
}
body.case-page .handset__screen img,
body.case-page .handset__screen video{
  border-radius:0 !important;
  object-fit:cover;
}
body.case-page .handset__screen img.is-screen{ object-fit:fill; }

/* Mobile homepage: cards-only close-up. Desktop keeps the animated stage. */
.pcm{ display:none; }
@media (max-width:600px){
  .bento-tile--sand .bento-media--live{ height:auto !important; aspect-ratio:auto !important; }
  .bento-tile--sand .pc-art{ display:none !important; }
  .pcm{
    display:block;
    width:100%;
    align-self:stretch;
    position:relative;
    height:298px;
    overflow:hidden;
    font-family:Inter, Roboto, system-ui, sans-serif;
    color:#1d1d1f;
  }
  .pcm .c{
    position:absolute;
    z-index:5;
    background:#fff;
    border-radius:14px;
    white-space:nowrap;
    line-height:1.25;
    box-shadow:0 1px 2px rgba(60,55,45,0.08), 0 10px 24px -8px rgba(60,55,45,0.2);
  }
  .pcm .bub{ padding:11px 15px; font-size:15px; font-weight:500; letter-spacing:-0.01em; right:16px; top:22px; transform:rotate(-2deg); }
  .pcm .steps{ padding:12px 16px; display:flex; flex-direction:column; gap:8px; font-size:13.5px; left:16px; top:92px; transform:rotate(1deg); }
  .pcm .steps p{ margin:0; display:flex; align-items:center; gap:8px; }
  .pcm .steps p.dim{ color:#8a8680; }
  .pcm .steps svg{ width:16px; height:16px; flex:none; }
  .pcm .row{ display:flex; align-items:center; gap:10px; padding:12px 14px; left:14px; right:14px; top:206px; transform:rotate(-1deg); white-space:normal; }
  .pcm .row .ico{ width:36px; height:36px; flex:none; display:grid; place-items:center; border-radius:9px; background:#f4f3f1; }
  .pcm .row .ico svg{ width:20px; height:20px; }
  .pcm .row .txt{ display:flex; flex-direction:column; gap:3px; flex:1; min-width:0; }
  .pcm .row b{ font-size:13px; font-weight:600; letter-spacing:-0.01em; white-space:normal; }
  .pcm .row i{ font-style:normal; font-size:12px; color:#6b6b6b; white-space:nowrap; }
  .pcm .row .add{ flex:none; align-self:center; margin-left:0; font-size:12.5px; font-weight:500; padding:6px 12px; border:1px solid #d9d9d9; border-radius:8px; }
  .pcm .star{ position:absolute; z-index:3; opacity:0.4; }
  .pcm .s1{ left:22px; top:30px; width:16px; height:16px; }
  .pcm .s2{ right:34px; top:128px; width:14px; height:14px; }
}