/* Project Unify -------------------------------------------------------------

   Research case study: should Stessa and Mynd become one product? Most of the
   page chrome comes from case-study.css; what lives here is this page's own
   rhythm plus the product recreations, which are Stessa and Mynd surfaces in
   their own palette and typeface and are fenced from the drift audit.

   The audit reads values as literal strings, so the fences below
   (`/ * product-ui * /`) are load-bearing and CSS minification must stay off.
   -------------------------------------------------------------------------- */

/* Antialiasing follows the product surfaces: the recreations are rendered the
   way the real apps render them, not the way the site's own type is set. */
[data-antialias] {
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Section rhythm ----------------------------------------------------------- */

.pu-background { gap:26px; }
.pu-lede { gap:28px; }
.pu-risk { gap:22px; }
.pu-statement { text-wrap:pretty; }
.pu-problem {
  padding:clamp(80px, 12vw, 136px) max(clamp(24px, 6vw, 80px), calc((100% - 1280px) / 2)) 0;
}

/* Demo --------------------------------------------------------------------- */

.pu-demo-stack { display:flex; flex-direction:column; gap:14px; }
.pu-demo {
  height:min(1140px, 96vh);
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 0 0 1px #E9E9E6, 0 18px 44px rgba(27, 48, 42, 0.10);
  background:#F9F8F5;
}
.pu-demo iframe { display:block; width:100%; height:100%; border:0; }

/* The comparison card ------------------------------------------------------ */
/* Two cards whose rows line up with each other. The rows are not a shared
   table: each card is its own grid, and both opt into the parent's rows with
   `grid-template-rows: subgrid`, so a long label on one side pushes the
   matching row down on both. The container query below, not a media query,
   collapses it to one column - it is the card's own width that decides,
   because it sits in a pair whose column is narrower than the viewport. */

.pu-question {
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  row-gap:34px;
  padding:clamp(80px, 12vw, 136px) max(clamp(24px, 6vw, 80px), calc((100% - 1280px) / 2)) 0;
}

.pu-splitwrap { min-width:0; container-type:inline-size; }

.pu-split {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  grid-template-rows:auto auto repeat(5, minmax(45px, auto));
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 0 0 1px #E9E9E6, 0 8px 22px rgba(27, 48, 42, 0.10);
}

/* product-ui */
.pu-ccard {
  background:#FFFFFF;
  display:grid;
  grid-row:1 / span 7;
  grid-template-rows:subgrid;
  row-gap:12px;
  padding:24px 22px 22px;
}
.pu-ccard--right { border-left:1px solid #E9E9E6; }

.pu-lockup { display:block; }
.pu-lockup--stessa { width:104px; height:28px; }
.pu-lockup--mynd {
  width:109px;
  height:28px;
  object-fit:contain;
  object-position:left center;
}

.pu-ccard__label {
  font-family:'Figtree', sans-serif;
  font-weight:500;
  font-size:16px;
  line-height:1.3;
  min-height:21px;
}
.pu-ccard__label--stessa { color:#1C7DA0; }
.pu-ccard__label--mynd { color:#008D5B; }

.pu-crows {
  display:grid;
  grid-row:3 / span 5;
  grid-template-rows:subgrid;
  row-gap:0;
}
.pu-crow { display:flex; flex-direction:column; padding:11px 0; }
.pu-crow--ruled { border-top:1px solid #E9E9E6; }
.pu-crow__text {
  font-size:15.5px;
  line-height:1.45;
  color:#011526;
  font-weight:300;
}
/* /product-ui */

/* Once the card itself is narrow the two columns stack, and each card's rows
   go back to flowing on their own rather than lining up with a sibling that
   is no longer beside them. */
@container (max-width: 400px) {
  .pu-split { grid-template-columns:minmax(0, 1fr) !important; grid-template-rows:none !important; }
  .pu-split > .pu-ccard { grid-row:auto !important; grid-template-rows:none !important; }
  .pu-split > .pu-ccard + .pu-ccard { border-left:none !important; border-top:1px solid #E9E9E6 !important; }
  .pu-split .pu-crows { grid-row:auto !important; grid-template-rows:none !important; grid-auto-rows:minmax(45px, auto); }
}

/* My role ------------------------------------------------------------------ */

.pu-role { gap:44px; }

.pu-steps {
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  align-items:stretch;
  gap:16px;
}
.pu-step {
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:12px;
  padding:34px 20px;
  border-radius:12px;
  background:#FFFFFF;
  box-shadow:0 0 0 1px #E9E9E6, 0 8px 22px rgba(27, 48, 42, 0.10);
}
.pu-step__icon { flex:none; display:block; color:#4E625B; }
/* The first icon is drawn 21px against the others' 19px; the negative margin
   keeps every card's title on the same line regardless. */
.pu-step__icon--tall { margin:-1px 0; }
.pu-step__title {
  font-family:'Figtree', sans-serif;
  font-weight:500;
  font-size:16px;
  color:#1B302A;
}
.pu-step__desc {
  font-size:14px;
  line-height:1.5;
  color:#647670;
  font-weight:300;
  max-width:19ch;
  text-wrap:balance;
}

/* How each segment worked today -------------------------------------------- */

.pu-segments { gap:0; margin-top:clamp(80px, 12vw, 136px); }
.pu-segments__head { gap:28px; }
.pu-study { grid-template-columns:minmax(0, 0.75fr) minmax(0, 1.25fr); row-gap:34px; padding-top:clamp(80px, 12vw, 136px); }
.pu-patterns { padding-top:clamp(80px, 12vw, 136px); }
.pu-accuracy { grid-template-columns:minmax(0, 1fr) auto; row-gap:34px; padding-top:clamp(80px, 12vw, 136px); }

/* product-ui */
.pu-sample {
  display:flex;
  flex-direction:column;
  padding:28px 30px;
  border-radius:16px;
  background:#FFFFFF;
  box-shadow:0 0 0 1px #E4E1EE, 0 8px 22px rgba(27, 48, 42, 0.10);
}
.pu-sample__label {
  font-family:'Figtree', sans-serif;
  font-weight:500;
  font-size:11.5px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:#647670;
}
/* The bar is the split itself: 7 Stessa to 8 Mynd, drawn to scale. */
.pu-sample__bar { display:grid; grid-template-columns:7fr 8fr; gap:5px; padding:14px 0 12px; }
.pu-sample__seg { height:12px; }
.pu-sample__seg--stessa { border-radius:6px 0 0 6px; background:#19465D; }
.pu-sample__seg--mynd { border-radius:0 6px 6px 0; background:#38B87C; }
.pu-sample__legend { display:grid; grid-template-columns:7fr 8fr; gap:5px; }
.pu-sample__legend-item { font-size:14.5px; line-height:1.5; color:#647670; }
.pu-sample__row {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:18px;
  padding-top:16px;
  margin-top:16px;
  border-top:1px solid #E4E1EE;
}
.pu-sample__key { font-size:14.5px; line-height:1.5; color:#647670; }
.pu-sample__val {
  font-family:'Figtree', sans-serif;
  font-weight:500;
  font-size:19px;
  color:#1B302A;
  white-space:nowrap;
}
/* /product-ui */

.pu-quote {
  margin:0;
  width:fit-content;
  max-width:100%;
  justify-self:start;
  padding:52px 48px 44px;
  border-radius:14px;
  background:#FFFFFF;
  box-shadow:0 0 0 1px #E4E1EE, 0 8px 22px rgba(27, 48, 42, 0.10);
  display:flex;
  flex-direction:column;
  gap:34px;
}
.pu-quote__text {
  margin:0;
  font-family:'Figtree', sans-serif;
  font-weight:400;
  font-size:clamp(20px, 2.2vw, 24px);
  line-height:1.68;
  letter-spacing:-0.005em;
  color:#1B302A;
  max-width:9.6em;
  text-wrap:balance;
}
.pu-quote__cite {
  font-family:'Figtree', sans-serif;
  font-weight:500;
  font-size:12px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:#647670;
  padding-top:26px;
  border-top:1px solid #E4E1EE;
}

/* Action over browsing: the three prototype cards ------------------------- */
/* Stessa/Mynd surfaces, so Instrument Sans and their palette, not ours. The
   whole block is inside a product-ui fence and exempt from the drift audit.
   Values lifted from the design file by script rather than retyped. */

.pu-action { gap:44px; }

/* product-ui */
.pu-cards {
  display:grid;
  grid-template-columns:repeat(3, minmax(0,380px));
  justify-content:space-between;
  gap:clamp(24px, 3vw, 48px);
  align-items:stretch;
}
.pu-card {
  width:100%;
  box-sizing:border-box;
  background:#FFFFFF;
  border-radius:15px;
  box-shadow:0 0 0 1px #E9E9E6, 0 8px 22px rgba(27,48,42,0.10);
  overflow:hidden;
  font-family:'Instrument Sans',system-ui,sans-serif;
  color:#1C1B18;
  text-align:left;
}
.pu-card__head {
  display:flex;
  align-items:center;
  gap:6px;
  padding:15px 16px 0;
}
.pu-card__title {
  font-size:14px;
  font-weight:500;
  color:#2E2C26;
  letter-spacing:-0.1px;
}
.pu-card__info {
  width:30px;
  height:30px;
  margin:-8px 0 -8px -8px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.pu-ico {
  display:block;
}
.pu-card__count {
  padding:8px 16px 0;
  font-size:26px;
  font-weight:600;
  letter-spacing:-0.7px;
  line-height:32px;
}
.pu-card__body {
  padding-bottom:1px;
}
.pu-appr {
  display:flex;
  align-items:center;
  gap:11px;
  padding:16px 16px 10px;
}
.pu-avatar {
  flex:none;
  width:30px;
  height:30px;
  border-radius:50%;
  background:#F1F0EC;
  display:flex;
  align-items:center;
  justify-content:center;
}
.pu-lines {
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.pu-lines__title {
  font-size:13.5px;
  font-weight:600;
}
.pu-lines__sub {
  font-size:12px;
  color:#5C594F;
}
.pu-lines__amount {
  font-size:13.5px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
}
.pu-chevron {
  display:block;
  flex:none;
  transform:rotate(180deg);
}
.pu-appr__detail {
  padding:9px 16px 14px;
}
.pu-note {
  margin:0;
  font-size:12.5px;
  color:#2E2C26;
  line-height:19.4px;
}
.pu-ledger {
  display:flex;
  flex-direction:column;
  padding:4px 0 6px;
  margin:11px 0 4px;
}
.pu-ledger__row {
  display:flex;
  align-items:baseline;
  gap:10px;
  padding:4px 0;
}
.pu-ledger__key {
  flex:1;
  font-size:12.5px;
  color:#2E2C26;
}
.pu-ledger__sign {
  width:11px;
  font-size:12.5px;
  color:#2E2C26;
}
.pu-ledger__val {
  font-size:12.5px;
  color:#2E2C26;
  font-variant-numeric:tabular-nums;
}
.pu-ledger__row--total {
  display:flex;
  align-items:baseline;
  gap:10px;
  padding-top:9px;
  margin-top:6px;
  border-top:1px solid #F2EFE8;
}
.pu-ledger__key--total {
  flex:1;
  font-size:12.5px;
  font-weight:600;
}
.pu-ledger__sign--blank {
  width:11px;
}
.pu-note--after {
  margin:11px 0 0;
  font-size:12.5px;
  color:#2E2C26;
  line-height:19.4px;
}
.pu-actions {
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:4px 16px 20px;
}
.pu-btn--pay {
  padding:12px;
  border-radius:999px;
  background:#17805A;
  color:#FFFFFF;
  font-size:13.5px;
  font-weight:600;
  text-align:center;
}
.pu-btn--msg {
  padding:11px;
  border-radius:999px;
  background:#FFFFFF;
  border:1px solid #DCD7CA;
  color:#2E2C26;
  font-size:13.5px;
  font-weight:600;
  text-align:center;
}
.pu-rule {
  margin:0 16px;
  border-top:1px solid #EDE8DC;
}
.pu-maint {
  display:flex;
  align-items:center;
  gap:11px;
  padding:16px;
}
.pu-ico--fixed {
  display:block;
  flex:none;
}
.pu-card__body--tight {
  padding-bottom:5px;
}
.pu-mrow {
  display:flex;
  align-items:center;
  gap:11px;
  padding:12px 16px;
}
.pu-mrow__text {
  flex:1;
  min-width:0;
  font-size:13px;
  color:#2E2C26;
}
.pu-mrow__count {
  min-width:22px;
  height:22px;
  box-sizing:border-box;
  padding:0 6px;
  border-radius:11px;
  background:#F1F0EC;
  font-size:11.5px;
  font-weight:600;
  color:#2E2C26;
  line-height:22px;
  text-align:center;
  font-variant-numeric:tabular-nums;
}
.pu-mrow--last {
  display:flex;
  align-items:center;
  gap:11px;
  padding:12px 16px 8px;
}
.pu-jobs {
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:14px 16px;
}
.pu-job {
  padding:13px 14px 15px;
  border:1px solid #E9E4D9;
  border-radius:12px;
  background:#FFFFFF;
}
.pu-job__head {
  display:flex;
  align-items:center;
  gap:9px;
}
.pu-job__icon {
  flex:none;
  width:26px;
  height:26px;
  border-radius:50%;
  background:#F1F0EC;
  display:flex;
  align-items:center;
  justify-content:center;
}
.pu-job__title {
  flex:1;
  font-size:13px;
  font-weight:600;
}
.pu-steps-bar {
  display:flex;
  gap:4px;
  margin-top:20px;
}
.pu-seg--done {
  flex:1;
  height:6px;
  border-radius:3px;
  background:#17805A;
}
.pu-seg--now {
  flex:1;
  height:6px;
  border-radius:3px;
  background:#F0BE20;
}
.pu-seg--todo {
  flex:1;
  height:6px;
  border-radius:3px;
  background:#EDE8DC;
}
.pu-job__status {
  display:flex;
  align-items:baseline;
  gap:10px;
  margin-top:8px;
}
.pu-job__stage {
  flex:1;
  font-size:12px;
  font-weight:600;
}
.pu-job__of {
  font-size:11.5px;
  color:#6E6B62;
}
.pu-job__note {
  margin:15px 0 0;
  font-size:12.5px;
  color:#2E2C26;
  line-height:19.4px;
}
.pu-card--notif {
  width:100%;
  display:flex;
  flex-direction:column;
  box-sizing:border-box;
  background:#FFFFFF;
  border-radius:15px;
  box-shadow:0 0 0 1px #E9E9E6, 0 8px 22px rgba(27,48,42,0.10);
  overflow:hidden;
  font-family:'Instrument Sans',system-ui,sans-serif;
  color:#1C1B18;
  text-align:left;
}
.pu-notif--roomy {
  flex:1 1 auto;
  display:flex;
  flex-wrap:wrap;
  align-content:center;
  align-items:flex-start;
  gap:12px;
  padding:16px;
  border-bottom:1px solid #EDE8DC;
}
.pu-notif__avatar {
  position:relative;
  flex:none;
  width:30px;
  height:30px;
  border-radius:50%;
  background:#F1F0EC;
  display:flex;
  align-items:center;
  justify-content:center;
}
.pu-notif__dot {
  position:absolute;
  top:-1px;
  right:-1px;
  width:11px;
  height:11px;
  box-sizing:border-box;
  border-radius:50%;
  background:#BE3A4B;
  border:2px solid #FFFFFF;
}
.pu-notif__body {
  flex:1;
  min-width:0;
}
.pu-notif__title {
  font-size:14px;
  line-height:20.3px;
  font-weight:600;
  color:#1C1B18;
}
.pu-notif__meta {
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:6px;
}
.pu-tag--urgent {
  padding:2px 8px;
  border-radius:999px;
  background:#F7E1E4;
  font-size:10.5px;
  font-weight:600;
  color:#9E2B3C;
  letter-spacing:0.2px;
}
.pu-notif__title--plain {
  font-size:14px;
  line-height:20.3px;
  color:#2E2C26;
}
.pu-notif__when {
  font-size:12px;
  color:#6E6B62;
}
.pu-notif--last {
  flex:1 1 auto;
  display:flex;
  flex-wrap:wrap;
  align-content:center;
  align-items:flex-start;
  gap:12px;
  padding:16px;
}
/* /product-ui */

/* A dashboard users could reshape: the Customize sheet --------------------- */

.pu-reshape {
  grid-template-columns:minmax(0, 1fr) minmax(0, min(380px, calc((100% - 2 * clamp(24px, 3vw, 48px)) / 3)));
  row-gap:34px;
  padding:clamp(80px, 12vw, 136px) max(clamp(24px, 6vw, 80px), calc((100% - 1280px) / 2)) 0;
}
.pu-rowmatch { min-width:0; }

/* product-ui */
.pu-sheetwrap {
  display:flex;
  justify-content:center;
}
.pu-sheet {
  width:100%;
  box-sizing:border-box;
  background:#FFFFFF;
  border-radius:22px;
  box-shadow:0 0 0 1px #E9E9E6, 0 8px 22px rgba(27,48,42,0.10);
  overflow:hidden;
  font-family:'Instrument Sans',system-ui,sans-serif;
  color:#1C1B18;
  text-align:left;
}
.pu-sheet__grip-row {
  display:flex;
  justify-content:center;
  padding:8px 0 0;
}
.pu-sheet__grip {
  width:36px;
  height:5px;
  border-radius:3px;
  background:#DEDBD2;
}
.pu-sheet__head {
  padding:14px 20px;
  text-align:center;
}
.pu-sheet__title {
  font-size:17.5px;
  font-weight:600;
  color:#1C1B18;
  letter-spacing:-0.015em;
}
.pu-sheet__sub {
  font-size:13px;
  color:#6B6A62;
  margin-top:3px;
  line-height:1.45;
}
.pu-sheet__list {
  border-top:1px solid #F2EFE8;
  padding-bottom:8px;
}
.pu-srow {
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 16px;
  height:48px;
  border-bottom:1px solid #F2EFE8;
}
.pu-srow__check {
  flex:none;
  width:20px;
  height:20px;
  box-sizing:border-box;
  border-radius:5px;
  background:#1C1B18;
  border:1px solid #1C1B18;
  display:flex;
  align-items:center;
  justify-content:center;
}
.pu-ico {
  display:block;
}
.pu-srow__label {
  flex:1;
  min-width:0;
  font-size:14px;
  color:#1C1B18;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.pu-ico--fixed {
  display:block;
  flex:none;
}
.pu-srow--last {
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 16px;
  height:48px;
}
/* /product-ui */

/* Portfolio to property: the chart, picker and scoped chart ---------------- */
/* Each plot point keeps its own left/top inline - those are the data, not a
   design decision, and thirty-six coordinates are not thirty-six tokens. */

/* product-ui */
.pu-flow {
  display:grid;
  grid-template-columns:minmax(0,380px) 0 minmax(0,380px) 0 minmax(0,380px);
  justify-content:space-between;
  gap:clamp(12px, 1.5vw, 24px);
  align-items:stretch;
}
.pu-fcard {
  width:100%;
  box-sizing:border-box;
  background:#FFFFFF;
  border-radius:15px;
  box-shadow:0 0 0 1px #E9E9E6, 0 8px 22px rgba(27,48,42,0.10);
  overflow:hidden;
  font-family:'Instrument Sans',system-ui,sans-serif;
  color:#1C1B18;
  text-align:left;
}
.pu-fcard__head {
  display:flex;
  align-items:center;
  gap:6px;
  padding:15px 16px 0;
}
.pu-fcard__title {
  font-size:14px;
  font-weight:500;
  color:#2E2C26;
}
.pu-fcard__info {
  width:30px;
  height:30px;
  margin:-8px 0 -8px -8px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.pu-ico {
  display:block;
}
.pu-fcard__body {
  padding:4px 16px 15px;
}
.pu-fcard__figure {
  font-size:26px;
  font-weight:600;
  letter-spacing:-0.02em;
  font-variant-numeric:tabular-nums;
}
.pu-fcard__period {
  font-size:12.5px;
  color:#5C594F;
  margin-top:3px;
}
.pu-chartwrap {
  margin:14px 0 10px;
}
.pu-chart {
  position:relative;
  height:230px;
}
.pu-chart__svg {
  position:absolute;
  inset:0;
  display:block;
  overflow:visible;
}
.pu-chart__ylabel {
  position:absolute;
  font-size:10px;
  line-height:10px;
  white-space:nowrap;
  color:#5C594F;
}
.pu-chart__xlabel {
  position:absolute;
  font-size:10px;
  line-height:10px;
  white-space:nowrap;
  transform:translateX(-50%);
  color:#5C594F;
  font-weight:400;
}
.pu-chart__xlabel--now {
  position:absolute;
  font-size:10px;
  line-height:10px;
  white-space:nowrap;
  transform:translateX(-50%);
  color:#1C1B18;
  font-weight:700;
}
.pu-point--expense {
  position:absolute;
  width:7px;
  height:7px;
  box-sizing:border-box;
  border-radius:50%;
  border:1.8px solid #BE3A4B;
  background:#FFFFFF;
  transform:translate(-50%,-50%);
}
.pu-point--expense-on {
  position:absolute;
  width:7px;
  height:7px;
  box-sizing:border-box;
  border-radius:50%;
  border:1.8px solid #BE3A4B;
  background:#BE3A4B;
  transform:translate(-50%,-50%);
}
.pu-point--income {
  position:absolute;
  width:7px;
  height:7px;
  box-sizing:border-box;
  border-radius:50%;
  border:1.8px solid #17805A;
  background:#FFFFFF;
  transform:translate(-50%,-50%);
}
.pu-point--income-on {
  position:absolute;
  width:7px;
  height:7px;
  box-sizing:border-box;
  border-radius:50%;
  border:1.8px solid #17805A;
  background:#17805A;
  transform:translate(-50%,-50%);
}
.pu-legend {
  display:flex;
  align-items:center;
  gap:16px;
}
.pu-legend__item {
  display:flex;
  align-items:center;
  gap:7px;
}
.pu-legend__swatch--income {
  flex:none;
  width:14px;
  height:2px;
  border-radius:1px;
  background:#17805A;
}
.pu-legend__label {
  font-size:11.5px;
  color:#5C594F;
}
.pu-legend__swatch--expense {
  flex:none;
  width:14px;
  height:2px;
  border-radius:1px;
  background:#BE3A4B;
}
.pu-ftable__caption {
  font-size:13px;
  font-weight:600;
  margin-top:20px;
}
.pu-ftable {
  margin-top:12px;
}
.pu-ftable__row--first {
  display:flex;
  align-items:baseline;
  gap:12px;
  padding:0 0 9px;
}
.pu-ftable__key {
  flex:1;
  min-width:0;
  font-size:12.5px;
  font-weight:400;
  color:#5C594F;
}
.pu-ftable__val {
  flex:none;
  font-size:12.5px;
  font-weight:400;
  color:#1C1B18;
  font-variant-numeric:tabular-nums;
}
.pu-ftable__row {
  display:flex;
  align-items:baseline;
  gap:12px;
  padding:9px 0;
  border-top:1px solid #F2EFE8;
}
.pu-ftable__row--net {
  display:flex;
  align-items:baseline;
  gap:12px;
  padding:11px 0 2px;
  border-top:1px solid #E9E4D9;
}
.pu-ftable__key--net {
  flex:1;
  min-width:0;
  font-size:12.5px;
  font-weight:600;
  color:#1C1B18;
}
.pu-ftable__val--net {
  flex:none;
  font-size:12.5px;
  font-weight:600;
  color:#1C1B18;
  font-variant-numeric:tabular-nums;
}
.pu-flow__arrow {
  width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#647670;
}
.pu-ico--fixed {
  display:block;
  flex:none;
}
.pu-picker {
  width:100%;
  box-sizing:border-box;
  background:#FFFFFF;
  border-radius:15px;
  box-shadow:0 0 0 1px #E9E9E6, 0 8px 22px rgba(27,48,42,0.10);
  overflow:hidden;
  font-family:'Instrument Sans',system-ui,sans-serif;
  color:#1C1B18;
  text-align:left;
  display:flex;
  flex-direction:column;
}
.pu-picker__grip-row {
  display:flex;
  justify-content:center;
  padding:8px 0 0;
}
.pu-picker__grip {
  width:36px;
  height:5px;
  border-radius:3px;
  background:#DEDBD2;
}
.pu-picker__title {
  padding:14px 20px;
  text-align:center;
  font-size:17.5px;
  font-weight:600;
  color:#1C1B18;
  letter-spacing:-0.01em;
}
.pu-picker__search {
  display:flex;
  align-items:center;
  gap:10px;
  height:46px;
  padding:0 20px;
}
.pu-picker__placeholder {
  flex:1;
  min-width:0;
  font-size:15px;
  color:#8A877D;
}
.pu-picker__group {
  border-top:1px solid #F2EFE8;
}
.pu-picker__grouphead {
  padding:14px 20px 6px;
  font-size:13px;
  font-weight:600;
  color:#1C1B18;
}
.pu-picker__row--on {
  display:flex;
  align-items:center;
  gap:10px;
  padding:13px 20px;
  background:#FBFAF6;
  font-size:13.5px;
  color:#2E2C26;
}
.pu-picker__name {
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.pu-picker__row {
  padding:13px 20px;
  font-size:13.5px;
  color:#2E2C26;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
/* /product-ui */

/* AI insights -------------------------------------------------------------- */

.pu-ai-pair {
  grid-template-columns:minmax(0, min(380px, calc((100% - 2 * clamp(24px, 3vw, 48px)) / 3))) minmax(0, 1fr);
  row-gap:34px;
  padding:clamp(80px, 12vw, 136px) max(clamp(24px, 6vw, 80px), calc((100% - 1280px) / 2)) 0;
}

/* product-ui */
.pu-aiwrap {
  display:flex;
  flex-direction:column;
  width:100%;
}
.pu-ai {
  position:relative;
  z-index:2;
  width:100%;
  box-sizing:border-box;
  border-radius:15px;
  overflow:hidden;
  background:#26251F;
  box-shadow:0 0 0 1px #E9E9E6, 0 8px 22px rgba(27,48,42,0.10);
  font-family:'Instrument Sans',system-ui,sans-serif;
  text-align:left;
}
.pu-ai__media {
  position:relative;
  height:200px;
  overflow:hidden;
  background:#F1F0EC;
}
.pu-ai__badge {
  position:absolute;
  top:12px;
  left:12px;
  z-index:2;
  display:flex;
  align-items:center;
  gap:6px;
  padding:3px 9px 3px 8px;
  border-radius:999px;
  background:rgba(255,255,255,0.46);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.pu-ico {
  display:block;
}
.pu-ai__badge-text {
  font-size:10px;
  font-weight:600;
  letter-spacing:0.11em;
  text-transform:uppercase;
  color:#2E2C26;
}
.pu-ai__photo {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.pu-ai__body {
  display:flex;
  flex-direction:column;
  padding:14px 16px 15px;
}
.pu-ai__where {
  font-size:10px;
  font-weight:600;
  letter-spacing:0.09em;
  text-transform:uppercase;
  color:#B6AE9A;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.pu-ai__headline {
  display:block;
  font-size:19px;
  font-weight:600;
  letter-spacing:-0.02em;
  line-height:1.32;
  margin-top:9px;
  color:#FBFAF6;
  text-wrap:pretty;
}
/* /product-ui */

/* Shared principles, divergent workflows ---------------------------------- */

/* product-ui */
.pu-needs {
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 0 0 1px #E9E9E6, 0 8px 22px rgba(27,48,42,0.10);
}
.pu-needs__col {
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:24px 22px 22px;
  background:#FFFFFF;
}
.pu-needs__lockup-stessa {
  display:block;
  width:104px;
  height:28px;
}
.pu-needs__list {
  display:grid;
  grid-auto-rows:minmax(45px, auto);
}
.pu-needs__item {
  display:flex;
  flex-direction:column;
  padding:11px 0;
  font-size:15.5px;
  line-height:1.45;
  color:#011526;
  font-weight:300;
}
.pu-needs__item--ruled {
  display:flex;
  flex-direction:column;
  padding:11px 0;
  border-top:1px solid #E4E1EE;
  font-size:15.5px;
  line-height:1.45;
  color:#011526;
  font-weight:300;
}
.pu-needs__col--shared {
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:24px 22px 22px;
  border-left:1px solid #E4E1EE;
  background:#FBFBFA;
}
.pu-needs__shared-title {
  font-family:'Figtree',sans-serif;
  font-weight:500;
  font-size:18px;
  line-height:1.3;
  color:#011526;
  display:flex;
  align-items:center;
  min-height:28px;
}
.pu-needs__col--mynd {
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:24px 22px 22px;
  border-left:1px solid #E4E1EE;
  background:#FFFFFF;
}
.pu-needs__lockup-mynd {
  display:block;
  width:109px;
  height:28px;
  object-fit:contain;
  object-position:left center;
}
/* /product-ui */

/* Unify the product, not the experience ------------------------------------ */

.pu-unify { gap:0; margin-top:clamp(80px, 12vw, 136px); }
.pu-unify__lede { padding-top:28px; }
.pu-onetwo { grid-template-columns:minmax(0, 1fr) minmax(0, 520px); row-gap:34px; padding-top:clamp(80px, 12vw, 136px); }
.pu-custom {
  grid-template-columns:minmax(0, min(380px, calc((100% - 2 * clamp(24px, 3vw, 48px)) / 3))) minmax(0, 1fr);
  row-gap:34px;
  padding-top:clamp(80px, 12vw, 136px);
}
.pu-data { grid-template-columns:minmax(0, 1fr) minmax(0, min(520px, calc((100% - 88px) / 2))); row-gap:34px; padding-top:clamp(80px, 12vw, 136px); }
.pu-close { padding-top:clamp(80px, 12vw, 136px); }
/* Each half of the claim is its own inline block, so the line breaks at the
   comma rather than wherever the measure happens to run out. */
.pu-half { display:inline-block; }

.pu-dcard {
  box-sizing:border-box;
  width:100%;
  border-radius:12px;
  padding:30px 32px;
  background:#FFFFFF;
  box-shadow:0 0 0 1px #E9E9E6, 0 8px 22px rgba(27,48,42,0.10);
}
.pu-dcard__head {
  display:grid;
  grid-template-columns:minmax(206px,1fr) minmax(84px,104px) minmax(84px,104px);
  column-gap:20px;
  align-items:center;
  padding:0 0 14px;
}
.pu-dcard__label {
  font-family:'Figtree',sans-serif;
  font-weight:500;
  font-size:11.5px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:#647670;
}
.pu-dcard__cell {
  display:flex;
  justify-content:center;
}
.pu-dcard__lockup-stessa {
  display:block;
  width:78px;
  height:21px;
}
.pu-dcard__lockup-mynd {
  display:block;
  width:82px;
  height:21px;
  object-fit:contain;
}
.pu-dcard__row {
  display:grid;
  grid-template-columns:minmax(206px,1fr) minmax(84px,104px) minmax(84px,104px);
  column-gap:20px;
  align-items:center;
  padding:11px 0;
  border-top:1px solid #F1F1EE;
}
.pu-dcard__name {
  font-size:15.5px;
  line-height:1.4;
  color:#1B302A;
  font-weight:400;
  text-wrap:pretty;
}
.pu-dcard__mark {
  flex:none;
  display:block;
}

.pu-src {
  box-sizing:border-box;
  width:100%;
  border-radius:12px;
  padding:30px 32px;
  background:#FFFFFF;
  box-shadow:0 0 0 1px #E9E9E6, 0 8px 22px rgba(27,48,42,0.10);
}
.pu-src__head {
  padding:0 0 14px;
}
.pu-src__label {
  font-family:'Figtree',sans-serif;
  font-weight:500;
  font-size:11.5px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:#647670;
}
.pu-src__row {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  column-gap:20px;
  align-items:center;
  padding:13px 0;
  border-top:1px solid #F1F1EE;
}
.pu-src__name {
  font-size:15.5px;
  line-height:1.4;
  color:#1B302A;
  font-weight:400;
}
.pu-src__pill {
  padding:4px 11px;
  border-radius:99px;
  background:#FBF1E4;
  box-shadow:inset 0 0 0 1px #EFD9B6;
  font-size:13px;
  line-height:1.3;
  color:#8F6224;
  font-weight:400;
  white-space:nowrap;
}

/* product-ui */
.pu-dsheetwrap {
  display:flex;
  justify-content:center;
}
.pu-dsheet {
  width:100%;
  box-sizing:border-box;
  background:#FFFFFF;
  border-radius:22px;
  box-shadow:0 0 0 1px #E9E9E6, 0 8px 22px rgba(27,48,42,0.10);
  overflow:hidden;
  font-family:'Instrument Sans',system-ui,sans-serif;
  color:#1C1B18;
  text-align:left;
}
.pu-dsheet__grip-row {
  display:flex;
  justify-content:center;
  padding:8px 0 0;
}
.pu-dsheet__grip {
  width:36px;
  height:5px;
  border-radius:3px;
  background:#DEDBD2;
}
.pu-dsheet__head {
  padding:14px 20px;
  text-align:center;
}
.pu-dsheet__title {
  font-size:17.5px;
  font-weight:600;
  color:#1C1B18;
  letter-spacing:-0.015em;
}
.pu-dsheet__sub {
  font-size:13px;
  color:#6B6A62;
  margin-top:3px;
  line-height:1.45;
}
.pu-dsheet__list {
  border-top:1px solid #F2EFE8;
  padding-bottom:8px;
}
.pu-drow {
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 16px;
  height:48px;
  border-bottom:1px solid #F2EFE8;
}
.pu-drow__check {
  flex:none;
  width:20px;
  height:20px;
  box-sizing:border-box;
  border-radius:5px;
  background:#1C1B18;
  border:1px solid #1C1B18;
  display:flex;
  align-items:center;
  justify-content:center;
}
.pu-ico {
  display:block;
}
.pu-drow__label {
  flex:1;
  min-width:0;
  font-size:14px;
  color:#1C1B18;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.pu-ico--fixed {
  display:block;
  flex:none;
}
.pu-drow__check--off {
  flex:none;
  width:20px;
  height:20px;
  box-sizing:border-box;
  border-radius:5px;
  background:#FFFFFF;
  border:1px solid #C9C4B6;
}
.pu-drow__label--off {
  flex:1;
  min-width:0;
  font-size:14px;
  color:#8A877D;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.pu-drow--last {
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 16px;
  height:48px;
}
/* /product-ui */

/* Responsive --------------------------------------------------------------- */
/* Keyed on the data-* hooks rather than the class names, the way the design
   file writes them: these are the page's documented responsive contracts and
   the hook names are what the guide and the audit refer to. */

@media (max-width: 1040px) {
  /* Both three-card rows stop being a grid and become a snap-scrolling row
     that bleeds into the page gutter, so a card is never cut in half. */
  [data-cols3][data-swipe] {
    display:flex !important;
    justify-content:flex-start !important;
    gap:20px !important;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    margin:-12px calc(-1 * clamp(24px, 6vw, 80px)) -32px !important;
    padding:12px clamp(24px, 6vw, 80px) 32px !important;
    scroll-padding-inline:clamp(24px, 6vw, 80px);
  }
  [data-cols3][data-swipe]::-webkit-scrollbar { display:none; }
  [data-cols3][data-swipe] > :not([data-flow-arrow]) { flex:0 0 322px; scroll-snap-align:start; }
  [data-cols3][data-flow][data-swipe] { gap:12px !important; }
  [data-cols3][data-flow][data-swipe] > [data-flow-arrow] { visibility:visible !important; width:auto !important; flex:none; transform:none !important; }
  [data-cols3][data-flow] > [data-flow-arrow] { visibility:hidden; }
  /* The claim stops being two inline blocks, so it wraps on the measure
     rather than breaking at the comma. */
  [data-commabreak] [data-half] { display:inline !important; }
  [data-pair] > div[aria-hidden="true"] { padding:4px 0 !important; }
  [data-pair] > blockquote { width:auto !important; justify-self:stretch !important; }
  [data-pair] > blockquote > p { max-width:none !important; }
  [data-pair][data-cap]:not([data-visual-first]) > *:last-child { width:100% !important; max-width:560px !important; margin:0 auto !important; }
  [data-pair][data-cap][data-visual-first] > *:first-child { width:100% !important; max-width:560px !important; margin:0 auto !important; }
  /* A phone-shaped exhibit keeps its own width instead of stretching to the
     560px a block of copy would take. */
  [data-pair][data-cap]:not([data-visual-first]) > [data-rowmatch]:last-child { width:100% !important; max-width:322px !important; margin:0 !important; }
  [data-pair][data-cap][data-visual-first] > [data-rowmatch]:first-child { width:100% !important; max-width:322px !important; margin:0 !important; }
  [data-steps] { display:grid !important; grid-template-columns:repeat(2, minmax(0, 1fr)) !important; gap:12px !important; }
}

@media (max-width: 860px) {
  /* The three flush columns stack, so the dividers move from left edges to
     top edges. */
  [data-cols3][data-flush] { grid-template-columns:minmax(0, 1fr) !important; gap:0 !important; }
  [data-cols3][data-flush] > * { border-left:none !important; }
  [data-cols3][data-flush] > *:not(:first-child) { border-top:1px solid #E4E1EE !important; }
  [data-cols3][data-flow] { gap:14px !important; }
  [data-cols3][data-flow] > [data-flow-arrow] { width:auto !important; transform:rotate(90deg); visibility:visible; }
  [data-crows] { grid-auto-rows:auto !important; }
}

@media (max-width: 640px) {
  [data-steps] { grid-template-columns:minmax(0, 1fr) !important; }
  /* Both lockups scale by the same factor, so their shared "A Roofstock
     company" line stays the same size in each. */
  [data-mlogo="stessa"] { width:114px !important; height:31px !important; }
  [data-mlogo="mynd"] { width:120px !important; height:31px !important; }
  [data-defaults] [data-mlogo="stessa"] { width:78px !important; height:21px !important; }
  [data-defaults] [data-mlogo="mynd"] { width:82px !important; height:21px !important; }
}

@media (max-width: 560px) {
  [data-defaults] { padding:22px 18px !important; }
  [data-defaults] > div { grid-template-columns:minmax(0, 1fr) 64px 64px !important; column-gap:8px !important; }
  [data-defaults] [data-mlogo="stessa"], [data-defaults] [data-mlogo="mynd"] { width:60px !important; height:16px !important; object-fit:contain; }
  [data-pair] blockquote { padding:34px 26px 30px !important; }
  [data-pair] > div[data-card] { padding:22px 18px !important; }
}