.pricing-page {
  min-width: 320px;
  overflow-x: hidden;
  background: var(--black);
  color: var(--black);
}

.pricing-main {
  background: #fff;
}

/* Exact Trades-page floating banner treatment. */
.pricing-page .site-header {
  padding-top: 14px;
}

.pricing-page .nav-shell {
  min-height: 64px;
  border-color: rgba(255, 255, 255, .68);
  background: linear-gradient(90deg, rgba(255, 255, 255, .94), rgba(255, 222, 246, .9), rgba(255, 232, 199, .88));
  box-shadow: 0 16px 48px rgba(0, 0, 0, .18);
  color: var(--black);
  backdrop-filter: blur(18px) saturate(1.2);
}

.pricing-page .header-cta {
  opacity: 1;
  translate: 0;
  visibility: visible;
  pointer-events: auto;
}

.pricing-page .desktop-nav a::after {
  background: currentColor;
}

.single-screen-pricing {
  height: 100svh;
  min-height: 680px;
  overflow: hidden;
  background: var(--black);
}

.pricing-carousel {
  display: grid;
  position: relative;
  width: 100%;
  height: 100svh;
  padding: 96px 0 10px;
  grid-template-rows: minmax(0, 1fr) auto auto;
  gap: 6px;
  overflow: hidden;
}

.coverflow {
  position: relative;
  min-height: 0;
  overflow: hidden;
  perspective: 1800px;
  perspective-origin: 50% 48%;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
}

.coverflow.is-dragging {
  cursor: grabbing;
}

.coverflow:not(.is-initialised) .plan-slide {
  transition: none;
}

.pricing-swipe-cue {
  display: none;
  position: absolute;
  z-index: 30;
  top: 46%;
  left: 50%;
  width: clamp(160px, 26vw, 220px);
  aspect-ratio: 1;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.94);
  visibility: hidden;
  transition: opacity .24s ease, transform .28s cubic-bezier(.2, .75, .2, 1), visibility 0s linear 0s;
}

.pricing-swipe-cue.is-ready {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  visibility: visible;
}

.pricing-swipe-cue.is-dismissed {
  opacity: 0;
  transform: translate(-50%, -50%) scale(.86);
  visibility: hidden;
  transition-delay: 0s, 0s, .28s;
}

.pricing-swipe-lottie {
  position: absolute;
  inset: 0;
  filter: brightness(0) drop-shadow(0 2px 0 rgba(255, 255, 255, .72));
}

