/* ==========================================================
   IslandTravelAtlas Comparison Production v9
   Homepage-aligned intelligence workspace
   ========================================================== */

body.ita-comparison-v9 {
  --v9-navy: #06343b;
  --v9-navy-deep: #032b31;

  --v9-teal: #08766c;
  --v9-teal-2: #35a091;
  --v9-teal-soft: #e4f0ec;

  --v9-ocean: #4a929a;

  --v9-gold: #c89538;
  --v9-gold-soft: #e5c986;

  --v9-paper: #f6f0e4;
  --v9-paper-light: #fbf8f1;

  --v9-ink: #092f35;
  --v9-copy: #3d555b;
  --v9-muted: #63777b;

  --v9-line: #d7dfdb;

  --v9-shadow:
    0 20px 52px
    rgba(4, 43, 48, .10);

  background: #fff;

  color: var(--v9-ink);
}


/* ==========================================================
   HEADER / NAVIGATION
   ========================================================== */

body.ita-comparison-v9
.pm-header {
  position: relative !important;

  z-index: 1000 !important;

  background: #ffffff !important;

  color: #092f35 !important;

  border-bottom:
    1px solid
    rgba(7,47,53,.1) !important;

  box-shadow: none !important;
}


body.ita-comparison-v9
.pm-header-inner {
  background: #ffffff !important;
}


body.ita-comparison-v9
.pm-brand,
body.ita-comparison-v9
.pm-brand-copy,
body.ita-comparison-v9
.pm-brand-copy strong,
body.ita-comparison-v9
.pm-nav > a,
body.ita-comparison-v9
.pm-nav > button,
body.ita-comparison-v9
.pm-nav > details > summary {
  color: #102f34 !important;

  opacity: 1 !important;
}


body.ita-comparison-v9
.pm-header-cta {
  background: #087b6f !important;

  color: #ffffff !important;
}


/* dark dropdown = white text */

body.ita-comparison-v9
.pm-nav-dropdown,
body.ita-comparison-v9
.pm-dropdown,
body.ita-comparison-v9
.pm-dropdown-panel,
body.ita-comparison-v9
.pm-nav-menu,
body.ita-comparison-v9
.pm-mega-menu {
  background: #06343b !important;

  color: #ffffff !important;
}


body.ita-comparison-v9
.pm-nav-dropdown a,
body.ita-comparison-v9
.pm-dropdown a,
body.ita-comparison-v9
.pm-dropdown-panel a,
body.ita-comparison-v9
.pm-nav-menu a,
body.ita-comparison-v9
.pm-mega-menu a {
  color: #ffffff !important;
}


/* ==========================================================
   FUNCTIONAL ENGINE
   Keep it renderable but outside visual viewport.
   ========================================================== */

body.ita-comparison-v9
.ita-v9-engine-kernel {
  position: absolute !important;

  left: -100000px !important;

  top: 0 !important;

  width: 1180px !important;

  visibility: hidden !important;

  pointer-events: none !important;
}


/* Any result moved from kernel into expanded analysis
   becomes visible again. */

body.ita-comparison-v9
.ita-v9-analysis-body
.ita-ux-result-card,
body.ita-comparison-v9
.ita-v9-analysis-body
.ita-result-card,
body.ita-comparison-v9
.ita-v9-analysis-body
.comparison-card {
  visibility: visible !important;

  pointer-events: auto !important;
}


/* ==========================================================
   PAGE CANVAS
   ========================================================== */

.ita-v9-main {
  margin: 0;

  overflow: hidden;

  background: #ffffff;
}


.ita-v9-main *,
.ita-v9-main *::before,
.ita-v9-main *::after {
  box-sizing: border-box;
}


/* ==========================================================
   COMPACT INTRO
   ========================================================== */

.ita-v9-intro {
  position: relative;

  padding:
    58px 28px 48px;

  overflow: hidden;

  background:
    linear-gradient(
      108deg,
      var(--v9-paper) 0%,
      var(--v9-paper) 47%,
      #dbeae6 47.2%,
      #dbeae6 100%
    );
}


.ita-v9-intro::before {
  content: "";

  position: absolute;

  inset: 0;

  opacity: .22;

  pointer-events: none;

  background-image:
    linear-gradient(
      rgba(7,75,70,.08)
      1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(7,75,70,.08)
      1px,
      transparent 1px
    );

  background-size:
    48px 48px;

  mask-image:
    linear-gradient(
      90deg,
      transparent,
      #000 48%,
      #000
    );
}


