@import url(../fonts/Futura-PT/FuturaPT-Light-min.css);
@import url(../fonts/Futura-PT/FuturaPT-Bold-min.css);
@import url(../fonts/Open-Sans/OpenSans-Bold-min.css);
@import url(../fonts/Open-Sans/OpenSans-min.css);
:root {
  --font-family: 'OpenSans', sans-serif;
  --font-family--heading: 'FuturaPT', sans-serif;
  --font-weight--thin: 100;
  --font-weight--extra-light: 200;
  --font-weight--light: 300;
  --font-weight--normal: 400;
  --font-weight--medium: 500;
  --font-weight--semi-bold: 600;
  --font-weight--bold: 700;
  --font-weight--extra-bold: 800;
  --font-weight--black: 900;
  --line-height: 1.5;
  --line-height--heading: 1.2;
  --border-radius: 0.1875rem;
  --spacing: 1.5rem;
  --spacing--small: 0.75rem;
  --border-width: 0.0625rem;
  --border: var(--border-width) solid currentColor;
  --focus-outline-width: 0.1875rem;
  --focus-outline-offset: 0.125rem;
  --focus-outline: var(--focus-outline-width) solid #3399FF;
  --duration: 150ms;
  --timing: ease; }

button,
[type="button"],
[type="reset"],
[type="submit"] {
  appearance: none;
  background-color: #3399FF;
  border: 0;
  border-radius: var(--border-radius);
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-family: var(--font-family-base);
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
  font-weight: 600;
  line-height: 1;
  padding: var(--spacing--small) var(--spacing);
  text-align: center;
  text-decoration: none;
  transition: background-color var(--duration) var(--timing);
  user-select: none;
  vertical-align: middle;
  white-space: nowrap; }
  button:hover,
  [type="button"]:hover,
  [type="reset"]:hover,
  [type="submit"]:hover {
    background-color: #3399FF; }
  button:focus,
  [type="button"]:focus,
  [type="reset"]:focus,
  [type="submit"]:focus {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset); }
  button:disabled,
  [type="button"]:disabled,
  [type="reset"]:disabled,
  [type="submit"]:disabled {
    cursor: not-allowed;
    opacity: 0.5; }

