/* process breakpoints, loaded after the shared ones. */

@media (max-width: 900px) {
  .process-section { min-height: 0; padding: 80px 0; background-size: 82px 82px; }
  .process-section .section-intro h2 { margin-top: 32px; font-size: 40px; line-height: 40px; }
  .process-section .section-intro > p:last-of-type:not(.eyebrow):not(.eyebrow) { margin-top: 20px; font-size: 16px; }
  .process-grid { display: flex; gap: 10px; margin-top: 40px; padding-inline: 16px; overflow-x: auto; scroll-snap-type: x mandatory; }
  .process-card { width: 285px; min-height: 300px; flex: none; padding: 28px 24px; scroll-snap-align: start; }
  .process-card + .process-card { border-left: 1px solid rgba(0,0,0,.1); }
  .process-card__number { font-size: 64px; line-height: 64px; }
  .process-card h3 { margin-top: 42px; font-size: 25px; line-height: 27px; }
  .process-grid { scrollbar-width: none; }
  .process-grid::-webkit-scrollbar { display: none; }
  body.email-marketing-page .process-section { margin-top: 80px; }
}

@media (max-width: 900px) {
	/* Home phone frame (Figma 211:1688-211:2307, all offsets from the section top).
	   The intro is a box with a row of 40px tiles along its top (0-40) and bottom
	   (313-353), centred on the page; corners on top, ticks where it meets the steps;
	   the steps are a two-by-two grid of 191x270 cells (353-893) that clip their
	   coral shapes; the section ends on the grid, closed by corners. */
	body.home-page .process-section { padding: 100px 0 0; border-block: 0; }
	body.home-page .process-section .rail-ticks { top: 347px; }
	body.home-page .process-cells__left, body.home-page .process-cells__right { display: none; }
	body.home-page .process-cells__top, body.home-page .process-cells__bottom { height: 40px; border-block: 1px solid rgba(0,0,0,.1); background: linear-gradient(to right, transparent 39px, rgba(0,0,0,.1) 39px) calc(50% - 19.5px) 0 / 40px 100% repeat-x; }
	body.home-page .process-cells__top { top: 0; }
	body.home-page .process-cells__bottom { top: 313px; }
	/* The frame's badge is 14px type with 16px sides (130x30), not the 12px phone default. */
	body.home-page .process-section .eyebrow { padding-inline: 16px; font-size: 14px; }
	body.home-page .process-section .section-intro h2 { margin-top: 32px; font-size: 32px; line-height: 32px; }
	body.home-page .process-section .section-intro > p:last-of-type:not(.eyebrow):not(.eyebrow) { max-width: 309px; margin-top: 24px; font-size: 16px; line-height: 24px; }
	body.home-page .process-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin-top: 87px; padding-inline: 16px; overflow: visible; scroll-snap-type: none; }
	/* 19px on the right: the cell's 1px border comes out of it, so the copy keeps the
	   frame's full 151px measure and breaks where the design does. The cells are 270
	   tall at 414 (the longest copy, four lines, ends at 263, + 6 + the 1px border) and
	   grow on narrower phones where the copy wraps further, instead of clipping it. */
	body.home-page .process-card { width: auto; height: auto; min-height: 270px; padding: 20px 19px 6px 20px; border-top: 0; border-bottom: 1px solid rgba(0,0,0,.1); scroll-snap-align: none; }
	body.home-page .process-card:nth-child(even) { border-right: 1px solid rgba(0,0,0,.1); }
	body.home-page .process-card__number { font-size: 40px; line-height: 40px; }
	body.home-page .process-card h3 { margin-top: 50px; font-size: 20px; line-height: 20px; }
	/* The frame breaks each title in its own box: Choose / Your Tier, Select Your /
	   Channels, Receive Your / Tokens, Submit / Requests. */
	body.home-page .process-card--1 h3 { max-width: 97px; }
	body.home-page .process-card--2 h3 { max-width: 126px; }
	body.home-page .process-card--3 h3 { max-width: 134px; }
	body.home-page .process-card--4 h3 { max-width: 126px; }
	body.home-page .process-card p { max-width: 151px; margin-top: 17px; font-size: 16px; line-height: 24px; }
	/* Shapes are placed from the cell's outer edge; the cell's 1px left border is undone. */
	body.home-page .process-card__shapes { left: -1px; }
	body.home-page .process-card--1 .process-card__shapes i:nth-child(1) { left: 168px; top: -1px; width: 24px; height: 24px; }
	body.home-page .process-card--2 .process-card__shapes i:nth-child(1) { left: 149px; top: -16px; width: 32px; height: 32px; }
	body.home-page .process-card--2 .process-card__shapes i:nth-child(2) { left: 181px; top: 16px; width: 24px; height: 24px; }
	body.home-page .process-card--3 .process-card__shapes i { transform: rotate(39deg); transform-origin: 0 0; }
	body.home-page .process-card--3 .process-card__shapes i:nth-child(1) { left: 148.1px; top: -56px; width: 48px; height: 48px; }
	body.home-page .process-card--3 .process-card__shapes i:nth-child(2) { left: 155.4px; top: 11.5px; width: 24px; height: 24px; }
	body.home-page .process-card--3 .process-card__shapes i:nth-child(3) { left: 193.4px; top: 3px; width: 31px; height: 31px; }
	body.home-page .process-card--4 .process-card__shapes i:nth-child(1) { left: 127px; top: -13px; width: 28px; height: 28px; }
	body.home-page .process-card--4 .process-card__shapes i:nth-child(2) { left: 155px; top: 15px; width: 24px; height: 24px; }
	body.home-page .process-card--4 .process-card__shapes i:nth-child(3) { left: 179px; top: 39px; width: 20px; height: 20px; }
	body.home-page .process-card--4 .process-card__shapes i:nth-child(4) { left: 179px; top: -17px; width: 31px; height: 31px; }
}

