/* Round 2 only: existing tokens and styles remain the foundation. */
.round2-page .cp-page{
  max-width:1136px;
  margin-inline:auto;
  min-width:0;
  padding-bottom:112px
}

.r2-home-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:24px
}

.r2-home-grid{
  display:grid;
  grid-template-columns:minmax(0,8fr) minmax(0,4fr);
  gap:20px;
  align-items:start
}

.r2-now,.r2-since{
  background:var(--cm-brand-navy-deep);
  color:var(--cm-text-on-brand);
  padding:24px;
  border-radius:var(--cm-radius-xl)
}

.r2-now{
  grid-column:1;
  grid-row:1;
  display:flex;
  flex-direction:column;
  gap:12px
}

.r2-now h2{
  font-size:26px;
  line-height:1.25;
  margin:0;
  font-weight:600
}

.r2-now p,.r2-since p{
  color:var(--cm-dark-text-secondary);
  margin:0
}

.r2-now.light{
  background:var(--cm-bg-surface);
  color:var(--cm-text-primary);
  border:1px solid var(--cm-border-soft)
}

.r2-now.light p{
  color:var(--cm-text-secondary)
}

.r2-now .cm-btn{
  min-height:48px;
  align-self:flex-start
}

#app .r2-now .r2-now-more{
  color:var(--cm-brand-sky);
  min-height:44px;
  display:flex;
  align-items:center
}

.r2-quick{
  grid-column:1;
  grid-row:2
}
.r2-journey{
  grid-column:2;
  grid-row:1 / span 3
}
.r2-month{
  grid-column:1;
  grid-row:3
}
.r2-upcoming{
  grid-column:1;
  grid-row:4
}
.r2-week{
  grid-column:2;
  grid-row:4
}

.r2-quick-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-top:12px
}

.r2-qa{
  font:inherit;
  text-align:left;
  border:1px solid var(--cm-border-soft);
  border-radius:var(--cm-radius-lg);
  padding:16px;
  background:var(--cm-bg-surface);
  color:var(--cm-text-primary);
  display:flex;
  flex-direction:column;
  gap:8px;
  min-height:118px;
  cursor:pointer;
  min-width:0
}

.r2-qa b{
  font-size:16px;
  font-weight:600;
  line-height:1.25
}
.r2-qa .cm-tile{
  width:40px;
  height:40px;
  border-radius:12px;
  background:var(--cm-info-soft);
  color:var(--cm-brand-600)
}

.r2-status{
  font-size:13px;
  display:flex;
  align-items:center;
  gap:6px
}
.r2-qa:hover{
  border-color:var(--cm-border-strong);
  box-shadow:var(--cm-shadow-sm)
}

.r2-levels{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:4px;
  position:relative;
  margin-block:20px
}

.r2-levels::before{
  content:'';
  position:absolute;
  left:10%;
  right:10%;
  top:22px;
  height:2px;
  background:var(--cm-border-soft)
}

.r2-levels button{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  background:none;
  border:0;
  font:inherit;
  min-width:0;
  cursor:pointer;
  color:var(--cm-text-secondary);
  padding:0;
  min-height:70px
}

.r2-node{
  width:44px;
  height:44px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--cm-bg-surface-soft);
  font-weight:600;
  color:var(--cm-text-secondary)
}

.r2-node.complete{
  background:var(--cm-brand-navy);
  color:white
}
.r2-node.current{
  background:radial-gradient(closest-side,var(--cm-bg-surface) 77%,transparent 80%),conic-gradient(var(--cm-brand-blue) var(--level-progress),var(--cm-brand-100) 0);
  color:var(--cm-brand-navy)
}

.r2-levels small{
  font-size:11px;
  line-height:16px;
  overflow-wrap:anywhere
}
.r2-progress{
  height:8px;
  border-radius:8px;
  background:var(--cm-brand-100);
  overflow:hidden
}
.r2-progress span{
  display:block;
  height:100%;
  background:var(--cm-brand-blue);
  border-radius:inherit
}

.r2-next{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:16px;
  background:var(--cm-bg-surface-soft);
  border-radius:12px;
  padding:16px
}
.r2-next .cm-btn{
  width:100%
}