.ita-v9-intro-inner {
  position: relative;

  z-index: 2;

  width:
    min(
      1180px,
      100%
    );

  margin: auto;

  display: grid;

  grid-template-columns:
    .82fr 1.18fr;

  align-items: center;

  gap: 65px;
}


.ita-v9-eyebrow {
  display: flex;

  flex-direction: column;

  gap: 11px;

  margin-bottom: 17px;

  color: var(--v9-teal);

  font-size: .63rem;

  font-weight: 800;

  letter-spacing: .15em;
}


.ita-v9-eyebrow i {
  width: 50px;

  height: 2px;

  background: var(--v9-gold);
}


.ita-v9-intro h1 {
  max-width: 560px;

  margin: 0;

  color: var(--v9-ink);

  font-family:
    "Iowan Old Style",
    "Palatino Linotype",
    Georgia,
    serif;

  font-size:
    clamp(
      3rem,
      4.5vw,
      4.35rem
    );

  font-weight: 500;

  line-height: .98;

  letter-spacing: -.055em;
}


.ita-v9-intro-copy > p {
  max-width: 510px;

  margin:
    21px 0 0;

  color: #30484e;

  font-size: .96rem;

  line-height: 1.65;
}


/* ==========================================================
   ROUTE SUMMARY PANEL
   ========================================================== */

.ita-v9-route-summary {
  padding:
    21px 23px 17px;

  border-radius: 20px;

  background: var(--v9-navy);

  box-shadow: var(--v9-shadow);
}


.ita-v9-route-summary-head {
  display: flex;

  align-items: center;

  justify-content: space-between;

  color: #ffffff;
}


.ita-v9-route-summary-head span {
  display: block;

  color: #c5d8d4;

  font-size: .53rem;

  font-weight: 800;

  letter-spacing: .13em;
}


.ita-v9-route-summary-head strong {
  display: block;

  margin-top: 4px;

  color: #ffffff;

  font-family: Georgia, serif;

  font-size: 1rem;

  font-weight: 500;
}


.ita-v9-compass {
  position: relative;

  width: 40px;

  height: 40px;

  display: grid;

  place-items: center;

  border:
    1px solid
    rgba(255,255,255,.38);

  border-radius: 50%;
}


.ita-v9-compass span {
  position: absolute;

  top: 3px;

  color: #ffffff;

  font-size: .4rem;
}


.ita-v9-compass i {
  width: 3px;

  height: 21px;

  background:
    linear-gradient(
      180deg,
      var(--v9-gold-soft)
      0 50%,
      #ffffff
      50% 100%
    );

  transform:
    rotate(27deg);
}


.ita-v9-route-map {
  margin-top: 9px;
}


.ita-v9-route-map svg {
  display: block;

  width: 100%;

  height: auto;
}


.ita-v9-route-map .grid circle {
  fill: none;

  stroke:
    rgba(255,255,255,.10);

  stroke-width: 1;
}


.ita-v9-route-map .line {
  fill: none;

  stroke-width: 2.5;

  stroke-linecap: round;
}


.ita-v9-route-map .line-a {
  stroke: #75b9aa;
}


.ita-v9-route-map .line-b {
  stroke: var(--v9-gold);
}


.ita-v9-route-map .line-c {
  stroke: #719ba3;
}


.ita-v9-route-map .origin,
.ita-v9-route-map .destination {
  fill: var(--v9-navy);

  stroke-width: 3;
}


.ita-v9-route-map .origin,
.ita-v9-route-map .destination.a {
  stroke: #75b9aa;
}


.ita-v9-route-map .destination.b {
  stroke: var(--v9-gold);
}


.ita-v9-route-map .destination.c {
  stroke: #719ba3;
}


.ita-v9-route-map text {
  fill: #ffffff;

  font-size: 12px;

  font-weight: 750;
}


.ita-v9-route-map text.small {
  fill: #adc5c2;

  font-size: 9px;
}


.ita-v9-route-map
.destination-name {
  fill: #ffffff;

  font-size: 12px;

  font-weight: 800;
}


.ita-v9-route-key {
  display: flex;

  gap: 15px;

  padding-top: 12px;

  border-top:
    1px solid
    rgba(255,255,255,.14);

  color: #d6e5e2;

  font-size: .54rem;

  font-weight: 650;
}


