/* ============ Tabby Sans (brand fonts) ============ */
@font-face{font-family:"Tabby Sans Text";src:url("fonts/TabbySansText-Regular.woff2") format("woff2");font-weight:400;font-display:swap;}
@font-face{font-family:"Tabby Sans Text";src:url("fonts/TabbySansText-Medium.woff2") format("woff2");font-weight:500;font-display:swap;}
@font-face{font-family:"Tabby Sans Text";src:url("fonts/TabbySansText-Bold.woff2") format("woff2");font-weight:700;font-display:swap;}
@font-face{font-family:"Tabby Sans Display";src:url("fonts/TabbySansDisplay-Bold.woff2") format("woff2");font-weight:700;font-display:swap;}

/* ============ Web DS tokens ============ */
:root{
  --front-primary:#1A1919;
  --front-secondary:#75726F;
  --front-tertiary:#BAB6B3;
  --bg-primary:#FFFFFF;
  --bg-secondary:#F5F4F2;
  --bg-control:#EBE7E4;
  --bg-green:#6CFF8F;
  --bg-positive-muted:#DAF0DF;
  --line-secondary:rgba(26,25,25,0.15);
  --font:"Tabby Sans Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-display:"Tabby Sans Display","Tabby Sans Text",-apple-system,sans-serif;

  /* table geometry, overridden per breakpoint */
  --cmp-gap:20px;
  --cmp-cell-x:24px;
  --cmp-cell-y:16px;
  --cmp-card-pad:24px;
  --cmp-radius:20px;
  --cmp-label:1fr;
  --cmp-col:1fr;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--font);color:var(--front-primary);background:var(--bg-primary);overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
svg{display:block}

/* type ramp */
.t-h2{font-family:var(--font-display);font-weight:700;font-size:44px;line-height:48px;letter-spacing:.01em}
.t-h4{font-family:var(--font);font-weight:700;font-size:24px;line-height:28px}
.t-p1{font-weight:400;font-size:20px;line-height:28px}
.t-p2{font-weight:400;font-size:16px;line-height:24px}
.t-p2b{font-weight:700;font-size:16px;line-height:24px}
.t-p3{font-weight:400;font-size:14px;line-height:20px}
.c-sec{color:var(--front-secondary)}

/* ============ header (Web DS Navigation/Header, static) ============ */
.site-header{background:var(--bg-primary);border-bottom:1px solid var(--line-secondary)}
.site-header .inner{max-width:1184px;margin:0 auto;padding:12px 48px;height:80px;display:flex;align-items:center;justify-content:space-between}
.nav-left{display:flex;align-items:center;gap:32px}
.nav-links{display:flex;align-items:center;gap:16px}
.logo{width:133px;height:auto;display:block}
.nav-links span,.nav-link{display:inline-flex;align-items:center;gap:8px;padding:4px 8px;border-radius:8px;font-weight:700;font-size:16px;line-height:24px;color:var(--front-primary);white-space:nowrap;cursor:default;user-select:none}
.nav-right{display:flex;align-items:center;gap:16px}
.flag{position:relative;width:24px;height:24px;border-radius:50%;overflow:hidden;flex:none}
.flag img{position:absolute;top:0;bottom:0;left:-16.67%;width:200%;height:100%}

/* ============ section ============ */
.cmp-section{padding:80px 48px}
.cmp-section--alt{border-top:1px solid var(--line-secondary)}
.cmp-wrap{max-width:1184px;margin:0 auto;display:flex;flex-direction:column;gap:40px}
.cmp-head{display:flex;flex-direction:column;gap:20px;max-width:470px}

/* ============ segmented switcher (Omni SegmentedControl.L, mobile only) ============ */
.seg{position:relative;display:none;padding:4px;border-radius:32px;background:var(--bg-control)}
.seg-pill{position:absolute;top:4px;bottom:4px;left:0;width:0;border-radius:24px;background:var(--bg-primary);box-shadow:0 3px 20px rgba(0,0,0,.07);transition:transform .32s cubic-bezier(.2,.8,.2,1),width .32s cubic-bezier(.2,.8,.2,1)}
.seg button{position:relative;z-index:1;flex:1;display:inline-grid;padding:6px 8px;border-radius:24px;font-size:15px;line-height:18px;font-weight:400;color:var(--front-secondary);white-space:nowrap;text-align:center;transition:color .2s}
.seg button>span,.seg button::after{grid-area:1/1}
.seg button::after{content:attr(data-label);font-weight:700;visibility:hidden}
.seg button[aria-selected="true"]{color:var(--front-primary);font-weight:700}
.seg button:focus-visible{outline:2px solid var(--front-primary);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.seg-pill{transition:none}}

/* ============ comparison table ============ */
.cmp{display:flex;flex-direction:column;gap:24px}
.cmp-scroll{position:relative}
.cmp-grid{display:flex;flex-direction:column}
.cmp-row{display:grid;grid-template-columns:var(--cmp-label) repeat(var(--cmp-n),var(--cmp-col));column-gap:var(--cmp-gap);align-items:stretch;border-bottom:1px solid var(--line-secondary)} /* divider lives on the row so it runs through the column gaps */
.cmp-row[hidden]{display:none}

/* cells */
.cell{min-width:0}
.cell--label{display:flex;align-items:flex-start;padding:var(--cmp-cell-y) 0}
.cell--value{padding:var(--cmp-cell-y) var(--cmp-cell-x);font-size:16px;line-height:24px;display:flex;flex-direction:column;gap:4px}
.cell--value .sub{color:var(--front-secondary)}
.cell--value .lines{display:flex;flex-direction:column;gap:4px}
.ic{width:24px;height:24px;flex:none}

