/* TaskLive family site — one stylesheet for the family pages, Ganav and SnapBill.
   Tokens follow SnapBill-Product-content/00-brand-and-voice.md (shared TaskLive family tokens). */
:root{
  --navy:#0b1220; --navy-2:#141d33; --navy-3:#1f2a47;
  --blue:#0e84c4; --blue-700:#0a6a9e; --blue-100:#e3f1fa;
  --green:#7ab901; --green-hi:#9bd834;
  --ink:#1b1f2a; --ink-70:#4b5262; --ink-55:#6b7284; --ink-30:#a9aeba;
  --bg:#ffffff; --bg-2:#f5f7fa; --line:#e2e6ec; --line-2:#c9d0da;
  --font-h:"Archivo",system-ui,sans-serif; --font-b:"IBM Plex Sans",system-ui,sans-serif; --font-m:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --wrap:1180px; --pad:clamp(20px,5vw,64px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-b);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;text-wrap:pretty}
img,svg{max-width:100%;display:block}
img[width]{height:auto}
a{color:var(--blue-700);text-underline-offset:3px}
a:hover{color:var(--blue)}
h1,h2,h3,h4{font-family:var(--font-h);font-weight:800;letter-spacing:-.015em;line-height:1.1;margin:0;text-wrap:balance}
h1{font-size:clamp(36px,4.6vw,60px);line-height:1.04;letter-spacing:-.02em}
h2{font-size:clamp(26px,3vw,38px)}
h3{font-size:20px;line-height:1.3;letter-spacing:-.01em}
p{margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.skip{position:absolute;left:-999px;top:8px;background:var(--blue);color:#fff;padding:8px 12px;z-index:100}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.eyebrow{font-family:var(--font-h);font-weight:600;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-700);margin:0 0 18px}
.muted{color:var(--ink-70)}
.note{font-size:13.5px;line-height:20px;color:var(--ink-55);margin-top:14px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:10px 18px;border-radius:6px;font-family:var(--font-h);font-weight:800;font-size:14.5px;line-height:1.2;text-decoration:none;border:1px solid transparent;cursor:pointer;white-space:nowrap}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-700);color:#fff}
.btn-ghost{border-color:var(--line-2);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink);color:var(--ink)}
.btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.btns-end{justify-content:flex-end}   /* after a left-to-right card row the eye ends bottom-right; the action sits there */
.hero .btn-ghost{border-color:rgba(255,255,255,.35);color:#fff}
.hero .btn-ghost:hover{border-color:#fff}

/* header */
.hdr{position:sticky;top:0;z-index:30;background:var(--navy);color:#fff;border-bottom:1px solid rgba(255,255,255,.08)}
.hdr-in{display:flex;align-items:center;gap:28px;min-height:68px}
.wordmark{display:flex;align-items:baseline;gap:12px;color:#fff;text-decoration:none;margin-right:auto}
.wm{font-family:var(--font-h);font-weight:800;font-size:24px;letter-spacing:-.02em;display:inline-flex;align-items:baseline}
.wm-v{width:.78em;height:.78em;color:var(--green);margin:0 -.04em 0 -.02em;transform:translateY(.02em)}
.wm-sm{font-size:20px}
.wm-product{font-family:var(--font-h);font-weight:800;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--green-hi);padding-left:12px;border-left:1px solid rgba(255,255,255,.25)}
.nav{display:flex;align-items:center;gap:22px;font-size:15px}
.nav>a,.nav .has-menu>a{color:rgba(255,255,255,.88);text-decoration:none;min-height:44px;display:inline-flex;align-items:center;gap:4px}
.nav>a:hover,.nav .has-menu>a:hover{color:#fff}
.nav>a[aria-current="page"]{color:var(--green-hi)}
.nav-family{font-family:var(--font-h);font-weight:800;color:#fff!important;padding-right:18px;border-right:1px solid rgba(255,255,255,.2)}
.nav-switch{color:rgba(255,255,255,.6)!important;font-size:14px;padding-left:18px;border-left:1px solid rgba(255,255,255,.2)}
.nav-cta{margin-left:6px}
.has-menu{position:relative;display:inline-flex;align-items:center}
.menu{display:none;position:absolute;top:100%;left:-14px;padding-top:8px;z-index:40}
.menu>div{background:#fff;color:var(--ink);min-width:260px;border-radius:8px;box-shadow:0 20px 50px rgba(11,18,32,.25);padding:8px;display:flex;flex-direction:column}
.menu a{color:var(--ink);text-decoration:none;padding:10px 12px;border-radius:6px;font-size:14.5px}
.menu a:hover{background:var(--bg-2);color:var(--blue-700)}
.has-menu:hover .menu,.has-menu:focus-within .menu{display:block}
.nav-toggle{display:none;margin-left:auto;width:44px;height:44px;border:1px solid rgba(255,255,255,.25);background:transparent;color:#fff;border-radius:6px;cursor:pointer;align-items:center;justify-content:center}

/* hero */
.hero{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:40px 40px}
.hero-in{position:relative;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px clamp(32px,5vw,80px);align-items:center;padding-top:72px;padding-bottom:72px}
.hero:not(.has-image) .hero-in{grid-template-columns:minmax(0,1fr)}
.hero:not(.has-image) .hero-text{max-width:62ch}
.hero .eyebrow{color:var(--green-hi)}
.hero h1{max-width:18ch}
.hero .lead{font-size:17.5px;line-height:1.65;color:rgba(255,255,255,.82);margin-top:24px;max-width:56ch}
.hero .lead p+p{margin-top:12px}
.hero .lead ul{padding-left:20px;margin:0}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:26px 0 0}
.chips li{font-size:13px;line-height:18px;padding:7px 12px;border:1px solid rgba(255,255,255,.22);border-radius:999px;color:rgba(255,255,255,.85)}
.chips li::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--green);margin-right:8px;vertical-align:1px}
.hero .note{color:rgba(255,255,255,.6)}
.hero-fig{margin:0;border-radius:12px;overflow:hidden;box-shadow:0 30px 60px rgba(0,0,0,.45);background:var(--navy-2)}
.hero-fig img{width:100%;height:auto;display:block}
.hero-plain{background:var(--bg);color:var(--ink)}
.hero-plain::before{display:none}
.hero-plain .eyebrow{color:var(--blue-700)}
.hero-plain .lead{color:var(--ink-70)}
.hero-plain .hero-in{padding-top:56px;padding-bottom:24px}
.hero-plain .btn-ghost{border-color:var(--line-2);color:var(--ink)}

/* sections */
.sec{padding:72px 0;border-top:1px solid var(--line)}
.sec:first-of-type{border-top:0}
.sec-head{max-width:64ch;margin-bottom:36px}
.sec-head h2+p{margin-top:16px}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:28px clamp(32px,5vw,96px);align-items:start}
.split-head .muted{margin-top:16px;font-size:15.5px}
.split-body>p,.prose>p{max-width:68ch}
.prose{max-width:76ch}
.prose+.prose,.prose+.list,.list+.prose,.prose+.table-wrap,.table-wrap+.prose,.prose+.grid,.grid+.prose,.list+.grid,.callout+.prose,.prose+.callout,.grid+.grid,.table-wrap+.grid,.grid+.table-wrap,.table-wrap+.table-wrap,.list+.list,.list+.table-wrap,.callout+.grid,.grid+.callout{margin-top:28px}
.prose p+p,.split-body p+p{margin-top:14px}
.prose p,.split-body p,.tile p,.cells li,.callout p,td,th,.list li{font-size:15.5px;line-height:1.65}
.split-body p,.prose p{color:var(--ink-70)}
.prose strong,.split-body strong,.tile strong{color:var(--ink);font-weight:600}
.prose h3,.split-body h3{margin:24px 0 8px}
.prose h4,.split-body h4{font-size:16px;margin:18px 0 6px}
.prose ul,.prose ol,.list ul,.list ol,.split-body ul,.split-body ol,.tile ul,.tile ol{padding-left:0;margin:0;list-style:none}
.prose li,.list li,.split-body li,.tile li{position:relative;padding:8px 0 8px 22px;border-bottom:1px solid var(--line);color:var(--ink-70)}
.prose li::before,.list li::before,.split-body li::before,.tile li::before{content:"";position:absolute;left:0;top:16px;width:9px;height:9px;background:var(--green);border-radius:2px}
.prose ol,.list ol,.split-body ol,.tile ol{counter-reset:n}
.prose ol>li,.list ol>li,.split-body ol>li,.tile ol>li{padding-left:34px;counter-increment:n}
.prose ol>li::before,.list ol>li::before,.split-body ol>li::before,.tile ol>li::before{content:counter(n);background:none;width:auto;height:auto;top:8px;font-family:var(--font-h);font-weight:800;color:var(--blue-700);font-size:14px}
.tile li{font-size:14.5px;padding:6px 0 6px 20px}
.tile li::before{top:13px;width:8px;height:8px}
.prose code,.tile code,td code,.list code{font-family:var(--font-m);font-size:.9em;background:var(--bg-2);border:1px solid var(--line);border-radius:4px;padding:1px 5px}
.prose pre{background:var(--navy);color:#e6ebf5;padding:20px 24px;border-radius:8px;overflow:auto;font-family:var(--font-m);font-size:12.5px;line-height:1.6}
.prose pre code{background:none;border:0;padding:0;color:inherit}
.prose a,.split-body a,.tile a,td a{color:var(--blue-700);font-weight:500}
.callout{margin:0;padding:22px 26px;border-left:4px solid var(--green);background:var(--bg-2);border-radius:0 8px 8px 0;max-width:76ch}
.callout p{font-family:var(--font-h);font-weight:600;font-size:18px;line-height:1.45;color:var(--ink)}
.callout p+p{margin-top:8px;font-family:var(--font-b);font-weight:400;font-size:14.5px;color:var(--ink-55)}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:8px}
table{border-collapse:collapse;width:100%;font-size:14.5px;line-height:1.5}
th{font-family:var(--font-h);font-weight:600;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;text-align:left;color:var(--ink-55);background:var(--bg-2);padding:12px 14px;border-bottom:1px solid var(--line)}
td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink-70)}
tr:last-child td{border-bottom:0}
td:first-child,th:first-child{padding-left:18px}
td strong{color:var(--ink)}

/* grids and tiles */
.grid{display:grid;gap:0;border-top:2px solid var(--line-2);list-style:none;padding:0;margin:0}
.grid>.tile,.grid>li{border-bottom:1px solid var(--line);border-right:1px solid var(--line)}
.grid-1>*,.grid-2>*:nth-child(2n),.grid-3>*:nth-child(3n),.grid-4>*:nth-child(4n){border-right:0}
.grid-1{grid-template-columns:minmax(0,1fr)}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.tile,.cells li{background:var(--bg);padding:26px 24px 28px;display:flex;flex-direction:column;gap:10px;min-width:0}
.tile h3{padding-left:16px;border-left:3px solid var(--green)}
.tile p{color:var(--ink-70);font-size:14.5px}
.tile p+p{margin-top:8px}
.tile-links{margin-top:auto;padding-top:6px}
.tile-links a{font-family:var(--font-h);font-weight:800;font-size:14px;text-decoration:none;margin-right:14px}
.cells li{display:block;font-size:14.5px;color:var(--ink-70)}
.cells li strong{display:block;color:var(--ink);font-family:var(--font-h);font-weight:800;font-size:15.5px;margin-bottom:4px}
.sec-note{padding:32px 0}
.sec-note p{font-size:14px;color:var(--ink-55);max-width:76ch}

/* form */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 22px}
.field{display:flex;flex-direction:column;gap:6px}
.field-full{grid-column:1/-1}
.field label{font-size:13px;color:var(--ink-55);letter-spacing:.02em}
.field input,.field select,.field textarea{font:inherit;font-size:15px;padding:11px 12px;border:1px solid var(--line-2);border-radius:6px;background:#fff;color:var(--ink);width:100%}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue);outline:2px solid var(--blue-100)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form{position:relative}
.form-error{margin:0 0 18px;padding:12px 16px;border-left:3px solid #c0392b;background:#fdecea;font-size:14.5px}
.form-status{margin:14px 0 0;font-size:14.5px;font-weight:600;color:#3f6b00}.form-status.is-error{color:#c0392b}.form-status:empty{display:none}

/* footer */
.ftr{background:var(--navy);color:rgba(255,255,255,.8);margin-top:24px}
.ftr-top{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:40px clamp(24px,4vw,64px);padding:64px 0 40px;border-bottom:1px solid rgba(255,255,255,.12)}
.ftr-brand p{font-size:14.5px;line-height:1.6;margin-top:16px;max-width:38ch;color:rgba(255,255,255,.7)}
.ftr-brand .wm{color:#fff}
.ftr a{color:rgba(255,255,255,.85)}
.ftr a:hover{color:#fff}
.ftr-col h3{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--green-hi);margin-bottom:14px;font-weight:600;font-family:var(--font-h)}
.ftr-col a{display:block;text-decoration:none;font-size:14.5px;padding:5px 0}
.ftr-bottom{display:flex;flex-wrap:wrap;gap:12px 28px;padding:22px 0 28px;font-size:12.5px;color:rgba(255,255,255,.55)}
.ftr-bottom a{color:rgba(255,255,255,.7)}

/* family home */
.home-products{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.pcard{display:flex;flex-direction:column;border:2px solid var(--line);border-radius:12px;overflow:hidden;background:var(--bg);color:inherit;text-decoration:none}
.pcard:hover{border-color:var(--blue)}
.pcard-img{aspect-ratio:951/665;background:var(--navy);overflow:hidden}
.pcard-img img{width:100%;height:100%;object-fit:cover}
.pcard-body{padding:26px 28px 30px;display:flex;flex-direction:column;gap:10px}
.pcard-body .mark{display:flex;align-items:center;gap:12px}
.pcard-body .mark img{width:40px;height:40px;object-fit:contain}
.pcard-body h2{font-size:26px}
.pcard-body p{color:var(--ink-70)}
.pcard-body .cta{font-family:var(--font-h);font-weight:800;color:var(--blue-700);margin-top:auto;padding-top:8px}

@media (max-width:960px){
  .hero-in{grid-template-columns:minmax(0,1fr)}
  .hero-fig{max-width:520px}
  .split{grid-template-columns:minmax(0,1fr)}
  .grid-3,.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ftr-top{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .nav-toggle{display:inline-flex}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--navy);padding:8px var(--pad) 20px;flex-direction:column;align-items:stretch;gap:0;border-bottom:1px solid rgba(255,255,255,.12)}
  .nav.open{display:flex}
  .nav>a,.nav .has-menu>a{padding:8px 0}
  .nav-family,.nav-switch{border:0!important;padding-left:0!important}
  .has-menu{flex-direction:column;align-items:stretch}
  .menu{display:block;position:static;padding:0 0 8px 12px}
  .menu>div{background:transparent;box-shadow:none;padding:0}
  .menu a{color:rgba(255,255,255,.75)}
  .nav-cta{align-self:flex-start;margin-top:10px}
  .hero-in{padding-top:48px;padding-bottom:48px}
  .sec{padding:52px 0}
  .grid-2,.grid-3,.grid-4{grid-template-columns:minmax(0,1fr)}
  .grid>.tile,.grid>li{border-right:0}
  .btns-end{justify-content:flex-start}
  .features,.features.cols-3{grid-template-columns:minmax(0,1fr)}
  .home-products,.form-grid,.ftr-top{grid-template-columns:minmax(0,1fr)}
  .btn{white-space:normal}
}

/* Ganav standalone skin (www.ganav.ai): the Ganav mark's navy and green carry the identity */
.site-ganav{--blue:#4f7a00;--blue-700:#3d5f00;--blue-100:#eef6df;--green-hi:#9bd834}
.site-ganav .btn-primary{background:#5d8f00;color:#fff}
.site-ganav .btn-primary:hover{background:#4f7a00}
.site-ganav .hero .btn-primary{background:var(--green);color:#0b1220}
.site-ganav .hero .btn-primary:hover{background:var(--green-hi);color:#0b1220}
.site-ganav .hero::before{background-image:radial-gradient(rgba(122,185,1,.16) 1px,transparent 1px);background-size:28px 28px}
.site-ganav .nav>a[aria-current="page"]{color:var(--green-hi)}
.wordmark-ganav{display:inline-flex;align-items:center;gap:12px;color:#fff;text-decoration:none}
.gv-mark{width:40px;height:40px;border-radius:8px}
.gv-name{font-family:var(--font-h);font-weight:800;font-size:24px;letter-spacing:-.02em}
.gv-by{font-family:var(--font-h);font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--green-hi);padding-left:12px;border-left:1px solid rgba(255,255,255,.25)}
.ftr .wordmark-ganav .gv-name{font-size:20px}

/* feature lists: label + explanation, two columns when the section is wide */
.list:has(.features),.prose:has(.features),.prose:has(pre){max-width:none}
.features{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px}
.features.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.split-body .btn-primary,.split-body .btn-primary:hover{color:#fff}
.list .features li,.prose .features li,.tile .features li{padding:12px 0 13px 22px}
.features li::before{top:19px}
.features .fl{display:block;font-family:var(--font-h);font-weight:700;font-size:15.5px;color:var(--ink);letter-spacing:-.01em;margin-bottom:3px}
.features li>span{display:block;font-size:14.5px;line-height:1.6;color:var(--ink-70)}
.grid-2 .features,.grid-3 .features,.grid-4 .features{grid-template-columns:minmax(0,1fr)}
.fit{border:0!important}

/* sub-headline: a lone titled paragraph under a section heading */
.subhead{max-width:72ch;margin:0 0 24px}
.table-wrap+.subhead,.prose+.subhead,.list+.subhead,.grid+.subhead,.callout+.subhead{margin-top:44px}
.subhead h3{font-size:22px;margin-bottom:10px}
.subhead p{font-size:16.5px;line-height:1.6;color:var(--ink-70)}

.ftr-etym{font-size:13px;line-height:1.5;color:rgba(255,255,255,.55);margin-top:12px}
.ftr-etym strong{color:rgba(255,255,255,.8);font-weight:600}

/* fit cards (Fits best / Not built for) */
.fit{padding:28px 28px 26px}
.fit h3{border-left:0;padding-left:0;display:flex;align-items:center;gap:12px;font-size:19px}
.fit h3::before{content:"";flex:none;width:30px;height:30px;border-radius:50%;background-repeat:no-repeat;background-position:center;background-size:16px 16px}
.fit-yes{background:#f4f9e8}
.fit-yes h3::before{background-color:#6aa300;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5.2l2.2 2.2L8 3' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.fit-no{background:#fff7ee}
.fit-no h3::before{background-color:#e08a3a;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2.5 2.5l5 5M7.5 2.5l-5 5' stroke='%23fff' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E")}
.fit li{padding:8px 0 8px 28px;font-size:15px;color:var(--ink);border-bottom-color:rgba(27,31,42,.08)}
.fit li::before{width:16px;height:16px;border-radius:50%;top:12px;background-repeat:no-repeat;background-position:center;background-size:10px 10px}
.fit-yes li::before{background-color:#6aa300;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5.2l2.2 2.2L8 3' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.fit-no li::before{background-color:#e08a3a;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2.5 2.5l5 5M7.5 2.5l-5 5' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E")}
.fit-no li{color:var(--ink-70)}
.grid:has(.fit){border-radius:12px;overflow:hidden;border:1px solid var(--line-2);background:var(--line-2)}
.grid:has(.fit)+.callout{margin-top:28px}

/* persona rows (who -> the pain -> with Ganav) */
.grid:has(.persona){grid-template-columns:minmax(0,1fr)}
.persona{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:16px 40px;align-items:start;padding:30px 28px 28px}
.persona h3{border-left:0;padding-left:0;font-size:20px}
.pwho{display:flex;align-items:flex-start;gap:14px;min-width:0}
.picon{flex:none;width:44px;height:44px;border-radius:10px;background:var(--navy);color:var(--green-hi);display:inline-flex;align-items:center;justify-content:center}
.picon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ptag{display:inline-block;margin-top:6px;font-family:var(--font-h);font-weight:600;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-55)}
.pdesc{font-style:italic;color:var(--ink-55);font-size:14px;line-height:1.5;margin-top:10px}
.pflow{display:grid;grid-template-columns:minmax(0,1fr) 34px minmax(0,1.35fr);gap:0 6px;align-items:stretch;min-width:0}
.pblock{padding:14px 18px 16px;border-radius:8px;border:1px solid transparent}
.pblock p{font-size:14.5px;line-height:1.55;color:var(--ink-70)}
.pblock p::first-letter{text-transform:uppercase}
.pblock.pain{background:#fff6ec;border-color:#f2d9bd}
.pblock.with{background:#f2f8e4;border-color:#d3e6a6}
.plabel{display:flex;align-items:center;gap:7px;font-family:var(--font-h);font-weight:800;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:7px}
.plabel::before{content:"";flex:none;width:16px;height:16px;border-radius:50%;background-repeat:no-repeat;background-position:center;background-size:10px 10px}
.pblock.pain .plabel{color:#9a5312}
.pblock.pain .plabel::before{background-color:#e08a3a;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2.5 2.5l5 5M7.5 2.5l-5 5' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E")}
.pblock.with .plabel{color:#3d5f00}
.pblock.with .plabel::before{background-color:#6aa300;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5.2l2.2 2.2L8 3' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.parrow{display:flex;align-items:center;justify-content:center;color:var(--ink-30)}
.parrow svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pnote{grid-column:2;font-size:13px;color:var(--ink-55);font-style:italic;margin-top:-4px}
@media (max-width:1000px){
  .persona{grid-template-columns:minmax(0,1fr);gap:18px}
  .pnote{grid-column:1}
}
@media (max-width:640px){
  .pflow{grid-template-columns:minmax(0,1fr);gap:6px 0}
  .parrow{height:28px}
  .parrow svg{transform:rotate(90deg)}
}