/* ==========================================================
   PILI fixed-page UI components
   Reusable visual language based on the readable legal pages.
   All selectors are namespaced with .pili-ui-* so legacy pages stay untouched.
   ========================================================== */

.pili-ui-page{
  width:100%;
  margin:0;
  padding:clamp(38px,5vw,64px);
  background:#fff;
  color:#24211e;
  font-size:15px;
  line-height:2;
}
.pili-ui-page--compact{padding:clamp(28px,4vw,48px)}
.pili-ui-page--legal{max-width:920px;margin-left:auto;margin-right:auto}
.pili-ui-page,
.pili-ui-page *{overflow-wrap:anywhere}
.pili-ui-page > *:first-child{margin-top:0}
.pili-ui-page > *:last-child{margin-bottom:0}

/* Intro / lead */
.pili-ui-intro{
  margin:0 0 clamp(42px,6vw,70px);
  padding:0 0 clamp(30px,4vw,46px);
  border-bottom:1px solid #e5dfd7;
}
.pili-ui-intro__kicker{
  margin:0 0 14px!important;
  color:var(--red);
  font-size:10px!important;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.pili-ui-intro__title{
  margin:0 0 18px!important;
  padding:0!important;
  border:0!important;
  font-size:clamp(26px,3vw,38px)!important;
  line-height:1.45!important;
  letter-spacing:-.035em;
}
.pili-ui-intro__body{max-width:760px;color:#5d5851}
.pili-ui-intro__body > *:first-child{margin-top:0}
.pili-ui-intro__body > *:last-child{margin-bottom:0}

/* Main sections: same quiet rule-based rhythm as terms pages. */
.pili-ui-section{
  margin:0;
  padding:clamp(38px,5vw,58px) 0;
  border-top:1px solid #e5dfd7;
}
.pili-ui-intro + .pili-ui-section{border-top:0;padding-top:0}
.pili-ui-section:first-child{border-top:0;padding-top:0}
.pili-ui-section__head{margin:0 0 22px}
.pili-ui-section__head h2{
  margin:0!important;
  padding:0!important;
  border:0!important;
  font-size:22px!important;
  line-height:1.6!important;
  letter-spacing:-.02em;
}
.pili-ui-section__head p{
  margin:8px 0 0!important;
  color:#8a837a;
  font-size:11px!important;
  line-height:1.7!important;
}
.pili-ui-section__body > *:first-child{margin-top:0}
.pili-ui-section__body > *:last-child{margin-bottom:0}
.pili-ui-section__body h3{
  margin:2em 0 .75em!important;
  font-size:18px!important;
  line-height:1.7!important;
}
.pili-ui-section__body p{margin:0 0 1.35em}
.pili-ui-section__body ul,
.pili-ui-section__body ol{margin:0 0 1.6em;padding-left:1.6em}
.pili-ui-section__body li{margin:.5em 0;padding-left:.2em}

/* Cards and grids */
.pili-ui-grid{display:grid;gap:18px;margin:24px 0}
.pili-ui-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.pili-ui-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.pili-ui-card{
  margin:0;
  padding:28px;
  background:#fbfaf7;
  border:1px solid #e5dfd7;
}
.pili-ui-card__kicker{
  margin:0 0 10px!important;
  color:var(--red);
  font-size:9px!important;
  font-weight:700;
  letter-spacing:.16em;
}
.pili-ui-card__title{
  margin:0 0 15px!important;
  font-size:18px!important;
  line-height:1.6!important;
}
.pili-ui-card__body{color:#5b554f;font-size:13px;line-height:1.9}
.pili-ui-card__body > *:first-child{margin-top:0}
.pili-ui-card__body > *:last-child{margin-bottom:0}

/* Notes / notices */
.pili-ui-note{
  margin:28px 0;
  padding:22px 24px;
  border-left:3px solid #b8afa4;
  background:#f4f0e8;
}
.pili-ui-note--warning{border-left-color:var(--red);background:#fff2f1}
.pili-ui-note--accent{border-left-color:#111;background:#f1efea}
.pili-ui-note__title{
  margin:0 0 8px!important;
  color:#111;
  font-size:12px!important;
  font-weight:700;
}
.pili-ui-note__body{font-size:12px;line-height:1.9;color:#5b554f}
.pili-ui-note__body > *:first-child{margin-top:0}
.pili-ui-note__body > *:last-child{margin-bottom:0}

/* Key/value rows for commerce disclosure, company data, price notes, etc. */
.pili-ui-kv{margin:24px 0;border-top:1px solid #ded8cf}
.pili-ui-kv__row{
  display:grid;
  grid-template-columns:minmax(150px,28%) minmax(0,1fr);
  border-bottom:1px solid #ded8cf;
}
.pili-ui-kv__label{
  padding:18px 20px;
  background:#f4f0e8;
  font-size:12px;
  font-weight:700;
  line-height:1.7;
}
.pili-ui-kv__value{
  padding:18px 22px;
  font-size:13px;
  line-height:1.9;
}
.pili-ui-kv__value > *:first-child{margin-top:0}
.pili-ui-kv__value > *:last-child{margin-bottom:0}

/* FAQ: native details/summary, no JavaScript dependency. */
.pili-ui-faq{margin:0;border-top:1px solid #ded8cf}
.pili-ui-faq:last-of-type{border-bottom:1px solid #ded8cf}
.pili-ui-faq summary{
  list-style:none;
  cursor:pointer;
  display:grid;
  grid-template-columns:34px minmax(0,1fr) 24px;
  gap:12px;
  align-items:center;
  padding:20px 4px;
  font-size:13px;
  font-weight:700;
  line-height:1.7;
}
.pili-ui-faq summary::-webkit-details-marker{display:none}
.pili-ui-faq__mark{color:var(--red);font-size:13px}
.pili-ui-faq__icon{position:relative;width:16px;height:16px;justify-self:end}
.pili-ui-faq__icon:before,
.pili-ui-faq__icon:after{content:"";position:absolute;left:0;top:7px;width:16px;height:1px;background:#111}
.pili-ui-faq__icon:after{transform:rotate(90deg);transition:transform .2s ease}
.pili-ui-faq[open] .pili-ui-faq__icon:after{transform:rotate(0)}
.pili-ui-faq__answer{padding:0 40px 22px 50px;color:#5b554f;font-size:13px;line-height:1.95}
.pili-ui-faq__answer > *:first-child{margin-top:0}
.pili-ui-faq__answer > *:last-child{margin-bottom:0}

/* CTA */
.pili-ui-buttons{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0}
.pili-ui-button{
  min-height:54px;
  min-width:190px;
  padding:0 20px;
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  border:1px solid #111;
  text-decoration:none!important;
  font-size:12px;
  font-weight:700;
  line-height:1.4;
  transition:transform .18s ease,background-color .18s ease,color .18s ease;
}
.pili-ui-button:hover{transform:translateY(-2px)}
.pili-ui-button--dark{background:#111;color:#fff!important}
.pili-ui-button--red{background:var(--red);border-color:var(--red);color:#fff!important}
.pili-ui-button--outline{background:transparent;color:#111!important}
.pili-ui-divider{border:0;border-top:1px solid #e5dfd7;margin:44px 0}

/* Gutenberg / editor content placed inside components */
.pili-ui-page a:not(.pili-ui-button){text-decoration:underline;text-underline-offset:3px}
.pili-ui-page strong{font-weight:700;color:#111}
.pili-ui-page img{height:auto}
.pili-ui-page table{width:100%;border-collapse:collapse;margin:24px 0;font-size:13px}
.pili-ui-page th,
.pili-ui-page td{padding:14px 16px;border:1px solid #ded8cf;text-align:left;vertical-align:top}
.pili-ui-page th{background:#f4f0e8;font-weight:700}

@media(max-width:820px){
  .pili-ui-grid--3{grid-template-columns:1fr 1fr}
}

@media(max-width:680px){
  .pili-ui-page{padding:30px 22px;font-size:14px;line-height:1.95}
  .pili-ui-page--compact{padding:25px 20px}
  .pili-ui-intro{margin-bottom:36px;padding-bottom:28px}
  .pili-ui-intro__title{font-size:25px!important}
  .pili-ui-section{padding:34px 0}
  .pili-ui-section__head h2{font-size:19px!important}
  .pili-ui-section__body h3{font-size:17px!important}
  .pili-ui-grid--2,
  .pili-ui-grid--3{grid-template-columns:1fr}
  .pili-ui-card{padding:23px 20px}
  .pili-ui-kv__row{grid-template-columns:1fr}
  .pili-ui-kv__label{padding:13px 16px;border-bottom:1px solid #e8e2da}
  .pili-ui-kv__value{padding:15px 16px}
  .pili-ui-faq summary{grid-template-columns:28px minmax(0,1fr) 20px;padding:18px 0}
  .pili-ui-faq__answer{padding:0 28px 20px 40px}
  .pili-ui-buttons{display:grid;grid-template-columns:1fr}
  .pili-ui-button{width:100%;min-width:0}
  .pili-ui-page table{display:block;overflow-x:auto;white-space:nowrap}
}

@media(prefers-reduced-motion:reduce){
  .pili-ui-button,
  .pili-ui-faq__icon:after{transition:none}
  .pili-ui-button:hover{transform:none}
}