/* A quieter visual system: three consistent line icons and two brand arches. */
.benefit-icon {
  background: #e5eee0;
  outline: none;
  border: none;
  border-radius: 50%;
  color: #3f674c;
}
.benefit-icon svg { stroke-width: 1.5; }
.orbit, .handwritten, .hostel-section::after { display: none; }
.ribbon span:nth-child(even) { display: none; }
.photo-card, .brand-card, .floating-note, .product-phone, .product-caption {
  transform: none;
}
.hero-note { gap: 0; }
.feature-section { background: var(--cream); }
.spritz-frame {
  margin: 20px 22px 0 0;
  padding: 0 0 35px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}
.spritz-frame::before {
  content: '';
  position: absolute;
  top: -20px;
  right: -22px;
  bottom: 65px;
  left: 38px;
  background: var(--green);
  border-radius: 12px;
  z-index: -1;
}
.spritz-frame .activity-visual {
  height: 465px;
  border-radius: 10px;
}
.frame-caption {
  left: 0;
  bottom: 0;
  color: var(--muted);
  font-weight: 400;
}
.spritz-frame .activity-caption { left: 26px; bottom: 28px; }
.product-arch { transform: none; }
@media (max-width:1100px) {
  .spritz-frame .activity-visual { height: 430px; }
}
@media (max-width:760px) {
  .spritz-frame { margin: 16px 16px 0 0; padding-bottom: 30px; }
  .spritz-frame::before { top: -16px; right: -16px; bottom: 55px; left: 30px; border-radius: 10px; }
  .spritz-frame .activity-visual { height: 375px; border-radius: 8px; }
  .spritz-frame .activity-caption { left: 20px; bottom: 25px; }
  .frame-caption { left: 0; bottom: 0; font-size: 12px; }
}
/* Concept 06: an open conversation loop, imperfect washes and one note style. */
.brand-shapes { position: absolute; overflow: hidden; pointer-events: none; }
.connection-loop { position: absolute; pointer-events: none; }
.hero-art { isolation: isolate; }
.hero-loop {
  width: 100%; height: 100%; inset: 0;
  color: #c9ceea; transform: rotate(-12deg); z-index: -1;
}
.hero-art .photo-card {
  transform: rotate(-6deg); top: 120px; left: 6px;
  width: 300px; height: 350px; padding: 8px;
  box-shadow: 0 12px 28px #23382b12;
}
.hero-art .photo-card::after { display: none; }
.hero-art .brand-card { transform: rotate(5deg); top: 65px; right: 12px; }
.brand-card p { margin-bottom: 0; }
.message-card {
  display: flex; align-items: center; justify-content: space-between; gap: 26px;
  padding: 17px 22px; background: #fff; border: 1px solid #e3e8df;
  border-radius: 14px; box-shadow: 0 7px 22px #283d2d06;
  width: fit-content; max-width: 100%; color: var(--ink);
}
.message-card strong, .message-card div > span { display: block; }
.message-card strong { font-size: 15px; font-weight: 600; line-height: 1.45; }
.message-card div > span { font-size: 13px; color: var(--muted); line-height: 1.5; margin-top: 4px; }
.message-card > span { font-size: 22px; font-weight: 400; }
.hero-art .floating-note { left: 90px; bottom: 0; transform: none; }
.experience { overflow: visible; }
.benefits-loop {
  width: 185px; height: 200px; right: -20px; top: 15px;
  color: #dce7d5; transform: rotate(14deg); opacity: .65; z-index: -1;
}
.hand-mark { position: relative; white-space: nowrap; isolation: isolate; }
.hand-mark::after {
  content: ''; position: absolute; height: .24em; left: -3%; right: -3%; bottom: .03em;
  background: #c4dcb9; border-radius: 70% 35% 55% 30%; transform: rotate(-2.6deg); z-index: -1;
}
.journey { gap: 40px; }
.benefit-icon {
  width: 80px; height: 75px; margin: 8px 0 27px; position: relative; isolation: isolate;
  background: none; color: var(--ink); border-radius: 0;
}
.benefit-icon::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: #bfd6b7; border-radius: 42% 54% 38% 58%; transform: rotate(-9deg);
}
.benefit-icon--people::before { background: #bdc4e7; transform: rotate(8deg); border-radius: 56% 40% 54% 37%; }
.benefit-icon--chat::before { background: #d3e2c5; transform: rotate(-5deg); border-radius: 37% 55% 43% 52%; }
.benefit-icon svg { width: 37px; height: 37px; transform: rotate(-4deg); stroke-width: 1.45; }
.benefit-icon--people svg { transform: rotate(3deg); }
.benefit-icon--chat svg { transform: rotate(-3deg); }
.journey .number { border: none; padding-top: 0; color: #63715e; font-size: 11px; letter-spacing: 1px; }
.benefits-signoff { margin-top: 38px; display: flex; justify-content: flex-end; }
@media(max-width:1100px) {
  .hero-art .photo-card { width: 270px; height: 335px; }
  .hero-art .floating-note { left: 65px; }
  .benefits-loop { right: 0; width: 145px; }
}
@media(max-width:760px) {
  .hero-loop { width: 100%; height: 100%; transform: rotate(-10deg); }
  .hero-art .photo-card { width: 225px; height: 290px; left: 4px; top: 125px; transform: rotate(-6deg); }
  .hero-art .brand-card { width: 185px; right: 10px; top: 45px; }
  .hero-art .floating-note { left: 42px; bottom: 0; }
  .message-card { padding: 15px 18px; gap: 20px; }
  .message-card strong { font-size: 14px; }
  .message-card div > span { font-size: 12px; }
  .benefits-loop { right: -3px; top: 28px; width: 110px; height: 120px; opacity: .48; }
  .benefit-icon { width: 72px; height: 66px; margin-bottom: 23px; }
  .benefit-icon svg { width: 34px; height: 34px; }
  .journey { gap: 35px; }
  .benefits-signoff { margin-top: 32px; justify-content: flex-start; }
}
/* Concept 07 — a single green curve and softly squared action buttons. */
.hero-loop { color: var(--green); opacity: .9; transform: rotate(-9deg); }
.benefits-loop { color: var(--green); opacity: .3; transform: rotate(14deg); }
.button {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: 14px; background: var(--ink); color: #fff;
  transition: transform .32s cubic-bezier(.2,.8,.2,1), box-shadow .32s ease, color .25s ease;
}
.button.small { border-radius: 12px; }
.button::before {
  content: ''; position: absolute; inset: -2px; z-index: -1;
  background: var(--green); transform: translateX(-108%) skewX(-12deg);
  transform-origin: left center;
  transition: transform .42s cubic-bezier(.22,.8,.2,1);
}
.button > span { display: inline-block; transition: transform .32s cubic-bezier(.2,.8,.2,1); }
.button.light { background: #dfe9d9; color: var(--ink); }
.screen-tabs button {
  border-radius: 12px;
  transition: background .22s ease, color .22s ease, border-color .22s ease, transform .22s ease;
}
.inline-link > span { display: inline-block; transition: transform .25s ease; }
.text-button .play { transition: background .25s ease, border-color .25s ease, transform .25s ease; }
@media (hover:hover) and (pointer:fine) {
  .button:hover { background: var(--ink); color: var(--ink); transform: translateY(-3px); box-shadow: 0 8px 18px #2c3d351b; }
  .button:hover::before { transform: translateX(0) skewX(0); }
  .button:hover > span { transform: translate(4px,-3px) rotate(8deg); }
  .button.light:hover { background: #dfe9d9; }
  .screen-tabs button:hover { background: #e2eddd; border-color: #a9c5a5; transform: translateY(-2px); color: var(--ink); }
  .screen-tabs button.active:hover { background: #3f674c; color: #fff; border-color: #3f674c; }
  .inline-link:hover > span { transform: translate(4px,-3px); }
  .text-button:hover .play { background: #e2eddd; border-color: var(--green); transform: scale(1.08); }
}
.button:active { transform: translateY(0) scale(.98); box-shadow: none; }
@media (prefers-reduced-motion:reduce) {
  .button, .button::before, .button > span, .screen-tabs button, .inline-link > span, .text-button .play { transition: none; }
  .button:hover, .button:hover > span, .screen-tabs button:hover, .inline-link:hover > span, .text-button:hover .play, .button:active { transform: none; }
}