/* Bento: "What the workshop makes" (DESIGN 5.5). Glass cards live only here. Owned by T3.
   Interface fragments (data-ui) use Libre Franklin at true UI sizes (13 px and up). */
.bento { position: relative; isolation: isolate; overflow-x: clip; }
.bento > .container { position: relative; }

/* One very large faint brass bloom so the glass has something to blur */
.bento__bloom {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 56%;
  width: min(1700px, 150vw);
  aspect-ratio: 1.5 / 1;
  transform: translate(-50%, -50%);
  background: /* taste-skill-ignore: faint bloom so the glass has light to blur (DESIGN §3) */ radial-gradient(ellipse at 50% 50%, rgba(245, 165, 36, 0.07), rgba(194, 65, 12, 0.035) 42%, transparent 68%);
  pointer-events: none;
}

.bento__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px 48px;
  margin-bottom: 40px;
}
.bento__intro {
  max-width: 36ch;
  font-size: var(--step-body);
  color: var(--ink);
}

/* ---------- Grid: 12 columns, 8px gaps ---------- */
.bento__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: minmax(104px, auto);
  gap: 8px;
}
.bento__card--sims { grid-column: 1 / 8;  grid-row: 1 / 6; }
.bento__card--agc  { grid-column: 8 / 13; grid-row: 1 / 6; }
.bento__card--c    { grid-column: 1 / 4;  grid-row: 6 / 9; }
.bento__card--d    { grid-column: 4 / 7;  grid-row: 6 / 9; }
.bento__card--e    { grid-column: 7 / 13; grid-row: 6 / 9; }
.bento__card--f    { grid-column: 1 / 5;  grid-row: 9 / 11; }
.bento__card--g    { grid-column: 5 / 13; grid-row: 9 / 11; }

/* ---------- Glass card ---------- */
.bento__card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 28px;
  overflow: hidden;
  border: 1px solid var(--glass-line);
  border-radius: var(--radius);
  background: var(--glass);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  transition: border-color 240ms ease, translate 300ms var(--ease-out);
}
.bento__card:active { translate: 0 -1px; }
@media (hover: hover) and (pointer: fine) {
  .bento__card:hover { translate: 0 -4px; border-color: rgba(243, 237, 228, 0.16); }
  .bento__card:active { translate: 0 -2px; }
}
.bento__card p { max-width: 46ch; }
.bento__card h3 { font-size: var(--step-lead); }

/* ---------- A: SIMS, the one glowing card ---------- */
.bento__card--sims {
  border-color: transparent;
  box-shadow: /* taste-skill-ignore: the one glowing card (DESIGN §3) */ 0 0 0 1px rgba(245, 165, 36, 0.35), 0 40px 120px -30px rgba(245, 165, 36, 0.45);
  padding: 32px;
}
.bento-sims__main { position: relative; z-index: 1; width: min(100%, 440px); display: flex; flex-direction: column; align-items: flex-start; }
.bento-sims__bell { color: var(--accent); margin-bottom: 18px; }
.bento-sims__title { font-size: var(--step-head) !important; margin-bottom: 14px; }
.bento-sims__copy { margin-bottom: 26px; }
.bento-sims__cta { margin-top: 26px; }

/* live price */
.bento-price { width: 100%; }
.bento-price__controls { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.bento-seg {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 2px;
  min-width: 0;
  margin: 0;
  padding: 3px;
  border: 1px solid var(--glass-line);
  border-radius: var(--pill);
  background: rgba(243, 237, 228, 0.04);
}
.bento-seg__legend { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); }
.bento-seg[data-seg="months"]::after {
  content: "months";
  padding: 0 14px 0 10px;
  font-size: 0.9375rem;
  color: var(--muted);
}
.bento-seg__opt { position: relative; display: block; }
.bento-seg__opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.bento-seg__opt span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--pill);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1;
  color: var(--ink);
  transition: background-color 240ms ease, color 240ms ease;
}
.bento-seg__opt input:checked + span { background: var(--ink); color: var(--bg); }
.bento-seg__opt input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .bento-seg__opt input:not(:checked):hover + span { background: rgba(243, 237, 228, 0.1); }
}
.bento-seg__opt:active span { transform: scale(0.97); }