.r2-metrics{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-block:16px
}
.r2-metrics strong{
  display:block;
  font-size:28px;
  font-weight:600;
  font-variant-numeric:tabular-nums
}
.r2-metrics span{
  font-size:13px
}

.r2-milestones{
  list-style:none;
  padding:0;
  margin-block:20px
}
.r2-milestones li{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  padding:12px 0;
  border-bottom:1px solid var(--cm-border-soft)
}
.r2-milestones small{
  color:var(--cm-brand-600)
}

.r2-sheet{
  border:0;
  border-radius:var(--cm-radius-xl);
  padding:24px;
  width:min(560px,calc(100% - 32px));
  max-height:85dvh;
  background:var(--cm-bg-surface);
  color:var(--cm-text-primary);
  box-shadow:var(--cm-shadow-lg)
}

.r2-sheet::backdrop{
  background:rgba(9,33,47,.48)
}
.r2-sheet header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px
}
.r2-sheet h2{
  font-size:22px;
  line-height:1.25;
  margin:0
}
.r2-sheet-body{
  display:flex;
  flex-direction:column;
  gap:16px;
  margin-top:20px
}
.r2-sheet footer{
  display:flex;
  justify-content:space-between;
  gap:12px
}
.r2-sheet p{
  margin:0
}
.r2-sheet [data-error]{
  color:var(--cm-danger)
}

.r2-segment{
  display:flex;
  align-items:center;
  gap:4px;
  padding:4px;
  border:1px solid var(--cm-border-soft);
  border-radius:12px;
  background:var(--cm-bg-surface-soft);
  max-width:100%;
  overflow-x:auto
}
.r2-segment button{
  border:0;
  background:none;
  font:inherit;
  color:var(--cm-text-secondary);
  min-height:44px;
  white-space:nowrap;
  padding:8px 14px;
  cursor:pointer;
  border-radius:8px
}
.r2-segment [aria-selected=true]{
  background:var(--cm-bg-surface);
  color:var(--cm-brand-navy);
  box-shadow:var(--cm-shadow-sm)
}

.r2-entry{
  display:flex;
  align-items:center;
  gap:12px;
  background:var(--cm-info-soft);
  padding:12px 16px;
  flex-wrap:wrap
}
.r2-entry a{
  min-height:44px;
  display:flex;
  align-items:center
}
.r2-entry button{
  margin-left:auto
}

.r2-overview-grid{
  display:grid;
  grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:20px;
  margin-block:20px
}
.r2-since .r2-metrics{
  grid-template-columns:repeat(2,minmax(0,1fr))
}

.r2-tabs{
  margin-block:24px
}
.r2-metric-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-block:20px
}
.r2-metric-grid.count-3{
  grid-template-columns:repeat(3,minmax(0,1fr))
}
.r2-metric-card{
  background:var(--cm-bg-surface);
  border:1px solid var(--cm-border-soft);
  border-radius:var(--cm-radius-lg);
  padding:16px;
  min-width:0
}
.r2-metric-card strong{
  display:block;
  font-size:28px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  margin-block:10px
}
.r2-metric-card small{
  display:block;
  font-size:12px;
  margin-top:8px;
  color:var(--cm-text-secondary)
}

.r2-overview-grid .r2-metric-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))
}
.r2-delta{
  border-radius:99px;
  padding:4px 8px;
  font-size:12px;
  font-variant-numeric:tabular-nums;
  background:var(--cm-success-soft);
  color:var(--cm-success-text)
}
.r2-delta.down{
  background:var(--cm-danger-soft);
  color:var(--cm-danger-text)
}

.r2-channel-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px
}
.r2-channel-list small{
  display:block;
  font-size:12px;
  color:var(--cm-text-secondary)
}
.r2-channel-head h2{
  font-size:22px
}
.r2-channel-head p{
  color:var(--cm-text-secondary)
}

