main {
      max-width: 80rem;
      margin: 0 auto;
      padding: 2rem 1rem 3rem;
    }
    @media (min-width: 640px) {
      main { padding: 3rem 1.5rem 4rem; }
    }

    .stay-card {
      overflow: hidden;
      border-radius: var(--radius-2xl);
      border: 1px solid var(--hh-border);
      background: white;
      box-shadow: var(--shadow-sm);
    }

    /* Welcome banner — #302782 from GuestStayExperience */
    .welcome-banner {
      position: relative;
      overflow: hidden;
      padding: 2rem 1.75rem;
      color: white;
      background: var(--gp-banner);
    }
    @media (min-width: 768px) { .welcome-banner { padding: 2.5rem 2.5rem; } }
    .welcome-banner::before {
      content: "";
      position: absolute;
      inset: 0;
      opacity: 0.05;
      background-image: repeating-linear-gradient(45deg, #fff 0, #fff 1px, transparent 0, transparent 50%);
      background-size: 8px 8px;
      pointer-events: none;
    }
    .welcome-inner { position: relative; z-index: 1; }
    .welcome-eyebrow {
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.25em;
      color: rgba(255,255,255,0.5);
      margin-bottom: 0.5rem;
    }
    .welcome-title {
      font-family: var(--font-serif);
      font-size: clamp(1.5rem, 3vw, 1.875rem);
      font-weight: 300;
      line-height: 1.3;
      margin-bottom: 0.65rem;
    }
    .welcome-sub {
      font-size: 14px;
      font-weight: 300;
      color: rgba(255,255,255,0.7);
      max-width: 36rem;
      line-height: 1.6;
    }
    .weather-row {
      display: flex;
      flex-wrap: wrap;
      gap: 0.65rem;
      margin-top: 1.5rem;
    }
    .weather-chip {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem 1rem;
      border-radius: var(--radius-xl);
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.2);
      font-size: 13px;
    }
    .weather-chip span:first-child { opacity: 0.6; font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; }
    .pill-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.25rem; }
    .status-pill {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      padding: 0.45rem 1rem;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.2);
      background: rgba(255,255,255,0.1);
      font-size: 14px;
      font-weight: 500;
    }
    .status-dot {
      width: 8px; height: 8px;
      border-radius: 50%;
      background: #f75b5b;
    }

    .stay-section { border-top: 1px solid var(--hh-border); padding: 1.25rem 1.5rem; }
    @media (min-width: 768px) { .stay-section { padding: 1.25rem 2rem; } }

    /* StayMeta grid */
    .meta-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
    }
    @media (min-width: 640px) {
      .meta-grid { grid-template-columns: repeat(4, 1fr); }
    }
    .meta-grid > div {
      padding: 1rem 1.25rem;
      border-right: 1px solid var(--hh-border);
      border-bottom: 1px solid var(--hh-border);
    }
    @media (min-width: 640px) {
      .meta-grid > div { border-bottom: none; }
      .meta-grid > div:last-child { border-right: none; }
    }
    .meta-label {
      display: flex;
      align-items: center;
      gap: 0.35rem;
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      color: var(--hh-muted);
      margin-bottom: 0.25rem;
    }
    .meta-value { font-size: 14px; font-weight: 500; }

    /* Property hero stub */
    .property-hero {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0;
    }
    @media (min-width: 768px) {
      .property-hero { grid-template-columns: 1.2fr 1fr; }
    }
    .property-hero img {
      width: 100%;
      height: 200px;
      object-fit: cover;
    }
    @media (min-width: 768px) {
      .property-hero img { height: 100%; min-height: 220px; }
    }
    .property-info {
      padding: 1.25rem 1.5rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .property-info h3 {
      font-family: var(--font-serif);
      font-size: 1.35rem;
      font-weight: 300;
      margin-bottom: 0.35rem;
    }
    .property-info p { font-size: 14px; color: var(--hh-muted); }

    /* ——— Day plan section (new in guest portal) ——— */
    .day-plan-section {
      border-top: 1px solid var(--hh-border);
      padding: 1.25rem 1.5rem 1.5rem;
    }
    @media (min-width: 768px) { .day-plan-section { padding: 1.5rem 2rem 2rem; } }

    .day-plan-header {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 1rem;
    }
    .day-plan-header h3 {
      font-family: var(--font-serif);
      font-size: 1.25rem;
      font-weight: 600;
    }
    .day-plan-header p {
      font-size: 13px;
      color: var(--hh-muted);
      margin-top: 0.25rem;
      max-width: 28rem;
    }
    .today-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--hh-green);
      background: #fde8e9;
      padding: 0.35rem 0.65rem;
      border-radius: 999px;
    }

    .gp-day-tabs {
      display: flex;
      gap: 0.35rem;
      flex-wrap: wrap;
      margin-bottom: 1.25rem;
    }
    .gp-day-tab {
      border: 1px solid var(--hh-border);
      background: var(--hh-stone);
      padding: 0.45rem 0.85rem;
      border-radius: 8px;
      font-size: 12px;
      font-family: inherit;
      cursor: pointer;
      color: var(--hh-muted);
      text-align: left;
    }
    .gp-day-tab.active {
      background: white;
      border-color: var(--hh-green);
      color: var(--hh-charcoal);
      box-shadow: var(--shadow-sm);
    }
    .gp-day-tab .sub {
      display: block;
      font-size: 10px;
      color: var(--hh-muted);
      margin-top: 0.1rem;
    }
    .gp-day-tab.active .sub { color: var(--hh-green); }
    .gp-day-tab.is-today { border-color: var(--hh-green); }
    .gp-day-tab.is-today:not(.active)::before {
      content: "● ";
      color: var(--hh-green);
      font-size: 8px;
    }

    .gp-day-panel { display: none; }
    .gp-day-panel.active { display: block; }

    .compact-timeline .slot-content {
      padding: 0.75rem 0.9rem;
    }

    .happening-stub {
      margin-top: 2rem;
    }
    .happening-stub a {
      font-size: 14px;
      font-weight: 500;
    }

    .back-home {
      margin-top: 2rem;
      font-size: 14px;
      font-weight: 500;
    }

    .mockup-note {
      margin-top: 1.5rem;
      padding: 0.85rem 1rem;
      background: var(--hh-stone);
      border-radius: var(--radius-xl);
      font-size: 12px;
      color: var(--hh-muted);
      border: 1px dashed var(--hh-border);
    }
    .template-badge {
      display: inline-block;
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--hh-green);
      background: #fde8e9;
      padding: 0.35rem 0.65rem;
      border-radius: 999px;
      margin-bottom: 0.5rem;