/* ========================================================================
   foititospoito · landing-page styles
   ======================================================================== */

/* ----------  Top nav  ---------- */
/* Background is fully opaque (not the previous 88% translucent + blur)
   so the brand icon doesn't appear to "float into" content underneath
   when scrolling past the listing-detail map. The old translucent +
   backdrop-blur looked elegant but read as a visual bug because the
   terracotta brand-mark blended with whatever scrolled past below it. */
.nav{
  position:sticky; top:0; z-index:1000;
  background:var(--c-bg);
  border-bottom:1px solid var(--c-line-2);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  height:74px;
  gap:24px;
}
.brand{
  display:inline-flex; align-items:center; gap:10px;
  font-weight:800; font-size:20px; letter-spacing:-0.01em;
  color:var(--c-ink);
}
.brand-mark{
  width:34px; height:34px; border-radius:9px;
  background:var(--c-primary);
  color:#fff;
  display:grid; place-items:center;
  font-weight:800; font-size:18px;
  position:relative;
  overflow:hidden;
}
.brand-mark svg{ width:22px; height:22px }
.nav-links{
  display:flex; gap:30px;
  font-size:15px; font-weight:500; color:var(--c-ink-2);
}
.nav-links a:hover{ color:var(--c-ink) }
.nav-actions{ display:flex; align-items:center; gap:14px }

/* ----  Mobile burger menu (CSS-only via :checked toggle)  ----
   The burger button and the checkbox that drives it both live inside
   .nav-inner; the menu drawer appears below the sticky nav when
   #nav-toggle is checked. No JS required — clicking the label flips
   the checkbox, and .nav-toggle-input:checked ~ .nav-links opens it. */
.nav-toggle-input{ display:none; }
.nav-burger{
  display:none;  /* desktop default — overridden in the mobile media query */
  width:42px; height:42px;
  align-items:center; justify-content:center;
  flex-direction:column; gap:5px;
  cursor:pointer;
  background:transparent; border:0;
  border-radius:8px;
  padding:0;
}
.nav-burger:hover{ background:var(--c-line-2); }
.nav-burger span{
  display:block;
  width:22px; height:2px;
  background:var(--c-ink);
  border-radius:2px;
  transition:transform .2s ease, opacity .2s ease;
}
/* Animate the burger lines into an "X" when the menu is open */
.nav-toggle-input:checked ~ .nav-burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle-input:checked ~ .nav-burger span:nth-child(2){ opacity:0; }
.nav-toggle-input:checked ~ .nav-burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* Mobile layout: hide inline links by default, show burger, open as drawer */
@media (max-width:880px){
  .nav-inner{ flex-wrap:wrap; row-gap:0; }
  .nav-burger{ display:inline-flex; order:3; margin-left:auto; }
  .nav-actions{ order:2; }
  .nav-actions .nav-cta{ display:none; }  /* CTA shown inside the drawer instead */
  .nav-links{
    order:4;
    flex-basis:100%;
    display:none;  /* hidden until burger flips the toggle */
    flex-direction:column;
    gap:0;
    margin:8px -16px -8px;
    padding:8px 0;
    border-top:1px solid var(--c-line-2);
    background:var(--c-bg);
  }
  .nav-links a{
    padding:14px 24px;
    font-size:16px;
    color:var(--c-ink);
    border-bottom:1px solid var(--c-line-2);
  }
  .nav-links a:last-child{ border-bottom:0; }
  .nav-toggle-input:checked ~ .nav-links{ display:flex; }
  /* Show a copy of the CTA inside the drawer, full-width, after the links */
  .nav-toggle-input:checked ~ .nav-links::after{
    content:'';
  }
}
.lang-toggle{
  display:inline-flex; align-items:center; gap:2px;
  background:var(--c-line-2);
  padding:3px; border-radius:var(--r-pill);
  font-size:12px; font-weight:700; letter-spacing:.04em;
}
.lang-toggle button{
  appearance:none; background:transparent; border:0;
  padding:6px 12px; border-radius:var(--r-pill);
  cursor:default;
  color:var(--c-muted);
}
.lang-toggle button.is-on{ background:var(--c-ink); color:var(--c-bg) }

/* ----------  Hero  ---------- */
.hero{
  padding:48px 0 80px;
  position:relative;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.05fr 1fr;
  gap:64px;
  align-items:center;
}
.hero-text .h-1{ margin-top:18px }
.hero-text .lead{ margin-top:22px; max-width:560px }
.hero-cta{ display:flex; gap:12px; margin-top:32px; flex-wrap:wrap }

/* Hero search card */
.search{
  background:var(--c-card);
  border:1px solid var(--c-line);
  border-radius:var(--r-lg);
  padding:8px;
  margin-top:36px;
  box-shadow:var(--sh-md);
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr auto;
  gap:1px;
  background-color:var(--c-line);
}
.search-cell{
  background:var(--c-card);
  padding:14px 18px;
  display:flex; flex-direction:column; gap:2px;
  border-radius:var(--r-md);
}
.search-cell:first-child{ border-radius:var(--r-md) 6px 6px var(--r-md) }
.search-cell label{
  font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--c-muted);
}
.search-cell .val{ font-size:15px; font-weight:600; color:var(--c-ink) }
.search-cell .placeholder{ color:var(--c-muted); font-weight:500 }
.search-go{
  background:var(--c-primary); color:#fff;
  width:60px; align-self:stretch;
  display:grid; place-items:center;
  border-radius:var(--r-md);
  font-size:22px;
}

/* Hero photo collage */
.hero-photos{
  position:relative;
  height:560px;
}
.hero-photos .photo{
  position:absolute;
  box-shadow:var(--sh-lg);
  border:6px solid #fff;
}
.hero-photo-1{ left:0; top:0; width:62%; height:62%; transform:rotate(-2deg) }
.hero-photo-2{ right:0; top:18%; width:46%; height:46%; transform:rotate(3deg) }
.hero-photo-3{ left:12%; bottom:0; width:50%; height:42%; transform:rotate(2deg); z-index:2 }

/* Hero badges floating on photos */
.float-badge{
  position:absolute;
  background:var(--c-card);
  border:1px solid var(--c-line);
  border-radius:var(--r-md);
  padding:12px 14px;
  box-shadow:var(--sh-md);
  display:flex; align-items:center; gap:10px;
  font-size:13px; font-weight:600;
  z-index:3;
}
.float-badge .dot{
  width:32px; height:32px; border-radius:50%;
  background:var(--c-primary-soft); color:var(--c-primary);
  display:grid; place-items:center;
  font-weight:800; font-size:14px;
}
.fb-1{ left:-30px; top:38%; }
.fb-2{ right:-20px; bottom:14%; }

/* Hero variations */
html[data-hero="editorial"] .hero-grid{ grid-template-columns:1fr; gap:32px }
html[data-hero="editorial"] .hero-text{ text-align:center; max-width:920px; margin:0 auto }
html[data-hero="editorial"] .hero-text .lead{ margin-left:auto; margin-right:auto }
html[data-hero="editorial"] .hero-cta{ justify-content:center }
html[data-hero="editorial"] .search{ max-width:880px; margin-left:auto; margin-right:auto }
html[data-hero="editorial"] .hero-photos{
  height:340px; margin-top:48px;
  display:grid; grid-template-columns:repeat(4, 1fr); gap:14px;
}
html[data-hero="editorial"] .hero-photos .photo{
  position:relative; transform:none;
  width:auto; height:auto; left:auto; right:auto; top:auto; bottom:auto;
  border-radius:var(--r-md);
  border:0;
  box-shadow:var(--sh-sm);
}
html[data-hero="editorial"] .float-badge{ display:none }

html[data-hero="map"] .hero-grid{ grid-template-columns:1fr 1.1fr }
html[data-hero="map"] .hero-photos{
  height:580px;
  background: var(--c-line-2);
  border-radius:var(--r-lg);
  overflow:hidden;
  border:1px solid var(--c-line);
}
html[data-hero="map"] .hero-photos .photo{ display:none }
html[data-hero="map"] .float-badge{ display:none }

/* ----------  Trust / stat strip  ---------- */
.trust{
  padding:32px 0 0;
  border-top:1px solid var(--c-line-2);
  margin-top:32px;
}
.trust-grid{
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:32px; align-items:start;
}
.trust-stat{
  display:flex; flex-direction:column; gap:4px;
}
.trust-stat .num{
  font-size:40px; font-weight:800; letter-spacing:-0.025em;
  color:var(--c-ink);
}
.trust-stat .lbl{
  font-size:14px; color:var(--c-muted); line-height:1.35;
}

/* ----------  Section heading  ---------- */
.section-head{
  display:flex; flex-direction:column; gap:16px;
  max-width:780px;
  margin-bottom:56px;
}
.section-head .lead{ font-size:19px }

/* ----------  How it works  ---------- */
.steps{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:28px;
}
.step{
  background:var(--c-card);
  border:1px solid var(--c-line);
  border-radius:var(--r-lg);
  padding:32px;
  display:flex; flex-direction:column; gap:14px;
  position:relative;
}
.step-num{
  font-family:var(--f-display);
  font-style:italic;
  font-size:56px; line-height:1;
  color:var(--c-primary);
  font-weight:400;
}
.step h3{
  font-size:22px; font-weight:700; margin:0;
  letter-spacing:-0.01em;
}
.step p{ margin:0; color:var(--c-ink-2); font-size:16px; line-height:1.5 }