.r2-chart .cp-card-head{
  display:flex;
  gap:16px;
  flex-wrap:wrap
}
.r2-bars{
  height:200px;
  display:flex;
  align-items:stretch;
  gap:8px;
  margin-block:24px 48px
}
.r2-bar{
  flex:1;
  position:relative;
  border:0;
  background:none;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  min-width:0;
  min-height:44px;
  padding:0;
  cursor:pointer
}
.r2-bar-value{
  display:block;
  width:100%;
  background:var(--cm-brand-sky);
  border-radius:6px 6px 0 0
}
.r2-bar.selected .r2-bar-value{
  background:var(--cm-brand-blue)
}
.r2-bar.before .r2-bar-value{
  background:var(--cm-border-strong)
}
.r2-bar small{
  position:absolute;
  top:100%;
  font-size:10px;
  line-height:14px;
  margin-top:8px;
  width:100%;
  overflow-wrap:anywhere;
  color:var(--cm-text-secondary)
}
.r2-bar em{
  position:absolute;
  bottom:100%;
  font-size:10px;
  font-style:normal;
  padding:4px;
  background:var(--cm-brand-100);
  border-radius:6px
}
.r2-chart summary{
  min-height:44px;
  cursor:pointer;
  padding-block:12px
}
.r2-mobile-hint{
  display:none
}

.r2-tip{
  position:relative;
  display:inline-flex;
  vertical-align:middle
}
.r2-info{
  width:44px;
  height:44px;
  background:none;
  border:0;
  font:inherit;
  cursor:pointer;
  color:var(--cm-brand-blue)
}
.r2-tip [role=tooltip]{
  display:none;
  position:absolute;
  z-index:20;
  top:100%;
  right:0;
  background:var(--cm-brand-navy-deep);
  color:white;
  padding:12px;
  border-radius:8px;
  width:240px;
  font-size:13px
}
.r2-tip:hover [role=tooltip],.r2-tip:focus-within [role=tooltip]{
  display:block
}

.r2-toast{
  position:fixed;
  bottom:calc(160px + env(safe-area-inset-bottom));
  left:50%;
  transform:translateX(-50%);
  z-index:1000;
  background:var(--cm-brand-navy);
  color:white;
  border-radius:12px;
  padding:14px 20px;
  max-width:calc(100% - 32px);
  width:max-content
}

.r2-support{
  position:fixed;
  right:28px;
  bottom:28px;
  height:56px;
  border-radius:99px;
  background:var(--cm-brand-navy-deep);
  color:white;
  border:0;
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 22px;
  z-index:90;
  font:inherit;
  cursor:pointer;
  transition:opacity 220ms,transform 220ms
}
.r2-support i{
  font-size:24px
}
.r2-support span{
  text-align:left;
  font-size:15px;
  font-weight:600
}
.r2-support small{
  display:block;
  color:var(--cm-brand-sky);
  font-size:12px
}
.r2-support .r2-wa-dot{
  display:none
}
.r2-support:hover{
  background:var(--cm-brand-navy)
}
.r2-support:active{
  transform:scale(.94)
}
.r2-support.scroll-hidden{
  opacity:0;
  transform:translateY(80px);
  pointer-events:none
}
.r2-support[hidden],.r2-toast[hidden]{
  display:none
}

.round2-page button:focus-visible,.round2-page a:focus-visible,.r2-sheet button:focus-visible,.r2-support:focus-visible{
  outline:3px solid var(--cm-focus-ring);
  outline-offset:3px
}
.r2-qa:active,.r2-segment button:active{
  transform:scale(.98)
}

@media(min-width:768px) and (max-width:1279px){
  .r2-home-grid{
  grid-template-columns:minmax(0,7fr) minmax(0,5fr)
}
.r2-quick-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))
}

}

