/* Twist Parties: an inspectable Business rework, using actual browser captures. */
.twist-case { --twist-purple: #5b3290; --twist-blue: #096f8b; --twist-pink: #f8dce9; background: var(--cream); }
.twist-hero { padding-block: clamp(42px,7vw,92px) 40px; }
.twist-kicker { font: 11px/1.5 var(--font-mono); letter-spacing: .09em; text-transform: uppercase; }
.twist-kicker a { text-underline-offset: 4px; }
.twist-hero__body { display: grid; grid-template-columns: 1.2fr 1fr; align-items: end; gap: 48px; margin-top: 26px; }
.twist-hero h1 { font: 800 clamp(48px,6.6vw,96px)/.98 var(--font-display); letter-spacing: -.06em; max-width: 10ch; }
.twist-hero h1 em { font-family: var(--font-aside); font-weight: 400; color: var(--twist-purple); }
.twist-hero__intro { max-width: 48ch; font-size: clamp(17px,1.7vw,23px); line-height: 1.55; }
.twist-meta { display: flex; flex-wrap: wrap; gap: 12px 38px; padding-block: 24px; margin-top: 34px; border-block: 1px solid var(--rule); }
.twist-meta div { display: grid; gap: 4px; }
.twist-meta dt { font: 10px var(--font-mono); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.twist-meta dd { font-size: 14px; margin: 0; }
.twist-compare { padding-bottom: clamp(48px,7vw,96px); }
.twist-compare__bar { display: flex; gap: 20px; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.twist-controls { display: flex; flex-wrap: wrap; gap: 6px; padding: 5px; background: rgba(13,16,36,.06); border-radius: 999px; }
.twist-controls button { min-height: 46px; padding: 10px 20px; border-radius: 999px; font-size: 14px; font-weight: 600; transition: background .18s,color .18s; }
.twist-controls button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.twist-compare__hint { max-width: 35ch; color: var(--muted); font-size: 13px; }
.twist-compare__body { display: grid; grid-template-columns: minmax(0,2.1fr) minmax(240px,1fr); align-items: stretch; border: 1px solid var(--ink); border-radius: 16px; overflow: hidden; box-shadow: 7px 8px 0 rgba(13,16,36,.1); }
.twist-captures { min-width: 0; background: white; }
.twist-capture { margin: 0; }
.twist-capture iframe { display:block; width:100%; height:740px; border:0; background:white; }
#planner { scroll-margin-top:85px; }
.twist-capture + .twist-capture { border-top: 1px solid var(--rule); }
.twist-capture__chrome { display: flex; gap: 8px; align-items: center; padding: 12px 18px; color: var(--muted); background: #faf9f6; border-bottom: 1px solid var(--rule); font: 10px/1.4 var(--font-mono); }
.twist-capture__chrome i { width: 6px; height: 6px; border-radius: 50%; background: #b9b5be; flex: none; }
.twist-capture__chrome span { margin-left: 6px; overflow-wrap: anywhere; }
.twist-capture img { display: block; width: 100%; height: auto; aspect-ratio: 18/13; object-fit: cover; object-position: top; }
.twist-capture figcaption { padding: 12px 18px; font-size: 12px; line-height: 1.5; border-top: 1px solid var(--rule); color: var(--muted); }
.twist-annotation { display: flex; flex-direction: column; justify-content: center; gap: 20px; padding: clamp(22px,3.5vw,48px); background: var(--twist-pink); border-left: 1px solid var(--ink); }
.twist-annotation__index { font: 11px var(--font-mono); letter-spacing: .05em; color: var(--twist-purple); text-transform: uppercase; }
.twist-annotation h2 { font: 700 clamp(27px,2.7vw,40px)/1.08 var(--font-display); letter-spacing: -.04em; }
.twist-annotation p { font-size: 15px; line-height: 1.6; }
.twist-annotation__look { padding-top: 18px; border-top: 1px solid rgba(13,16,36,.18); }
.twist-source { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; margin-top: 20px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.twist-source p { max-width: 68ch; }
.twist-source a { min-height: 44px; display: inline-flex; align-items: center; text-underline-offset: 4px; }
.twist-decisions { background: var(--ink); color: var(--cream); padding-block: clamp(54px,7vw,100px); }
.twist-decisions__head { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; }
.twist-decisions h2 { font: 700 clamp(36px,4.5vw,62px)/1.02 var(--font-display); letter-spacing: -.045em; max-width: 13ch; }
.twist-decisions__head>p { max-width: 44ch; color: #cfccd9; font-size: 18px; line-height: 1.6; }
.twist-decisions__grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 32px; margin-top: 50px; }
.twist-decision { border-top: 1px solid rgba(255,255,255,.25); padding-top: 18px; }
.twist-decision__number { font: 12px var(--font-mono); color: #e7a4c6; }
.twist-decision h3 { font: 700 27px/1.12 var(--font-display); letter-spacing: -.025em; margin-block: 18px 14px; }
.twist-decision p { font-size: 16px; color: #cfccd9; line-height: 1.6; }
.twist-walk { padding-block: clamp(54px,7vw,100px); }
.twist-walk__head { max-width: 62ch; }
.twist-walk__head h2 { font: 700 clamp(36px,4.5vw,62px)/1.02 var(--font-display); letter-spacing: -.045em; margin-block: 16px; }
.twist-walk__head p { font-size: 18px; line-height: 1.6; color: var(--muted); }
.twist-walk__layout { display: grid; grid-template-columns: .8fr 1.4fr; gap: 28px; margin-top: 38px; }
.twist-steps { display: grid; gap: 8px; align-content: start; }
.twist-steps button { display: flex; align-items: center; gap: 20px; min-height: 64px; padding: 16px 20px; text-align: left; border: 1px solid var(--rule); border-radius: 10px; background: white; font-size: 16px; }
.twist-steps button span { font: 11px var(--font-mono); color: var(--muted); }
.twist-steps button[aria-pressed="true"] { background: var(--twist-purple); color: white; border-color: var(--twist-purple); }
.twist-steps button[aria-pressed="true"] span { color: #e3d6f2; }
.twist-step { border: 1px solid var(--ink); border-radius: 14px; padding: clamp(24px,4vw,50px); background: #fffdf8; min-height: 286px; }
.twist-step+.twist-step { margin-top: 20px; }
.twist-step[hidden]+.twist-step { margin-top: 0; }
.twist-step h3 { font: 700 clamp(29px,3vw,43px)/1.08 var(--font-display); letter-spacing: -.035em; margin-block: 15px 20px; }
.twist-step p { font-size: 17px; line-height: 1.6; max-width: 47ch; }
.twist-step__fields { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.twist-step__fields span { border: 1px solid #cec1dd; background: #f0e8f6; padding: 8px 12px; border-radius: 3px; font-size: 13px; }
.twist-walk__note { margin-top: 20px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.twist-close { padding: 38px 0 clamp(60px,8vw,110px); }
.twist-close__inner { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; border-top: 1px solid var(--rule); padding-top: 38px; }
.twist-close h2 { font: 700 clamp(30px,3.6vw,48px)/1.05 var(--font-display); letter-spacing: -.04em; max-width: 18ch; }
.twist-close p { color: var(--muted); font-size: 16px; line-height: 1.6; }
@media(max-width:1000px) { .twist-compare__body { grid-template-columns: 1fr; }.twist-annotation { border-left: 0; border-top: 1px solid var(--ink); }.twist-annotation h2 { max-width: 24ch; }.twist-annotation p { max-width: 65ch; }.twist-annotation { gap: 14px; }.twist-decisions__grid { gap: 24px; } }
@media(max-width:700px) { .twist-hero__body,.twist-decisions__head,.twist-walk__layout,.twist-close__inner { grid-template-columns: 1fr; gap: 26px; }.twist-hero h1 { max-width: 11ch; }.twist-meta { gap: 18px 30px; margin-top: 26px; }.twist-compare__bar { align-items: flex-start; flex-direction: column; gap: 12px; }.twist-compare__hint { max-width: none; }.twist-controls { width: 100%; border-radius: 10px; }.twist-controls button { flex: 1; padding-inline: 12px; }.twist-compare__body { box-shadow: 4px 5px 0 rgba(13,16,36,.1); border-radius: 10px; }.twist-decisions__grid { grid-template-columns: 1fr; gap: 34px; margin-top: 34px; }.twist-decision h3 { margin-block: 14px 10px; }.twist-steps { grid-template-columns: repeat(2,minmax(0,1fr)); }.twist-steps button { align-items: start; flex-direction: column; gap: 10px; padding: 14px; font-size: 14px; }.twist-step { min-height: 0; }.twist-capture__chrome { padding: 10px 12px; }.twist-capture figcaption { padding: 10px 12px; } }
@media(prefers-reduced-motion:reduce) { .twist-controls button { transition: none; } }
.reduce-motion .twist-controls button { transition: none; }
html:has(.twist-case) { scroll-padding-block: 80px 100px; }
.twist-case button { scroll-margin-block: 80px 100px; }
@media(max-width:700px) {
  .twist-hero { padding-block: 32px 26px; }
  .twist-hero h1 { font-size: clamp(39px,12vw,52px); max-width: none; }
  .twist-meta { margin-top: 22px; padding-block: 18px; gap: 14px 24px; }
}