.bento-price__line {
  margin-top: 22px;
  font-size: var(--step-lead);
  line-height: 1.7;
  max-width: none !important;
}
.bento-price__block {
  display: inline-block;
  padding: 0.05em 0.3em 0.1em;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.bento-price__modules { margin-top: 8px; color: var(--muted); }

/* the cropped SIMS strip, bleeding off the right edge */
.bento-ui {
  display: none;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  line-height: 1.3;
  color: var(--ink);
  background: #14110d;
  border: 1px solid var(--glass-line);
  border-radius: 14px;
  padding: 14px 16px;
}
.bento-ui__head { display: flex; justify-content: space-between; margin-bottom: 12px; font-size: 0.875rem; font-weight: 500; }
.bento-ui__head span:last-child { color: var(--muted); font-weight: 400; }
.bento-ui__tiles { display: grid; grid-template-columns: 0.8fr 1.4fr 0.8fr; gap: 8px; margin-bottom: 14px; }
.bento-ui__tile { padding: 10px 12px; border: 1px solid var(--glass-line); border-radius: 10px; display: flex; flex-direction: column; gap: 4px; }
.bento-ui__k { color: var(--muted); font-size: 0.8125rem; white-space: nowrap; }
.bento-ui__v { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bento-ui__table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.bento-ui__table th { text-align: left; font-weight: 400; font-size: 0.8125rem; color: var(--muted); padding: 0 0 8px; }
.bento-ui__table td { padding: 9px 8px 9px 0; border-top: 1px solid var(--glass-line); white-space: nowrap; }
.bento-ui__table td:last-child, .bento-ui__table th:last-child { padding-right: 0; }
.bento-ui__chip { display: inline-block; padding: 2px 9px; border-radius: var(--pill); background: rgba(245, 165, 36, 0.16); color: var(--fire-core); font-size: 0.8125rem; }
.bento-ui__chip--paid { background: rgba(243, 237, 228, 0.08); color: var(--ink); }

@media (min-width: 1024px) {
  .bento-ui {
    display: block;
    position: absolute;
    z-index: 0;
    top: 210px;
    left: calc(440px + 64px);
    width: 460px;
  }
}

/* ---------- B: AGC ---------- */
.bento-agc__title { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem) !important; margin-bottom: 14px; }
.bento-agc__copy { margin-bottom: 24px; }
.bento-agc__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  align-self: flex-start;
  max-width: 100%;
  margin-bottom: 18px;
  padding: 3px;
  border: 1px solid var(--glass-line);
  border-radius: var(--pill);
  background: rgba(243, 237, 228, 0.04);
}
.bento-agc__tabs [role="tab"] {
  min-height: 44px;
  padding: 0 16px;
  border-radius: var(--pill);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 1;
  color: var(--ink);
  transition: background-color 240ms ease, color 240ms ease, transform 300ms var(--ease-out);
}
.bento-agc__tabs [role="tab"][aria-selected="true"] { background: var(--ink); color: var(--bg); }
.bento-agc__tabs [role="tab"]:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .bento-agc__tabs [role="tab"][aria-selected="false"]:hover { background: rgba(243, 237, 228, 0.1); }
}
.bento-agc__stage { display: flex; align-items: flex-start; gap: 28px; margin-top: 4px; }
.bento-agc__side { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding-top: 6px; }
.bento-agc__caption { font-style: italic; font-size: 1.0625rem; color: var(--ink); }

/* the paper receipt */
.bento-receipt {
  flex: none;
  width: min(100%, 300px);
  padding: 20px 20px 32px;
  background: var(--paper);
  color: var(--paper-ink);
  font-family: var(--font-display);
  font-size: 0.8125rem;
  line-height: 1.35;
  transform: rotate(-1.2deg);
  transform-origin: 20% 0;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9px), 94.444% 100%, 88.889% calc(100% - 9px), 83.333% 100%, 77.778% calc(100% - 9px), 72.222% 100%, 66.667% calc(100% - 9px), 61.111% 100%, 55.556% calc(100% - 9px), 50% 100%, 44.444% calc(100% - 9px), 38.889% 100%, 33.333% calc(100% - 9px), 27.778% 100%, 22.222% calc(100% - 9px), 16.667% 100%, 11.111% calc(100% - 9px), 5.556% 100%, 0 calc(100% - 9px));
}
.bento-receipt p { max-width: none; }
.bento-receipt__org { font-weight: 700; font-size: 0.875rem; letter-spacing: -0.01em; }
.bento-receipt__copy {
  margin: 8px 0 12px;
  padding: 5px 0;
  border-block: 1px solid rgba(26, 21, 16, 0.55);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.bento-receipt__rows { margin: 0; display: grid; gap: 6px; }
.bento-receipt__rows div { display: flex; justify-content: space-between; gap: 12px; }
.bento-receipt__rows dt { color: rgba(26, 21, 16, 0.72); }
.bento-receipt__rows dd { margin: 0; text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; }
.bento-receipt__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed rgba(26, 21, 16, 0.55); /* taste-skill-ignore: printed receipt inside data-ui */ }
.bento-receipt__total { display: flex; flex-direction: column; gap: 2px; }
.bento-receipt__total span { color: rgba(26, 21, 16, 0.72); }
.bento-receipt__total strong { font-size: 1.25rem; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.bento-receipt__qr { width: 104px; height: 104px; image-rendering: pixelated; flex: none; }

/* ---------- C, D: small proof tiles ---------- */
.bento__card--c, .bento__card--d { gap: 12px; }
.bento__card--c h3, .bento__card--d h3 { font-size: clamp(1.375rem, 1.1rem + 0.7vw, 1.75rem); }
.bento-log {
  margin-top: auto;
  padding-top: 8px;
  font-family: var(--font-display);
  font-size: 0.875rem;
  line-height: 1.3;
  display: grid;
  gap: 0;
}
.bento-log li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--glass-line); /* taste-skill-ignore: app log inside data-ui */ }
.bento-log__v { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.bento-log__dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--accent); }
.bento-log__dot--off { background: transparent; box-shadow: inset 0 0 0 1.5px var(--muted); /* taste-skill-ignore: status dot inside data-ui */ }