.ita-v9-route-key span {
  display: flex;

  align-items: center;

  gap: 6px;
}


.ita-v9-route-key i {
  width: 8px;

  height: 8px;

  border-radius: 50%;
}


.ita-v9-route-key i.trip {
  background: #75b9aa;
}


.ita-v9-route-key i.route {
  background: #719ba3;
}


.ita-v9-route-key i.cost {
  background: var(--v9-gold);
}


/* ==========================================================
   CONTEXT
   ========================================================== */

.ita-v9-context-shell {
  width:
    min(
      1120px,
      calc(100% - 40px)
    );

  margin:
    28px auto 68px;

  overflow: hidden;

  border-radius: 14px;

  background:
    linear-gradient(
      90deg,
      var(--v9-navy),
      #07554f
    );

  box-shadow:
    0 13px 33px
    rgba(4,43,48,.13);
}


.ita-v9-context {
  min-height: 74px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 24px;

  padding:
    13px 19px;
}


.ita-v9-context-heading span {
  display: block;

  color: #d6e6e2;

  font-size: .55rem;

  font-weight: 800;

  letter-spacing: .12em;
}


.ita-v9-context-heading strong {
  display: block;

  margin-top: 5px;

  color: #ffffff;

  font-size: .84rem;

  font-weight: 650;
}


.ita-v9-context-toggle {
  min-height: 41px;

  padding:
    0 14px;

  border:
    1px solid
    rgba(255,255,255,.68);

  border-radius: 8px;

  background:
    rgba(255,255,255,.08);

  color: #ffffff;

  font-size: .7rem;

  font-weight: 700;

  cursor: pointer;
}


.ita-v9-context-editor {
  padding: 21px;

  border-top:
    1px solid
    rgba(255,255,255,.13);

  background: var(--v9-paper-light);
}


.ita-v9-context-editor[hidden] {
  display: none !important;
}


.ita-v9-context-fields {
  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0,1fr)
    );

  gap: 12px;
}


.ita-v9-context-fields
label > span {
  display: block;

  margin-bottom: 6px;

  color: #3f565b;

  font-size: .64rem;

  font-weight: 700;
}


.ita-v9-context-fields input,
.ita-v9-context-fields select {
  width: 100%;

  min-height: 47px;

  padding:
    0 11px;

  border:
    1px solid
    #a9b7b3;

  border-radius: 7px;

  background: #ffffff;

  color: var(--v9-ink);
}


.ita-v9-priority-row {
  display: grid;

  grid-template-columns:
    auto 1fr;

  align-items: center;

  gap: 14px;

  margin-top: 17px;
}


.ita-v9-priority-row
> span {
  color: #42595e;

  font-size: .65rem;

  font-weight: 700;
}


.ita-v9-preferences {
  display: flex;

  flex-wrap: wrap;

  gap: 7px;
}


.ita-v9-preference {
  min-height: 33px;

  padding:
    0 11px;

  border:
    1px solid
    var(--v9-line);

  border-radius: 999px;

  background: #ffffff;

  color: #42595e;

  font-size: .61rem;

  font-weight: 650;

  cursor: pointer;
}


.ita-v9-preference.is-active {
  border-color:
    var(--v9-teal);

  background:
    var(--v9-teal-soft);

  color: #05655d;
}


.ita-v9-context-actions {
  display: flex;

  justify-content: flex-end;

  margin-top: 17px;
}


#ita-v9-update {
  min-height: 42px;

  padding:
    0 16px;

  border: 0;

  border-radius: 7px;

  background: var(--v9-teal);

  color: #ffffff;

  font-size: .69rem;

  font-weight: 700;

  cursor: pointer;
}


/* ==========================================================
   RESULTS
   ========================================================== */

.ita-v9-results {
  width:
    min(
      1120px,
      calc(100% - 40px)
    );

  margin: auto;
}


.ita-v9-results-header {
  display: grid;

  grid-template-columns:
    1fr auto;

  align-items: end;

  gap: 50px;

  margin-bottom: 29px;
}


.ita-v9-section-kicker {
  display: block;

  color: var(--v9-teal);

  font-size: .59rem;

  font-weight: 800;

  letter-spacing: .13em;
}


