/* apps.perspectivebox.io page styles, loaded after site.css. Never edit site.css for one page: add page rules here. */

/* ---------- Page intro (h1 above the Homebase spotlight) ---------- */
.apps-hero{padding-block:var(--space-m) var(--space-2xl);position:relative;isolation:isolate}
.apps-hero .hero__wash{opacity:.55}
.apps-intro{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--space-2xs) var(--space-l);margin-bottom:var(--space-m)}
.apps-intro__title{font-size:var(--step-2);font-weight:600;letter-spacing:-0.01em;line-height:1.3;max-width:none;text-wrap:balance}
@media (max-width:599.98px){.apps-intro__title{font-size:var(--step-1)}}
.apps-intro__title span{color:var(--muted);font-weight:500}
.apps-intro__meta{display:flex;align-items:center;gap:.5rem;font-size:var(--step--1);color:var(--muted)}
.apps-intro__meta img{width:22px;height:22px}

/* ---------- Homebase spotlight ---------- */
.hb-spotlight{position:relative;isolation:isolate;gap:var(--space-xl);padding:clamp(1.25rem,0.6rem + 3.2vw,4rem);background:var(--hb-cream);border-color:var(--hb-line);box-shadow:0 2px 6px rgba(31,41,51,.05),0 40px 80px -40px rgba(31,41,51,.28)}
.hb-spotlight::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(55% 60% at 100% 0%,var(--hb-blue-soft) 0%,transparent 70%),radial-gradient(45% 45% at 0% 100%,var(--hb-amber-soft) 0%,transparent 72%);opacity:.9}
.hb-spotlight .app-feature__copy>*+*{margin-top:var(--space-s)}
.hb-spotlight .app-feature__copy>.hb-spotlight__headline{margin-top:var(--space-m)}
.hb-spotlight .app-feature__brand{gap:.9rem}
.hb-spotlight .app-feature__brand .hb-icon{width:clamp(48px,40px + 2vw,64px);height:clamp(48px,40px + 2vw,64px);border-radius:clamp(12px,10px + .5vw,16px);box-shadow:0 6px 16px -6px rgba(58,110,165,.55)}
.hb-spotlight .hb-wordmark{font-size:clamp(1.6rem,1.3rem + 1.2vw,2.25rem)}
.hb-spotlight .brand__endorse{font-size:var(--step--1);margin-top:.3rem}
.hb-spotlight__badges{display:flex;flex-wrap:wrap;gap:var(--space-2xs)}
.hb-spotlight__headline{font-size:clamp(2.25rem,1.45rem + 3vw,3.6rem);font-weight:800;letter-spacing:-0.035em;line-height:1.04;color:var(--hb-ink);max-width:17ch;text-wrap:balance}
.hb-spotlight__lead{font-size:clamp(1.0625rem,1rem + .3vw,1.1875rem);color:var(--muted);line-height:1.55;max-width:36rem}
.hb-spotlight__offer{font-family:var(--font-display);font-weight:600;font-size:var(--step-0);color:var(--ink);line-height:1.45;max-width:34rem}
.hb-spotlight .actions{margin-top:var(--space-m)}
.hb-spotlight .actions .btn--lg{padding-inline:1.5rem}
.hb-spotlight .hero__note{max-width:36rem}
.hb-spotlight .hero__note+.hero__note{margin-top:var(--space-2xs)}
.hb-spotlight .hero__note:first-of-type{margin-top:var(--space-m)}
.hb-spotlight .tagline{margin-top:var(--space-m)!important;font-size:var(--step-2);line-height:1.2;text-wrap:balance;font-weight:700;letter-spacing:-0.01em;padding-top:var(--space-s);border-top:1px solid var(--hb-line);max-width:36rem}
.hb-spotlight__media{position:relative;min-width:0}
.hb-spotlight__media .device-duo{padding-right:10%;padding-bottom:8%}
.hb-spotlight__media .device-duo .device--phone{width:31%}
@media (min-width:960px){
  .hb-spotlight{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-xl);align-items:center}
  .hb-spotlight__media{align-self:center}
  .hb-spotlight__media .device-duo{margin-right:calc(-1 * clamp(0rem,-2rem + 3vw,2rem))}
}
@media (max-width:959.98px){
  .hb-spotlight__media{max-width:40rem;margin-inline:auto;width:100%}
}
@media (min-width:960px) and (max-width:1199.98px){
  .hb-spotlight .actions .btn--lg{font-size:var(--step-0);padding-inline:1.15rem;min-height:52px}
}