@media(max-width:767px){
  .round2-page .cp-page{
  padding-inline:16px
}
.r2-home-grid{
  display:flex;
  flex-direction:column;
  gap:16px
}
.r2-home-grid>*{
  width:100%;
  min-width:0
}
.r2-now{
  order:1;
  padding:20px
}
.r2-quick{
  order:2
}
.r2-journey{
  order:3
}
.r2-month{
  order:4
}
.r2-upcoming{
  order:5
}
.r2-week{
  order:6
}
.r2-quick-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))
}
.r2-now h2{
  font-size:22px
}
.r2-now .cm-btn{
  width:100%;
  align-self:stretch
}
.r2-home-head .cp-h1{
  font-size:28px
}
.r2-overview-grid{
  grid-template-columns:1fr
}
.r2-metric-grid,.r2-metric-grid.count-3{
  grid-template-columns:repeat(2,minmax(0,1fr))
}
.r2-metric-grid.count-3>:last-child{
  grid-column:1 / -1
}
.r2-metric-card strong{
  font-size:24px
}
.r2-channel-list{
  grid-template-columns:1fr
}
.r2-tabs{
  position:sticky;
  top:64px;
  z-index:30;
  background:var(--cm-bg-canvas);
  padding-block:8px
}
.r2-segment button{
  padding-inline:10px
}
.r2-sheet{
  margin:auto 0 0;
  width:100%;
  max-width:100%;
  max-height:88dvh;
  border-radius:24px 24px 0 0;
  padding:24px 20px calc(24px + env(safe-area-inset-bottom))
}
.r2-support{
  right:16px;
  bottom:calc(90px + env(safe-area-inset-bottom));
  width:56px;
  padding:0;
  justify-content:center
}
.r2-support span{
  display:none
}
.r2-support .r2-wa-dot{
  display:block;
  position:absolute;
  right:2px;
  top:2px;
  width:12px;
  height:12px;
  background:var(--r2-whatsapp-green);
  border:2px solid var(--cm-brand-navy);
  border-radius:50%
}
.r2-tip [role=tooltip]{
  display:none!important
}
.r2-mobile-hint{
  display:block;
  font-size:13px
}
.r2-start-pref{
  flex-direction:column;
  align-items:flex-start
}
.r2-bars{
  gap:5px
}
.r2-bar small{
  font-size:9px
}

}

@media(max-width:379px){
  .r2-home-head .cp-h1{
  font-size:25px
}
.r2-metrics strong{
  font-size:24px
}

}

@media(prefers-reduced-motion:reduce){
  .round2-page *,.r2-support,.r2-sheet{
  animation:none!important;
  transition:none!important
}

}

.r2-onboarding{
  max-width:560px;
  margin-inline:auto;
  padding:16px
}
.r2-onboarding h2{
  font-size:24px;
  font-weight:600;
  line-height:1.3;
  margin:16px 0
}
.r2-onboarding p{
  color:var(--cm-text-secondary);
  margin-block:16px
}
.r2-q-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-height:64px;
  font-size:13px
}
.r2-segment-progress{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:6px;
  margin-block:16px
}
.r2-segment-progress i{
  height:6px;
  background:var(--cm-border-soft);
  border-radius:6px
}
.r2-segment-progress .done{
  background:var(--cm-brand-navy)
}
.r2-segment-progress .now{
  background:var(--cm-brand-blue)
}
.r2-q-options{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px
}
.r2-q-option{
  min-height:88px;
  text-align:left;
  padding:16px;
  border:1px solid var(--cm-border-soft);
  border-radius:16px;
  background:var(--cm-bg-surface);
  font:inherit;
  color:var(--cm-text-primary);
  cursor:pointer
}
.r2-q-option[aria-checked=true]{
  border:2px solid var(--cm-brand-blue);
  background:var(--cm-brand-50)
}
.r2-q-option span{
  float:right;
  color:var(--cm-brand-blue)
}
.r2-q-input{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-block:16px;
  font-size:14px
}
.r2-q-input input,.r2-q-input textarea{
  font:inherit;
  min-height:48px;
  padding:12px;
  border:1px solid var(--cm-border-strong);
  border-radius:12px;
  max-width:100%;
  color:var(--cm-text-primary);
  background:var(--cm-bg-surface)
}
.r2-onboarding footer{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:flex-end;
  padding-block:16px
}
.r2-onboarding [data-r2-error]{
  color:var(--cm-danger)
}
.r2-q-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px
}
.r2-q-chip{
  min-height:44px;
  border-radius:99px;
  padding:8px 16px;
  border:1px solid var(--cm-border-strong);
  background:var(--cm-bg-surface);
  font:inherit;
  cursor:pointer
}
.r2-q-chip[aria-pressed=true]{
  background:var(--cm-brand-50);
  border-color:var(--cm-brand-blue)
}
.r2-q-upload{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  padding:24px;
  border:2px dashed var(--cm-border-strong);
  border-radius:16px;
  cursor:pointer;
  max-width:100%;
  overflow:hidden
}
.r2-q-upload input{
  max-width:100%
}
.r2-photo-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px
}
.r2-photo-grid img{
  width:100%;
  aspect-ratio:1;
  object-fit:cover;
  border-radius:12px
}
.r2-onboarding button:focus-visible,.r2-onboarding input:focus-visible,.r2-onboarding textarea:focus-visible{
  outline:3px solid var(--cm-focus-ring);
  outline-offset:3px
}

