.act--make { padding-block: var(--s8) calc(var(--band) + 12vh); }
.make { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.76fr); gap: var(--s8); align-items: center; }
.make__lead { display: grid; justify-items: start; align-content: center; }
.make__cta { justify-self: start; }
.make__h { max-width: 14ch; }
.make__ro { margin-top: var(--s3); }

.cfg { display: grid; gap: var(--s4); margin-top: var(--s6); width: 100%; }
.cfg__row { display: grid; grid-template-columns: 4.75rem minmax(0, 1fr); gap: var(--s4); align-items: start; }
.cfg__label {
  padding-top: 0.8rem; font-family: var(--f-display); font-weight: 500; font-size: var(--t-xs);
  letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--ink-soft);
}
.cfg__opts { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.opt {
  min-height: 2.75rem; padding: 0.55rem 0.8rem; border-radius: var(--r-md);
  border: 1px solid var(--hair-strong); background: color-mix(in srgb, var(--g2) 72%, transparent); color: var(--ink);
  font-family: var(--f-display); font-weight: 500; font-size: var(--t-sm); letter-spacing: 0.01em; line-height: 1.2;
  transition: background-color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease), transform var(--d-fast) var(--ease);
}
.opt[aria-pressed="true"] { background: var(--teal); border-color: var(--teal); color: var(--teal-ink); }
@media (hover: hover) and (pointer: fine) {
  .opt:hover { border-color: var(--teal); transform: translateY(-1px); }
  .opt[aria-pressed="true"]:hover { background: color-mix(in oklab, var(--teal) 88%, white); }
  .sw:hover { border-color: var(--teal); transform: translateY(-1px); }
}
.opt:active, .sw:active { transform: translateY(1px); }
.opt:focus-visible, .sw:focus-visible { outline-offset: 2px; }

