/*
  Audience pages (/idioktites/): layout and the small product pictures.
  Semantic tokens only, no borders, same rules as components.css.
*/

/* Header: brand and button stay on one line at phone width */
.header-inner .brand, .header-inner > .btn { white-space: nowrap; }

/* Hero: words left, one product picture right */
.hero { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--space-8); align-items: center; padding-block: var(--space-8) var(--space-9); }
.hero .badge { margin-bottom: var(--space-5); }
.hero .lead { margin-top: var(--space-5); max-width: 34rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.hero .checks { margin-top: var(--space-6); }
.hero-pic { justify-self: center; width: 100%; max-width: 420px; }
.hero .receipt-wrap { max-width: 400px; width: 100%; justify-self: center; transform: rotate(2deg); }
.js .receipt-wrap:not(.in) .receipt { --strike: 0; --stamp: 0; }

.section-intro { max-width: 46rem; margin-bottom: var(--space-8); }
.section-intro .lead { margin-top: var(--space-4); }

/* Reasons: one promise per row, the picture alternates sides */
.reasons { display: grid; gap: var(--space-9); }
.reason { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center; }
.reason:nth-child(even) > .panel { order: -1; }
.reason .h2 { margin-top: var(--space-3); }
.reason .lead { margin-top: var(--space-4); }
.reason .checks { margin-top: var(--space-5); }
.reason-n { display: inline-flex; align-items: center; gap: var(--space-3); }
.panel { padding: var(--space-6); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-md); }
.band-surface .panel { background: var(--color-bg); }
.panel-title { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }

/* Listing card (a picture of the product, filled with an example) */
.listing { overflow: hidden; padding: 0; }
.photo { position: relative; aspect-ratio: 4 / 3; background: linear-gradient(160deg, var(--color-surface-sunken), var(--color-surface-strong)); }
.photo::after { content: ""; position: absolute; inset: 30% 34%; background: var(--color-surface); opacity: 0.7;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8l6-5 6 5v6H2z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8l6-5 6 5v6H2z'/%3E%3C/svg%3E") center / contain no-repeat; }
.plan { display: grid; gap: var(--space-1); padding: var(--space-7) var(--space-4) var(--space-4); grid-template: "s s k" 1fr "s s b" 1fr "m u u" 1fr / 1fr 1fr 1fr; background: var(--color-surface-strong); }
.plan::after { content: none; }
.plan i { display: grid; place-items: end start; padding: var(--space-2); border-radius: var(--radius-sm); background: var(--color-surface-sunken); font-style: normal; font-size: var(--text-xs); color: var(--color-text-muted); }
.plan .room-s { grid-area: s; } .plan .room-k { grid-area: k; } .plan .room-u { grid-area: u; } .plan .room-b { grid-area: b; }
.plan .room-m { grid-area: m; background: var(--color-success-soft); color: var(--color-success-text); }
.photo .badge { position: absolute; z-index: 1; top: var(--space-4); }
.photo .badge:first-child { left: var(--space-4); }
.photo .badge + .badge { right: var(--space-4); background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-sm); }
.listing-body { padding: var(--space-5) var(--space-6) var(--space-6); }
.listing-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); }
.listing-price { font-size: var(--text-xl); font-weight: var(--weight-semibold); font-variation-settings: var(--flare-heading); white-space: nowrap; }
.listing-meta { margin-top: var(--space-1); }
.listing-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.listing-row .slot { padding-inline: var(--space-3); }
.example { margin-top: var(--space-3); text-align: center; }

/* Room-by-room scan */
.rooms { list-style: none; display: grid; gap: var(--space-2); }
.rooms li { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-surface-sunken); font-size: var(--text-sm); }
.rooms .tick { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--color-success); color: var(--color-text-on-brand); }
.rooms .tick svg, .doc .tick svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.rooms li.now { background: var(--color-surface); box-shadow: var(--shadow-sm); }
.rooms li.now .tick { background: var(--color-brand); }
.rooms li.todo .tick { background: var(--color-surface-strong); }
.scan-foot { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); align-items: center; margin-top: var(--space-6); }
.dial { width: 72px; height: 72px; }
.dial circle { fill: none; stroke-width: 6; }
.dial .track { stroke: var(--color-surface-strong); }
.dial .arc { stroke: var(--color-success); stroke-linecap: round; stroke-dasharray: 188 220; transform: rotate(-90deg); transform-origin: center; }
.dial text { fill: var(--color-text); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-semibold); }