:root {
  --form-box-shadow: inset 0 --border-width 0.1875rem rgba(#000, 0.06);
  --form-box-shadow-focus: var(--form-box-shadow), 0 0 0.3125rem #3399FF; }

fieldset {
  background-color: transparent;
  border: 0;
  margin: 0;
  padding: 0; }

legend {
  font-weight: 600;
  margin-bottom: var(--spacing--small);
  padding: 0; }

label {
  display: block;
  font-weight: 600;
  margin-bottom: var(--spacing--small); }

input,
select,
textarea {
  display: block;
  font-family: var(--font-family);
  font-size: 1rem; }

[type="color"],
[type="date"],
[type="datetime"],
[type="datetime-local"],
[type="email"],
[type="month"],
[type="number"],
[type="password"],
[type="search"],
[type="tel"],
[type="text"],
[type="time"],
[type="url"],
[type="week"],
input:not([type]),
textarea {
  appearance: none;
  background-color: transparent;
  border: var(--border);
  border-radius: var(--border-radius);
  box-shadow: var(--form-box-shadow);
  box-sizing: border-box;
  margin-bottom: var(--spacing--small);
  padding: calc(var(--spacing) / 3);
  transition: border-color var(--duration) var(--timing);
  width: 100%; }
  [type="color"]:focus,
  [type="date"]:focus,
  [type="datetime"]:focus,
  [type="datetime-local"]:focus,
  [type="email"]:focus,
  [type="month"]:focus,
  [type="number"]:focus,
  [type="password"]:focus,
  [type="search"]:focus,
  [type="tel"]:focus,
  [type="text"]:focus,
  [type="time"]:focus,
  [type="url"]:focus,
  [type="week"]:focus,
  input:not([type]):focus,
  textarea:focus {
    box-shadow: var(--form-box-shadow-focus); }
  [type="color"]:disabled,
  [type="date"]:disabled,
  [type="datetime"]:disabled,
  [type="datetime-local"]:disabled,
  [type="email"]:disabled,
  [type="month"]:disabled,
  [type="number"]:disabled,
  [type="password"]:disabled,
  [type="search"]:disabled,
  [type="tel"]:disabled,
  [type="text"]:disabled,
  [type="time"]:disabled,
  [type="url"]:disabled,
  [type="week"]:disabled,
  input:not([type]):disabled,
  textarea:disabled {
    cursor: not-allowed; }
    [type="color"]:disabled:hover,
    [type="date"]:disabled:hover,
    [type="datetime"]:disabled:hover,
    [type="datetime-local"]:disabled:hover,
    [type="email"]:disabled:hover,
    [type="month"]:disabled:hover,
    [type="number"]:disabled:hover,
    [type="password"]:disabled:hover,
    [type="search"]:disabled:hover,
    [type="tel"]:disabled:hover,
    [type="text"]:disabled:hover,
    [type="time"]:disabled:hover,
    [type="url"]:disabled:hover,
    [type="week"]:disabled:hover,
    input:not([type]):disabled:hover,
    textarea:disabled:hover {
      border: var(--border); }
  [type="color"]::placeholder,
  [type="date"]::placeholder,
  [type="datetime"]::placeholder,
  [type="datetime-local"]::placeholder,
  [type="email"]::placeholder,
  [type="month"]::placeholder,
  [type="number"]::placeholder,
  [type="password"]::placeholder,
  [type="search"]::placeholder,
  [type="tel"]::placeholder,
  [type="text"]::placeholder,
  [type="time"]::placeholder,
  [type="url"]::placeholder,
  [type="week"]::placeholder,
  input:not([type])::placeholder,
  textarea::placeholder {
    color: #00101F;
    opacity: 0.25; }

[type="search"] {
  -webkit-appearance: textfield; }

textarea {
  resize: vertical; }

[type="checkbox"],
[type="radio"] {
  display: inline;
  margin-right: var(--spacing--small); }

[type="file"] {
  margin-bottom: var(--spacing--small);
  width: 100%; }

select {
  margin-bottom: var(--spacing--small);
  width: 100%; }

[type="checkbox"]:focus,
[type="radio"]:focus,
[type="file"]:focus,
select:focus {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset); }

html {
  background-color: #fff;
  box-sizing: border-box; }

*,
*::before,
*::after {
  box-sizing: inherit; }

html,
body {
  height: 100%;
  margin: 0; }

ul,
ol {
  list-style-type: none;
  margin: 0;
  padding: 0; }

dl {
  margin: 0; }

dt {
  font-weight: 600;
  margin: 0; }

dd {
  margin: 0; }

figure {
  margin: 0; }

img,
picture {
  margin: 0;
  max-width: 100%; }

table {
  border-collapse: collapse;
  margin: var(--spacing) 0;
  table-layout: fixed;
  text-align: left;
  width: 100%; }

thead {
  line-height: var(--line-height--heading);
  vertical-align: bottom; }

tbody {
  vertical-align: top; }

tr {
  border-bottom: var(--border); }

th {
  font-weight: 600; }

th,
td {
  padding: var(--spacing--small) var(--spacing--small) var(--spacing--small) 0; }

html {
  color: #00101F;
  font-family: var(--font-family);
  font-size: 100%;
  line-height: var(--line-height); }

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-family--heading);
  font-size: 1.25rem;
  line-height: var(--line-height--heading);
  margin: 0 0 var(--spacing--small); }

p {
  margin: 0 0 var(--spacing--small); }

a {
  color: inherit;
  text-decoration-skip-ink: auto;
  transition: color var(--duration) var(--timing); }
  a:hover {
    color: #3399FF; }
  a:focus {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset); }

hr {
  border-bottom: var(--border);
  border-left: 0;
  border-right: 0;
  border-top: 0;
  margin: var(--spacing) 0; }