/* ----------  Why us  ---------- */
.why{
  background:var(--c-ink); color:var(--c-bg);
  border-radius:var(--r-xl);
  padding:80px 64px;
  position:relative; overflow:hidden;
}
.why .eyebrow{ color:var(--c-accent) }
.why .h-2{ color:var(--c-bg) }
.why-grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:64px;
  margin-top:48px;
  align-items:start;
}
.why-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:18px }
.why-list li{
  display:grid; grid-template-columns:auto 1fr;
  gap:16px; align-items:start;
}
.why-list svg{ width:24px; height:24px; color:var(--c-primary); flex-shrink:0; margin-top:4px }
.why-list b{ display:block; font-size:18px; margin-bottom:4px; color:#fff }
.why-list span{ color:rgba(250,246,238,.72); font-size:15px; line-height:1.5 }
.compare{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-lg);
  overflow:hidden;
}
.compare-row{
  display:grid; grid-template-columns:1.4fr 1fr 1fr;
  padding:18px 24px;
  border-bottom:1px solid rgba(255,255,255,.07);
  font-size:14px;
  align-items:center;
}
.compare-row:last-child{ border-bottom:0 }
.compare-row.head{
  font-weight:700; font-size:12px;
  text-transform:uppercase; letter-spacing:.08em;
  color:rgba(250,246,238,.6);
  background:rgba(255,255,255,.03);
}
.compare-row .col{ color:rgba(250,246,238,.85) }
/* Center ✓/— under their column headers at all widths.
   Without justify-self:center, grid defaults to "start" → the marks
   hug the row label on the left of the column. */
.compare-row .yes{ color:var(--c-primary); font-weight:600; justify-self:center; text-align:center }
.compare-row .no{ color:rgba(250,246,238,.4); justify-self:center; text-align:center }
/* Match the column headers to the marks below them. The first span
   in the header row is empty (it sits above the row labels), so we
   skip it with the adjacent-sibling selector. */
.compare-row.head span + span{ justify-self:center; text-align:center }

/* ----------  Roommate matching feature  ---------- */
.feature{
  display:grid; grid-template-columns:1.05fr 1fr;
  gap:80px; align-items:center;
}
.feature-flip{ grid-template-columns:1fr 1.05fr }
.feature-flip .feature-text{ order:2 }
.feature-text .h-2{ margin-top:18px }
.feature-text p{ font-size:18px; color:var(--c-ink-2); margin-top:18px; max-width:520px }
.feature-bullets{
  list-style:none; padding:0; margin:32px 0 0;
  display:flex; flex-direction:column; gap:16px;
}
.feature-bullets li{
  display:grid; grid-template-columns:auto 1fr;
  gap:14px; align-items:start;
  font-size:16px;
}
.feature-bullets li svg{
  width:28px; height:28px; color:var(--c-primary);
  background:var(--c-primary-soft); padding:5px;
  border-radius:50%;
  margin-top:2px;
}

/* ----------  Phone mockup container ---------- */
.phone-wrap{
  position:relative;
  display:grid; place-items:center;
  padding:32px;
}
.phone-wrap::before{
  content:"";
  position:absolute; inset:8% 18%;
  background:radial-gradient(ellipse at center, var(--c-primary-soft), transparent 70%);
  filter:blur(40px);
  z-index:0;
}

/* The phone itself (custom inline mockup, not iOS frame) */
.phone{
  width:320px; height:660px;
  background:#0E0D0B;
  border-radius:46px;
  padding:10px;
  box-shadow:var(--sh-lg), 0 0 0 1px rgba(0,0,0,.3);
  position:relative; z-index:1;
}
.phone-screen{
  background:var(--c-bg);
  border-radius:36px;
  height:100%;
  overflow:hidden;
  position:relative;
}
.phone-notch{
  position:absolute; left:50%; top:8px;
  transform:translateX(-50%);
  width:96px; height:26px;
  background:#0E0D0B;
  border-radius:13px;
  z-index:5;
}

/* ----------  Trust / scam prevention  ---------- */
.trust-grid-2{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.trust-card{
  background:var(--c-card);
  border:1px solid var(--c-line);
  border-radius:var(--r-lg);
  padding:32px;
  display:flex; flex-direction:column; gap:14px;
}
.trust-icon{
  width:52px; height:52px;
  border-radius:14px;
  background:var(--c-accent-soft); color:var(--c-accent);
  display:grid; place-items:center;
}
.trust-icon svg{ width:26px; height:26px }
.trust-card h3{ margin:0; font-size:20px; letter-spacing:-0.01em }
.trust-card p{ margin:0; color:var(--c-ink-2); font-size:15px; line-height:1.5 }

/* ----------  Status pills (Σήμερα / Σεπ '26)  ---------- */
/* Honesty markers: distinguish features that work today from those that
   are on the public roadmap for the Sep '26 launch. Used inline next to
   feature claims throughout the marketing copy. */
.status-pill{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; font-weight:700; letter-spacing:.04em;
  padding:4px 10px; border-radius:999px;
  text-transform:uppercase;
  white-space:nowrap;
  line-height:1;
}
.status-pill--now{
  background:color-mix(in oklab, var(--c-success) 14%, transparent);
  color:var(--c-success);
}
.status-pill--soon{
  background:color-mix(in oklab, var(--c-muted) 16%, transparent);
  color:var(--c-ink-2);
  border:1px dashed color-mix(in oklab, var(--c-muted) 50%, transparent);
}
.trust-card-head{ display:flex; align-items:flex-start; gap:10px; justify-content:space-between; flex-wrap:wrap }
.trust-card-status-line{ font-size:13px; color:var(--c-muted); margin-top:6px; display:flex; flex-wrap:wrap; gap:8px; align-items:center }
.section-coming-banner{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 14px;
  border-radius:999px;
  background:color-mix(in oklab, var(--c-muted) 12%, transparent);
  border:1px dashed color-mix(in oklab, var(--c-muted) 50%, transparent);
  color:var(--c-ink-2); font-size:13px; font-weight:600;
  margin-bottom:18px;
}

/* ----------  Listings preview  ---------- */
.listings{ display:grid; grid-template-columns:repeat(3, 1fr); gap:28px }
.listing{
  display:flex; flex-direction:column; gap:14px;
  cursor:default;
}
.listing-photo{
  width:100%; height:240px;
  border-radius:var(--r-md);
  position:relative;
}
.listing-photo .heart{
  position:absolute; right:12px; top:12px;
  width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.85);
  display:grid; place-items:center;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.listing-photo .verified{
  position:absolute; left:12px; top:12px;
  display:inline-flex; align-items:center; gap:5px;
  background:#fff; color:var(--c-success);
  font-size:11px; font-weight:700; letter-spacing:.04em;
  padding:5px 10px; border-radius:var(--r-pill);
  text-transform:uppercase;
}
.listing-meta{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px }
.listing-title{ font-weight:700; font-size:17px; letter-spacing:-0.005em; color:var(--c-ink); margin:0 }
.listing-uni{ color:var(--c-muted); font-size:14px; margin-top:2px }
.listing-info{ color:var(--c-ink-2); font-size:14px; margin-top:4px }
.listing-price{ font-weight:800; font-size:18px }
.listing-price .per{ font-weight:500; color:var(--c-muted); font-size:13px }

/* ----------  Cities  ---------- */
.cities{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px }
.city{
  border-radius:var(--r-lg);
  overflow:hidden;
  position:relative;
  height:300px;
  display:flex; align-items:flex-end;
  padding:28px;
  color:#fff;
}
.city .photo{
  position:absolute; inset:0;
  border-radius:0;
}
.city::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 30%, rgba(0,0,0,.7) 100%);
  z-index:1;
}
.city > * { position:relative; z-index:2 }
.city .name{ font-size:28px; font-weight:800; letter-spacing:-0.015em; line-height:1.05 }
.city .uni-count{ font-size:13px; opacity:.85; margin-top:4px }
.city .listing-count{
  position:absolute; right:20px; top:20px;
  background:rgba(255,255,255,.88); color:var(--c-ink);
  font-size:12px; font-weight:700;
  padding:6px 12px; border-radius:var(--r-pill);
  z-index:3;
}

/* ----------  Landlord band  ---------- */
.landlord{
  background:var(--c-primary-soft);
  border-radius:var(--r-xl);
  padding:64px;
  display:grid; grid-template-columns:1.2fr 1fr; gap:48px;
  align-items:center;
}
.landlord .h-2{ margin:8px 0 0 }
.landlord p{ font-size:17px; color:var(--c-ink-2); margin:18px 0 28px; max-width:480px }
.landlord-stats{
  display:grid;
  /* auto-fit lets the panel show 1, 2, or 3 stats cleanly without
     leaving empty columns when stats are removed/added. */
  grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  gap:20px;
  background:var(--c-card);
  padding:24px; border-radius:var(--r-lg);
  border:1px solid color-mix(in oklab, var(--c-primary) 20%, transparent);
}
.landlord-stat{ display:flex; flex-direction:column; gap:2px; text-align:center }
.landlord-stat .num{ font-size:30px; font-weight:800; color:var(--c-primary-d) }
.landlord-stat .lbl{ font-size:12px; color:var(--c-muted); line-height:1.3 }

/* ----------  FAQ  ---------- */
.faq{ display:grid; grid-template-columns:1fr 1.4fr; gap:64px; align-items:start }
.faq-list{ display:flex; flex-direction:column; gap:0 }
.faq-item{
  border-bottom:1px solid var(--c-line);
  padding:22px 0;
}
.faq-item summary{
  cursor:default;
  list-style:none;
  display:flex; align-items:center; justify-content:space-between;
  font-size:18px; font-weight:600; letter-spacing:-0.005em;
  gap:16px;
}
.faq-item summary::-webkit-details-marker{ display:none }
.faq-item summary::after{
  content:"+";
  width:32px; height:32px; border-radius:50%;
  border:1px solid var(--c-line);
  display:grid; place-items:center;
  font-size:18px; font-weight:400;
  flex-shrink:0;
  transition:transform .2s ease, background .2s ease;
}
.faq-item[open] summary::after{ content:"−"; background:var(--c-ink); color:var(--c-bg); border-color:var(--c-ink) }
.faq-item p{ color:var(--c-ink-2); margin:14px 0 0; font-size:16px; line-height:1.55; max-width:680px }

