/* Complaints and Appeals page: the policy template (policy.css) carries the design. This file holds only the
   preview-only "to confirm" panel, the same block every concept page uses; drop it with the panel at Webflow build. */
.pv-todo{max-width:var(--wrap);margin:20px auto 0;padding:14px var(--gutter)}
.pv-todo strong{display:block;margin-bottom:6px;color:#7d5200;font-size:14px}
.pv-todo ul{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.pv-todo li{padding:4px 10px;border:1px dashed #c9a24a;border-radius:3px;background:#fff8e8;color:#7d5200;font-size:13.5px}
@media print{.pv-todo{display:none}}

/* Hero calls to action. 19px bold makes white-on-orange "large text" (needs 3:1; it is 3.3:1). */
.cx-hero-btns{margin-top:clamp(22px,3vw,32px)}
.cx-big{font-size:19px;font-weight:700}

/* At a glance: the complaint timeline on navy. CSS only; motion is scroll-driven and optional. */
.cx-glance{position:relative;overflow:hidden;background:var(--navy) linear-gradient(90deg,transparent 0 calc(100% - 1px),rgba(255,255,255,.04) 0) 0 0/72px 72px}
.cx-glance h2{scroll-margin-top:96px}
.cx-intro{max-width:640px;margin-top:12px;font-size:16px;line-height:1.55}
.cx-track{--dot:40px;position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:28px;margin:clamp(32px,4vw,52px) 0 0;padding:0;list-style:none;counter-reset:cx}
.cx-track::before,.cx-track::after{content:"";position:absolute;top:calc(var(--dot)/2 - 1px);left:calc(var(--dot)/2);right:calc((100% - 112px)/5 - var(--dot)/2);height:2px;background:var(--rule-navy)}
.cx-track::after{background:var(--orange);transform-origin:left}
.cx-track li{position:relative;z-index:1;counter-increment:cx;padding-top:calc(var(--dot) + 18px)}
.cx-track li::before{content:counter(cx);position:absolute;top:0;left:0;display:grid;place-items:center;width:var(--dot);height:var(--dot);border:2px solid var(--orange);border-radius:50%;background:var(--navy);color:#fff;font-weight:700;font-variant-numeric:tabular-nums}
.cx-track li:last-child::before{content:"";background:var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='m3 9.5 4 4 8-9' stroke='%23fff' stroke-width='2.4'/%3E%3C/svg%3E") no-repeat center/18px}
.cx-when{display:inline-block;margin-bottom:12px;padding:5px 11px;border-radius:999px;background:#fff;color:var(--navy);font-size:14px;font-weight:700;line-height:1.2}
.cx-track h3{margin-bottom:6px;font-size:19px;line-height:1.25}
.cx-track p{font-size:15.5px;line-height:1.5}
.cx-appeal{margin-top:clamp(40px,5vw,64px);padding-top:clamp(28px,3vw,40px);border-top:1px solid var(--rule-navy)}
.cx-sub{font-size:clamp(21px,.7vw + 18px,27px);line-height:1.2}
.cx-sub span{display:block;margin-bottom:6px;color:var(--on-navy);font-size:15px;font-weight:500}
.cx-app{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1000px;counter-reset:cx}
.cx-app::before,.cx-app::after{right:calc((100% - 56px)/3 - var(--dot)/2)}
.cx-app li::before{content:"A" counter(cx);font-size:14px}

/* What to expect: two cards */
.cx-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px);align-items:start}
.cx-card{padding:clamp(22px,3vw,36px);border:1px solid var(--line);border-top:4px solid var(--navy);border-radius:4px;background:#fff}
.cx-card.cx-us{background:var(--ground)}
.cx-card h2{margin-bottom:12px}
.cx-card ul{margin:0;padding:0;list-style:none}
.cx-card li{display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--line);font-size:16px;line-height:1.5}
.cx-card li:first-child{border-top:0}
.cx-card svg{flex:none;width:18px;height:18px;margin-top:3px;color:var(--orange)}
.cx-card .btns{margin-top:22px}
.cx-card .btn{width:auto;margin-top:0}
.cx-ghost{border-color:var(--navy)!important}

/* Tablets and phones: the timeline runs down the page */
@media (max-width:900px){
  .cx-track,.cx-app{grid-template-columns:1fr;gap:26px;padding-left:calc(var(--dot) + 18px)}
  .cx-track::before,.cx-track::after{display:none}
  .cx-track li{padding-top:7px}
  .cx-track li::before{left:calc(-1 * (var(--dot) + 18px))}
  .cx-track li:not(:last-child)::after{content:"";position:absolute;top:var(--dot);bottom:-26px;left:calc(var(--dot)/2 - var(--dot) - 19px);width:2px;background:var(--orange);transform-origin:top}
  .cx-hero-btns .btn{width:100%}
  .cx-cols{grid-template-columns:1fr}
}
@media (max-width:640px){.cx-card .btn{width:100%}}

@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .cx-track::after{animation:cx-fill linear both;animation-timeline:view();animation-range:entry 60% cover 55%}
    .cx-track li{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
    .cx-card{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 40%}
  }
  @media (prefers-reduced-motion:no-preference) and (max-width:900px){.cx-track li:not(:last-child)::after{animation:cx-fill-y linear both;animation-timeline:view();animation-range:entry 70% cover 50%}}
}
@keyframes cx-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes cx-fill-y{from{transform:scaleY(0)}to{transform:scaleY(1)}}

@media print{.cx-glance,.cx-expect,.cx-hero-btns{display:none!important}}