/* ==========================================================================
   CLUTCHwx / the Spark-or-Build comparison
   --------------------------------------------------------------------------
   Sole owner of the comparison table. The flat version in rc1-final.css and
   the stacked mobile conversion in positioning.css were removed in favour of
   this file. Four ideas:

   1. The table sits on the same warm panel as the pricing cards above it, and
      the Build column is promoted into one continuous gold-edged column, so
      the eye carries the featured card straight down into the comparison.
   2. Inclusion is drawn rather than spelled with an em-dash.
   3. Rows arrive in sequence through the site's own reveal system, and answer
      to the pointer.
   4. On a phone the two columns become one, chosen with a segmented control
      rather than stacked into sixteen little sub-labels.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. THE PANEL
   --paper and --white are both remapped onto #f3f1e9 by the tone system, so
   the lift has to be an explicit value - same pair of warm tones as .pcard.
   -------------------------------------------------------------------------- */
#membership .membership-table{
  margin-top:clamp(28px,3.2vw,44px);
  padding:clamp(24px,2.6vw,36px) clamp(20px,2.2vw,32px) clamp(18px,2vw,26px);
  border:1px solid var(--line);
  border-radius:18px;
  background:#f9f8f1;
}
#membership .membership-table-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:14px 28px;
}
#membership .membership-table-title{
  margin:0;
  font-size:clamp(1.3rem,1.9vw,1.6rem);
  font-weight:600;
  letter-spacing:-.035em;
  line-height:1.15;
  color:var(--ink);
}

/* --------------------------------------------------------------------------
   2. THE GRID
   border-spacing rather than border-collapse: a collapsed table cannot round
   the corners of the promoted column.
   -------------------------------------------------------------------------- */
#membership .compare-table{
  width:100%;
  margin-top:clamp(18px,2vw,26px);
  border-collapse:separate;
  border-spacing:0;
  font-variant-numeric:tabular-nums;
  table-layout:fixed;
}
#membership .compare-table th,
#membership .compare-table td{
  padding:14px clamp(12px,1.3vw,20px);
  text-align:left;
  vertical-align:middle;
  font-size:.875rem;
  line-height:1.45;
}
#membership .compare-table tbody th,
#membership .compare-table tbody td{
  border-top:1px solid rgba(17,47,38,.1);
  transition:background .2s var(--ease),color .2s var(--ease);
}
#membership .compare-table tbody tr:first-child th,
#membership .compare-table tbody tr:first-child td{border-top:0}

/* The row label carries the weight of a column header, because it is one. */
#membership .compare-table tbody th{
  padding-left:0;
  font-weight:500;
  color:var(--ink);
}
#membership .compare-table td{color:var(--ink)}
/* table-layout:fixed reads its columns off the first row, so the measure is
   set here and nowhere else. */
#membership .compare-table thead th:first-child{width:40%}
#membership .compare-table thead th[data-col]{width:30%}

/* --------------------------------------------------------------------------
   3. THE COLUMN HEADS
   -------------------------------------------------------------------------- */
#membership .compare-table thead th{padding-block:0 16px;vertical-align:bottom}
#membership .compare-table thead th:first-child{padding:0}
#membership .ct-col-name{
  display:block;
  font-size:clamp(1.05rem,1.5vw,1.3rem);
  font-weight:650;
  letter-spacing:-.035em;
  line-height:1.1;
  color:var(--ink);
}
#membership .ct-col-note{
  display:block;
  margin-top:5px;
  font-size:.625rem;
  font-weight:650;
  letter-spacing:.12em;
  line-height:1.4;
  text-transform:uppercase;
  color:#7a5718;
}
#membership .ct-col-flag{
  display:inline-block;
  margin-bottom:9px;
  padding:5px 11px;
  border-radius:999px;
  background:var(--gold);
  color:#33240a;
  font-size:.5625rem;
  font-weight:700;
  letter-spacing:.13em;
  line-height:1;
  text-transform:uppercase;
  white-space:nowrap;
}

/* --------------------------------------------------------------------------
   4. THE PROMOTED BUILD COLUMN
   One continuous panel: the head cell caps it, the last row closes it, and
   every cell between contributes the two side edges.
   -------------------------------------------------------------------------- */
#membership .compare-table [data-col="build"]{
  border-left:1px solid rgba(181,143,58,.5);
  border-right:1px solid rgba(181,143,58,.5);
  background:#fcf8ec;
}
#membership .compare-table thead th[data-col="build"]{
  padding:clamp(16px,1.7vw,20px) clamp(12px,1.3vw,20px) 16px;
  border-top:1px solid rgba(181,143,58,.5);
  border-radius:14px 14px 0 0;
}
#membership .compare-table tbody tr:last-child td[data-col="build"]{
  border-bottom:1px solid rgba(181,143,58,.5);
  border-radius:0 0 14px 14px;
}
/* Inside the panel the row rules warm up, so they read as part of it. */
#membership .compare-table tbody td[data-col="build"]{border-top-color:rgba(181,143,58,.28)}

/* --------------------------------------------------------------------------
   5. VALUES
   -------------------------------------------------------------------------- */
#membership .compare-table .ct-row-price th{padding-block:18px}
#membership .compare-table .ct-row-price td{
  padding-block:18px;
  font-size:clamp(1.3rem,2vw,1.65rem);
  font-weight:650;
  letter-spacing:-.035em;
  line-height:1.1;
}
#membership .ct-yes,
#membership .ct-no{display:inline-flex;align-items:center;gap:9px}
#membership .ct-yes svg,
#membership .ct-no svg{
  flex:0 0 auto;
  width:20px;
  height:20px;
  padding:4px;
  border-radius:50%;
  stroke-width:2.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}