/* ----------  CTA / footer  ---------- */
.cta-band{
  background:var(--c-ink); color:var(--c-bg);
  border-radius:var(--r-xl);
  padding:72px 64px;
  text-align:center;
  position:relative; overflow:hidden;
}
.cta-band .h-2{ color:var(--c-bg) }
.cta-band p{ font-size:19px; color:rgba(250,246,238,.72); margin:18px auto 32px; max-width:560px }
.cta-form{
  max-width:560px; margin:0 auto;
}
.cta-form-row{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  background:rgba(255,255,255,.06);
  padding:8px;
  border-radius:32px;
  border:1px solid rgba(255,255,255,.12);
}
/* Scope pill-row inputs ONLY to .cta-form-row — otherwise this grabs the
   consent checkbox too and stretches it to flex:1 width. */
.cta-form-row input,
.cta-form-row select{
  flex:1 1 160px; appearance:none; background:transparent; border:0;
  color:var(--c-bg); font-size:16px;
  height:48px; padding:0 18px;
  font-family:inherit;
  min-width:0;
}
.cta-form select{
  /* native arrow is invisible on dark bg — inline a light SVG caret */
  appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%23faf6ee' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;
  background-position:right 14px center;
  padding-right:36px;
}
.cta-form select option{ color:var(--c-ink); background:var(--c-bg) }
.cta-form input::placeholder{ color:rgba(250,246,238,.45) }
.cta-form input:focus,
.cta-form select:focus{ outline:none }
/* Chrome/Edge autofill paints the field yellow-ish; clamp it back to dark. */
.cta-form input:-webkit-autofill,
.cta-form input:-webkit-autofill:hover,
.cta-form input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--c-bg);
  -webkit-box-shadow:0 0 0 1000px var(--c-ink) inset;
  caret-color:var(--c-bg);
}
.cta-form .btn{ background:var(--c-primary); color:#fff }
.cta-form .btn:hover{ background:var(--c-primary-d) }
/* Consent label below the pill — full width, readable on dark bg. */
.cta-form-consent{
  display:flex; gap:10px; align-items:flex-start;
  margin-top:14px;
  font-size:13px; line-height:1.5;
  color:rgba(250,246,238,.72);
  cursor:pointer;
  text-align:left;
}
.cta-form-consent input[type="checkbox"]{
  /* Default browser checkboxes are tiny white boxes that vanish on dark
     backgrounds. Force a visible, themed checkbox. */
  appearance:none;
  -webkit-appearance:none;
  width:20px; height:20px;
  margin-top:1px; flex-shrink:0;
  background:rgba(255,255,255,.08);
  border:1.5px solid rgba(250,246,238,.5);
  border-radius:5px;
  cursor:pointer;
  position:relative;
  transition:background .15s ease, border-color .15s ease;
}
.cta-form-consent input[type="checkbox"]:hover{
  border-color:rgba(250,246,238,.85);
}
.cta-form-consent input[type="checkbox"]:checked{
  background:var(--c-primary);
  border-color:var(--c-primary);
}
.cta-form-consent input[type="checkbox"]:checked::after{
  content:"";
  position:absolute;
  left:5px; top:1px;
  width:6px; height:11px;
  border:solid #fff;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.cta-form-consent input[type="checkbox"]:focus-visible{
  outline:2px solid var(--c-bg);
  outline-offset:2px;
}
.cta-form-consent a{ color:var(--c-bg); text-decoration:underline }
/* Inline consent error — replaces the white browser-native validation tooltip
   that doesn't theme on dark backgrounds. Shown via `hidden` attribute toggle
   from the checkbox's invalid/input handlers. */
.cta-form-error{
  margin:10px 0 0;
  padding:10px 14px;
  border-radius:12px;
  background:rgba(232,116,75,.18);
  border:1px solid rgba(232,116,75,.4);
  color:var(--c-bg);
  font-size:13px;
  line-height:1.45;
  text-align:left;
}
.cta-form-error[hidden]{ display:none }

/* ----------  Listings grid (Phase-2 first cut)  ---------- */
.listings-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:24px;
  margin-top:48px;
}
.listing-card{
  background:var(--c-surface);
  border:1px solid var(--c-line);
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--sh-sm);
  display:flex; flex-direction:column;
  transition:transform .15s ease, box-shadow .15s ease;
  position:relative; /* anchor for the full-card link overlay */
}
/* Full-card click target. Sits above the photo + body but below the
   <details> expander (which gets z-index 2 to stay interactive). */
.listing-card-link{
  position:absolute; inset:0;
  z-index:1;
  text-indent:-9999px;       /* hide aria-label text visually */
  overflow:hidden;
  border-radius:inherit;
  outline-offset:-2px;       /* keep keyboard-focus ring inside the card */
}
.listing-card-link:focus-visible{
  outline:2px solid var(--c-primary);
}
/* "γνωστά θέματα" expander stays interactive on top of the overlay. */
.listing-card-issues{ position:relative; z-index:2 }
.listing-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--sh-md);
}
.listing-card-photo{
  aspect-ratio: 4 / 3;
  background:var(--c-card);
  background-size:cover;
  background-position:center;
  position:relative;
}
.listing-card-photo--placeholder{
  position:relative;
  color:var(--c-primary);
  background:linear-gradient(180deg,
    color-mix(in oklab, var(--c-primary) 8%, var(--c-surface)) 0%,
    color-mix(in oklab, var(--c-primary) 18%, var(--c-surface)) 100%);
  overflow:hidden;
}
.listing-card-photo--placeholder svg{
  width:100%; height:100%;
  display:block;
}
.listing-card-photo-caption{
  position:absolute;
  bottom:10px; left:50%;
  transform:translateX(-50%);
  font-size:10px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--c-primary-d);
  background:color-mix(in oklab, var(--c-surface) 85%, transparent);
  padding:4px 10px;
  border-radius:999px;
  white-space:nowrap;
}

/* Source badge — top-left of the listing photo. Distinguishes owner-direct
   listings (green, friendlier) from agency listings (slate, neutral). The
   colour difference is intentionally subtle: we don't want students to
   avoid agency listings, just to know what they're walking into. */