/* ---------- Four reasons band ---------- */
.reasons{background:var(--hb-mist)}
.reasons__head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:var(--space-s) var(--space-l);margin-bottom:var(--space-l)}
.reasons__head h2{font-size:var(--step-3);max-width:24ch}
.reasons__grid{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-s);grid-template-columns:1fr}
@media (min-width:600px){.reasons__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.reasons__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.reason{display:flex;flex-direction:column;gap:var(--space-2xs);padding:var(--space-m);border-radius:var(--radius);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-1)}
.reason h3{font-size:var(--step-1);margin-top:var(--space-2xs)}
.reason p{color:var(--muted);font-size:var(--step-0);line-height:1.55}
.reason__icon{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--accent-soft);color:var(--accent-hover)}
.reason__icon svg{width:24px;height:24px}

/* ---------- More apps (under development) ---------- */
.more-apps .section__head{max-width:44rem}
.more-apps .section__head h2{font-size:var(--step-4)}
.app-grid--dev{list-style:none;margin:0;padding:0}
.app-grid--dev .app-card{background:var(--surface);border-style:dashed;border-color:var(--line-strong)}
.app-grid--dev .app-card__name{font-size:var(--step-1)}
.app-grid--dev .app-card__line{font-size:var(--step--1)}
.mono-tile{grid-row:1/3;display:grid;place-items:center;width:52px;height:52px;border-radius:14px;font-family:var(--font-display);font-weight:700;font-size:1.05rem;letter-spacing:.01em;line-height:1;background:var(--pb-teal-soft);color:var(--pb-teal-deep);box-shadow:inset 0 0 0 1px rgba(23,107,128,.18)}
.mono-tile--stone{background:var(--pb-stone);color:var(--pb-charcoal);box-shadow:inset 0 0 0 1px var(--line-strong)}
.mono-tile--ink{background:var(--pb-charcoal);color:#FFFFFF;box-shadow:none}
.mono-tile--teal{background:var(--pb-teal);color:#FFFFFF;box-shadow:none}
.mono-tile--outline{background:var(--surface);color:var(--pb-teal-deep);box-shadow:inset 0 0 0 2px var(--pb-teal)}
@media (min-width:1080px){
  .app-grid--dev{grid-template-columns:repeat(5,minmax(0,1fr))}
  .app-grid--dev .app-card{grid-template-columns:1fr;grid-template-rows:auto auto 1fr auto;row-gap:.5rem}
  .app-grid--dev .mono-tile{grid-row:auto;margin-bottom:var(--space-2xs)}
  .app-grid--dev .app-card__name,.app-grid--dev .app-card__line,.app-grid--dev .app-card .badge{grid-column:1}
  .app-grid--dev .app-card__name{align-self:start}
  .app-grid--dev .app-card__line{align-self:start}
}
.more-apps__note{margin-top:var(--space-m)}

/* ---------- About Perspective Box ---------- */
.about{background:var(--surface-alt)}
.about__grid{display:grid;gap:var(--space-xl);align-items:start}
@media (min-width:900px){.about__grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:var(--space-2xl)}}
.about__copy>*+*{margin-top:var(--space-s)}
.about__copy h2{font-size:var(--step-4);max-width:20ch}
.about__copy p:not([class]){color:var(--muted);max-width:56ch}
.about__mark{width:56px;height:56px}
.facts{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--line-strong);border:1px solid var(--line-strong);border-radius:var(--radius);overflow:hidden;grid-template-columns:1fr}
@media (min-width:600px) and (max-width:899.98px){.facts{grid-template-columns:repeat(3,minmax(0,1fr))}}
.facts li{display:flex;flex-direction:column;gap:.25rem;padding:var(--space-m) var(--space-l);background:var(--surface)}
.facts__value{font-family:var(--font-display);font-size:var(--step-2);font-weight:600;letter-spacing:-0.01em;color:var(--pb-teal-deep);line-height:1.2}
.facts__label{font-size:var(--step--1);color:var(--muted);line-height:1.45}

/* ---------- Footer additions ---------- */
.site-footer{border-top:1px solid var(--line-strong)}
.site-footer .footer__brand img{width:128px;height:auto}
@media (min-width:900px){.site-footer .footer__grid{grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr))}}
.legal-redress{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2xs)}
@media (min-width:860px){.legal-redress{align-items:flex-end;text-align:right}}
.legal-redress__adr{max-width:34ch;font-size:var(--step--1);color:var(--muted)}
.legal-redress__adr a{color:var(--ink)}

/* ---------- 404 ---------- */
.notfound{padding-block:var(--space-3xl)}
.notfound .prose>*+*{margin-top:var(--space-m)}
.notfound__code{font-family:var(--font-display);font-weight:700;letter-spacing:.08em;color:var(--accent)}