.ita-v9-results-header h2 {
  margin:
    10px 0 0;

  color: var(--v9-ink);

  font-family:
    "Iowan Old Style",
    Georgia,
    serif;

  font-size:
    clamp(
      2.25rem,
      3.6vw,
      3.35rem
    );

  font-weight: 500;

  line-height: 1.04;

  letter-spacing: -.045em;
}


.ita-v9-results-header p {
  max-width: 630px;

  margin:
    11px 0 0;

  color: var(--v9-copy);

  font-size: .82rem;

  line-height: 1.62;
}


.ita-v9-method-key {
  display: flex;

  flex-direction: column;

  gap: 6px;

  padding-bottom: 4px;
}


.ita-v9-method-key span {
  color: var(--v9-muted);

  font-size: .57rem;
}


.ita-v9-method-key strong {
  display: inline-block;

  min-width: 60px;

  color: var(--v9-ink);

  font-weight: 750;
}


/* ==========================================================
   DOSSIERS
   ========================================================== */

.ita-v9-dossiers {
  display: grid;

  gap: 26px;
}


.ita-v9-loading {
  padding: 34px;

  border:
    1px solid
    var(--v9-line);

  border-radius: 14px;

  color: var(--v9-muted);

  text-align: center;
}


.ita-v9-dossier {
  position: relative;

  overflow: hidden;

  border-radius: 18px;

  background: #ffffff;

  box-shadow: var(--v9-shadow);
}


.ita-v9-dossier::before {
  content: "";

  position: absolute;

  inset:
    0 auto 0 0;

  z-index: 5;

  width: 6px;

  background:
    linear-gradient(
      180deg,
      var(--v9-teal),
      #62a594,
      var(--v9-gold)
    );
}


.ita-v9-dossier
+ .ita-v9-dossier::before {
  background:
    linear-gradient(
      180deg,
      #4e8790,
      #7aa9aa,
      var(--v9-gold)
    );
}


/* header */

.ita-v9-dossier-header {
  min-height: 125px;

  display: flex;

  align-items: center;

  gap: 18px;

  padding:
    23px 26px 21px 33px;

  background:
    linear-gradient(
      105deg,
      #ffffff 0%,
      #f8f9f6 66%,
      #eaf1ed 100%
    );
}


.ita-v9-rank {
  width: 44px;

  height: 44px;

  flex:
    0 0 44px;

  display: grid;

  place-items: center;

  border:
    1px solid
    #bdcbc6;

  border-radius: 50%;
}


.ita-v9-rank span {
  color: var(--v9-gold);

  font-family: Georgia, serif;

  font-size: .84rem;

  font-style: italic;
}


.ita-v9-identity {
  margin-right: auto;
}


.ita-v9-identity small {
  color: var(--v9-teal);

  font-size: .55rem;

  font-weight: 800;

  letter-spacing: .11em;
}


.ita-v9-identity h3 {
  margin:
    3px 0 0;

  color: var(--v9-ink);

  font-family:
    "Iowan Old Style",
    Georgia,
    serif;

  font-size:
    clamp(
      2rem,
      3vw,
      2.55rem
    );

  font-weight: 500;

  letter-spacing: -.04em;
}


.ita-v9-identity p {
  margin:
    5px 0 0;

  color: var(--v9-muted);

  font-size: .67rem;
}


/* overall dial */

.ita-v9-overall {
  --fill:
    calc(
      var(--score) * 1%
    );

  position: relative;

  width: 82px;

  height: 82px;

  flex:
    0 0 82px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background:
    conic-gradient(
      var(--v9-teal)
        var(--fill),
      #e0e7e4 0
    );
}


.ita-v9-overall::after {
  content: "";

  position: absolute;

  width: 68px;

  height: 68px;

  border-radius: 50%;

  background: #ffffff;
}


.ita-v9-overall > div {
  position: relative;

  z-index: 2;

  text-align: center;
}


.ita-v9-overall strong {
  display: block;

  color: var(--v9-ink);

  font-family: Georgia, serif;

  font-size: 1.28rem;

  font-weight: 600;
}


.ita-v9-overall span {
  color: var(--v9-muted);

  font-size: .44rem;
}


/* dossier body */

.ita-v9-dossier-grid {
  display: grid;

  grid-template-columns:
    1.25fr .85fr .9fr;

  border-top:
    1px solid
    var(--v9-line);

  border-bottom:
    1px solid
    var(--v9-line);
}