.listing-source-badge{
  position:absolute;
  top:10px; left:10px;
  display:inline-flex; align-items:center; gap:5px;
  font-size:11px; font-weight:700;
  padding:5px 10px;
  border-radius:999px;
  white-space:nowrap;
  max-width:calc(100% - 20px);
  overflow:hidden; text-overflow:ellipsis;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.listing-source-badge--owner{
  background:color-mix(in oklab, var(--c-success) 16%, rgba(255,255,255,.85));
  color:var(--c-success);
}
.listing-source-badge--agency{
  background:color-mix(in oklab, var(--c-ink) 14%, rgba(255,255,255,.85));
  color:var(--c-ink);
}
.listing-source-badge svg{ width:12px; height:12px; flex-shrink:0 }
/* Branded variant — used when listing.agency has a logo. The logo
   replaces the icon and the badge becomes a clickable link to the
   agency's profile page. Sits above the whole-card background link
   via z-index so the agency click target wins over the listing click. */
.listing-source-badge--branded{
  text-decoration:none;
  background:rgba(255,255,255,.92);
  color:var(--c-ink);
  padding:4px 10px 4px 4px;
  z-index:2;
  position:absolute;
}
.listing-source-badge--branded:hover{
  background:rgba(255,255,255,1);
}
.listing-source-badge-logo{
  width:22px; height:22px;
  border-radius:50%;
  object-fit:cover;
  background:#fff;
  flex-shrink:0;
  border:1px solid rgba(0,0,0,.06);
}
/* Agency-name link variant (no logo / non-branded contexts) */
.ld-agency-link{
  color:inherit;
  text-decoration:underline;
  text-underline-offset:2px;
  text-decoration-thickness:1px;
}
.ld-agency-link:hover{ text-decoration-thickness:2px; }
/* Commission block — when there's a logo we put it on the left as a
   small clickable thumb. Falls back to the existing layout otherwise. */
.ld-commission{
  display:flex; align-items:flex-start; gap:14px;
}
.ld-commission-body{ flex:1; min-width:0; }
.ld-commission-agency-logo{
  flex-shrink:0;
  width:56px; height:56px;
  border-radius:10px;
  background:#fff;
  border:1px solid var(--c-border);
  padding:6px;
  display:block;
}
.ld-commission-agency-logo img{
  width:100%; height:100%;
  object-fit:contain;
}
.listing-card-body{
  padding:18px 20px 20px;
  display:flex; flex-direction:column; gap:8px;
  flex:1;
}
.listing-card-title{
  margin:0;
  font-size:16px; font-weight:700;
  color:var(--c-ink);
  line-height:1.3;
}
.listing-card-meta{
  margin:0;
  font-size:13px;
  color:var(--c-muted);
  line-height:1.4;
}
.listing-card-neighborhood{ font-weight:600; color:var(--c-ink-2) }
.listing-card-stats{
  margin-top:auto;
  padding-top:12px;
  display:flex; flex-wrap:wrap;
  gap:6px 12px;
  align-items:baseline;
  border-top:1px solid var(--c-line);
}
.listing-card-rent{
  font-size:18px; font-weight:800;
  color:var(--c-primary-d);
  flex:1 1 100%;
}
.listing-card-spec{
  font-size:13px;
  color:var(--c-ink-2);
  background:var(--c-card);
  padding:3px 9px;
  border-radius:999px;
}

/* ----------  Listing card · γνωστά θέματα (defects disclosure)  ---------- */
/* The chip is the brand's killer differentiator vs spitogatos. Designed to
   read as honest-and-helpful, NOT as "warning, run away". Terracotta tones
   over cream, never red. */
.listing-card-issues{
  margin-top:12px;
  border-top:1px dashed var(--c-line);
  padding-top:12px;
}
.listing-card-issues summary{
  list-style:none;   /* hide native disclosure triangle */
  cursor:pointer;
  display:inline-block;
}
.listing-card-issues summary::-webkit-details-marker{ display:none }
.issues-chip{
  display:inline-flex; align-items:center; gap:6px;
  background:color-mix(in oklab, var(--c-primary) 12%, var(--c-surface));
  color:var(--c-primary-d);
  border:1px solid color-mix(in oklab, var(--c-primary) 25%, transparent);
  padding:5px 12px 5px 10px;
  border-radius:999px;
  font-size:12px; font-weight:600;
  line-height:1.2;
  transition:background .15s ease, transform .1s ease;
}
.listing-card-issues:hover .issues-chip,
.listing-card-issues[open] .issues-chip{
  background:color-mix(in oklab, var(--c-primary) 22%, var(--c-surface));
}
.listing-card-issues[open] .issues-chip{
  transform:none;
}
.issues-icon{ font-size:13px }
.issues-count{
  margin-left:4px;
  opacity:.75;
  font-weight:500;
}
.issues-list{
  list-style:none;
  margin:12px 0 0;
  padding:0;
  display:flex; flex-direction:column;
  gap:6px;
  font-size:13px;
  line-height:1.45;
}
.issue{
  display:flex; gap:8px;
  align-items:flex-start;
  color:var(--c-ink-2);
  padding-left:2px;
}
.issue-bullet{
  flex-shrink:0;
  font-weight:800;
  /* default severity = minor (cream) */
  color:var(--c-muted);
}
.issue--minor .issue-bullet{    color:#B89968; }   /* warm tan */
.issue--moderate .issue-bullet{ color:var(--c-primary); }   /* terracotta */
.issue--major .issue-bullet{    color:var(--c-primary-d); }  /* terracotta deep */
.issue-text{ flex:1 }
.issues-footnote{
  margin:10px 0 0;
  font-size:11px;
  color:var(--c-muted);
  font-style:italic;
  line-height:1.4;
}

/* ----------  /pricing/ page  ---------- */
/* Two cards side-by-side on desktop, stacked on mobile.
   Without the breakpoint the cards force ~620px and overflow the viewport. */
.pricing-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
}
@media (max-width:680px){
  .pricing-grid{ grid-template-columns:1fr }
}

/* ----------  /listings/ page  ---------- */
.listings-layout{
  display:grid;
  grid-template-columns:260px 1fr;
  gap:32px;
  align-items:start;
}
@media (max-width:880px){
  .listings-layout{
    grid-template-columns:1fr;
    gap:20px;
  }
}

/* Filters sidebar */
.listings-filters{
  position:sticky;
  top:24px;
}
@media (max-width:880px){
  .listings-filters{ position:static }
}
.filters-form{
  background:var(--c-surface);
  border:1px solid var(--c-line);
  border-radius:var(--r-lg);
  padding:0;
  overflow:hidden;
}
.filters-mobile-toggle{ padding:0 }
.filters-summary{
  list-style:none;
  cursor:pointer;
  padding:18px 20px;
  font-size:14px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--c-ink);
  display:flex; align-items:center; gap:8px;
  user-select:none;
}
.filters-summary::-webkit-details-marker{ display:none }
.filters-summary::after{
  content:"▾";
  margin-left:auto;
  color:var(--c-muted);
  transition:transform .2s ease;
}
.filters-mobile-toggle[open] .filters-summary::after{
  transform:rotate(180deg);
}
.filters-active-dot{
  width:8px; height:8px;
  border-radius:50%;
  background:var(--c-primary);
  margin-left:4px;
}
.filters-body{
  padding:0 20px 20px;
  display:flex; flex-direction:column;
  gap:18px;
}
.filter-group{
  border:none;
  padding:0;
  margin:0;
  display:flex; flex-direction:column;
  gap:8px;
}
.filter-group legend{
  font-size:12px;
  font-weight:700;
  color:var(--c-ink-2);
  letter-spacing:.04em;
  text-transform:uppercase;
  padding:0;
  margin-bottom:4px;
}
.filter-checkbox{
  display:flex; align-items:center;
  gap:8px;
  font-size:14px;
  color:var(--c-ink);
  cursor:pointer;
  padding:4px 0;
}
.filter-checkbox input{
  width:16px; height:16px;
  accent-color:var(--c-primary);
  cursor:pointer;
  flex-shrink:0;
}
.filter-select, .filter-input{
  width:100%;
  height:40px;
  border:1px solid var(--c-line);
  border-radius:var(--r-md);
  padding:0 12px;
  font-family:inherit;
  font-size:14px;
  background:#fff;
  color:var(--c-ink);
  box-sizing:border-box;
}
.filter-select:focus, .filter-input:focus{
  outline:2px solid var(--c-primary);
  outline-offset:-1px;
  border-color:var(--c-primary);
}
.filter-actions{
  display:flex; align-items:center; gap:14px;
  margin-top:6px;
}
.filter-clear{
  font-size:13px;
  color:var(--c-muted);
  text-decoration:underline;
  text-underline-offset:3px;
}
.filter-clear:hover{ color:var(--c-ink) }

/* Results grid */
.listings-results .listings-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:20px;
  margin:0;
}

/* Pagination */
.listings-pagination{
  margin-top:32px;
  padding-top:24px;
  border-top:1px solid var(--c-line);
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.listings-pagination a{
  font-size:14px; font-weight:600;
  color:var(--c-primary-d);
  text-decoration:none;
  padding:8px 14px;
  border:1px solid var(--c-line);
  border-radius:999px;
  background:var(--c-surface);
  transition:background .15s ease;
}
.listings-pagination a:hover{
  background:var(--c-card);
}
.pagination-disabled{
  font-size:14px;
  color:var(--c-muted);
  padding:8px 14px;
  opacity:.5;
}
.pagination-info{
  font-size:13px;
  color:var(--c-muted);
}

/* Empty state */
.listings-empty{
  background:var(--c-surface);
  border:1px dashed var(--c-line);
  border-radius:var(--r-lg);
  padding:48px 32px;
  text-align:center;
  display:flex; flex-direction:column;
  align-items:center;
  gap:14px;
  max-width:520px;
  margin:0 auto;
}
.listings-empty .empty-icon{
  color:var(--c-primary);
  opacity:.5;
}
.listings-empty h2{
  margin:0;
  font-size:22px;
  font-weight:700;
  color:var(--c-ink);
  line-height:1.3;
}
.listings-empty p{
  margin:0;
  font-size:15px;
  color:var(--c-muted);
  line-height:1.55;
  max-width:420px;
}
.listings-empty a:not(.btn){
  color:var(--c-primary-d);
  text-decoration:underline;
}

/* ----------  Landlord CTA banner (shown on /listings/)  ---------- */
.landlord-cta-banner{
  display:flex; align-items:center;
  gap:16px;
  background:linear-gradient(135deg,
    color-mix(in oklab, var(--c-primary) 9%, var(--c-surface)),
    var(--c-surface));
  border:1px solid color-mix(in oklab, var(--c-primary) 25%, transparent);
  border-radius:var(--r-lg);
  padding:16px 22px;
  color:var(--c-ink);
  text-decoration:none;
  transition:background .15s ease, transform .15s ease, border-color .15s ease;
}
.landlord-cta-banner:hover{
  background:linear-gradient(135deg,
    color-mix(in oklab, var(--c-primary) 15%, var(--c-surface)),
    var(--c-surface));
  border-color:color-mix(in oklab, var(--c-primary) 40%, transparent);
  transform:translateY(-1px);
}
.landlord-cta-banner .cta-text{
  display:flex; flex-direction:column;
  gap:2px;
  flex:1;
  min-width:0;
}
.landlord-cta-banner strong{
  font-size:15px;
  font-weight:700;
  color:var(--c-primary-d);
}
.landlord-cta-banner .cta-sub{
  font-size:13px;
  color:var(--c-ink-2);
  line-height:1.45;
}
.landlord-cta-banner .cta-arrow{
  flex-shrink:0;
  font-size:22px;
  font-weight:700;
  color:var(--c-primary-d);
  transition:transform .15s ease;
}
.landlord-cta-banner:hover .cta-arrow{
  transform:translateX(3px);
}
@media (max-width:560px){
  .landlord-cta-banner{
    padding:14px 18px;
  }
  .landlord-cta-banner .cta-sub{ font-size:12px }
}

/* ----------  /landlord/submit/ form  ---------- */
.submit-form .field{
  display:flex; flex-direction:column;
  gap:6px;
  font-size:13px;
  color:var(--c-ink-2);
  font-weight:600;
}
.submit-form .field-label{
  font-size:12px;
  letter-spacing:.02em;
}
.submit-form .field-input{
  height:46px;
  border:1px solid var(--c-line);
  border-radius:var(--r-md);
  padding:0 14px;
  font-family:inherit;
  font-size:15px;
  background:#fff;
  color:var(--c-ink);
  font-weight:400;
  width:100%;
  box-sizing:border-box;
}
.submit-form textarea.field-input{
  height:auto;
  padding:12px 14px;
  line-height:1.5;
}
.submit-form .field-input:focus{
  outline:2px solid var(--c-primary);
  outline-offset:-1px;
  border-color:var(--c-primary);
}
.submit-form .field-hint{
  font-size:12px;
  color:var(--c-muted);
  font-weight:400;
  margin-top:2px;
  line-height:1.45;
}
.submit-form input[type="file"]{
  cursor:pointer;
  background:var(--c-card);
  border:1px dashed var(--c-line);
}
.submit-form input[type="file"]:hover{
  border-color:var(--c-primary);
  background:color-mix(in oklab, var(--c-primary) 5%, var(--c-card));
}
@media (max-width:680px){
  .submit-form{
    grid-template-columns:minmax(0,1fr) !important;
    padding:20px !important;
  }
  /* File input's native button has a min-content that won't shrink without
     this. Without min-width:0 the grid cell stretches to ~325px and the form
     overflows horizontally on phones. */
  .submit-form .field-input,
  .submit-form input[type="file"]{
    min-width:0;
    max-width:100%;
  }
}

/* ----------  Source-type cards (Είμαι ιδιοκτήτης / γραφείο)  ---------- */
/* Big tappable radio cards at the top of the submission form. Each card
   highlights its border + background when its inner <input> is :checked
   so the choice is unambiguous on both desktop and mobile. */
.source-type-cards{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}
.source-type-card{
  display:flex; align-items:flex-start; gap:12px;
  padding:14px 16px;
  border:1px solid var(--c-line);
  border-radius:12px;
  background:var(--c-card);
  cursor:pointer;
  transition:border-color .15s, background .15s;
}
.source-type-card:hover{
  border-color:color-mix(in oklab, var(--c-primary) 50%, var(--c-line));
}
.source-type-card:has(input:checked){
  border-color:var(--c-primary);
  background:color-mix(in oklab, var(--c-primary) 8%, var(--c-card));
}
.source-type-card input[type="radio"]{
  margin-top:3px; flex-shrink:0;
  accent-color:var(--c-primary);
}
.source-type-card-body{
  display:flex; flex-direction:column; gap:3px;
}
.source-type-card-body strong{
  font-size:15px; color:var(--c-ink); font-weight:700;
}
.source-type-card-sub{
  font-size:13px; color:var(--c-muted); line-height:1.4;
}

/* Agency-only fields wrapper. Hidden by default — revealed when the
   small IIFE in listing_submit.html adds the --visible modifier after
   the user picks AGENCY. Grid placement is intentional: we want it
   inline with the rest of the form's 2-col layout, but with both
   fields spanning the full width for readability. */
.agency-fields{
  display:none;
  grid-column:1/-1;
  margin-top:10px;
  padding:18px;
  background:color-mix(in oklab, var(--c-ink) 4%, transparent);
  border:1px dashed color-mix(in oklab, var(--c-ink) 18%, transparent);
  border-radius:12px;
  gap:14px;
  flex-direction:column;
}
.agency-fields.agency-fields--visible{
  display:flex;
}

@media (max-width:680px){
  .source-type-cards{ grid-template-columns:1fr; }
}

/* ============================================================
   Roommate matching
   ============================================================ */

/* ── Questionnaire: Likert questions ───────────────────────────────
   Each question row has: label, optional poles (left/right meaning),
   and 5 (or 2-3 for categorical) radio "pills". Layout collapses
   gracefully on mobile — pole labels move above the pills. */
.rm-likert{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  padding:14px 16px;
  background:var(--c-card);
  border:1px solid var(--c-line);
  border-radius:12px;
}
.rm-likert .rm-q{
  font-size:15px; font-weight:700; color:var(--c-ink);
}
.rm-poles{
  display:flex; justify-content:space-between;
  font-size:12px; color:var(--c-muted);
  padding:0 2px;
}
.rm-likert{
  /* Options sit in a horizontal row; wrap on mobile via flex */
}
.rm-likert:has(.rm-opt){
  /* override grid for the options row */
}
.rm-likert .rm-opt,
.rm-likert .rm-opt-wide{
  display:none;  /* hidden — we replace with visible pill below */
}
/* Render each option as a pill that reflects :checked state via :has. */
.rm-likert{
  /* container itself becomes the flex row for options after the
     label + poles render at the top */
}

/* Override above default — show options as pills in a row */
.rm-likert > .rm-opt,
.rm-likert > .rm-opt-wide{
  display:inline-flex;
  align-items:center; justify-content:center;
  min-width:48px; min-height:42px;
  padding:8px 14px;
  border:1px solid var(--c-line);
  border-radius:10px;
  background:var(--c-surface);
  cursor:pointer;
  font-size:14px; font-weight:600; color:var(--c-ink-2);
  transition:border-color .12s, background .12s, color .12s;
}
.rm-likert > .rm-opt input,
.rm-likert > .rm-opt-wide input{
  position:absolute;
  opacity:0; pointer-events:none;
  width:1px; height:1px;
}
.rm-likert > .rm-opt:has(input:checked),
.rm-likert > .rm-opt-wide:has(input:checked){
  border-color:var(--c-primary);
  background:color-mix(in oklab, var(--c-primary) 14%, var(--c-surface));
  color:var(--c-primary-d);
}
.rm-likert > .rm-opt:hover,
.rm-likert > .rm-opt-wide:hover{
  border-color:color-mix(in oklab, var(--c-primary) 50%, var(--c-line));
}
.rm-opt-wide{ flex:1; min-width:120px }
/* Position options in a horizontal flex row inside the grid container */
.rm-likert{
  grid-template-columns:1fr;
}
.rm-likert > .rm-opt,
.rm-likert > .rm-opt-wide{
  /* the grid layout above puts each label on its own row by default;
     we want them inline. Wrap them via display:inline-flex + the
     container being a flex row from here down */
}
.rm-likert{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}
.rm-likert .rm-q{ flex-basis:100%; margin-bottom:2px }
.rm-poles{ flex-basis:100%; margin-bottom:4px }

/* ── Dashboard: match cards ─────────────────────────────────────── */
.rm-matches{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(360px, 1fr));
  gap:20px;
}
.rm-match-card{
  background:var(--c-surface);
  border:1px solid var(--c-line);
  border-radius:16px;
  padding:22px;
  display:flex; flex-direction:column; gap:16px;
  box-shadow:var(--sh-sm);
}
.rm-match-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
}
.rm-match-name{
  margin:0 0 4px; font-size:18px; font-weight:700; color:var(--c-ink);
}
.rm-match-meta{
  margin:0; font-size:13px; color:var(--c-muted);
}
.rm-match-bio{
  margin:0; font-size:14px; color:var(--c-ink-2);
  line-height:1.5;
  padding:10px 12px;
  background:var(--c-card);
  border-radius:8px;
}

