/* ==========================================================================
   Anthēs — Packages page
   Figma page "02 Packages", frame 10:38 (Packages / Desktop, 1280 × 14925)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page hero — Figma 10:67
   Fixed 785 frame containing the nav; the nav is lifted into the real
   <header>, leaving 785 − 63 = 722, with the frame's 82px gap as padding-top.
   -------------------------------------------------------------------------- */
.phero {
  height: 722px;
  padding: 82px 0 48px;
  overflow: hidden;
}

.phero__inner {
  width: min(var(--content), 100% - (2 * var(--gutter)));
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 70px;
}

/* Figma's copy box is 625px, but "Four Support Options." needs 661px in
   Chrome, which pushed the headline to a fourth line. The column fills the
   space left beside the artwork (669px at 1280) so the drawn three-line
   break survives; the standfirst keeps its 625px measure below. */
.phero__copy {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.phero__eyebrow {
  font-size: 12px;
  font-weight: var(--w-bold);
  letter-spacing: 1.68px;
  text-transform: uppercase;
  color: var(--marigold);
}

.phero__title {
  font-size: 67.2px;
  font-weight: var(--w-regular);
  line-height: 72.6px;
  letter-spacing: -1.21px;
  color: var(--ink);
}
.phero__title strong { font-weight: var(--w-bold); color: var(--crimson); }

.phero__sub { font-size: 18px; line-height: 28px; color: var(--ink); max-width: 625px; }

.phero__art { flex: 0 0 398px; width: 398px; }
.phero__art img { width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   Package details — Figma 10:74
   -------------------------------------------------------------------------- */
.pdetails {
  width: min(var(--content), 100% - (2 * var(--gutter)));
  margin-inline: auto;
  padding: 128px 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

/* Figma's heading box is 638px; Chrome needs 675px for line one, so this is
   the smallest width that keeps the drawn two-line break after "that". */
.pdetails .section-title { max-width: 700px; }

.detail-list { width: 100%; padding-top: 32px; }

.detail {
  border-top: 1px solid var(--ink-15);
  padding-block: 48px;
  display: flex;
  align-items: flex-start;
  gap: 48px;
}

.detail__head {
  flex: 0 0 240px;
  width: 240px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

/* 80 × 4 rule in the package's locked pillar colour */
.detail__rule {
  display: block;
  width: 80px;
  height: 4px;
  background: var(--package);
}

.detail__name {
  font-size: 28px;
  font-weight: var(--w-bold);
  line-height: 31px;
  color: var(--ink);
}

.detail__price { font-size: 16px; line-height: 26px; color: var(--ink-70); }

/* --on-package keeps ink on sun yellow rather than white */
.detail__cta {
  background: var(--package);
  color: var(--on-package);
  border: 0;
  padding: 9px 18px;
  font-size: 13px;
}
.detail__cta:hover { filter: brightness(0.92); }

.detail__body {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.detail__label {
  font-size: 11px;
  font-weight: var(--w-bold);
  line-height: normal;   /* Figma uses the font's default leading here */
  letter-spacing: 1.54px;
  text-transform: uppercase;
  color: var(--ink-40);
}

.detail__lede {
  font-size: 16px;
  line-height: 26px;
  color: var(--ink);
  max-width: 856px;
}

.detail__features { display: flex; flex-direction: column; gap: 12px; }

.detail__features li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15.5px;
  line-height: 23px;
  color: var(--ink);
  max-width: 856px;
}

/* The 9px bullet is a plain circle in the Figma, so it is drawn in CSS
   rather than shipped as four near-identical SVGs. */
.detail__features li::before {
  content: "";
  flex: 0 0 9px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--package);
}

/* --------------------------------------------------------------------------
   Add-ons — Figma 11:65
   -------------------------------------------------------------------------- */
.addons { background: #000; padding: 128px 0; }

.addons__inner {
  width: min(var(--content), 100% - (2 * var(--gutter)));
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.addons__bloom { width: 64px; height: 64px; }
.addons .section-title { max-width: 880px; }
.addons__sub { max-width: 659px; }

/* Figma's first column is a fixed 572; the second takes the rest */
.addons__grid {
  width: 100%;
  padding-top: 32px;
  display: grid;
  grid-template-columns: 572px minmax(0, 1fr);
  gap: 15px;
}

.addon {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 33px 24px;
  background: #000;
  border: 1px solid rgba(86, 86, 86, 0.44);
  border-radius: 20px;
}

/* Each add-on carries its own accent, set inline from the Figma */
.addon__icon {
  flex: 0 0 75px;
  width: 75px;
  height: 75px;
  border-radius: 200px;
  border: 1px solid var(--addon);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--addon) 21%, transparent),
    rgba(0, 0, 0, 0.21)
  );
  display: flex;
  align-items: center;
  justify-content: center;
}

.addon h3 {
  font-size: 18px;
  font-weight: var(--w-bold);
  line-height: 21px;
  color: #fff;
  margin-bottom: 8px;
}

.addon p { font-size: 15px; line-height: 19.5px; color: #707070; }


/* --------------------------------------------------------------------------
   Consultation CTA — Figma 11:98
   -------------------------------------------------------------------------- */
.pconsult { background: #000; padding: 128px 0; }

.pconsult__copy {
  width: min(var(--content), 100% - (2 * var(--gutter)));
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.pconsult__title {
  font-size: 52px;
  font-weight: var(--w-regular);
  line-height: 58px;
  letter-spacing: -0.62px;
  color: #fff;
  max-width: 660px;   /* Figma 604; the second line needs 651 in Chrome */
}

.pconsult__sub { font-size: 16px; line-height: 25.6px; color: #a4a4a4; max-width: 620px; }

.pconsult .btn {
  background: var(--marigold);
  color: var(--ink);
  font-size: 15px;
  padding: 14px 26px;
}
.pconsult .btn:hover { filter: brightness(0.92); }

/* --------------------------------------------------------------------------
   Big testimonial — Figma 11:105
   A fixed 728 frame with the quote centred inside it.
   -------------------------------------------------------------------------- */
.bigquote {
  background: var(--shell-bg);
  height: 728px;
  padding: 96px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

.bigquote__inner {
  width: min(var(--content), 100% - (2 * var(--gutter)));
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  text-align: center;
}

.bigquote__mark { width: 64px; height: 64px; }

.bigquote blockquote { margin: 0; max-width: 740px; }  /* Figma 697 */
.bigquote blockquote p {
  font-size: 32px;
  line-height: 42px;
  letter-spacing: -0.38px;
  color: var(--ink);
}

.bigquote figcaption {
  font-size: 12px;
  font-weight: var(--w-bold);
  line-height: normal;
  letter-spacing: 1.68px;
  text-transform: uppercase;
  color: var(--ink-70);
}

/* --------------------------------------------------------------------------
   What each piece does — Figma 12:75
   Six alternating rows. Each collage is a rotated, layered composition, so it
   ships as one flat export at its own pixel size rather than being scaled.
   -------------------------------------------------------------------------- */
.pieces { padding: 116px 0 128px; }

.pieces__head,
.pieces__list {
  width: min(var(--content), 100% - (2 * var(--gutter)));
  margin-inline: auto;
}

/* Head and list are left-aligned inside the column, as drawn — the drawn
   measures live on their contents, not on the boxes. */
.pieces__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 42px;
}

.pieces__eyebrow { color: #828282; }
.pieces .section-title { max-width: 830px; }   /* Figma 794 */
.pieces__sub { max-width: 659px; }

.piece { max-width: 1095px; }

.piece {
  display: flex;
  align-items: center;
  gap: 64px;
  padding-block: 75px;
}
.piece--last { gap: 48px; }

/* The art column is flipped for the even rows, as drawn */
.piece--flip { flex-direction: row-reverse; justify-content: flex-end; }

.piece__art { flex: 0 0 auto; max-width: 100%; height: auto; }

.piece__body {
  flex: 0 0 540px;
  width: 540px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
}

.piece__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
}

.piece__head h3 {
  font-size: 40px;
  font-weight: 600;
  line-height: 43px;
  letter-spacing: -0.35px;
  color: var(--ink);
}

.piece__label {
  font-size: 11px;
  font-weight: var(--w-bold);
  line-height: normal;
  letter-spacing: 1.54px;
  text-transform: uppercase;
  color: var(--ink-40);
}

.piece__lede { font-size: 16px; line-height: 25.6px; color: var(--ink-70); }

.piece__changes {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
  width: 100%;
}

.piece__features { display: flex; flex-direction: column; gap: 12px; }

.piece__features li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15.5px;
  line-height: 23px;
  color: var(--ink);
}

/* Same plain 9px circle as the package details list */
.piece__features li::before {
  content: "";
  flex: 0 0 9px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--marigold);
}

.piece__actions { display: flex; align-items: center; gap: 25px; }

.piece__example {
  background: transparent;
  border: 1px solid var(--ink);
  color: var(--ink);
  font-size: 13px;
  padding: 9px 18px;
  border-radius: 200px;
}
.piece__example:hover { background: var(--ink); color: var(--paper); }

.piece__talk {
  font-size: 13.5px;
  font-weight: var(--w-bold);
  color: var(--ink);
}
.piece__talk:hover { color: var(--marigold); }
.piece__talk span { display: inline-block; transition: transform 200ms var(--ease-out); }
.piece__talk:hover span { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   Next step CTA, light — Figma 13:75
   A full-bleed band that still carries the drawn 35px corner radius.
   -------------------------------------------------------------------------- */
.pnext {
  background: #fffdeb;
  border-radius: 35px;
  overflow: hidden;
  padding: 80px 0;
}

.pnext__copy {
  width: min(var(--content), 100% - (2 * var(--gutter)));
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.pnext__title {
  font-size: 52px;
  font-weight: var(--w-regular);
  line-height: 61px;
  letter-spacing: -0.62px;
  color: var(--ink);
  max-width: 510px;   /* Figma 478 */
}

.pnext__sub { font-size: 16px; line-height: 25.6px; color: var(--ink-70); max-width: 620px; }

.pnext__cta {
  background: var(--marigold);
  color: #fff;
  font-size: 15px;
  padding: 14px 26px;
}
.pnext__cta:hover { filter: brightness(0.92); }

/* --------------------------------------------------------------------------
   Why this works — Figma 13:82
   Four black cards. Each artwork is a flat export positioned exactly as drawn;
   the card copy stays live text so it reflows and reads to a screen reader.
   -------------------------------------------------------------------------- */
.pwhy { padding: 128px 0; }

.pwhy__inner {
  width: min(var(--content), 100% - (2 * var(--gutter)));
  margin-inline: auto;
}

.pwhy__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}

/* The Figma draws this eyebrow in white on a white ground, so it is invisible
   there. Built in the page's accent instead — see build-notes. */
.pwhy__eyebrow { color: var(--sage-green); }
.pwhy .section-title { max-width: 940px; }
.pwhy__sub { max-width: 659px; }

.pwhy__grid {
  max-width: 1139px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 557px;
  gap: 22px 24px;
}
/* Row two splits evenly */
.wcard--ai, .wcard--pricing { grid-column: auto; }
.pwhy__grid > .wcard--ai      { grid-column: 1; }
.pwhy__grid > .wcard--pricing { grid-column: 2; }

.wcard {
  position: relative;
  height: 500px;
  border-radius: 20px;
  background: #000;
  overflow: hidden;
  isolation: isolate;
}

/* max-width:none so the drawn artwork crops at the card edge instead of
   being squashed by the global responsive-image rule */
.wcard__art { position: absolute; max-width: none; pointer-events: none; z-index: 0; }
.wcard__art--strategists { left: 82px;  top: 24px;  width: 476px; height: 476px; }
.wcard__art--head        { left: 123px; top: 103px; width: 214px; height: 224px; }
.wcard__art--ring        { left: 86px;  top: 9px;   width: 384px; height: 384px; }
.wcard__art--spokes      { left: 113px; top: 36px;  width: 330px; height: 330px; }
.wcard__art--pricing     { left: 0;     top: 0;     width: 557px; height: 500px; }

/* The six loose dots on the quality-control card are plain circles */
.wdot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--c);
}

.wcard h3 {
  position: absolute;
  z-index: 1;
  left: 40px;
  top: 379px;
  font-size: 29px;
  font-weight: var(--w-bold);
  line-height: 20px;
  color: #fff;
}

.wcard p {
  position: absolute;
  z-index: 1;
  left: 40px;
  right: 40px;
  top: 411px;
  font-size: 16px;
  line-height: 24.5px;
  color: #f5f5f5;
}

/* --------------------------------------------------------------------------
   Clients — Figma 13:100
   A fixed 750 frame: 74px above and below a 602px logo mosaic.
   -------------------------------------------------------------------------- */
.pclients { background: #f4f2ef; padding: 74px 0; }

.pclients__inner {
  width: min(var(--content), 100% - (2 * var(--gutter)));
  margin-inline: auto;
  position: relative;
  height: 602px;
}

.pclients__mosaic {
  position: absolute;
  left: 98px;
  top: 0;
  width: 396px;
  height: 602px;
}

/* The drawn fades that soften the first and last tile into the background */
.pclients__mosaic::before,
.pclients__mosaic::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 127px;
  z-index: 1;
  pointer-events: none;
}
.pclients__mosaic::before { top: 0;    background: linear-gradient(180deg, #f4f2ef, rgba(244, 242, 239, 0)); }
.pclients__mosaic::after  { bottom: 0; background: linear-gradient(0deg,   #f4f2ef, rgba(244, 242, 239, 0)); }

.pclients__col {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 16.875px;
}
.pclients__col:first-child { left: 14px;  top: 131px; }
.pclients__col:last-child  { left: 208px; top: 27px;  }

.ptile {
  width: 137px;
  height: 137px;
  border-radius: 22.5px;
  background: #f1ece6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.pclients__col:first-child .ptile { width: 142px; }
.ptile img { display: block; }

.pclients__copy {
  position: absolute;
  left: 548px;
  top: 194px;
  width: 570px;   /* Figma 541; "feels like a partnership," needs 557 in Chrome */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.pclients__eyebrow { color: var(--coral-pink); }
.pclients__nobreak { white-space: nowrap; }

/* Statement only, while the logos are hidden: centred, no fixed canvas */
.pclients--statement .pclients__inner { height: auto; display: flex; justify-content: center; }
.pclients--statement .pclients__copy  { position: static; width: min(760px, 100%); flex: 0 1 auto;
                                        align-items: center; text-align: center; }

/* --------------------------------------------------------------------------
   What they say, light variant — Figma 467:7788
   The same marquee band as the home page, on #f1ece6 and without a title.
   -------------------------------------------------------------------------- */
.says--light {
  background: #f1ece6;
  height: 496px;
  padding: 64px 0 128px;
  overflow: hidden;
}
.says--light .says__head { margin-bottom: 32px; }
.says__eyebrow--coral { color: var(--coral-pink); }
.says--light .says__stage { margin-top: 0; }
.says--light .says__row--a { margin-left: -173px; margin-top: 0; }
.says--light .says__row--b { margin-left: 178px;  margin-top: 20px; }
/* Light cards with ink text, no coloured border — as drawn in the Figma.
   The shared .quote is styled for the black band (white text, coloured
   outline), which left these quotes almost invisible on #f1ece6. The About
   page already carries the same fix in about.css. */
.says--light .quote   { background: rgba(255, 255, 255, 0.45); border-color: transparent; color: var(--ink); }
.says--light .quote p { color: var(--ink); }

/* --------------------------------------------------------------------------
   FAQ teaser — Figma 13:122
   -------------------------------------------------------------------------- */
.pfaq { padding: 128px 0; }

.pfaq__inner {
  width: min(var(--content), 100% - (2 * var(--gutter)));
  margin-inline: auto;
  display: flex;
  align-items: flex-start;
  gap: 67px;
}

.pfaq__copy {
  flex: 0 0 474px;
  width: 474px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.pfaq__cta { font-size: 15px; padding: 14px 26px; border-width: 1px; }

.pfaq__accordion { flex: 1 1 0; min-width: 0; }

/* The rule is painted inside the box so the drawn 88px item height holds */
.pqa {
  box-shadow: inset 0 1px 0 var(--ink-15);
  padding-block: 32px;
}

.pqa summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  list-style: none;
  font-size: 20px;
  font-weight: var(--w-bold);
  line-height: 24px;
  color: var(--ink);
}
.pqa summary::-webkit-details-marker { display: none; }
.pqa summary:hover { color: var(--marigold); }

.pqa summary::after {
  content: "";
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  background: url("../img/faq-chevron-dark.svg") center / 12px 7px no-repeat;
  transition: transform 220ms var(--ease-out);
}
.pqa[open] summary::after { transform: rotate(180deg); }

.pqa__answer {
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 17px;
  line-height: 27px;
  color: var(--ink-70);
}
/* --------------------------------------------------------------------------
   Responsive — derived; the Figma has no artboards below 1280
   -------------------------------------------------------------------------- */
@media (max-width: 1279px) {
  .phero { height: auto; padding: 64px 0 48px; }
  .phero__inner { gap: clamp(32px, 5vw, 70px); }
  .phero__copy { flex: 1 1 420px; width: auto; }
  .phero__title { font-size: clamp(40px, 5.4vw, 67.2px); line-height: 1.08; }
  /* No shrink — see the same note in contact.css */
  .phero__art { flex: 0 0 auto; width: clamp(220px, 28vw, 398px); }

  .pdetails { padding: 104px 0; }
  .section-title { font-size: clamp(34px, 4.2vw, 52px); line-height: 1.17; }

  .addons { padding: 104px 0; }
  .addons__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Figma's fixed heights only hold at 1280 */
  .bigquote, .says--light { height: auto; }

  .pconsult { padding: 104px 0; }
  .pconsult__title { font-size: clamp(32px, 4.2vw, 52px); line-height: 1.12; }

  .bigquote { padding: 96px 0; }
  .bigquote blockquote p { font-size: clamp(22px, 2.6vw, 32px); line-height: 1.32; }

  .pieces { padding: 96px 0 104px; }
  .piece { gap: clamp(32px, 4vw, 64px); padding-block: 56px; }
  /* No shrink on the collages — they are flat exports, not layouts */
  .piece__art { max-width: 46%; }
  .piece__body { flex: 1 1 380px; width: auto; }

  .pnext { padding: 72px 0; }
  .pnext__title { font-size: clamp(32px, 4.2vw, 52px); line-height: 1.14; }

  .pwhy { padding: 104px 0; }
  .pwhy__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pwhy__grid > .wcard--ai,
  .pwhy__grid > .wcard--pricing { grid-column: auto; }

  /* The mosaic is pixel-placed at 1280; below that it becomes a plain grid */
  .pclients { padding: 96px 0; }
  .pclients__inner { height: auto; display: flex; flex-direction: row-reverse;
                     align-items: center; gap: clamp(32px, 5vw, 80px); }
  .pclients__mosaic { position: static; flex: 0 0 396px; display: flex; gap: 20px;
                      height: auto; align-items: flex-start; }
  .pclients__mosaic::before,
  .pclients__mosaic::after { display: none; }
  .pclients__col { position: static; }
  .pclients__col:last-child { margin-top: 48px; }
  .pclients__copy { position: static; width: auto; flex: 1 1 380px; }

  .says--light { padding: 96px 0 104px; }
  .says--light .says__row--a,
  .says--light .says__row--b { margin-left: 0; }

  .pfaq { padding: 104px 0; }
  .pfaq__inner { gap: clamp(32px, 4vw, 67px); }
  .pfaq__copy { flex: 1 1 380px; width: auto; }
  .pfaq__accordion { flex: 1 1 420px; }
}

@media (max-width: 900px) {
  .phero__inner { flex-direction: column; align-items: flex-start; }
  .phero__copy { flex: 1 1 auto; width: 100%; }
  .phero__art { flex: 1 1 auto; width: 100%; max-width: 398px; align-self: center; }

  .detail { flex-direction: column; gap: 24px; }
  .detail__head { flex: 1 1 auto; width: 100%; }

  .addons__grid { grid-template-columns: minmax(0, 1fr); }

  .piece, .piece--flip { flex-direction: column; align-items: flex-start; gap: 32px; }
  .piece__art { max-width: 100%; align-self: center; }
  .piece__body { flex: 1 1 auto; width: 100%; }

  /* Below this the cards stop being a fixed canvas and flow instead */
  .pwhy__grid { grid-template-columns: minmax(0, 1fr); }
  .wcard { height: auto; min-height: 500px; }

  .pclients__inner { flex-direction: column; align-items: flex-start; }
  .pclients__mosaic { align-self: center; }
  .pclients__copy { flex: 1 1 auto; width: 100%; }

  .pfaq__inner { flex-direction: column; }
  .pfaq__copy, .pfaq__accordion { flex: 1 1 auto; width: 100%; }
}

@media (max-width: 640px) {
  .phero { padding: 48px 0 40px; }
  .pdetails { padding: 72px 0; }
  .detail { padding-block: 36px; }
  .detail__features li { align-items: flex-start; }
  .detail__features li::before { margin-top: 7px; }

  .pconsult, .pnext, .pwhy, .pclients, .pfaq { padding: 72px 0; }
  .bigquote, .says--light { padding: 72px 0; }
  .pieces { padding: 64px 0 72px; }
  .piece { padding-block: 36px; }
  .piece__head h3 { font-size: clamp(28px, 7vw, 40px); line-height: 1.12; }
  .piece__features li { align-items: flex-start; }
  .piece__features li::before { margin-top: 7px; }
  .piece__actions { flex-wrap: wrap; gap: 16px 25px; }

  .pclients__mosaic { flex: 0 0 auto; width: 100%; max-width: 396px; }

  /* The card copy is absolutely placed at 1280; on a phone the artwork keeps
     a fixed band at the top and the copy flows underneath it. */
  .wcard { min-height: 0; padding: 268px 24px 32px; }
  .wcard h3, .wcard p {
    position: relative;
    left: auto; right: auto; top: auto;
  }
  .wcard h3 { line-height: 1.15; margin-bottom: 12px; }

  .wcard__art--strategists { left: 0;   top: 0;    width: auto; height: 280px; }
  .wcard__art--pricing     { left: 0;   top: 0;    width: auto; height: 280px; }
  .wcard__art--head        { left: 50%; top: 32px; width: 154px; height: 161px; transform: translateX(-50%); }
  .wcard__art--ring        { left: 50%; top: 8px;  width: 252px; height: 252px; transform: translateX(-50%); }
  .wcard__art--spokes      { left: 50%; top: 26px; width: 217px; height: 217px; transform: translateX(-50%); }
  /* The loose dots are placed against the 557px canvas and have nowhere to go */
  .wdot { display: none; }
}