/* ============================================================================
   FunFiLabs — Compliance & Asset Verification Policy
   Page-specific additions only. Everything else (nav, typography, buttons,
   cards, spacing, footer, responsive rules) comes from styles.css.
   ========================================================================== */

/* ------------------------------------------------------------------ hero -- */
.chero__desc{
  margin-top:1.15rem;max-width:50rem;
  color:var(--text-2);font-size:.98rem;line-height:1.72;
}
.chero__cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.1rem}

/* ------------------------------------------------------------- callouts -- */
/* the base .callout comes from styles.css — these are tonal variants */
.callout--wide{max-width:62rem}
.callout--mint{border-left-color:var(--mint)}
.callout--flat{border-left-color:var(--hairline-2);margin-top:1.5rem;font-size:.9rem}
.callout strong{color:var(--text);font-weight:600}

/* ----------------------------------------------------------------- lists -- */
/* neutral policy list: no approval semantics, unlike .checks */
.clist{list-style:none;display:flex;flex-direction:column;gap:.62rem;margin-top:1.25rem}
.clist li{
  position:relative;padding-left:1.55rem;
  color:var(--text-2);font-size:.94rem;line-height:1.58;
}
.clist li::before{
  content:"";position:absolute;left:0;top:.58em;
  width:6px;height:6px;border-radius:2px;background:var(--iris);
}
.clist--mint li::before{background:var(--mint)}
.clist--rose li::before{background:var(--rose)}
.clist--two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.62rem 1.4rem}

/* numbered variant — counters keep the markup a plain <ul> */
.clist--num{counter-reset:cl}
.clist--num li{padding-left:2.15rem;counter-increment:cl}
.clist--num li::before{
  content:counter(cl,decimal-leading-zero);
  top:0;width:auto;height:auto;border-radius:0;background:none;
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.1em;
  color:var(--iris-l);line-height:1.6;
}

/* exclusion list — for "this is never…" statements */
.xlist{list-style:none;display:flex;flex-direction:column;gap:.62rem;margin-top:1.25rem}
.xlist li{
  display:flex;align-items:flex-start;gap:.8rem;
  color:var(--text);font-size:.94rem;line-height:1.5;
}
.xlist li::before{
  content:"";width:18px;height:18px;flex:none;margin-top:.14rem;border-radius:50%;
  background:rgba(248,113,113,.1);border:1px solid rgba(248,113,113,.38);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F87171' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
  background-size:10px;background-position:center;background-repeat:no-repeat;
}
.xlist--two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem 1.4rem}

/* body copy that follows a list needs its own breathing room */
.cell .clist + p,.cell .xlist + p,.panel .clist + p,.panel .xlist + p{margin-top:1.2rem}

/* ---------------------------------------------------------------- panels -- */
.panel{
  position:relative;border-radius:var(--r-lg);border:1px solid var(--hairline);
  background:linear-gradient(180deg,var(--glass),transparent 60%),var(--surface);
  padding:clamp(1.5rem,2.4vw,2.1rem);
}
.panel__head{
  display:flex;align-items:center;gap:.95rem;
  padding-bottom:1.25rem;margin-bottom:.4rem;border-bottom:1px solid var(--hairline);
}
.panel__t{font-weight:600;font-size:1.04rem;letter-spacing:-.02em}
.panel__s{
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--text-3);margin-top:.2rem;
}
.panel--flush{height:100%;display:flex;flex-direction:column}
.panel--flush .callout--flat{margin-top:auto}
.panel--full{max-width:none;margin-top:clamp(1.6rem,2.6vw,2.2rem)}
.panel--full .clist{margin-top:1.4rem}

/* tinted bento cells — the contrast pair in the clarification section */
.cell--warn{border-color:rgba(248,113,113,.26);background:linear-gradient(180deg,rgba(248,113,113,.05),transparent 58%),var(--surface)}
.cell--ok{border-color:rgba(45,212,167,.26);background:linear-gradient(180deg,rgba(45,212,167,.05),transparent 58%),var(--surface)}
.cell__ic--rose{color:var(--rose);background:rgba(248,113,113,.09);border-color:rgba(248,113,113,.24)}

/* --------------------------------------------------- policy commitments -- */
.pledge{
  position:relative;max-width:62rem;
  margin-top:clamp(1.6rem,2.6vw,2.2rem);
  padding:clamp(1.5rem,2.6vw,2.1rem) clamp(1.5rem,2.6vw,2.2rem);
  border-radius:var(--r-lg);border:1px solid rgba(99,102,241,.34);
  border-left:2px solid var(--iris);
  background:linear-gradient(180deg,rgba(99,102,241,.07),transparent 62%),var(--surface);
}
.pledge > .micro{margin-bottom:.85rem}
.pledge__q{
  font-size:clamp(1rem,1.5vw,1.14rem);line-height:1.68;color:var(--text);
  letter-spacing:-.012em;font-weight:500;max-width:60ch;
}
.pledge--sm{
  border-left-color:var(--mint);border-color:rgba(45,212,167,.3);
  padding:1.2rem clamp(1.2rem,2vw,1.5rem);
  background:linear-gradient(180deg,rgba(45,212,167,.05),transparent 62%),var(--surface);
}
.pledge--sm .pledge__q{font-size:.98rem;font-weight:400;color:var(--text-2)}