.wrapper {
  font-size: 14px;
  line-height: 1.7em; }
  .wrapper p span.b {
    font-weight: 700; }

.inner {
  max-width: 1100px;
  margin: auto;
  padding: 40px 20px 20px; }

header {
  background-color: #00101F;
  color: #fff;
  background-image: url("https://images.musicmagpie.co.uk/images/campaignpages/phone-depreciation-dc/img/header_img.jpg");
  background-size: cover;
  background-position: center;
  text-align: center; }
  header .inner {
    padding: 20px 20px 40px;
    background-color: rgba(0, 16, 31, 0.8); }
  header .logo {
    margin: 0 0 20px; }
    header .logo img {
      max-width: 200px; }
  header h1 {
    text-transform: uppercase;
    letter-spacing: 5px;
    font-size: 3.7vw; }
    header h1 span {
      display: block; }
      header h1 span.thin {
        font-weight: 100;
        font-size: 1.5em;
        line-height: 1.5em; }
      header h1 span.thick {
        font-size: 2.5em;
        line-height: 0.9em; }
      header h1 span.blue {
        color: #3399FF; }
  header .date {
    font-size: 3em;
    font-family: var(--font-family--heading);
    border-bottom: 5px solid #3399FF;
    display: inline-block;
    padding: 0 20px 5px;
    line-height: 1em;
    margin: 0 0 40px;
    font-weight: 100;
    letter-spacing: 0.1em; }
  @media screen and (min-width: 700px) {
    header {
      background-image: none;
      text-align: left;
      position: relative; }
      header .text {
        max-width: 60%;
        padding-right: 20px; }
        header .text h1 {
          font-size: 2.6vw; }
        header .text .date {
          font-size: 6.5vw;
          padding: 0;
          text-align: center;
          border-bottom: 0;
          position: relative; }
          header .text .date:after {
            content: "";
            display: block;
            width: 90%;
            margin-top: 20px;
            left: 0;
            border-bottom: 5px solid #3399FF; }
      header:before {
        content: "";
        position: absolute;
        width: 40%;
        left: 60%;
        height: 100%;
        background-image: url(https://images.musicmagpie.co.uk/images/campaignpages/phone-depreciation-dc/img/header_img.jpg);
        background-size: cover;
        background-position: center; } }
  @media screen and (min-width: 1100px) {
    header .text h1 {
      font-size: 2.2em; }
    header .text .date {
      font-size: 5.4em; } }
@media screen and (min-width: 700px) {
  main {
    text-align: left; } }

main .h2_wrap {
  display: flex;
  gap: 20px;
  align-items: center;
  margin-bottom: 40px; }
  @media screen and (min-width: 700px) {
    main .h2_wrap {
      margin-bottom: 80px; } }
main h2 {
  font-size: 2em;
  line-height: 1.2em;
  flex: 1;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700; }
  @media screen and (min-width: 700px) {
    main h2 {
      position: relative; }
      main h2 span {
        display: block; }
      main h2:before {
        content: "";
        position: absolute;
        bottom: -20px;
        width: 70px;
        height: 0;
        border-bottom: 5px solid #fff; } }
main h3 {
  text-transform: uppercase;
  font-size: 1.3em;
  margin: 40px auto 20px;
  text-align: center;
  letter-spacing: 0.1em; }

main .icon {
  height: 75px;
  width: 75px;
  background-color: #fff;
  border-radius: 50%;
  border: 1px solid #00101F;
  background-size: auto 70%;
  background-repeat: no-repeat;
  background-position: center center; }
  main .icon.blue {
    background-color: #3399FF; }
  main .icon.apple {
    background-image: url(https://images.musicmagpie.co.uk/images/campaignpages/phone-depreciation-dc/img/icon_apple.svg); }
  main .icon.clock {
    background-image: url(https://images.musicmagpie.co.uk/images/campaignpages/phone-depreciation-dc/img/icon_clock.svg); }
  main .icon.clockgreen {
    background-image: url(https://images.musicmagpie.co.uk/images/campaignpages/phone-depreciation-dc/img/icon_clockgreen.svg); }
  main .icon.coins {
    background-image: url(https://images.musicmagpie.co.uk/images/campaignpages/phone-depreciation-dc/img/icon_coins.svg); }
  main .icon.hourglass {
    background-image: url(https://images.musicmagpie.co.uk/images/campaignpages/phone-depreciation-dc/img/icon_hourglass.svg); }
  main .icon.lead {
    background-image: url(https://images.musicmagpie.co.uk/images/campaignpages/phone-depreciation-dc/img/icon_lead.svg); }
  main .icon.new {
    background-image: url(https://images.musicmagpie.co.uk/images/campaignpages/phone-depreciation-dc/img/icon_new.svg); }
  main .icon.pencil {
    background-image: url(https://images.musicmagpie.co.uk/images/campaignpages/phone-depreciation-dc/img/icon_pencil.svg); }
  main .icon.up {
    background-image: url(https://images.musicmagpie.co.uk/images/campaignpages/phone-depreciation-dc/img/icon_up.svg); }

main p {
  text-align: center; }
  @media screen and (min-width: 700px) {
    main p {
      text-align: left; } }
  main p span.b {
    font-weight: 700; }

main section.highlights {
  background-color: #005F8F;
  color: #fff; }
  main section.highlights nav {
    display: grid; }
    main section.highlights nav a {
      display: block;
      margin: 10px 0;
      color: inherit;
      text-decoration: none;
      font-family: var(--font-family--heading);
      text-transform: uppercase;
      font-weight: 700;
      letter-spacing: 1px;
      transition: all 100; }
      main section.highlights nav a span {
        display: block; }
      main section.highlights nav a .icon {
        display: none; }
      main section.highlights nav a .label_wrap {
        display: flex;
        align-items: center; }
        main section.highlights nav a .label_wrap .num {
          font-size: 3em;
          width: 50px;
          padding: 10px;
          margin-right: 10px;
          border-right: 5px solid #60BB66;
          text-align: center;
          transition: all 300; }
        main section.highlights nav a .label_wrap .label {
          flex: 1; }
          main section.highlights nav a .label_wrap .label span {
            display: inline; }
      main section.highlights nav a:hover .label_wrap .num {
        color: #60BB66; }
      main section.highlights nav a:hover .label_wrap .label {
        text-decoration: underline; }
  @media screen and (min-width: 700px) {
    main section.highlights nav {
      display: grid;
      grid-gap: 20px;
      grid-template-columns: 1fr 1fr 1fr; }
      main section.highlights nav a .icon {
        display: block;
        margin-bottom: 10px; }
      main section.highlights nav a .label_wrap {
        align-items: start;
        min-height: 70px; }
        main section.highlights nav a .label_wrap .num {
          width: 60px;
          padding: 20px 0;
          font-size: 4.6em; } }
  @media screen and (min-width: 960px) {
    main section.highlights nav {
      grid-template-columns: 1fr minmax(359px, 1fr) minmax(264px, 1fr); }
      main section.highlights nav a .label_wrap {
        align-items: center; }
        main section.highlights nav a .label_wrap .label span {
          display: block; } }
@media screen and (min-width: 700px) {
  main section.money_lost .h2_wrap h2:before {
    border-bottom: 5px solid #3399FF; } }

@media screen and (min-width: 700px) {
  main section.money_lost .text {
    columns: 2;
    column-gap: 40px; } }

main section.brands {
  background-color: #00101F;
  color: #fff; }
  main section.brands .chart {
    margin: 80px 0 40px; }
  main section.brands .d {
    display: none; }
  @media screen and (min-width: 700px) {
    main section.brands .d {
      display: block; }
    main section.brands .m {
      display: none; }
    main section.brands .text {
      columns: 2;
      column-gap: 40px;
      widows: 3;
      orphans: 3; } }
main section.value {
  background-color: #ABBFD7; }
  main section.value h3 {
    max-width: 350px; }
  main section.value figure {
    margin: 40px 0; }
    main section.value figure.most p span {
      background-color: #CA4108; }
    main section.value figure.least p span {
      background-color: #60BB66; }
    main section.value figure p {
      font-weight: 700; }
      main section.value figure p span {
        color: #fff;
        padding: 0 5px; }
  main section.value .value_lost .inner {
    padding-top: 0; }
  main section.value .value_lost h3:nth-child(1) {
    margin-top: 40px; }
  @media screen and (min-width: 700px) {
    main section.value .text-grid {
      display: grid;
      grid-gap: 40px;
      grid-template-columns: 1fr 1fr; }
      main section.value .text-grid h3 {
        text-align: left;
        max-width: 100%; }
        main section.value .text-grid h3:nth-child(1) {
          margin-top: 0; }
    main section.value .text {
      columns: 2;
      column-gap: 40px;
      widows: 10;
      orphans: 10; }
      main section.value .text h3 {
        text-align: left;
        max-width: 100%; }
        main section.value .text h3.full-col {
          column-span: all;
          width: calc(50% - 20px);
          margin: 0 0 40px 0; }
      main section.value .text p.full-col {
        column-span: all; }
      main section.value .text div {
        break-inside: avoid; }
        main section.value .text div:nth-child(1) h3:nth-child(1) {
          margin-top: 0; }
      main section.value .text .figure_wrap {
        column-span: all;
        columns: 2;
        column-gap: 40px;
        margin: 40px 0; }
        main section.value .text .figure_wrap figure {
          margin: 0; }
    main section.value .value_lost {
      background-color: #D9EEFF;
      padding: 40px 0; }
      main section.value .value_lost .single_col {
        width: calc(50% - 20px); }
        main section.value .value_lost .single_col h3 {
          text-align: left;
          max-width: 100%;
          font-size: 2em;
          margin: 0 0 40px; } }
@media screen and (min-width: 700px) {
  main section.best_time .h2_wrap h2:before {
    border-bottom: 5px solid #3399FF; } }

main section.best_time .cta {
  display: none;
  margin: 4em 0;
  text-align: center; }
  main section.best_time .cta p {
    margin: 2em 0;
    font-style: italic; }
  main section.best_time .cta a.big {
    background-color: #0C9038;
    color: #fff;
    text-transform: uppercase;
    padding: 1em 2em;
    text-decoration: none;
    border-radius: 10px;
    font-style: normal; }

main section.best_time figure.interactive_chart {
  margin: 40px 0;
  text-align: center; }
  main section.best_time figure.interactive_chart p.b {
    text-align: center;
    margin: 20px 0; }
  main section.best_time figure.interactive_chart .flex {
    display: flex;
    margin: 40px 0;
    justify-content: space-around;
    align-items: center; }
    main section.best_time figure.interactive_chart .flex #phone-list {
      height: 36px;
      overflow: visible;
      position: relative; }
      main section.best_time figure.interactive_chart .flex #phone-list label, main section.best_time figure.interactive_chart .flex #phone-list input {
        margin-bottom: 0; }
      @media screen and (min-width: 700px) {
        main section.best_time figure.interactive_chart .flex #phone-list label {
          width: 100px;
          display: inline-block; } }
      main section.best_time figure.interactive_chart .flex #phone-list input {
        border: 1px solid rgba(171, 191, 215, 0.5);
        box-shadow: inset 0 0 4px rgba(171, 191, 215, 0.3); }
        @media screen and (min-width: 700px) {
          main section.best_time figure.interactive_chart .flex #phone-list input {
            width: calc(100% - 110px);
            display: inline-block; } }
      main section.best_time figure.interactive_chart .flex #phone-list .list {
        position: absolute;
        right: 2px;
        top: 40px;
        padding: 0;
        background-color: #f7fcff;
        box-shadow: 0 1px 2px rgba(0, 16, 31, 0.2);
        overflow-y: auto;
        max-height: 300px;
        width: 180px; }
        main section.best_time figure.interactive_chart .flex #phone-list .list.hide {
          display: none; }
        main section.best_time figure.interactive_chart .flex #phone-list .list li {
          list-style: none;
          cursor: pointer;
          padding: 10px 0;
          margin: 0;
          line-height: 2em; }
          main section.best_time figure.interactive_chart .flex #phone-list .list li:hover {
            background-color: #ecf7ff; }
          main section.best_time figure.interactive_chart .flex #phone-list .list li.hide {
            display: none; }
          main section.best_time figure.interactive_chart .flex #phone-list .list li p {
            margin: 0; }
  main section.best_time figure.interactive_chart .button {
    display: none; }
  main section.best_time figure.interactive_chart .mobile_button {
    display: block;
    margin-top: 40px; }
  @media screen and (min-width: 700px) {
    main section.best_time figure.interactive_chart .mobile_button {
      display: none; }
    main section.best_time figure.interactive_chart .button {
      display: block; } }
  main section.best_time figure.interactive_chart .chart-wrap {
    max-width: 1000px;
    height: 500px;
    margin: auto; }
  main section.best_time figure.interactive_chart .cta {
    display: block; }

@media screen and (min-width: 700px) {
  main section.best_time .text {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    grid-gap: 40px; }
    main section.best_time .text > div {
      break-inside: avoid; }
    main section.best_time .text .cta {
      display: block; }
      main section.best_time .text .cta p {
        text-align: center;
        font-weight: 700;
        font-size: 0.9em;
        font-style: normal; }
    main section.best_time .text figure {
      margin: 0 0 60px; }
      main section.best_time .text figure .cta {
        display: none; }
      main section.best_time .text figure p {
        text-align: center; }
      main section.best_time .text figure .chart-wrap {
        height: 350px; }
      main section.best_time .text figure canvas {
        width: 100% !important; }
      main section.best_time .text figure #phone-list {
        margin-right: 20px; } }

main section.iphone {
  background-color: #00101F;
  color: #fff; }
  main section.iphone figure {
    margin: 40px 0; }
  main section.iphone .expert_wrap {
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-family: var(--font-family--heading);
    margin: 40px 0; }
    main section.iphone .expert_wrap .expert {
      display: flex;
      align-items: center;
      gap: 20px;
      margin: 40px 0; }
      main section.iphone .expert_wrap .expert .icon {
        background-image: url(https://images.musicmagpie.co.uk/images/campaignpages/phone-depreciation-dc/img/steve_img.png);
        background-size: cover;
        height: 100px;
        width: 100px; }
      main section.iphone .expert_wrap .expert .label {
        flex: 1; }
    main section.iphone .expert_wrap .quote {
      font-family: var(--font-family--heading);
      position: relative; }
      main section.iphone .expert_wrap .quote:before, main section.iphone .expert_wrap .quote:after {
        content: "";
        position: absolute;
        height: 40px;
        width: 40px;
        background-image: url(https://images.musicmagpie.co.uk/images/campaignpages/phone-depreciation-dc/img/icon_quote.svg);
        background-size: contain;
        background-repeat: no-repeat; }
      main section.iphone .expert_wrap .quote:before {
        top: -30px; }
      main section.iphone .expert_wrap .quote:after {
        bottom: -30px;
        right: 0;
        transform: rotate(180deg); }
  @media screen and (min-width: 700px) {
    main section.iphone .text {
      margin-bottom: 40px;
      display: grid;
      grid-gap: 40px;
      grid-template-columns: 1fr 1fr; }
      main section.iphone .text .expert_wrap {
        margin: 0; }
        main section.iphone .text .expert_wrap p {
          text-align: center; }
        main section.iphone .text .expert_wrap .expert {
          display: block;
          text-align: center;
          margin: 0 0 60px; }
          main section.iphone .text .expert_wrap .expert .icon {
            margin: auto;
            width: 150px;
            height: 150px;
            margin-bottom: 10px; }
          main section.iphone .text .expert_wrap .expert .label {
            position: relative; }
            main section.iphone .text .expert_wrap .expert .label br {
              display: none; }
            main section.iphone .text .expert_wrap .expert .label:after {
              content: "";
              position: absolute;
              bottom: -20px;
              left: calc(50% - 75px/2);
              width: 75px;
              height: 0;
              border-bottom: 5px solid #fff; } }
main section.upgrade {
  background-color: #ABBFD7; }
  main section.upgrade figure {
    margin: 40px 0; }
  main section.upgrade .d {
    display: none; }
  @media screen and (min-width: 1000px) {
    main section.upgrade .d {
      display: block; }
    main section.upgrade .m {
      display: none; } }
  @media screen and (min-width: 700px) {
    main section.upgrade .text {
      columns: 2;
      column-gap: 40px; }
      main section.upgrade .text > div {
        break-inside: avoid; }
        main section.upgrade .text > div:nth-child(1) {
          column-span: all;
          margin-bottom: 40px; }
          main section.upgrade .text > div:nth-child(1) h3 {
            margin-top: 0; }
      main section.upgrade .text h3 {
        max-width: 100%;
        text-align: left; }
      main section.upgrade .text figure {
        margin: 0 0 40px; } }
main section.method h2 {
  text-align: center; }

main section.method ul {
  padding-left: 20px; }
  main section.method ul li {
    margin-bottom: var(--spacing--small);
    position: relative; }
    main section.method ul li:before {
      position: absolute;
      content: "\2022";
      color: #3399FF;
      width: 1em;
      font-size: 2em;
      line-height: 1em;
      margin-left: -0.7em;
      font-weight: 700;
      display: inline-block; }

main section.method .small {
  font-size: 0.9em;
  margin: 40px 0;
  border-top: 1px solid #000;
  padding-top: 40px; }

@media screen and (min-width: 700px) {
  main section.method h2 {
    margin-bottom: 40px; }
  main section.method h2, main section.method h3 {
    max-width: 100%;
    text-align: left; }
  main section.method .text {
    columns: 2;
    column-gap: 40px; }
    main section.method .text div {
      break-inside: avoid; }
      main section.method .text div:nth-child(1) h3 {
        margin-top: 0; }
    main section.method .text figure {
      margin: 0; } }

footer {
  background-color: #000;
  color: #fff;
  text-align: center; }
  footer .logo {
    margin: 20px 0; }
    footer .logo img {
      max-width: 150px; }
  footer h1 {
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 3vw;
    margin: 20px 0 40px; }
    footer h1 span {
      display: block; }
      footer h1 span.thin {
        font-weight: 100;
        font-size: 1.5em;
        line-height: 2em; }
      footer h1 span.thick {
        font-size: 2.5em;
        line-height: 0.9em; }
      footer h1 span.blue {
        color: #3399FF; }
  footer .download p {
    font-weight: 700; }
  footer .download .button {
    background-color: #009A01;
    color: #fff;
    text-decoration: none;
    padding: 10px 20px;
    display: inline-block;
    border-radius: 10px;
    text-transform: uppercase;
    font-weight: 400; }
    footer .download .button:hover {
      background-color: #007b01; }
  footer .cc {
    margin: 60px 0 20px; }
  @media screen and (min-width: 700px) {
    footer {
      text-align: left; }
      footer h1 {
        font-size: 1.2em;
        margin: 0 0 20px; }
      footer .inner {
        padding: 10px 20px;
        display: grid;
        grid-gap: 40px;
        grid-template-columns: 1fr 1fr; }
        footer .inner .download {
          text-align: center;
          margin: 20px 0 0; }
        footer .inner .cc {
          margin: 40px 0 20px; }
      footer .flex {
        display: flex;
        align-items: flex-end; }
        footer .flex .cc p {
          display: flex;
          align-items: center; }
          footer .flex .cc p span:nth-child(1) {
            margin-right: 5px; }
          footer .flex .cc p span:nth-child(2) {
            flex: 1; } }