/* ---------- E: Akbarnama ---------- */
.bento__card--e { padding: 0; min-height: 352px; }
.bento-e__art { position: absolute; inset: 0; margin: 0; overflow: hidden; background: #1b140f; }
.bento-e__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1200ms ease;
}
.bento-e__img.is-on { opacity: 1; }
.bento-e__img:nth-child(1) { object-position: 50% 38%; scale: 1.15; transform-origin: 50% 38%; }
.bento-e__img:nth-child(2) { object-position: 50% 58%; }
.bento-e__scrim {
  position: relative;
  margin-top: auto;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: start;
  gap: 8px 28px;
  padding: 20px 28px 24px;
  background: rgba(12, 10, 8, 0.8);
}
.bento-e__scrim h3 { font-size: clamp(1.375rem, 1.1rem + 0.7vw, 1.75rem); }
.bento-e__scrim p { max-width: 52ch; }
@media (max-width: 1023px) {
  .bento-e__scrim { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- F: Islamabad ---------- */
.bento__card--f { gap: 10px; }
.bento-clock { font-family: var(--font-display); font-weight: 700; font-size: var(--step-head); letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; max-width: none !important; }
.bento-clock time { display: inline-block; min-width: 3ch; }
.bento-clock__s { font-size: 0.45em; font-weight: 500; color: var(--muted); letter-spacing: -0.02em; margin-left: 0.12em; }
.bento-clock__tz { font-size: 0.3em; font-weight: 500; color: var(--muted); letter-spacing: 0; margin-left: 0.5em; }
.bento-f__note { margin-top: auto; }
.bento-f__note [data-backup] { display: inline-block; white-space: nowrap; }

/* ---------- G: next project ---------- */
.bento__card--g { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px 40px; }
.bento-g__title { font-size: var(--step-head) !important; margin-bottom: 14px; }
.bento__card--g .btn { flex: none; }

/* ---------- Tablet: two columns ---------- */
@media (max-width: 1023px) {
  .bento__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
  .bento__card { grid-column: auto !important; grid-row: auto !important; }
  .bento__card--sims, .bento__card--agc, .bento__card--f, .bento__card--e, .bento__card--g { grid-column: 1 / -1 !important; }
  .bento__card--f { order: 3; }
  .bento__card--c { order: 4; }
  .bento__card--d { order: 5; }
  .bento__card--e { order: 6; min-height: 340px; }
  .bento__card--g { order: 7; }
  .bento__card--c, .bento__card--d { min-height: 320px; }
}

/* ---------- Phone: one column, order A, B, F, C, D, E, G ---------- */
@media (max-width: 720px) {
  .bento__head { flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 28px; }
  .bento__grid { grid-template-columns: minmax(0, 1fr); }
  .bento__card--c, .bento__card--d { grid-column: 1 / -1 !important; min-height: 0; }
  .bento__card {
    padding: 22px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
  .bento__card--sims { padding: 22px; }
  .bento__card--e { padding: 0; min-height: 420px; }
  .bento-sims__main { width: 100%; }
  .bento-seg { max-width: 100%; }
  .bento-seg__opt span { padding: 0 13px; }
  .bento-price__line { font-size: 1.1875rem; line-height: 1.75; }
  .bento-agc__tabs { display: grid; grid-template-columns: repeat(3, auto); align-self: stretch; }
  .bento-agc__tabs [role="tab"] { padding: 0 6px; font-size: 0.875rem; white-space: nowrap; }
  .bento-agc__stage { flex-direction: column; align-items: stretch; gap: 22px; }
  .bento-receipt { width: 100%; max-width: 340px; align-self: center; }
  .bento__card--g { flex-direction: column; align-items: stretch; }
  .bento__card--g .btn { width: 100%; }
  .bento__card--f { min-height: 0; }
  .bento-log { margin-top: 8px; }
  .bento-e__scrim { padding: 18px 22px 22px; }
}
@media (max-width: 400px) {
  .bento-seg__opt span { padding: 0 11px; min-width: 40px; }
  .bento-seg[data-seg="months"]::after { padding: 0 10px 0 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .bento-e__img { transition-duration: 0.2s; }
}