/* Source: AVC_IOP_Method_Mobile_20260929 handoff, revision 2 (src/iop-method-mobile.css, 2026-09-29).
   Phone-only IOP "Our method" component restyled to the mobile Case Management
   "What Is Case Management?" design system: shared mobile heading attributes
   (data-av-mobile-section-heading / -eyebrow / -title / -lead), 24px rails,
   the PLAN/CONNECT/CONTINUE card shell (16px corners, 11px stack gap, 12/16/10
   padding, 46-48px icon column, 11px gap, 9/5 row rhythm, 19% hairline), site
   --font-display (Fraunces) and --font-sans (Inter) tokens. No JavaScript, no
   global token changes, no transforms/zoom/fixed heights/line clamps.
   Site adaptations vs the handoff copy are marked "site:". Do not edit the
   handoff copy; this is the runtime source. */
.avc-method-phone-mount { display: none; }
@media (max-width: 767.98px) {
  body.iop-page #iop-method [data-avc-method-phone] { display: block; }
  body.iop-page #iop-method [data-avc-method-phone], body.iop-page #iop-method [data-avc-method-phone] * { box-sizing: border-box; }
  body.iop-page #iop-method [data-avc-method-phone] .avc-method-phone {
    inline-size: 100%; max-inline-size: 100%; margin: 0;
    padding: clamp(22px, 5.5vw, 26px) 24px clamp(18px, 4.5vw, 22px);
    background: #FBF8F1; color: #15334d;
    font-family: var(--font-sans, Inter, system-ui, sans-serif);
    font-weight: 400; text-align: start;
  }
  body.iop-page #iop-method [data-avc-method-phone] .avc-method-phone__intro { text-align: center; }
  body.iop-page #iop-method [data-avc-method-phone] .avc-method-phone__eyebrow {
    display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 10px; row-gap: 6px; max-inline-size: 100%;
    margin: 0 0 22px; padding: 0; border: 0; background: none;
    color: #0f766e; font-family: var(--font-sans, Inter, system-ui, sans-serif);
    font-size: 13px; font-weight: 600; line-height: 1; letter-spacing: .14em;
    text-transform: uppercase; white-space: normal;
  }
  body.iop-page #iop-method [data-avc-method-phone] .avc-method-phone__eyebrow::before,
  body.iop-page #iop-method [data-avc-method-phone] .avc-method-phone__eyebrow::after { content: none; }
  body.iop-page #iop-method [data-avc-method-phone] .av-msh-line { display: block; inline-size: 28px; block-size: 2px; flex: 0 0 auto; border-radius: 2px; background: #14b8a6; }
  body.iop-page #iop-method [data-avc-method-phone] .av-msh-dot { display: block; inline-size: 7px; block-size: 7px; flex: 0 0 auto; border-radius: 50%; background: #e07856; box-shadow: 0 0 0 4px rgb(224 120 86 / 14%); }
  body.iop-page #iop-method [data-avc-method-phone] .avc-method-phone__title {
    margin: 0 auto 18px; padding: 0; color: #0b2127;
    font-family: var(--font-display, Fraunces, Georgia, serif);
    font-size: clamp(26px, 7vw, 30.8px); font-weight: 600; line-height: 1.16;
    letter-spacing: -.018em; text-align: center; text-transform: none; overflow: visible; text-wrap: balance;
  }
  body.iop-page #iop-method [data-avc-method-phone] .avc-method-phone__title > span { display: block; }
  body.iop-page #iop-method [data-avc-method-phone] .avc-method-phone__title em,
  body.iop-page #iop-method [data-avc-method-phone] .avc-method-phone__result-title em { color: #0f766e; font-style: italic; font-weight: 500; white-space: normal; }
  body.iop-page #iop-method [data-avc-method-phone] .avc-method-phone__summary {
    max-inline-size: 720px; margin: 0 auto; padding: 0;
    font-family: var(--font-sans, Inter, system-ui, sans-serif);
    color: #475569; font-size: 1.05rem; font-weight: 400;
    line-height: 1.7; letter-spacing: -.008em; text-align: center; text-wrap: pretty;
  }
  body.iop-page #iop-method [data-avc-method-phone] .avc-method-phone__cards {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 11px;
    margin-block-start: clamp(28px, 7.5vw, 40px); container-type: inline-size;
  }
  body.iop-page #iop-method [data-avc-method-phone] .avc-method-phone__card {
    --avm-card-rgb: 15, 118, 110; --avm-card-tint: rgba(244, 251, 251, .95); --avm-label: #0f766e;
    display: grid; grid-template-columns: clamp(46px, 11.6vw, 48px) minmax(0, 1fr);
    align-items: center; column-gap: 11px; min-inline-size: 0;
    margin: 0; padding: 12px 16px 10px; height: auto; min-height: 0;
    border: 1px solid rgba(var(--avm-card-rgb), .2); border-radius: 16px;
    background: linear-gradient(128deg, var(--avm-card-tint), rgba(255, 255, 255, .7));
    box-shadow: 0 8px 26px rgba(22, 55, 57, .03), inset 0 1px 0 rgba(255, 255, 255, .78);
    overflow: visible;
  }
  body.iop-page #iop-method [data-avc-method-phone] .avc-method-phone__card--practice {
    --avm-card-rgb: 111, 159, 69; --avm-card-tint: rgba(250, 252, 242, .96); --avm-label: #4f782d;
  }
  body.iop-page #iop-method [data-avc-method-phone] .avc-method-phone__card--forward {
    --avm-card-rgb: 217, 107, 73; --avm-card-tint: rgba(255, 248, 242, .96); --avm-label: #b9431f;
  }
  /* site: the Case Management discs are painted inside their PNG artwork (cream
     disc, thin accent inner ring, drawing ~50% of the disc). The IOP icons are
     square line-art SVGs, so the disc is drawn here: cream fill + inset ring in
     the padding, the supplied drawing inset by the padding (unchanged bytes,
     un-clipped by the 50% radius), the same outer 30% ring and soft shadow. */
  body.iop-page #iop-method [data-avc-method-phone] .avc-method-phone__icon {
    display: block; inline-size: 100%; block-size: auto; aspect-ratio: 1; object-fit: contain;
    margin: 0; padding: 10px; border: 0; border-radius: 50%;
    background: #fdfbf6;
    box-shadow: 0 0 0 1px rgba(var(--avm-card-rgb), .3), 0 4px 12px rgba(27, 64, 66, .035), inset 0 0 0 2px rgba(var(--avm-card-rgb), .12);
  }
  body.iop-page #iop-method [data-avc-method-phone] .avc-method-phone__card-copy { min-inline-size: 0; }
  body.iop-page #iop-method [data-avc-method-phone] .avc-method-phone__stage {
    margin: 0 0 2px; padding: 0; color: var(--avm-label);
    font-family: var(--font-sans, Inter, system-ui, sans-serif);
    font-size: 10.14px; font-weight: 600; line-height: 1; letter-spacing: .18em;
    text-transform: uppercase; white-space: normal; overflow-wrap: anywhere;
  }
  body.iop-page #iop-method [data-avc-method-phone] .avc-method-phone__item { margin: 0; padding-block: 9px; }
  body.iop-page #iop-method [data-avc-method-phone] .avc-method-phone__item + .avc-method-phone__item { border-top: 1px solid rgba(var(--avm-card-rgb), .19); }
  body.iop-page #iop-method [data-avc-method-phone] .avc-method-phone__item:last-child { padding-block-end: 5px; }
  /* IOP retains title + description rows; subhead role comes from Case Management's Help section (service-title token). */
  body.iop-page #iop-method [data-avc-method-phone] .avc-method-phone__item h4 {
    margin: 0 0 4px; padding: 0; color: #15334d;
    font-family: var(--font-display, Fraunces, Georgia, serif);
    font-size: clamp(14.5px, 3.9vw, 17px); font-weight: 600;
    line-height: 1.15; letter-spacing: -.02em; text-transform: none; overflow-wrap: anywhere;
  }
  body.iop-page #iop-method [data-avc-method-phone] .avc-method-phone__item p {
    margin: 0; padding: 0; color: #15334d;
    font-family: var(--font-sans, Inter, system-ui, sans-serif);
    font-size: clamp(12.5px, 3.25vw, 13px); font-weight: 400;
    line-height: 1.4; letter-spacing: -.008em; overflow-wrap: anywhere; text-wrap: pretty;
  }
  body.iop-page #iop-method [data-avc-method-phone] .avc-method-phone__result { margin: 28px 0 0; padding: 0; text-align: center; }
  body.iop-page #iop-method [data-avc-method-phone] .avc-method-phone__result-rule { display: block; inline-size: 48px; block-size: auto; margin: 0 auto 12px; }
  body.iop-page #iop-method [data-avc-method-phone] .avc-method-phone__result-label {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    margin: 0 0 14px; color: #4f782d;
    font-family: var(--font-sans, Inter, system-ui, sans-serif);
    font-size: 10.14px; font-weight: 600; line-height: 1.3; letter-spacing: .18em;
    text-transform: uppercase;
  }
  body.iop-page #iop-method [data-avc-method-phone] .avc-method-phone__result-label img { inline-size: 12px; block-size: 12px; }
  body.iop-page #iop-method [data-avc-method-phone] .avc-method-phone__result-title {
    margin: 0 0 12px; color: #0b2127;
    font-family: var(--font-display, Fraunces, Georgia, serif);
    font-size: clamp(24px, 6.5vw, 28px); font-weight: 600;
    line-height: 1.2; letter-spacing: -.018em; overflow: visible;
  }
  body.iop-page #iop-method [data-avc-method-phone] .avc-method-phone__result-copy {
    margin: 0 auto; max-inline-size: 30em; color: #475569;
    font-family: var(--font-sans, Inter, system-ui, sans-serif);
    font-size: clamp(12.5px, 3.25vw, 13px); font-weight: 400; line-height: 1.4; letter-spacing: -.008em;
  }
  @supports ((background-clip: text) or (-webkit-background-clip: text)) {
    body.iop-page #iop-method [data-avc-method-phone] .avc-method-phone__title em,
    body.iop-page #iop-method [data-avc-method-phone] .avc-method-phone__result-title em {
      display: inline; padding: .06em .14em .14em .08em;
      background: linear-gradient(95deg, #0f766e 0%, #138591 50%, #c95e3f 100%);
      background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    }
  }
  @media (forced-colors: active) {
    body.iop-page #iop-method [data-avc-method-phone] .avc-method-phone__title em,
    body.iop-page #iop-method [data-avc-method-phone] .avc-method-phone__result-title em {
      background: none !important; color: CanvasText !important;
      -webkit-text-fill-color: currentColor !important;
    }
  }
  @container (max-width: 15rem) {
    body.iop-page #iop-method [data-avc-method-phone] .avc-method-phone__card { grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
    body.iop-page #iop-method [data-avc-method-phone] .avc-method-phone__icon { inline-size: 46px; }
  }
}
@media (max-width: 355.98px) {
  body.iop-page #iop-method [data-avc-method-phone] .avc-method-phone__card { padding: 10px 13px 9px; grid-template-columns: 42px minmax(0, 1fr); column-gap: 10px; }
  body.iop-page #iop-method [data-avc-method-phone] .avc-method-phone__icon { padding: 9px; } /* site: disc drawing inset at the 42px column */
  @container (max-width: 15rem) { body.iop-page #iop-method [data-avc-method-phone] .avc-method-phone__card { grid-template-columns: minmax(0, 1fr); } }
}