/* ============================================================
   WE MAKE TREASURES — APPLICATION TEMPLATE (§5c)
   One canonical page per specialty application.
   Inherits tokens/type/motion from system + case + service.
   Weight cap: 600.
   ============================================================ */

/* ---------- hero: pillar chip + tag row ---------- */
.ap-hero .cs-title { max-width: 20ch; }
.ap-hero .cs-sub { max-width: 54ch; }
/* flat variant: no hero media, height driven by content */
.ap-hero--flat { height: auto; min-height: 0; background: var(--ink);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-top: clamp(78px,9vh,104px); padding-bottom: clamp(40px,5vw,72px); }
.ap-hero--flat .cs-hero-overlay { position: static; padding: 0; background: none; }
.ap-hero--flat .cs-crumb { margin-bottom: clamp(26px,3.4vw,52px); }
.ap-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s5); }
.ap-tag { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,.82); border: 1px solid rgba(255,255,255,.3); padding: 7px 11px; }
.ap-hero .cs-hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: var(--s6); }

/* ============================================================
   WHAT'S INCLUDED — full-bleed numbered deliverables
   ============================================================ */
.ap-incl { display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line-d); margin-top: clamp(30px,3.5vw,54px); }
.ap-item { --appx: clamp(20px,2vw,40px); display: flex; flex-direction: column; gap: var(--s4);
  padding: clamp(28px,3vw,50px) var(--appx);
  border-left: 1px solid var(--line-d); border-bottom: 1px solid var(--line-d); }
.ap-item:nth-child(3n+1) { border-left: 0; --appx: var(--s6); }
.ap-item:nth-child(3n) { --appx: var(--s6); }
.ap-item .i-n { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  color: var(--coral); white-space: nowrap; }
.ap-item h3 { font-family: var(--sans); font-weight: 600; font-size: clamp(19px,1.7vw,25px);
  letter-spacing: -0.018em; line-height: 1.08; text-wrap: balance; }
.ap-item p { font-size: clamp(14px,1.02vw,16px); line-height: 1.52;
  color: rgba(255,255,255,.68); text-wrap: pretty; }
@media (max-width: 900px){
  .ap-incl { grid-template-columns: repeat(2, 1fr); }
  .ap-item:nth-child(3n+1), .ap-item:nth-child(3n) { --appx: clamp(20px,2vw,40px); }
  .ap-item:nth-child(odd) { border-left: 0; --appx: var(--s6); }
  .ap-item:nth-child(even) { --appx: var(--s6); }
}
@media (max-width: 560px){
  .ap-incl { grid-template-columns: 1fr; }
  .ap-item, .ap-item:nth-child(3n+1), .ap-item:nth-child(odd) { border-left: 0; --appx: var(--s6); }
}

/* ============================================================
   POWERED BY / SERVES — reference rails
   ============================================================ */
.ap-refs { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch;
  border-top: 1px solid var(--line-d); margin-top: clamp(30px,3.5vw,54px); }
.ap-ref { padding: clamp(30px,3.4vw,56px) clamp(28px,3.4vw,60px) clamp(30px,3.4vw,56px) var(--s6); }
.ap-ref + .ap-ref { border-left: 1px solid var(--line-d);
  padding-left: clamp(28px,3.4vw,60px); padding-right: var(--s6); }
.ap-ref-lbl { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--graphite-d); }
.ap-ref h3 { font-family: var(--sans); font-weight: 600; font-size: clamp(22px,2.2vw,32px);
  letter-spacing: -0.02em; line-height: 1.06; margin-top: var(--s5); text-wrap: balance; }
.ap-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s6); }
.ap-chip { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--paper);
  border: 1px solid var(--line-d-strong); padding: 9px 12px;
  transition: background .16s, color .16s, border-color .16s; }
.ap-chip .arr { font-family: var(--mono); transition: transform .2s; }
.ap-chip:hover { background: var(--coral); color: var(--ink); border-color: var(--coral); }
.ap-chip:hover .arr { transform: translateX(3px); }
/* chip on the coral ground */
.ap-chip--ink { color: var(--ink); border-color: rgba(16,18,22,.34); }
.ap-chip--ink:hover { background: var(--ink); color: var(--coral); border-color: var(--ink); }
@media (max-width: 820px){
  .ap-refs { grid-template-columns: 1fr; }
  .ap-ref { padding: clamp(28px,7vw,48px) var(--s6); }
  .ap-ref + .ap-ref { border-left: 0; border-top: 1px solid var(--line-d);
    padding-left: var(--s6); padding-right: var(--s6); }
}

/* overview + who-it's-for body: single full-width column */
.cs-ov-body.ap-body { column-count: 1; columns: auto; max-width: none; width: 100%; }
.cs-ov-body.ap-body p { max-width: none; }

/* ---------- overview meta pairs ---------- */
.ap-meta { display: flex; flex-wrap: wrap; gap: 0 clamp(28px,3.4vw,64px);
  margin-top: clamp(22px,2.4vw,36px); padding-top: var(--s5);
  border-top: 1px solid var(--line-d); }
