/* The platform: the home page's feature grid, the platform index (/features/) and the feature pages share the drawn
   vignettes below (illustrative demo data, never product screenshots). Feature page sections follow. */
/* bento */
.bento{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(220px,auto);gap:16px;margin-top:64px}
.tile{position:relative;border-radius:var(--r-lg);padding:28px;background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid var(--edge);overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;transition:transform .5s var(--ease),border-color .35s,box-shadow .35s}
.tile::before{content:"";position:absolute;inset:0;background:radial-gradient(260px circle at var(--mx,80%) var(--my,0%),var(--glow),transparent 65%);opacity:0;transition:opacity .4s}
.tile:hover{transform:translateY(-5px);border-color:var(--edge-2);box-shadow:0 30px 60px rgba(0,0,0,.4)}
.tile:hover::before{opacity:1}
.tile>*{position:relative}
.tile h3{color:#fff}
.tile p{color:var(--text-2);font-size:var(--fs-body);max-width:44ch}
.tile .vig{flex:1;min-height:120px;margin-bottom:6px}
.t-crm{grid-column:span 4}.t-bill{grid-column:span 2;grid-row:span 2}.t-camp{grid-column:span 2}.t-sched{grid-column:span 2}.t-staff{grid-column:span 3}.t-portal{grid-column:span 3}
@media (max-width:920px){.bento{grid-template-columns:1fr 1fr}.t-crm,.t-bill,.t-camp,.t-sched,.t-staff,.t-portal{grid-column:span 2;grid-row:auto}}
/* vignettes (all visible at rest; they settle into place when scrolled to) */
.timeline{display:grid;gap:8px}
.tl{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;background:rgba(8,18,15,.5);border:1px solid var(--edge);border-radius:12px;padding:10px 12px;font-size:var(--fs-sm);transform:translateX(-16px);transition:transform .8s var(--ease)}
.tl:nth-child(2){transition-delay:.12s}.tl:nth-child(3){transition-delay:.24s}
.in .tl{transform:none}
.tl .k{font-size:var(--fs-cap);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-2)}
.tl .k.warn{color:#e9b458}.tl .k.cool{color:#f28b7d}
.tl span{color:var(--text-2)}.tl time{color:var(--text-3);font-size:var(--fs-cap)}
.bigring{display:flex;flex-direction:column;align-items:flex-start;gap:14px;height:100%}
.ring{--p:0;width:150px;height:150px;border-radius:50%;background:conic-gradient(var(--accent-2) 0 calc(var(--p)*1%),rgba(255,255,255,.08) calc(var(--p)*1%) 100%);display:grid;place-items:center;box-shadow:0 0 60px var(--glow);transition:--p 1.8s var(--ease) .2s}
.in .ring{--p:71}
.ring b{width:118px;height:118px;border-radius:50%;background:var(--bg-3);display:grid;place-items:center;font-size:32px;font-weight:700;color:#fff;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1}
.ring b small{display:block;font-size:var(--fs-cap);color:var(--text-3);font-weight:600;letter-spacing:.08em;text-align:center;margin-top:4px}
.bigring .row{display:flex;justify-content:space-between;width:100%;font-size:var(--fs-sm);color:var(--text-2);border-top:1px solid var(--edge);padding-top:8px}
.bigring .row b{color:#fff;font-weight:600}
.steps-v{display:grid;gap:8px;position:relative}
.steps-v::before{content:"";position:absolute;left:13px;top:10px;bottom:10px;width:2px;background:linear-gradient(var(--accent-2),transparent);transform:scaleY(0);transform-origin:top;transition:transform 1s var(--ease)}
.in .steps-v::before{transform:scaleY(1)}
.steps-v div{display:flex;align-items:center;gap:12px;font-size:var(--fs-sm);color:var(--text-2)}
.steps-v i{width:28px;height:28px;border-radius:50%;background:var(--bg-3);border:2px solid var(--accent-2);display:inline-grid;place-items:center;font-style:normal;font-size:var(--fs-cap);font-weight:700;color:var(--accent-2);position:relative;flex:0 0 28px;transform:scale(.7);transition:transform .6s var(--spring)}
.steps-v div:nth-child(2) i{transition-delay:.2s}.steps-v div:nth-child(3) i{transition-delay:.4s}
.in .steps-v i{transform:scale(1)}
.week{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;height:100%;align-content:start}
.week div{display:grid;gap:5px}
.week span{height:16px;border-radius:5px;background:rgba(95,214,194,.2);border-left:3px solid var(--accent-2);transform:scaleX(.2);transform-origin:left;transition:transform .9s var(--ease)}
.week div:nth-child(2) span{transition-delay:.08s}.week div:nth-child(3) span{transition-delay:.16s}.week div:nth-child(4) span{transition-delay:.24s}.week div:nth-child(5) span{transition-delay:.32s}
.in .week span{transform:scaleX(1)}
.week span.o{background:rgba(233,180,88,.2);border-color:#e9b458}.week span.p{background:rgba(242,139,125,.2);border-color:#f28b7d}
.tasks{display:grid;gap:8px}
.tasks div{display:flex;align-items:center;gap:10px;font-size:var(--fs-sm);color:var(--text-2);background:rgba(8,18,15,.5);border:1px solid var(--edge);border-radius:10px;padding:8px 12px;transform:translateX(-12px);transition:transform .8s var(--ease)}
.tasks div:nth-child(2){transition-delay:.1s}.tasks div:nth-child(3){transition-delay:.2s}
.in .tasks div{transform:none}
.tasks i{width:16px;height:16px;border-radius:5px;border:2px solid var(--edge-2);display:inline-grid;place-items:center;flex:0 0 16px}
.tasks i.on{background:var(--accent-2);border-color:var(--accent-2)}
.tasks i.on::after{content:"";width:8px;height:4px;border-left:2px solid #04120f;border-bottom:2px solid #04120f;transform:rotate(-45deg) translate(1px,-1px) scale(0);transition:transform .4s var(--spring) .6s}
.in .tasks i.on::after{transform:rotate(-45deg) translate(1px,-1px) scale(1)}
.tasks .done{text-decoration:line-through;color:var(--text-3)}
.tasks .who{margin-left:auto;font-size:var(--fs-cap);color:var(--text-3)}
.phone{width:150px;height:200px;margin:0 auto;border-radius:26px;background:var(--bg-3);border:6px solid #22342f;padding:16px 12px;display:grid;gap:8px;align-content:start;box-shadow:0 20px 40px rgba(0,0,0,.45);transform:rotate(-3deg);transition:transform .8s var(--ease)}
.in .phone{transform:rotate(0)}
.phone>*{transform:translateY(12px);transition:transform .7s var(--ease)}
.phone>*:nth-child(2){transition-delay:.08s}.phone>*:nth-child(3){transition-delay:.16s}.phone>*:nth-child(4){transition-delay:.24s}.phone>*:nth-child(5){transition-delay:.32s}
.in .phone>*{transform:none}
.phone span{height:9px;border-radius:5px;background:rgba(255,255,255,.1)}
.phone span.w{width:60%}.phone .sl{height:26px;border-radius:8px;background:rgba(95,214,194,.16);border-left:3px solid var(--accent-2)}
.phone .cta{height:26px;padding:0;min-height:0;border-radius:8px;background:var(--accent);margin-top:4px} /* padding:0 — the home page's closing-section rule (.cta) also matches this bar */

/* tiles that are links, and the "Learn more" row under a tile */
.bento a.tile{text-decoration:none;color:inherit}
.tile h3 a{color:#fff;text-decoration:none}.tile h3 a:hover{color:var(--accent-2)}
.tile .tlinks{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.tile .more{color:var(--accent-2);font-weight:600;font-size:var(--fs-sm);text-decoration:none}
.pindex .bento{margin-top:0}.pindex .t-text{grid-column:span 2}.pindex .t-bill{grid-row:auto}
.pindex .tile p{max-width:none}
@media (max-width:920px){.pindex .t-text{grid-column:span 2}}
/* texting vignette: a thread the way it reads on the member's record */
.chat{display:grid;gap:8px}
.chat .from{font-size:var(--fs-cap);letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin-bottom:2px}
.chat .b{max-width:86%;padding:9px 12px;border-radius:14px 14px 14px 4px;font-size:var(--fs-sm);color:var(--text-2);background:rgba(8,18,15,.55);border:1px solid var(--edge);transform:translateY(10px);transition:transform .7s var(--ease)}
.chat .b.me{margin-left:auto;border-radius:14px 14px 4px 14px;background:rgba(95,214,194,.16);border-color:rgba(95,214,194,.3);color:#fff}
.chat .b time{display:block;font-size:var(--fs-cap);color:var(--text-3);margin-top:3px}
.chat .b:nth-child(3){transition-delay:.12s}.chat .b:nth-child(4){transition-delay:.24s}
.in .chat .b{transform:none}

/* feature page hero: copy beside a glass panel that holds the vignette */
.fhero{position:relative;padding-block:72px 84px;overflow:clip;isolation:isolate;background:var(--bg)}
.fhero .aurora{position:absolute;inset:-10%;z-index:-2;pointer-events:none;filter:blur(70px);opacity:.75}
.fhero .aurora b{position:absolute;border-radius:50%;display:block;width:52vw;height:52vw;max-width:820px;max-height:820px;right:-12%;top:-34%;background:radial-gradient(circle,rgba(0,150,136,.55),transparent 62%)}
.fhero .grain{z-index:-1}
.fhero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.fhero h1{color:#fff;font-size:clamp(38px,4.6vw,58px);margin-top:16px;text-wrap:balance}
.fhero h1 em.s{color:var(--accent-2)}
.fhero .lead{margin-top:20px;max-width:56ch}
.fhero .ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.fhero .trust{display:flex;gap:18px;flex-wrap:wrap;margin-top:22px;font-size:var(--fs-sm);color:var(--text-3)}
.fhero .trust span{display:flex;gap:8px;align-items:center}.fhero .trust i{width:8px;height:8px;border-radius:50%;background:var(--accent-2);flex:0 0 8px}
.fhero .panel{position:relative;border-radius:var(--r-lg);padding:26px 28px 28px;background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.03));border:1px solid var(--edge-2);box-shadow:0 40px 90px rgba(0,0,0,.5),0 0 80px var(--glow);backdrop-filter:blur(18px);transform:perspective(1400px) rotateY(-6deg);transition:transform .6s var(--ease);min-height:300px;display:grid;align-content:center}
.fhero .panel:hover{transform:perspective(1400px) rotateY(0)}
.fhero .panel .cap{font-size:var(--fs-cap);letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);margin-bottom:16px}
.fhero .panel .vig{min-height:180px}
.fhero .panel .ring{width:170px;height:170px}.fhero .panel .ring b{width:134px;height:134px;font-size:36px}
.fhero .panel .phone{width:190px;height:250px}
.fhero .panel .week span{height:22px}
@media (max-width:920px){.fhero{padding-block:52px 64px}.fhero .wrap{grid-template-columns:1fr;gap:28px}.fhero .panel{transform:none}}

/* what it does: six cards */
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
.fcard{background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px;box-shadow:0 16px 36px rgba(14,25,23,.05);transition:transform .4s var(--ease),box-shadow .3s}
.fcard:hover{transform:translateY(-4px);box-shadow:0 30px 60px rgba(14,25,23,.12)}
.fcard .ic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:rgba(19,152,138,.12);color:var(--accent-deep);margin-bottom:16px}
.fcard .ic svg{width:22px;height:22px}
.fcard h3{font-size:var(--fs-h4);color:var(--ink);line-height:1.25}
.fcard p{margin-top:8px;color:var(--ink-2);font-size:var(--fs-sm);line-height:1.55}
@media (max-width:920px){.fgrid{grid-template-columns:1fr 1fr}}@media (max-width:640px){.fgrid{grid-template-columns:1fr}}

/* how it works: three steps, then the chapter of the product tour */
.fsteps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
.fsteps>div{padding:24px;border-radius:20px;background:var(--glass);border:1px solid var(--edge)}
.fsteps .n{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:rgba(95,214,194,.12);border:1px solid rgba(95,214,194,.28);color:var(--accent-2);font-weight:700}
.fsteps b{display:block;color:#fff;margin-top:14px;line-height:1.3}
.fsteps p{margin-top:6px;color:var(--text-2);font-size:var(--fs-sm);line-height:1.5}
.fvideo{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center;margin-top:48px}
.fvideo .player{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--edge-2);box-shadow:0 30px 70px rgba(0,0,0,.45)}
.fvideo .player .yt{border-radius:0}
.fvideo h3{color:#fff;margin-top:12px;font-size:var(--fs-h4)}
.fvideo ul{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:10px}
.fvideo li{display:flex;gap:10px;color:var(--text-2);font-size:var(--fs-sm);line-height:1.5}
.fvideo li i{flex:0 0 8px;width:8px;height:8px;border-radius:50%;background:var(--accent-2);margin-top:7px}
@media (max-width:920px){.fsteps{grid-template-columns:1fr}.fvideo{grid-template-columns:1fr;gap:24px}}

/* proof: one number, one quote; then the other features */
.fproof{display:grid;grid-template-columns:.8fr 1.2fr;gap:20px;margin-top:40px;align-items:stretch}
.fproof .stat{padding:28px;border-radius:22px;background:linear-gradient(135deg,#25c2b0,#13988a);color:#04120f;display:flex;flex-direction:column;justify-content:center}
.fproof .stat b{display:block;font-size:40px;font-weight:700;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.fproof .stat span{display:block;margin-top:10px;font-size:var(--fs-sm);color:rgba(4,18,15,.75);line-height:1.45}
.fproof .stat a{display:inline-block;margin-top:14px;color:#04120f;font-weight:600;font-size:var(--fs-sm)}
.fproof .quote{margin-top:0}
.fmore{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:28px}
.fmore a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 18px;border-radius:16px;background:#fff;border:1px solid var(--line);color:var(--ink);text-decoration:none;font-weight:600;transition:transform .3s var(--ease),box-shadow .3s}
.fmore a:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(14,25,23,.08)}
.fmore a small{display:block;font-weight:400;color:var(--ink-3);font-size:var(--fs-xs);margin-top:2px}
.fmore a .go{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:rgba(19,152,138,.12);color:var(--accent-deep);flex:0 0 28px}
.fmore a .go svg{width:14px;height:14px}
@media (max-width:920px){.fproof{grid-template-columns:1fr}.fmore{grid-template-columns:1fr}}
/* the platform index hero carries two buttons */
.ghero .ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}