@media (max-width: 900px) {
	/* Two steps to a row on the phone, each 191 wide, sharing their borders. */
	body.social-media-marketing-page .process-section { min-height: 0; margin-top: 80px; padding: 100px 0 0; }
	body.social-media-marketing-page .process-section .section-intro h2 { margin-top: 32px; font-size: 32px; line-height: 32px; }
	body.social-media-marketing-page .process-section .section-intro > p:last-of-type:not(.eyebrow):not(.eyebrow) { margin-top: 20px; font-size: 16px; line-height: 24px; }
	/* The home page runs these as a scrolling rail on the phone; this frame
	   draws a two-by-two grid instead, so the rail has to be undone. */
	body.social-media-marketing-page .process-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; margin-top: 90px; padding-inline: 16px; overflow: visible; }
	body.social-media-marketing-page .process-card { width: auto; flex: none; scroll-snap-align: none; }
	body.social-media-marketing-page .process-card { height: 270px; min-height: 270px; padding: 22px 16px 20px; }
	body.social-media-marketing-page .process-card__number { font-size: 44px; line-height: 44px; }
	body.social-media-marketing-page .process-card h3 { max-width: none; margin-top: 26px; font-size: 20px; line-height: 22px; }
	body.social-media-marketing-page .process-card p { max-width: none; margin-top: 16px; font-size: 14px; line-height: 22px; }
}

@media (max-width: 900px) {
	/* Branding shares the phone frame's two-by-two steps, not the home rail. */
	body.branding-page .process-section { padding-bottom: 0; }
	body.branding-page .process-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin-top: 90px; padding-inline: 16px; overflow: visible; scroll-snap-type: none; }
	body.branding-page .process-card { width: auto; height: auto; min-height: 270px; padding: 20px; border-bottom: 1px solid rgba(0,0,0,.1); }
	body.branding-page .process-card:nth-child(even) { border-right: 1px solid rgba(0,0,0,.1); }
	body.branding-page .process-card:nth-child(n+3) { border-top: 0; }
	body.branding-page .process-card__number { font-size: 40px; line-height: 40px; }
	body.branding-page .process-card h3 { max-width: none; margin-top: 50px; font-size: 20px; line-height: 20px; }
	body.branding-page .process-card p { max-width: none; margin-top: 20px; font-size: 16px; line-height: 24px; }
	/* Anchor the existing coral decorations to the narrower cards. */
	body.branding-page .process-card__shapes { right: 0; left: auto; width: 192px; overflow: hidden; }
	body.branding-page .process-card__shapes i { margin-left: -139px; }
	body.branding-page .process-card--1 .process-card__shapes i { width: 24px; height: 24px; }
}

