/* Phone stories extend the existing homepage without changing its desktop previews. */
.phone-story {
  margin-block: 12px 70px;
  scroll-margin-top: calc(var(--header-height) + 28px);
}
.phone-story-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(310px, .82fr);
  gap: clamp(44px, 6vw, 92px);
  align-items: center;
}
.phone-story-content { min-width: 0; }
.phone-story-content > h3 {
  margin-top: 17px;
  font-size: clamp(2.6rem, 4vw, 3.55rem);
  line-height: 1.1;
  letter-spacing: -.045em;
}
.phone-story-content > h3 em { color: #697246; }
.phone-story-intro {
  max-width: 550px;
  margin-top: 23px;
  color: var(--muted);
  font-size: .94rem;
  line-height: 1.9;
}
.phone-story-photo { margin-top: 29px; }
.phone-story-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: 7px;
}
.phone-story-photo figcaption {
  margin-top: 10px;
  color: var(--muted);
  font-size: .75rem;
  line-height: 1.75;
}
.phone-story-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 22px;
  color: #526747;
  font-size: .79rem;
  line-height: 1.85;
}
.phone-story-note > .icon { width: 21px; height: 21px; margin-top: 2px; }
.phone-story--club {
  margin-top: 68px;
  margin-bottom: 68px;
  padding-top: 55px;
  border-top: 1px solid #45664e;
}
.phone-story--club .phone-story-grid {
  grid-template-columns: minmax(310px, .82fr) minmax(0, 1.18fr);
}
.phone-story--club .phone-story-content { grid-column: 2; grid-row: 1; }
.phone-story--club .phone-preview { grid-column: 1; grid-row: 1; justify-self: start; }
.phone-story--club .phone-story-content > h3 { color: var(--cream); }
.phone-story--club .phone-story-content > h3 em { color: #d0e88b; }
.phone-story--club .phone-story-intro { color: #d4decc; }
.phone-story--club .phone-story-photo img { border-color: #57745a; }
.phone-story--club .phone-story-photo figcaption,
.phone-story--club .phone-story-note { color: #c7d7bd; }
.phone-story--club .phone-story-note > .icon { color: var(--gold); }

/* Generic device framing; the screen grows with its content rather than clipping it. */
.phone-preview { width: min(100%, 364px); justify-self: center; }
.phone-preview-label {
  margin: 0 0 14px;
  text-align: center;
  color: #5d6f51;
  font-size: .75rem;
  line-height: 1.75;
}
.phone-story--club .phone-preview-label { color: #d5dfc6; }
.phone-device {
  padding: 9px;
  border: 2px solid #5a6c4f;
  border-radius: 39px;
  background: #16392b;
  color: var(--green);
  box-shadow: 0 24px 55px rgba(24, 43, 27, .16), inset 0 0 0 1px #263e2c;
  font-family: var(--sans);
  font-size: .8125rem;
  line-height: 1.65;
}
.phone-story--club .phone-device {
  border-color: #98a67e;
  background: #173d2c;
  box-shadow: 0 26px 56px rgba(0, 17, 10, .22), inset 0 0 0 1px #284c33;
}
.phone-hardware {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 18px;
  margin-bottom: 7px;
}
.phone-hardware > span { width: 40px; height: 4px; background: #69816c; border-radius: 9px; }
.phone-hardware > i { width: 6px; height: 6px; background: #809482; border-radius: 50%; }
.phone-screen { overflow: hidden; border-radius: 23px 23px 29px 29px; background: var(--paper); }
.phone-app-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 17px 18px;
  border-bottom: 1px solid #dedec4;
  background: #f1efdf;
}
.phone-app-header > img { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 6px; }
.phone-wordmark { display: block; font-family: var(--serif); font-size: 1.35rem; line-height: 1.15; letter-spacing: -.06em; }
.phone-app-kind { display: block; margin-top: 4px; font-size: .75rem; line-height: 1.4; color: #5e7052; }
.phone-content { padding: 21px 18px 0; }
.phone-device .phone-overline {
  font-family: var(--sans);
  font-size: .75rem;
  line-height: 1.65;
  letter-spacing: .035em;
  font-weight: 650;
  color: #5d7050;
}
.phone-screen-heading h4 {
  margin-top: 7px;
  font-family: var(--serif);
  font-size: 1.85rem;
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: 1.2;
}
.phone-screen-heading > p:last-child { margin-top: 8px; font-size: .8125rem; line-height: 1.7; color: #637152; }
.phone-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin: 22px 0;
  border: 1px solid #dcdcc1;
  border-radius: 6px;
  background: #eeedde;
}
.phone-tabs button {
  flex: 1;
  min-width: 0;
  min-height: 40px;
  padding: 10px 6px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: #556b49;
  font-size: .75rem;
  font-weight: 650;
  line-height: 1.4;
  white-space: normal;
  transition: background-color .16s ease, color .16s ease;
}
.phone-tabs button:hover { background: #faf8ed; color: var(--green); }
.phone-tabs button[aria-selected="true"] { background: var(--green); border-color: var(--green); color: var(--cream); }
.phone-tabs button:focus-visible { outline-offset: 2px; outline-width: 2px; }
.phone-device .phone-panel { min-height: 0; margin: 23px 0 0; padding: 0; }
.phone-device .phone-panel + .phone-panel { border-top: 1px solid var(--border); padding-top: 24px; margin-top: 27px; }
.phone-device[data-tabs-ready="true"] .phone-panel,
.phone-device[data-tabs-ready="true"] .phone-panel + .phone-panel { min-height: 0; margin: 0; border: 0; padding: 0; }
.phone-device .phone-panel-title { margin: 0 0 14px; font-family: var(--serif); font-size: 1.28rem; line-height: 1.35; letter-spacing: -.025em; }
.phone-itinerary { list-style: none; }
.phone-itinerary > li { display: flex; align-items: flex-start; gap: 11px; padding: 14px 0; border-bottom: 1px solid #e1e1cd; }
.phone-event-day {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  min-height: 37px;
  margin-top: 2px;
  border: 1px solid #cbd4b7;
  border-radius: 5px;
  background: #eaf0e0;
  color: #486239;
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.3;
}
.phone-event-day--gold { border-color: #dac589; background: #f4e8be; color: #745c16; }
.phone-itinerary time { display: block; font-size: .75rem; line-height: 1.5; color: #62714d; font-weight: 650; }
.phone-itinerary strong { display: block; margin-top: 2px; font-size: .875rem; line-height: 1.5; font-weight: 650; }
.phone-itinerary p { margin-top: 4px; font-size: .75rem; line-height: 1.75; color: #637054; }
.phone-task-card { margin-top: 19px; padding: 15px; border: 1px solid #d8dec1; border-radius: 6px; background: #f1f3e7; }
.phone-task-card > div { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.phone-person { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 33px; width: 33px; height: 33px; border-radius: 50%; background: #d7e2cb; font-family: var(--serif); font-size: 1rem; }
.phone-task-card strong { display: block; font-size: .8125rem; line-height: 1.6; font-weight: 650; }
.phone-inline-status { display: block; margin-top: 3px; color: #64724d; font-size: .75rem; line-height: 1.5; }
.phone-device .phone-small-note { margin-top: 18px; font-size: .75rem; line-height: 1.8; color: #667354; }
.phone-money-summary { padding: 20px 18px; border-radius: 7px; background: var(--green); color: var(--cream); }
.phone-money-summary > p { font-size: .75rem; font-weight: 600; line-height: 1.7; letter-spacing: .025em; color: #d8e1c9; }
.phone-money-summary > strong { display: block; margin-top: 8px; font-family: var(--serif); font-weight: 400; font-size: 3.15rem; letter-spacing: -.04em; line-height: 1.2; }
.phone-money-summary > strong > span { font-family: var(--sans); font-size: .8125rem; margin-left: 10px; letter-spacing: 0; color: #e2e5cf; }
.phone-money-summary > span { display: block; margin-top: 9px; font-size: .75rem; line-height: 1.75; color: #d4debf; }
.phone-cost-list { margin: 17px 0 0; }
.phone-cost-list > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid #e1e0c8; }
.phone-cost-list dt { font-size: .8125rem; line-height: 1.6; color: #526947; }
.phone-cost-list dd { margin: 0; flex: 0 0 auto; font-size: .875rem; line-height: 1.6; font-weight: 650; }
.phone-cost-list .phone-cost-total { border-bottom: 0; }
.phone-cost-total dt,.phone-cost-total dd { color: var(--green); font-weight: 700; }
.phone-cost-context { display: flex; align-items: flex-start; gap: 9px; margin-top: 16px; font-size: .75rem; line-height: 1.8; color: #547144; }
.phone-cost-context > .icon { width: 19px; height: 19px; margin-top: 1px; }
.phone-spend-ring { display: flex; flex-direction: column; align-items: center; padding: 5px 0 2px; }
.phone-spend-ring > svg { width: 196px; max-width: 100%; height: auto; }
.phone-ring-track,.phone-ring-progress { fill: none; stroke-width: 12; }
.phone-ring-track { stroke: #e4e7d5; }
.phone-ring-progress { stroke: #526f42; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 110px 110px; }
.phone-ring-value { font-family: var(--serif); font-size: 45px; font-weight: 400; fill: var(--green); letter-spacing: -2px; }
.phone-ring-label { font-family: var(--sans); font-size: 15px; font-weight: 650; letter-spacing: .7px; fill: #61754d; }
.phone-spend-ring > p { margin-top: 3px; color: #5d734e; font-size: .75rem; line-height: 1.7; }
.phone-cost-list--compact { margin-top: 12px; }
.phone-cost-list--compact > div { padding: 11px 0; }
.phone-deadline { display: flex; align-items: flex-start; gap: 10px; padding: 14px; margin-top: 16px; background: #f4edd4; border: 1px solid #ddd0a0; border-radius: 6px; color: #725d18; }
.phone-deadline > .icon { width: 20px; height: 20px; margin-top: 2px; }
.phone-deadline strong { display: block; font-size: .875rem; line-height: 1.6; font-weight: 700; }
.phone-deadline p { margin-top: 4px; color: #736939; font-size: .75rem; line-height: 1.8; }
.phone-panel-label { padding: 8px 10px; margin-bottom: 14px; border: 1px solid #dccb94; border-radius: 5px; background: #f4ecd1; color: #725b12; font-size: .75rem; line-height: 1.6; font-weight: 650; }
.phone-purchase-meta { margin-top: 18px; padding-bottom: 17px; border-bottom: 1px dashed #cacaab; }
.phone-purchase-meta > span { display: block; font-size: .75rem; letter-spacing: .035em; color: #6a7452; }
.phone-purchase-meta strong { display: block; font-family: var(--serif); font-size: 1.65rem; font-weight: 400; line-height: 1.4; margin-top: 4px; }
.phone-purchase-meta p { font-size: .8125rem; line-height: 1.7; color: #60734f; margin-top: 3px; }
.phone-receipt-lines { margin-top: 3px; }
.phone-receipt-lines .phone-cost-total dd { font-family: var(--serif); font-size: 1.55rem; font-weight: 400; letter-spacing: -.035em; }
.phone-linked-question { margin-top: 16px; padding: 15px; border: 1px solid #d3dbc0; border-radius: 6px; background: #edf1e3; }
.phone-linked-question blockquote { margin-top: 10px; font-family: var(--serif); font-size: 1.13rem; line-height: 1.5; letter-spacing: -.015em; color: var(--green); }
.phone-linked-question > p:last-child { margin-top: 10px; font-size: .75rem; line-height: 1.8; color: #657453; }
.phone-shift { padding: 17px 15px; margin-top: 18px; border: 1px solid #cdd7b8; border-radius: 6px; background: #edf2e2; }
.phone-shift > strong { display: block; font-family: var(--serif); font-size: 1.7rem; font-weight: 400; line-height: 1.5; margin-top: 5px; letter-spacing: -.025em; }
.phone-shift > span { display: block; font-size: .8125rem; color: #60754f; line-height: 1.8; margin-top: 4px; }
.phone-work-tasks { list-style: none; margin-top: 13px; }
.phone-work-tasks > li { display: flex; gap: 11px; align-items: flex-start; padding: 15px 0; border-bottom: 1px solid #dfe2ca; }
.phone-work-tasks .icon { width: 21px; height: 21px; color: #687e4b; margin-top: 2px; }
.phone-work-tasks strong { display: block; font-size: .8125rem; line-height: 1.6; font-weight: 650; }
.phone-work-tasks span { display: block; margin-top: 4px; font-size: .75rem; line-height: 1.6; color: #677650; }
.phone-time-off { padding: 15px; margin-top: 18px; border: 1px solid #ddcea3; border-radius: 6px; background: #f4eedb; }
.phone-time-off strong { display: block; font-size: .875rem; line-height: 1.65; margin-top: 5px; font-weight: 650; color: #705a16; }
.phone-time-off > p:last-child { font-size: .75rem; line-height: 1.8; margin-top: 6px; color: #756c41; }
.phone-base { display: flex; justify-content: center; padding: 23px 0 12px; }
.phone-base > span { width: 78px; height: 4px; border-radius: 9px; background: #bac4a6; }

/* Deck imagery adds context to the existing, explicitly planned document workflow. */
.document-callout.document-callout--photographic {
  grid-template-columns: minmax(225px, .86fr) minmax(0, 1.34fr);
  gap: 0 31px;
  align-items: center;
  padding: 0;
  overflow: hidden;
}
.document-callout--photographic .document-photo { position: relative; grid-row: 1 / span 2; align-self: stretch; margin: 0; min-width: 0; }
.document-photo > img { width: 100%; height: 100%; min-height: 280px; object-fit: cover; }
.document-photo > figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 17px 13px; background: linear-gradient(transparent,rgba(0,31,20,.77)); color: #fff9e7; font-size: .75rem; line-height: 1.7; }
.document-callout--photographic .document-callout-copy { min-width: 0; padding: 29px 29px 0 0; }
.document-callout--photographic .document-steps { grid-column: 2; padding: 18px 29px 27px 0; margin: 0; justify-self: start; font-size: .75rem; }
.transition-photo { max-width: 470px; margin-top: 28px; }
.transition-photo > img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--border); border-radius: 6px; }
.transition-photo > figcaption { margin-top: 10px; color: var(--muted); font-size: .75rem; line-height: 1.8; }

@media (max-width: 1050px) {
  .phone-story-grid { grid-template-columns: minmax(0, 1fr) minmax(300px, .88fr); gap: 35px; }
  .phone-story--club .phone-story-grid { grid-template-columns: minmax(300px, .88fr) minmax(0, 1fr); }
  .phone-story-content > h3 { font-size: 2.8rem; }
  .phone-story-intro { font-size: .87rem; }
  .phone-story-photo figcaption,.phone-story-note { font-size: .75rem; }
  .phone-preview { max-width: 344px; }
  .phone-content { padding-inline: 16px; }
  .phone-app-header { padding-inline: 16px; }
  .phone-screen-heading h4 { font-size: 1.75rem; }
  .document-callout.document-callout--photographic { grid-template-columns: minmax(190px,.8fr) minmax(0,1.3fr); gap: 0 24px; }
  .document-callout--photographic .document-callout-copy { padding-top: 25px; padding-right: 24px; }
  .document-callout--photographic .document-steps { padding-right: 24px; padding-bottom: 24px; }
}
@media (max-width: 820px) {
  .phone-story { margin-bottom: 54px; }
  .phone-story-grid,.phone-story--club .phone-story-grid { grid-template-columns: 1fr; gap: 32px; }
  .phone-story-content { max-width: 650px; }
  .phone-story-content > h3 { font-size: 3.1rem; }
  .phone-story-intro { max-width: 620px; font-size: .89rem; margin-top: 21px; }
  .phone-story-photo { margin-top: 24px; }
  .phone-story-photo img { max-height: 350px; }
  .phone-story-note { margin-top: 18px; }
  .phone-preview { width: min(100%, 364px); max-width: none; }
  .phone-story--club { margin-top: 52px; padding-top: 43px; }
  .phone-story--club .phone-story-content,.phone-story--club .phone-preview { grid-column: auto; grid-row: auto; }
  .phone-story--club .phone-preview { justify-self: center; }
  .phone-content { padding-inline: 18px; }
  .phone-app-header { padding-inline: 18px; }
  .document-callout.document-callout--photographic { grid-template-columns: minmax(175px,.8fr) minmax(0,1.3fr); gap: 0 21px; }
  .document-photo > img { min-height: 325px; }
  .document-callout--photographic .document-callout-copy { padding-top: 23px; padding-right: 21px; }
  .document-callout--photographic .document-steps { padding-right: 21px; padding-bottom: 23px; }
}
@media (max-width: 640px) {
  .phone-story { margin-top: 0; margin-bottom: 44px; }
  .phone-story-content > h3 { font-size: clamp(2.3rem,8.2vw,3.1rem); margin-top: 14px; }
  .phone-story-content > .eyebrow { font-size: .59rem; }
  .phone-story-intro { font-size: .84rem; line-height: 1.9; margin-top: 18px; }
  .phone-story-photo { margin-top: 22px; }
  .phone-story-photo img { border-radius: 6px; }
  .phone-story-photo figcaption { margin-top: 9px; font-size: .75rem; }
  .phone-story-note { gap: 10px; font-size: .75rem; margin-top: 17px; }
  .phone-story-note > .icon { width: 20px; height: 20px; }
  .phone-story-grid { gap: 29px; }
  .phone-preview-label { font-size: .75rem; margin-bottom: 12px; }
  .phone-story--club { margin-top: 43px; padding-top: 38px; }
  .phone-story--club .phone-story-content > .eyebrow { max-width: 360px; line-height: 1.9; }
  .document-callout.document-callout--photographic { grid-template-columns: 1fr; gap: 0; }
  .document-callout--photographic .document-photo { grid-row: auto; }
  .document-photo > img { height: auto; min-height: 0; aspect-ratio: 16 / 9; }
  .document-photo > figcaption { padding-inline: 20px; }
  .document-callout--photographic .document-callout-copy { padding: 24px 22px 0; }
  .document-callout--photographic .document-steps { grid-column: 1; padding: 17px 22px 24px; }
  .transition-photo { max-width: none; margin-top: 24px; }
  .transition-photo > figcaption { font-size: .75rem; }
}
@media (max-width: 400px) {
  .phone-story-content > h3 { font-size: 2.28rem; line-height: 1.12; }
  .phone-story-intro { font-size: .8rem; }
  .phone-device { padding: 7px; border-radius: 32px; }
  .phone-screen { border-radius: 19px 19px 24px 24px; }
  .phone-hardware { margin-bottom: 5px; }
  .phone-app-header { padding: 15px 13px; gap: 9px; }
  .phone-app-header > img { width: 29px; height: 29px; flex-basis: 29px; }
  .phone-wordmark { font-size: 1.3rem; }
  .phone-content { padding: 18px 13px 0; }
  .phone-screen-heading h4 { font-size: 1.67rem; }
  .phone-tabs { gap: 3px; padding: 3px; margin-block: 20px; }
  .phone-tabs button { padding: 10px 3px; font-size: .75rem; }
  .phone-itinerary > li { gap: 9px; }
  .phone-event-day { flex-basis: 37px; }
  .phone-itinerary strong { font-size: .8125rem; }
  .phone-task-card { padding: 13px; }
  .phone-task-card > div { gap: 8px; }
  .phone-person { flex-basis: 28px; width: 28px; height: 28px; }
  .phone-money-summary { padding: 17px 14px; }
  .phone-money-summary > strong { font-size: 2.9rem; }
  .phone-cost-list > div { gap: 10px; }
  .phone-cost-list dt { font-size: .75rem; }
  .phone-cost-list dd { font-size: .8125rem; }
  .phone-spend-ring > svg { width: 188px; }
  .phone-shift > strong { font-size: 1.47rem; }
  .phone-linked-question { padding: 13px; }
  .phone-linked-question blockquote { font-size: 1.06rem; }
  .document-callout--photographic .document-callout-copy { padding: 22px 20px 0; }
  .document-callout--photographic .document-steps { padding: 16px 20px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .phone-tabs button { transition: none; }
}