.pricing-swipe-lottie svg {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.coverflow::after {
  position: absolute;
  z-index: 0;
  right: 24%;
  bottom: 2.2%;
  left: 24%;
  height: 5%;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  content: "";
  filter: blur(25px);
  pointer-events: none;
}

@media (max-width: 1024px) {
  .pricing-swipe-cue {
    display: grid;
  }
}

.plan-slide {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(584px, calc(80svh - 148px), calc(100vw - 52px));
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid rgba(7, 7, 7, .13);
  border-radius: clamp(24px, 2.2vw, 34px);
  background: var(--white);
  box-shadow: 0 22px 56px rgba(0, 0, 0, .14);
  opacity: var(--slide-opacity, 1);
  transform: translate3d(calc(-50% + var(--slide-x, 0px)), -50%, var(--slide-z, 0px)) rotateY(var(--slide-angle, 0deg)) scale(var(--slide-scale, 1));
  transform-style: preserve-3d;
  transition: transform .58s cubic-bezier(.2, .75, .2, 1), opacity .36s ease, filter .36s ease, box-shadow .36s ease;
  cursor: pointer;
  will-change: transform;
}

.plan-slide[aria-selected="true"] {
  box-shadow: 0 30px 76px rgba(0, 0, 0, .2);
  cursor: default;
}

.plan-slide:focus-visible {
  outline: 4px solid var(--black);
  outline-offset: -7px;
}

.plan-art,
.plan-art svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.plan-art svg {
  object-fit: cover;
}

.plan-person {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 40%;
  object-fit: cover;
  object-position: 50% 34%;
  opacity: .56;
  filter: saturate(.82) contrast(.94);
  mask-image: linear-gradient(to bottom, #000 0 35%, rgba(0, 0, 0, .72) 58%, transparent 96%);
  pointer-events: none;
}

.art-glyph {
  opacity: .9;
}

.plan-card-content {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: flex;
  min-height: 0;
  padding: clamp(20px, 2vw, 30px);
  flex-direction: column;
  background: linear-gradient(180deg, transparent 0, transparent 18%, rgba(255, 255, 255, .84) 29%, rgba(255, 255, 255, .98) 41%, #fff 56%);
}

.card-topline {
  display: flex;
  min-height: 30px;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.card-topline span,
.card-topline b {
  display: inline-grid;
  min-height: 28px;
  padding: 7px 10px;
  place-items: center;
  border-radius: 999px;
  font: 500 8px/1 var(--mono);
  letter-spacing: .055em;
  text-transform: uppercase;
}

.card-topline span {
  background: rgba(255, 255, 255, .88);
  color: var(--black);
  backdrop-filter: blur(10px);
}

.card-topline b {
  background: var(--magenta);
  color: var(--white);
}

.card-heading {
  display: grid;
  /* ⛔ min-content, NOT 0, as the name column's floor. .card-price is a wrapping flex
     row, and max-content sizing flattens that wrap — it measures the big /day figure
     AND the billed line as one line (~359px), so the `auto` price track claimed most
     of the 510px header. With a 0 floor the name track collapsed under its own longest
     word and the plan name painted straight over the price: "Full Receptionist" ran
     162px into the price block at 1600px (and 130/115/91/34px at 1280/1024/820/700).
     A min-content floor reserves the longest word first, the price track takes what is
     left, and the billed line wraps the way .card-billed was already written to.
     Only the two paid cards carry a billed line, so only they could ever collapse. */
  grid-template-columns: minmax(min-content, 1fr) auto;
  margin-top: clamp(98px, 18%, 132px);
  /* ⛔ baseline, NOT end. .card-price is two lines now (the /day figure + the billed
     amount), so bottom-edge alignment would drop the plan name level with the small
     print and leave the big number floating above it. Baseline pins the name to the
     first line — the big number — which is the alignment this heading has always had.
     A wrapping plan name now grows downward instead of shoving the price up. */
  align-items: baseline;
  gap: 18px;
}

.card-heading h2 {
  margin: 0;
  min-width: 0;
  font: 400 clamp(34px, 3vw, 46px)/.88 var(--headline);
  letter-spacing: -.035em;
}

.plan-title-note {
  display: inline-block;
  margin-left: 3px;
  font-family: "Figtree", Arial, sans-serif;
  font-size: clamp(8px, .7vw, 10px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  white-space: nowrap;
  vertical-align: .28em;
}

.card-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  white-space: nowrap;
}

.card-price strong {
  font-size: clamp(38px, 3vw, 46px);
  font-weight: 600;
  letter-spacing: -.055em;
  line-height: .86;
}

.card-price span {
  margin-left: 6px;
  font: 500 7px/1 var(--mono);
  text-transform: uppercase;
}

/* "For A$3.25 / day" - the lead-in Jase asked for, so the daily figure reads as
   a rate rather than as the price you are charged. It is a <span>, so it picks
   up the /DAY chip's mono styling above; the left margin has to come back off,
   or the whole price block starts 6px in from everything under it. */
.card-price .card-price-lead {
  margin-left: 0;
  margin-right: 7px;
  /* Bigger than the "/ DAY" chip on purpose: that is a unit people recognise at
     a glance, this is a word that has to actually be read - it is the thing that
     stops A$3.25 reading as the price you pay. */
  font-size: 9px;
}

/* Display daily, bill monthly. The /day figure above is what makes the price FEEL small;
   this is the amount we actually charge.

   ⛔ It must stay INSIDE .card-price. flex-basis:100% drops it onto its own flex line, so
   the rate and the real charge read as one block. Moving it out to a sibling would put it
   in .card-heading's other grid cell — detaching the charge from the number it qualifies,
   which is exactly the component-pricing shape the ACL is unhappy about. It is also why
   this is small-but-legible rather than fine print: same block, readable weight.

   ⛔ white-space: normal overrides the nowrap on .card-price — without it this line cannot
   wrap and overflows the card on narrow phones. */
.card-billed {
  flex-basis: 100%;
  margin-top: 8px;
  /* ⛔ NOT grey (Jase 2026-08-19: "Billed Monthly need to be not grey"). It was
     #55554f at 10-12px, which is the exact shape the ACCC calls out: a big
     component price with the amount actually charged whispered underneath. The
     charge now reads at the same strength as any other line on the card. */
  color: #1c1c19;
  font-size: clamp(12px, .95vw, 14px);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
}

.card-summary {
  margin: 10px 0 0;
  color: #55554f;
  font-size: clamp(12px, 1.05vw, 15px);
  line-height: 1.35;
}

.card-detail-body {
  display: grid;
  min-height: 0;
  margin-top: clamp(12px, 1.4vw, 18px);
  flex: 1;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(10px, 1.25vw, 16px);
  transition: opacity .24s ease, translate .35s ease;
}

.card-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  border-top: 1px solid rgba(7, 7, 7, .12);
  border-bottom: 1px solid rgba(7, 7, 7, .12);
}

.card-meta div {
  min-width: 0;
  padding: 10px 12px;
  border-right: 1px solid rgba(7, 7, 7, .12);
}

.card-meta div:first-child {
  padding-left: 0;
}

.card-meta div:last-child {
  padding-right: 0;
  border-right: 0;
}

.card-meta dt {
  margin-bottom: 4px;
  color: #81817b;
  font: 500 7px/1.15 var(--mono);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.card-meta dd {
  margin: 0;
  font-size: clamp(10px, .82vw, 12px);
  font-weight: 700;
  line-height: 1.25;
}

.card-features {
  display: grid;
  min-height: 0;
  margin: 0;
  padding: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: center;
  gap: 7px 20px;
  list-style: none;
}

.card-features li {
  position: relative;
  padding-left: 24px;
  color: #44443f;
  font-size: clamp(13px, .86vw, 14px);
  line-height: 1.34;
}

.card-features li::before {
  position: absolute;
  top: -.08em;
  left: 0;
  color: var(--black);
  content: "✓";
  font-family: Arial, sans-serif;
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
}

.card-features li.is-unavailable {
  color: #8b8b85;
}

.card-features li.is-unavailable::before {
  top: .08em;
  color: #aaa9a2;
  content: "—";
  font-size: 16px;
  font-weight: 500;
}

.card-end {
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.card-cta {
  display: grid;
  min-height: 48px;
  padding: 10px 16px;
  place-items: center;
  border: 1px solid var(--black);
  border-radius: 999px;
  background: var(--black);
  color: var(--white);
  font: 500 8px/1 var(--mono);
  letter-spacing: .045em;
  text-align: center;
  text-transform: uppercase;
  transition: transform .2s ease, box-shadow .2s ease;
}

.card-end .card-cta {
  width: min(100%, 280px);
}

.card-cta:hover {
  box-shadow: 0 12px 24px rgba(0, 0, 0, .18);
  transform: translateY(-2px);
}

.card-cta-outline {
  background: var(--white);
  color: var(--black);
}

.card-cta-primary {
  border-color: var(--magenta);
  background: var(--magenta);
}

.plan-slide:not([aria-selected="true"]) .card-detail-body,
.plan-slide:not([aria-selected="true"]) .card-summary {
  opacity: 0;
  translate: 0 10px;
  pointer-events: none;
}

.plan-slide:not([aria-selected="true"]) .card-cta {
  visibility: hidden;
  pointer-events: none;
}

.carousel-controls {
  display: flex;
  z-index: 20;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.carousel-arrow {
  display: grid;
  width: 48px;
  height: 48px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(7, 7, 7, .14);
  border-radius: 50%;
  background: var(--white);
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
  cursor: pointer;
}

.carousel-arrow:hover {
  background: var(--black);
  color: var(--white);
  transform: translateY(-2px);
}

.carousel-arrow svg {
  width: 21px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.carousel-dots {
  display: flex;
  align-items: center;
  gap: 7px;
}

.carousel-dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .42);
  transition: width .22s ease, border-radius .22s ease, background-color .22s ease;
}

.carousel-dots i.is-active {
  width: 24px;
  border-radius: 999px;
  background: var(--white);
}

.pricing-note {
  margin: 0;
  padding: 0 18px;
  color: rgba(255, 255, 255, .68);
  font: 500 8px/1.35 var(--mono);
  letter-spacing: .025em;
  text-align: center;
  text-transform: uppercase;
}

.scroll-cue {
  display: grid;
  position: absolute;
  z-index: 60;
  bottom: 24px;
  left: 50%;
  width: 44px;
  height: 44px;
  place-items: center;
  color: var(--white);
  opacity: .92;
  translate: -50% 0;
  animation: scroll-cue-bob 1.55s cubic-bezier(.45, 0, .25, 1) infinite;
  transition: opacity .2s ease, scale .24s cubic-bezier(.2, .75, .2, 1), visibility 0s linear 0s;
}

.scroll-cue.is-scroll-hidden {
  opacity: 0;
  scale: .82;
  visibility: hidden;
  pointer-events: none;
  animation-play-state: paused;
  transition-delay: 0s, 0s, .22s;
}

.scroll-cue::before {
  content: "";
  grid-area: 1 / 1;
  width: 30px;
  height: 30px;
  border: 1.2px solid rgba(255, 255, 255, .92);
  border-radius: 50%;
  background: rgba(0, 0, 0, .18);
  backdrop-filter: blur(5px);
}

.scroll-cue:hover {
  opacity: 1;
}

.scroll-cue:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 3px;
}

.scroll-cue svg {
  z-index: 1;
  grid-area: 1 / 1;
  width: 16.8px;
  height: 16.8px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

@keyframes scroll-cue-bob {
  0%, 100% { transform: translateY(-3px); }
  50% { transform: translateY(4px); }
}

.comparison-section {
  position: relative;
  padding: clamp(104px, 9vw, 136px) clamp(18px, 4vw, 64px) clamp(88px, 10vw, 150px);
  overflow: clip;
  background: var(--black);
  color: var(--white);
}

.comparison-shell {
  width: min(1180px, 100%);
  margin: 0 auto;
}

.comparison-country {
  font: 500 11px/1 var(--mono);
  letter-spacing: .055em;
  text-transform: uppercase;
}

.comparison-country {
  display: inline-flex;
  margin: 0 0 22px;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, .62);
}

.comparison-flag {
  width: 24px;
  height: 15px;
  flex: 0 0 auto;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .16);
}

.comparison-heading {
  max-width: 920px;
}

.comparison-heading h2 {
  margin: 0;
  font: 500 clamp(20px, 1.8vw, 26px)/1.2 "Figtree", Arial, sans-serif;
  letter-spacing: -.02em;
}

.comparison-heading > p:last-child {
  margin: 8px 0 0;
  color: rgba(255, 255, 255, .52);
  font-size: 15px;
  line-height: 1.45;
}

.choose-guide {
  margin: 0 0 clamp(48px, 6vw, 76px);
  border-bottom: 1px solid rgba(255, 255, 255, .13);
}

.choose-guide-heading {
  padding: 0 0 20px;
  border-bottom: 1px solid rgba(255, 255, 255, .13);
}

.choose-guide-heading h3 {
  margin: 0;
  color: #fff;
  font-family: var(--headline);
  font-size: clamp(36px, 4.2vw, 58px);
  font-weight: 900;
  line-height: .86;
  letter-spacing: -.035em;
}

.choose-guide-heading p {
  margin: 12px 0 0;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
}

.choose-guide-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.choose-guide-list li {
  min-width: 0;
  padding: 17px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  color: rgba(255, 255, 255, .56);
  font-size: 17px;
  line-height: 1.45;
}

.choose-guide-list li:nth-child(odd) {
  border-right: 1px solid rgba(255, 255, 255, .07);
}

.choose-guide-list li:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.choose-guide-list strong {
  position: relative;
  display: inline-block;
  color: #fff;
  font-size: inherit;
  font-weight: 800;
}

/* Block-wipe reveal on each highlighted phrase: a white bar sweeps in from the left,
   the word lands under it, the bar sweeps off to the right. One clip-path drives the
   whole sweep — animating transform instead would need transform-origin to flip
   left->right mid-run, which CSS interpolates into a visible slide.

   ⛔ The STATIC state IS the FINISHED state: the bar sits collapsed against its right
   edge and the word is visible. So no-JS, and reduced motion (the global
   animation-duration: .01ms rule below), both land correctly with nothing running.
   JS arms the pre-state (.is-reveal-armed) and fires it once on scroll
   (.is-revealing) with a per-phrase --hl-delay. Never give these a hidden static
   state — a JS failure would leave the list with holes in it. */
.choose-guide-list strong::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: -.1em -.18em;
  background: #fff;
  clip-path: inset(0 0 0 100%);
  pointer-events: none;
}

.choose-guide.is-reveal-armed .choose-guide-list strong > span {
  opacity: 0;
}

.choose-guide.is-revealing .choose-guide-list strong::after {
  animation: choose-highlight-wipe 1.15s cubic-bezier(.76, 0, .24, 1) var(--hl-delay, 0s) both;
}

/* Keyframe percentages are wall-clock, so the word's cut-in stays locked to the bar's
   sweep regardless of each animation's own easing. It lands at 27% — a touch past the
   halfway point of the bar's travel — so the bar is still covering it when it appears. */
.choose-guide.is-revealing .choose-guide-list strong > span {
  animation: choose-highlight-text 1.15s linear var(--hl-delay, 0s) both;
}

@keyframes choose-highlight-wipe {
  0% { clip-path: inset(0 100% 0 0); }
  47%, 53% { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 0 0 100%); }
}

@keyframes choose-highlight-text {
  0%, 26% { opacity: 0; }
  27%, 100% { opacity: 1; }
}

.comparison-column-select {
  display: grid;
  min-width: 0;
  gap: 7px;
}

.comparison-column-select > span:first-child {
  color: rgba(255, 255, 255, .55);
  font: 500 9px/1 var(--mono);
  letter-spacing: .045em;
  text-transform: uppercase;
}

.comparison-column-select select {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  min-height: 38px;
  padding: 0 34px 0 10px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 2px;
  background-color: #151515;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5 7 5 5 5-5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px 14px;
  color: var(--white);
  font: 500 13px/1 "Figtree", Arial, sans-serif;
  cursor: pointer;
}

.comparison-table thead th:nth-child(2) .comparison-column-select > span:first-child {
  color: #fff;
  font-size: 11px;
  font-weight: 600;
}

.comparison-column-select select:focus-visible,
.comparison-table-wrap:focus-visible {
  outline: 2px solid var(--magenta);
  outline-offset: 2px;
}

.comparison-table-wrap {
  margin-top: clamp(20px, 2.5vw, 28px);
  overflow: clip;
  border-top: 1px solid rgba(255, 255, 255, .16);
  border-bottom: 1px solid rgba(255, 255, 255, .16);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.comparison-table {
  width: 100%;
  border-spacing: 0;
  table-layout: fixed;
  border-collapse: separate;
  font-size: 14px;
}

.comparison-table .feature-column {
  width: 44%;
}

.comparison-table .alice-column,
.comparison-table .competitor-column {
  width: 28%;
}

.comparison-table th,
.comparison-table td {
  padding: 15px 18px;
  border-right: 1px solid rgba(255, 255, 255, .07);
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  vertical-align: top;
  overflow-wrap: anywhere;
}

.comparison-table th:last-child,
.comparison-table td:last-child {
  border-right: 0;
}

.comparison-table thead th {
  position: sticky;
  z-index: 2;
  top: 80px;
  height: 90px;
  padding-block: 14px;
  background: #111;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .14);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
}

.comparison-table thead th:nth-child(2) {
  background: #082419;
}

.comparison-table tbody th[scope="row"] {
  color: rgba(255, 255, 255, .82);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
}

.comparison-table tbody td:nth-child(2) {
  background: rgba(32, 112, 70, .07);
}

.comparison-table tbody td.comparison-country-cell {
  height: auto;
  padding: 0;
  overflow: hidden;
  background: #070707;
}

.comparison-country-flag {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  object-fit: cover;
}

.comparison-group th {
  padding-block: 13px;
  background: #111;
  color: rgba(255, 255, 255, .42);
  font: 500 9px/1 var(--mono);
  letter-spacing: .055em;
  text-align: left;
  text-transform: uppercase;
}

.comparison-value {
  display: inline-flex;
  align-items: flex-start;
  gap: 7px;
  font-weight: 600;
  line-height: 1.25;
}

.comparison-value.is-included {
  color: #76cda0;
}

.comparison-value.is-not-included {
  color: #92928c;
}

.comparison-value.is-limited,
.comparison-value.is-beta {
  color: #d3a15c;
}

.comparison-value.is-text {
  color: rgba(255, 255, 255, .88);
}

.comparison-icon {
  display: inline-grid;
  width: 17px;
  min-width: 17px;
  height: 17px;
  place-items: center;
  border-radius: 50%;
  font-family: Arial, sans-serif;
  font-size: 12px;
  line-height: 1;
}

.comparison-value.is-included .comparison-icon {
  background: #168454;
  color: #fff;
}

.comparison-value.is-not-included .comparison-icon {
  border: 1px solid #686863;
  color: #9a9a94;
}

.comparison-value.is-limited .comparison-icon,
.comparison-value.is-beta .comparison-icon {
  color: #c37100;
}

.comparison-table td small {
  display: block;
  margin: 4px 0 0 24px;
  color: rgba(255, 255, 255, .42);
  font-size: 11px;
  line-height: 1.35;
}

.comparison-value.is-text + small {
  margin-left: 0;
}

/* A note the reader should catch, in the same orange the table already uses for a
   limitation (.is-limited) — currently the competitors' "Tax added at checkout", which
   is what our no-GST price is read against. Opt-in per cell via textCell(…, flag),
   so ordinary notes stay muted and the orange keeps meaning something. */
.comparison-table td small.is-flag {
  color: #d3a15c;
  font-weight: 600;
}

.comparison-footnote,
.comparison-evidence,
.comparison-noscript {
  max-width: 940px;
  color: rgba(255, 255, 255, .42);
  font-size: 12px;
  line-height: 1.55;
}

.comparison-footnote {
  margin: 20px 0 0;
}

.comparison-evidence {
  margin: 9px 0 0;
}

.comparison-evidence a {
  color: inherit;
  text-underline-offset: 3px;
}

.free-why-section {
  position: relative;
  padding: clamp(100px, 10vw, 156px) 0 clamp(92px, 9vw, 138px);
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, .08);
  background:
    radial-gradient(circle at 50% 12%, rgba(41, 151, 255, .16), transparent 29%),
    var(--black);
  color: var(--white);
}

.free-why-copy {
  width: min(1380px, calc(100% - 36px));
  margin: 0 auto clamp(50px, 6vw, 80px);
  text-align: center;
}

.free-why-kicker {
  margin: 0 0 20px;
  color: rgba(255, 255, 255, .58);
  font: 600 11px/1 var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
}

.free-why-title {
  display: flex;
  margin: 0;
  justify-content: center;
  gap: .16em;
  color: var(--white);
  font: 800 clamp(58px, 8.8vw, 142px)/.78 var(--display);
  letter-spacing: -.075em;
  text-transform: uppercase;
}

.free-why-title > span:nth-child(2) {
  color: var(--yellow);
}

.free-why-title-middle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.free-why-title-flag-text {
  color: var(--yellow);
}

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  /* ⛔ australia-FILL.svg, never australia.svg. The shared flag has a viewBox and
     no preserveAspectRatio, so it defaults to "meet" — and Chrome honours that for
     a CSS background even at background-size: 100% 100%. The word is ~4:1 and the
     flag is 2:1, so the flag was letterboxed into the middle half and the first and
     last letters rendered EMPTY (stroke only). Probed: the outer 25% each side came
     back as page background. The -fill copy is byte-identical apart from
     preserveAspectRatio="none", so it stretches edge to edge and every letter is
     filled. Keep 100% 100% — the slight overflow past the cap band is deliberate,
     it guarantees full coverage even if Figtree falls back to Arial. */
  .free-why-title-flag-text {
    background: url("../../assets/flags/australia-fill.svg") center / 100% 100% no-repeat;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1.5px rgba(255, 255, 255, .88);
  }
}

