.planning-overview {
  --po-muted: #4d6074;
  --po-rule: #cad9e5;
  --po-blue: #0759b3;
}
.po-opening,.po-content {
  display: grid;
  grid-template-columns: minmax(0,.76fr) minmax(0,1.24fr);
  gap: clamp(38px,7vw,103px);
  align-items: start;
}
.po-opening { padding-block: clamp(30px,3.6vw,53px) clamp(37px,4.3vw,66px); }
.po-intro h1 {
  font-size: clamp(40px,4.1vw,62px);
  line-height: 1.13;
  letter-spacing: -.045em;
  margin: 0;
  text-wrap: pretty;
}
.po-intro p {
  font-size: clamp(17px,1.4vw,20px);
  line-height: 1.65;
  color: var(--po-muted);
  margin: 16px 0 0;
  max-width: 37ch;
}
.po-starts { border-top: 2px solid var(--po-blue); }
.po-starts>div { padding: 16px 0; border-bottom: 1px solid var(--po-rule); }
.po-starts .button {
  min-height: 48px;
  font-size: 16px;
  padding: 9px 18px;
}
.po-starts p,.po-content dd,.po-template-note {
  color: var(--po-muted);
  font-size: 16px;
  line-height: 1.65;
  margin: 6px 0 0;
  max-width: 63ch;
}
.po-policy,.po-example-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--po-blue);
  font-weight: 700;
  font-size: 16px;
  text-decoration: underline;
  text-underline-offset: .2em;
}
.po-policy svg,.po-example-link svg,.po-plan svg {
  width: 19px;
  height: 19px;
  flex: none;
}
.planning-overview :is(a,summary):focus-visible { outline: 3px solid var(--po-blue); outline-offset: 3px; }
.po-structure { background: #f2f6fa; padding-block: clamp(31px,3.6vw,53px); }
.po-content h2 {
  margin: 0;
  font-size: clamp(25px,2.7vw,37px);
  letter-spacing: -.024em;
  line-height: 1.3;
  text-wrap: balance;
}
.po-content dl { margin: 0; }
.po-local-drafts { display:flex; flex-wrap:wrap; gap:2px 20px; }
.po-flight-jump { display:flex; width:fit-content; align-items:center; min-height:44px; color:var(--po-blue); text-decoration:underline; text-underline-offset:.2em; padding-block:5px; }
.po-airports { padding-block:clamp(34px,4.6vw,68px); }
.po-airports > header { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:8px 30px; }
.po-airports h2 { max-width:22ch; font-size:clamp(26px,2.9vw,40px); line-height:1.18; text-wrap:balance; }
.po-flight-origin { margin:0; display:flex; align-items:baseline; flex-wrap:wrap; gap:3px 10px; color:var(--po-muted); }
.po-flight-origin > span { font-size:14px; }
.po-flight-origin strong { color:var(--ink); font-size:16px; font-weight:680; }
.po-flight-choices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(22px,4vw,55px); margin-top:20px; }
.po-flight-choices > section { border-top:2px solid var(--po-blue); padding-top:14px; display:flex; flex-direction:column; align-items:flex-start; }
.po-flight-choices h3 { font-size:clamp(19px,1.7vw,25px); line-height:1.26; }
.po-flight-choices p,.po-flight-city-note { font-size:16px; line-height:1.6; max-width:62ch; color:var(--po-muted); margin:6px 0 0; }
.po-flight-choices a { color:var(--po-blue); display:inline-flex; flex-direction:column; min-height:44px; margin-top:auto; padding-block:12px 4px; }
.po-flight-choices a > span { font-size:14px; }
.po-flight-choices a strong { text-decoration:underline; text-underline-offset:.21em; }
.po-flight-city-note { font-size:14px; margin-top:16px; }
.po-airports [hidden] { display:none; }
@media(max-width:700px) {
  .po-flight-choices { grid-template-columns:1fr; gap:15px; margin-top:14px; }
  .po-flight-choices > section { padding-top:10px; }
  .po-flight-choices p { font-size:15px; }
  .po-flight-choices a { padding-top:6px; }
}
.po-content dl>div+div {
  border-top: 1px solid var(--po-rule);
  margin-top: 15px;
  padding-top: 15px;
}
.po-content dt {
  font-size: 19px;
  font-weight: 720;
  line-height: 1.45;
}
.po-handoff {
  border-left: 2px solid #a8c7df;
  padding-left: 16px;
  margin-top: 22px;
}
.po-handoff h3 {
  margin: 0;
  font-size: 17px;
  line-height: 1.5;
}
.po-handoff p {
  margin: 6px 0 0;
  color: var(--po-muted);
  font-size: 15px;
  line-height: 1.65;
}
.po-starts .po-native {
  font-size: 13px;
  line-height: 1.6;
  margin-top: 7px;
}
.po-sample { padding-block: 0 clamp(26px,3vw,44px); }
.po-content header .po-example-link { margin-top: 13px; }
.po-template-note { font-size: 15px; max-width: 37ch; }
.po-worked { border: 1px solid #becfdf; border-inline-start: 3px solid var(--po-blue); background: white; }
.po-starts :is(#po-resume-title,#po-confirm-title) { scroll-margin-top: 110px; }
.po-cover {
  display: grid;
  grid-template-columns: minmax(180px,.9fr) minmax(200px,1.02fr) auto;
  gap: 20px 32px;
  align-items: center;
  list-style: none;
  cursor: pointer;
  padding: 20px 24px;
  min-height: 44px;
  line-height: 1.45;
}
.po-cover::-webkit-details-marker { display: none; }
.po-cover-name,.po-cover-fields { display: grid; }
.po-cover-name { gap: 3px; }
.po-cover-label { color: #476781; font-size: 14px; font-weight: 650; }
.po-cover-wide { color: var(--ink); font-size: clamp(19px,1.55vw,24px); line-height: 1.26; letter-spacing: -.015em; }
.po-cover-fields {
  border-inline-start: 1px solid var(--po-rule);
  padding-inline-start: 22px;
  color: #344b60;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.55;
  gap: 2px;
}
.po-cover-action { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--po-blue); font-size: 15px; font-weight: 650; }
.po-cover-read,.po-cover-close { text-decoration: underline; text-underline-offset: .2em; }
.po-cover-short,.po-cover-close { display: none; }
.po-worked[open] .po-cover { display: flex; justify-content: flex-end; padding: 2px 16px; border-bottom: 1px solid var(--po-rule); }
.po-worked[open] :is(.po-cover-name,.po-cover-fields,.po-cover-read) { display: none; }
.po-worked[open] .po-cover-close { display: inline; }
.po-worked[open] .po-cover-arrow { transform: rotate(180deg); }
.po-worked #po-worked-title {
  margin: 18px clamp(16px,2.4vw,35px) 12px;
  font-size: 20px;
  line-height: 1.45;
  scroll-margin-top: 114px;
}
.po-worked .po-worked-layout { margin: 4px clamp(16px,2.4vw,35px) 14px; }
.po-worked>.po-example-link { margin: 0 clamp(16px,2.4vw,35px) 14px; }
@media (max-width:760px) {
  .po-sample { padding-bottom: 16px; }
  .po-cover { grid-template-columns: minmax(0,1fr) auto; gap: 1px 12px; padding: 9px 14px; }
  .po-cover-name { grid-area: 1/1; }
  .po-cover-short { display: block; color: var(--po-blue); font-size: 17px; font-weight: 700; text-decoration: underline; text-underline-offset: .18em; }
  .po-cover-wide,.po-cover-label,.po-cover-stop,.po-cover-read { display: none; }
  .po-cover-fields { grid-area: 2/1; border: 0; padding: 0; line-height: 1.5; }
  .po-cover-action { grid-area: 1/2/3/3; min-height: 24px; }
  .po-worked[open] .po-cover-action { justify-content: space-between; width: 100%; }
}
@media (max-width:800px) {
  .po-opening,.po-content { grid-template-columns: minmax(210px,.75fr) minmax(0,1.25fr); gap: 30px; }
}
@media (max-width:650px) {
  .po-opening,.po-content { display: block; }
  .po-opening { padding-block: 16px 26px; }
  .po-intro h1 { font-size: clamp(32px,8.1vw,41px); letter-spacing: -.03em; }
  .po-intro p {
    font-size: 16px;
    line-height: 1.55;
    margin-top: 7px;
  }
  .po-starts { margin-top: 16px; }
  .po-starts>div { padding: 10px 0; }
  .po-starts p,.po-content dd,.po-template-note {
    font-size: 15px;
    line-height: 1.6;
    margin: 4px 0 0;
  }
  .po-starts .button { min-height: 44px; }
  .po-starts .po-policy { min-height: 44px; }
  .po-content h2 {
    font-size: 26px;
    line-height: 1.3;
    text-wrap: pretty;
    margin-bottom: 15px;
  }
  .po-content dt { font-size: 17px; }
  .po-structure { padding-block: 27px; }
  .po-content header { margin-bottom: 19px; }
  .po-content header .po-example-link { margin-top: 0; }
  .po-content header h2 { margin-bottom: 7px; }
}

/* Optional worked brief. */
.po-worked-layout {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  align-items: start;
  gap: clamp(38px, 6.6vw, 95px);
}

.po-note { padding-block: clamp(10px, 2.2vw, 32px) }
.po-note h3, .po-brief-label, .po-open-item h4 { font-size: 15px; font-weight: 750; line-height: 1.5 }
.po-note h3 { color: var(--blue-dark) }

.po-initial-idea {
  max-width: 17ch;
  margin: 12px 0 0;
  font-size: clamp(24px, 2.35vw, 35px);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.028em;
  text-wrap: pretty;
}

.po-note-help { max-width: 40ch; margin: 20px 0 0; color: var(--muted); font-size: 17px; line-height: 1.65 }

.po-brief {
  min-width: 0;
  padding: clamp(22px, 3.1vw, 44px);
  border: 1px solid #c6d6ea;
  border-top: 4px solid var(--blue);
  background: white;
  box-shadow: 0 9px 24px -21px #173653;
}

.po-brief-label {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 9px;
  color: var(--blue-dark);
}

.po-brief-label svg { width: 20px; height: 20px }

.po-brief h3 {
  margin: 0;
  font-size: clamp(23px, 2.2vw, 33px);
  line-height: 1.25;
  letter-spacing: -.025em;
}

.po-fields {
  margin: 20px 0 0;
  font-size: 16px;
  line-height: 1.6;
}

.po-fields > div {
  display: grid;
  grid-template-columns: minmax(98px, .37fr) minmax(0, 1fr);
  align-items: baseline;
  gap: clamp(14px, 2vw, 28px);
  padding: 15px 0;
  border-top: 1px solid var(--line);
}

.po-fields dt { font-weight: 750 }
.po-fields dd { margin: 0; color: var(--muted) }

.po-open-item {
  display: grid;
  gap: 5px;
  margin-top: 7px;
  padding: 13px 16px;
  background: var(--pale);
}

.po-open-item h4 { color: var(--blue-dark) }
.po-open-item p { margin: 0; font-size: 16px; line-height: 1.6 }

@media (max-width: 920px) {
  .po-worked-layout { grid-template-columns: minmax(0, .68fr) minmax(0, 1.32fr); gap: 30px }
  .po-fields > div { gap: 13px; grid-template-columns: minmax(91px, .36fr) minmax(0, 1fr) }
}
@media (max-width: 700px) {
  .po-worked-layout { grid-template-columns: minmax(0, 1fr); gap: 20px }
  .po-note { padding: 0 }
  .po-initial-idea { margin-top: 5px; max-width: 32ch; font-size: 23px }
  .po-note-help { margin-top: 9px; max-width: 48ch; font-size: 16px }
  .po-brief { padding: clamp(17px, 4.5vw, 27px) }
  .po-fields { margin-top: 14px }
}
@media (max-width: 460px) {
  .po-fields > div { grid-template-columns: minmax(0,1fr); gap: 3px; padding-block: 12px }
}