/* Zoho virtual admin page only. Loaded via `extra: crm, mid, p-services-zoho-admin`. Every class is scoped with .phr3- */

/* ---------- hero: admin request inbox, items ticked off one by one ---------- */
.phr3-hero .phr3-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.phr3-hero .pg-h1 { max-width: 20ch; }
.phr3-hero .crm-sub { max-width: 44ch; }
.phr3-inbox { position: relative; margin: 0; border-radius: 20px; background: #fff; border: 1px solid #DCE4EC; box-shadow: 0 46px 80px -48px rgba(8,34,56,.6); }
.phr3-inbox__bar { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-radius: 20px 20px 0 0; background: #082238; color: #fff; font: 700 13px/1 var(--f-body); }
.phr3-inbox__dots { display: inline-flex; gap: 5px; } .phr3-inbox__dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.3); }
.phr3-inbox__bar em { margin-left: auto; font-style: normal; font: 800 10.5px/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: #082238; background: #FFB81C; padding: 5px 9px; border-radius: 99px; }
.phr3-inbox__app { display: grid; grid-template-columns: 118px minmax(0, 1fr); }
.phr3-inbox__nav { list-style: none; margin: 0; padding: 12px 8px; display: grid; align-content: start; gap: 3px; background: #F3F7F9; border-right: 1px solid #E2E8F0; border-radius: 0 0 0 20px; }
.phr3-inbox__nav li { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 9px; font: 600 12.5px/1.2 var(--f-body); color: #334155; }
.phr3-inbox__nav li.is-on { background: #fff; color: #082238; box-shadow: 0 6px 14px -10px rgba(8,34,56,.5); }
.phr3-inbox__nav b { min-width: 22px; padding: 3px 6px; border-radius: 99px; background: #E2E8F0; font: 800 11px/1 var(--f-body); color: #082238; text-align: center; }
.phr3-inbox__nav li.is-on b { background: #1D5FA8; color: #fff; }
.phr3-inbox__list { list-style: none; margin: 0; padding: 4px 0 8px; min-width: 0; }
.phr3-inbox__list li { display: grid; grid-template-columns: 22px 26px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 14px; border-top: 1px solid #EEF2F6; transition: background-color .35s; }
.phr3-inbox__list li:first-child { border-top: 0; }
.phr3-inbox__list img { width: 26px; height: 26px; margin-top: 1px; }
.phr3-inbox__list div { min-width: 0; }
.phr3-inbox__from { display: block; font: 700 10.5px/1.3 var(--f-body); letter-spacing: .07em; text-transform: uppercase; color: #475569; }
.phr3-inbox__list b { display: block; font: 600 14px/1.35 var(--f-body); color: #082238; }
.phr3-inbox__re { display: inline-block; margin-top: 5px; padding: 3px 8px; border-radius: 7px; background: #E6F6EC; font: 600 12px/1.35 var(--f-body); color: #0F5132; overflow: hidden; }
.phr3-tick { position: relative; width: 22px; height: 22px; margin-top: 3px; border-radius: 50%; border: 2px solid #1E9E62; background: #1E9E62; transition: background-color .3s, border-color .3s; }
.phr3-tick::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2.4px 2.4px 0; transform: rotate(45deg) scale(1); transition: transform .35s cubic-bezier(.2,1.6,.4,1); }
.phr3-inbox__stamp { position: absolute; right: 18px; bottom: -18px; margin: 0; padding: 8px 14px; border-radius: 10px; border: 2.5px solid #B7791F; background: #FFF8E6; font: 800 13px/1 var(--f-display); letter-spacing: .1em; text-transform: uppercase; color: #7A4B00; transform: rotate(-6deg); box-shadow: 0 16px 30px -18px rgba(8,34,56,.6); }
/* armed by JS: requests start open and get ticked in turn */
.phr3-inbox.is-arm li:not(.is-done) .phr3-tick { background: #fff; border-color: #94A3B8; }
.phr3-inbox.is-arm li:not(.is-done) .phr3-tick::after { transform: rotate(45deg) scale(0); }
.phr3-inbox.is-arm li:not(.is-done) .phr3-inbox__re { max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; opacity: 0; }
.phr3-inbox.is-arm .phr3-inbox__re { max-height: 40px; transition: max-height .45s, opacity .4s .1s, margin .4s, padding .4s; }
.phr3-inbox.is-arm li.is-now { background: #FFF8E6; }
.phr3-inbox.is-arm .phr3-inbox__stamp { opacity: 0; transform: rotate(-6deg) scale(1.3); transition: opacity .35s, transform .45s cubic-bezier(.2,1.5,.4,1); }
.phr3-inbox.is-arm.is-clear .phr3-inbox__stamp { opacity: 1; transform: rotate(-6deg); }
@media (max-width: 900px) { .phr3-hero .phr3-hero__grid { grid-template-columns: minmax(0, 1fr); } .phr3-inbox { margin-bottom: 18px; } }
@media (max-width: 560px) {
  .phr3-inbox__app { grid-template-columns: minmax(0, 1fr); }
  .phr3-inbox__nav { display: flex; gap: 4px; padding: 8px; border-right: 0; border-bottom: 1px solid #E2E8F0; border-radius: 0; overflow: hidden; }
  .phr3-inbox__nav li { padding: 6px 8px; font-size: 12px; }
  .phr3-inbox__list li { grid-template-columns: 22px minmax(0, 1fr); padding: 9px 12px; }
  .phr3-inbox__list img { display: none; }
  .phr3-inbox__stamp { right: 10px; }
}

/* ---------- what: a Zoho "Setup" style panel of admin areas ---------- */
.phr3-setup { margin-top: 30px; border-radius: 22px; background: #fff; border: 1px solid #E2E8F0; box-shadow: 0 30px 60px -48px rgba(8,34,56,.6); overflow: hidden; }
.phr3-setup__head { display: flex; align-items: baseline; gap: 12px; margin: 0; padding: 14px 22px; background: linear-gradient(90deg, #0B2540, #0A3A63); color: #fff; }
.phr3-setup__head span { font: 800 16px/1 var(--f-display); letter-spacing: -.01em; }
.phr3-setup__head em { font-style: normal; font: 600 13px/1.2 var(--f-body); color: #C9DCEB; }
.phr3-setup__rows { list-style: none; margin: 0; padding: 0; }
.phr3-setup__rows > li { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr) 230px; gap: 18px; align-items: center; padding: 18px 22px; border-top: 1px solid #EEF2F6; transition: background-color .3s; }
.phr3-setup__rows > li:first-child { border-top: 0; }
.phr3-setup__rows > li::before { content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 4px; border-radius: 0 4px 4px 0; background: var(--c); transform: scaleY(.3); transition: transform .35s; }
.phr3-setup__rows > li:hover { background: #F8FAFC; } .phr3-setup__rows > li:hover::before { transform: none; }
.phr3-setup__ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: color-mix(in srgb, var(--c) 9%, #fff); border: 1px solid color-mix(in srgb, var(--c) 22%, #fff); }
.phr3-setup__ic img { width: 30px; height: 30px; }
.phr3-setup h3 { margin: 0 0 4px; font: 700 18.5px/1.25 var(--f-display); color: #082238; }
.phr3-setup__rows p { margin: 0; font-size: 15.5px; line-height: 1.6; color: #334155; max-width: 70ch; }
.phr3-setup__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.phr3-setup__chips li { padding: 5px 10px; border-radius: 99px; background: #fff; border: 1.5px solid var(--c); font: 600 12.5px/1.2 var(--f-body); color: #082238; }
@media (max-width: 980px) { .phr3-setup__rows > li { grid-template-columns: 52px minmax(0, 1fr); } .phr3-setup__chips { grid-column: 2; justify-content: flex-start; } }
@media (max-width: 520px) { .phr3-setup__rows > li { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 18px 18px 18px 20px; } .phr3-setup__chips { grid-column: 1; } .phr3-setup__ic { width: 44px; height: 44px; } }

/* ---------- when: signs as labelled request notes ---------- */
.phr3-when__grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.phr3-when__p { margin: 16px 0 0; font-size: 17px; line-height: 1.65; color: #334155; max-width: 58ch; }
.phr3-signs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.phr3-signs li { position: relative; padding: 18px 18px 18px; border-radius: 6px 18px 18px 18px; background: #FFFCF2; border: 1px solid #F1E3B5; box-shadow: 0 22px 36px -30px rgba(8,34,56,.55); transition: transform .3s; }
.phr3-signs li:nth-child(2) { transform: translateY(18px); } .phr3-signs li:nth-child(4) { transform: translateY(18px); }
.phr3-signs li:hover { transform: translateY(-3px); }
.phr3-signs__tag { display: inline-block; margin-bottom: 10px; padding: 4px 10px; border-radius: 6px; background: #082238; font: 700 11.5px/1.2 var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: #fff; }
.phr3-signs b { display: block; font: 600 16px/1.5 var(--f-body); color: #2B2100; }
@media (max-width: 900px) { .phr3-when__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .phr3-signs { grid-template-columns: minmax(0, 1fr); } .phr3-signs li:nth-child(2), .phr3-signs li:nth-child(4) { transform: none; } }

/* ---------- compare (mid kit I) + monthly strip (mid kit E) ---------- */
.phr3-vs .mk-tabs { margin-top: 26px; }
.phr3-vs__note { margin: 22px 0 0; padding: 14px 18px; border-radius: 14px; background: rgba(255,255,255,.75); border: 1px solid #E2E8F0; font-size: 15.5px; line-height: 1.6; color: #334155; max-width: 90ch; }
.phr3-strip { margin-top: 26px; }
.phr3-strip__ic { display: block; width: 32px; height: 32px; margin: 10px 0 12px; }

/* ---------- J4 chat thread scroll-story: one admin week ----------
   Static by default (whole thread in a short scroll box + every day card); JS adds .phr3-ss--live on wide, tall screens with motion. */
.phr3-ss { padding: 0; background-image: linear-gradient(180deg, rgba(230,246,240,.8) 0%, rgba(255,255,255,0) 70%); overflow-x: clip; }
.phr3-ss__stage { padding-top: clamp(64px, 8vw, 104px); padding-bottom: clamp(64px, 8vw, 104px); }
.phr3-ss__head .pg-answer { margin-bottom: 0; }
.phr3-ss__days { display: none; }
.phr3-ss__grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; margin-top: 32px; }
.phr3-ss__chat { margin: 0; border-radius: 24px; background: #fff; border: 1px solid #E2E8F0; box-shadow: 0 40px 70px -44px rgba(8,34,56,.45); overflow: hidden; }
.phr3-ss__top { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid #E2E8F0; background: #0B2540; color: #fff; }
.phr3-ss__avs { display: inline-flex; flex: none; }
.phr3-ss__avs i { display: grid; place-items: center; height: 28px; padding: 0 10px; border-radius: 99px; font: 800 9.5px/1 var(--f-body); font-style: normal; letter-spacing: .04em; text-transform: uppercase; border: 2px solid #0B2540; }
.phr3-ss__avs i:first-child { background: #E2E8F0; color: #082238; }
.phr3-ss__avs i + i { margin-left: -6px; background: #0E6E78; color: #fff; }
.phr3-ss__top b { display: block; font: 700 15px/1.25 var(--f-body); color: #fff; }
.phr3-ss__top small { display: block; font: 600 12px/1.3 var(--f-body); color: #C9DCEB; }
.phr3-ss__body { padding: 16px 18px 18px; }
.phr3-ss__thread { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.phr3-ss__d { align-self: center; margin: 8px 0 2px; padding: 4px 12px; border-radius: 99px; background: #F3F7F9; font: 700 11.5px/1.2 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: #334155; }
.phr3-ss__d:first-child { margin-top: 0; }
.phr3-ss__m { max-width: 82%; padding: 9px 14px 10px; border-radius: 18px; font-size: 14.5px; line-height: 1.45; }
.phr3-ss__m > b { display: block; margin-bottom: 2px; font: 700 11px/1.2 var(--f-body); letter-spacing: .06em; text-transform: uppercase; }
.phr3-ss__m--t { align-self: flex-start; background: #EEF2F6; color: #0F172A; border-bottom-left-radius: 6px; }
.phr3-ss__m--t > b { color: #334155; }
.phr3-ss__m--a { align-self: flex-end; background: #0E6E78; color: #fff; border-bottom-right-radius: 6px; }
.phr3-ss__m--a > b { color: #E3F6F4; }
.phr3-ss__m--z { align-self: center; max-width: 94%; display: flex; gap: 9px; align-items: flex-start; padding: 8px 12px; background: #FFF8E6; border: 1px solid #F6DFA0; color: #5B4300; font-size: 13px; border-radius: 12px; }
.phr3-ss__m--z img { width: 20px; height: 20px; flex: none; margin-top: 1px; border-radius: 4px; }
.phr3-ss__m--z b { font-weight: 700; color: #3F2E00; }
.phr3-ss__typing { display: flex; gap: 4px; padding: 12px 14px; border-radius: 18px; background: #EEF2F6; align-self: flex-start; }
.phr3-ss__typing--a { align-self: flex-end; background: #CFEAE7; }
.phr3-ss__typing i { width: 7px; height: 7px; border-radius: 50%; background: #64748B; animation: phr3-blink 1s infinite; }
.phr3-ss__typing i:nth-child(2) { animation-delay: .15s; } .phr3-ss__typing i:nth-child(3) { animation-delay: .3s; }
@keyframes phr3-blink { 50% { opacity: .25; } }
@keyframes phr3-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.phr3-ss__tally { display: none; margin: 0 0 14px; font: 600 15px/1.3 var(--f-body); color: #334155; }
.phr3-ss__tally b { display: inline-grid; place-items: center; min-width: 40px; height: 40px; margin-right: 8px; padding: 0 6px; border-radius: 12px; background: #082238; font: 800 20px/1 var(--f-display); color: #FFB81C; vertical-align: middle; }
.phr3-ss__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.phr3-ss__st { background: #fff; border-radius: 20px; padding: 22px 24px; box-shadow: 0 30px 60px -44px rgba(8,34,56,.45); border-left: 5px solid var(--c); }
.phr3-ss__when { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; font: 800 12.5px/1.3 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--c); }
.phr3-ss__n { padding: 4px 9px; border-radius: 99px; background: var(--c); color: #fff; letter-spacing: .06em; }
.phr3-ss__st h3 { margin: 0 0 8px; font: 700 clamp(20px, 1rem + .7vw, 25px)/1.2 var(--f-display); letter-spacing: -.02em; color: #082238; padding-bottom: 2px; }
.phr3-ss__st > p:not([class]) { margin: 0; font-size: 16px; line-height: 1.6; color: #334155; }
.phr3-ss__done { list-style: none; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px dashed #CBD5E1; display: grid; gap: 6px; }
.phr3-ss__done li { position: relative; padding-left: 26px; font: 600 14.5px/1.4 var(--f-body); color: #0F5132; }
.phr3-ss__done li::before { content: ""; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 50%; background: #1E9E62; }
.phr3-ss__done li::after { content: ""; position: absolute; left: 6px; top: 4px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.phr3-ss__bar { display: none; }
.phr3-ss__foot { margin-top: 22px; }
.phr3-ss__note { max-width: 80ch; margin: 0; }
.phr3-ss__days button { position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 3px 12px 3px 3px; border: 1px solid #CBD5E1; border-radius: 99px; background: #fff; font: 600 12.5px/1.2 var(--f-body); white-space: nowrap; color: #334155; cursor: pointer; transition: background-color .3s, color .3s, border-color .3s; }
.phr3-ss__days button span { display: grid; place-items: center; min-width: 38px; height: 26px; padding: 0 6px; border-radius: 99px; background: #F3F7F9; font: 800 11.5px/1 var(--f-display); color: #082238; transition: background-color .3s, color .3s; }
.phr3-ss__days button.is-past { border-color: #94A3B8; color: #082238; }
.phr3-ss__days button.is-past span { background: var(--c); color: #fff; }
.phr3-ss__days button[aria-current="step"] { background: #082238; border-color: #082238; color: #fff; }
.phr3-ss__days button[aria-current="step"] span { background: #FFB81C; color: #082238; }
.phr3-ss__days button:focus-visible { outline: 2px solid #0A6FA8; outline-offset: 2px; }
.phr3-ss__days em { font-style: normal; }
/* live: pinned stage inside a tall track */
.phr3-ss--live .phr3-ss__track { height: calc(100vh + 5 * 54vh); }
.phr3-ss--live .phr3-ss__stage { position: sticky; top: 0; height: 100vh; min-height: 600px; display: flex; flex-direction: column; justify-content: center; padding-top: 92px; padding-bottom: 20px; }
.phr3-ss--live .pg-h2 { font-size: clamp(26px, 1rem + 1.2vw, 36px); margin-bottom: 8px; max-width: none; }
.phr3-ss--live .phr3-ss__head .hp-kick { margin-bottom: 8px; }
.phr3-ss--live .pg-answer { font-size: 16px; line-height: 1.55; max-width: 92ch; }
.phr3-ss--live .phr3-ss__days { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 14px 0 0; padding: 0; }
.phr3-ss--live .phr3-ss__grid { margin-top: 16px; align-items: center; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.phr3-ss--live .phr3-ss__body { height: clamp(230px, calc(100vh - 440px), 460px); overflow: hidden; scroll-behavior: smooth; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 36px); mask-image: linear-gradient(180deg, transparent 0, #000 36px); }
.phr3-ss--live .phr3-ss__thread { min-height: 100%; justify-content: flex-end; }
.phr3-ss--live .phr3-ss__thread > li { display: none; }
.phr3-ss--live .phr3-ss__thread > li.is-in { display: flex; }
.phr3-ss--live .phr3-ss__thread > .phr3-ss__m--t.is-in, .phr3-ss--live .phr3-ss__thread > .phr3-ss__m--a.is-in, .phr3-ss--live .phr3-ss__thread > .phr3-ss__d.is-in { display: block; }
.phr3-ss--live .phr3-ss__thread > li.is-new { animation: phr3-in .38s cubic-bezier(.2,.8,.2,1) both; }
.phr3-ss--live .phr3-ss__tally { display: block; }
.phr3-ss--live .phr3-ss__list { display: block; position: relative; min-height: 300px; }
.phr3-ss--live .phr3-ss__st { position: absolute; left: 0; right: 0; top: 50%; opacity: 0; pointer-events: none; transform: translateY(-44%) scale(.97); transition: opacity .2s, transform .3s; }
.phr3-ss--live .phr3-ss__st.is-on { opacity: 1; pointer-events: auto; transform: translateY(-50%); transition: opacity .45s .12s, transform .6s .12s cubic-bezier(.2,.8,.2,1); }
.phr3-ss--live .phr3-ss__foot { display: flex; align-items: center; gap: 10px 20px; margin-top: 14px; }
.phr3-ss--live .phr3-ss__bar { display: flex; flex: none; gap: 6px; }
.phr3-ss__bar i { width: 26px; height: 5px; border-radius: 4px; background: rgba(8,34,56,.14); transition: background-color .4s; }
.phr3-ss__bar i.on { background: #FFB81C; }
.phr3-ss--live .phr3-ss__note { font-size: 13px; line-height: 1.4; max-width: none; }
.phr3-ss--live .phr3-ss__days button:not([aria-current]) { padding-right: 3px; }
.phr3-ss--live .phr3-ss__days button:not([aria-current]) em { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.phr3-ss--live .phr3-ss__days button:not([aria-current]):hover { border-color: var(--c); }
@media (max-height: 780px) {
  .phr3-ss--live .phr3-ss__stage { padding-top: 84px; padding-bottom: 14px; }
  .phr3-ss--live .phr3-ss__head .hp-kick { display: none; }
  .phr3-ss--live .pg-answer { font-size: 15px; line-height: 1.5; }
  .phr3-ss--live .phr3-ss__days { margin-top: 10px; }
  .phr3-ss--live .phr3-ss__grid { margin-top: 10px; }
  .phr3-ss--live .phr3-ss__body { height: clamp(200px, calc(100vh - 380px), 400px); }
  .phr3-ss--live .phr3-ss__tally { margin-bottom: 8px; }
  .phr3-ss--live .phr3-ss__st { padding: 16px 20px; }
  .phr3-ss--live .phr3-ss__st h3 { font-size: 21px; }
  .phr3-ss--live .phr3-ss__st > p:not([class]) { font-size: 15px; line-height: 1.5; }
  .phr3-ss--live .phr3-ss__done { margin-top: 10px; padding-top: 8px; }
  .phr3-ss--live .phr3-ss__foot { margin-top: 8px; }
}
@media (max-width: 900px) { .phr3-ss__grid { grid-template-columns: minmax(0, 1fr); } .phr3-ss__chat { max-width: 560px; } }
@media (max-width: 680px) { .phr3-ss__body { padding: 14px 12px 16px; } .phr3-ss__m { max-width: 90%; font-size: 14px; } .phr3-ss__st { padding: 20px 18px; } }
.phr3-ss:not(.phr3-ss--live) .phr3-ss__thread { max-height: 380px; overflow-y: auto; overscroll-behavior: contain; }
@media (prefers-reduced-motion: reduce) {
  .phr3-ss__typing i, .phr3-ss__thread > li { animation: none !important; }
  .phr3-ss__st, .phr3-ss__days button, .phr3-ss__bar i { transition: none !important; }
}

/* ---------- builder: weekly task builder → retainer fit (dark band) ---------- */
.phr3-build__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 4vw, 48px); align-items: start; margin-top: 28px; }
.phr3-build__in { display: grid; gap: 22px; min-width: 0; }
.phr3-build fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.phr3-build legend { margin-bottom: 10px; padding: 0; font: 700 12.5px/1.2 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: #8FD8C9; }
.phr3-build__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.phr3-build__chips button { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 14px 6px 7px; border-radius: 12px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.06); font: 600 14.5px/1.2 var(--f-body); color: #E6EEF6; cursor: pointer; transition: background-color .25s, border-color .25s; }
.phr3-build__chips button img { width: 26px; height: 26px; padding: 2px; border-radius: 7px; background: #fff; }
.phr3-build__chips button:hover { background: rgba(255,255,255,.12); }
.phr3-build__chips button[aria-pressed="true"] { background: rgba(0,178,169,.24); border-color: #3FB97A; color: #fff; }
.phr3-build__tasks ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.phr3-build__tasks li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 9px 10px 9px 16px; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); position: relative; }
.phr3-build__tasks li::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px; border-radius: 0 4px 4px 0; background: var(--tc, transparent); transition: background-color .25s; }
.phr3-build__tasks li > span:first-child { font: 600 15px/1.35 var(--f-body); color: #E6EEF6; }
.phr3-seg { display: inline-flex; padding: 3px; border-radius: 10px; background: rgba(0,0,0,.22); gap: 3px; }
.phr3-seg button { min-height: 32px; min-width: 76px; padding: 4px 10px; border: 0; border-radius: 8px; background: transparent; font: 600 13.5px/1 var(--f-body); color: #D3E1EC; cursor: pointer; transition: background-color .2s, color .2s; }
.phr3-seg button:hover { background: rgba(255,255,255,.1); }
.phr3-seg button[aria-pressed="true"] { background: #FFB81C; color: #082238; }
.phr3-build__once { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.phr3-build__once p { flex-basis: 100%; margin: 0 0 2px; font: 600 14.5px/1.3 var(--f-body); color: #CFE0EE; }
.phr3-build__once button { min-height: 36px; padding: 6px 14px; border-radius: 99px; border: 1px dashed rgba(255,255,255,.45); background: transparent; font: 600 14px/1.2 var(--f-body); color: #E6EEF6; cursor: pointer; }
.phr3-build__once button[aria-pressed="true"] { border-style: solid; border-color: #FFB81C; background: rgba(255,184,28,.16); color: #fff; }
.phr3-build button:focus-visible { outline: 2px solid #FFB81C; outline-offset: 2px; }
.phr3-build__out { position: sticky; top: 100px; padding: 24px 24px 22px; border-radius: 22px; background: #fff; color: #334155; box-shadow: 0 40px 70px -40px rgba(0,0,0,.6); }
.phr3-wk { margin: 0 0 18px; padding: 12px; border-radius: 14px; background: #F3F7F9; border: 1px solid #E2E8F0; }
.phr3-wk__days, .phr3-wk__cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.phr3-wk__days span { font: 700 11.5px/1 var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: #334155; text-align: center; padding-bottom: 6px; }
.phr3-wk__cols i { display: flex; flex-direction: column; gap: 4px; min-height: 76px; padding: 4px; border-radius: 9px; background: #fff; border: 1px dashed #CBD5E1; font-style: normal; }
.phr3-wk__cols b { display: block; padding: 4px 5px; border-radius: 6px; font: 700 10.5px/1.2 var(--f-body); color: #082238; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; animation: phr3-drop .35s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes phr3-drop { from { opacity: 0; transform: translateY(-8px); } }
.phr3-wk__month { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 0; font: 600 12.5px/1.35 var(--f-body); color: #334155; }
.phr3-wk__month > b { margin-right: 4px; font: 800 11.5px/1 var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: #082238; }
.phr3-wk__month i { padding: 3px 8px; border-radius: 99px; font-style: normal; font: 700 11.5px/1.2 var(--f-body); color: #082238; }
.phr3-build__flag { margin: 0 0 6px; font: 800 12px/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: #0B6B73; }
.phr3-build__out h3 { margin: 0 0 8px; font: 700 clamp(23px, 1rem + 1vw, 29px)/1.2 var(--f-display); letter-spacing: -.02em; color: #082238; padding-bottom: 2px; }
.phr3-build__out > p:not([class]) { margin: 0 0 18px; font-size: 15.5px; line-height: 1.6; }
.phr3-tag { position: relative; display: grid; gap: 2px; margin: 0 0 18px 10px; padding: 16px 20px 16px 46px; border-radius: 8px 18px 18px 8px; background: linear-gradient(135deg, #0A2D52, #07443F); color: #fff; transform: rotate(-1.5deg); box-shadow: 0 24px 40px -26px rgba(8,34,56,.9); clip-path: polygon(22px 0, 100% 0, 100% 100%, 22px 100%, 0 50%); }
.phr3-tag__hole { position: absolute; left: 18px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: #fff; }
.phr3-tag__k { font: 700 11.5px/1.2 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: #8FD8C9; }
.phr3-tag__big { font: 800 clamp(34px, 1.6rem + 1.4vw, 46px)/1.1 var(--f-display); letter-spacing: -.03em; color: #fff; padding-bottom: 2px; }
.phr3-tag__big small { font: 700 15px/1 var(--f-body); letter-spacing: 0; color: #CFE0EE; }
.phr3-tag__one { font: 600 14px/1.4 var(--f-body); color: #FFD27A; }
.phr3-tag.is-pop { animation: phr3-pop .45s cubic-bezier(.2,1.5,.4,1); }
@keyframes phr3-pop { 40% { transform: rotate(-1.5deg) scale(1.04); } }
.phr3-build__send { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.phr3-build__send > span { font-size: 13px; color: #475569; }
@media (max-width: 960px) { .phr3-build__grid { grid-template-columns: minmax(0, 1fr); } .phr3-build__out { position: static; } }
@media (max-width: 560px) {
  .phr3-build__tasks li { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .phr3-seg { justify-self: start; }
  .phr3-build__out { padding: 20px 16px 18px; }
  .phr3-wk__cols b { font-size: 9.5px; padding: 3px; }
  .phr3-tag { margin-left: 4px; }
}
@media (prefers-reduced-motion: reduce) { .phr3-wk__cols b, .phr3-tag.is-pop { animation: none; } }

/* ---------- pricing: plan card + four ways to work ---------- */
.phr3-price__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(24px, 4vw, 56px); align-items: start; margin-top: 28px; }
.phr3-card { position: relative; padding: 28px 28px 26px; border-radius: 24px; background: #fff; border: 1px solid #E2E8F0; box-shadow: 0 40px 70px -46px rgba(8,34,56,.55); overflow: hidden; }
.phr3-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: linear-gradient(90deg, #1D3F8F, #00A3D9, #00B2A9, #3FB97A); }
.phr3-card__k { margin: 0 0 10px; font: 800 12px/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: #0B6B73; }
.phr3-card__big { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; margin: 0; color: #082238; }
.phr3-card__big small { font: 700 17px/1 var(--f-body); color: #334155; }
.phr3-card__big span { font: 800 clamp(64px, 2.6rem + 3vw, 96px)/1.05 var(--f-display); letter-spacing: -.045em; padding-bottom: 4px; background: linear-gradient(120deg, #1D3F8F, #0A6FA8 60%, #0B6B73); -webkit-background-clip: text; background-clip: text; color: transparent; }
.phr3-card__one { margin: 2px 0 18px; font: 600 15.5px/1.45 var(--f-body); color: #334155; }
.phr3-card__list { list-style: none; margin: 0 0 18px; padding: 16px 0 0; border-top: 1px solid #E2E8F0; display: grid; gap: 9px; }
.phr3-card__list li { position: relative; padding-left: 26px; font-size: 15.5px; line-height: 1.45; color: #334155; }
.phr3-card__list li::before { content: ""; position: absolute; left: 4px; top: 3px; width: 6px; height: 11px; border: solid #1E9E62; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.phr3-card__q { margin: 0 0 20px; padding: 12px 14px; border-radius: 12px; background: #FFF8E6; border: 1px solid #F6DFA0; font-size: 14.5px; line-height: 1.5; color: #4A3500; }
.phr3-card__q b { display: block; color: #082238; }
.phr3-card__cta { width: 100%; justify-content: center; }
.phr3-ways { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.phr3-ways li { padding: 20px 20px 18px; border-radius: 18px; background: #fff; border: 1px solid #E2E8F0; border-top: 4px solid var(--c); }
.phr3-ways__k { display: block; margin-bottom: 6px; font: 800 11.5px/1.2 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--c); }
.phr3-ways h3 { margin: 0 0 6px; font: 700 19px/1.25 var(--f-display); color: #082238; }
.phr3-ways p { margin: 0; font-size: 15px; line-height: 1.6; color: #334155; }
.phr3-price__fine { margin: 16px 0 0; font-size: 14.5px; line-height: 1.6; color: #334155; }
@media (max-width: 960px) { .phr3-price__grid { grid-template-columns: minmax(0, 1fr); } .phr3-card { max-width: 540px; } }
@media (max-width: 560px) { .phr3-ways { grid-template-columns: minmax(0, 1fr); } .phr3-card { padding: 26px 20px 22px; } }

/* ---------- why ETG ---------- */
.phr3-why__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.phr3-why__facts { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.phr3-why__facts li { padding: 16px 16px 14px; border-radius: 16px; background: #fff; border: 1px solid #E2E8F0; }
.phr3-why__facts b { display: block; font: 800 34px/1.1 var(--f-display); letter-spacing: -.03em; color: #1D3F8F; padding-bottom: 2px; }
.phr3-why__facts span { font-size: 14px; line-height: 1.45; color: #475569; }
.phr3-why__p { margin: 18px 0 0; font-size: 16.5px; line-height: 1.65; color: #334155; max-width: 62ch; }
.phr3-why .pg-trustnote a { color: #0A6FA8; font-weight: 600; }
.phr3-why__badges { list-style: none; margin: 0; padding: 22px; display: grid; gap: 10px; border-radius: 24px; background: #F3F7F9; }
.phr3-why__badges li { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 14px; background: #fff; border: 1px solid #E2E8F0; }
.phr3-why__badges img { width: auto; height: 32px; max-width: 74px; object-fit: contain; flex: none; }
.phr3-why__badges span { font-size: 13.5px; line-height: 1.35; color: #475569; }
.phr3-why__badges b { display: block; font: 700 15px/1.3 var(--f-body); color: #082238; }
@media (max-width: 900px) { .phr3-why__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .phr3-why__facts { grid-template-columns: minmax(0, 1fr); } }

/* Zoho mark (square Simple Icons viewBox, wide wordmark inside): crop the empty top and bottom */
.phr3-hero .pg-trust__badge img[src$="logos/zoho.svg"], .phr3-why__badges img[src$="logos/zoho.svg"] { width: 74px; max-width: none; height: 32px; object-fit: cover; }

/* contrast (>= 4.5:1) for shared small text on this page's tinted backgrounds */
.phr3-hero .pg-trust__badge span, .phr3-hero .pg-trust__people em { color: #4B5B70; }
.phr3-ss__note { color: #475569; }
.phr3-build .hp-kick__t { color: #D3E5F2; }
.phr3-start .crm-audit__where { color: #475569; }