.free-why-promise {
  display: flex;
  margin: clamp(28px, 3vw, 42px) 0 0;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--white);
  font: 750 clamp(21px, 2.6vw, 38px)/1.02 var(--display);
  letter-spacing: -.035em;
}

.free-why-heart {
  width: clamp(46px, 4.2vw, 66px);
  height: auto;
  flex: 0 0 auto;
  fill: var(--red);
  filter: drop-shadow(0 0 16px rgba(232, 64, 44, .36));
  transform-origin: 50% 56%;
  animation: free-why-heartbeat 2.4s ease-in-out infinite;
}

.free-why-reason {
  max-width: 620px;
  margin: 18px auto 0;
  color: rgba(255, 255, 255, .64);
  font-size: clamp(14px, 1.25vw, 18px);
  line-height: 1.45;
}

.free-why-marquee {
  display: grid;
  grid-template-columns: clamp(190px, 18vw, 238px) minmax(0, 1fr);
  width: 100%;
  min-height: 168px;
  overflow: hidden;
  border-block: 1px solid rgba(255, 255, 255, .16);
  background: #f5f4f1;
  color: var(--black);
}

/* ⛔ width: auto — do NOT let this card keep the .free-why-card clamp. Alice is a
   GRID ITEM of .free-why-marquee, whose first column is clamp(190px, 18vw, 238px);
   the card class it shares sets a narrower clamp(166px, 16vw, 216px), and a definite
   width stops a grid item stretching. That left the card 22-24px SHORT of its column
   on iPad/desktop, so a bare strip of the marquee's #f5f4f1 background sat between
   the card and the rail — the box-shadow landed on that flat strip instead of on the
   white cards and read as a SOLID grey band, not a shadow. Phone looked right only
   because its column and card widths both happen to be 124px. Let the grid size it,
   and never re-pin a pixel width here that has to be kept in sync with the column.

   ⛔ The width override MUST stay on the two-class `.free-why-marquee > .free-why-alice`
   selector below. `.free-why-card` sets its width LATER in this file (and again inside
   the mobile query), so a plain `.free-why-alice { width: auto }` loses the tie on
   source order and silently does nothing. */