/* Week of viewing times */
.week { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-2); }
.week .d { display: grid; gap: var(--space-2); align-content: start; }
.week .d > span { text-align: center; font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-text-muted); }
.slot { display: block; font-style: normal; padding: var(--space-2) 0; border-radius: var(--radius-sm); background: var(--color-surface-sunken); text-align: center; font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.slot.free { background: var(--color-brand-soft); color: var(--color-brand-strong); font-weight: var(--weight-medium); }
.slot.booked { background: var(--color-success); color: var(--color-text-on-brand); font-weight: var(--weight-semibold); }
.slot.off { background: none; color: var(--color-text-subtle); }
.invite { display: flex; gap: var(--space-3); align-items: center; margin-top: var(--space-5); padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-success-soft); color: var(--color-success-text); font-size: var(--text-sm); }
.invite svg { flex: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Match: one score, the reasons under it */
.match-head { display: flex; align-items: center; gap: var(--space-4); }
.match-score { font-size: var(--text-2xl); font-weight: var(--weight-semibold); line-height: 1; color: var(--color-success-text); font-variation-settings: var(--flare-heading); }
.factors { list-style: none; display: grid; gap: var(--space-3); margin-top: var(--space-5); }
.factors li { display: grid; grid-template-columns: 7.5rem 1fr; align-items: center; gap: var(--space-3); font-size: var(--text-sm); }
.factors .meter { height: 10px; border-radius: var(--radius-pill); background: var(--color-surface-strong); overflow: hidden; }
.factors .meter i { display: block; height: 100%; width: var(--v); border-radius: inherit; background: var(--color-success); }
.people { display: flex; gap: var(--space-2); margin-top: var(--space-5); }
.people i { width: 34px; height: 34px; border-radius: 50%; background: var(--color-surface-strong);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4.5'/%3E%3Cpath d='M3 22c0-5 4-8 9-8s9 3 9 8z'/%3E%3C/svg%3E") center / 80% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4.5'/%3E%3Cpath d='M3 22c0-5 4-8 9-8s9 3 9 8z'/%3E%3C/svg%3E") center / 80% no-repeat; }
.people i.on { background: var(--color-success); }

/* Paperwork checklist */
.docs { display: grid; gap: var(--space-3); }
.doc { display: grid; grid-template-columns: 40px 1fr; gap: var(--space-4); align-items: center; padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-surface-sunken); }
.doc .tick { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--color-success); color: var(--color-text-on-brand); }
.doc b { display: block; font-weight: var(--weight-medium); }
.doc span { font-size: var(--text-sm); color: var(--color-text-muted); }

/* Numbers band */
.proof .stat-strip { margin-top: var(--space-7); }
.proof .note { margin-top: var(--space-6); max-width: 46rem; }
.proof .more-link { margin-top: var(--space-5); }

/* Small promises, three across */
.promises { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-7); }
.promise { padding: 0; background: none; box-shadow: none; }
.promise .milestone-icon { width: 48px; height: 48px; background: var(--color-success-soft); color: var(--color-success-text); box-shadow: none; }
.promise .milestone-icon svg { width: 22px; height: 22px; }
.promise p { margin-top: var(--space-2); color: var(--color-text-muted); font-size: var(--text-md); }

/* How it works */
#pos .milestone-icon { box-shadow: 0 0 0 8px var(--color-surface), var(--shadow-md); }
.day { display: block; margin-bottom: var(--space-1); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-brand); }
.milestone p { margin-top: var(--space-1); }

/* Questions */
.faq-layout { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: var(--space-8); align-items: start; }
.faq-layout .lead { margin-top: var(--space-4); }

/* Closing call */
.closer { text-align: center; }
.closer .lead { margin: var(--space-5) auto 0; max-width: 36rem; color: inherit; opacity: 0.9; }
.closer .hero-actions { justify-content: center; }
.band-deep .btn-primary { background: var(--color-surface); color: var(--color-brand-strong); }
.band-deep .btn-primary:hover { background: var(--color-surface-sunken); }
.band-deep .btn-ghost { color: var(--color-text-on-brand); }
.band-deep .btn-ghost:hover { background: var(--color-brand); }

/* Footer */
.footer { padding-block: var(--space-7); }
.footer-inner { display: grid; grid-template-columns: 1fr auto; gap: var(--space-4); align-items: end; }
.footer .brand-mark { background: var(--color-text-on-brand); }
.footer .brand-mark svg { fill: var(--color-brand-strong); }
.footer-inner p + p { margin-top: var(--space-2); }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }

/* Savings calculator (renters) */
.calc-rent { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 var(--space-4); color: var(--color-text-muted); }
.calc-rent output { font-size: var(--text-2xl); font-weight: var(--weight-semibold); color: var(--color-text); font-variation-settings: var(--flare-heading); }
.calc-scale { display: flex; justify-content: space-between; margin-top: var(--space-2); }
.calc-bars { margin-top: var(--space-6); }
.calc-bars .bar { transition: width 300ms var(--ease); white-space: nowrap; }
.saving { margin-top: var(--space-5); padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); background: var(--color-success-soft); color: var(--color-success-text); }
.saving b { font-size: var(--text-xl); font-weight: var(--weight-semibold); }

@media (max-width: 960px) {
  .hero, .reason, .faq-layout { grid-template-columns: 1fr; }
  .reason:nth-child(even) > .panel { order: 0; }
  .hero { padding-block: var(--space-7); gap: var(--space-7); }
  .reasons { gap: var(--space-8); }
  .promises { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .panel { padding: var(--space-5); }
  .listing-body { padding: var(--space-4) var(--space-5) var(--space-5); }
  .factors li { grid-template-columns: 6.5rem 1fr; }
}