/* Home family: homepage and product pages. Values follow /kipwise-agent-meet.html. */

/* hero: meet treatment, with the lime tile gathering inside the homepage headline */
.hero .launch{height:auto;min-height:34px;padding:6px 14px;text-align:left}
.hero--home h1{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;column-gap:.2em;row-gap:.04em}
.hmark-t{display:inline-grid;place-items:center;width:.98em;height:.98em;border-radius:25%;background:var(--lime);flex:none;box-shadow:0 .08em .22em -.06em rgba(90,110,0,.45)}
.hmark{width:100%;height:100%;display:block;overflow:visible}
.hmark path{fill:#0f0f12}
.hmark .kc{animation:gather 1.05s cubic-bezier(.2,.9,.25,1.15) both;animation-delay:calc(.18s + var(--i)*.07s);transform-box:view-box;transform-origin:200px 200px}
.hmark .kc path{animation:breathe 3.4s ease-in-out infinite;animation-delay:calc(1.6s + var(--i)*.18s)}
@keyframes gather{from{transform:translate(calc(var(--dx)*140px),calc(var(--dy)*140px)) rotate(50deg);opacity:0}to{transform:none;opacity:1}}
@keyframes breathe{50%{transform:translate(calc(var(--dx)*-9px),calc(var(--dy)*-9px))}}
.hero__note{margin-top:18px;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;font:500 12px/1.4 var(--mono);letter-spacing:.04em;color:var(--ink-3)}
.hero__note b{color:var(--ink-2);font-weight:600}
.stars{color:var(--ink);letter-spacing:.1em;margin-right:6px}
.hero__stage{margin-top:64px}
.hero__shot{max-width:1000px;margin-inline:auto;box-shadow:var(--shadow);border-radius:16px;background:var(--win)}

/* section heads and rhythm */
.sechead{margin-bottom:clamp(40px,5vw,64px)}
.sechead .sub{margin-top:16px}
.feats .sechead:not(:first-child){margin-top:clamp(96px,11vw,150px)}
.feats .feature+.feature,.feats .sechead+.feature{margin-top:0}
.feats .feature+.feature,.feats .cards+.feature,.feats .feature+.cards,.feats .teams+.feature,.feats .feature+.teams{margin-top:clamp(64px,8vw,112px)}
.cta--c{justify-content:center;margin-top:clamp(40px,5vw,56px)}
.feature__t .cta{margin-top:6px}
.feature__t>h3:first-child,.feature__t>h2:first-child{margin-top:0}
/* illustrations are drawn for a light ground: their frames stay light in dark mode too,
   as the meet page keeps its Slack windows white */
.feature .media,.hero__shot,.ent__img,.ctacard__img{background:#fafaf7}
.fcard__img,.tcard2__img,.ecard__img,.tpl__img,.editor__shot{background:#ecebe4}
.feature .media video{display:block;width:100%;height:auto;background:var(--card-2)}
.media--embed iframe{aspect-ratio:16/9;height:auto}

/* checklists (meet .px-list) */
.checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.checks li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;font-size:15.5px;line-height:1.45;color:var(--ink-2)}
.checks li::before{content:"";width:18px;height:18px;border-radius:50%;margin-top:2px;background:var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.4l2.6 2.5L13 6.3' fill='none' stroke='%230f0f12' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.checks b,.checks strong{color:var(--ink);font-weight:600}

/* logo strip */
.logostrip{padding-top:clamp(64px,8vw,104px)}
.logostrip__t{font-family:var(--display);font-weight:700;font-size:clamp(20px,2vw,26px);letter-spacing:-.03em;color:var(--ink)}
.logostrip .center{margin-bottom:34px;display:flex;flex-direction:column;align-items:center;gap:10px}

/* the homepage agent block */
.agentband .feature__t .sub{color:var(--ink-2)}
.agentband .eyebrow::before{background:var(--lime)}

/* inline lime call-to-action card */
.ctacard{margin-top:clamp(64px,8vw,112px);border-radius:28px;padding:clamp(24px,3.6vw,44px);display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:28px;align-items:center}
.ctacard h3{font-size:clamp(28px,3vw,40px);line-height:1;font-weight:800;letter-spacing:-.045em}
.ctacard__t p{margin-top:12px;color:#2c2b33;font-size:16px}
.ctacard .cta{margin-top:22px;align-items:center}
.cta__or{font:500 12px/1 var(--mono);text-transform:uppercase;letter-spacing:.1em;color:#3d3c44}
.ctacard__img{border-radius:18px;overflow:hidden}
.ctacard__img img{display:block;width:100%;height:auto}
/* the ink band is dark in both themes: its scenes take the dark Slack/Kipwise tokens (mock.css) */
.band--ink .mk.mk{--mk-slack-side:#2c0b2d;--mk-slack-top:#230824;--mk-men:#1d9bd1;--mk-men-bg:rgba(29,155,209,.18);--mk-app:rgba(255,255,255,.1);
  --mk-ok:#b9d83a;--mk-ok-bg:rgba(223,241,74,.13);--mk-rev:#ff8a5c;--mk-rev-bg:rgba(228,87,46,.2);--mk-code:#ff9bb3;--mk-l2:#ff8a5c}
/* the lime band is lime in both themes: a scene on it keeps the light surface (as .band--ink keeps the dark one) */
.ctacard .ctacard__img>.mk.mk{--win:#fff;--card-2:rgba(15,15,18,.06);--card-3:#e3e0d6;--ink:#0f0f12;--ink-2:#3d3c44;--ink-3:#55545c;
  --line:rgba(15,15,18,.1);--line-2:rgba(15,15,18,.22);--tk-bg:#0f0f12;--tk-fg:#f2efe6;--mk-men:#1264a3;--mk-men-bg:rgba(29,155,209,.12);
  --mk-app:rgba(29,28,29,.08);--mk-ok:#1f7a4d;--mk-ok-bg:rgba(31,122,77,.12);--mk-rev:#b33a14;--mk-rev-bg:rgba(228,87,46,.13);--mk-code:#c01343;--mk-l2:#e4572e}

/* feature card grids */
.fcard,.tcard2,.ecard{padding:14px 14px 22px;gap:10px}
.fcard__img,.tcard2__img,.ecard__img{border-radius:16px;overflow:hidden;background:var(--card-2);aspect-ratio:16/10;display:grid;place-items:center}
.fcard__img img,.tcard2__img img,.ecard__img img{display:block;width:100%;height:100%;object-fit:contain}
.fcard .num,.fcard h3,.fcard p,.tcard2 h3,.tcard2 p,.ecard h3,.ecard p,.ecard .more{margin-inline:8px}
.fcard .num{margin-top:8px}
.tcard2 h3,.ecard h3{margin-top:8px}
.ecards{grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr))}
.ecard__img{aspect-ratio:4/3}
.ecard p{font-size:14px}
.editor__shot{max-width:880px;max-height:min(680px,80vh);overflow:hidden;margin:clamp(40px,5vw,56px) auto;padding:clamp(14px,2vw,22px) clamp(14px,2vw,22px) 0;display:flex;flex-direction:column;background:var(--card-2);-webkit-mask-image:linear-gradient(to bottom,#000 72%,transparent);mask-image:linear-gradient(to bottom,#000 72%,transparent)}
.editor__shot img{display:block;width:100%;height:auto}
/* live scenes (css/mock.css) fill their frame; the frame's padding, fade and fixed ratio step aside */
.editor__shot:has(>.mk){max-height:none;padding:0;-webkit-mask-image:none;mask-image:none}
.fcard__img:has(>.mk),.tcard2__img:has(>.mk){aspect-ratio:auto;display:block}
.fcard__img>.mk,.tcard2__img>.mk,.ecard__img>.mk{width:100%;height:100%;border-radius:inherit}

/* templates */
.tpls{grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr))}
.tpl{padding:10px 10px 18px;gap:12px}
.tpl__img{display:block;border-radius:14px;overflow:hidden;aspect-ratio:5/6;background:var(--card-2)}
.tpl__img img{display:block;width:100%;height:100%;object-fit:cover}
.tpl h3{font-size:16.5px;line-height:1.25;margin-inline:6px}

/* enterprise: the meet single-plan ink panel */
.ent{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);border-radius:32px;overflow:hidden;background:var(--band-ink);color:#f2efe6;
  --ink:#f2efe6;--ink-2:#b9b8c0;--ink-3:#8a8991;--card-2:#222229;--line:rgba(242,239,230,.12);--line-2:rgba(242,239,230,.28);--pill:#dff14a;--pill-ink:#0f0f12;--pill-2-ink:#f2efe6}
.ent__l{padding:clamp(28px,4.4vw,56px);display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.ent__img{width:min(220px,60%);border-radius:18px;overflow:hidden;background:rgba(242,239,230,.06)}
.ent__img img{display:block;width:100%;height:auto}
.ent__r{padding:clamp(28px,4.4vw,56px);background:rgba(242,239,230,.04);border-left:1px solid var(--line);display:flex;flex-direction:column;justify-content:center;gap:20px}
.ent__h{font:500 11.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.ent .checks li{color:#f2efe6}

/* testimonials */
.quotes{grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr))}
.quote{margin:0}
.quote h3{font-size:19px;line-height:1.2;font-weight:700;letter-spacing:-.025em}
.quote blockquote{font-size:15px;color:var(--ink-2)}
.quote .more{font-size:14px}
.quote__logo{height:44px;display:flex;align-items:center}
.quote__logo img{max-height:44px;width:auto;max-width:140px;object-fit:contain}
.quote figcaption>span{display:flex;flex-direction:column}

/* the enterprise support strip */
.strip{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;padding:22px 26px;border-radius:20px;background:var(--card-2)}
.strip ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 28px;font-size:15px;font-weight:500}
.strip li{display:flex;align-items:center;gap:9px}
.strip li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green)}

/* ja/index pricing: meet plan cards */
.pricetog{margin-top:22px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--ink-2)}
.pricetog span:not(.tag)+span:not(.tag)::before{content:"·";margin-right:10px;color:var(--ink-3)}
.pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.pc{border-radius:24px;background:var(--card);box-shadow:0 0 0 1px var(--line);padding:24px;display:flex;flex-direction:column;gap:6px}
.pc-h{font-size:14px;font-weight:600;color:var(--ink-2)}
.price{margin-top:18px;font:800 clamp(34px,3.4vw,48px)/1 var(--display);letter-spacing:-.05em;color:var(--ink)}
.pc-mail{color:var(--link);text-decoration:underline;text-underline-offset:3px;font-weight:600;font-size:15px}
.pnote{font-size:13px;color:var(--ink-3)}
.pc .btn{margin:14px 0 16px;width:100%}
.inc{font-size:13px;color:var(--ink-2);margin-bottom:6px;font-weight:600}
.pc ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;font-size:13.5px;color:var(--ink-2)}
.pc li{display:grid;grid-template-columns:16px minmax(0,1fr);gap:8px}
.pc li::before{content:"";width:9px;height:5px;border-left:1.6px solid var(--green);border-bottom:1.6px solid var(--green);transform:rotate(-45deg);margin-top:6px}
.addon{margin-top:12px;display:grid;grid-template-columns:120px minmax(0,1fr) minmax(0,1.2fr);gap:24px;align-items:center;border-radius:24px;background:var(--card-2);padding:20px 24px}
.addon__img{border-radius:18px;overflow:hidden}
.addon__img img{display:block;width:100%;height:auto}
.addon h3{margin-top:10px;font-size:22px;letter-spacing:-.03em}
.addon__amt{margin-top:6px;font:800 26px/1.1 var(--display);letter-spacing:-.04em}
.addon p:not(.tag){font-size:14.5px;color:var(--ink-2)}
.addon .more{margin-top:10px}

.nots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.not{border-radius:20px;background:var(--card);box-shadow:0 0 0 1px var(--line);padding:22px;font-size:15px;line-height:1.55;color:var(--ink-2)}
.not strong,.not b{display:block;color:var(--ink);font-family:var(--display);font-size:19px;letter-spacing:-.03em;font-weight:700;margin-bottom:6px}
.px{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);border-radius:32px;overflow:hidden;background:var(--band-ink);color:#f2efe6;
  --ink:#f2efe6;--ink-2:#b9b8c0;--ink-3:#8a8991;--card-2:#222229;--line:rgba(242,239,230,.12);--line-2:rgba(242,239,230,.28);--pill:#dff14a;--pill-ink:#0f0f12;--pill-2-ink:#f2efe6}
.px-l{padding:clamp(28px,4.4vw,56px);display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.px-img{width:120px;border-radius:24px;overflow:hidden}
.px-img img{display:block;width:100%;height:auto}
.px-amt{font-size:16px;line-height:1.55;color:var(--ink-2)}
.px-amt strong,.px-amt b{display:block;font:800 clamp(56px,7vw,96px)/.9 var(--display);letter-spacing:-.06em;color:var(--lime);margin-bottom:10px}
.px-r{padding:clamp(28px,4.4vw,56px);background:rgba(242,239,230,.04);border-left:1px solid var(--line);display:flex;flex-direction:column;justify-content:center}
.px-list{list-style:none;margin:0;padding:0}
.px-list li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;padding:15px 0;border-bottom:1px solid var(--line);font-size:15.5px;line-height:1.45;color:var(--ink-2)}
.px-list li:last-child{border-bottom:0}
.px-list li::before{content:"";width:18px;height:18px;border-radius:50%;margin-top:2px;background:var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.4l2.6 2.5L13 6.3' fill='none' stroke='%230f0f12' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.px-list b,.px-list strong{color:#f2efe6;font-weight:600}
.band--ink .sechead .sub{color:var(--ink-2)}

/* what's new: a dated timeline */
.timeline{max-width:900px;display:flex;flex-direction:column}
.entry{display:grid;grid-template-columns:140px minmax(0,1fr);gap:28px;padding:32px 0;border-top:1px solid var(--line-2)}
.entry:first-child{border-top:0;padding-top:0}
.entry__date{font:500 13px/1.6 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.entry__b .prose{margin-top:14px;font-size:16px}

/* a closing band inside <main> (pages with their own CTA copy) sits flush on the footer */
main:has(> .final:last-child)+.foot{margin-top:0}

@media(max-width:980px){
  .ctacard,.ent,.px{grid-template-columns:1fr}
  .ent__r,.px-r{border-left:0;border-top:1px solid var(--line)}
  .pgrid,.nots{grid-template-columns:1fr}
  .addon{grid-template-columns:96px minmax(0,1fr)}
  .addon>div:last-child{grid-column:1/-1}
  .entry{grid-template-columns:1fr;gap:8px}
}
@media(max-width:640px){
  .hero__stage{margin-top:44px}
}
.hero__note .capterra{height:16px;width:auto;vertical-align:-3px;margin-right:4px}
.fcard__img--icon{aspect-ratio:auto;height:180px}
.fcard__img--icon img{width:auto;height:auto;max-height:110px;max-width:60%;object-fit:contain}
/* the two icon cards are black hand-drawn line art: light strokes on the dark ground */
:root[data-theme="dark"] .fcard__img--icon img{filter:invert(.92)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .fcard__img--icon img{filter:invert(.92)}}
.px-img{box-shadow:0 0 0 1px var(--line-2)}
.px-price span{display:block;font:800 clamp(80px,10vw,140px)/.82 var(--display);letter-spacing:-.07em;color:var(--lime);font-variant-numeric:tabular-nums}
/* site.css collapses .cards--2/3 to a bare 1fr on phones; long katakana titles then set the min width */
.cards>*{min-width:0}
.card h3,.gc h3{overflow-wrap:anywhere}
@media(max-width:640px){.cards--2,.cards--3{grid-template-columns:minmax(0,1fr)}}
@media(max-width:640px){
  .tpls{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .tpl h3{font-size:14.5px}
  .ecard__img,.fcard__img,.tcard2__img{aspect-ratio:16/9}
}
.teams{margin-top:clamp(64px,8vw,112px)}
.teams .cards{margin-top:28px}
.card--big{grid-row:span 2;background:var(--lime);color:#0f0f12;box-shadow:none;--ink:#0f0f12;--ink-2:#3d3c44;--line-2:rgba(15,15,18,.32)}
.card--big h3{font-size:clamp(26px,2.6vw,34px);line-height:1;font-weight:800;letter-spacing:-.045em}