.free-why-alice {
  position: relative;
  z-index: 2;
  border-right: 1px solid rgba(8, 8, 8, .16);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .94), rgba(245, 240, 255, .98)),
    #fff;
  box-shadow: 22px 0 34px rgba(0, 0, 0, .08);
}

.free-why-window {
  min-width: 0;
  overflow: hidden;
  cursor: grab;
  overscroll-behavior-x: contain;
  touch-action: pan-y;
  user-select: none;
}

.free-why-window.is-dragging {
  cursor: grabbing;
}

.free-why-window:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: -4px;
}

.free-why-track {
  display: flex;
  width: max-content;
  min-height: 168px;
  will-change: transform;
}

.free-why-group {
  display: flex;
  min-height: 168px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.free-why-card {
  display: grid;
  width: clamp(166px, 16vw, 216px);
  min-height: 168px;
  padding: 22px 16px 18px;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto 1fr;
  align-content: center;
  gap: 10px 6px;
  border-right: 1px solid rgba(8, 8, 8, .14);
  background: #fff;
}

.free-why-card-brand {
  display: flex;
  min-width: 0;
  grid-column: 1 / -1;
  align-items: center;
  gap: 10px;
}

.free-why-logo {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(8, 8, 8, .08);
  -webkit-user-drag: none;
}

.free-why-card-brand strong {
  overflow: hidden;
  font: 800 17px/1 var(--display);
  letter-spacing: -.025em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.free-why-country {
  display: inline-flex;
  align-items: center;
}

.free-why-country img {
  width: 68px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: 3px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(8, 8, 8, .14);
  -webkit-user-drag: none;
}

.free-why-rate {
  align-self: center;
  color: var(--red);
  font: 850 clamp(24px, 2vw, 30px)/.9 var(--display);
  letter-spacing: -.055em;
}

/* Beats the .free-why-card width above on specificity, at every breakpoint — see the
   comment on .free-why-alice. Alice fills her grid column so the shadow lands on the
   cards, not on a bare strip of marquee background. */
.free-why-marquee > .free-why-alice {
  width: auto;
}

.free-why-alice .free-why-rate {
  color: #0b9552;
}

.free-why-card small {
  grid-column: 1 / -1;
  align-self: end;
  color: rgba(8, 8, 8, .52);
  font: 600 9px/1.2 var(--mono);
  letter-spacing: .015em;
  text-transform: uppercase;
}

.free-why-evidence {
  width: min(1180px, calc(100% - 36px));
  margin: 18px auto 0;
  color: rgba(255, 255, 255, .4);
  font-size: 10.5px;
  line-height: 1.5;
}

.free-why-evidence a {
  color: inherit;
  text-underline-offset: 3px;
}

.free-why-sources {
  width: min(1180px, calc(100% - 36px));
  margin: 8px auto 0;
  color: rgba(255, 255, 255, .4);
  font-size: 10.5px;
  line-height: 1.5;
  text-align: center;
}

.free-why-sources summary {
  display: inline-block;
  cursor: pointer;
  list-style: none;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.free-why-sources summary::-webkit-details-marker {
  display: none;
}

.free-why-sources summary::after {
  content: " +";
}

.free-why-sources[open] summary::after {
  content: " −";
}

.free-why-sources div {
  display: flex;
  margin-top: 10px;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px 12px;
}

.free-why-sources a {
  color: inherit;
  text-underline-offset: 3px;
}

.free-why-direct {
  width: min(760px, calc(100% - 36px));
  margin: clamp(54px, 6vw, 88px) auto 0;
  color: var(--white);
  font: 750 clamp(26px, 3.3vw, 50px)/1 var(--display);
  letter-spacing: -.045em;
  text-align: center;
}

.free-why-direct strong {
  display: block;
  margin-top: .16em;
  color: var(--yellow);
  font-size: 1.18em;
}

.free-why-ask {
  width: min(560px, calc(100% - 36px));
  margin: clamp(20px, 2.2vw, 30px) auto 0;
  color: rgba(255, 255, 255, .56);
  font-size: clamp(12.5px, 1.05vw, 15px);
  line-height: 1.6;
  text-align: center;
}

.free-why-ask-link {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.free-why-ask-link:hover,
.free-why-ask-link:focus-visible {
  color: var(--yellow);
}

/* The hand-drawn underline sits UNDER the word, so the word keeps its own box and
   the stroke is free to overshoot both ends the way a pen would. */
.free-why-ask-mark {
  position: relative;
  white-space: nowrap;
}

.free-why-ask-underline {
  position: absolute;
  right: -7%;
  bottom: -.9em;
  left: -7%;
  width: 114%;
  height: .8em;
  overflow: visible;
  fill: none;
  stroke: rgba(255, 255, 255, .82);
  /* non-scaling-stroke on the path keeps the pen weight even, so the box is free to
     stretch to whatever width the word ends up (preserveAspectRatio="none").
     ⛔ ONE sweep with an open curl at the right end — never an out-and-back stroke.
     At this size the box is only ~58x12px, so a return sweep collapses into a closed
     flat ellipse no matter how much vertical separation you give it. Rendered six
     variants at true size before landing here. */
  stroke-width: 1.4px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@keyframes free-why-heartbeat {
  0%, 24%, 100% { transform: scale(1); }
  10% { transform: scale(1.14); }
  16% { transform: scale(.96); }
}

@media (max-width: 900px) {
  .pricing-page .site-header {
    padding: 10px 12px 0;
  }

  .pricing-page .nav-shell {
    min-height: 58px;
    padding: 0 12px 0 14px;
    border-width: 1px;
    border-radius: 19px;
  }

  .pricing-page .header-actions {
    margin-right: 4px;
  }

  .pricing-page .header-cta {
    min-width: 126px;
    min-height: 44px;
    padding: 0 12px;
    font-size: 10px;
  }

  .pricing-page .mobile-menu {
    margin-top: 6px;
    border-radius: 19px;
  }

  .pricing-carousel {
    padding-top: 86px;
  }

  .card-heading h2 {
    font-size: clamp(36px, 5.4vw, 44px);
  }

  .card-price strong {
    font-size: clamp(38px, 5.4vw, 44px);
  }
}

@media (max-width: 640px) {
  .single-screen-pricing {
    min-height: 640px;
  }

  .pricing-carousel {
    padding: 78px 0 8px;
    gap: 5px;
  }

  .plan-slide {
    width: calc(100vw - 44px);
    max-width: 360px;
    aspect-ratio: .68;
    border-radius: 25px;
  }

  .plan-card-content {
    padding: 16px;
    background: linear-gradient(180deg, transparent 0, transparent 14%, rgba(255, 255, 255, .86) 23%, rgba(255, 255, 255, .98) 34%, #fff 48%);
  }

  .plan-person {
    height: 42%;
    opacity: .54;
  }

  .card-topline {
    min-height: 25px;
  }

  .card-topline span,
  .card-topline b {
    min-height: 24px;
    padding: 6px 8px;
    font-size: 6px;
  }

  .card-heading {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 50px;
    align-items: start;
    gap: 4px;
  }

  .card-heading h2 {
    font-size: 29px;
    line-height: .88;
  }

  .card-price {
    justify-self: end;
    /* The block is now as wide as the billed line (its longest child), so without this the
       big /day figure would left-align inside a right-aligned block. Push both to the same
       right edge. */
    justify-content: flex-end;
    text-align: right;
  }

  .card-price strong {
    font-size: 32px;
  }

  .card-price span {
    margin-left: 4px;
    font-size: 6px;
  }

  .card-summary {
    margin-top: 6px;
    font-size: 10px;
  }

  .card-detail-body {
    margin-top: 8px;
    gap: 8px;
  }

  .card-meta div {
    padding: 7px 6px;
  }

  .card-meta div:first-child {
    padding-left: 0;
  }

  .card-meta div:last-child {
    padding-right: 0;
  }

  .card-meta dt {
    margin-bottom: 3px;
    font-size: 8px;
    line-height: 1.12;
  }

  .card-meta dd {
    font-size: 12px;
    line-height: 1.16;
  }

  .card-features {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .card-features li {
    padding-left: 22px;
    font-size: 13px;
    line-height: 1.3;
  }

  .card-features li::before {
    top: -.04em;
    font-size: 17px;
  }

  .card-end {
    justify-content: center;
  }

  .card-cta {
    min-height: 44px;
    padding: 8px;
    font-size: 8.5px;
  }

  .card-end .card-cta {
    width: min(100%, 260px);
  }

  .carousel-controls {
    min-height: 44px;
    gap: 14px;
  }

  .carousel-arrow {
    width: 44px;
    height: 44px;
  }

  .pricing-note {
    font-size: 6.5px;
  }

  .comparison-section {
    padding: 92px 12px 86px;
  }

  .comparison-country {
    margin-bottom: 16px;
  }

  .comparison-heading h2 {
    font-size: 20px;
    line-height: 1.2;
  }

  .comparison-heading > p:last-child {
    margin-top: 6px;
    font-size: 14px;
  }

  .choose-guide {
    margin-bottom: 44px;
  }

  .choose-guide-heading {
    padding: 0 0 16px;
  }

  .choose-guide-heading h3 {
    font-size: clamp(34px, 10.5vw, 42px);
  }

  .choose-guide-heading p {
    margin-top: 9px;
    font-size: 14px;
  }

  .choose-guide-list {
    grid-template-columns: 1fr;
  }

  .choose-guide-list li,
  .choose-guide-list li:nth-child(odd),
  .choose-guide-list li:nth-last-child(-n + 2) {
    padding: 13px 0;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    font-size: 15.5px;
  }

  .choose-guide-list li:last-child {
    border-bottom: 0;
  }

  .comparison-table-wrap {
    margin-top: 18px;
    border-radius: 0;
  }

  .comparison-table {
    font-size: 10.5px;
  }

  .comparison-table th,
  .comparison-table td {
    padding: 11px 6px;
  }

  .comparison-table thead th {
    top: 68px;
    height: 80px;
    padding: 10px 6px;
    font-size: 11px;
  }

  .comparison-table thead th:first-child {
    font-size: 14px;
  }

  .comparison-table thead th:nth-child(2) .comparison-column-select > span:first-child {
    font-size: 8.5px;
  }

  .comparison-table tbody th[scope="row"] {
    font-size: 13.5px;
    line-height: 1.35;
  }

  .comparison-column-select {
    gap: 5px;
  }

  .comparison-column-select > span:first-child {
    font-size: 7px;
  }

  .comparison-column-select select {
    min-height: 36px;
    padding: 0 19px 0 5px;
    font-size: 10px;
  }

  .comparison-group th {
    padding: 10px 8px;
    font-size: 7.5px;
  }

  .comparison-value {
    gap: 4px;
    font-size: 10px;
  }

  .comparison-icon {
    width: 14px;
    min-width: 14px;
    height: 14px;
    font-size: 10px;
  }

  .comparison-table td small {
    margin: 3px 0 0 18px;
    font-size: 8.5px;
    line-height: 1.3;
  }

  .comparison-value.is-text + small {
    margin-left: 0;
  }

  .comparison-footnote,
  .comparison-evidence,
  .comparison-noscript {
    font-size: 10.5px;
  }

  .free-why-section {
    padding: 92px 0 82px;
  }

  .free-why-copy {
    width: calc(100% - 24px);
    margin-bottom: 46px;
  }

  .free-why-kicker {
    margin-bottom: 17px;
    font-size: 9px;
  }

  .free-why-title {
    display: grid;
    gap: 0;
    font-size: clamp(51px, 16vw, 66px);
    line-height: .76;
  }

  .free-why-title-middle {
    justify-self: center;
  }

  .free-why-promise {
    max-width: 310px;
    margin: 30px auto 0;
    gap: 9px;
    font-size: 22px;
  }

  .free-why-reason {
    max-width: 330px;
    margin-top: 14px;
    font-size: 13.5px;
  }

  .free-why-marquee {
    grid-template-columns: 124px minmax(0, 1fr);
    min-height: 136px;
  }

  .free-why-track,
  .free-why-group {
    min-height: 136px;
  }

  .free-why-card {
    width: 144px;
    min-height: 136px;
    padding: 15px 12px 13px;
    gap: 8px 5px;
  }

  .free-why-alice {
    /* Width stays grid-driven (the column above is 124px) — see the base rule. */
    padding-right: 10px;
    padding-left: 10px;
  }

  .free-why-card-brand {
    display: grid;
    grid-template-columns: 31px minmax(0, 1fr);
    gap: 7px;
  }

  .free-why-logo {
    width: 31px;
    height: 31px;
    border-radius: 8px;
  }

  .free-why-card-brand strong {
    font-size: 14px;
  }

  .free-why-country {
    align-self: center;
  }

  .free-why-country img {
    width: 58px;
    height: 36px;
  }

  .free-why-rate {
    font-size: 22px;
  }

  .free-why-card small {
    font-size: 6.5px;
  }

  .free-why-evidence {
    width: calc(100% - 24px);
    margin-top: 14px;
    font-size: 9px;
  }

  .free-why-sources {
    width: calc(100% - 24px);
    font-size: 9px;
  }

  .free-why-direct {
    width: calc(100% - 24px);
    margin-top: 52px;
    font-size: 25px;
  }

  .free-why-ask {
    width: calc(100% - 40px);
    margin-top: 20px;
    font-size: 12.5px;
  }
}

/* Alice preview r129: header and closing footer now share the Alice-page system. */
.pricing-page .site-header .alice-nav-logo {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  object-fit: cover;
}

.pricing-page .site-footer .footer-links {
  margin-bottom: clamp(26px, 4vw, 48px);
}

.pricing-page .site-footer .footer-links::after {
  margin-top: clamp(24px, 3vw, 38px);
  margin-bottom: 0;
}

.pricing-page .site-footer .footer-wordmark {
  min-height: clamp(138px, 15vw, 218px);
  margin-bottom: clamp(46px, 5vw, 70px);
  background: transparent;
  background-image: none;
}

.pricing-page .site-footer .mega-pill {
  background: var(--alice-main-btn-gradient);
  box-shadow: var(--alice-main-btn-shadow);
  color: var(--white);
}

.pricing-page .site-footer .mega-pill:hover {
  background: var(--alice-main-btn-gradient-hover);
  box-shadow: var(--alice-main-btn-shadow-hover);
}

@media (max-width: 760px) {
  .pricing-page .site-header .alice-nav-logo {
    width: 34px;
    height: 34px;
    border-radius: 9px;
  }

  .pricing-page .site-footer .footer-wordmark {
    min-height: 138px;
    margin-bottom: 42px;
  }
}

@media (max-height: 760px) {
  .pricing-carousel {
    padding-top: 78px;
  }

  .plan-slide {
    width: min(520px, calc(80svh - 132px), calc(100vw - 52px));
  }

  .card-heading {
    margin-top: 82px;
  }

  .card-detail-body {
    margin-top: 8px;
    gap: 7px;
  }

  .card-meta div {
    padding-top: 7px;
    padding-bottom: 7px;
  }

  .carousel-controls {
    min-height: 44px;
  }
}

@media (max-width: 640px) and (max-height: 760px) {
  .plan-slide {
    width: min(calc(100vw - 44px), 330px);
    aspect-ratio: .65;
  }

  .card-heading {
    margin-top: 38px;
  }

  .card-heading h2 {
    font-size: 28px;
  }

  .card-price strong {
    font-size: 31px;
  }

  .card-features {
    grid-template-columns: 1fr;
  }
}

/* A phone on its side is not a shorter portrait phone. It gets a wide card so
   the full plan remains readable without forcing a 680px page into ~390px. */
@media (orientation: landscape) and (max-height: 560px) and (max-width: 950px) {
  .single-screen-pricing {
    height: 100svh;
    min-height: 0;
  }

  .pricing-carousel {
    position: relative;
    padding: 76px 0 6px;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 3px;
  }

  .coverflow {
    perspective-origin: 50% 50%;
  }

  .coverflow::after {
    right: 28%;
    bottom: 1%;
    left: 28%;
  }

  .plan-slide {
    width: min(600px, calc(100vw - 132px));
    height: min(276px, calc(100svh - 108px));
    aspect-ratio: auto;
    border-radius: 22px;
  }

  .plan-slide-free .plan-art {
    background: radial-gradient(circle at 18% 10%, #f2f3e8 0, #c9d7c9 58%, #9bb3a2 100%);
  }

  .plan-slide-missed .plan-art {
    background: radial-gradient(circle at 18% 10%, #efd6ff 0, #bf79e2 54%, #7344b3 100%);
  }

  .plan-slide-receptionist .plan-art {
    background: radial-gradient(circle at 18% 10%, #b8e5ae 0, #65bfc5 54%, #2473b8 100%);
  }

  .plan-slide-enterprise .plan-art {
    background: radial-gradient(circle at 18% 10%, #fff4bc 0, #eeb55b 54%, #a76321 100%);
  }

  .plan-art svg {
    display: none;
  }

  .plan-person {
    display: block;
    width: 46%;
    height: 100%;
    object-position: 50% 42%;
    opacity: .48;
    filter: saturate(.76) contrast(.92);
    mask-image: linear-gradient(to right, #000 0 42%, rgba(0, 0, 0, .68) 66%, transparent 100%);
  }

  .plan-card-content {
    display: grid;
    padding: 12px 16px;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 4px 18px;
    background: linear-gradient(90deg, rgba(255, 255, 255, .18) 0, rgba(255, 255, 255, .78) 38%, rgba(255, 255, 255, .98) 56%, #fff 100%);
  }

  .card-topline {
    min-height: 24px;
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .card-topline span,
  .card-topline b {
    min-height: 22px;
    padding: 5px 8px;
    font-size: 6.5px;
  }

  .card-heading {
    margin-top: 12px;
    grid-column: 1;
    grid-row: 2;
    grid-template-columns: minmax(0, 1fr);
    align-self: end;
    gap: 5px;
  }

  .card-heading h2 {
    font-size: 25px;
    line-height: .88;
  }

  .card-price {
    justify-self: start;
  }

  .card-price strong {
    font-size: 30px;
  }

  .card-price span {
    font-size: 6px;
  }

  .card-summary {
    margin: 4px 0 0;
    grid-column: 1;
    grid-row: 3;
    align-self: start;
    font-size: 9.5px;
    line-height: 1.3;
  }

  .card-detail-body {
    margin: 0;
    grid-column: 2;
    grid-row: 2 / 4;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 5px;
  }

  .card-meta div {
    padding: 5px 7px;
  }

  .card-meta dt {
    margin-bottom: 2px;
    font-size: 8px;
    line-height: 1.08;
  }

  .card-meta dd {
    font-size: 12px;
    line-height: 1.08;
  }

  .card-features {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .card-features li {
    padding-left: 18px;
    font-size: 11px;
    line-height: 1.08;
  }

  .card-features li::before {
    font-size: 14px;
  }

  .card-end {
    justify-content: center;
  }

  .card-cta {
    min-height: 44px;
    padding: 7px 10px;
    font-size: 7px;
  }

  .card-end .card-cta {
    width: min(100%, 190px);
  }

  .carousel-controls {
    position: absolute;
    z-index: 30;
    inset: 76px 0 22px;
    min-height: 0;
    padding: 0 12px;
    justify-content: space-between;
    pointer-events: none;
  }

  .carousel-arrow {
    width: 44px;
    height: 44px;
    pointer-events: auto;
  }

  .carousel-dots {
    display: none;
  }

  .pricing-note {
    padding: 0 72px;
    font-size: 6px;
    white-space: nowrap;
  }

  .scroll-cue {
    bottom: 8px;
    width: 44px;
    height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .scroll-cue {
    animation: none;
  }

  .pricing-swipe-cue {
    display: none !important;
  }

  .free-why-heart {
    animation: none !important;
  }

  .free-why-track {
    transform: none !important;
  }

  .free-why-window {
    overflow-x: auto;
  }

  .free-why-group[aria-hidden="true"] {
    display: none;
  }
}


/* The amount actually charged is the part that must not be missable.

   ⛔ EVERY property here is undoing an inherited one, and none of it is
   decoration. `.card-price strong` and `.card-price span` are DESCENDANT
   selectors, so they also match the strong and the span nested inside
   .card-billed: without these resets "Billed A$99/month" rendered at 32px with
   -1.76px tracking (the big-number style, as large as the price itself) and
   "no GST / cancel anytime" rendered at 6px uppercase DM Mono. Both looked like
   bugs on the card. Measured, not guessed. */
.card-billed strong {
  display: block;
  /* Larger than the rest of the line, on Jase's call. Lands around half the
     height of the per-day figure above it (32px phone / 38px desktop), which is
     the point: the amount actually charged should not need looking for. */
  font-size: clamp(15px, 1.3vw, 19px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
}

/* ⛔ Its own line, deliberately. The price block is RIGHT-ALIGNED, so one long
   sentence wrapped into three ragged lines (245px, then 55px, then 82px) that
   read as a mistake. Two clean lines: what you are charged, then the terms. */
.card-price .card-billed-sub {
  display: block;
  margin-top: 3px;
  margin-left: 0;
  color: #55554f;
  font-family: inherit;
  /* ⛔ Pinned, not inherited. It sits inside .card-billed, so `inherit` tracked
     that box - and the charge above it is now much larger. Left inheriting, any
     future size bump would drag the terms up with it and flatten the hierarchy
     this change exists to create. */
  font-size: clamp(12px, .95vw, 14px);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: none;
}

/* Alice preview r112: quiet return path from the Aussie proof block to the
   Free Features section. Lowercase is deliberate and matches the paired link. */
.free-why-back-link {
  display: inline-flex;
  min-height: 44px;
  margin-top: 22px;
  padding: 0 22px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 999px;
  color: #fff;
  font-family: "Alice Manrope", "Manrope", sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.free-why-back-link:hover,
.free-why-back-link:focus-visible {
  background: #fff;
  color: #050505;
}

.free-why-back-link:active {
  transform: scale(.97);
}