/* --------------------------------------------------------- warning cards -- */
.warn{
  display:flex;gap:1.15rem;align-items:flex-start;
  margin-top:clamp(1.6rem,2.6vw,2.2rem);
  padding:clamp(1.4rem,2.4vw,1.9rem);border-radius:var(--r-lg);
  border:1px solid var(--hairline-2);background:var(--surface);
}
.warn__ic{
  width:42px;height:42px;flex:none;border-radius:13px;display:grid;place-items:center;
  background:var(--glass-2);border:1px solid var(--hairline);color:var(--iris-l);
}
.warn__ic svg{width:20px;height:20px}
.warn__b{min-width:0}
.warn__b > .micro{margin-bottom:.6rem}
.warn__b p{color:var(--text-2);font-size:.94rem;line-height:1.65;margin-top:1.15rem}
.warn--iris{border-color:rgba(99,102,241,.34);background:linear-gradient(180deg,rgba(99,102,241,.06),transparent 60%),var(--surface)}
.warn--rose{border-color:rgba(248,113,113,.32);background:linear-gradient(180deg,rgba(248,113,113,.06),transparent 60%),var(--surface)}
.warn--rose .warn__ic{color:var(--rose);background:rgba(248,113,113,.09);border-color:rgba(248,113,113,.26)}
.warn--block{margin-top:0}

/* ------------------------------------------------------- standard review -- */
.ctime{display:flex;flex-direction:column}
.ctime > .tag{align-self:flex-start}
.cell .ctime__l{
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-3);margin-top:1.6rem;line-height:1.5;
}
.cell .ctime__n{
  display:flex;align-items:baseline;gap:.5rem .65rem;flex-wrap:wrap;margin-top:.6rem;
  font-size:clamp(2.6rem,5.4vw,3.9rem);font-weight:700;letter-spacing:-.045em;line-height:1;
  background:linear-gradient(150deg,var(--iris-l),var(--iris));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.cell .ctime__n--mint{background:linear-gradient(150deg,#7BEBCE,var(--mint))}
.ctime__pre{
  font-family:var(--f-mono);font-size:.72rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;-webkit-text-fill-color:var(--text-3);color:var(--text-3);
}
.ctime__u{
  font-size:1rem;font-weight:600;letter-spacing:-.01em;
  -webkit-text-fill-color:var(--text-2);color:var(--text-2);
}
.cell .ctime__hint{margin-top:auto;padding-top:1.6rem;font-size:.84rem;color:var(--text-3);line-height:1.6}
.cell--5{grid-column:span 5}
.cell--7{grid-column:span 7}

/* ------------------------------------------------------------- fast pass -- */
.fpwrap{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(.9rem,1.6vw,1.35rem);align-items:stretch}
.fpcard__price{
  display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;
  padding:1.2rem 0 1.4rem;margin-bottom:.4rem;
  border-bottom:1px solid var(--hairline);position:relative;
}
.fpcard__amt{
  font-size:clamp(2.5rem,5.2vw,3.5rem);font-weight:700;letter-spacing:-.045em;line-height:1;
  background:linear-gradient(150deg,#7BEBCE,var(--mint));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.fpcard__meta{
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-3);
}
.fpcard__meta b{color:var(--text);font-weight:500}
.fpcard .btn{align-self:flex-start;margin-top:.4rem;position:relative}
.fpcard .cnote{max-width:34rem;position:relative}

/* ------------------------------------------------------ document card ---- */
.doc{
  display:grid;grid-template-columns:auto 1fr auto;align-items:start;
  gap:clamp(1.1rem,2vw,1.6rem);
  margin-top:clamp(1.6rem,2.6vw,2.2rem);
  padding:clamp(1.4rem,2.4vw,1.9rem);border-radius:var(--r-lg);
  border:1px solid var(--hairline);
  background:linear-gradient(180deg,var(--glass),transparent 60%),var(--surface);
  transition:border-color .45s var(--ease),box-shadow .55s var(--ease),transform .55s var(--ease-out);
}
.doc:hover{border-color:var(--hairline-2);box-shadow:var(--shadow-2);transform:translateY(-2px)}
.doc__ic{
  width:48px;height:48px;flex:none;border-radius:15px;display:grid;place-items:center;
  background:var(--glass-2);border:1px solid var(--hairline);color:var(--iris-l);
}
.doc__ic svg{width:22px;height:22px}
.doc__b{min-width:0}
.doc__b > .micro{margin-bottom:.55rem}
.doc__b h3{margin-bottom:.7rem}
.doc__d{color:var(--text-2);font-size:.93rem;line-height:1.65;max-width:54ch}
.doc__m{
  display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.1rem;
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
}
.doc__m span{
  padding:.32rem .6rem;border-radius:var(--r-xs);
  border:1px solid var(--hairline);background:var(--glass);color:var(--text-3);
}
.doc__act{display:flex;flex-direction:column;align-items:flex-end;gap:.7rem}
.doc__dl{
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-3);
  border-bottom:1px solid transparent;transition:color .3s var(--ease),border-color .3s var(--ease);
}
.doc__dl:hover{color:var(--text);border-bottom-color:var(--hairline-2)}

/* ---------------------------------------------------------- process flow -- */
/* horizontal timeline on desktop, vertical timeline on mobile */
.ctl{
  list-style:none;position:relative;
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));
  gap:clamp(.7rem,1.2vw,1.1rem);
}
.ctl::before{
  content:"";position:absolute;left:0;right:0;top:19px;height:1px;
  background:linear-gradient(90deg,transparent,var(--hairline-2) 8%,var(--hairline-2) 92%,transparent);
}
.ctl__i{position:relative;padding-top:0}
.ctl__node{
  position:relative;z-index:2;
  width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  background:var(--surface-2);border:1px solid var(--hairline-2);
  color:var(--iris-l);font-family:var(--f-mono);font-size:.82rem;
  box-shadow:var(--shadow-1);
  transition:border-color .45s var(--ease),color .45s var(--ease),transform .45s var(--ease-out),box-shadow .45s var(--ease);
}
.ctl__i:hover .ctl__node,
.ctl__i.is-lit .ctl__node{
  border-color:var(--iris);color:#fff;
  background:linear-gradient(150deg,var(--iris-l),var(--iris) 52%,var(--iris-d));
  box-shadow:var(--glow-iris);
}
.ctl__t{
  font-size:.98rem;font-weight:600;letter-spacing:-.02em;line-height:1.25;
  margin-top:1.1rem;
}
.ctl__d{margin-top:.5rem;color:var(--text-2);font-size:.86rem;line-height:1.55}

