/* ===================================================================
   Altitude inner pages — the app catalogue (/products) and each app
   (/app/:id) in the homepage's minimal language. Loaded AFTER
   altitude.css, which already gives fonts, tokens, nav, footer,
   buttons, toast and modal. This file restyles the component classes
   those pages render (written for the old raabih.css) so their markup
   and scripts do not have to change.
   =================================================================== */

/* old token names the page scripts still reference inline */
:root{
  --rule:var(--line); --rule-2:var(--line-2); --steel:var(--mist); --plate:#fff; --plate-hi:#fff;
  --font-display:var(--font); --act:var(--ink); --act-text:var(--ink);
}

.section{padding:clamp(56px,7vw,96px) 0}
.band{background:var(--mist);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.center{text-align:center}
.grow{flex:1;min-width:0}
.muted{color:var(--ink-2)}
.note{font-size:.9rem;color:var(--ink-3);max-width:58ch}
.note a,.link{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--line-2)}
.link:hover,.note a:hover{text-decoration-color:var(--ink)}
.eyebrow{display:inline-block;font-family:var(--mono);font-size:.74rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px}
.lead{font-size:clamp(1.08rem,1.45vw,1.25rem);color:var(--ink-2);max-width:54ch}
h1{font-size:clamp(2.4rem,5.4vw,4.2rem)}
.section h2{font-size:clamp(1.8rem,3.4vw,2.6rem)}

.grid{display:grid;gap:12px}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:980px){.g-3,.g-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.g-2,.g-3,.g-4{grid-template-columns:1fr}}

/* cards: hairline, no lift, border darkens on hover */
.card,.plate{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 20px;box-shadow:none;transition:border-color .25s;color:var(--ink)}
a.card:hover,.card:hover{border-color:var(--ink)}
.plate{border-radius:var(--r-lg)}
.screws,.screwed::before,.screwed::after{display:none!important}
.card.plan.hot{border-color:var(--ink)}
.placard{display:inline-block;font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--ink);border-radius:6px;padding:5px 8px;line-height:1}
.app-name{font-weight:600;font-size:1.12rem;letter-spacing:-.02em;line-height:1.2}
.app-like{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-top:6px}
.app-desc{font-size:.93rem;color:var(--ink-2);margin:12px 0 0}
.app-price{font-family:var(--mono);font-size:.74rem;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-3);padding-top:14px;border-top:1px solid var(--line);margin-top:16px}

/* the feature list: a drawn tick, no lamps */
ul.feat{list-style:none;margin:14px 0 0;padding:0}
ul.feat li{position:relative;padding:7px 0 7px 26px;font-size:.93rem;color:var(--ink-2);border-top:1px solid var(--line);line-height:1.4}
ul.feat li:first-child{border-top:0}
ul.feat li::before{content:"";position:absolute;left:3px;top:12px;width:10px;height:6px;border-left:1.6px solid var(--ink);border-bottom:1.6px solid var(--ink);transform:rotate(-45deg)}

/* filters */
.chip{display:inline-flex;align-items:center;border:1px solid var(--line-2);background:#fff;border-radius:999px;padding:8px 14px;font-size:.9rem;cursor:pointer;transition:background .2s,border-color .2s,color .2s;line-height:1.1;color:var(--ink)}
.chip:hover{border-color:var(--ink)}
.chip.active{background:var(--ink);color:#fff;border-color:var(--ink)}

/* the comparison table */
.table{width:100%;border-collapse:collapse;text-align:left;font-size:.93rem;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.table th{font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);background:var(--mist);padding:12px 14px;border-bottom:1px solid var(--line)}
.table td{padding:12px 14px;border-top:1px solid var(--line);color:var(--ink-2);vertical-align:top}
.table td b a{color:var(--ink);text-decoration:none}
.table td b a:hover{text-decoration:underline;text-underline-offset:3px}

/* ---------- /products ---------- */
.cat-head{padding:clamp(40px,6vw,80px) 0 clamp(24px,3vw,36px)}
.cat-head .mono{display:block;margin-bottom:16px}
.cat-head h1{margin-bottom:.3em}
.cat-head p{font-size:1.1rem;color:var(--ink-2);max-width:62ch;margin:0}
#filters{display:flex;gap:8px;flex-wrap:wrap;margin-top:26px}
.alt-bar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center;border:1px solid var(--ink);border-radius:var(--r-lg);padding:22px 24px;margin-bottom:22px}
.alt-bar p{margin:8px 0 0;color:var(--ink-2)}
@media (max-width:700px){.alt-bar{grid-template-columns:1fr}}
#grid .card{padding:22px 20px 20px}
#grid .btn{height:42px}

/* ---------- /app/:id ---------- */
.hero{padding:clamp(36px,5vw,72px) 0 clamp(28px,4vw,48px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,5vw,64px);align-items:start}
@media (max-width:980px){.hero-grid{grid-template-columns:1fr}}
.hero-grid > *{min-width:0}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 0}
.hero-trust{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.hero-trust span{font-size:.82rem;color:var(--ink-2);border:1px solid var(--line);border-radius:999px;padding:6px 11px}
.hero .plate{padding:26px 24px 18px!important}
.hero .plate dl > div{grid-template-columns:8.5rem 1fr!important}
.hero .plate dt{font-family:var(--mono)!important;font-weight:500!important;font-size:.7rem!important;letter-spacing:.06em!important}
.hero .plate dd{font-weight:500!important}
@media (max-width:520px){.hero .plate dl > div{grid-template-columns:1fr!important;gap:2px!important}}

/* what's new */
.rel{display:flex;gap:16px;align-items:flex-start;border-top:1px solid var(--line);padding:16px 0}
.rel-v{font-family:var(--mono);font-size:.78rem;background:var(--ink);color:#fff;border-radius:6px;padding:4px 8px;white-space:nowrap}
.rel-date{font-family:var(--mono);font-size:.72rem;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em}
.rel-notes{margin:8px 0 0;padding-left:18px;color:var(--ink-2);font-size:.93rem}
.rel-more summary{cursor:pointer;font-weight:600;padding:12px 0}

/* forms the pages and the connect widget render */
input[type="text"],input[type="email"],input[type="url"],input[type="tel"],textarea,select{font:inherit;border:1px solid var(--line-2);border-radius:10px;padding:10px 12px;background:#fff;color:var(--ink)}
input:focus,textarea:focus,select:focus{border-color:var(--ink);outline:0}