/* Compatibility score pill — color reflects band */
.rm-score{
  font-size:28px; font-weight:800;
  padding:4px 12px;
  border-radius:999px;
  letter-spacing:-0.02em;
  line-height:1;
  display:inline-flex; align-items:baseline; gap:2px;
}
.rm-score small{ font-size:14px; font-weight:600; opacity:.7 }
.rm-score-high{
  background:color-mix(in oklab, var(--c-success) 16%, transparent);
  color:var(--c-success);
}
.rm-score-mid{
  background:color-mix(in oklab, var(--c-warn) 18%, transparent);
  color:var(--c-warn);
}
.rm-score-low{
  background:color-mix(in oklab, var(--c-muted) 18%, transparent);
  color:var(--c-ink-2);
}

/* Per-category breakdown bars */
.rm-breakdown{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:6px;
}
.rm-breakdown-row{
  display:grid;
  grid-template-columns:120px 1fr;
  gap:10px;
  align-items:center;
  font-size:12px; color:var(--c-ink-2);
}
.rm-breakdown-label{ font-weight:600 }
.rm-bar{
  display:block;
  height:6px;
  background:var(--c-line-2);
  border-radius:3px;
  overflow:hidden;
}
.rm-bar-fill{
  display:block; height:100%;
  background:var(--c-primary);
  border-radius:3px;
}

/* Hello form (collapsed by default, expands on click) */
.rm-match-actions{ margin-top:4px }
.rm-hello{ width:100% }
.rm-hello > summary{
  list-style:none; cursor:pointer;
  display:inline-flex;
}
.rm-hello > summary::-webkit-details-marker{ display:none }
.rm-hello-form{
  margin-top:12px;
  display:flex; flex-direction:column; gap:10px;
}
.rm-hello-note{
  margin:0; font-size:12px; color:var(--c-muted); line-height:1.5;
}
.rm-greeted-pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px;
  border-radius:999px;
  background:color-mix(in oklab, var(--c-success) 12%, transparent);
  color:var(--c-success);
  font-size:13px; font-weight:600;
}

/* Self profile panel — collapsible read-only summary */
.rm-self summary{
  padding:14px 0;
  border-top:1px solid var(--c-line);
}
.rm-self-list{
  list-style:none; padding:14px 0 0; margin:0;
  display:grid; grid-template-columns:repeat(2, 1fr);
  gap:8px 24px;
  font-size:14px; color:var(--c-ink-2);
}

@media (max-width:680px){
  .rm-matches{ grid-template-columns:1fr }
  .rm-self-list{ grid-template-columns:1fr }
  .rm-breakdown-row{ grid-template-columns:110px 1fr }
}

/* ----------  Footer social icons  ---------- */
.footer-social-link{
  width:36px; height:36px;
  display:inline-grid; place-items:center;
  border-radius:50%;
  background:var(--c-card);
  border:1px solid var(--c-line);
  color:var(--c-ink-2);
  text-decoration:none;
  transition:background .15s ease, color .15s ease, transform .15s ease;
}
.footer-social-link:hover{
  background:var(--c-primary);
  color:#fff;
  border-color:var(--c-primary);
  transform:translateY(-1px);
}

footer{
  padding:64px 0 48px;
  border-top:1px solid var(--c-line-2);
  color:var(--c-muted);
  font-size:14px;
}
.foot-grid{
  display:grid; grid-template-columns:1.5fr repeat(4,1fr);
  gap:48px;
  margin-bottom:48px;
}
.foot-grid h4{
  font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--c-ink); margin:0 0 16px;
}
.foot-grid ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px }
.foot-grid a:hover{ color:var(--c-ink) }
.foot-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:24px; border-top:1px solid var(--c-line-2); flex-wrap:wrap; gap:12px }

/* ----------  Map (hero variation)  ---------- */
.map-hero{
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.04) 0 1px, transparent 1px 60px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.04) 0 1px, transparent 1px 60px),
    linear-gradient(135deg, var(--c-line-2), var(--c-bg));
  overflow:hidden;
}
.map-roads{
  position:absolute; inset:0;
}
.map-roads path{
  stroke:rgba(0,0,0,.12); stroke-width:1.5; fill:none;
}
.map-roads .major{ stroke:rgba(0,0,0,.18); stroke-width:3 }
.map-blob{
  position:absolute;
  border-radius:50%;
  background:var(--c-primary-soft);
  opacity:.6;
  filter:blur(20px);
}
.map-pin{
  position:absolute;
  background:var(--c-primary); color:#fff;
  font-size:13px; font-weight:700;
  padding:6px 12px; border-radius:var(--r-pill);
  box-shadow:0 6px 18px rgba(0,0,0,.18);
  border:2px solid #fff;
  white-space:nowrap;
  display:flex; align-items:center; gap:6px;
}
.map-pin::after{
  content:"";
  position:absolute;
  bottom:-7px; left:50%;
  transform:translateX(-50%) rotate(45deg);
  width:8px; height:8px;
  background:var(--c-primary);
  border-right:2px solid #fff; border-bottom:2px solid #fff;
}
.map-pin.alt{ background:var(--c-card); color:var(--c-ink); border:1px solid var(--c-line) }
.map-pin.alt::after{ background:var(--c-card); border-color:var(--c-line) }
.map-card{
  position:absolute; bottom:24px; left:24px;
  width:280px;
  background:var(--c-card);
  border:1px solid var(--c-line);
  border-radius:var(--r-md);
  padding:14px;
  display:flex; gap:12px;
  box-shadow:var(--sh-md);
}
.map-card .photo{ width:80px; height:80px; flex-shrink:0; border-radius:10px }
.map-card-meta b{ display:block; font-size:14px; margin-bottom:2px }
.map-card-meta span{ font-size:12px; color:var(--c-muted) }
.map-card-meta .price{ display:block; font-weight:700; font-size:15px; margin-top:6px; color:var(--c-ink) }