/* plan cards (first grid row) */
.cell--card{padding:var(--cmp-card-pad);border-radius:var(--cmp-radius) var(--cmp-radius) 0 0;background:var(--bg-secondary);display:flex;flex-direction:column;gap:8px}
.cell--card.is-hi{background:var(--bg-green)}
.card-name{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.card-name .n,.card-name .dot,.card-name .p{font-weight:700;font-size:24px;line-height:28px}
.card-desc{font-size:16px;line-height:24px}

/* four columns: stack name over price at every width */
.cmp[data-n="4"] .card-name{flex-direction:column;align-items:flex-start;gap:4px}
.cmp[data-n="4"] .card-name .dot{display:none}
.cmp[data-n="4"] .card-name .p{font-weight:400;font-size:16px;line-height:24px}
.cmp[data-n="4"] .card-desc{font-size:14px;line-height:20px}
.cmp[data-n="4"] .card-name .n{display:inline-flex;align-items:center;gap:8px}

/* coloured columns (tables without group headlines) */
.cmp[data-colored] .cell--value{background:var(--bg-secondary)}
.cmp[data-colored] .cell--value.is-hi{background:var(--bg-positive-muted)}

/* group headline row */
.cell--group{display:flex;align-items:center;gap:8px;padding:40px 0 16px}
.cell--group .t-h4{flex:none}
.cell--group .chev{width:24px;height:24px;flex:none;transition:transform 150ms cubic-bezier(.4,0,.2,1)}
.cell--group-span{grid-column:2 / -1;cursor:pointer;display:flex;align-items:flex-end;justify-content:flex-end;padding:0 var(--cmp-cell-x) 16px}
.cell--group-span .chev{display:none;width:24px;height:24px;transition:transform 150ms cubic-bezier(.4,0,.2,1)}
.group-btn{display:flex;align-items:center;gap:8px;text-align:left}
.group-btn:focus-visible{outline:2px solid var(--front-primary);outline-offset:4px;border-radius:4px}
.cmp-group.is-collapsed .chev{transform:rotate(180deg)}

/* feature label with tooltip */
.feat-btn{font-weight:700;font-size:16px;line-height:24px;text-align:left;text-decoration:underline dotted;text-decoration-color:var(--front-tertiary);text-underline-offset:4px;text-decoration-thickness:1.5px;cursor:help}
.feat-btn:focus-visible{outline:2px solid var(--front-primary);outline-offset:2px;border-radius:2px}
/* tooltip: one floating element on <body>, so no row, sticky cell or scroller can cover or clip it */
.tip{position:fixed;left:0;top:0;width:max-content;max-width:min(260px,calc(100vw - 32px));padding:12px 16px;border-radius:12px;background:var(--front-primary);color:var(--bg-secondary);font-weight:500;font-size:12px;line-height:18px;z-index:1000;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .12s,visibility 0s .12s}
.tip.is-open{opacity:1;visibility:visible;transition:opacity .12s}

/* group rows: height is animated from JS (MUI Collapse timing) */
.cmp-rows{display:block}
.cmp-rows.is-animating{overflow:clip;transition-property:height;transition-timing-function:cubic-bezier(.4,0,.2,1)}
.cmp-group{display:block}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (prefers-reduced-motion:reduce){.cmp-rows.is-animating{transition:none}.cell--group .chev,.cell--group-span .chev{transition:none}}

/* ============ small desktop 1024–1279 ============ */
@media (max-width:1279px){
  :root{--cmp-gap:16px;--cmp-cell-x:20px;--cmp-card-pad:20px}
  .card-name{flex-direction:column;align-items:flex-start;gap:4px}
  .card-name .dot{display:none}
  .card-name .p{font-weight:400;font-size:16px;line-height:24px}
  .card-desc{font-size:14px;line-height:20px}
}

/* ============ tablet 768–1023 ============ */
@media (max-width:1023px){
  :root{--cmp-gap:8px;--cmp-cell-x:12px;--cmp-card-pad:12px;--cmp-radius:16px;--cmp-label:140px}
  .cmp-section{padding:80px 64px}
  .t-h2{font-size:36px;line-height:40px}
  .card-name .n{font-size:16px;line-height:24px}
  .card-name .p{font-size:14px;line-height:20px}
  .card-desc{display:none}
  .cell--value{font-size:14px;line-height:20px}
  .cell--group .chev{display:none}
  .cell--group-span .chev{display:block}
}

/* ============ mobile < 768 ============ */
@media (max-width:767px){
  :root{--cmp-gap:8px;--cmp-cell-x:12px;--cmp-cell-y:12px;--cmp-card-pad:12px;--cmp-label:124px}
  .cmp-section{padding:60px 20px 80px}
  .t-h2{font-size:32px;line-height:36px}
  .t-p1{font-size:16px;line-height:24px}
  .cmp-head{gap:16px}
  .seg{display:flex}
  /* carousel: one column in view, label column pinned */
  .cmp-scroll{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-left:calc(124px + var(--cmp-gap));scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .cmp-scroll::-webkit-scrollbar{display:none}
  .cmp-grid{--cmp-col:calc(100vw - 40px - 124px - var(--cmp-gap));width:max-content;min-width:100%}
  .cell--label,.cell--spacer,.cell--group{position:sticky;left:0;z-index:2;background:var(--bg-primary)}
  .cell--value,.cell--card{scroll-snap-align:start}
  .cell--group{padding:32px 0 12px}
  .cell--group-span{grid-column:2 / -1;padding-bottom:12px}
  /* the chevron must stay visible while columns scroll: pin it to the right of the viewport */
  .cell--group-span .chev{position:sticky;right:0}
}

/* header on small screens: logo only */
@media (max-width:1023px){
  .site-header .inner{padding:12px 20px;height:64px}
  .nav-links,.nav-right{display:none}
  .logo{width:104px}
}