.ita-v9-dossier-grid
> section {
  min-height: 192px;

  min-width: 0;

  padding: 23px;
}


.ita-v9-dossier-grid
> section + section {
  border-left:
    1px solid
    var(--v9-line);
}


.ita-v9-journey-panel {
  background:
    linear-gradient(
      145deg,
      #edf5f1,
      #fcfdfb
    );
}


.ita-v9-score-panel {
  background: #ffffff;
}


.ita-v9-cost-panel {
  background:
    linear-gradient(
      145deg,
      #faf5e9,
      #ffffff
    );
}


.ita-v9-data-label {
  color: #596d72;

  font-size: .54rem;

  font-weight: 800;

  letter-spacing: .1em;
}


/* route strip */

.ita-v9-route-strip {
  display: grid;

  grid-template-columns:
    auto 1fr auto .52fr auto;

  align-items: center;

  gap: 7px;

  margin-top: 35px;
}


.ita-v9-route-strip strong {
  color: var(--v9-ink);

  font-size: .71rem;
}


.ita-v9-route-strip i {
  height: 2px;

  background:
    linear-gradient(
      90deg,
      var(--v9-teal),
      #a1c7bf
    );
}


.ita-v9-route-strip
i.short {
  background:
    linear-gradient(
      90deg,
      #7ba9a4,
      #c8d7d2
    );
}


.ita-v9-route-complexity {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 15px;

  margin-top: 30px;

  padding-top: 14px;

  border-top:
    1px solid
    #e2ebe7;
}


.ita-v9-route-complexity span {
  color: var(--v9-muted);

  font-size: .53rem;
}


.ita-v9-route-complexity strong {
  color: var(--v9-ink);

  font-size: .7rem;
}


/* metrics */

.ita-v9-metric {
  margin-top: 18px;
}


.ita-v9-metric > div {
  display: flex;

  align-items: baseline;

  justify-content: space-between;

  gap: 10px;
}


.ita-v9-metric span {
  color: var(--v9-copy);

  font-size: .61rem;
}


.ita-v9-metric strong {
  color: var(--v9-ink);

  font-size: .77rem;
}


.ita-v9-metric > i {
  display: block;

  height: 7px;

  margin-top: 7px;

  overflow: hidden;

  border-radius: 999px;

  background: #e2e9e6;
}


.ita-v9-metric > i b {
  display: block;

  height: 100%;

  border-radius: inherit;
}


.ita-v9-metric.trip
> i b {
  background:
    linear-gradient(
      90deg,
      #278b79,
      #63ad9b
    );
}


.ita-v9-metric.route
> i b {
  background:
    linear-gradient(
      90deg,
      #397f88,
      #77acb0
    );
}


.ita-v9-metric.cost
> i b {
  background:
    linear-gradient(
      90deg,
      #b78636,
      #dab76d
    );
}


/* cost */

.ita-v9-cost-range {
  display: block;

  margin-top: 18px;

  color: var(--v9-ink);

  font-family: Georgia, serif;

  font-size: 1.34rem;

  font-weight: 500;
}


.ita-v9-cost-spectrum {
  position: relative;

  height: 20px;

  margin-top: 25px;
}


.ita-v9-cost-spectrum span {
  position: absolute;

  left: 0;

  right: 0;

  top: 7px;

  height: 8px;

  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      #399d89,
      #7bb3a4 30%,
      #d8bf77 62%,
      #c77e55
    );
}


.ita-v9-cost-spectrum i {
  position: absolute;

  top: 0;

  width: 2px;

  height: 22px;

  background: var(--v9-ink);

  transform:
    translateX(-50%);
}


.ita-v9-cost-axis {
  display: flex;

  justify-content: space-between;

  margin-top: 4px;

  color: var(--v9-muted);

  font-size: .46rem;
}


.ita-v9-evidence {
  display: flex;

  flex-wrap: wrap;

  gap: 6px;

  margin-top: 18px;
}


.ita-v9-evidence span {
  padding:
    5px 7px;

  border-radius: 999px;

  background:
    var(--v9-teal-soft);

  color: #49615f;

  font-size: .47rem;

  font-weight: 750;
}


.ita-v9-evidence strong {
  color: var(--v9-teal);
}


/* why */

.ita-v9-finding {
  display: grid;

  grid-template-columns:
    1.4fr 1fr;

  align-items: center;

  gap: 26px;

  min-height: 101px;

  padding:
    20px 26px 20px 33px;

  background:
    linear-gradient(
      90deg,
      #ffffff,
      #f8faf7
    );
}