/* ============================================================
   LISTING DETAIL PAGE (/listing/<slug>/)
   ============================================================ */

.ld-page{ padding:32px 0 96px }

/* Breadcrumb */
.ld-breadcrumb{
  display:flex; align-items:center; gap:8px;
  font-size:14px; color:var(--c-muted);
  margin-bottom:24px;
}
.ld-breadcrumb a{ color:var(--c-ink-2); text-decoration:none }
.ld-breadcrumb a:hover{ color:var(--c-primary); text-decoration:underline }
.ld-breadcrumb-current{ color:var(--c-ink); font-weight:600 }

/* Header — title + price row */
.ld-header{
  display:grid; grid-template-columns:1fr auto;
  align-items:end; gap:24px;
  margin-bottom:24px;
}
.ld-title{ margin:14px 0 6px; font-size:clamp(28px, 4vw, 42px); line-height:1.1 }
.ld-subtitle{ color:var(--c-ink-2); font-size:16px; margin:0 }
.ld-neigh{ font-weight:700; color:var(--c-ink) }

.ld-price{
  display:flex; flex-direction:column; align-items:flex-end;
  background:var(--c-primary-soft);
  border-radius:var(--r-md);
  padding:16px 22px;
  min-width:180px;
}
.ld-price-value{
  font-family:'GFS Didot', serif;
  font-size:34px; font-weight:700;
  color:var(--c-primary-d);
  line-height:1;
}
.ld-price-unit{ font-size:14px; color:var(--c-ink-2); margin-top:4px }
.ld-price-ppsqm{ font-size:13px; color:var(--c-muted); margin-top:6px }