/* --------------------------------------------------------- policy notice -- */
.notice{
  max-width:62rem;padding:clamp(1.5rem,2.6vw,2.2rem);
  border-radius:var(--r-lg);border:1px solid var(--hairline);
  border-top:2px solid var(--iris);background:var(--glass);
}
.notice p{color:var(--text-2);font-size:.94rem;line-height:1.68;margin-top:1.15rem}
.notice > .micro{margin-top:0}
.notice .clist{margin-top:1.1rem}
.notice .cnote{margin-top:1.6rem;padding-top:1.3rem;border-top:1px solid var(--hairline)}

/* --------------------------------------------------------------- tables --- */
.dtable td:first-child{color:var(--text);font-weight:600}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------------------------------------------------- faq answer content -- */
.qa__a .clist{padding:0 3rem 1.7rem .25rem;margin-top:0}

/* ---------------------------------------------------------- responsive --- */
@media (max-width:1080px){
  .cell--5,.cell--7{grid-column:span 6}
  .fpwrap{grid-template-columns:1fr}
  .ctl{grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem 1.1rem}
  .ctl::before{display:none}
}
@media (max-width:860px){
  .ctl{grid-template-columns:repeat(2,minmax(0,1fr))}
  .doc{grid-template-columns:auto 1fr}
  .doc__act{grid-column:1 / -1;flex-direction:row;align-items:center;justify-content:flex-start;gap:1.1rem}
}
@media (max-width:620px){
  .cell--5,.cell--7{grid-column:span 6}
  .clist--two,.xlist--two{grid-template-columns:1fr}
  .chero__cta .btn{width:100%}

  /* vertical timeline */
  .ctl{grid-template-columns:1fr;gap:0;padding-left:0}
  .ctl::before{
    display:block;left:18.5px;right:auto;top:.5rem;bottom:1.5rem;
    width:1px;height:auto;
    background:linear-gradient(180deg,var(--hairline-2),var(--hairline-2) 88%,transparent);
  }
  .ctl__i{padding:0 0 1.7rem 3.4rem;min-height:2.6rem}
  .ctl__i:last-child{padding-bottom:0}
  .ctl__node{position:absolute;left:0;top:0}
  .ctl__t{margin-top:.35rem}
  .warn{flex-direction:column;gap:1rem}
  .qa__a .clist{padding-right:1rem}

  /* let the card header breathe: the status tag drops to its own line */
  .fpcard .ccard__head{flex-wrap:wrap;row-gap:.85rem}
  .fpcard .ccard__head > div{min-width:11rem}
  .fpcard .ccard__head .tag{margin-left:0}
  .fpcard__price{gap:.5rem}
  .doc{grid-template-columns:1fr;gap:1.1rem}
  .doc__act{flex-wrap:wrap}
  .doc__act .btn{width:100%}
}