#membership .ct-yes svg{background:rgba(17,47,38,.07);color:#2b5c47}
#membership [data-col="build"] .ct-yes svg{background:rgba(213,175,89,.24);color:#78571a}
/* Absence is stated once, quietly, and never as a stray dash in a value
   column. The words are still there for a screen reader. */
/* Kept above the 3:1 floor for non-text contrast: the drawn state is the only
   thing distinguishing this cell from the checked one beside it. */
#membership .ct-no svg{background:rgba(17,47,38,.05);color:#77867d;stroke-width:2}

/* --------------------------------------------------------------------------
   6. THE POINTER
   Matching the site's existing hover idiom: a tone step, nothing that moves.
   -------------------------------------------------------------------------- */
@media (hover:hover) and (pointer:fine){
  #membership .compare-table tbody tr:hover th{background:rgba(17,47,38,.05)}
  #membership .compare-table tbody tr:hover td[data-col="spark"]{background:rgba(17,47,38,.05)}
  #membership .compare-table tbody tr:hover td[data-col="build"]{background:#f8f0d9}
}

/* --------------------------------------------------------------------------
   7. THE REVEAL
   tone-motion.js assigns the rows; the sequence is set here. It is deliberately
   quick - eight rows at 150ms would keep the reader waiting.
   -------------------------------------------------------------------------- */
html.tm-ready.has-motion #membership .compare-table tbody tr:nth-child(2){--tm-delay:55ms}
html.tm-ready.has-motion #membership .compare-table tbody tr:nth-child(3){--tm-delay:110ms}
html.tm-ready.has-motion #membership .compare-table tbody tr:nth-child(4){--tm-delay:165ms}
html.tm-ready.has-motion #membership .compare-table tbody tr:nth-child(5){--tm-delay:220ms}
html.tm-ready.has-motion #membership .compare-table tbody tr:nth-child(6){--tm-delay:275ms}
html.tm-ready.has-motion #membership .compare-table tbody tr:nth-child(7){--tm-delay:330ms}
html.tm-ready.has-motion #membership .compare-table tbody tr:nth-child(8){--tm-delay:385ms}

/* --------------------------------------------------------------------------
   8. THE SWITCH
   Phone only, and only once the script has taken the table over. Same
   aria-pressed contract as .portal-switch and .fs-plan-tabs.
   -------------------------------------------------------------------------- */
#membership .ct-switch{display:none}
#membership .ct-switch-btn{
  min-height:40px;
  padding:9px 18px;
  border:0;
  border-radius:999px;
  background:none;
  color:var(--muted);
  font:inherit;
  font-size:.8125rem;
  font-weight:650;
  letter-spacing:.02em;
  cursor:pointer;
  transition:background .22s var(--ease),color .22s var(--ease);
  touch-action:manipulation;
}
#membership .ct-switch-btn[aria-pressed="true"]{background:var(--pine);color:#f3f1e9}
#membership .ct-switch-btn:focus-visible{outline:3px solid #8a6a1e;outline-offset:3px}

/* --------------------------------------------------------------------------
   9. PHONE
   One column of values at a time. The label and its value sit on one line,
   which is what the stacked version was trying and failing to be.
   -------------------------------------------------------------------------- */
@media (max-width:699px){
  #membership .membership-table{
    margin-top:24px;
    padding:20px 18px 16px;
    border-radius:14px;
  }
  #membership .membership-table-head{gap:14px}
  #membership .ct-switch.is-ready{
    display:inline-flex;
    gap:2px;
    padding:3px;
    border:1px solid var(--line);
    border-radius:999px;
    background:rgba(17,47,38,.04);
  }
  #membership .compare-table{margin-top:16px}

  /* Hide whichever column is not on show. The head cell goes with it, so the
     promoted panel's rounded cap follows the Build column into view. */
  #membership .compare-table[data-compare-view="spark"] [data-col="build"],
  #membership .compare-table[data-compare-view="build"] [data-col="spark"]{display:none}

  #membership .compare-table th,
  #membership .compare-table td{padding:13px 14px;font-size:.875rem}
  #membership .compare-table tbody th{padding-left:2px;font-size:.8125rem}
  #membership .compare-table td{text-align:right}
  /* One value column, so the two visible cells account for the whole measure
     and the row label gets enough of it to stay on one line. */
  #membership .compare-table thead th:first-child{width:56%;padding:0}
  #membership .compare-table thead th[data-col]{width:44%}
  #membership .compare-table thead th{padding:0 14px 14px;text-align:right}
  #membership .ct-yes,
  #membership .ct-no{justify-content:flex-end}
  /* The switch has already named the membership; repeating its kicker under
     the column head only bought two wrapped lines. */
  #membership .ct-col-note{display:none}
  #membership .ct-col-flag{margin-bottom:7px}
  #membership .compare-table thead th[data-col="build"]{padding:14px}
  #membership .compare-table .ct-row-price td{font-size:1.25rem}

  /* Eight rows in a single column read as one block on a phone, so the
     sequence collapses - the same rule the rest of the motion system follows. */
  html.tm-ready.has-motion #membership .compare-table tbody tr{--tm-delay:0ms}
}

@media (prefers-reduced-motion:reduce){
  #membership .compare-table tbody th,
  #membership .compare-table tbody td,
  #membership .ct-switch-btn{transition:none}
}