/* ============================================================
   MYME — section-specific styles
   ============================================================ */

/* ---------- Benefits ---------- */
.ben-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:52px; }
.ben-grid .card h3{ font-size:21px; margin:20px 0 10px; }
.ben-grid .card p{ font-size:15.5px; color:var(--ink-soft); }

/* ---------- Generic feature block ---------- */
.feat{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.feat.reverse .feat-copy{ order:2; }
.feat-copy h2{ font-size:clamp(28px,3.8vw,46px); margin-top:18px; }
.feat-copy .lede{ font-size:19px; color:var(--ink-soft); margin-top:20px; }
.dark .feat-copy .lede{ color:#AEB9BE; }
.feat-sub{ margin-top:18px; font-size:16px; color:var(--ink-soft); }
.feat-visual{ display:flex; justify-content:center; }

/* Inline CTA used inside feature copy blocks */
.cta-link{
  display:inline-flex; align-items:center; gap:10px; margin-top:30px;
  font-family:var(--display); font-weight:700; font-size:16px; color:var(--blue-deep);
  padding:13px 22px; border-radius:999px;
  background:rgba(91,160,242,.1); border:1.5px solid rgba(91,160,242,.34);
  box-shadow:0 1px 2px rgba(46,114,201,.05);
  transition:background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .15s ease;
}
.cta-link svg{ width:19px; height:19px; transition:transform .2s ease; }
.cta-link:hover{
  background:var(--blue); color:#fff; border-color:var(--blue);
  transform:translateY(-2px); box-shadow:0 12px 26px -10px rgba(46,114,201,.6);
}
.cta-link:hover svg{ transform:translateX(4px); }
.cta-link.on-dark{ color:#fff; background:rgba(91,160,242,.18); border-color:rgba(91,160,242,.5); }
.cta-link.on-dark:hover{
  background:var(--blue); border-color:var(--blue); color:#fff;
  box-shadow:0 14px 30px -10px rgba(91,160,242,.7);
}

.how-cta{ display:flex; justify-content:center; margin-top:50px; }

.feat-list{ list-style:none; padding:0; margin:26px 0 0; display:grid; gap:13px; }
.feat-list li{ display:flex; align-items:center; gap:13px; font-size:16.5px; font-weight:500; color:var(--ink); }
.feat-list .ck{
  width:24px; height:24px; border-radius:50%; flex:none;
  background:rgba(137,166,137,.18); position:relative;
}
.feat-list .ck::after{
  content:""; position:absolute; left:8px; top:6px; width:6px; height:10px;
  border:solid var(--green-deep); border-width:0 2px 2px 0; transform:rotate(42deg);
}
.feat-list .ck.soon{ background:rgba(91,160,242,.12); display:grid; place-items:center; }
.feat-list .ck.soon::after{ display:none; }
.feat-list .ck.soon svg{ width:15px; height:15px; color:var(--blue-deep); animation:soon-spin 1.4s linear infinite; }
@media (prefers-reduced-motion: reduce){ .feat-list .ck.soon svg{ animation:none; } }
@keyframes soon-spin{ to{ transform:rotate(360deg); } }
.feat-list .li-soon{ color:var(--ink-soft); }
.feat-list .soon-tag{
  font-style:normal; font-family:var(--display); font-weight:600; font-size:11px;
  letter-spacing:.05em; text-transform:uppercase; color:var(--blue-deep);
  background:rgba(91,160,242,.12); padding:3px 9px; border-radius:999px;
}

/* ---------- Share diagram ---------- */
.share-diagram{
  width:100%; max-width:460px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-xl); padding:34px 30px; box-shadow:var(--shadow);
}
.node{ display:flex; align-items:center; gap:14px; }
.node .av{
  width:50px; height:50px; border-radius:50%; flex:none; display:grid; place-items:center;
  font-family:var(--display); font-weight:800; font-size:16px; color:#fff; background:var(--ink);
}
.node .av.av-blue{ background:var(--blue); }
.node .av.av-green{ background:var(--green); }
.nlabel b{ font-family:var(--display); font-weight:700; font-size:16px; display:block; }
.nlabel span{ font-size:13px; color:var(--muted); }
.node-center{ padding-bottom:22px; margin-bottom:8px; border-bottom:1px dashed var(--line-2); }
.node-center .av{
  width:58px; height:58px; font-size:18px;
  background:linear-gradient(135deg,var(--blue),var(--green));
}
.share-people{ display:grid; gap:16px; position:relative; padding-left:14px; }
.share-people::before{
  content:""; position:absolute; left:0; top:-10px; bottom:18px;
  width:2px; background:var(--line-2);
}
.share-people .node{ position:relative; }
.share-people .node::before{
  content:""; position:absolute; left:-14px; top:50%; width:14px; height:2px; background:var(--line-2);
}
.tag{
  margin-left:auto; font-family:var(--display); font-weight:600; font-size:12px;
  padding:5px 11px; border-radius:999px;
  background:var(--paper-2); color:var(--ink-soft); border:1px solid var(--line); white-space:nowrap;
}
.tag-blue{ background:rgba(91,160,242,.13); color:var(--blue-deep); border-color:rgba(91,160,242,.28); }
.tag-green{ background:rgba(137,166,137,.16); color:var(--green-deep); border-color:rgba(137,166,137,.32); }
.share-foot{
  display:flex; align-items:center; gap:9px; margin-top:24px;
  padding-top:18px; border-top:1px solid var(--line);
  font-size:13px; color:var(--muted);
}
.share-foot svg{ width:17px; height:17px; color:var(--green-deep); flex:none; }

/* ---------- Share carousel (pure-CSS, radio-driven) ---------- */
.share-carousel{ position:relative; width:100%; max-width:460px; }
.sc-radio{ position:absolute; width:0; height:0; opacity:0; pointer-events:none; }
.share-viewport{ overflow:hidden; border-radius:var(--r-xl); }
.share-track{ display:flex; flex-direction:row; transition:transform .42s cubic-bezier(.45,0,.15,1); }
.share-slide{
  position:relative; flex:0 0 100%; min-width:0; padding:4px; box-sizing:border-box;
  display:flex; align-items:stretch;
}
.share-slide .share-diagram{ width:100%; max-width:none; }
#sc0:checked ~ .share-viewport .share-track{ transform:translateX(0); }
#sc1:checked ~ .share-viewport .share-track{ transform:translateX(-100%); }
#sc2:checked ~ .share-viewport .share-track{ transform:translateX(-200%); }

.share-controls{ display:flex; align-items:center; justify-content:center; gap:16px; margin-top:20px; }
.sc-arrow{
  display:none; width:38px; height:38px; border-radius:50%;
  align-items:center; justify-content:center;
  background:var(--card); border:1px solid var(--line-2); box-shadow:var(--shadow-sm);
  font-family:var(--display); font-size:22px; line-height:1; color:var(--ink-soft);
  cursor:pointer; user-select:none; -webkit-user-select:none;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.sc-arrow:hover{ color:var(--ink); border-color:var(--ink-soft); background:var(--paper); }
#sc0:checked ~ .share-controls .nav-prev[data-when="0"],
#sc0:checked ~ .share-controls .nav-next[data-when="0"],
#sc1:checked ~ .share-controls .nav-prev[data-when="1"],
#sc1:checked ~ .share-controls .nav-next[data-when="1"],
#sc2:checked ~ .share-controls .nav-prev[data-when="2"],
#sc2:checked ~ .share-controls .nav-next[data-when="2"]{ display:flex; }

.share-dots{ display:flex; justify-content:center; align-items:center; gap:9px; }
.sc-dot{
  position:relative; width:9px; height:9px; padding:0; border:none; cursor:pointer; border-radius:999px;
  background:var(--line-2); transition:width .24s cubic-bezier(.45,0,.15,1), background .25s;
}
.sc-dot::after{ content:""; position:absolute; inset:-9px; }
.sc-dot:hover{ background:var(--muted); }
#sc0:checked ~ .share-controls .sc-dot:nth-child(1),
#sc1:checked ~ .share-controls .sc-dot:nth-child(2),
#sc2:checked ~ .share-controls .sc-dot:nth-child(3){
  width:30px; background:linear-gradient(90deg,var(--blue),var(--green));
}

/* ---------- QR card ---------- */
.qr-card{
  width:300px; background:var(--navy-card); border:1px solid var(--line-dark);
  border-radius:var(--r-xl); padding:26px; text-align:center; box-shadow:var(--shadow-lg);
}
.qr-card-top{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12.5px; color:#AEB9BE; margin-bottom:18px;
  font-family:var(--display); font-weight:600;
}
.qr-card-top .dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--green); box-shadow:0 0 0 4px rgba(137,166,137,.2);
}
.qr-box{ width:188px; height:188px; margin:0 auto; background:#fff; border-radius:18px; padding:14px; }
.qr-box img{ width:100%; height:100%; display:block; }
.qr-card-name{ font-family:var(--display); font-weight:700; font-size:17px; color:#fff; margin-top:18px; }
.qr-code-row{ display:flex; flex-direction:column; align-items:center; gap:5px; margin-top:16px; }
.qr-code-label{
  font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:#7f9797;
  font-family:var(--display); font-weight:600;
}
.qr-code{
  font-family:var(--display); font-weight:800; font-size:26px; letter-spacing:.16em;
  color:#fff; background:rgba(137,166,137,.12); border:1px solid var(--line-dark);
  border-radius:12px; padding:8px 16px 8px 18px;
}
.qr-card-sub{ font-size:12.5px; color:#90a8a8; margin-top:5px; }
.qr-flow{ display:grid; gap:12px; margin-top:28px; }
.qr-step{ display:flex; align-items:center; gap:14px; font-size:15.5px; color:#CDD6DA; font-weight:500; }
.qr-step .qn{
  width:30px; height:30px; border-radius:50%; flex:none;
  display:grid; place-items:center;
  font-family:var(--display); font-weight:800; font-size:14px;
  color:var(--blue); background:rgba(91,160,242,.14);
  border:1px solid rgba(91,160,242,.3);
}

/* ---------- Privacy grid ---------- */
.priv-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:52px; }
.priv-grid .card h3{ font-size:20px; margin:18px 0 9px; }
.priv-grid .card p{ font-size:15.5px; color:var(--ink-soft); }

/* ---------- Steps ---------- */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:54px; }
.step{ position:relative; padding-top:8px; }
.snum{
  font-family:var(--display); font-weight:800; font-size:46px; line-height:1;
  color:transparent; -webkit-text-stroke:1.6px var(--green-deep); margin-bottom:18px;
}
.step:nth-child(2) .snum{ -webkit-text-stroke-color:var(--blue-deep); }
.step h3{ font-size:23px; margin-bottom:10px; }
.step p{ font-size:16px; color:var(--ink-soft); }

/* ---------- P4 ---------- */
.p4-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:44px; }
.p4-item{ padding:26px 22px; border:1px solid var(--line-dark); border-radius:var(--r); background:var(--navy-2); }
.p4-item b{
  font-family:var(--display); font-weight:800; font-size:21px; display:block; margin-bottom:10px;
  background:linear-gradient(98deg,var(--blue),#a9c6a9);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.p4-item span{ font-size:15px; color:#AEB9BE; }

.p4-photo-sec{ position:relative; overflow:hidden; }
.p4-inner{ position:relative; z-index:2; }
.p4-copy{ max-width:600px; }
.p4-photo-single{
  position:absolute; top:0; right:0; bottom:0; width:42%; height:100%;
  display:block; z-index:1; object-fit:cover; background:var(--navy);
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 36%), linear-gradient(180deg, transparent 0, #000 11%, #000 89%, transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(90deg, transparent 0, #000 36%), linear-gradient(180deg, transparent 0, #000 11%, #000 89%, transparent 100%);
          mask-composite:intersect;
}

@media (max-width:860px){
  .p4-photo-sec{ padding-bottom:0; }
  .p4-copy{ max-width:none; }
  .p4-photo-single{
    position:relative; width:100%; height:280px; margin-top:48px; object-position:50% 33%;
    -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 24%);
            mask-image:linear-gradient(180deg, transparent 0, #000 24%);
  }
}

/* ---------- Final CTA ---------- */
.cta-final{ background:var(--navy); color:#fff; text-align:center; position:relative; overflow:hidden; }
.cta-final::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(620px 320px at 50% 0%, rgba(91,160,242,.22), transparent 60%),
    radial-gradient(560px 340px at 50% 100%, rgba(137,166,137,.18), transparent 62%);
}
.cta-inner{ position:relative; max-width:760px; margin:0 auto; }
.cta-inner h2{ color:#fff; font-size:clamp(32px,5vw,56px); }
.cta-inner p{ font-size:19px; color:#AEB9BE; margin:20px auto 0; max-width:520px; }
.cta-btns{ display:flex; gap:14px; justify-content:center; margin-top:34px; flex-wrap:wrap; }

/* ---------- Footer ---------- */
.foot-grid{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px;
  padding-bottom:48px; border-bottom:1px solid var(--line-dark);
}
.foot-logo{ height:40px; width:auto; margin-bottom:18px; }
.foot-brand p{ font-size:14.5px; color:#90a0a6; max-width:300px; }
.foot-email{
  display:inline-block; margin-top:18px; font-size:15px; color:#cdd6da;
  border-bottom:1px solid var(--line-dark); padding-bottom:2px;
  transition:color .15s ease, border-color .15s ease;
}
.foot-email:hover{ color:#fff; border-color:rgba(255,255,255,.45); }
.foot-social{ display:flex; gap:10px; margin-top:22px; }
.foot-social a{
  width:40px; height:40px; border-radius:11px; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.06); border:1px solid var(--line-dark); color:#cdd6da;
  transition:background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.foot-social a:hover{ background:#fff; color:var(--navy); border-color:#fff; transform:translateY(-2px); }
.foot-social svg{ width:19px; height:19px; }
.foot-col h4{
  font-family:var(--display); font-weight:700; font-size:13px;
  letter-spacing:.1em; text-transform:uppercase; color:#cdd6da; margin-bottom:16px;
}
.foot-col a{ display:block; font-size:15px; color:#90a0a6; padding:6px 0; transition:color .15s; }
.foot-col a:hover{ color:#fff; }
.foot-base{
  display:flex; justify-content:space-between; padding-top:26px;
  font-size:13px; color:#7a8a8f; flex-wrap:wrap; gap:10px;
}
.foot-lang-links{ display:flex; gap:8px; }
.foot-lang-links a{ color:#7a8a8f; transition:color .15s; }
.foot-lang-links a:hover{ color:#fff; }
.foot-lang-links a.is-active{ color:#fff; }
.foot-lang-links .sep{ color:#3a4549; }

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .ben-grid{ grid-template-columns:repeat(2,1fr); }
  .feat{ grid-template-columns:1fr; gap:44px; }
  .feat.reverse .feat-copy{ order:0; }
  .feat-visual{ order:0; }
  .feat-copy, .feat-visual{ min-width:0; }
  .priv-grid,.steps{ grid-template-columns:1fr; gap:18px; }
  .p4-grid{ grid-template-columns:repeat(2,1fr); }
  .foot-grid{ grid-template-columns:1fr 1fr; gap:30px; }
  .foot-brand{ grid-column:1/-1; }
}
@media (max-width:600px){
  .ben-grid{ grid-template-columns:1fr; }
  .p4-grid{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr; }
  .share-carousel,.share-slide .share-diagram{ max-width:none; }
  .share-diagram{ padding:24px 18px; }
  .node{ gap:12px; }
  .node .av{ width:44px; height:44px; font-size:14px; }
  .node-center .av{ width:50px; height:50px; font-size:16px; }
  .nlabel{ min-width:0; }
  .nlabel b{ font-size:15px; }
  .share-people{ padding-left:12px; }
  .share-people .node{ flex-wrap:wrap; row-gap:7px; }
  .tag{ font-size:11px; padding:4px 9px; }
  .share-foot{ font-size:12px; }
}