/* The home page sections (home-sections.php). Every colour, font, corner and
   spacing value is one of the app's variables, which the theme and the
   admin's appearance settings set, so a change there carries through here. */
.rmt-home{ margin-top:56px; text-align:left; }
.rmt-home[hidden]{ display:none; }
.rmt-home-section{ padding:44px 0; border-top:1px solid var(--line); }
.rmt-home-section h2{
  font-family:var(--font-display); font-weight:700; color:var(--heading-color, var(--ink));
  font-size:clamp(1.4rem, 3.2vw, 1.8rem); line-height:1.2; letter-spacing:-0.01em; margin:0 0 18px;
}
.rmt-home-section h3{
  font-family:var(--font-display); font-weight:700; color:var(--heading-color, var(--ink));
  font-size:1.08rem; line-height:1.3; margin:0 0 8px;
}
.rmt-home-section p, .rmt-home-section li{ color:var(--body-color, var(--ink)); line-height:1.6; }
.rmt-home-section p{ margin:0 0 14px; }
.rmt-home-section > h3{ margin-top:22px; }

.rmt-home-grid{ display:grid; gap:16px; padding:0; margin:0; list-style:none; }
.rmt-home-grid-3{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
.rmt-home-grid-2{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
.rmt-home-card{
  background:var(--card-bg, #fff); border:1px solid var(--line); border-radius:var(--radius-card);
  box-shadow:var(--shadow-resting); padding:var(--space-card-pad, 22px); margin:0;
}
.rmt-home-card p:last-child{ margin-bottom:0; }
.rmt-home-num{
  display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px;
  border-radius:50%; background:var(--button-bg); color:var(--button-text);
  font-family:var(--font-body); font-weight:700; font-size:0.9rem; margin-bottom:12px;
}
.rmt-home-steps p{ font-size:0.95rem; color:var(--ink-soft); }
.rmt-home-more{ margin:18px 0 0 !important; font-weight:600; }
.rmt-home-more a::after{ content:" \2192"; }

.rmt-home-fit{ display:grid; grid-template-columns:minmax(0, 1fr) 220px; gap:28px; align-items:center; }
.rmt-home-list{ margin:0 0 4px; padding-left:1.2em; }
.rmt-home-list li{ margin:0 0 8px; }
.rmt-home-example{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; }
.rmt-home-example-tag{
  position:absolute; top:12px; left:12px; font-family:var(--font-body); font-weight:700; font-size:0.68rem;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-soft);
  border:1px solid var(--line); border-radius:var(--radius-chip); padding:3px 8px;
}
.rmt-home-example .match-score-ring-wrap{ margin-top:18px; }
.rmt-home-example figcaption{ font-size:0.88rem; line-height:1.45; color:var(--ink-soft); }

.rmt-home-chips{ display:flex; flex-wrap:wrap; gap:10px; }
.rmt-home-chip{
  display:inline-block; padding:10px 16px; border:1px solid var(--line); border-radius:var(--radius-chip);
  background:var(--card-bg, #fff); color:var(--ink); font-family:var(--font-body); font-weight:600;
  font-size:0.92rem; text-decoration:none;
}
.rmt-home-chip:hover, .rmt-home-chip:focus-visible{ border-color:var(--brass); color:var(--link-color, var(--brass)); }

.rmt-home-who{ display:flex; flex-direction:column; }
.rmt-home-who .rmt-home-list{ flex:1; }
.rmt-home-small{ font-size:0.84rem; color:var(--ink-soft) !important; }
.rmt-home-btn{
  display:inline-block; align-self:flex-start; margin-top:10px; padding:13px 24px;
  background:var(--button-bg); color:var(--button-text) !important; border-radius:var(--radius-btn);
  font-family:var(--font-body); font-weight:700; font-size:0.98rem; text-decoration:none;
}
.rmt-home-btn:hover{ filter:brightness(0.9); }

.rmt-home-tips li{ margin-bottom:10px; }

.rmt-home-faqs{ border-top:1px solid var(--line); }
.rmt-home-faq{ border-bottom:1px solid var(--line); }
.rmt-home-faq summary{
  cursor:pointer; list-style:none; padding:16px 32px 16px 0; position:relative;
  font-family:var(--font-body); font-weight:600; color:var(--ink);
}
.rmt-home-faq summary::-webkit-details-marker{ display:none; }
.rmt-home-faq summary::after{ content:"+"; position:absolute; right:4px; top:12px; font-size:1.3rem; color:var(--ink-soft); }
.rmt-home-faq[open] summary::after{ content:"\2212"; }
.rmt-home-faq p{ margin:0 0 16px; color:var(--ink-soft); }

.rmt-home-teacher{ display:flex; flex-direction:column; gap:4px; text-decoration:none; padding:0; overflow:hidden; }
.rmt-home-teacher-photo{ position:relative; display:block; aspect-ratio:4 / 3; overflow:hidden; background:var(--paper); }
.rmt-home-teacher-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.rmt-home-teacher-initial{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:3rem; color:var(--ink-soft); }
.rmt-home-teacher-name{ padding:12px 16px 0; font-family:var(--font-display); font-weight:700; color:var(--ink); }
.rmt-home-teacher-line{ padding:0 16px 14px; font-size:0.9rem; color:var(--ink-soft); }

.rmt-home-cta{ text-align:center; }
.rmt-home-cta .rmt-home-btn{ align-self:center; }

.rmt-home-visually-hidden{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

@media (max-width:640px){
  .rmt-home{ margin-top:36px; }
  .rmt-home-section{ padding:34px 0; }
  .rmt-home-grid-3, .rmt-home-grid-2, .rmt-home-fit{ grid-template-columns:1fr; }
  .rmt-home-example{ max-width:280px; margin:0 auto; }
  .rmt-home-btn{ align-self:stretch; text-align:center; }
}