.ap-meta-row { display: flex; flex-direction: column; gap: 6px; }
.ap-meta dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--graphite-d); }
.ap-meta dd { font-family: var(--sans); font-weight: 600; font-size: clamp(15px,1.2vw,18px);
  letter-spacing: -0.01em; color: var(--paper); }
.ap-meta dd a { color: var(--coral); border-bottom: 1px solid transparent; transition: border-color .16s; }
.ap-meta dd a:hover { border-bottom-color: var(--coral); }

/* ============================================================
   INDUSTRIES SERVED — full cards with thumbnail
   ============================================================ */
.ap-inds { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  border-top: 1px solid var(--line-d); margin-top: clamp(30px,3.5vw,54px); }
.ap-ind { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch;
  border-bottom: 1px solid var(--line-d); border-left: 1px solid var(--line-d); }
.ap-ind:first-child { border-left: 0; }
.ap-ind-media { position: relative; overflow: hidden; min-height: clamp(220px,20vw,300px);
  background: rgba(255,255,255,.04); }
.ap-ind-media image-slot { display: block; width: 100%; height: 100%; }
.ap-ind-body { display: flex; flex-direction: column; gap: var(--s4);
  padding: clamp(24px,2.6vw,44px) clamp(22px,2.4vw,40px); min-width: 0; }
.ap-ind-lbl { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--graphite-d); }
.ap-ind-body h3 { font-family: var(--sans); font-weight: 600; font-size: clamp(20px,1.9vw,28px);
  letter-spacing: -0.02em; line-height: 1.06; text-wrap: balance; transition: color .16s; }
.ap-ind-body p { font-size: clamp(14px,1.02vw,16px); line-height: 1.52;
  color: rgba(255,255,255,.68); text-wrap: pretty; }
.ap-ind-go { margin-top: auto; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--coral); }
.ap-ind-go .arr { display: inline-block; transition: transform .2s; }
.ap-ind:hover .ap-ind-body h3 { color: var(--coral); }
.ap-ind:hover .ap-ind-go .arr { transform: translateX(4px); }
@media (max-width: 620px){
  .ap-ind { grid-template-columns: 1fr; border-left: 0; }
  .ap-ind-media { min-height: clamp(180px,44vw,260px); }
}

/* black-on-coral variant */
.ap-inds-sec { padding-top: clamp(30px,3.4vw,52px); }
.ap-inds-sec .svc-sechead { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ap-inds-sec .svc-sechead .svc-lede { margin-left: auto; margin-right: auto; }
.ap-inds-sec .svc-lede { color: rgba(16,18,22,.78); }
.ap-inds-sec .ap-inds { border-top-color: rgba(16,18,22,.22); }
.ap-inds-sec .ap-ind { border-bottom-color: rgba(16,18,22,.22); border-left-color: rgba(16,18,22,.22); }
.ap-inds-sec .ap-ind-media { background: rgba(16,18,22,.08); }
.ap-inds-sec .ap-ind-lbl { color: rgba(16,18,22,.6); }
.ap-inds-sec .ap-ind-body h3 { color: var(--ink); }
.ap-inds-sec .ap-ind-body p { color: rgba(16,18,22,.74); }
.ap-inds-sec .ap-ind-go { color: var(--ink); }
.ap-inds-sec .ap-ind:hover .ap-ind-body h3 { color: var(--paper); }

/* ============================================================
   OFTEN PAIRED WITH — attach-rate cards
   ============================================================ */
.ap-pair-sec .svc-sechead { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ap-pair-sec .svc-sechead .svc-lede { margin-left: auto; margin-right: auto; }
.ap-pair { display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line-d); margin-top: clamp(30px,3.5vw,54px); }
.ap-pcard { --appx: clamp(20px,2vw,40px); display: flex; flex-direction: column; gap: var(--s4);
  padding: clamp(28px,3vw,50px) var(--appx) 0;
  border-left: 1px solid var(--line-d); }
.ap-pcard:first-child { border-left: 0; --appx: var(--s6); }
.ap-pcard:last-child { --appx: var(--s6); }
.ap-pcard h4 { font-family: var(--sans); font-weight: 600; font-size: clamp(19px,1.7vw,25px);
  letter-spacing: -0.018em; line-height: 1.08; text-wrap: balance; }
.ap-pcard p { font-size: clamp(14px,1.02vw,16px); line-height: 1.52;
  color: rgba(255,255,255,.68); text-wrap: pretty; }
.ap-pmeta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s3); margin-bottom: clamp(18px,2vw,30px); }
.ap-pmeta span { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--graphite-d); }
.ap-pcard .ap-pgo { margin-top: auto; margin-bottom: clamp(24px,2.6vw,40px);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--coral); transition: transform .2s; }
.ap-pcard:hover .ap-pgo { transform: translateX(4px); }
.ap-pcard:hover h4 { color: var(--coral); }
@media (max-width: 880px){
  .ap-pair { grid-template-columns: 1fr; }
  .ap-pcard, .ap-pcard:first-child { border-left: 0; border-top: 1px solid var(--line-d); --appx: var(--s6); }
  .ap-pcard:first-child { border-top: 0; }
}