.ita-v9-finding p {
  max-width: 690px;

  margin:
    6px 0 0;

  color: var(--v9-copy);

  font-size: .74rem;

  line-height: 1.6;
}


.ita-v9-tags {
  display: flex;

  justify-content: flex-end;

  flex-wrap: wrap;

  gap: 6px;
}


.ita-v9-tags span {
  padding:
    5px 8px;

  border:
    1px solid
    var(--v9-line);

  border-radius: 999px;

  background: var(--v9-paper-light);

  color: #4c6266;

  font-size: .51rem;

  font-weight: 650;
}


/* analysis */

.ita-v9-full-analysis {
  border-top:
    1px solid
    var(--v9-line);
}


.ita-v9-full-analysis
> summary {
  min-height: 59px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  padding:
    0 26px 0 33px;

  list-style: none;

  color: var(--v9-teal);

  font-size: .71rem;

  font-weight: 750;

  cursor: pointer;
}


.ita-v9-full-analysis
> summary::-webkit-details-marker {
  display: none;
}


.ita-v9-full-analysis
> summary i {
  width: 28px;

  height: 28px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background:
    var(--v9-teal-soft);

  font-style: normal;

  transition:
    transform .16s ease;
}


.ita-v9-full-analysis[open]
> summary i {
  transform:
    rotate(45deg);
}


.ita-v9-analysis-body {
  padding:
    0 20px 22px;

  border-top:
    1px solid
    #edf1ef;

  background: #fcfdfb;
}


/* original functional card becomes detail content */

.ita-v9-analysis-body
.ita-ux-result-card,
.ita-v9-analysis-body
.ita-result-card,
.ita-v9-analysis-body
.comparison-card {
  width: 100% !important;

  max-width: none !important;

  min-height: 0 !important;

  height: auto !important;

  margin: 0 !important;

  border: 0 !important;

  border-radius: 0 !important;

  background:
    transparent !important;

  box-shadow: none !important;
}


/* ==========================================================
   METHOD BAND
   ========================================================== */

.ita-v9-method {
  margin-top: 82px;

  padding:
    65px 28px;

  background: var(--v9-navy);
}


.ita-v9-method-inner {
  width:
    min(
      1120px,
      100%
    );

  margin: auto;

  display: grid;

  grid-template-columns:
    .82fr 1.18fr;

  gap: 70px;

  align-items: center;
}


.ita-v9-method-copy > span {
  color: var(--v9-gold-soft);

  font-size: .57rem;

  font-weight: 800;

  letter-spacing: .13em;
}


.ita-v9-method-copy h2 {
  max-width: 520px;

  margin:
    10px 0 0;

  color: #ffffff;

  font-family: Georgia, serif;

  font-size:
    clamp(
      1.9rem,
      3vw,
      2.7rem
    );

  font-weight: 500;

  line-height: 1.05;
}


.ita-v9-method-copy p {
  max-width: 510px;

  margin:
    14px 0 0;

  color: #dce9e6;

  font-size: .76rem;

  line-height: 1.65;
}


.ita-v9-method-grid {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0,1fr)
    );

  border:
    1px solid
    rgba(255,255,255,.16);

  border-radius: 13px;

  overflow: hidden;
}


.ita-v9-method-grid article {
  min-height: 165px;

  padding: 21px;

  background:
    rgba(255,255,255,.05);
}


.ita-v9-method-grid
article + article {
  border-left:
    1px solid
    rgba(255,255,255,.16);
}


.ita-v9-method-grid strong {
  display: block;

  color: var(--v9-gold-soft);

  font-size: .56rem;

  letter-spacing: .09em;
}


.ita-v9-method-grid span {
  display: block;

  margin-top: 12px;

  color: #ffffff;

  font-size: .68rem;

  line-height: 1.55;
}


/* ==========================================================
   PLANNING
   ========================================================== */

.ita-v9-planning {
  width:
    min(
      1120px,
      calc(100% - 40px)
    );

  margin:
    75px auto 90px;
}


.ita-v9-planning details {
  overflow: hidden;

  border-radius: 15px;

  background: #ffffff;

  box-shadow: var(--v9-shadow);
}