/* Hero image */
.ld-hero{ margin-bottom:32px }
.ld-hero-img{
  display:block;
  width:100%; height:clamp(280px, 50vw, 480px);
  object-fit:cover;
  border-radius:var(--r-lg);
  background:var(--c-primary-soft);
  border:1px solid var(--c-line, #E5E0D5);
}
.ld-hero-placeholder{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:var(--c-primary);
  gap:8px;
  font-size:14px;
}
.ld-thumbs{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(120px, 1fr));
  gap:8px; margin-top:8px;
}
.ld-thumb{
  width:100%; height:80px; object-fit:cover;
  border-radius:var(--r-sm, 8px);
  border:1px solid var(--c-line, #E5E0D5);
}

/* Two-column layout */
.ld-layout{
  display:grid; grid-template-columns:1fr 360px;
  gap:48px;
  align-items:start;
}

.ld-main{ min-width:0 }  /* prevents grid overflow from long descriptions */

/* Section */
.ld-section{
  background:var(--c-card, #fff);
  border:1px solid var(--c-line, #E5E0D5);
  border-radius:var(--r-md);
  padding:24px 28px;
  margin-bottom:20px;
}
.ld-section-title{
  font-family:'Manrope', sans-serif;
  font-size:20px; font-weight:700; color:var(--c-ink);
  margin:0 0 16px;
  display:flex; align-items:center; gap:10px;
}

/* γνωστά θέματα — top, branded */
.ld-issues{
  background:linear-gradient(180deg, var(--c-primary-soft) 0%, var(--c-card, #fff) 60%);
  border-left:4px solid var(--c-primary);
}
.ld-issues-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px;
  background:var(--c-primary); color:#fff;
  border-radius:8px;
  font-size:18px;
}
.ld-issues-intro{
  margin:0 0 14px; font-size:14px; color:var(--c-ink-2);
}
.ld-issues-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px }
.ld-issue{ display:flex; gap:10px; line-height:1.45; font-size:15px }
.ld-issue-bullet{ color:var(--c-primary); font-weight:700 }
.ld-issue-text{ color:var(--c-ink) }
.ld-issue--major{ font-weight:600 }
.ld-issue--moderate .ld-issue-text{ color:var(--c-ink) }
.ld-issue--minor .ld-issue-text{ color:var(--c-ink-2) }

/* Description */
.ld-description{
  font-size:15px; line-height:1.65; color:var(--c-ink);
  margin:0; white-space:pre-wrap;
}

/* Specs table — Spitogatos-style two columns */
.ld-specs{
  width:100%; border-collapse:collapse;
  font-size:15px;
}
.ld-specs th, .ld-specs td{
  text-align:left; padding:12px 0;
  border-bottom:1px solid var(--c-line, #E5E0D5);
  vertical-align:top;
}
.ld-specs tr:last-child th,
.ld-specs tr:last-child td{ border-bottom:none }
.ld-specs th{
  font-weight:500; color:var(--c-ink-2);
  width:42%; padding-right:16px;
}
.ld-specs td{ font-weight:600; color:var(--c-ink) }

/* Energy class badge — colors mirror the Greek energy label palette */
.ld-energy{
  display:inline-block; padding:3px 10px;
  border-radius:6px; font-weight:700; font-size:13px;
  background:#E5E0D5; color:#1E1A14;
}
.ld-energy--a{ background:#0E8A4F; color:#fff }
.ld-energy--b{ background:#5BB14A; color:#fff }
.ld-energy--c{ background:#C7D040; color:#1E1A14 }
.ld-energy--d{ background:#F7C548; color:#1E1A14 }
.ld-energy--e{ background:#F08840; color:#fff }
.ld-energy--f{ background:#E25234; color:#fff }
.ld-energy--g{ background:#B53117; color:#fff }

/* Feature checklist */
.ld-features{
  list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
  gap:10px 24px;
}
.ld-feature{
  display:flex; align-items:center; gap:8px;
  font-size:15px; color:var(--c-ink);
}
.ld-feature-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px;
  border:1.5px solid var(--c-primary);
  color:var(--c-primary);
  border-radius:50%; font-size:11px; font-weight:700;
  flex-shrink:0;
}

/* Map */
.ld-location-text{ font-size:15px; color:var(--c-ink); margin:0 0 14px }
.ld-map{ margin-top:14px }
.ld-map-note{
  margin:8px 0 0;
  font-size:13px; color:var(--c-muted);
}

/* Sticky contact card */
.ld-contact{ position:sticky; top:24px }
.ld-contact-inner{
  background:var(--c-card, #fff);
  border:1px solid var(--c-line, #E5E0D5);
  border-radius:var(--r-md);
  padding:24px;
  box-shadow:0 8px 24px rgba(0,0,0,0.04);
}
.ld-contact-title{
  font-family:'Manrope', sans-serif;
  font-size:18px; font-weight:700; color:var(--c-ink);
  margin:0 0 6px;
}
.ld-contact-sub{ font-size:14px; color:var(--c-ink-2); margin:0 0 18px; line-height:1.5 }
.ld-contact-foot{
  margin:14px 0 0;
  font-size:12px; color:var(--c-muted);
  text-align:center;
}

/* Commission disclosure block — sits above the contact form on detail pages.
   Two variants: owner (green = no commission, friendlier) and agency
   (slate = neutral, the commission_note text is the surprise to absorb).
   We expose this BEFORE the form on purpose: the brand promise is that
   the student knows the cost before they reach out, not after. */
.ld-commission{
  margin:0 0 16px;
  padding:12px 14px;
  border-radius:12px;
  display:flex; flex-direction:column; gap:4px;
  font-size:13px; line-height:1.45;
}
.ld-commission strong{ font-size:13px; letter-spacing:.01em }
.ld-commission-text{ color:var(--c-ink-2) }
.ld-commission--owner{
  background:color-mix(in oklab, var(--c-success) 10%, transparent);
  border:1px solid color-mix(in oklab, var(--c-success) 25%, transparent);
}
.ld-commission--owner strong{ color:var(--c-success) }
.ld-commission--agency{
  background:color-mix(in oklab, var(--c-ink) 6%, transparent);
  border:1px solid color-mix(in oklab, var(--c-ink) 14%, transparent);
}
.ld-commission--agency strong{ color:var(--c-ink) }

/* Contact form */
.ld-form{ display:flex; flex-direction:column; gap:12px }
.ld-form-label{
  display:flex; flex-direction:column; gap:6px;
  font-size:13px; font-weight:600; color:var(--c-ink-2);
}
.ld-form-label input,
.ld-form-label select,
.ld-form-label textarea{
  font:inherit; font-weight:400; color:var(--c-ink);
  padding:10px 12px;
  background:var(--c-bg);
  border:1px solid var(--c-line, #E5E0D5);
  border-radius:8px;
  outline:none;
}
.ld-form-label input:focus,
.ld-form-label select:focus,
.ld-form-label textarea:focus{
  border-color:var(--c-primary);
  box-shadow:0 0 0 3px var(--c-primary-soft);
}
.ld-form-label textarea{ resize:vertical; min-height:80px }

.ld-form-consent{
  display:flex; gap:10px; align-items:flex-start;
  font-size:12px; color:var(--c-ink-2); line-height:1.5;
  margin-top:4px;
}
.ld-form-consent input[type=checkbox]{
  width:18px; height:18px; flex-shrink:0;
  accent-color:var(--c-primary);
  margin-top:1px;
}
.ld-form-consent a{ color:var(--c-primary-d); text-decoration:underline }

.ld-form-submit{
  width:100%; margin-top:8px;
  font-size:15px; padding:14px 18px;
}
.ld-form-errors{
  margin:8px 0 0;
  color:var(--c-primary-d);
  font-size:13px;
  background:var(--c-primary-soft);
  padding:10px 12px; border-radius:8px;
}

/* Thanks state */
.ld-thanks{
  padding:24px;
  background:var(--c-primary-soft);
  border-radius:var(--r-md);
  text-align:center;
}
.ld-thanks-headline{
  margin:0 0 8px;
  font-size:18px; font-weight:700; color:var(--c-primary-d);
}
.ld-thanks-body{ margin:0 0 14px; font-size:14px; color:var(--c-ink-2); line-height:1.5 }
.ld-thanks-secondary{ margin:0; font-size:13px; color:var(--c-ink-2) }
.ld-thanks-secondary a{ color:var(--c-primary-d); font-weight:600 }

/* Similar listings */
.ld-similar{ margin-top:48px }
.ld-similar .ld-section-title{ margin-bottom:24px }

.ld-map-note--nopin{
  margin-top:14px; padding:18px;
  background:var(--c-primary-soft);
  border-radius:var(--r-md);
  color:var(--c-ink-2);
  font-size:14px; text-align:center;
}

/* ============================================================
   LISTING SUBMIT FORM — collapsible sections + map picker
   ============================================================ */

.submit-section{
  /* Reset the default <details> appearance — we use the section header
     as the summary, with a chevron via ::marker. */
}
.submit-section-summary{
  display:flex; align-items:center; justify-content:space-between;
  cursor:pointer;
  font-family:'Manrope', sans-serif;
  font-size:18px; font-weight:700;
  color:var(--c-ink);
  list-style:none;
  padding:4px 0;
  user-select:none;
}
.submit-section-summary::-webkit-details-marker{ display:none }
.submit-section-summary::before{
  content:"▸";
  color:var(--c-primary);
  font-size:14px;
  margin-right:10px;
  transition:transform .15s ease;
  display:inline-block;
}
.submit-section[open] .submit-section-summary::before{ transform:rotate(90deg) }
.submit-section-optional{
  font-weight:400; font-size:13px; color:var(--c-muted);
}
.submit-section-help{
  margin:10px 0 4px;
  font-size:13px; color:var(--c-muted); line-height:1.5;
}

.submit-grid-2{
  display:grid; grid-template-columns:repeat(2, 1fr);
  gap:14px; margin-top:14px;
}
.submit-grid-4{
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:14px; margin-top:14px;
}

.submit-checks{
  border:1px solid var(--c-line, #E5E0D5);
  border-radius:var(--r-md);
  padding:14px 18px;
  margin:14px 0 0;
  display:grid; grid-template-columns:repeat(2, 1fr);
  gap:10px 16px;
}
.submit-checks-legend{
  grid-column:1/-1;
  font-size:13px; font-weight:600; color:var(--c-ink-2);
  text-transform:uppercase; letter-spacing:.05em;
  padding:0 8px; margin-left:-8px;
}
.submit-check{
  display:flex; align-items:center; gap:8px;
  font-size:14px; color:var(--c-ink);
  cursor:pointer;
}
.submit-check input[type=checkbox]{
  width:18px; height:18px; flex-shrink:0;
  accent-color:var(--c-primary);
}

.submit-map-status{
  margin:10px 0 0;
  font-size:13px; color:var(--c-ink-2);
  display:flex; align-items:center; gap:10px;
  min-height:22px;
}
.submit-map-status[data-empty="empty"]{ color:var(--c-muted); font-style:italic }
.submit-map-clear{
  background:transparent;
  border:1px solid var(--c-line, #E5E0D5);
  border-radius:6px;
  padding:2px 10px;
  font-size:12px;
  color:var(--c-ink-2);
  cursor:pointer;
  margin-left:6px;
}
.submit-map-clear:hover{
  border-color:var(--c-primary);
  color:var(--c-primary-d);
}

/* Leaflet container — bring it to the page palette */
.leaflet-container{
  font-family:'Manrope', sans-serif;
}

/* ----------  Responsive (basic)  ---------- */
@media (max-width: 980px){
  /* Detail page: stack contact card below main content; un-sticky so
     it scrolls naturally instead of hovering over reduced real estate. */
  .ld-layout{ grid-template-columns:1fr; gap:32px }
  .ld-contact{ position:static }
  .ld-header{ grid-template-columns:1fr; gap:14px }
  .ld-price{ align-self:start; align-items:flex-start; min-width:0; width:auto }

  .hero-grid, .feature, .feature-flip, .why-grid, .faq, .landlord{ grid-template-columns:1fr; gap:40px }
  .feature-flip .feature-text{ order:0 }
  .steps, .trust-grid-2, .listings, .cities{ grid-template-columns:1fr }
  .trust-grid{ grid-template-columns:repeat(2,1fr) }
  .foot-grid{ grid-template-columns:repeat(2,1fr); gap:32px }
  /* .nav-links is now handled by the mobile burger media query above —
     it stays hidden by default and only opens via the burger toggle.
     The old blanket `display:none` left users stranded with no menu. */
  .why, .landlord, .cta-band{ padding:40px 28px }
  .search{ grid-template-columns:1fr 1fr }
  .search-go{ grid-column:1/-1; height:52px; width:auto }
}

/* ----------  Phone (<=560px)  ---------- */
@media (max-width: 560px){
  /* Wrap: 32px padding leaves only 311px for content on a 375px viewport,
     which is too tight for the listing card + several CTAs. Drop to 16px. */
  .wrap{ padding:0 16px }

  /* Submit form: stack the layout grid + amenities on phones */
  .submit-grid-4{ grid-template-columns:repeat(2, 1fr) }
  .submit-grid-2{ grid-template-columns:1fr }
  .submit-checks{ grid-template-columns:1fr; padding:14px }
  .submit-section-summary{ font-size:16px }

  /* Detail page tightening on phones */
  .ld-page{ padding:16px 0 64px }
  .ld-section{ padding:18px 18px }
  .ld-section-title{ font-size:18px }
  .ld-specs{ font-size:14px }
  .ld-specs th, .ld-specs td{ padding:10px 0 }
  .ld-specs th{ width:48% }
  .ld-hero-img{ height:240px; border-radius:var(--r-md) }
  .ld-thumb{ height:60px }
  .ld-features{ grid-template-columns:1fr 1fr; gap:8px 12px }
  .ld-feature{ font-size:14px }
  .ld-price{ padding:14px 16px }
  .ld-price-value{ font-size:28px }
  .ld-contact-inner{ padding:18px }


  /* Nav: drop the language toggle so the "Μπες στη λίστα" CTA fits. */
  .lang-toggle{ display:none }
  .nav-inner{ padding-inline:14px }
  .btn-sm{ padding:8px 12px; font-size:13px }
  /* btn-lg with long Greek text + arrow overflows on phones; shrink so
     "Μπες στη λίστα για όλες τις αγγελίες →" fits on one line. */
  .btn-lg{ font-size:14px; padding:14px 18px }

  /* Hero: smaller padding + headline, give the lead some breathing room. */
  .hero{ padding:24px 0 48px }
  .hero-text .h-1{ font-size:clamp(34px, 9vw, 48px); line-height:1.1 }
  .hero-text .lead{ font-size:15px; margin-top:16px }
  .hero-cta{ gap:10px; margin-top:24px }
  .hero-cta .btn{ flex:1 1 0; min-width:0 }

  /* Search card: one column per row, hide the redundant arrow button — the
     "Ψάχνω σπίτι" CTA below already submits the user into the waitlist flow. */
  .search{ grid-template-columns:1fr; margin-top:24px }
  .search-cell{ padding:12px 14px }
  .search-cell:first-child{ border-radius:var(--r-md) }
  .search-go{ display:none }

  /* Hero photos: stack vertically, no overlap, no rotation. The collage
     only works at desktop widths where it has horizontal real estate. */
  .hero-photos{
    position:relative;
    height:auto;
    display:flex; flex-direction:column;
    gap:14px;
    margin-top:32px;
  }
  .hero-photos .photo{
    position:relative;
    left:auto; right:auto; top:auto; bottom:auto;
    width:100%; height:200px;
    transform:none;
    border-width:4px;
  }
  /* Float badge ("Ταυτότητα επαληθευμένη") only reads as a hover overlay
     on the desktop photo collage. Once the photos stack on mobile it
     becomes a stray floating card — hide it. */
  .float-badge{ display:none }

  /* Trust stats: tighter on phones; .trust-grid keeps its 2-col layout. */
  .trust-grid{ gap:18px 16px }
  .trust-stat .num{ font-size:32px }
  .trust-stat .lbl{ font-size:12px }

  /* Landlord section: 64px padding eats too much horizontal space on a
     phone; the previous 980px override (40px 28px) still leaves only ~255px
     of usable width for a 2-col form. Tighten further. */
  .landlord{ padding:32px 18px; border-radius:var(--r-lg) }
  .landlord .h-2{ font-size:clamp(26px, 7vw, 34px) }
  .landlord p{ font-size:15px }

  /* Listings grid (home "Πρόσφατες αγγελίες" + /listings/): the 280px min
     forces overflow on narrow phones. Drop to single column. */
  .listings-grid,
  .listings-results .listings-grid{ grid-template-columns:1fr; gap:18px }

  /* Comparison table: keep 3-col but top-align so multi-line column
     headers don't push the single-line "foititospoito" into vertical
     center. Tighter padding/font + a touch more room for the label
     column. Centering the ✓/— marks keeps them visually balanced
     under their respective column headers. */
  .compare-row{
    grid-template-columns:1.7fr 0.65fr 0.65fr;
    padding:12px 14px;
    font-size:13px;
    gap:8px;
    align-items:start;
  }
  .compare-row.head{ font-size:10px; line-height:1.25; padding-top:14px; padding-bottom:14px }
  /* (✓/— centering now lives at the base rule — applies on desktop too.) */

  /* Home-page landlord interest form (#landlord-form): the inline
     grid-template-columns:repeat(2,1fr) overflowed on phones. Force 1 col
     and override the inner property-details grid the same way. */
  .ll-form{ grid-template-columns:1fr !important; gap:12px !important }
  .ll-property-details > div{ grid-template-columns:1fr !important }
  /* Action rows (button + hint) inside .ll-form and .submit-form: the
     inline display:flex layout left the hint text overflowing off the card
     on phones. Stack vertically and let the hint wrap normally. */
  .ll-form > div[style*="display:flex"],
  .submit-form > div[style*="display:flex"]{
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:8px !important;
  }

  /* Section padding: less aggressive top/bottom on phones. */
  .section, .section-tight{ padding-top:48px; padding-bottom:48px }
  .h-display{ font-size:clamp(28px, 7vw, 38px) }

  /* Footer: stack columns one per row, easier to scan. */
  .foot-grid{ grid-template-columns:1fr; gap:32px }
  footer{ padding:48px 0 32px }
  .foot-bottom{ justify-content:flex-start }
}

/* ============================================================
   AGENCY PROFILE PAGE — /agency/<slug>/
   Header with logo + bio + contact, then a grid of their listings.
   ============================================================ */
.agency-page{ padding:32px 0 96px }
.agency-header{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:32px;
  align-items:start;
  padding:32px;
  border:1px solid var(--c-border);
  border-radius:18px;
  background:var(--c-paper);
  margin-top:24px;
}
.agency-header-logo{
  width:140px; height:140px;
  border-radius:14px;
  background:#fff;
  border:1px solid var(--c-border);
  display:flex; align-items:center; justify-content:center;
  padding:14px;
  flex-shrink:0;
  color:var(--c-ink-3);
}
.agency-header-logo img{
  max-width:100%; max-height:100%;
  object-fit:contain;
}
.agency-header-logo svg{ width:60%; height:60%; }
.agency-header-body{ min-width:0; }
.agency-header-body .h-display{ margin:8px 0 0; }
.agency-description{
  margin-top:18px;
  color:var(--c-ink-2);
  max-width:62ch;
  line-height:1.55;
}
.agency-verified-badge{
  display:inline-flex; align-items:center; gap:6px;
  margin-left:12px;
  padding:4px 10px;
  font-size:13px; font-weight:700;
  color:var(--c-success);
  background:color-mix(in oklab, var(--c-success) 14%, rgba(255,255,255,.85));
  border-radius:999px;
  vertical-align:middle;
}
.agency-verified-badge svg{ width:14px; height:14px; }

.agency-contact{
  display:flex; flex-wrap:wrap;
  gap:18px 32px;
  margin:24px 0 0;
}
.agency-contact > div{
  display:flex; flex-direction:column;
  gap:2px;
}
.agency-contact dt{
  font-size:11px; font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--c-ink-3);
}
.agency-contact dd{
  margin:0;
  font-size:15px; font-weight:600;
  color:var(--c-ink);
}
.agency-contact a{ color:inherit; }

.agency-listings{ margin-top:48px; }
.agency-listings-head{ margin-bottom:24px; }
.agency-listings-head .muted{
  margin-top:8px;
  color:var(--c-ink-2);
  max-width:62ch;
}
.empty-state{
  padding:48px 24px;
  text-align:center;
  color:var(--c-ink-2);
  background:var(--c-paper);
  border:1px dashed var(--c-border);
  border-radius:14px;
}

@media (max-width:700px){
  .agency-header{
    grid-template-columns:1fr;
    padding:24px;
    gap:20px;
  }
  .agency-header-logo{
    width:96px; height:96px;
    padding:10px;
  }
}

/* ============================================================
   /profile/ page — Student Profile completion form + star bar
   ============================================================ */
.sp-form{ display:flex; flex-direction:column; gap:24px; }
.sp-fieldset{
  border:1px solid var(--c-line);
  border-radius:var(--r-lg);
  padding:24px;
  background:var(--c-surface);
  margin:0;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.sp-fieldset legend{
  font-weight:700;
  font-size:14px;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding:0 8px;
  color:var(--c-ink);
}
.sp-required-mark{ color:var(--c-primary); font-size:20px; line-height:1; margin-right:4px; }
.sp-star-mark{ color:var(--c-primary); font-size:16px; margin-right:4px; }
.sp-fieldset-optional{ background:var(--c-bg); }
.sp-field{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.sp-field label{
  font-size:14px;
  font-weight:600;
  color:var(--c-ink);
}
.sp-field input[type=email],
.sp-field input[type=text],
.sp-field select{
  padding:12px 14px;
  border:1px solid var(--c-line);
  border-radius:var(--r-md);
  background:var(--c-bg);
  font-size:15px;
  font-family:inherit;
  color:var(--c-ink);
  width:100%;
  min-width:0;
}
.sp-field input:focus, .sp-field select:focus{
  outline:none;
  border-color:var(--c-primary);
  box-shadow:0 0 0 3px var(--c-primary-soft);
}
.sp-help{ margin:0; font-size:13px; color:var(--c-muted); }
.sp-checkboxes{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:6px;
}
.sp-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 14px;
  border:1px solid var(--c-line);
  border-radius:999px;
  font-size:14px;
  cursor:pointer;
  background:var(--c-bg);
  user-select:none;
  transition:background .15s, border-color .15s;
}
.sp-chip:has(input:checked){
  background:var(--c-primary-soft);
  border-color:var(--c-primary);
  color:var(--c-primary-d);
  font-weight:600;
}
.sp-chip input{ margin:0; }
.sp-checkbox-inline{
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-size:14px;
  font-weight:500;
  color:var(--c-ink);
  cursor:pointer;
}
.sp-checkbox-inline input{ margin-top:3px; flex-shrink:0; }

/* Consent row on /profile/ — LIGHT-background twin of .cta-form-consent.
   The .cta-form-consent variant is themed for the dark waitlist band
   (cream text, cream border, bg-coloured links) and renders invisible
   on the profile page's light background. This one uses ink/line colours
   so the box and label are actually visible. */
.sp-consent{
  display:flex; gap:10px; align-items:flex-start;
  font-size:13px; line-height:1.5;
  color:var(--c-ink-2);
  cursor:pointer;
  text-align:left;
}
.sp-consent input[type="checkbox"]{
  appearance:none;
  -webkit-appearance:none;
  width:20px; height:20px;
  margin-top:1px; flex-shrink:0;
  background:var(--c-surface);
  border:1.5px solid var(--c-ink-2);
  border-radius:5px;
  cursor:pointer;
  position:relative;
  transition:background .15s ease, border-color .15s ease;
}
.sp-consent input[type="checkbox"]:hover{ border-color:var(--c-ink); }
.sp-consent input[type="checkbox"]:checked{
  background:var(--c-primary);
  border-color:var(--c-primary);
}
.sp-consent input[type="checkbox"]:checked::after{
  content:"";
  position:absolute;
  left:5px; top:1px;
  width:6px; height:11px;
  border:solid #fff;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.sp-consent input[type="checkbox"]:focus-visible{
  outline:2px solid var(--c-primary);
  outline-offset:2px;
}
.sp-consent a{ color:var(--c-primary); text-decoration:underline; }

/* Star icons — shared by /profile/, the waitlist thanks chip, and
   any listing card / admin view that needs to surface completeness. */
.sp-stars-icons{ display:inline-flex; gap:4px; align-items:center; font-size:28px; line-height:1; }
.sp-star{ font-family:'GFS Didot', serif; }
.sp-star-filled{ color:var(--c-primary); }
.sp-star-empty{ color:var(--c-line); }

/* ============================================================
   Remote viewing CTA on /listing/<slug>/
   Collapsed <details> below the interest form. Self-contained
   styling so it doesn't bleed into other ld-form variants.
   ============================================================ */
.ld-remote-toggle{
  margin-top:24px;
  padding:16px 18px;
  border:1px dashed var(--c-line);
  border-radius:var(--r-md);
  background:var(--c-bg);
}
.ld-remote-toggle summary{
  cursor:pointer;
  font-weight:700;
  font-size:15px;
  color:var(--c-ink);
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
}
.ld-remote-toggle summary::-webkit-details-marker{ display:none }
.ld-remote-toggle summary::after{
  content:'+';
  font-size:20px;
  font-weight:400;
  color:var(--c-primary);
  line-height:1;
}
.ld-remote-toggle[open] summary::after{ content:'−' }
.rv-price-note{
  background:var(--c-primary-soft);
  border-left:3px solid var(--c-primary);
  border-radius:var(--r-md);
  padding:12px 14px;
  margin-bottom:14px;
}
.rv-price-note strong{ color:var(--c-primary-d); font-size:14px; }

/* ============================================================
   /verified/ page — the verification checklist
   ============================================================ */
.verified-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:20px;
}
.verified-item{
  display:flex;
  gap:20px;
  align-items:flex-start;
  background:var(--c-surface);
  border:1px solid var(--c-line);
  border-radius:var(--r-lg);
  padding:24px;
  box-shadow:var(--sh-sm);
}
.verified-num{
  font-family:'GFS Didot', serif;
  font-size:32px;
  color:var(--c-primary);
  font-weight:400;
  flex-shrink:0;
  min-width:48px;
  letter-spacing:.02em;
}
.verified-body{ min-width:0 }
.verified-body h3{
  margin:0 0 8px;
  font-size:18px;
  font-weight:700;
  letter-spacing:-0.005em;
}
.verified-body p{
  margin:0;
  font-size:15px;
  line-height:1.55;
  color:var(--c-ink-2);
}
.verified-caveat{
  background:var(--c-accent-soft);
  border-left:3px solid var(--c-accent);
  border-radius:var(--r-md);
  padding:20px 24px;
}
@media (max-width:560px){
  .verified-item{
    padding:18px;
    gap:14px;
  }
  .verified-num{
    font-size:24px;
    min-width:36px;
  }
}