@media (max-width: 900px) {
	/* Email uses the same four steps in a two-by-two phone grid (211:15066). */
	body.email-marketing-page .process-section { margin-top: 0; padding: 100px 0 0; }
	body.email-marketing-page .process-section .section-intro h2 { margin-top: 32px; font-size: 32px; line-height: 32px; }
	body.email-marketing-page .process-section .section-intro > p:last-of-type:not(.eyebrow):not(.eyebrow) { max-width: 309px; margin-top: 20px; font-size: 16px; line-height: 24px; }
	body.email-marketing-page .process-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin-top: 91px; padding-inline: 16px; overflow: visible; scroll-snap-type: none; }
	body.email-marketing-page .process-card { width: auto; height: auto; min-height: 270px; padding: 20px 20px 10px; border-bottom: 1px solid rgba(0,0,0,.1); }
	body.email-marketing-page .process-card:nth-child(even) { border-right: 1px solid rgba(0,0,0,.1); }
	body.email-marketing-page .process-card:nth-child(n+3) { border-top: 0; }
	body.email-marketing-page .process-card__number { font-size: 40px; line-height: 40px; }
	body.email-marketing-page .process-card h3 { max-width: none; margin-top: 46px; font-size: 20px; line-height: 20px; }
	body.email-marketing-page .process-card p { max-width: none; margin-top: 17px; font-size: 16px; line-height: 24px; }
	body.email-marketing-page .process-card__shapes { right: 0; left: auto; width: 192px; overflow: hidden; }
	body.email-marketing-page .process-card__shapes i { margin-left: -139px; }
	body.email-marketing-page .process-card--1 .process-card__shapes i { width: 24px; height: 24px; }
}
@media (max-width: 767px) {
  /* The shared mobile process frame uses 40px tile strips rather than
     the desktop's large tiles down both sides of the heading. */
  body:is(.home-page,.web-development-page,.digital-marketing-page,.email-marketing-page,.branding-page,.social-media-marketing-page) .process-section { padding: 100px 0 0; border-block: 0; }
  body:is(.home-page,.web-development-page,.digital-marketing-page,.email-marketing-page,.branding-page,.social-media-marketing-page) .process-cells__left,
  body:is(.home-page,.web-development-page,.digital-marketing-page,.email-marketing-page,.branding-page,.social-media-marketing-page) .process-cells__right { display: none; }
  body:is(.home-page,.web-development-page,.digital-marketing-page,.email-marketing-page,.branding-page,.social-media-marketing-page) .process-cells__top,
  body:is(.home-page,.web-development-page,.digital-marketing-page,.email-marketing-page,.branding-page,.social-media-marketing-page) .process-cells__bottom {
    height: 40px;
    border-block: 1px solid rgba(0,0,0,.1);
    background: linear-gradient(to right, transparent 39px, rgba(0,0,0,.1) 39px) calc(50% - 19.5px) 0 / 40px 100% repeat-x;
  }
  body:is(.home-page,.web-development-page,.digital-marketing-page,.email-marketing-page,.branding-page,.social-media-marketing-page) .process-cells__top { top: 0; }
  body:is(.home-page,.web-development-page,.digital-marketing-page,.email-marketing-page,.branding-page,.social-media-marketing-page) .process-cells__bottom { top: 313px; }
  body:is(.home-page,.web-development-page,.digital-marketing-page,.email-marketing-page,.branding-page,.social-media-marketing-page) .process-section .rail-ticks { top: 347px; }
  body:is(.home-page,.web-development-page,.digital-marketing-page,.email-marketing-page,.branding-page,.social-media-marketing-page) .process-section .eyebrow { width: 130px; padding-inline: 10px; }
  body:is(.home-page,.web-development-page,.digital-marketing-page,.email-marketing-page,.branding-page,.social-media-marketing-page) .process-section .section-intro h2 { margin-top: 32px; }
  body:is(.home-page,.web-development-page,.digital-marketing-page,.email-marketing-page,.branding-page,.social-media-marketing-page) .process-section .section-intro > p:last-of-type:not(.eyebrow):not(.eyebrow) { margin-top: 32px; }
  body:is(.home-page,.web-development-page,.digital-marketing-page,.email-marketing-page,.branding-page,.social-media-marketing-page) .process-grid { margin-top: 103px; }
}