@media(max-width:767px){
  .r2-onboarding{
  padding:16px
}
.r2-onboarding footer .cm-btn{
  width:100%
}
.trava.jx:has(.r2-onboarding){
  width:100%;
  height:100dvh;
  max-height:100dvh;
  border-radius:0
}
.trava.jx:has(.r2-onboarding) .jx-rail{
  display:none
}
.trava.jx:has(.r2-onboarding) .jx-main{
  width:100%;
  min-width:0
}

}

@media(min-width:768px){
  .trava.jx:has(.r2-onboarding){
  max-width:720px;
  max-height:760px
}
.trava.jx:has(.r2-onboarding) .jx-rail{
  display:none
}
.trava.jx:has(.r2-onboarding) .jx-main{
  width:100%;
  min-width:0
}

}

.r2-now>.cp-label{
  color:var(--cm-dark-text-secondary)
}
.r2-now.light>.cp-label{
  color:var(--cm-text-secondary)
}
.r2-highlight{
  padding:16px;
  background:var(--cm-info-soft);
  border-radius:12px;
  color:var(--cm-text-primary)
}
.r2-home-head .cm-iconbtn{
  background:var(--cm-brand-100);
  border-radius:50%;
  color:var(--cm-brand-navy);
  font-size:24px
}

.r2-tip.pinned [role=tooltip]{
  display:block
}
.r2-photo-saved{
  display:grid;
  place-items:center;
  aspect-ratio:1;
  border-radius:12px;
  background:var(--cm-success-soft);
  color:var(--cm-success-text)
}

.r2-bars{
  overflow-x:auto;
  overflow-y:hidden;
  padding-top:24px;
  padding-bottom:38px;
  height:264px
}
.r2-bar{
  min-width:44px
}
.r2-tip.pinned [role=tooltip]{
  max-width:calc(100vw - 40px)
}


@media(min-width:768px){
  .r2-now{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:20px}
  .r2-now>.cp-label,.r2-now>h2,.r2-now>p{grid-column:1}
  .r2-now>.cm-btn{grid-column:2;grid-row:2 / span 2;align-self:center}
  .r2-now>.r2-now-more{grid-column:2;justify-content:center}
}

/* The seven-question flow owns its header and occupies the old rail's column. */
dialog.trava.jx:has(.r2-onboarding){
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:minmax(0,1fr)
}
dialog.trava.jx:has(.r2-onboarding) .trava-head{display:none}
dialog.trava.jx .jx-body.r2-onboarding{
  box-sizing:border-box;
  width:100%;
  max-width:592px;
  padding:16px;
  margin-inline:auto;
  min-height:0
}
.r2-q-options .ti{display:block;margin-bottom:8px;color:var(--cm-brand-blue)}
.r2-onboarding [data-r2-form]{display:flex;flex-direction:column;flex:1}
.r2-onboarding footer{margin-top:auto}
.r2-onboarding footer[hidden]{display:none}
.r2-onboarding button:disabled{cursor:default;opacity:.55}
.r2-onboarding [data-r2-error]:empty{display:none}

@media(min-width:1280px){
  .r2-onboarding footer .cm-btn{min-width:160px}
  .r2-overview-grid{align-items:start}
  .r2-overview-grid .r2-metric-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .r2-overview-grid .r2-metric-card{padding:12px}
}

#app .r2-home [data-r2-billing] a{color:var(--cm-brand-navy);text-decoration:underline}

#app ~ dialog.r2-sheet .cm-btn--secondary,#app ~ dialog.trava.jx .r2-onboarding .cm-btn--secondary{
  background:var(--cm-bg-surface);
  color:var(--cm-text-primary);
  box-shadow:inset 0 0 0 1px var(--cm-border-default)
}
#app ~ dialog.r2-sheet .cm-btn--secondary:hover,#app ~ dialog.trava.jx .r2-onboarding .cm-btn--secondary:hover{
  background:var(--cm-bg-surface-soft)
}
.r2-q-option[aria-checked=true] span{color:var(--cm-brand-navy)}

#app ~ dialog.trava.jx .r2-onboarding .cm-btn--ghost{
  background:transparent;
  color:var(--cm-text-primary)
}