.ita-v9-planning summary {
  min-height: 88px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 28px;

  padding:
    16px 23px;

  list-style: none;

  background:
    linear-gradient(
      90deg,
      var(--v9-paper),
      #f7faf7
    );

  cursor: pointer;
}


.ita-v9-planning
summary::-webkit-details-marker {
  display: none;
}


.ita-v9-planning
summary span {
  display: block;

  color: var(--v9-teal);

  font-size: .54rem;

  font-weight: 800;

  letter-spacing: .11em;
}


.ita-v9-planning
summary strong {
  display: block;

  margin-top: 5px;

  color: var(--v9-ink);

  font-family: Georgia, serif;

  font-size: 1.05rem;

  font-weight: 500;
}


.ita-v9-planning summary i {
  width: 30px;

  height: 30px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background: var(--v9-teal-soft);

  color: var(--v9-teal);

  font-style: normal;
}


.ita-v9-planning details[open]
summary i {
  transform:
    rotate(45deg);
}


.ita-v9-planning-body {
  border-top:
    1px solid
    var(--v9-line);
}


/* ==========================================================
   LEGACY FLOATING UI
   ========================================================== */

.ita-v9-hide-legacy,
.pm-mobile-sticky-cta,
.pm-sticky-cta,
.route-sticky-cta,
.route-fixed-cta {
  display: none !important;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (
  max-width: 900px
) {

  .ita-v9-intro {
    background:
      linear-gradient(
        180deg,
        var(--v9-paper) 0%,
        var(--v9-paper) 46%,
        #dbeae6 46.2%,
        #dbeae6 100%
      );
  }


  .ita-v9-intro-inner,
  .ita-v9-method-inner {
    grid-template-columns:
      1fr;
  }


  .ita-v9-context-fields {
    grid-template-columns:
      1fr 1fr;
  }


  .ita-v9-results-header {
    grid-template-columns:
      1fr;
  }


  .ita-v9-method-key {
    flex-direction: row;

    flex-wrap: wrap;

    gap: 15px;
  }


  .ita-v9-dossier-grid {
    grid-template-columns:
      1fr 1fr;
  }


  .ita-v9-dossier-grid
  > section:last-child {
    grid-column:
      1 / -1;

    border-left: 0;

    border-top:
      1px solid
      var(--v9-line);
  }


  .ita-v9-method-grid {
    grid-template-columns:
      1fr;
  }


  .ita-v9-method-grid
  article + article {
    border-left: 0;

    border-top:
      1px solid
      rgba(255,255,255,.16);
  }

}


@media (
  max-width: 620px
) {

  .ita-v9-intro {
    padding:
      40px 14px 35px;
  }


  .ita-v9-intro h1 {
    font-size: 2.7rem;
  }


  .ita-v9-context-shell,
  .ita-v9-results,
  .ita-v9-planning {
    width:
      calc(100% - 20px);
  }


  .ita-v9-context {
    align-items: flex-start;

    flex-direction: column;
  }


  .ita-v9-context-fields {
    grid-template-columns:
      1fr;
  }


  .ita-v9-priority-row {
    grid-template-columns:
      1fr;
  }


  .ita-v9-dossier-header {
    align-items: flex-start;

    padding:
      20px 18px 19px 24px;
  }


  .ita-v9-rank {
    display: none;
  }


  .ita-v9-overall {
    width: 70px;

    height: 70px;

    flex-basis: 70px;
  }


  .ita-v9-overall::after {
    width: 58px;

    height: 58px;
  }


  .ita-v9-dossier-grid {
    grid-template-columns:
      1fr;
  }


  .ita-v9-dossier-grid
  > section + section {
    border-left: 0;

    border-top:
      1px solid
      var(--v9-line);
  }


  .ita-v9-dossier-grid
  > section:last-child {
    grid-column: auto;
  }


  .ita-v9-finding {
    grid-template-columns:
      1fr;

    padding:
      18px 19px 18px 24px;
  }


  .ita-v9-tags {
    justify-content: flex-start;
  }


  .ita-v9-method {
    padding:
      55px 15px;
  }

}


/* accessibility */

.ita-v9-main
button:focus-visible,
.ita-v9-main
a:focus-visible,
.ita-v9-main
summary:focus-visible,
.ita-v9-main
input:focus-visible,
.ita-v9-main
select:focus-visible {
  outline:
    3px solid
    var(--v9-teal);

  outline-offset: 3px;
}