.sw {
  width: 3.25rem; height: 2.75rem; padding: 0.3rem; border-radius: var(--r-md);
  border: 1px solid var(--hair-strong); background: transparent;
  transition: border-color var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease), transform var(--d-fast) var(--ease);
}
.sw__screen {
  display: block; width: 100%; height: 100%; border-radius: 3px;
  background:
    linear-gradient(var(--sa), var(--sa)) 22% 28% / 56% 18% no-repeat,
    linear-gradient(var(--si), var(--si)) 22% 64% / 38% 10% no-repeat,
    var(--sp);
}
.sw--clay { --sp: #F3EDE8; --sa: #A34A25; --si: #2A211C; }
.sw--jade { --sp: #EDF2EE; --sa: #2F6B52; --si: #182420; }
.sw--ink { --sp: #F1F3F6; --sa: #1D2733; --si: #111820; }
.sw--sun { --sp: #FAF5EA; --sa: #8A5A12; --si: #2B2413; }
.sw[aria-pressed="true"] { border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal); }

.make__cta { margin-top: var(--s6); min-height: 3.1rem; min-width: min(100%, 15rem); }

.make__stage { position: relative; display: grid; justify-items: center; align-content: center; margin: 0; }
.phone {
  --pa: #A34A25; --pi: #2A211C; --ps: #6B5B52; --pc: #E4D9D1; --pp: #F3EDE8; --pb: #E4DBD4; --po: #FFF6F1;
  --pf: "ATL Editorial", Georgia, "Times New Roman", serif; --pw: 500; --pt: -0.01em; --pr: 3px;
  position: relative; z-index: 1; width: min(19rem, 72vw); aspect-ratio: 9 / 16.5;
  padding: 0.45rem; border-radius: 2.1rem; background: #070B0A;
  box-shadow: var(--e3), inset 0 0 0 1px color-mix(in oklab, var(--ink) 12%, transparent), 0 0 0 1px color-mix(in oklab, var(--teal) 16%, transparent);
}
.phone__screen {
  height: 100%; border-radius: 1.75rem; overflow: hidden; display: grid; grid-template-rows: auto 1fr;
  background: var(--pp); transition: background-color var(--d-slow) var(--ease);
}
.phone__bar { display: flex; justify-content: center; padding: 0.55rem 0.75rem; background: var(--pb); transition: background-color var(--d-slow) var(--ease); }
.phone__url { font-family: var(--f-text); font-size: 0.62rem; letter-spacing: 0.01em; color: var(--ps); transition: color var(--d-slow) var(--ease); }
.phone__body { display: grid; gap: 0.55rem; grid-template-rows: auto auto auto auto auto minmax(0, 1fr); padding: 0.85rem 0.9rem 0.9rem; min-height: 0; }
.phone__shot {
  display: block; width: 100%; height: auto; aspect-ratio: 420 / 236; object-fit: cover;
  border-radius: calc(var(--pr) + 1px); background: var(--pc); transition: opacity 260ms var(--ease);
}
.phone__shot.is-swapping { opacity: 0.25; }
.phone__eyebrow { font-family: var(--f-text); font-size: 0.6rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--pa); transition: color var(--d-slow) var(--ease); }
.phone__h {
  font-family: var(--pf); font-weight: var(--pw); letter-spacing: var(--pt); font-size: 1.28rem; line-height: 1.1;
  color: var(--pi); text-wrap: balance; transition: color var(--d-slow) var(--ease);
}
.phone__p { font-family: var(--f-text); font-size: 0.76rem; line-height: 1.5; color: var(--ps); transition: color var(--d-slow) var(--ease); }
.phone__cta {
  justify-self: start; padding: 0.45rem 0.85rem; border-radius: var(--pr);
  font-family: var(--f-text); font-weight: 600; font-size: 0.7rem; background: var(--pa); color: var(--po);
  transition: background-color var(--d-slow) var(--ease), color var(--d-slow) var(--ease), border-radius var(--d-slow) var(--ease);
}
.phone__grid { display: grid; gap: 0.4rem; margin-top: 0.2rem; min-height: 0; }
.phone__grid span { min-height: 1.6rem; border-radius: var(--pr); background: var(--pc); transition: background-color var(--d-slow) var(--ease), border-radius var(--d-slow) var(--ease); }
.phone[data-layout="stack"] .phone__grid { grid-template-columns: 1fr; grid-auto-rows: 1fr; }
.phone[data-layout="split"] .phone__grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; }
.phone[data-layout="bento"] .phone__grid { grid-template-columns: 1.6fr 1fr; grid-auto-rows: 1fr; }
.phone[data-layout="bento"] .phone__grid span:first-child { grid-row: span 2; }
.phone[data-layout="bento"] .phone__grid span:last-child { grid-column: span 2; }

html.rise-live [data-rise-slot="make"] .rise-static { visibility: visible; }
html.rise-make [data-rise-slot="make"] .rise-static { visibility: hidden; }
.rise-slot--make { position: relative; z-index: 0; width: min(16rem, 84%); aspect-ratio: 240 / 120; margin-top: 0.35rem; }

@media (max-width: 1100px) and (min-width: 861px) { .make { gap: var(--s6); } .cfg__row { grid-template-columns: 4.5rem minmax(0, 1fr); } }
@media (max-width: 860px) {
  .act--make { padding-block: var(--s6) calc(var(--band) * 0.8 + 10vh); }
  
  .make { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "stage" "cfg" "cta"; row-gap: var(--s4); align-items: start; }
  .make__lead { display: contents; }
  .make__head { grid-area: head; }
  .make__stage { grid-area: stage; }
  .make .cfg { grid-area: cfg; }
  .make__cta { grid-area: cta; }
  .phone { width: min(12.5rem, 56vw); }
  .phone__body { gap: 0.4rem; padding: 0.6rem 0.65rem; }
  .phone__h { font-size: 0.92rem; }
  .phone__p { font-size: 0.6rem; }
  .phone__eyebrow, .phone__url { font-size: 0.5rem; }
  .phone__cta { font-size: 0.56rem; padding: 0.35rem 0.6rem; }
  .phone__grid span { min-height: 1rem; }
  .rise-slot--make { width: min(11rem, 60%); }
  .cfg { margin-top: 0; gap: var(--s3); }
  .cfg__row { grid-template-columns: minmax(0, 1fr); gap: var(--s1); }
  .cfg__label { padding-top: 0; }
  .make__cta { justify-self: stretch; margin-top: var(--s2); }
}